Bump version to 2.1.0-beta

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fix series ordering with browse order fallback
2025-12-18 21:52:27 +00:00 · 2025-12-18 21:38:47 +00:00 · 2025-12-18 21:36:23 +00:00 · 2025-12-18 21:19:08 +00:00 · 2025-12-18 21:16:34 +00:00 · 2025-12-18 21:00:40 +00:00
105 changed files with 21087 additions and 8643 deletions
@@ -4,10 +4,13 @@ on:
  push:
    branches:
      - main
+      - master
      - 'claude/**'
+      - 'feature/**'
  pull_request:
    branches:
      - main
+      - master
  workflow_dispatch:

 jobs:
@@ -35,6 +38,9 @@ jobs:
      - name: Get dependencies
        run: flutter pub get

+      - name: Generate code (Drift database)
+        run: dart run build_runner build --delete-conflicting-outputs
+
      - name: Generate launcher icons
        run: flutter pub run flutter_launcher_icons

@@ -3,7 +3,7 @@

 ---

-  <p>A minimalistic mobile client for <a href="https://music-assistant.io/">Music Assistant</a></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>

@@ -11,7 +11,9 @@

 ## 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**.

 ---

@@ -28,9 +30,18 @@ I am not a developer. This application was created using **Claude Code** and **G
 - **Full Playback Controls** - Play, pause, skip, seek, and adjust volume
 - **Queue Management** - View and manage the playback queue

+### 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, and tracks from all your music sources
+- **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
@@ -87,15 +98,7 @@ Ensemble supports multiple authentication methods:
 - Network connectivity to your Music Assistant server
 - Android device (Android 5.0+)

-## About Music Assistant
-
-Ensemble is a mobile client for [Music Assistant](https://music-assistant.io/), an open-source music library manager that integrates with various music sources and streaming providers.
-
-With Ensemble, you can:
- **Stream locally** - Use your phone as a Music Assistant player
- **Control remotely** - Manage playback on smart speakers, Chromecast, Sonos, and more
-
-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

@@ -1,571 +0,0 @@
-# Ensemble Performance Audit: Animation Smoothness Optimization
-
-**Date**: 2025-12-05
-**Target**: Achieve buttery-smooth animations comparable to Symphonium media player
-**Branch**: performance/animation-smoothness
-**Auditor**: Claude Code
-
---
-
-## Executive Summary
-
-This audit focuses specifically on Flutter performance optimizations to achieve 60fps+ animations and eliminate jank in the Ensemble music player app. The codebase has good foundational work (RepaintBoundary on cards, image caching, AutomaticKeepAliveClientMixin), but there are several opportunities for improvement to match the smoothness of premium music players like Symphonium.
-
-### Performance Status
-
-**Current State:**
- ✅ RepaintBoundary on AlbumCard and ArtistCard
- ✅ Image caching with cacheWidth/cacheHeight
- ✅ AutomaticKeepAliveClientMixin on row widgets
- ⚠️ Missing keys on list items
- ⚠️ Missing const constructors in many widgets
- ⚠️ ListView.builder without itemExtent where applicable
- ⚠️ setState calls could be more targeted
- ⚠️ No state restoration (scroll positions lost on navigation)
- ⚠️ Hero animations missing in Library screen
-
-### Performance Impact Categories
-
-| Category | Impact | Complexity | Priority |
-|----------|--------|------------|----------|
-| Quick Wins | High | Low | Critical |
-| Widget Rebuilds | High | Medium | High |
-| Animation Tuning | Medium | Low | High |
-| List Performance | Medium | Low | Medium |
-| State Restoration | Low | Medium | Low |
-
---
-
-## Category 1: Quick Wins (Immediate Impact, Low Effort)
-
-### QW-1: Add Missing `const` Constructors
-
-**Issue**: Many stateless widgets lack const constructors, causing unnecessary rebuilds.
-
-**Impact**: High - const widgets are cached by Flutter and reused, reducing rebuild overhead significantly.
-
-**Locations**:
- `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart:8` - LibraryArtistsScreen
- `/home/home-server/Ensemble/lib/screens/library_albums_screen.dart:7` - LibraryAlbumsScreen
- Various SizedBox, Padding, Icon widgets throughout
-
-**Fix**:
-```dart
-// Before:
-class LibraryArtistsScreen extends StatelessWidget {
-  LibraryArtistsScreen({super.key});
-
-// After:
-class LibraryArtistsScreen extends StatelessWidget {
-  const LibraryArtistsScreen({super.key});
-```
-
-**Estimated Savings**: 5-10% reduction in widget rebuilds
-
---
-
-### QW-2: Add Keys to List Items
-
-**Issue**: ListView.builder and GridView.builder items lack keys, causing Flutter to rebuild entire items instead of reusing them.
-
-**Impact**: High - Without keys, Flutter can't track widgets during list updates, causing full rebuilds.
-
-**Locations**:
- `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart:88-95` - Artists list
- `/home/home-server/Ensemble/lib/screens/library_albums_screen.dart:87-103` - Albums grid
- `/home/home-server/Ensemble/lib/widgets/album_row.dart:89-104` - Album horizontal list
- `/home/home-server/Ensemble/lib/widgets/artist_row.dart:89-104` - Artist horizontal list
-
-**Fix**:
-```dart
-// Before:
-itemBuilder: (context, index) {
-  final artist = provider.artists[index];
-  return _buildArtistTile(context, artist, provider);
-}
-
-// After:
-itemBuilder: (context, index) {
-  final artist = provider.artists[index];
-  return _buildArtistTile(
-    context,
-    artist,
-    provider,
-    key: ValueKey(artist.uri ?? artist.itemId),
-  );
-}
-```
-
-**Estimated Savings**: 15-25% reduction in list scroll jank
-
---
-
-### QW-3: Add itemExtent to Horizontal Lists
-
-**Issue**: Horizontal lists don't specify itemExtent, forcing Flutter to measure every item.
-
-**Impact**: Medium - itemExtent allows Flutter to calculate layout without measuring, improving scroll performance.
-
-**Locations**:
- `/home/home-server/Ensemble/lib/widgets/album_row.dart:89` - Fixed width of 150 + 12 margins = 162
- `/home/home-server/Ensemble/lib/widgets/artist_row.dart:89` - Fixed width of 120 + 16 margins = 136
-
-**Fix**:
-```dart
-// Before:
-ListView.builder(
-  scrollDirection: Axis.horizontal,
-  itemCount: albums.length,
-  itemBuilder: ...
-
-// After:
-ListView.builder(
-  scrollDirection: Axis.horizontal,
-  itemCount: albums.length,
-  itemExtent: 162, // Width + margins
-  itemBuilder: ...
-```
-
-**Estimated Savings**: 10-15% improvement in horizontal scroll smoothness
-
---
-
-### QW-4: Add RepaintBoundary to List Tiles
-
-**Issue**: Artist list tiles in library screens lack RepaintBoundary, causing entire lists to repaint.
-
-**Impact**: Medium - RepaintBoundary isolates repaints to individual tiles.
-
-**Locations**:
- `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart:99-134` - Artist tiles
- `/home/home-server/Ensemble/lib/screens/new_library_screen.dart` - Library artist tiles (around line 200)
-
-**Fix**:
-```dart
-Widget _buildArtistTile(...) {
-  return RepaintBoundary(
-    child: ListTile(
-      leading: CircleAvatar(...),
-      title: Text(...),
-      onTap: () {...},
-    ),
-  );
-}
-```
-
-**Estimated Savings**: 5-10% reduction in repaint overhead
-
---
-
-### QW-5: Fix Library Screen Hero Animations
-
-**Issue**: Library screen artist tiles are missing Hero widgets, breaking animations to ArtistDetailsScreen.
-
-**Impact**: High (UX) - Smooth hero animations are critical for premium feel.
-
-**Location**: `/home/home-server/Ensemble/lib/screens/new_library_screen.dart` (around lines 200-235)
-
-**Fix**: Wrap CircleAvatar and Text with Hero widgets matching ArtistDetailsScreen tags.
-
-```dart
-Widget _buildArtistTile(BuildContext context, Artist artist, MusicAssistantProvider provider) {
-  final imageUrl = provider.getImageUrl(artist, size: 128);
-  final suffix = '_library';
-
-  return ListTile(
-    leading: Hero(
-      tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
-      child: CircleAvatar(
-        radius: 24,
-        backgroundImage: imageUrl != null ? NetworkImage(imageUrl) : null,
-      ),
-    ),
-    title: Hero(
-      tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
-      child: Material(
-        color: Colors.transparent,
-        child: Text(artist.name),
-      ),
-    ),
-    onTap: () {...},
-  );
-}
-```
-
-**Estimated Impact**: Eliminates jarring cross-fade, creates smooth morphing animation
-
---
-
-## Category 2: Widget Rebuild Optimization
-
-### WR-1: Replace context.watch() with context.select() in Lists
-
-**Issue**: Using context.watch<MusicAssistantProvider>() causes entire screen rebuilds when any provider property changes.
-
-**Impact**: High - Lists rebuild unnecessarily when unrelated state changes (e.g., playback state).
-
-**Locations**:
- `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart:13`
- `/home/home-server/Ensemble/lib/screens/library_albums_screen.dart:12`
- `/home/home-server/Ensemble/lib/screens/new_library_screen.dart:62`
-
-**Fix**:
-```dart
-// Before:
-final provider = context.watch<MusicAssistantProvider>();
-// Rebuilds when currentTrack, isPlaying, volume, etc. change
-
-// After:
-final artists = context.select<MusicAssistantProvider, List<Artist>>(
-  (p) => p.artists
-);
-final isLoading = context.select<MusicAssistantProvider, bool>(
-  (p) => p.isLoading
-);
-// Only rebuilds when artists or isLoading change
-```
-
-**Estimated Savings**: 30-50% reduction in unnecessary rebuilds
-
---
-
-### WR-2: Extract Static Widgets
-
-**Issue**: Static decoration widgets are recreated on every build.
-
-**Impact**: Medium - Flutter recreates identical widgets instead of reusing them.
-
-**Locations**: Throughout screens (Icons, Padding, SizedBox, etc.)
-
-**Fix**:
-```dart
-// Before:
-Icon(Icons.person_rounded, size: 60, color: colorScheme.onSurfaceVariant)
-
-// After:
-static const _placeholderIcon = Icon(Icons.person_rounded, size: 60);
-// Use colorScheme.onSurfaceVariant in IconTheme instead
-```
-
-**Estimated Savings**: 2-5% reduction in widget allocations
-
---
-
-### WR-3: Add const to BoxDecoration and TextStyle
-
-**Issue**: Decorations and styles are recreated on every build.
-
-**Impact**: Low-Medium - Small per-widget overhead that adds up in lists.
-
-**Fix**: Use const where colors are not dynamic, extract to constants file for reuse.
-
---
-
-## Category 3: Animation Improvements
-
-### AN-1: Optimize Hero Animation Curves
-
-**Issue**: FadeSlidePageRoute uses generic easeOut/easeIn curves.
-
-**Impact**: Medium - Better curves create more natural animations.
-
-**Location**: `/home/home-server/Ensemble/lib/utils/page_transitions.dart`
-
-**Recommendation**:
-```dart
-// Current:
-curve: Curves.easeOut,
-reverseCurve: Curves.easeIn,
-
-// Better for hero animations:
-curve: Curves.easeOutCubic,
-reverseCurve: Curves.easeInCubic,
-
-// Or match Material Design 3:
-curve: Curves.easeInOutCubicEmphasized,
-```
-
-**Note**: ExpandablePlayer already uses easeOutCubic/easeInCubic (good!)
-
---
-
-### AN-2: Reduce Overdraw with Transparent Backgrounds
-
-**Issue**: Some widgets have unnecessary background colors causing overdraw.
-
-**Impact**: Low - Minor GPU savings, more noticeable on older devices.
-
-**Recommendation**: Audit Material widgets for unnecessary color properties.
-
---
-
-### AN-3: Animation Disposal
-
-**Issue**: Verify all AnimationController instances are disposed.
-
-**Status**: ✅ Already handled correctly in ExpandablePlayer and GlobalPlayerOverlay
-
---
-
-## Category 4: List Performance
-
-### LP-1: Enable ListView.builder cacheExtent Tuning
-
-**Issue**: Default cacheExtent may not be optimal for music library browsing.
-
-**Impact**: Medium - Prebuilding items off-screen prevents scroll stutters.
-
-**Recommendation**:
-```dart
-ListView.builder(
-  cacheExtent: 500, // Prebuild ~500px off-screen
-  itemCount: items.length,
-  itemBuilder: ...
-)
-```
-
-**Note**: Test on device to find optimal value (300-1000px typical range).
-
---
-
-### LP-2: Lazy Load Images in Lists
-
-**Issue**: NetworkImage starts loading immediately, even for off-screen items.
-
-**Impact**: Low - Flutter already lazy-loads decoding, but could optimize further.
-
-**Current State**: ✅ Already using cacheWidth/cacheHeight (good!)
-
-**Optional Enhancement**: Use cached_network_image package for better caching.
-
---
-
-### LP-3: GridView childAspectRatio Precision
-
-**Issue**: GridView.builder uses childAspectRatio: 0.75, causing layout calculations.
-
-**Impact**: Very Low - Already efficient, no changes needed.
-
-**Status**: ✅ Current implementation is optimal
-
---
-
-## Category 5: State Restoration
-
-### SR-1: Preserve Scroll Positions
-
-**Issue**: Scroll positions are lost when navigating away and back to library screens.
-
-**Impact**: Medium (UX) - Users have to scroll back to where they were.
-
-**Locations**:
- Library artists/albums/playlists tabs
- Home screen rows
-
-**Fix**: Implement PageStorageKey for lists
-```dart
-ListView.builder(
-  key: const PageStorageKey<String>('artists_list'),
-  itemCount: items.length,
-  itemBuilder: ...
-)
-```
-
---
-
-### SR-2: Implement RestorationMixin for Tab State
-
-**Issue**: NewLibraryScreen tab selection is lost on app restart.
-
-**Impact**: Low (UX) - Minor annoyance, not performance-related.
-
-**Recommendation**: Add RestorationMixin to NewLibraryScreen state.
-
---
-
-## Performance Benchmarking Recommendations
-
-### Metrics to Track
-
-1. **Frame Rendering Time**: Should be <16ms (60fps) or <11ms (90fps on capable devices)
-2. **Jank Count**: Number of frames >16ms (target: <5% of frames)
-3. **Overdraw**: Use Flutter DevTools Performance Overlay
-4. **Widget Rebuild Count**: Use performance overlay to track rebuilds
-5. **Memory Usage**: Track during long scrolling sessions
-
-### Testing Scenarios
-
-1. **Scroll Performance Test**:
-   - Library with 1000+ albums
-   - Continuous fast scroll for 30 seconds
-   - Measure frame drops and jank count
-
-2. **Animation Smoothness Test**:
-   - Navigate Album → Details → Back 20 times rapidly
-   - Measure hero animation frame rate
-   - Check for stutter or dropped frames
-
-3. **Mini Player Expansion Test**:
-   - Expand/collapse player 20 times
-   - Measure animation consistency
-   - Check for layout jank
-
-4. **Concurrent Operations Test**:
-   - Play music while scrolling library
-   - Navigate between screens during playback
-   - Ensure no frame drops during animations
-
-### Tools
-
- Flutter DevTools Performance View
- Timeline profiler
- Performance overlay: `flutter run --profile`
- fps_monitor package for production monitoring
-
---
-
-## Implementation Priority
-
-### Phase 1: Quick Wins (1-2 hours)
-Priority: **CRITICAL** - Highest impact/effort ratio
-
- [ ] QW-1: Add const constructors
- [ ] QW-2: Add keys to list items
- [ ] QW-3: Add itemExtent to horizontal lists
- [ ] QW-4: Add RepaintBoundary to list tiles
- [ ] QW-5: Fix Library hero animations
-
-**Expected Impact**: 20-35% improvement in scroll smoothness, eliminate hero animation jank
-
---
-
-### Phase 2: Widget Rebuilds (2-3 hours)
-Priority: **HIGH** - Significant performance gains
-
- [ ] WR-1: Replace context.watch() with context.select()
- [ ] WR-2: Extract static widgets
- [ ] WR-3: Add const to decorations/styles
-
-**Expected Impact**: 25-40% reduction in unnecessary rebuilds
-
---
-
-### Phase 3: Animation Tuning (30 min)
-Priority: **HIGH** - Polish that users notice
-
- [ ] AN-1: Optimize curve selection
- [ ] AN-2: Reduce overdraw
-
-**Expected Impact**: Subtle but noticeable smoothness improvement
-
---
-
-### Phase 4: List Optimization (1 hour)
-Priority: **MEDIUM** - Performance headroom for large libraries
-
- [ ] LP-1: Add cacheExtent tuning
- [ ] LP-2: Verify image lazy loading (already good)
-
-**Expected Impact**: 10-15% improvement in large list scroll performance
-
---
-
-### Phase 5: State Restoration (1-2 hours)
-Priority: **LOW** - UX polish, not performance
-
- [ ] SR-1: Add PageStorageKey to lists
- [ ] SR-2: Implement RestorationMixin for tabs
-
-**Expected Impact**: Better UX, maintains user context
-
---
-
-## Files to Modify
-
-### High Priority (Phase 1-2)
-1. `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart`
-2. `/home/home-server/Ensemble/lib/screens/library_albums_screen.dart`
-3. `/home/home-server/Ensemble/lib/screens/new_library_screen.dart`
-4. `/home/home-server/Ensemble/lib/widgets/album_row.dart`
-5. `/home/home-server/Ensemble/lib/widgets/artist_row.dart`
-
-### Medium Priority (Phase 3-4)
-6. `/home/home-server/Ensemble/lib/utils/page_transitions.dart`
-7. `/home/home-server/Ensemble/lib/widgets/album_card.dart` (verify, already good)
-8. `/home/home-server/Ensemble/lib/widgets/artist_card.dart` (verify, already good)
-
-### Low Priority (Phase 5)
-9. State restoration utilities (may need new file)
-
---
-
-## Success Criteria
-
-### Performance Targets
- [ ] 95%+ of frames render in <16ms (60fps)
- [ ] <5% jank rate during scroll/animations
- [ ] Hero animations consistently smooth (no visible stutter)
- [ ] Mini player expansion/collapse at 60fps
- [ ] Library scroll maintains 60fps with 1000+ items
-
-### Code Quality
- [ ] flutter analyze: 0 errors, 0 warnings
- [ ] No performance-related lint warnings
- [ ] All AnimationControllers properly disposed
- [ ] Consistent use of const constructors
-
-### User Experience
- [ ] Animations feel comparable to Symphonium
- [ ] No visible lag during navigation
- [ ] Scroll positions preserved (Phase 5)
- [ ] Smooth transitions throughout app
-
---
-
-## Notes
-
-**What's Already Good:**
- RepaintBoundary on cards ✅
- Image caching with dimensions ✅
- AutomaticKeepAliveClientMixin on rows ✅
- Proper animation controller disposal ✅
- Good use of CurvedAnimation ✅
-
-**Biggest Opportunities:**
-1. Adding keys to list items (huge impact, easy fix)
-2. Replacing context.watch() with context.select() (massive rebuild reduction)
-3. Adding const constructors (free performance)
-4. Fixing hero animations (UX polish)
-
-**Reference Implementation:**
-The ExpandablePlayer and card widgets are well-optimized examples. Use them as templates for other widgets.
-
---
-
-## Appendix: Flutter Performance Best Practices Applied
-
-### ✅ Already Implemented
- RepaintBoundary for expensive widgets
- const constructors where appropriate
- AutomaticKeepAliveClientMixin for stateful widgets
- Image caching with explicit dimensions
- CurvedAnimation for smooth curves
- Proper animation controller management
- SingleTickerProviderStateMixin where needed
-
-### ⚠️ Partially Implemented
- Keys on list items (missing in several places)
- const constructors (many widgets still mutable)
- Targeted rebuilds (some broad context.watch() usage)
-
-### ❌ Not Yet Implemented
- PageStorageKey for scroll restoration
- itemExtent for fixed-size lists
- cacheExtent tuning
- Comprehensive use of context.select()
-
---
-
-**End of Audit**
-
-**Next Steps**: Implement Phase 1 (Quick Wins) on `performance/animation-smoothness` branch and measure impact before proceeding to Phase 2.
@@ -1,502 +0,0 @@
-# Performance Fixes Implementation Summary
-
-**Date**: 2025-12-05
-**Branch**: performance/animation-smoothness
-**Goal**: Achieve buttery-smooth 60fps+ animations comparable to Symphonium media player
-
---
-
-## Executive Summary
-
-Successfully implemented **100%** of the identified quick wins and high-priority performance optimizations from the Ensemble Performance Audit. All changes focus on reducing unnecessary widget rebuilds, optimizing list performance, and improving animation smoothness.
-
-### Implementation Status
-
-| Phase | Items | Status | Completion |
-|-------|-------|--------|------------|
-| Phase 1: Quick Wins | 5 items | ✅ Complete | 100% |
-| Phase 2: Widget Rebuilds | 3 items | ✅ Complete | 100% |
-| Phase 3: Animation Tuning | 1 item | ✅ Complete | 100% |
-| Phase 4: List Optimization | 1 item | ✅ Complete | 100% |
-| Phase 5: State Restoration | 1 item | ✅ Complete | 100% |
-
-**Overall Completion**: 100% (11/11 items)
-
---
-
-## Files Modified
-
-### Core Library Screens
-1. `/home/home-server/Ensemble/lib/screens/library_artists_screen.dart`
-2. `/home/home-server/Ensemble/lib/screens/library_albums_screen.dart`
-3. `/home/home-server/Ensemble/lib/screens/new_library_screen.dart`
-
-### Widgets
-4. `/home/home-server/Ensemble/lib/widgets/album_row.dart`
-5. `/home/home-server/Ensemble/lib/widgets/artist_row.dart`
-
-### Utilities
-6. `/home/home-server/Ensemble/lib/utils/page_transitions.dart`
-
-**Total Files Modified**: 6
-
---
-
-## Detailed Changes by Phase
-
-### Phase 1: Quick Wins (Critical Priority)
-
-#### ✅ QW-1: Added `const` Constructors
-**Impact**: High - 5-10% reduction in widget rebuilds
-
-**Changes**:
- `LibraryArtistsScreen`: Added `const` constructor
- `LibraryAlbumsScreen`: Added `const` constructor
- All stateless widgets now use const constructors where applicable
-
-**Code Example**:
-```dart
-// Before:
-class LibraryArtistsScreen extends StatelessWidget {
-  LibraryArtistsScreen({super.key});
-
-// After:
-class LibraryArtistsScreen extends StatelessWidget {
-  const LibraryArtistsScreen({super.key});
-```
-
---
-
-#### ✅ QW-2: Added Keys to List Items
-**Impact**: High - 15-25% reduction in list scroll jank
-
-**Changes**:
- Added `ValueKey` to all list items in:
-  - `library_artists_screen.dart` (line 104)
-  - `library_albums_screen.dart` (line 99)
-  - `new_library_screen.dart` (artists: line 212, albums: line 319)
-  - `album_row.dart` (line 97)
-  - `artist_row.dart` (line 97)
-
-**Code Example**:
-```dart
-return AlbumCard(
-  key: ValueKey(album.uri ?? album.itemId),
-  album: album,
-  heroTagSuffix: 'library',
-);
-```
-
---
-
-#### ✅ QW-3: Added itemExtent to Horizontal Lists
-**Impact**: Medium - 10-15% improvement in horizontal scroll smoothness
-
-**Changes**:
- `album_row.dart`: Added `itemExtent: 162` (150px width + 12px margins)
- `artist_row.dart`: Added `itemExtent: 136` (120px width + 16px margins)
-
-**Code Example**:
-```dart
-ListView.builder(
-  scrollDirection: Axis.horizontal,
-  itemCount: albums.length,
-  itemExtent: 162, // Width + margins
-  itemBuilder: ...
-)
-```
-
---
-
-#### ✅ QW-4: Added RepaintBoundary to List Tiles
-**Impact**: Medium - 5-10% reduction in repaint overhead
-
-**Changes**:
- Wrapped artist list tiles with `RepaintBoundary`:
-  - `library_artists_screen.dart` (line 122)
-  - `new_library_screen.dart` (line 220)
-
-**Code Example**:
-```dart
-Widget _buildArtistTile(...) {
-  return RepaintBoundary(
-    child: ListTile(
-      // ListTile content
-    ),
-  );
-}
-```
-
---
-
-#### ✅ QW-5: Fixed Library Screen Hero Animations
-**Impact**: High (UX) - Eliminates jarring transitions, creates smooth morphing
-
-**Changes**:
- Added Hero widgets to artist tiles in `new_library_screen.dart`:
-  - Hero tag for CircleAvatar (artist image)
-  - Hero tag for Text (artist name) with Material wrapper
-  - Tags match the format in `ArtistDetailsScreen`
-
-**Code Example**:
-```dart
-leading: Hero(
-  tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + '_library',
-  child: CircleAvatar(...)
-),
-title: Hero(
-  tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + '_library',
-  child: Material(
-    color: Colors.transparent,
-    child: Text(artist.name),
-  ),
-)
-```
-
---
-
-### Phase 2: Widget Rebuild Optimization (High Priority)
-
-#### ✅ WR-1: Replaced context.watch() with Selector
-**Impact**: High - 30-50% reduction in unnecessary rebuilds
-
-**Changes**:
- `library_artists_screen.dart`: Uses `Selector<MusicAssistantProvider, (List<Artist>, bool)>` to only rebuild when artists or loading state changes
- `library_albums_screen.dart`: Uses `Selector<MusicAssistantProvider, (List<Album>, bool)>` to only rebuild when albums or loading state changes
- `new_library_screen.dart`:
-  - Main build uses `Selector<MusicAssistantProvider, bool>` for connection state
-  - Artists tab uses `Selector` for (artists, isLoading)
-  - Albums tab uses `Selector` for (albums, isLoading)
-
-**Benefit**: Previously, these widgets rebuilt on ANY provider change (playback state, volume, current track, etc.). Now they only rebuild when their specific data changes.
-
-**Code Example**:
-```dart
-// Before:
-final provider = context.watch<MusicAssistantProvider>();
-// Rebuilds when currentTrack, isPlaying, volume, etc. change
-
-// After:
-Selector<MusicAssistantProvider, (List<Artist>, bool)>(
-  selector: (_, provider) => (provider.artists, provider.isLoading),
-  builder: (context, data, _) {
-    final (artists, isLoading) = data;
-    // Only rebuilds when artists or isLoading change
-  },
-)
-```
-
---
-
-#### ✅ WR-2: Converted to context.read() Where Appropriate
-**Impact**: Medium - Eliminates unnecessary widget subscriptions
-
-**Changes**:
- Replaced `provider.loadLibrary()` with `context.read<MusicAssistantProvider>().loadLibrary()` in callbacks
- Used `context.read()` in `_buildArtistTile()` and `_buildPlaylistTile()` methods
-
-**Benefit**: Prevents these methods from subscribing to provider changes when they only need one-time access.
-
---
-
-### Phase 3: Animation Improvements (High Priority)
-
-#### ✅ AN-1: Optimized Hero Animation Curves
-**Impact**: Medium - Noticeably smoother and more natural animations
-
-**Changes**:
- `page_transitions.dart`: Updated all animation curves:
-  - `Curves.easeOut` → `Curves.easeOutCubic`
-  - `Curves.easeIn` → `Curves.easeInCubic`
-
-**Benefit**: Cubic curves provide more natural, premium-feeling motion that better matches Material Design 3 guidelines and apps like Symphonium.
-
-**Code Example**:
-```dart
-// Before:
-curve: Curves.easeOut,
-reverseCurve: Curves.easeIn,
-
-// After:
-curve: Curves.easeOutCubic,
-reverseCurve: Curves.easeInCubic,
-```
-
---
-
-### Phase 4: List Performance (Medium Priority)
-
-#### ✅ LP-1: Added cacheExtent Tuning
-**Impact**: Medium - 10-15% improvement in large list scroll performance
-
-**Changes**:
- Added `cacheExtent: 500` to all ListViews and GridViews:
-  - `library_artists_screen.dart`
-  - `library_albums_screen.dart`
-  - `new_library_screen.dart` (all 3 tabs)
-
-**Benefit**: Prebuilds items ~500px off-screen, preventing scroll stutters when items come into view.
-
-**Code Example**:
-```dart
-ListView.builder(
-  cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
-  itemCount: items.length,
-  itemBuilder: ...
-)
-```
-
---
-
-### Phase 5: State Restoration (Low Priority - UX Polish)
-
-#### ✅ SR-1: Added PageStorageKey to All Lists
-**Impact**: Medium (UX) - Users no longer lose scroll position
-
-**Changes**:
- Added unique `PageStorageKey<String>` to all scrollable lists:
-  - `library_artists_full_list`
-  - `library_albums_full_grid`
-  - `library_artists_list` (in NewLibraryScreen)
-  - `library_albums_grid` (in NewLibraryScreen)
-  - `library_playlists_list`
-
-**Benefit**: Scroll positions are now preserved when navigating away and back to library screens.
-
-**Code Example**:
-```dart
-ListView.builder(
-  key: const PageStorageKey<String>('library_artists_list'),
-  itemCount: items.length,
-  itemBuilder: ...
-)
-```
-
---
-
-## Performance Impact Estimates
-
-### Expected Improvements
-
-| Optimization | Expected Impact | Affected Operations |
-|--------------|----------------|---------------------|
-| const Constructors | 5-10% | All widget rebuilds |
-| List Item Keys | 15-25% | List scrolling and updates |
-| itemExtent | 10-15% | Horizontal list scrolling |
-| RepaintBoundary | 5-10% | List item repaints |
-| Selector vs watch() | 30-50% | Provider-triggered rebuilds |
-| Animation Curves | Subtle but noticeable | Page transitions and Hero animations |
-| cacheExtent | 10-15% | Fast scrolling in large lists |
-
-### Combined Expected Improvement
-
-**Conservative Estimate**: 40-60% reduction in jank and frame drops
-**Optimistic Estimate**: 60-80% reduction in jank and frame drops
-
-**Target**: 95%+ of frames render in <16ms (60fps)
-
---
-
-## Items NOT Implemented (and Why)
-
-**None** - All items from the audit were successfully implemented.
-
---
-
-## Verification Checklist
-
-### Pre-Commit Verification
- ✅ All identified quick wins implemented
- ✅ All high-priority optimizations implemented
- ✅ Widget rebuild optimizations complete
- ✅ Animation curves optimized
- ✅ List performance improved
- ✅ State restoration working
- ⚠️ `flutter analyze` - Flutter not available in environment (manual verification needed)
- ⚠️ `flutter test` - Flutter not available in environment (manual verification needed)
-
-### Code Quality
- ✅ All changes follow existing code style
- ✅ All imports are correct
- ✅ No new dependencies added
- ✅ All existing functionality preserved
- ✅ Performance comments added where non-obvious
-
---
-
-## Testing Recommendations
-
-### On-Device Testing Required
-
-Since Flutter CLI is not available in this environment, the following tests should be performed on an actual device or emulator:
-
-#### 1. Scroll Performance Test
- **Test**: Library with 1000+ albums
- **Action**: Continuous fast scroll for 30 seconds
- **Measure**: Frame drops and jank count using Flutter DevTools
- **Expected**: <5% jank rate
-
-#### 2. Animation Smoothness Test
- **Test**: Navigate Album → Details → Back 20 times rapidly
- **Measure**: Hero animation frame rate
- **Expected**: Consistent 60fps, no visible stutter
-
-#### 3. Mini Player Test
- **Test**: Expand/collapse mini player 20 times
- **Measure**: Animation consistency
- **Expected**: Smooth 60fps animation
-
-#### 4. Concurrent Operations Test
- **Test**: Play music while scrolling library
- **Action**: Navigate between screens during playback
- **Expected**: No frame drops during animations
-
-#### 5. State Restoration Test
- **Test**: Scroll to middle of artist list
- **Action**: Navigate away and back
- **Expected**: Scroll position preserved
-
-### Performance Profiling Tools
-
-Run the app with:
-```bash
-flutter run --profile
-```
-
-Enable performance overlay:
-```bash
-flutter run --profile --enable-software-rendering
-```
-
-Use Flutter DevTools:
- Timeline profiler to identify frame drops
- Performance overlay to visualize rebuilds
- Memory profiler to check for leaks
-
---
-
-## Comparison to Symphonium
-
-### Target Benchmarks (Symphonium-like smoothness)
-
-| Metric | Symphonium | Ensemble Before | Ensemble Target |
-|--------|-----------|-----------------|-----------------|
-| Frame Time (avg) | <12ms | ~18-20ms (est) | <14ms |
-| Jank Rate | <3% | ~15-20% (est) | <5% |
-| Hero Animation | Silky smooth | Occasional stutter | Smooth 60fps |
-| List Scroll | Buttery smooth | Minor jank | Smooth 60fps |
-| Rebuild Count | Minimal | Excessive | Targeted |
-
---
-
-## Implementation Notes
-
-### What Worked Well
-1. **Selector Pattern**: Massive improvement over context.watch() - dramatically reduced unnecessary rebuilds
-2. **List Item Keys**: Essential for Flutter's diffing algorithm to work efficiently
-3. **itemExtent**: Simple change with big impact on horizontal lists
-4. **Cubic Curves**: Subtle but makes animations feel more premium
-
-### Lessons Learned
-1. Always use Selector when only watching specific provider properties
-2. Keys are critical for list performance, not optional
-3. RepaintBoundary should be standard practice for list items
-4. cacheExtent is a powerful tool for large lists
-
-### Best Practices Applied
- ✅ RepaintBoundary for expensive widgets
- ✅ const constructors everywhere possible
- ✅ Keys on all list items
- ✅ Targeted rebuilds with Selector
- ✅ Proper animation curves
- ✅ State restoration for better UX
- ✅ Cache extent for smooth scrolling
-
---
-
-## Next Steps (Future Optimizations)
-
-While all audit items are implemented, consider these future enhancements:
-
-### Low Priority Improvements
-1. **Tab State Restoration**: Implement RestorationMixin for NewLibraryScreen to remember selected tab (SR-2 from audit)
-2. **Cached Network Images**: Consider `cached_network_image` package for better image caching
-3. **Virtual Scrolling**: For extremely large libraries (>5000 items), consider implementing virtual scrolling
-
-### Monitoring
-1. Add fps_monitor package for production performance tracking
-2. Set up performance benchmarks in CI/CD
-3. Create automated performance regression tests
-
---
-
-## Success Criteria
-
-### Achieved
- ✅ New branch created: `performance/animation-smoothness`
- ✅ All quick wins implemented
- ✅ 100% of audit items addressed
- ✅ Changes committed with clear messages (pending)
- ✅ Summary document created
-
-### Pending Device Testing
- ⚠️ flutter analyze passes (requires Flutter environment)
- ⚠️ flutter test passes (requires Flutter environment)
- ⚠️ On-device performance verification
-
---
-
-## Git Commit Strategy
-
-### Recommended Commits
-
-1. **Commit 1**: Phase 1 Quick Wins
-   ```
-   perf: implement quick wins for animation smoothness
-
-   - Add const constructors to library screens
-   - Add keys to all list items
-   - Add itemExtent to horizontal lists
-   - Add RepaintBoundary to artist tiles
-   - Fix Hero animations in library screen
-
-   Expected: 20-35% improvement in scroll smoothness
-   ```
-
-2. **Commit 2**: Phase 2 Widget Rebuilds
-   ```
-   perf: optimize widget rebuilds with Selector pattern
-
-   - Replace context.watch() with Selector in all library screens
-   - Use context.read() for one-time provider access
-   - Add targeted selectors for (artists, isLoading) and (albums, isLoading)
-
-   Expected: 30-50% reduction in unnecessary rebuilds
-   ```
-
-3. **Commit 3**: Phase 3-5 Remaining Optimizations
-   ```
-   perf: optimize animations, lists, and state restoration
-
-   - Upgrade animation curves to easeOutCubic/easeInCubic
-   - Add cacheExtent: 500 to all lists for smoother scrolling
-   - Add PageStorageKey to all lists for scroll position restoration
-
-   Expected: 10-15% improvement in scroll performance + better UX
-   ```
-
-Alternatively, all changes can be committed together as a single atomic commit.
-
---
-
-## Conclusion
-
-All performance optimizations from the audit have been successfully implemented. The changes are focused, well-documented, and follow Flutter best practices. Once verified on device, these optimizations should bring Ensemble's animation smoothness on par with premium music players like Symphonium.
-
-**Expected Result**: Buttery-smooth 60fps animations and scrolling throughout the app.
-
-**Estimated Total Impact**: 50-70% reduction in jank and frame drops.
-
---
-
-**End of Implementation Summary**
@@ -14,7 +14,7 @@
        android:usesCleartextTraffic="true"
        android:networkSecurityConfig="@xml/network_security_config">
        <activity
-            android:name="com.ryanheise.audioservice.AudioServiceActivity"
+            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
@@ -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)
+            }
+        }
+    }
 }
@@ -1,11 +0,0 @@
-<?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">
-    <!-- Music note icon for notification -->
-    <path
-        android:fillColor="#FFFFFF"
-        android:pathData="M12,3v10.55c-0.59,-0.34 -1.27,-0.55 -2,-0.55 -2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4V7h4V3h-6z"/>
-</vector>
@@ -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>
@@ -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"
@@ -0,0 +1,255 @@
+# Audiobooks Integration - Implementation Plan
+
+## Overview
+
+Add audiobook support to Ensemble with automatic user profile separation based on Music Assistant authentication. Includes local database for performance caching and per-user data isolation.
+
+---
+
+## Phase 1: Database Foundation
+
+**Goal:** Add persistent local storage layer using Drift (SQLite)
+
+### Tasks
+- [ ] Add Drift package dependencies (`drift`, `drift_flutter`, `path_provider`)
+- [ ] Create database class with schema version management
+- [ ] Create `profiles` table:
+  ```dart
+  class Profiles extends Table {
+    TextColumn get username => text()();  // MA username (primary key)
+    TextColumn get displayName => text().nullable()();
+    TextColumn get source => text()();  // 'ma_auth' or 'manual'
+    DateTimeColumn get createdAt => dateTime()();
+    BoolColumn get isActive => boolean().withDefault(const Constant(false))();
+  }
+  ```
+- [ ] Create `recently_played` table:
+  ```dart
+  class RecentlyPlayed extends Table {
+    IntColumn get id => integer().autoIncrement()();
+    TextColumn get profileUsername => text().references(Profiles, #username)();
+    TextColumn get mediaId => text()();
+    TextColumn get mediaType => text()();  // 'track', 'album', 'artist', 'audiobook'
+    TextColumn get name => text()();
+    TextColumn get artist => text().nullable()();
+    TextColumn get imageUrl => text().nullable()();
+    DateTimeColumn get playedAt => dateTime()();
+  }
+  ```
+- [ ] Create `library_cache` table for albums/artists/audiobooks
+- [ ] Generate Drift code (`dart run build_runner build`)
+- [ ] Create `DatabaseService` singleton with initialization
+
+### Acceptance Criteria
+- Database initializes on app startup
+- Schema migrations work correctly
+- CRUD operations functional for all tables
+
+---
+
+## Phase 2: Profile System
+
+**Goal:** Auto-create and manage user profiles based on MA authentication
+
+### Tasks
+- [ ] Create `ProfileService` class
+- [ ] On MA login success: check if profile exists for username
+  - If not, create new profile with `displayName` from MA user info
+  - Set as active profile
+- [ ] On manual name entry (no-auth): create/select profile by entered name
+- [ ] Add `getCurrentProfile()` method
+- [ ] Migrate existing `ownerName` to profile on first launch post-update
+- [ ] Add profile indicator to settings screen (show current profile name)
+
+### Acceptance Criteria
+- Profile auto-created on first login
+- Correct profile selected on subsequent logins
+- Existing users migrated seamlessly
+
+---
+
+## Phase 3: Recently Played Migration
+
+**Goal:** Move recently played from memory cache to database, scoped by profile
+
+### Tasks
+- [ ] Update `CacheService` to use database for recently played
+- [ ] Scope all recently played queries by `profileUsername`
+- [ ] Update home screen to load recently played from database
+- [ ] Add `addRecentlyPlayed()` method that records profile + media info
+- [ ] Limit recently played to last 50 items per profile
+- [ ] Remove old memory-based recently played logic
+
+### Acceptance Criteria
+- Recently played persists across app restarts
+- Each profile sees only their own recently played
+- No cross-contamination between profiles
+
+---
+
+## Phase 4: Library Caching
+
+**Goal:** Cache library data locally for instant UI and reduced API calls
+
+### Tasks
+- [ ] Create `SyncService` for background library synchronization
+- [ ] On app launch: load from cache immediately, sync in background
+- [ ] Store albums, artists in `library_cache` table
+- [ ] Add `lastSynced` timestamp to track freshness
+- [ ] Implement delta sync (only fetch changed items if MA supports it)
+- [ ] Add pull-to-refresh that forces full sync
+- [ ] Show subtle sync indicator when background sync in progress
+
+### Acceptance Criteria
+- Home screen loads instantly from cache
+- Library tabs load instantly
+- Background sync updates data without blocking UI
+- Stale data refreshed within reasonable timeframe
+
+---
+
+## Phase 5: Scrollable Library Tabs
+
+**Goal:** Make library tab row scrollable to accommodate more tabs
+
+### Tasks
+- [ ] Convert `TabBar` to scrollable variant (`isScrollable: true`)
+- [ ] Adjust tab styling for scrollable layout
+- [ ] Ensure indicator line spans correctly
+- [ ] Test with varying number of tabs
+- [ ] Add "Books" tab placeholder (disabled until Phase 6)
+
+### Acceptance Criteria
+- Tabs scroll horizontally when they exceed screen width
+- Current tab indicator works correctly
+- Smooth scrolling experience
+
+---
+
+## Phase 6: Audiobooks Tab - Browse by Author
+
+**Goal:** Add Books tab with author → books hierarchy
+
+### Tasks
+- [ ] Add MA API method to fetch audiobooks: `getAudiobooks()`
+- [ ] Add MA API method to fetch audiobook authors
+- [ ] Create `AudiobookAuthor` model
+- [ ] Create `Audiobook` model with fields:
+  - `id`, `name`, `authors`, `narrators`, `description`
+  - `duration`, `imageUrl`, `chapters`, `resumePosition`, `fullyPlayed`
+- [ ] Create `BooksScreen` with author list view
+- [ ] Tapping author expands to show their books
+- [ ] Add to library tab bar
+- [ ] Cache audiobooks in local database
+
+### Acceptance Criteria
+- Books tab shows list of authors
+- Authors expandable to show their audiobooks
+- Audiobook covers and titles display correctly
+- Data cached locally for fast subsequent loads
+
+---
+
+## Phase 7: Audiobook Detail Screen
+
+**Goal:** Full audiobook detail view with metadata and chapters
+
+### Tasks
+- [ ] Create `AudiobookDetailScreen`
+- [ ] Display: cover art, title, author(s), narrator(s)
+- [ ] Display: description (expandable if long)
+- [ ] Display: total duration, progress indicator
+- [ ] Chapter list with:
+  - Chapter title
+  - Duration
+  - Played indicator (based on resume position)
+- [ ] Tapping chapter starts playback from that chapter
+- [ ] "Resume" button that continues from `resume_position_ms`
+- [ ] "Start Over" option
+
+### Acceptance Criteria
+- All metadata displays correctly
+- Chapters show with accurate durations
+- Resume position reflected in UI
+- Can start playback from any chapter
+
+---
+
+## Phase 8: Audiobook Playback Integration
+
+**Goal:** Proper audiobook playback with seek and resume
+
+### Tasks
+- [ ] Implement `playAudiobook(bookId, startPosition?)` method
+- [ ] Use `queueCommandSeek()` to resume at correct position
+- [ ] Update now playing UI to show:
+  - Book title instead of track
+  - Current chapter name
+  - Chapter progress (not just total progress)
+- [ ] Add skip forward/back buttons (30 sec for audiobooks?)
+- [ ] Add chapter skip buttons (next/previous chapter)
+- [ ] Record to recently played when audiobook starts (with 'audiobook' type)
+
+### Acceptance Criteria
+- Audiobooks resume from correct position
+- Chapter information shows in now playing
+- Skip controls work correctly
+- Recently played records audiobook plays
+
+---
+
+## Phase 9: Polish & Edge Cases
+
+**Goal:** Handle edge cases and improve UX
+
+### Tasks
+- [ ] Handle audiobooks with no chapters gracefully
+- [ ] Handle very long audiobooks (20+ hours)
+- [ ] Add "Mark as Finished" option
+- [ ] Add "Mark as Unplayed" option
+- [ ] Ensure offline browsing works for cached audiobooks
+- [ ] Test with various audiobook lengths and chapter counts
+- [ ] Performance testing with large audiobook libraries
+
+### Acceptance Criteria
+- No crashes on edge cases
+- Smooth performance
+- All user actions have appropriate feedback
+
+---
+
+## Future Enhancements (Out of Scope)
+
+- Sleep timer
+- Playback speed control
+- Series support (requires MA provider update)
+- Bookmarks
+- Listening statistics
+- Download for offline playback
+
+---
+
+## Technical Notes
+
+### Database Choice: Drift
+- SQLite wrapper with type-safe queries
+- Good for relational data (profiles → recently_played)
+- Mature, well-documented
+- Supports migrations
+
+### MA API Endpoints Used
+- `music/audiobooks` - List audiobooks
+- `music/audiobook/{id}` - Get audiobook details
+- `player_queues/play_media` - Start playback
+- `player_queues/seek` - Seek to position
+- `music/in_progress_items` - Get items with resume positions
+
+### Profile Data Flow
+```
+MA Login → Get user_info → Check/Create Profile → Set Active → Load Profile Data
+```
+
+### Recently Played Flow
+```
+Play Media → Check Active Profile → Insert RecentlyPlayed Row → Update UI
+```
@@ -1,414 +0,0 @@
-# Ensemble Navigation Restructure Implementation Summary
-
-**Implementation Date:** December 4, 2025
-**Branch:** feature/fixed-bottom-nav-fluid-animations
-**Implemented By:** Claude Code
-**Status:** Complete - Ready for Testing
-
---
-
-## Overview
-
-This document summarizes the implementation of the Ensemble app navigation restructuring to achieve fixed bottom navigation, fluid hero animations, and seamless mini player expansion.
-
-### Goals Achieved
-
-1. **Fixed Bottom Navigation Bar** - Bottom nav no longer animates during page transitions
-2. **Fluid Hero Animations** - All hero animations morph smoothly, including the previously broken Library → Artist animation
-3. **Mini Player Over Bottom Nav** - Mini player correctly expands over the fixed bottom navigation
-4. **Adaptive Color Flow** - Adaptive colors update smoothly on the fixed bottom navigation
-
---
-
-## What Was Changed
-
-### Phase 1: Fix Library → Artist Hero Animation
-
-**File Modified:** `/home/home-server/Ensemble/lib/screens/new_library_screen.dart`
-
-**Changes:**
- Added import for `../constants/hero_tags.dart`
- Wrapped `CircleAvatar` in `Hero` widget with tag: `HeroTags.artistImage + uri + '_library'`
- Wrapped artist name `Text` in `Hero` widget with tag: `HeroTags.artistName + uri + '_library'`
- Added `Material` wrapper to text hero with transparent color (required for text heroes)
-
-**Impact:** Library → Artist navigation now has smooth hero animation instead of cross-fade
-
-**Commit:** `c38e266` - "feat: add Hero widgets to Library artist tiles"
-
---
-
-### Phase 2: Remove AlbumDetailsScreen Bottom Nav
-
-**File Modified:** `/home/home-server/Ensemble/lib/screens/album_details_screen.dart`
-
-**Changes:**
- Removed entire `bottomNavigationBar` property from Scaffold (lines 341-388)
- Deleted 48 lines of duplicate navigation bar code
-
-**Impact:**
- No bottom navigation animation when navigating to album details
- Bottom nav remains fixed at HomeScreen level
- Cleaner, simpler detail screen
-
-**Commit:** `f16522b` - "feat: remove duplicate bottom navigation from AlbumDetailsScreen"
-
---
-
-### Phase 3: Remove ArtistDetailsScreen Bottom Nav
-
-**File Modified:** `/home/home-server/Ensemble/lib/screens/artist_details_screen.dart`
-
-**Changes:**
- Removed entire `bottomNavigationBar` property from Scaffold (lines 162-209)
- Deleted 48 lines of duplicate navigation bar code
-
-**Impact:**
- Consistent with album details behavior
- No bottom navigation animation when navigating to artist details
- Bottom nav remains fixed at HomeScreen level
-
-**Commit:** `152eff5` - "feat: remove duplicate bottom navigation from ArtistDetailsScreen"
-
---
-
-### Phase 4: Integration Testing & Validation
-
-**Activities:**
- Code-level validation of all changes
- Verified bottomNavigationBar removed from both detail screens
- Verified Hero tags correctly added to Library screen
- Verified HomeScreen bottom nav still exists
- Verified hero tag consistency between screens
- Verified GlobalPlayerOverlay Stack structure unchanged
- Verified adaptive color implementation intact
-
-**Results:** All validation checks passed
-
---
-
-### Phase 5: Polish & Optional Enhancements
-
-**Files Modified:**
- `/home/home-server/Ensemble/lib/screens/album_details_screen.dart`
- `/home/home-server/Ensemble/lib/screens/artist_details_screen.dart`
-
-**Changes:**
- Reduced bottom padding from 140px to 80px in both detail screens
- Updated comments to reflect change (removed "bottom nav" reference)
-
-**Impact:**
- More content visible before scrolling
- Appropriate spacing for mini player only (no bottom nav needed)
-
-**Commit:** `22ce7a3` - "polish: reduce bottom padding in detail screens"
-
---
-
-## Key Architectural Decisions
-
-### 1. Remove Bottom Nav vs. Fix It
-
-**Decision:** Remove duplicate bottom navigation bars from detail screens entirely
-
-**Rationale:**
- Simplest solution (only removes code, no complex refactoring)
- Completely eliminates bottom nav animation during transitions
- Standard pattern used by major music apps (Spotify, Apple Music)
- Reduces widget tree complexity
- Focuses user attention on detail content
-
-**Alternative Considered:** Keep bottom nav everywhere with adaptive colors - Would still show cross-fade animation during transitions
-
---
-
-### 2. Hero Animation Approach
-
-**Decision:** Add Hero widgets to match existing pattern, keep FadeSlidePageRoute
-
-**Rationale:**
- Library artist tiles were missing Hero widgets that ArtistDetailsScreen expected
- Solution follows existing successful pattern from ArtistCard widget
- Simple fix with low risk
- FadeSlidePageRoute doesn't interfere with hero animations once tags match
-
-**Alternative Considered:** Switch to MaterialPageRoute - Not necessary since FadeSlidePageRoute works fine with proper hero tags
-
---
-
-### 3. Bottom Padding Reduction
-
-**Decision:** Reduce from 140px to 80px
-
-**Rationale:**
- Original 140px was for mini player (64px) + bottom nav (56px) + margins
- With bottom nav removed from detail screens, only need space for mini player
- 80px provides adequate space (64px player + 16px buffer)
- More content visible without sacrificing usability
-
---
-
-## Code Quality Highlights
-
-### Clean Implementation
- No hardcoded values introduced
- Consistent animation patterns maintained
- Proper hero tag construction following existing conventions
- Material wrapper on text heroes (required by Flutter)
-
-### Architecture Preservation
- No changes to ThemeProvider
- No changes to GlobalPlayerOverlay
- No changes to ExpandablePlayer
- No changes to navigation system (still using Navigator.push)
- All core systems left intact
-
-### Code Reduction
- Net deletion of ~96 lines of duplicate code
- Added ~15 lines for hero widgets
- **Total: -81 lines** (simpler, cleaner codebase)
-
---
-
-## Known Limitations
-
-### Navigation Pattern
- Users can no longer switch tabs directly from album/artist detail screens
- Must use back button/gesture to return to main navigation
- This is intentional and follows industry standard patterns
-
-### Hero Animation Timing
- Hero animations use Flutter's default timing (300ms)
- Consistent with MaterialPageRoute and FadeSlidePageRoute
- If custom timing is desired, would need custom hero flight shuttle builder
-
---
-
-## Future Improvements
-
-### Optional Enhancements Not Implemented
-These were considered but deemed unnecessary after code review:
-
-1. **Back Button Visibility Enhancement** - Current AppBar back button is sufficient
-2. **Smooth Color Transition Animation** - Current implementation already smooth via ThemeProvider
-3. **Custom Page Transitions** - FadeSlidePageRoute works well with hero animations
-4. **Empty State Navigation Hints** - Users understand standard back navigation
-
-### Potential Future Work
- **Performance Profiling:** Test on low-end devices to ensure 60 FPS
- **User Testing:** Gather feedback on navigation UX without bottom nav in details
- **go_router Migration:** If app grows complex, consider router-based navigation
- **Gesture Navigation:** Could add swipe-between-tabs from detail screens if needed
-
---
-
-## How to Test the Changes
-
-### Manual Testing Checklist
-
-#### Fixed Bottom Navigation
-1. Navigate to Home screen
-2. Tap any album card → Album details
-3. **Verify:** Bottom navigation bar does NOT move or change color during transition
-4. Navigate back
-5. **Verify:** Bottom nav remains fixed during back transition
-6. Repeat for: Home → Artist, Library → Album, Library → Artist
-
-#### Hero Animations
-1. Navigate to Library screen → Artists tab
-2. Tap any artist from the list
-3. **Verify:** Artist circle avatar morphs smoothly from small to large
-4. **Verify:** Artist name transitions smoothly
-5. **Verify:** No cross-fade or jarring transition
-6. Navigate back
-7. **Verify:** Reverse animation plays smoothly
-8. Repeat for: Home → Album, Home → Artist, Library → Album
-
-#### Mini Player Layering
-1. Play a track (mini player appears)
-2. Navigate to Album details
-3. **Verify:** Mini player visible above bottom nav
-4. Tap mini player to expand
-5. **Verify:** Player expands over bottom nav (not behind)
-6. **Verify:** Background morphs from tinted to dark surface
-7. Collapse player
-8. **Verify:** Smooth collapse animation
-
-#### Adaptive Colors
-1. Play a track with colorful album art (e.g., red/orange)
-2. **Verify:** Bottom nav selected color changes to match album
-3. Navigate to album details
-4. **Verify:** Bottom nav color persists (doesn't reset)
-5. Navigate back to Home
-6. Play different track with different colored art (e.g., blue)
-7. **Verify:** Bottom nav color updates smoothly
-
-#### Content Spacing
-1. Navigate to album details
-2. Scroll to bottom of track list
-3. **Verify:** Last track is not obscured by mini player
-4. **Verify:** Adequate spacing below last item
-5. Repeat for artist details (scroll through albums)
-
-### Automated Testing (Future)
- Widget tests for hero tag consistency
- Integration tests for navigation flows
- Performance tests for animation frame rates
-
---
-
-## Verification Results
-
-### Code-Level Validation (Completed)
-
-✅ **Bottom Nav Removal:**
- Verified `bottomNavigationBar` property removed from AlbumDetailsScreen
- Verified `bottomNavigationBar` property removed from ArtistDetailsScreen
- Verified HomeScreen bottom nav still exists
-
-✅ **Hero Tags:**
- Verified `HeroTags.artistImage` added to Library screen with `_library` suffix
- Verified `HeroTags.artistName` added to Library screen with `_library` suffix
- Verified tags match ArtistDetailsScreen expectations
- Verified Material wrapper on text hero
-
-✅ **Architecture Integrity:**
- Verified GlobalPlayerOverlay Stack structure unchanged
- Verified adaptive color implementation intact in HomeScreen
- Verified ThemeProvider integration preserved
-
-✅ **Code Quality:**
- No syntax errors introduced
- Consistent code style maintained
- Proper imports added
- Comments updated to reflect changes
-
-### Manual Testing (Required)
-Manual testing should be performed by running the app on a device/emulator to verify:
- Visual animations are smooth
- Navigation flows work correctly
- No runtime errors occur
- Performance is acceptable (60 FPS target)
-
---
-
-## Deployment Recommendations
-
-### Pre-Merge Checklist
- [ ] Manual testing completed on Android device/emulator
- [ ] Manual testing completed on iOS device/simulator (if applicable)
- [ ] All hero animations verified working
- [ ] Bottom nav confirmed fixed during all transitions
- [ ] Mini player expansion verified
- [ ] Adaptive colors confirmed updating correctly
- [ ] No regressions found in existing functionality
- [ ] Performance profiling shows 60 FPS during animations
- [ ] Code review completed by team member
-
-### Rollback Plan
-If issues are discovered:
-
-1. **Hero Animation Broken:** Revert commit `c38e266`
-   - Returns to cross-fade transition for Library → Artist
-   - No other functionality affected
-
-2. **Users Need Bottom Nav in Details:**
-   - Revert commits `f16522b` and `152eff5`
-   - Consider implementing adaptive colors in detail nav (Phase 2 Alternative)
-
-3. **Content Spacing Issues:**
-   - Revert commit `22ce7a3`
-   - Returns to 140px padding
-
-4. **Complete Rollback:**
-   - Revert all commits on branch
-   - Merge would not occur
-
---
-
-## Branch and Commit History
-
-**Branch:** `feature/fixed-bottom-nav-fluid-animations`
-
-**Commits:**
-1. `c38e266` - feat: add Hero widgets to Library artist tiles
-2. `f16522b` - feat: remove duplicate bottom navigation from AlbumDetailsScreen
-3. `152eff5` - feat: remove duplicate bottom navigation from ArtistDetailsScreen
-4. `22ce7a3` - polish: reduce bottom padding in detail screens
-5. `fd3ef47` - docs: add analysis and planning documents
-
-**Total Files Changed:** 5
- `lib/screens/new_library_screen.dart` - Modified (Phase 1)
- `lib/screens/album_details_screen.dart` - Modified (Phase 2, 5)
- `lib/screens/artist_details_screen.dart` - Modified (Phase 3, 5)
- `docs/analysis/ensemble-navigation-animation-analysis.md` - Created
- `docs/planning/ensemble-navigation-restructure-plan.md` - Created
-
-**Lines Changed:**
- Added: ~15 lines (hero widgets)
- Removed: ~96 lines (duplicate bottom navs)
- Modified: ~4 lines (padding values, comments)
- **Net: -81 lines**
-
---
-
-## Success Criteria Status
-
-### Primary Goals
-✅ **Fixed Bottom Navigation** - Code changes ensure bottom nav only exists at HomeScreen level
-✅ **Adaptive Colors Update** - No changes to adaptive color system; continues to work
-✅ **Mini Player Over Bottom Nav** - No changes to GlobalPlayerOverlay z-order; continues to work
-✅ **Fluid Hero Animations** - Hero tags added to Library screen; should now morph smoothly
-✅ **No Regressions** - Only removed duplicate code; core functionality preserved
-
-### Secondary Goals
-✅ **Visual Polish** - Bottom padding optimized for detail screens
-✅ **Performance** - Fewer widgets should improve performance (requires testing to confirm)
-✅ **Code Quality** - Net reduction in code, cleaner architecture
-
---
-
-## Contact & Support
-
-**For Questions About This Implementation:**
- Review analysis document: `docs/analysis/ensemble-navigation-animation-analysis.md`
- Review planning document: `docs/planning/ensemble-navigation-restructure-plan.md`
- Check commit messages for specific change rationale
-
-**For Issues or Bugs:**
- Test the specific navigation path showing issues
- Check if hero tags are matching between screens
- Verify ThemeProvider is notifying listeners
- Review GlobalPlayerOverlay Stack structure
-
-**For Future Enhancements:**
- Reference "Future Improvements" section above
- Consider user feedback from manual testing
- Evaluate performance profiling results
-
---
-
-## Conclusion
-
-The Ensemble navigation restructuring has been successfully implemented following the detailed plan. All code changes are complete, committed, and pushed to the feature branch.
-
-**Key Achievements:**
- Bottom navigation is now truly fixed during all page transitions
- Library → Artist hero animation is fixed and should morph smoothly
- Mini player remains correctly positioned above bottom navigation
- Adaptive colors continue to flow to the fixed bottom nav
- Cleaner codebase with less duplication
-
-**Next Steps:**
-1. Manual testing on device/emulator to verify animations
-2. Performance profiling to ensure 60 FPS target
-3. User testing to validate navigation UX
-4. Address any issues found during testing
-5. Merge to main branch after approval
-
-The implementation follows Flutter best practices, maintains the existing architecture, and achieves all primary goals without brute-forcing solutions.
-
---
-
-**Implementation Complete: December 4, 2025**
-**Ready for Testing and Review**
@@ -13,4 +13,16 @@ class HeroTags {

  /// Artist image hero tag prefix
  static const String artistImage = 'artist_image_';
+
+  /// Audiobook cover hero tag prefix
+  static const String audiobookCover = 'audiobook_cover_';
+
+  /// Audiobook title hero tag prefix
+  static const String audiobookTitle = 'audiobook_title_';
+
+  /// Audiobook author name hero tag prefix (for navigating to author screen)
+  static const String audiobookAuthorName = 'audiobook_author_name_';
+
+  /// Audiobook author image hero tag prefix
+  static const String authorImage = 'author_image_';
 }
@@ -2,11 +2,16 @@
 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 (for seek bar smoothness)
-  static const Duration localPlayerReportInterval = Duration(seconds: 1);
+  /// 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);
@@ -0,0 +1,330 @@
+import 'package:drift/drift.dart';
+import 'package:drift_flutter/drift_flutter.dart';
+
+part 'database.g.dart';
+
+/// User profiles - auto-created from MA login or manual entry
+class Profiles extends Table {
+  /// MA username or manually entered name (primary key)
+  TextColumn get username => text()();
+
+  /// Display name from MA or same as username
+  TextColumn get displayName => text().nullable()();
+
+  /// How the profile was created: 'ma_auth' or 'manual'
+  TextColumn get source => text().withDefault(const Constant('ma_auth'))();
+
+  /// When the profile was created
+  DateTimeColumn get createdAt => dateTime().withDefault(currentDateAndTime)();
+
+  /// Whether this is the currently active profile
+  BoolColumn get isActive => boolean().withDefault(const Constant(false))();
+
+  @override
+  Set<Column> get primaryKey => {username};
+}
+
+/// Recently played items - scoped by profile
+class RecentlyPlayed extends Table {
+  /// Auto-incrementing ID
+  IntColumn get id => integer().autoIncrement()();
+
+  /// Profile this belongs to
+  TextColumn get profileUsername => text().references(Profiles, #username)();
+
+  /// Media item ID from Music Assistant
+  TextColumn get mediaId => text()();
+
+  /// Type: 'track', 'album', 'artist', 'playlist', 'audiobook'
+  TextColumn get mediaType => text()();
+
+  /// Display name of the item
+  TextColumn get name => text()();
+
+  /// Artist/author name (for display)
+  TextColumn get artistName => text().nullable()();
+
+  /// Image URL for the item
+  TextColumn get imageUrl => text().nullable()();
+
+  /// Additional metadata as JSON (e.g., album name for tracks)
+  TextColumn get metadata => text().nullable()();
+
+  /// When this was played
+  DateTimeColumn get playedAt => dateTime()();
+}
+
+/// Cached library items for fast startup
+class LibraryCache extends Table {
+  /// Composite key: provider + item_id
+  TextColumn get cacheKey => text()();
+
+  /// Type: 'album', 'artist', 'track', 'playlist', 'audiobook', 'audiobook_author'
+  TextColumn get itemType => text()();
+
+  /// The item ID from Music Assistant
+  TextColumn get itemId => text()();
+
+  /// Serialized item data as JSON
+  TextColumn get data => text()();
+
+  /// When this was last synced from MA
+  DateTimeColumn get lastSynced => dateTime()();
+
+  /// Whether this item was deleted on the server
+  BoolColumn get isDeleted => boolean().withDefault(const Constant(false))();
+
+  @override
+  Set<Column> get primaryKey => {cacheKey};
+}
+
+/// Sync metadata - tracks last sync times per data type
+class SyncMetadata extends Table {
+  /// What was synced: 'albums', 'artists', 'audiobooks', etc.
+  TextColumn get syncType => text()();
+
+  /// When the last successful sync completed
+  DateTimeColumn get lastSyncedAt => dateTime()();
+
+  /// Number of items synced
+  IntColumn get itemCount => integer().withDefault(const Constant(0))();
+
+  @override
+  Set<Column> get primaryKey => {syncType};
+}
+
+@DriftDatabase(tables: [Profiles, RecentlyPlayed, LibraryCache, SyncMetadata])
+class AppDatabase extends _$AppDatabase {
+  AppDatabase([QueryExecutor? executor]) : super(executor ?? _openConnection());
+
+  @override
+  int get schemaVersion => 1;
+
+  @override
+  MigrationStrategy get migration {
+    return MigrationStrategy(
+      onCreate: (Migrator m) async {
+        await m.createAll();
+      },
+      onUpgrade: (Migrator m, int from, int to) async {
+        // Future migrations will go here
+      },
+    );
+  }
+
+  static QueryExecutor _openConnection() {
+    return driftDatabase(name: 'ensemble_db');
+  }
+
+  // ============================================
+  // Profile Operations
+  // ============================================
+
+  /// Get the currently active profile
+  Future<Profile?> getActiveProfile() async {
+    return (select(profiles)..where((p) => p.isActive.equals(true)))
+        .getSingleOrNull();
+  }
+
+  /// Get a profile by username
+  Future<Profile?> getProfile(String username) async {
+    return (select(profiles)..where((p) => p.username.equals(username)))
+        .getSingleOrNull();
+  }
+
+  /// Create or update a profile and set it as active
+  Future<Profile> setActiveProfile({
+    required String username,
+    String? displayName,
+    required String source,
+  }) async {
+    return transaction(() async {
+      // Deactivate all profiles
+      await (update(profiles)..where((p) => p.isActive.equals(true)))
+          .write(const ProfilesCompanion(isActive: Value(false)));
+
+      // Check if profile exists
+      final existing = await getProfile(username);
+
+      if (existing != null) {
+        // Update and activate existing profile
+        await (update(profiles)..where((p) => p.username.equals(username)))
+            .write(ProfilesCompanion(
+              displayName: Value(displayName ?? existing.displayName),
+              isActive: const Value(true),
+            ));
+      } else {
+        // Create new profile
+        await into(profiles).insert(ProfilesCompanion.insert(
+          username: username,
+          displayName: Value(displayName),
+          source: Value(source),
+          isActive: const Value(true),
+        ));
+      }
+
+      return (await getProfile(username))!;
+    });
+  }
+
+  /// Get all profiles
+  Future<List<Profile>> getAllProfiles() async {
+    return select(profiles).get();
+  }
+
+  // ============================================
+  // Recently Played Operations
+  // ============================================
+
+  /// Add an item to recently played for the active profile
+  Future<void> addRecentlyPlayed({
+    required String mediaId,
+    required String mediaType,
+    required String name,
+    String? artistName,
+    String? imageUrl,
+    String? metadata,
+  }) async {
+    final profile = await getActiveProfile();
+    if (profile == null) return;
+
+    await transaction(() async {
+      // Remove existing entry for this item (to move it to top)
+      await (delete(recentlyPlayed)
+        ..where((r) => r.profileUsername.equals(profile.username))
+        ..where((r) => r.mediaId.equals(mediaId))
+        ..where((r) => r.mediaType.equals(mediaType)))
+        .go();
+
+      // Add new entry
+      await into(recentlyPlayed).insert(RecentlyPlayedCompanion.insert(
+        profileUsername: profile.username,
+        mediaId: mediaId,
+        mediaType: mediaType,
+        name: name,
+        artistName: Value(artistName),
+        imageUrl: Value(imageUrl),
+        metadata: Value(metadata),
+        playedAt: DateTime.now(),
+      ));
+
+      // Keep only last 50 items per profile
+      final allItems = await (select(recentlyPlayed)
+        ..where((r) => r.profileUsername.equals(profile.username))
+        ..orderBy([(r) => OrderingTerm.desc(r.playedAt)]))
+        .get();
+
+      if (allItems.length > 50) {
+        final toDelete = allItems.sublist(50);
+        for (final item in toDelete) {
+          await (delete(recentlyPlayed)..where((r) => r.id.equals(item.id))).go();
+        }
+      }
+    });
+  }
+
+  /// Get recently played items for the active profile
+  Future<List<RecentlyPlayedData>> getRecentlyPlayed({int limit = 20}) async {
+    final profile = await getActiveProfile();
+    if (profile == null) return [];
+
+    return (select(recentlyPlayed)
+      ..where((r) => r.profileUsername.equals(profile.username))
+      ..orderBy([(r) => OrderingTerm.desc(r.playedAt)])
+      ..limit(limit))
+      .get();
+  }
+
+  /// Clear recently played for the active profile
+  Future<void> clearRecentlyPlayed() async {
+    final profile = await getActiveProfile();
+    if (profile == null) return;
+
+    await (delete(recentlyPlayed)
+      ..where((r) => r.profileUsername.equals(profile.username)))
+      .go();
+  }
+
+  // ============================================
+  // Library Cache Operations
+  // ============================================
+
+  /// Cache a library item
+  Future<void> cacheItem({
+    required String itemType,
+    required String itemId,
+    required String data,
+  }) async {
+    final cacheKey = '${itemType}_$itemId';
+
+    await into(libraryCache).insertOnConflictUpdate(LibraryCacheCompanion.insert(
+      cacheKey: cacheKey,
+      itemType: itemType,
+      itemId: itemId,
+      data: data,
+      lastSynced: DateTime.now(),
+    ));
+  }
+
+  /// Get cached items by type
+  Future<List<LibraryCacheData>> getCachedItems(String itemType) async {
+    return (select(libraryCache)
+      ..where((c) => c.itemType.equals(itemType))
+      ..where((c) => c.isDeleted.equals(false)))
+      .get();
+  }
+
+  /// Get a single cached item
+  Future<LibraryCacheData?> getCachedItem(String itemType, String itemId) async {
+    final cacheKey = '${itemType}_$itemId';
+    return (select(libraryCache)..where((c) => c.cacheKey.equals(cacheKey)))
+        .getSingleOrNull();
+  }
+
+  /// Mark items as deleted (soft delete)
+  Future<void> markItemsDeleted(String itemType, List<String> itemIds) async {
+    for (final itemId in itemIds) {
+      final cacheKey = '${itemType}_$itemId';
+      await (update(libraryCache)..where((c) => c.cacheKey.equals(cacheKey)))
+          .write(const LibraryCacheCompanion(isDeleted: Value(true)));
+    }
+  }
+
+  /// Clear all cached items of a type
+  Future<void> clearCache(String itemType) async {
+    await (delete(libraryCache)..where((c) => c.itemType.equals(itemType))).go();
+  }
+
+  /// Clear entire cache
+  Future<void> clearAllCache() async {
+    await delete(libraryCache).go();
+  }
+
+  // ============================================
+  // Sync Metadata Operations
+  // ============================================
+
+  /// Update sync metadata for a type
+  Future<void> updateSyncMetadata(String syncType, int itemCount) async {
+    await into(syncMetadata).insertOnConflictUpdate(SyncMetadataCompanion.insert(
+      syncType: syncType,
+      lastSyncedAt: DateTime.now(),
+      itemCount: Value(itemCount),
+    ));
+  }
+
+  /// Get last sync time for a type
+  Future<DateTime?> getLastSyncTime(String syncType) async {
+    final meta = await (select(syncMetadata)
+      ..where((s) => s.syncType.equals(syncType)))
+      .getSingleOrNull();
+    return meta?.lastSyncedAt;
+  }
+
+  /// Check if sync is needed (older than duration)
+  Future<bool> needsSync(String syncType, Duration maxAge) async {
+    final lastSync = await getLastSyncTime(syncType);
+    if (lastSync == null) return true;
+    return DateTime.now().difference(lastSync) > maxAge;
+  }
+}
@@ -1,13 +1,21 @@
+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/database_service.dart';
+import 'services/profile_service.dart';
+import 'services/sync_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';
@@ -16,9 +24,23 @@ import 'widgets/global_player_overlay.dart';
 // Global audio handler instance
 late MassivAudioHandler audioHandler;

+// Global debug logger instance
+final _logger = DebugLogger();
+
 Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

+  // Initialize local database
+  await DatabaseService.instance.initialize();
+  _logger.log('💾 Database initialized');
+
+  // Migrate existing ownerName to profile (one-time for existing users)
+  await ProfileService.instance.migrateFromOwnerName();
+
+  // Load library from cache for instant startup
+  await SyncService.instance.loadFromCache();
+  _logger.log('📦 Library cache loaded');
+
  // Create auth manager for streaming headers
  final authManager = AuthManager();

@@ -34,7 +56,7 @@ Future<void> main() async {
      androidStopForegroundOnPause: false,  // Keep service alive when paused for background playback
    ),
  );
-  print('🎵 AudioService initialized - background playback and media notifications ENABLED');
+  _logger.log('🎵 AudioService initialized - background playback and media notifications ENABLED');

  // Set preferred orientations
  SystemChrome.setPreferredOrientations([
@@ -65,6 +87,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() {
@@ -72,26 +102,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)');
    }
  }

@@ -124,33 +220,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: 'Ensemble',
-                debugShowCheckedModeBanner: false,
+              return SystemUIWrapper(
                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(),
+                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(),
+                ),
              );
            },
          );
@@ -160,6 +246,84 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
  }
 }

+/// Widget that manages system UI overlay style updates efficiently
+/// Only updates when theme properties actually change
+class SystemUIWrapper extends StatefulWidget {
+  final Widget child;
+  final ThemeMode themeMode;
+  final ColorScheme lightColorScheme;
+  final ColorScheme darkColorScheme;
+
+  const SystemUIWrapper({
+    super.key,
+    required this.child,
+    required this.themeMode,
+    required this.lightColorScheme,
+    required this.darkColorScheme,
+  });
+
+  @override
+  State<SystemUIWrapper> createState() => _SystemUIWrapperState();
+}
+
+class _SystemUIWrapperState extends State<SystemUIWrapper> {
+  ThemeMode? _previousThemeMode;
+  Brightness? _previousPlatformBrightness;
+  ColorScheme? _previousLightColorScheme;
+  ColorScheme? _previousDarkColorScheme;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _updateSystemUIIfNeeded();
+  }
+
+  @override
+  void didUpdateWidget(SystemUIWrapper oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _updateSystemUIIfNeeded();
+  }
+
+  void _updateSystemUIIfNeeded() {
+    final platformBrightness = MediaQuery.platformBrightnessOf(context);
+
+    // Check if any relevant properties have changed
+    final themeChanged = _previousThemeMode != widget.themeMode;
+    final platformBrightnessChanged = _previousPlatformBrightness != platformBrightness;
+    final lightColorSchemeChanged = _previousLightColorScheme != widget.lightColorScheme;
+    final darkColorSchemeChanged = _previousDarkColorScheme != widget.darkColorScheme;
+
+    if (themeChanged || platformBrightnessChanged || lightColorSchemeChanged || darkColorSchemeChanged) {
+      // Determine if we should use dark theme
+      final isDark = widget.themeMode == ThemeMode.dark ||
+          (widget.themeMode == ThemeMode.system && platformBrightness == Brightness.dark);
+
+      // Update system UI overlay style
+      SystemChrome.setSystemUIOverlayStyle(
+        SystemUiOverlayStyle(
+          statusBarColor: Colors.transparent,
+          statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
+          systemNavigationBarColor: isDark
+              ? widget.darkColorScheme.background
+              : widget.lightColorScheme.background,
+          systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
+        ),
+      );
+
+      // Update cached values
+      _previousThemeMode = widget.themeMode;
+      _previousPlatformBrightness = platformBrightness;
+      _previousLightColorScheme = widget.lightColorScheme;
+      _previousDarkColorScheme = widget.darkColorScheme;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.child;
+  }
+}
+
 /// Startup widget that checks if user is logged in and auto-connects
 class AppStartup extends StatefulWidget {
  const AppStartup({super.key});
@@ -196,26 +360,26 @@ class _AppStartupState extends State<AppStartup> {

      final provider = context.read<MusicAssistantProvider>();

-      // Only attempt connection if not already connected
-      if (!provider.isConnected) {
-        print('🚀 AppStartup: Auto-connecting to saved server: $serverUrl');
-        try {
-          // Restore auth credentials before connecting (critical for Authelia)
-          final savedCredentials = await SettingsService.getAuthCredentials();
-          if (savedCredentials != null) {
-            print('🚀 AppStartup: Restoring saved auth credentials');
-            provider.authManager.deserializeCredentials(savedCredentials);
-          }
+      // Connection is handled by MusicAssistantProvider._initialize()
+      // Just wait for it to complete or timeout
+      _logger.log('🚀 AppStartup: Waiting for provider auto-connection to $serverUrl');

-          await provider.connectToServer(serverUrl);
-          print('🚀 AppStartup: Auto-connection successful');
-        } catch (e) {
-          print('🚀 AppStartup: Auto-connection failed: $e');
-          // Connection failed, but still show home screen
-          // User can manually reconnect from there
+      // 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;
        }
-      } else {
-        print('🚀 AppStartup: Already connected');
+        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) {
@@ -4,6 +4,10 @@ enum MediaType {
  track,
  playlist,
  radio,
+  audiobook,
+  chapter,
+  podcast,
+  podcastEpisode,
 }

 class ProviderMapping {
@@ -140,11 +144,15 @@ class Artist extends MediaItem {
      favorite: item.favorite,
    );
  }
+
+  @override
+  Map<String, dynamic> toJson() => super.toJson();
 }

 class Album extends MediaItem {
  final List<Artist>? artists;
  final String? albumType;
+  final int? year;

  Album({
    required super.itemId,
@@ -152,6 +160,7 @@ class Album extends MediaItem {
    required super.name,
    this.artists,
    this.albumType,
+    this.year,
    super.sortName,
    super.uri,
    super.providerMappings,
@@ -161,6 +170,15 @@ class Album extends MediaItem {

  factory Album.fromJson(Map<String, dynamic> json) {
    final item = MediaItem.fromJson(json);
+    // Parse year - can be int or null
+    int? year;
+    final yearValue = json['year'];
+    if (yearValue is int) {
+      year = yearValue;
+    } else if (yearValue is String) {
+      year = int.tryParse(yearValue);
+    }
+
    return Album(
      itemId: item.itemId,
      provider: item.provider,
@@ -169,6 +187,7 @@ class Album extends MediaItem {
          ?.map((e) => Artist.fromJson(e as Map<String, dynamic>))
          .toList(),
      albumType: json['album_type'] as String?,
+      year: year,
      sortName: item.sortName,
      uri: item.uri,
      providerMappings: item.providerMappings,
@@ -179,6 +198,28 @@ class Album extends MediaItem {

  String get artistsString =>
      artists?.map((a) => a.name).join(', ') ?? 'Unknown Artist';
+
+  /// Get album name with year appended (e.g., "Album Name (2023)")
+  String get nameWithYear {
+    return year != null ? '$name ($year)' : name;
+  }
+
+  /// Check if this album is in the user's library
+  bool get inLibrary {
+    if (provider == 'library') return true;
+    return providerMappings?.any((m) => m.providerInstance == 'library') ?? false;
+  }
+
+  @override
+  Map<String, dynamic> toJson() {
+    final json = super.toJson();
+    if (artists != null) {
+      json['artists'] = artists!.map((a) => a.toJson()).toList();
+    }
+    if (albumType != null) json['album_type'] = albumType;
+    if (year != null) json['year'] = year;
+    return json;
+  }
 }

 class Track extends MediaItem {
@@ -224,6 +265,16 @@ class Track extends MediaItem {

  String get artistsString =>
      artists?.map((a) => a.name).join(', ') ?? 'Unknown Artist';
+
+  @override
+  Map<String, dynamic> toJson() {
+    final json = super.toJson();
+    if (artists != null) {
+      json['artists'] = artists!.map((a) => a.toJson()).toList();
+    }
+    if (album != null) json['album'] = album!.toJson();
+    return json;
+  }
 }

 class Playlist extends MediaItem {
@@ -262,3 +313,363 @@ class Playlist extends MediaItem {
    );
  }
 }
+
+class Chapter {
+  final int chapterNumber;
+  final int positionMs;
+  final String title;
+  final Duration? duration;
+
+  Chapter({
+    required this.chapterNumber,
+    required this.positionMs,
+    required this.title,
+    this.duration,
+  });
+
+  factory Chapter.fromJson(Map<String, dynamic> json) {
+    // MA API returns chapters with format:
+    // {position: 1, name: "Opening Credits", start: 0.0, end: 17.6}
+    // We need to handle both this format and potential others
+
+    // Get chapter number (MA uses 'position' for chapter number)
+    int chapterNum = 0;
+    if (json['position'] is int) {
+      chapterNum = json['position'] as int;
+    } else if (json['chapter_number'] is int) {
+      chapterNum = json['chapter_number'] as int;
+    } else if (json['chapter_id'] is int) {
+      chapterNum = json['chapter_id'] as int;
+    }
+
+    // Get position in milliseconds (MA uses 'start' in seconds)
+    int posMs = 0;
+    if (json['start'] != null) {
+      // MA provides start time in seconds (can be double)
+      posMs = ((json['start'] as num) * 1000).toInt();
+    } else if (json['position_ms'] != null) {
+      posMs = json['position_ms'] as int;
+    }
+
+    // Get title (MA uses 'name')
+    String title = json['name'] as String? ??
+                   json['title'] as String? ??
+                   'Chapter $chapterNum';
+
+    // Calculate duration from start/end if available
+    Duration? dur;
+    if (json['start'] != null && json['end'] != null) {
+      final startSec = (json['start'] as num).toDouble();
+      final endSec = (json['end'] as num).toDouble();
+      dur = Duration(milliseconds: ((endSec - startSec) * 1000).toInt());
+    } else if (json['duration'] != null) {
+      dur = Duration(seconds: (json['duration'] as num).toInt());
+    }
+
+    return Chapter(
+      chapterNumber: chapterNum,
+      positionMs: posMs,
+      title: title,
+      duration: dur,
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'chapter_number': chapterNumber,
+      'position_ms': positionMs,
+      'title': title,
+      if (duration != null) 'duration': duration!.inSeconds,
+    };
+  }
+}
+
+class Audiobook extends MediaItem {
+  final List<Artist>? authors;
+  final List<Artist>? narrators;
+  final String? publisher;
+  final String? description;
+  final int? year;
+  final List<Chapter>? chapters;
+  final int? resumePositionMs;
+  final bool? fullyPlayed;
+  /// Browse order from API - used as fallback for series sequencing
+  final int? browseOrder;
+
+  Audiobook({
+    required super.itemId,
+    required super.provider,
+    required super.name,
+    this.authors,
+    this.narrators,
+    this.publisher,
+    this.description,
+    this.year,
+    this.chapters,
+    this.resumePositionMs,
+    this.fullyPlayed,
+    this.browseOrder,
+    super.sortName,
+    super.uri,
+    super.providerMappings,
+    super.metadata,
+    super.favorite,
+    super.duration,
+  }) : super(mediaType: MediaType.audiobook);
+
+  factory Audiobook.fromJson(Map<String, dynamic> json) {
+    final item = MediaItem.fromJson(json);
+
+    // Parse year
+    int? year;
+    final yearValue = json['year'];
+    if (yearValue is int) {
+      year = yearValue;
+    } else if (yearValue is String) {
+      year = int.tryParse(yearValue);
+    }
+
+    // Helper to parse authors/narrators that can be either strings or Artist objects
+    List<Artist>? parseArtistList(dynamic data) {
+      if (data == null) return null;
+      if (data is! List) return null;
+
+      return data.map((e) {
+        if (e is String) {
+          // MA returns just the name as a string
+          return Artist(
+            itemId: '',
+            provider: 'library',
+            name: e,
+          );
+        } else if (e is Map<String, dynamic>) {
+          // Full Artist object
+          return Artist.fromJson(e);
+        }
+        return Artist(itemId: '', provider: 'library', name: 'Unknown');
+      }).toList();
+    }
+
+    // Parse chapters - check top level first, then metadata
+    List<Chapter>? chapters;
+    final metadata = json['metadata'] as Map<String, dynamic>?;
+
+    dynamic chaptersData = json['chapters'];
+    if (chaptersData == null && metadata != null) {
+      chaptersData = metadata['chapters'];
+    }
+
+    if (chaptersData is List && chaptersData.isNotEmpty) {
+      chapters = chaptersData
+          .map((e) => Chapter.fromJson(e as Map<String, dynamic>))
+          .toList();
+    }
+
+    // Parse description - check top level first, then metadata
+    String? description = json['description'] as String?;
+    if (description == null && metadata != null) {
+      description = metadata['description'] as String?;
+    }
+
+    return Audiobook(
+      itemId: item.itemId,
+      provider: item.provider,
+      name: item.name,
+      authors: parseArtistList(json['authors']),
+      narrators: parseArtistList(json['narrators']),
+      publisher: json['publisher'] as String?,
+      description: description,
+      year: year,
+      chapters: chapters,
+      resumePositionMs: json['resume_position_ms'] as int?,
+      fullyPlayed: json['fully_played'] as bool?,
+      browseOrder: json['_browse_order'] as int?,
+      sortName: item.sortName,
+      uri: item.uri,
+      providerMappings: item.providerMappings,
+      metadata: item.metadata,
+      favorite: item.favorite,
+      duration: item.duration,
+    );
+  }
+
+  String get authorsString =>
+      authors?.map((a) => a.name).join(', ') ?? 'Unknown Author';
+
+  String get narratorsString =>
+      narrators?.map((n) => n.name).join(', ') ?? 'Unknown Narrator';
+
+  /// Get progress as a percentage (0.0 to 1.0)
+  double get progress {
+    if (fullyPlayed == true) return 1.0;
+    if (resumePositionMs == null || duration == null) return 0.0;
+    final totalMs = duration!.inMilliseconds;
+    if (totalMs == 0) return 0.0;
+    return (resumePositionMs! / totalMs).clamp(0.0, 1.0);
+  }
+
+  /// Get series sequence number from metadata (for sorting within a series)
+  /// Tries various metadata fields commonly used by audiobook providers
+  double? get seriesSequence {
+    // First try the parent's position field (used by MA browse results)
+    if (position != null) return position!.toDouble();
+
+    // Try extracting number from sort_name (e.g., "01 - Book Title" or "Book 1")
+    if (sortName != null && sortName!.isNotEmpty) {
+      // Try to extract leading number
+      final match = RegExp(r'^(\d+)').firstMatch(sortName!);
+      if (match != null) {
+        return double.tryParse(match.group(1)!);
+      }
+      // Try to extract "Book N" pattern
+      final bookMatch = RegExp(r'[Bb]ook\s*(\d+)').firstMatch(sortName!);
+      if (bookMatch != null) {
+        return double.tryParse(bookMatch.group(1)!);
+      }
+    }
+
+    // Try extracting from the name itself
+    final nameMatch = RegExp(r'^(\d+)').firstMatch(name);
+    if (nameMatch != null) {
+      return double.tryParse(nameMatch.group(1)!);
+    }
+    final bookNameMatch = RegExp(r'[Bb]ook\s*(\d+)').firstMatch(name);
+    if (bookNameMatch != null) {
+      return double.tryParse(bookNameMatch.group(1)!);
+    }
+
+    if (metadata == null) return null;
+
+    // Try common metadata fields for series sequence
+    final seq = metadata!['sequence'] ??
+                metadata!['series_sequence'] ??
+                metadata!['series_number'] ??
+                metadata!['position'] ??
+                metadata!['sort_order'] ??
+                metadata!['order'];
+
+    if (seq is num) return seq.toDouble();
+    if (seq is String) return double.tryParse(seq);
+
+    // Check if there's a series object with sequence
+    final series = metadata!['series'];
+    if (series is Map) {
+      final seriesSeq = series['sequence'] ?? series['number'] ?? series['order'];
+      if (seriesSeq is num) return seriesSeq.toDouble();
+      if (seriesSeq is String) return double.tryParse(seriesSeq);
+    }
+    if (series is List && series.isNotEmpty) {
+      final first = series.first;
+      if (first is Map) {
+        final seriesSeq = first['sequence'] ?? first['number'] ?? first['order'];
+        if (seriesSeq is num) return seriesSeq.toDouble();
+        if (seriesSeq is String) return double.tryParse(seriesSeq);
+      }
+    }
+
+    // Last resort: use browse order from API (preserves MA/Audiobookshelf order)
+    if (browseOrder != null) return browseOrder!.toDouble();
+
+    return null;
+  }
+
+  @override
+  Map<String, dynamic> toJson() {
+    final json = super.toJson();
+    if (authors != null) {
+      json['authors'] = authors!.map((a) => a.toJson()).toList();
+    }
+    if (narrators != null) {
+      json['narrators'] = narrators!.map((n) => n.toJson()).toList();
+    }
+    if (publisher != null) json['publisher'] = publisher;
+    if (description != null) json['description'] = description;
+    if (year != null) json['year'] = year;
+    if (chapters != null) {
+      json['chapters'] = chapters!.map((c) => c.toJson()).toList();
+    }
+    if (resumePositionMs != null) json['resume_position_ms'] = resumePositionMs;
+    if (fullyPlayed != null) json['fully_played'] = fullyPlayed;
+    if (browseOrder != null) json['_browse_order'] = browseOrder;
+    return json;
+  }
+}
+
+/// Represents a browseable folder in Music Assistant (providers, series, authors, etc.)
+class BrowseFolder {
+  final String path;
+  final String name;
+  final String? label;
+  final String? thumbnailUrl;
+  final bool canExpand;
+  final List<MediaItem>? items;
+
+  BrowseFolder({
+    required this.path,
+    required this.name,
+    this.label,
+    this.thumbnailUrl,
+    this.canExpand = true,
+    this.items,
+  });
+
+  factory BrowseFolder.fromJson(Map<String, dynamic> json) {
+    // MA returns either a BrowseFolder or a MediaItem
+    // BrowseFolder has 'path' and 'name', MediaItem has 'item_id' and 'media_type'
+    return BrowseFolder(
+      path: json['path'] as String? ?? json['uri'] as String? ?? '',
+      name: json['name'] as String? ?? json['label'] as String? ?? 'Unknown',
+      label: json['label'] as String?,
+      thumbnailUrl: _extractThumbnail(json),
+      canExpand: json['can_expand'] as bool? ?? true,
+    );
+  }
+
+  static String? _extractThumbnail(Map<String, dynamic> json) {
+    // Check for image in metadata
+    final metadata = json['metadata'] as Map<String, dynamic>?;
+    if (metadata != null) {
+      final images = metadata['images'] as List<dynamic>?;
+      if (images != null && images.isNotEmpty) {
+        final first = images.first as Map<String, dynamic>;
+        return first['path'] as String?;
+      }
+    }
+    // Check for direct thumbnail
+    return json['thumbnail'] as String? ?? json['image'] as String?;
+  }
+}
+
+/// Represents an audiobook series
+class AudiobookSeries {
+  final String id;
+  final String name;
+  final String? thumbnailUrl;
+  final List<Audiobook>? books;
+  final int? bookCount;
+
+  AudiobookSeries({
+    required this.id,
+    required this.name,
+    this.thumbnailUrl,
+    this.books,
+    this.bookCount,
+  });
+
+  factory AudiobookSeries.fromBrowseFolder(BrowseFolder folder) {
+    return AudiobookSeries(
+      id: folder.path,
+      name: folder.name,
+      thumbnailUrl: folder.thumbnailUrl,
+    );
+  }
+
+  factory AudiobookSeries.fromJson(Map<String, dynamic> json) {
+    return AudiobookSeries(
+      id: json['path'] as String? ?? json['id'] as String? ?? '',
+      name: json['name'] as String? ?? json['label'] as String? ?? 'Unknown Series',
+      thumbnailUrl: BrowseFolder._extractThumbnail(json),
+      bookCount: json['book_count'] as int?,
+    );
+  }
+}
@@ -27,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) {
@@ -60,36 +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?,
@@ -0,0 +1,250 @@
+import 'dart:async';
+import 'package:flutter/foundation.dart';
+import '../services/music_assistant_api.dart';
+import '../services/settings_service.dart';
+import '../services/database_service.dart';
+import '../services/profile_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 + create/activate local profile
+  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');
+
+        // Create/activate profile in local database
+        if (DatabaseService.instance.isInitialized && username != null) {
+          await ProfileService.instance.onMaAuthenticated(
+            username: username,
+            displayName: displayName,
+          );
+          _logger.log('✅ Local profile activated: $username');
+        }
+      } 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();
+  }
+}
@@ -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();
+  }
+}
@@ -0,0 +1,963 @@
+import 'dart:async';
+import 'package:flutter/foundation.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;
+        }
+
+        // Filter out MA Web UI's built-in player (provider is 'builtin_player' and starts with 'ma_')
+        // Note: We check BOTH conditions to avoid filtering snapcast/other players that may have 'ma_' prefix
+        if (player.provider == 'builtin_player' && player.playerId.startsWith('ma_')) {
+          filteredCount++;
+          return false;
+        }
+
+        // Also filter "This Device" named players without proper provider
+        if (nameLower == 'this device') {
+          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();
+  }
+}
@@ -8,6 +8,7 @@ import '../theme/palette_helper.dart';
 import '../theme/theme_provider.dart';
 import '../services/metadata_service.dart';
 import '../services/debug_logger.dart';
+import '../services/recently_played_service.dart';
 import '../widgets/global_player_overlay.dart';
 import 'artist_details_screen.dart';

@@ -43,8 +44,43 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    super.initState();
    _isFavorite = widget.album.favorite ?? false;
    _loadTracks();
-    _extractColors();
    _loadAlbumDescription();
+    _refreshFavoriteStatus();
+
+    // CRITICAL FIX: Defer color extraction until after the transition completes
+    // This prevents expensive palette extraction during hero animation
+    // Wait for the first frame to be painted, then extract colors
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // Add small delay to ensure transition is complete
+      Future.delayed(const Duration(milliseconds: 350), () {
+        if (mounted) {
+          _extractColors();
+        }
+      });
+    });
+  }
+
+  Future<void> _refreshFavoriteStatus() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    // Need a URI to fetch fresh album data
+    final albumUri = widget.album.uri;
+    if (albumUri == null || albumUri.isEmpty) {
+      _logger.log('Cannot refresh favorite status: album has no URI');
+      return;
+    }
+
+    try {
+      final freshAlbum = await maProvider.api!.getAlbumByUri(albumUri);
+      if (freshAlbum != null && mounted) {
+        setState(() {
+          _isFavorite = freshAlbum.favorite ?? false;
+        });
+      }
+    } catch (e) {
+      _logger.log('Error refreshing favorite status: $e');
+    }
  }

  Future<void> _extractColors() async {
@@ -74,19 +110,63 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    if (maProvider.api == null) return;

    try {
-      // Toggle the state locally first
      final newState = !_isFavorite;

-      await maProvider.api!.toggleFavorite(
-        'album',
-        widget.album.itemId,
-        widget.album.provider,
-      );
+      if (newState) {
+        // For adding: use the actual provider and itemId from provider_mappings
+        String actualProvider = widget.album.provider;
+        String actualItemId = widget.album.itemId;
+
+        if (widget.album.providerMappings != null && widget.album.providerMappings!.isNotEmpty) {
+          // Find a non-library provider mapping (e.g., spotify, qobuz, etc.)
+          final mapping = widget.album.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => widget.album.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => widget.album.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        _logger.log('Adding to favorites: provider=$actualProvider, itemId=$actualItemId');
+        await maProvider.api!.addToFavorites('album', actualItemId, actualProvider);
+      } else {
+        // For removing: need the library_item_id (numeric)
+        // When provider is "library", itemId is the library ID as a string
+        // Otherwise, we need to find it from provider_mappings
+        int? libraryItemId;
+
+        if (widget.album.provider == 'library') {
+          libraryItemId = int.tryParse(widget.album.itemId);
+        } else if (widget.album.providerMappings != null) {
+          // Find the library mapping
+          final libraryMapping = widget.album.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.album.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Error: Could not determine library_item_id for removal');
+          throw Exception('Could not determine library ID for this album');
+        }
+
+        _logger.log('Removing from favorites: libraryItemId=$libraryItemId');
+        await maProvider.api!.removeFromFavorites('album', libraryItemId);
+      }

      setState(() {
        _isFavorite = newState;
      });

+      // Invalidate home cache so the home screen shows updated favorite status
+      maProvider.invalidateHomeCache();
+
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
@@ -99,6 +179,100 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      }
    } catch (e) {
      _logger.log('Error toggling favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _toggleTrackFavorite(int trackIndex) async {
+    if (trackIndex < 0 || trackIndex >= _tracks.length) return;
+
+    final track = _tracks[trackIndex];
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    final currentFavorite = track.favorite ?? false;
+
+    try {
+      if (currentFavorite) {
+        // Remove from favorites - need library_item_id
+        int? libraryItemId;
+        if (track.provider == 'library') {
+          libraryItemId = int.tryParse(track.itemId);
+        } else if (track.providerMappings != null) {
+          final libraryMapping = track.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => track.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId != null) {
+          await maProvider.api!.removeFromFavorites('track', libraryItemId);
+        }
+      } else {
+        // Add to favorites
+        String actualProvider = track.provider;
+        String actualItemId = track.itemId;
+
+        if (track.providerMappings != null && track.providerMappings!.isNotEmpty) {
+          final mapping = track.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => track.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => track.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        await maProvider.api!.addToFavorites('track', actualItemId, actualProvider);
+      }
+
+      // Update local state - create new track with toggled favorite
+      setState(() {
+        _tracks[trackIndex] = Track(
+          itemId: track.itemId,
+          provider: track.provider,
+          name: track.name,
+          uri: track.uri,
+          favorite: !currentFavorite,
+          artists: track.artists,
+          album: track.album,
+          duration: track.duration,
+          providerMappings: track.providerMappings,
+        );
+      });
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              !currentFavorite ? 'Added to favorites' : 'Removed from favorites',
+            ),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error toggling track favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
    }
  }

@@ -135,6 +309,9 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      // Queue all tracks via Music Assistant
      await maProvider.playTracks(player.playerId, _tracks, startIndex: 0);
      _logger.log('Album queued on ${player.name}');
+
+      // Record to local recently played (per-profile)
+      RecentlyPlayedService.instance.recordAlbumPlayed(widget.album);
      // Stay on album page - mini player will appear
    } catch (e) {
      _logger.log('Error playing album: $e');
@@ -165,34 +342,84 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    }
  }

-  Future<void> _addAlbumToQueue() async {
+  void _addAlbumToQueue() {
    final maProvider = context.read<MusicAssistantProvider>();
+    final players = maProvider.availablePlayers;

-    try {
-      final player = maProvider.selectedPlayer;
-      if (player == null) {
-        _showError('No player selected');
-        return;
-      }
+    // Slide mini player down out of the way
+    GlobalPlayerOverlay.hidePlayer();

-      _logger.log('Adding album to queue on ${player.name}');
-
-      // Add all tracks to queue without clearing
-      await maProvider.playTracks(player.playerId, _tracks, startIndex: 0, clearQueue: false);
-      _logger.log('Album added to queue on ${player.name}');
-
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(
-            content: Text('Album added to queue'),
-            duration: Duration(seconds: 1),
-          ),
-        );
-      }
-    } catch (e) {
-      _logger.log('Error adding album to queue: $e');
-      _showError('Failed to add album to queue: $e');
-    }
+    showModalBottomSheet(
+      context: context,
+      backgroundColor: Colors.transparent,
+      builder: (context) => Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surface,
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const SizedBox(height: 16),
+            Text(
+              'Add album to queue 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, playerIndex) {
+                    final player = players[playerIndex];
+                    return ListTile(
+                      leading: Icon(
+                        Icons.speaker,
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
+                      title: Text(player.name),
+                      onTap: () async {
+                        Navigator.pop(context);
+                        try {
+                          _logger.log('Adding album to queue on ${player.name}');
+                          await maProvider.playTracks(
+                            player.playerId,
+                            _tracks,
+                            startIndex: 0,
+                            clearQueue: false,
+                          );
+                          _logger.log('Album added to queue on ${player.name}');
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              const SnackBar(
+                                content: Text('Album added to queue'),
+                                duration: Duration(seconds: 1),
+                              ),
+                            );
+                          }
+                        } catch (e) {
+                          _logger.log('Error adding album to queue: $e');
+                          _showError('Failed to add album to queue: $e');
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
+          ],
+        ),
+      ),
+    ).whenComplete(() {
+      // Show mini player again when sheet closes
+      GlobalPlayerOverlay.showPlayer();
+    });
  }

  void _addTrackToQueue(BuildContext context, int index) {
@@ -277,10 +504,16 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
  void _navigateToArtist() {
    // Navigate to the first artist if available
    if (widget.album.artists != null && widget.album.artists!.isNotEmpty) {
+      final artist = widget.album.artists!.first;
+      final maProvider = context.read<MusicAssistantProvider>();
+      final imageUrl = maProvider.getImageUrl(artist, size: 256);
      Navigator.push(
        context,
        MaterialPageRoute(
-          builder: (context) => ArtistDetailsScreen(artist: widget.album.artists!.first),
+          builder: (context) => ArtistDetailsScreen(
+            artist: artist,
+            initialImageUrl: imageUrl,
+          ),
        ),
      );
    }
@@ -316,20 +549,75 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    }
  }

+  /// Show fullscreen album art overlay
+  void _showFullscreenArt(String? imageUrl) {
+    if (imageUrl == null) return;
+
+    Navigator.of(context).push(
+      PageRouteBuilder(
+        opaque: false,
+        barrierColor: Colors.black87,
+        barrierDismissible: true,
+        pageBuilder: (context, animation, secondaryAnimation) {
+          return FadeTransition(
+            opacity: animation,
+            child: GestureDetector(
+              onTap: () => Navigator.of(context).pop(),
+              onVerticalDragEnd: (details) {
+                if (details.primaryVelocity != null && details.primaryVelocity!.abs() > 300) {
+                  Navigator.of(context).pop();
+                }
+              },
+              child: Scaffold(
+                backgroundColor: Colors.transparent,
+                body: Center(
+                  child: InteractiveViewer(
+                    minScale: 0.5,
+                    maxScale: 3.0,
+                    child: CachedNetworkImage(
+                      imageUrl: imageUrl,
+                      fit: BoxFit.contain,
+                      memCacheWidth: 1024,
+                      memCacheHeight: 1024,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
-    final maProvider = context.watch<MusicAssistantProvider>();
-    final themeProvider = context.watch<ThemeProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.album, size: 512);
-    
+    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
+    // Only rebuild when specific properties change, not on every provider update
+    final imageUrl = context.select<MusicAssistantProvider, String?>(
+      (provider) => provider.getImageUrl(widget.album, size: 512),
+    );
+    final adaptiveTheme = context.select<ThemeProvider, bool>(
+      (provider) => provider.adaptiveTheme,
+    );
+    final adaptiveLightScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveLightScheme,
+    );
+    final adaptiveDarkScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveDarkScheme,
+    );
+
    // Determine if we should use adaptive theme colors
-    final useAdaptiveTheme = themeProvider.adaptiveTheme;
    final isDark = Theme.of(context).brightness == Brightness.dark;

-    // Get the color scheme to use
+    // Get the color scheme to use - prefer local state over provider
+    // Local state (_darkColorScheme/_lightColorScheme) is set by _extractColors()
    ColorScheme? adaptiveScheme;
-    if (useAdaptiveTheme) {
-      adaptiveScheme = isDark ? _darkColorScheme : _lightColorScheme;
+    if (adaptiveTheme) {
+      // Use local state first (from _extractColors), fallback to provider
+      adaptiveScheme = isDark
+        ? (_darkColorScheme ?? adaptiveDarkScheme)
+        : (_lightColorScheme ?? adaptiveLightScheme);
    }

    // Use adaptive scheme if available, otherwise use global theme
@@ -364,35 +652,38 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(height: 60),
-                  Hero(
-                    tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + _heroTagSuffix,
-                    child: Container(
-                      width: 280, // Increased size
-                      height: 280,
-                      decoration: BoxDecoration(
-                        color: colorScheme.surfaceVariant,
-                        borderRadius: BorderRadius.circular(16), // Slightly more rounded
-                        boxShadow: [
-                          BoxShadow(
-                            color: Colors.black.withOpacity(0.3),
-                            blurRadius: 20,
-                            offset: const Offset(0, 10),
-                          ),
-                        ],
-                        image: imageUrl != null
-                            ? DecorationImage(
-                                image: CachedNetworkImageProvider(imageUrl),
-                                fit: BoxFit.cover,
+                  GestureDetector(
+                    onTap: () => _showFullscreenArt(imageUrl),
+                    child: Hero(
+                      tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + _heroTagSuffix,
+                      child: Container(
+                        width: 280, // Increased size
+                        height: 280,
+                        decoration: BoxDecoration(
+                          color: colorScheme.surfaceVariant,
+                          borderRadius: BorderRadius.circular(16), // Slightly more rounded
+                          boxShadow: [
+                            BoxShadow(
+                              color: Colors.black.withOpacity(0.3),
+                              blurRadius: 20,
+                              offset: const Offset(0, 10),
+                            ),
+                          ],
+                          image: imageUrl != null
+                              ? DecorationImage(
+                                  image: CachedNetworkImageProvider(imageUrl),
+                                  fit: BoxFit.cover,
+                                )
+                              : null,
+                        ),
+                        child: imageUrl == null
+                            ? Icon(
+                                Icons.album_rounded,
+                                size: 120,
+                                color: colorScheme.onSurfaceVariant,
                              )
                            : null,
                      ),
-                      child: imageUrl == null
-                          ? Icon(
-                              Icons.album_rounded,
-                              size: 120,
-                              color: colorScheme.onSurfaceVariant,
-                            )
-                          : null,
                    ),
                  ),
                ],
@@ -410,7 +701,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                    child: Material(
                      color: Colors.transparent,
                      child: Text(
-                        widget.album.name,
+                        widget.album.nameWithYear,
                        style: textTheme.headlineMedium?.copyWith(
                          color: colorScheme.onBackground,
                          fontWeight: FontWeight.bold,
@@ -523,18 +814,22 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                      const SizedBox(width: 12),

                      // Favorite Button
-                      Container(
+                      SizedBox(
                        height: 50,
                        width: 50,
-                        decoration: BoxDecoration(
-                          color: _isFavorite ? colorScheme.errorContainer : colorScheme.surfaceVariant,
-                          shape: BoxShape.circle,
-                        ),
-                        child: IconButton(
+                        child: FilledButton.tonal(
                          onPressed: _toggleFavorite,
-                          icon: Icon(
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(25), // Circular
+                            ),
+                          ),
+                          child: Icon(
                            _isFavorite ? Icons.favorite : Icons.favorite_border,
-                            color: _isFavorite ? colorScheme.error : colorScheme.onSurfaceVariant,
+                            color: _isFavorite
+                                ? colorScheme.error
+                                : colorScheme.onSurfaceVariant,
                          ),
                        ),
                      ),
@@ -645,39 +940,60 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                        curve: Curves.easeInOut,
                        child: isExpanded
                            ? Padding(
-                                padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+                                padding: const EdgeInsets.only(right: 16.0, bottom: 12.0, top: 4.0),
                                child: Row(
+                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
-                                    Expanded(
-                                      child: SizedBox(
-                                        height: 48,
-                                        child: FilledButton.tonal(
-                                          onPressed: () => _showPlayRadioMenu(context, index),
-                                          style: FilledButton.styleFrom(
-                                            backgroundColor: colorScheme.tertiaryContainer,
-                                            foregroundColor: colorScheme.onTertiaryContainer,
-                                            shape: RoundedRectangleBorder(
-                                              borderRadius: BorderRadius.circular(12),
-                                            ),
+                                    // Radio button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _showPlayRadioMenu(context, index),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(12),
                                          ),
-                                          child: const Text('Start radio'),
                                        ),
+                                        child: const Icon(Icons.radio, size: 20),
                                      ),
                                    ),
-                                    const SizedBox(width: 12),
-                                    Expanded(
-                                      child: SizedBox(
-                                        height: 48,
-                                        child: FilledButton.tonal(
-                                          onPressed: () => _addTrackToQueue(context, index),
-                                          style: FilledButton.styleFrom(
-                                            backgroundColor: colorScheme.secondaryContainer,
-                                            foregroundColor: colorScheme.onSecondaryContainer,
-                                            shape: RoundedRectangleBorder(
-                                              borderRadius: BorderRadius.circular(12),
-                                            ),
+                                    const SizedBox(width: 10),
+                                    // Add to queue button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _addTrackToQueue(context, index),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(12),
                                          ),
-                                          child: const Text('Add to queue'),
+                                        ),
+                                        child: const Icon(Icons.playlist_add, size: 20),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 10),
+                                    // Favorite button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _toggleTrackFavorite(index),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(22),
+                                          ),
+                                        ),
+                                        child: Icon(
+                                          track.favorite == true ? Icons.favorite : Icons.favorite_border,
+                                          size: 20,
+                                          color: track.favorite == true
+                                              ? colorScheme.error
+                                              : colorScheme.onSurfaceVariant,
                                        ),
                                      ),
                                    ),
@@ -692,7 +1008,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                childCount: _tracks.length,
              ),
            ),
-          const SliverToBoxAdapter(child: SizedBox(height: 140)), // Space for bottom nav + mini player
+          const SliverToBoxAdapter(child: SizedBox(height: 164)), // Space for bottom nav + mini player
        ],
      ),
      ),
@@ -703,67 +1019,18 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    final maProvider = context.read<MusicAssistantProvider>();
    final players = maProvider.availablePlayers;

-    // Slide mini player down out of the way
-    GlobalPlayerOverlay.hidePlayer();
-
-    showModalBottomSheet(
-      context: context,
-      backgroundColor: Colors.transparent,
-      builder: (context) => Container(
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
-              )
-            else
-              Flexible(
-                child: ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: players.length,
-                  itemBuilder: (context, index) {
-                    final player = players[index];
-                    return ListTile(
-                      leading: Icon(
-                        Icons.speaker,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                      title: Text(player.name),
-                      onTap: () {
-                        Navigator.pop(context);
-                        // Set this as the active player
-                        maProvider.selectPlayer(player);
-                        // Play album from this track onwards
-                        maProvider.playTracks(
-                          player.playerId,
-                          _tracks,
-                          startIndex: startIndex,
-                        );
-                      },
-                    );
-                  },
-                ),
-              ),
-            const SizedBox(height: 16),
-          ],
-        ),
-      ),
-    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
-      GlobalPlayerOverlay.showPlayer();
-    });
+    _showPlayOnSheet(
+      context,
+      players,
+      onPlayerSelected: (player) {
+        maProvider.selectPlayer(player);
+        maProvider.playTracks(
+          player.playerId,
+          _tracks,
+          startIndex: startIndex,
+        );
+      },
+    );
  }

  void _showPlayRadioMenu(BuildContext context, int trackIndex) {
@@ -771,85 +1038,54 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
    final players = maProvider.availablePlayers;
    final track = _tracks[trackIndex];

-    // Slide mini player down out of the way
-    GlobalPlayerOverlay.hidePlayer();
-
-    showModalBottomSheet(
-      context: context,
-      backgroundColor: Colors.transparent,
-      builder: (context) => Container(
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
-              )
-            else
-              Flexible(
-                child: ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: players.length,
-                  itemBuilder: (context, index) {
-                    final player = players[index];
-                    return ListTile(
-                      leading: Icon(
-                        Icons.speaker,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                      title: Text(player.name),
-                      onTap: () {
-                        Navigator.pop(context);
-                        // Set this as the active player
-                        maProvider.selectPlayer(player);
-                        // Play radio based on this track
-                        maProvider.playRadio(
-                          player.playerId,
-                          track,
-                        );
-                      },
-                    );
-                  },
-                ),
-              ),
-            const SizedBox(height: 16),
-          ],
-        ),
-      ),
-    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
-      GlobalPlayerOverlay.showPlayer();
-    });
+    _showPlayOnSheet(
+      context,
+      players,
+      onPlayerSelected: (player) {
+        maProvider.selectPlayer(player);
+        maProvider.playRadio(player.playerId, track);
+      },
+    );
  }

  void _showPlayOnMenu(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
    final players = maProvider.availablePlayers;

+    _showPlayOnSheet(
+      context,
+      players,
+      onPlayerSelected: (player) {
+        maProvider.selectPlayer(player);
+        maProvider.playTracks(player.playerId, _tracks);
+      },
+    );
+  }
+
+  /// Shared "Play on..." bottom sheet with fixed height and scrollable list
+  void _showPlayOnSheet(
+    BuildContext context,
+    List players, {
+    required void Function(dynamic player) onPlayerSelected,
+  }) {
    // Slide mini player down out of the way
    GlobalPlayerOverlay.hidePlayer();

+    final screenHeight = MediaQuery.of(context).size.height;
+    final bottomPadding = MediaQuery.of(context).padding.bottom;
+    final sheetHeight = (screenHeight * 0.45) + bottomPadding; // Fixed 45% + safe area
+
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
+      isScrollControlled: true,
      builder: (context) => Container(
+        height: sheetHeight,
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface,
          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        ),
        child: Column(
-          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 16),
            Text(
@@ -857,36 +1093,30 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
-            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
-              )
-            else
-              Flexible(
-                child: ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: players.length,
-                  itemBuilder: (context, index) {
-                    final player = players[index];
-                    return ListTile(
-                      leading: Icon(
-                        Icons.speaker,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                      title: Text(player.name),
-                      onTap: () {
-                        Navigator.pop(context);
-                        // Set this as the active player
-                        maProvider.selectPlayer(player);
-                        // Play on this specific player
-                        maProvider.playTracks(player.playerId, _tracks);
+            Expanded(
+              child: players.isEmpty
+                  ? const Center(
+                      child: Text('No players available'),
+                    )
+                  : ListView.builder(
+                      padding: EdgeInsets.only(bottom: bottomPadding + 16),
+                      itemCount: players.length,
+                      itemBuilder: (context, index) {
+                        final player = players[index];
+                        return ListTile(
+                          leading: Icon(
+                            Icons.speaker,
+                            color: Theme.of(context).colorScheme.onSurface,
+                          ),
+                          title: Text(player.name),
+                          onTap: () {
+                            Navigator.pop(context);
+                            onPlayerSelected(player);
+                          },
+                        );
                      },
-                    );
-                  },
-                ),
-              ),
-            const SizedBox(height: 16),
+                    ),
+            ),
          ],
        ),
      ),
@@ -9,17 +9,20 @@ import '../constants/hero_tags.dart';
 import '../theme/palette_helper.dart';
 import '../theme/theme_provider.dart';
 import '../services/metadata_service.dart';
+import '../services/settings_service.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
@@ -31,27 +34,362 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
  List<Album> _albums = [];
  List<Album> _providerAlbums = [];
  bool _isLoading = true;
+  bool _isFavorite = false;
  ColorScheme? _lightColorScheme;
  ColorScheme? _darkColorScheme;
  bool _isDescriptionExpanded = false;
  String? _artistDescription;
+  String? _artistImageUrl;
+
+  // View preferences
+  String _sortOrder = 'alpha'; // 'alpha' or 'year'
+  String _viewMode = 'grid2'; // 'grid2', 'grid3', 'list'

  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;
+    _loadViewPreferences();
    _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> _loadViewPreferences() async {
+    final sortOrder = await SettingsService.getArtistAlbumsSortOrder();
+    final viewMode = await SettingsService.getArtistAlbumsViewMode();
+    if (mounted) {
+      setState(() {
+        _sortOrder = sortOrder;
+        _viewMode = viewMode;
+      });
+    }
+  }
+
+  void _toggleSortOrder() {
+    final newOrder = _sortOrder == 'alpha' ? 'year' : 'alpha';
+    setState(() {
+      _sortOrder = newOrder;
+      _sortAlbums();
+    });
+    SettingsService.setArtistAlbumsSortOrder(newOrder);
+  }
+
+  void _cycleViewMode() {
+    String newMode;
+    switch (_viewMode) {
+      case 'grid2':
+        newMode = 'grid3';
+        break;
+      case 'grid3':
+        newMode = 'list';
+        break;
+      default:
+        newMode = 'grid2';
+    }
+    setState(() {
+      _viewMode = newMode;
+    });
+    SettingsService.setArtistAlbumsViewMode(newMode);
+  }
+
+  void _sortAlbums() {
+    if (_sortOrder == 'year') {
+      // Sort by year ascending (oldest first), null years at end
+      _albums.sort((a, b) {
+        if (a.year == null && b.year == null) return a.name.compareTo(b.name);
+        if (a.year == null) return 1;
+        if (b.year == null) return -1;
+        return a.year!.compareTo(b.year!);
+      });
+      _providerAlbums.sort((a, b) {
+        if (a.year == null && b.year == null) return a.name.compareTo(b.name);
+        if (a.year == null) return 1;
+        if (b.year == null) return -1;
+        return a.year!.compareTo(b.year!);
+      });
+    } else {
+      // Sort alphabetically
+      _albums.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
+      _providerAlbums.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
+    }
+  }
+
+  Future<void> _refreshFavoriteStatus() async {
    final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.artist, size: 512);
+    if (maProvider.api == null) return;

-    if (imageUrl == null) return;
+    final artistUri = widget.artist.uri;
+    if (artistUri == null || artistUri.isEmpty) {
+      _logger.log('Cannot refresh favorite status: artist has no URI');
+      return;
+    }

+    try {
+      final freshArtist = await maProvider.api!.getArtistByUri(artistUri);
+      if (freshArtist != null && mounted) {
+        setState(() {
+          _isFavorite = freshArtist.favorite ?? false;
+        });
+      }
+    } catch (e) {
+      _logger.log('Error refreshing artist favorite status: $e');
+    }
+  }
+
+  Future<void> _toggleFavorite() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    try {
+      final newState = !_isFavorite;
+
+      if (newState) {
+        String actualProvider = widget.artist.provider;
+        String actualItemId = widget.artist.itemId;
+
+        if (widget.artist.providerMappings != null && widget.artist.providerMappings!.isNotEmpty) {
+          final mapping = widget.artist.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => widget.artist.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => widget.artist.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        _logger.log('Adding artist to favorites: provider=$actualProvider, itemId=$actualItemId');
+        await maProvider.api!.addToFavorites('artist', actualItemId, actualProvider);
+      } else {
+        int? libraryItemId;
+
+        if (widget.artist.provider == 'library') {
+          libraryItemId = int.tryParse(widget.artist.itemId);
+        } else if (widget.artist.providerMappings != null) {
+          final libraryMapping = widget.artist.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.artist.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Error: Could not determine library_item_id for removal');
+          throw Exception('Could not determine library ID for this artist');
+        }
+
+        _logger.log('Removing artist from favorites: libraryItemId=$libraryItemId');
+        await maProvider.api!.removeFromFavorites('artist', libraryItemId);
+      }
+
+      setState(() {
+        _isFavorite = newState;
+      });
+
+      maProvider.invalidateHomeCache();
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+            ),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error toggling artist favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _startArtistRadio() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer == null) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('No player selected')),
+      );
+      return;
+    }
+
+    try {
+      await maProvider.playArtistRadio(selectedPlayer.playerId, widget.artist);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Starting ${widget.artist.name} radio'),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error starting artist radio: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to start radio: $e'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    }
+  }
+
+  void _showPlayOnMenu(BuildContext context) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final players = maProvider.availablePlayers;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    showModalBottomSheet(
+      context: context,
+      backgroundColor: colorScheme.surface,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (context) => Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Start ${widget.artist.name} radio on...',
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const SizedBox(height: 16),
+            if (players.isEmpty)
+              const Padding(
+                padding: EdgeInsets.all(32.0),
+                child: Text('No players available'),
+              )
+            else
+              Flexible(
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  itemCount: players.length,
+                  itemBuilder: (context, index) {
+                    final player = players[index];
+                    return ListTile(
+                      leading: Icon(
+                        Icons.speaker,
+                        color: colorScheme.onSurface,
+                      ),
+                      title: Text(player.name),
+                      onTap: () async {
+                        Navigator.pop(context);
+                        try {
+                          await maProvider.playArtistRadio(player.playerId, widget.artist);
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text('Starting ${widget.artist.name} radio on ${player.name}'),
+                                duration: const Duration(seconds: 1),
+                              ),
+                            );
+                          }
+                        } catch (e) {
+                          _logger.log('Error starting artist radio on player: $e');
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text('Failed to start radio: $e'),
+                                backgroundColor: Colors.red,
+                              ),
+                            );
+                          }
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            const SizedBox(height: 16),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Future<void> _addArtistRadioToQueue() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer == null) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('No player selected')),
+      );
+      return;
+    }
+
+    try {
+      // For adding to queue with radio mode, we use radio_mode but with 'add' option
+      await maProvider.api?.playArtistRadioToQueue(selectedPlayer.playerId, widget.artist);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Added ${widget.artist.name} radio to queue'),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error adding artist radio to queue: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to add to queue: $e'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _loadArtistImage() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Get image URL with fallback to Deezer/Fanart.tv
+    final imageUrl = await maProvider.getArtistImageUrlWithFallback(widget.artist, size: 512);
+
+    if (mounted && imageUrl != null) {
+      setState(() {
+        _artistImageUrl = imageUrl;
+      });
+      // Extract colors after we have the image
+      _extractColors(imageUrl);
+    }
+  }
+
+  Future<void> _extractColors(String imageUrl) async {
    try {
      final colorSchemes = await PaletteHelper.extractColorSchemes(
        CachedNetworkImageProvider(imageUrl),
@@ -92,9 +430,14 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
    final allAlbums = await provider.getArtistAlbumsWithCache(widget.artist.name);

    if (mounted) {
+      // Separate library albums from provider-only albums
+      final libraryAlbums = allAlbums.where((a) => a.inLibrary).toList();
+      final providerOnlyAlbums = allAlbums.where((a) => !a.inLibrary).toList();
+
      setState(() {
-        _albums = allAlbums;
-        _providerAlbums = []; // All albums are merged in the cache method
+        _albums = libraryAlbums;
+        _providerAlbums = providerOnlyAlbums;
+        _sortAlbums(); // Apply saved sort order
        _isLoading = false;
      });
    }
@@ -102,15 +445,30 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
  
  @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;
@@ -214,6 +572,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),
                ],
              ),
            ),
@@ -237,72 +678,117 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
              ),
            )
          else ...[
-            // Library Albums Section
+            // Library Albums Section with inline controls
            if (_albums.isNotEmpty) ...[
              SliverToBoxAdapter(
                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
-                  child: Text(
-                    'In Library',
-                    style: textTheme.titleLarge?.copyWith(
-                      color: colorScheme.onBackground,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                ),
-              ),
-              SliverPadding(
-                padding: const EdgeInsets.symmetric(horizontal: 12),
-                sliver: SliverGrid(
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    crossAxisCount: 2,
-                    childAspectRatio: 0.75,
-                    crossAxisSpacing: 12,
-                    mainAxisSpacing: 12,
-                  ),
-                  delegate: SliverChildBuilderDelegate(
-                    (context, index) {
-                      final album = _albums[index];
-                      return _buildAlbumCard(album, maProvider);
-                    },
-                    childCount: _albums.length,
+                  padding: const EdgeInsets.fromLTRB(24.0, 8.0, 12.0, 8.0),
+                  child: Row(
+                    children: [
+                      Text(
+                        'In Library',
+                        style: textTheme.titleLarge?.copyWith(
+                          color: colorScheme.onBackground,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      const Spacer(),
+                      // Sort toggle
+                      IconButton(
+                        icon: Icon(
+                          _sortOrder == 'alpha' ? Icons.sort_by_alpha : Icons.calendar_today,
+                          color: colorScheme.primary,
+                          size: 20,
+                        ),
+                        tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                        onPressed: _toggleSortOrder,
+                        visualDensity: VisualDensity.compact,
+                        padding: EdgeInsets.zero,
+                        constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                      ),
+                      // View mode toggle
+                      IconButton(
+                        icon: Icon(
+                          _viewMode == 'list'
+                              ? Icons.view_list
+                              : _viewMode == 'grid3'
+                                  ? Icons.grid_view
+                                  : Icons.grid_on,
+                          color: colorScheme.primary,
+                          size: 20,
+                        ),
+                        tooltip: _viewMode == 'grid2'
+                            ? '3-column grid'
+                            : _viewMode == 'grid3'
+                                ? 'List view'
+                                : '2-column grid',
+                        onPressed: _cycleViewMode,
+                        visualDensity: VisualDensity.compact,
+                        padding: EdgeInsets.zero,
+                        constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                      ),
+                    ],
                  ),
                ),
              ),
+              _buildAlbumSliver(_albums),
            ],

            // Provider Albums Section
            if (_providerAlbums.isNotEmpty) ...[
              SliverToBoxAdapter(
                child: Padding(
-                  padding: const EdgeInsets.fromLTRB(24.0, 32.0, 24.0, 12.0),
-                  child: Text(
-                    'From Providers',
-                    style: textTheme.titleLarge?.copyWith(
-                      color: colorScheme.onBackground,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                ),
-              ),
-              SliverPadding(
-                padding: const EdgeInsets.symmetric(horizontal: 12),
-                sliver: SliverGrid(
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    crossAxisCount: 2,
-                    childAspectRatio: 0.75,
-                    crossAxisSpacing: 12,
-                    mainAxisSpacing: 12,
-                  ),
-                  delegate: SliverChildBuilderDelegate(
-                    (context, index) {
-                      final album = _providerAlbums[index];
-                      return _buildAlbumCard(album, maProvider);
-                    },
-                    childCount: _providerAlbums.length,
+                  padding: EdgeInsets.fromLTRB(24.0, _albums.isEmpty ? 8.0 : 24.0, 12.0, 8.0),
+                  child: Row(
+                    children: [
+                      Text(
+                        'From Providers',
+                        style: textTheme.titleLarge?.copyWith(
+                          color: colorScheme.onBackground,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      // Only show controls here if no library albums
+                      if (_albums.isEmpty) ...[
+                        const Spacer(),
+                        IconButton(
+                          icon: Icon(
+                            _sortOrder == 'alpha' ? Icons.sort_by_alpha : Icons.calendar_today,
+                            color: colorScheme.primary,
+                            size: 20,
+                          ),
+                          tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                          onPressed: _toggleSortOrder,
+                          visualDensity: VisualDensity.compact,
+                          padding: EdgeInsets.zero,
+                          constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                        ),
+                        IconButton(
+                          icon: Icon(
+                            _viewMode == 'list'
+                                ? Icons.view_list
+                                : _viewMode == 'grid3'
+                                    ? Icons.grid_view
+                                    : Icons.grid_on,
+                            color: colorScheme.primary,
+                            size: 20,
+                          ),
+                          tooltip: _viewMode == 'grid2'
+                              ? '3-column grid'
+                              : _viewMode == 'grid3'
+                                  ? 'List view'
+                                  : '2-column grid',
+                          onPressed: _cycleViewMode,
+                          visualDensity: VisualDensity.compact,
+                          padding: EdgeInsets.zero,
+                          constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                        ),
+                      ],
+                    ],
                  ),
                ),
              ),
+              _buildAlbumSliver(_providerAlbums),
              const SliverToBoxAdapter(child: SizedBox(height: 140)), // Space for bottom nav + mini player
            ],
          ],
@@ -312,8 +798,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
    );
  }

-  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';
@@ -335,7 +823,8 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
-          Expanded(
+          AspectRatio(
+            aspectRatio: 1.0,  // Square album art
            child: Hero(
              tag: HeroTags.albumCover + (album.uri ?? album.itemId) + '_$heroSuffix',
              child: ClipRRect(
@@ -373,7 +862,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
            child: Material(
              color: Colors.transparent,
              child: Text(
-                album.name,
+                album.nameWithYear,
                style: textTheme.titleSmall?.copyWith(
                  color: colorScheme.onSurface,
                  fontWeight: FontWeight.w500,
@@ -401,4 +890,98 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
      ),
    );
  }
+
+  Widget _buildAlbumSliver(List<Album> albums) {
+    if (_viewMode == 'list') {
+      return SliverPadding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        sliver: SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) => _buildAlbumListTile(albums[index]),
+            childCount: albums.length,
+          ),
+        ),
+      );
+    }
+
+    final crossAxisCount = _viewMode == 'grid3' ? 3 : 2;
+    final childAspectRatio = _viewMode == 'grid3' ? 0.70 : 0.78;
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      sliver: SliverGrid(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: crossAxisCount,
+          childAspectRatio: childAspectRatio,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) => _buildAlbumCard(albums[index]),
+          childCount: albums.length,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAlbumListTile(Album album) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.getImageUrl(album, size: 128);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      leading: ClipRRect(
+        borderRadius: BorderRadius.circular(8),
+        child: Container(
+          width: 56,
+          height: 56,
+          color: colorScheme.surfaceVariant,
+          child: imageUrl != null
+              ? Image.network(
+                  imageUrl,
+                  fit: BoxFit.cover,
+                  errorBuilder: (_, __, ___) => Icon(
+                    Icons.album_rounded,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                )
+              : Icon(
+                  Icons.album_rounded,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+        ),
+      ),
+      title: Text(
+        album.nameWithYear,
+        style: textTheme.titleMedium?.copyWith(
+          color: colorScheme.onSurface,
+          fontWeight: FontWeight.w500,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      subtitle: Text(
+        album.artistsString,
+        style: textTheme.bodySmall?.copyWith(
+          color: colorScheme.onSurface.withOpacity(0.7),
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      onTap: () {
+        updateAdaptiveColorsFromImage(context, imageUrl);
+        Navigator.push(
+          context,
+          FadeSlidePageRoute(
+            child: AlbumDetailsScreen(
+              album: album,
+              heroTagSuffix: 'artist_albums',
+            ),
+          ),
+        );
+      },
+    );
+  }
 }
@@ -0,0 +1,534 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../widgets/global_player_overlay.dart';
+import '../theme/palette_helper.dart';
+import '../theme/theme_provider.dart';
+import '../services/settings_service.dart';
+import '../services/metadata_service.dart';
+import '../services/debug_logger.dart';
+import '../utils/page_transitions.dart';
+import '../constants/hero_tags.dart';
+import 'audiobook_detail_screen.dart';
+
+class AudiobookAuthorScreen extends StatefulWidget {
+  final String authorName;
+  final List<Audiobook> audiobooks;
+  final String? heroTagSuffix;
+
+  const AudiobookAuthorScreen({
+    super.key,
+    required this.authorName,
+    required this.audiobooks,
+    this.heroTagSuffix,
+  });
+
+  @override
+  State<AudiobookAuthorScreen> createState() => _AudiobookAuthorScreenState();
+}
+
+class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
+  final _logger = DebugLogger();
+  late List<Audiobook> _audiobooks;
+  ColorScheme? _lightColorScheme;
+  ColorScheme? _darkColorScheme;
+  String? _authorImageUrl;
+
+  // View preferences
+  String _sortOrder = 'alpha'; // 'alpha' or 'year'
+  String _viewMode = 'grid2'; // 'grid2', 'grid3', 'list'
+
+  String get _heroTagSuffix => widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
+
+  @override
+  void initState() {
+    super.initState();
+    _audiobooks = List.from(widget.audiobooks);
+    _loadViewPreferences();
+    _sortAudiobooks();
+    _loadAuthorImage();
+  }
+
+  Future<void> _loadAuthorImage() async {
+    final imageUrl = await MetadataService.getAuthorImageUrl(widget.authorName);
+    if (mounted && imageUrl != null) {
+      setState(() {
+        _authorImageUrl = imageUrl;
+      });
+    }
+  }
+
+  Future<void> _loadViewPreferences() async {
+    final sortOrder = await SettingsService.getAuthorAudiobooksSortOrder();
+    final viewMode = await SettingsService.getAuthorAudiobooksViewMode();
+    if (mounted) {
+      setState(() {
+        _sortOrder = sortOrder;
+        _viewMode = viewMode;
+        _sortAudiobooks();
+      });
+    }
+  }
+
+  void _toggleSortOrder() {
+    final newOrder = _sortOrder == 'alpha' ? 'year' : 'alpha';
+    setState(() {
+      _sortOrder = newOrder;
+      _sortAudiobooks();
+    });
+    SettingsService.setAuthorAudiobooksSortOrder(newOrder);
+  }
+
+  void _cycleViewMode() {
+    String newMode;
+    switch (_viewMode) {
+      case 'grid2':
+        newMode = 'grid3';
+        break;
+      case 'grid3':
+        newMode = 'list';
+        break;
+      default:
+        newMode = 'grid2';
+    }
+    setState(() {
+      _viewMode = newMode;
+    });
+    SettingsService.setAuthorAudiobooksViewMode(newMode);
+  }
+
+  void _sortAudiobooks() {
+    if (_sortOrder == 'year') {
+      _audiobooks.sort((a, b) {
+        if (a.year == null && b.year == null) return a.name.compareTo(b.name);
+        if (a.year == null) return 1;
+        if (b.year == null) return -1;
+        return a.year!.compareTo(b.year!);
+      });
+    } else {
+      _audiobooks.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    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,
+    );
+
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    ColorScheme? adaptiveScheme;
+    if (adaptiveTheme) {
+      adaptiveScheme = isDark
+        ? (_darkColorScheme ?? adaptiveDarkScheme)
+        : (_lightColorScheme ?? adaptiveLightScheme);
+    }
+    final colorScheme = adaptiveScheme ?? Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return PopScope(
+      canPop: true,
+      onPopInvokedWithResult: (didPop, result) {
+        if (didPop) {
+          clearAdaptiveColorsOnBack(context);
+        }
+      },
+      child: Scaffold(
+        backgroundColor: colorScheme.surface,
+        body: CustomScrollView(
+          slivers: [
+            SliverAppBar(
+              expandedHeight: 200,
+              pinned: true,
+              backgroundColor: colorScheme.surface,
+              leading: IconButton(
+                icon: const Icon(Icons.arrow_back_rounded),
+                onPressed: () {
+                  clearAdaptiveColorsOnBack(context);
+                  Navigator.pop(context);
+                },
+                color: colorScheme.onSurface,
+              ),
+              flexibleSpace: FlexibleSpaceBar(
+                background: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const SizedBox(height: 60),
+                    Hero(
+                      tag: HeroTags.authorImage + widget.authorName + _heroTagSuffix,
+                      child: Container(
+                        width: 200,
+                        height: 200,
+                        decoration: BoxDecoration(
+                          color: colorScheme.primaryContainer,
+                          shape: BoxShape.circle,
+                        ),
+                        child: ClipOval(
+                          child: _authorImageUrl != null
+                              ? CachedNetworkImage(
+                                  imageUrl: _authorImageUrl!,
+                                  fit: BoxFit.cover,
+                                  width: 200,
+                                  height: 200,
+                                  placeholder: (_, __) => Icon(
+                                    MdiIcons.accountOutline,
+                                    size: 100,
+                                    color: colorScheme.onPrimaryContainer,
+                                  ),
+                                  errorWidget: (_, __, ___) => Icon(
+                                    MdiIcons.accountOutline,
+                                    size: 100,
+                                    color: colorScheme.onPrimaryContainer,
+                                  ),
+                                )
+                              : Icon(
+                                  MdiIcons.accountOutline,
+                                  size: 100,
+                                  color: colorScheme.onPrimaryContainer,
+                                ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            SliverToBoxAdapter(
+              child: Padding(
+                padding: const EdgeInsets.all(24.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      widget.authorName,
+                      style: textTheme.headlineMedium?.copyWith(
+                        color: colorScheme.onSurface,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 8),
+                    Text(
+                      '${_audiobooks.length} ${_audiobooks.length == 1 ? 'audiobook' : 'audiobooks'}',
+                      style: textTheme.bodyLarge?.copyWith(
+                        color: colorScheme.onSurface.withOpacity(0.7),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            // Audiobooks Section Header with controls
+            SliverToBoxAdapter(
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(24.0, 8.0, 12.0, 8.0),
+                child: Row(
+                  children: [
+                    Text(
+                      'Audiobooks',
+                      style: textTheme.titleLarge?.copyWith(
+                        color: colorScheme.onSurface,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const Spacer(),
+                    // Sort toggle
+                    IconButton(
+                      icon: Icon(
+                        _sortOrder == 'alpha' ? Icons.sort_by_alpha : Icons.calendar_today,
+                        color: colorScheme.primary,
+                        size: 20,
+                      ),
+                      tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                      onPressed: _toggleSortOrder,
+                      visualDensity: VisualDensity.compact,
+                      padding: EdgeInsets.zero,
+                      constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                    ),
+                    // View mode toggle
+                    IconButton(
+                      icon: Icon(
+                        _viewMode == 'list'
+                            ? Icons.view_list
+                            : _viewMode == 'grid3'
+                                ? Icons.grid_view
+                                : Icons.grid_on,
+                        color: colorScheme.primary,
+                        size: 20,
+                      ),
+                      tooltip: _viewMode == 'grid2'
+                          ? '3-column grid'
+                          : _viewMode == 'grid3'
+                              ? 'List view'
+                              : '2-column grid',
+                      onPressed: _cycleViewMode,
+                      visualDensity: VisualDensity.compact,
+                      padding: EdgeInsets.zero,
+                      constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            _buildAudiobookSliver(),
+            const SliverToBoxAdapter(child: SizedBox(height: 140)),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAudiobookSliver() {
+    if (_viewMode == 'list') {
+      return SliverPadding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        sliver: SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) => _buildAudiobookListTile(_audiobooks[index]),
+            childCount: _audiobooks.length,
+          ),
+        ),
+      );
+    }
+
+    final crossAxisCount = _viewMode == 'grid3' ? 3 : 2;
+    final childAspectRatio = _viewMode == 'grid3' ? 0.65 : 0.70;
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      sliver: SliverGrid(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: crossAxisCount,
+          childAspectRatio: childAspectRatio,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) => _buildAudiobookCard(_audiobooks[index]),
+          childCount: _audiobooks.length,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAudiobookCard(Audiobook book) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.getImageUrl(book, size: 256);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final heroSuffix = 'author${_heroTagSuffix}';
+
+    return InkWell(
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          AspectRatio(
+            aspectRatio: 1.0,
+            child: Stack(
+              children: [
+                Hero(
+                  tag: HeroTags.audiobookCover + (book.uri ?? book.itemId) + '_$heroSuffix',
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      color: colorScheme.surfaceContainerHighest,
+                      child: imageUrl != null
+                          ? CachedNetworkImage(
+                              imageUrl: imageUrl,
+                              fit: BoxFit.cover,
+                              width: double.infinity,
+                              height: double.infinity,
+                              placeholder: (_, __) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                              errorWidget: (_, __, ___) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                            )
+                          : Center(
+                              child: Icon(
+                                MdiIcons.bookOutline,
+                                size: 48,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                    ),
+                  ),
+                ),
+                // Progress indicator
+                if (book.progress > 0)
+                  Positioned(
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    child: LinearProgressIndicator(
+                      value: book.progress,
+                      backgroundColor: Colors.black54,
+                      valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
+                      minHeight: 3,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 8),
+          Hero(
+            tag: HeroTags.audiobookTitle + (book.uri ?? book.itemId) + '_$heroSuffix',
+            child: Material(
+              color: Colors.transparent,
+              child: Text(
+                book.name,
+                style: textTheme.titleSmall?.copyWith(
+                  color: colorScheme.onSurface,
+                  fontWeight: FontWeight.w500,
+                ),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ),
+          if (book.narratorsString != 'Unknown Narrator')
+            Text(
+              'Narrated by ${book.narratorsString}',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onSurface.withOpacity(0.6),
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAudiobookListTile(Audiobook book) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.getImageUrl(book, size: 128);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final heroSuffix = 'author${_heroTagSuffix}';
+
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      leading: Hero(
+        tag: HeroTags.audiobookCover + (book.uri ?? book.itemId) + '_$heroSuffix',
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(4),
+          child: Stack(
+            children: [
+              Container(
+                width: 56,
+                height: 56,
+                color: colorScheme.surfaceContainerHighest,
+                child: imageUrl != null
+                    ? CachedNetworkImage(
+                        imageUrl: imageUrl,
+                        fit: BoxFit.cover,
+                        placeholder: (_, __) => Icon(
+                          MdiIcons.bookOutline,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                        errorWidget: (_, __, ___) => Icon(
+                          MdiIcons.bookOutline,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                      )
+                    : Icon(
+                        MdiIcons.bookOutline,
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+              ),
+              if (book.progress > 0)
+                Positioned(
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  child: LinearProgressIndicator(
+                    value: book.progress,
+                    backgroundColor: Colors.black54,
+                    valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
+                    minHeight: 2,
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+      title: Hero(
+        tag: HeroTags.audiobookTitle + (book.uri ?? book.itemId) + '_$heroSuffix',
+        child: Material(
+          color: Colors.transparent,
+          child: Text(
+            book.name,
+            style: textTheme.titleMedium?.copyWith(
+              color: colorScheme.onSurface,
+              fontWeight: FontWeight.w500,
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ),
+      subtitle: Text(
+        book.narratorsString != 'Unknown Narrator'
+            ? 'Narrated by ${book.narratorsString}'
+            : book.duration != null
+                ? _formatDuration(book.duration!)
+                : '',
+        style: textTheme.bodySmall?.copyWith(
+          color: colorScheme.onSurface.withOpacity(0.7),
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      trailing: book.progress > 0
+          ? Text(
+              '${(book.progress * 100).toInt()}%',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.primary,
+              ),
+            )
+          : null,
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+    );
+  }
+
+  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix}) {
+    Navigator.push(
+      context,
+      FadeSlidePageRoute(
+        child: AudiobookDetailScreen(
+          audiobook: book,
+          heroTagSuffix: heroTagSuffix,
+        ),
+      ),
+    );
+  }
+
+  String _formatDuration(Duration duration) {
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes % 60;
+    if (hours > 0) {
+      return '${hours}h ${minutes}m';
+    }
+    return '${minutes}m';
+  }
+}
@@ -0,0 +1,675 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../widgets/global_player_overlay.dart' show BottomSpacing;
+import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
+import '../utils/page_transitions.dart';
+import '../constants/hero_tags.dart';
+import 'audiobook_detail_screen.dart';
+
+class AudiobookSeriesScreen extends StatefulWidget {
+  final AudiobookSeries series;
+  final String? heroTag;
+
+  const AudiobookSeriesScreen({
+    super.key,
+    required this.series,
+    this.heroTag,
+  });
+
+  @override
+  State<AudiobookSeriesScreen> createState() => _AudiobookSeriesScreenState();
+}
+
+class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
+  final _logger = DebugLogger();
+  List<Audiobook> _audiobooks = [];
+  bool _isLoading = true;
+  String? _error;
+
+  // View preferences
+  String _sortOrder = 'series'; // 'series' (by series number) or 'alpha'
+  String _viewMode = 'grid2'; // 'grid2', 'grid3', 'list'
+
+  @override
+  void initState() {
+    super.initState();
+    _loadViewPreferences();
+    // Defer loading until after first frame to ensure UI renders first
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted) {
+        _loadSeriesBooks();
+      }
+    });
+  }
+
+  Future<void> _loadViewPreferences() async {
+    final sortOrder = await SettingsService.getSeriesAudiobooksSortOrder();
+    final viewMode = await SettingsService.getSeriesAudiobooksViewMode();
+    if (mounted) {
+      setState(() {
+        _sortOrder = sortOrder;
+        _viewMode = viewMode;
+      });
+    }
+  }
+
+  void _toggleSortOrder() {
+    final newOrder = _sortOrder == 'series' ? 'alpha' : 'series';
+    setState(() {
+      _sortOrder = newOrder;
+      _sortAudiobooks();
+    });
+    SettingsService.setSeriesAudiobooksSortOrder(newOrder);
+  }
+
+  void _cycleViewMode() {
+    String newMode;
+    switch (_viewMode) {
+      case 'grid2':
+        newMode = 'grid3';
+        break;
+      case 'grid3':
+        newMode = 'list';
+        break;
+      default:
+        newMode = 'grid2';
+    }
+    setState(() {
+      _viewMode = newMode;
+    });
+    SettingsService.setSeriesAudiobooksViewMode(newMode);
+  }
+
+  void _sortAudiobooks() {
+    if (_sortOrder == 'series') {
+      // Sort by series number (sequence), falling back to name for books without sequence
+      _audiobooks.sort((a, b) {
+        final seqA = a.seriesSequence;
+        final seqB = b.seriesSequence;
+        if (seqA == null && seqB == null) return a.name.compareTo(b.name);
+        if (seqA == null) return 1; // Books without sequence go to end
+        if (seqB == null) return -1;
+        return seqA.compareTo(seqB);
+      });
+    } else {
+      // Sort alphabetically
+      _audiobooks.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
+    }
+  }
+
+  Future<void> _loadSeriesBooks() async {
+    _logger.log('📚 SeriesScreen _loadSeriesBooks START');
+    try {
+      setState(() {
+        _isLoading = true;
+        _error = null;
+      });
+      _logger.log('📚 SeriesScreen setState done, getting provider...');
+
+      final maProvider = context.read<MusicAssistantProvider>();
+      _logger.log('📚 SeriesScreen got provider, api=${maProvider.api != null}');
+
+      if (maProvider.api == null) {
+        setState(() {
+          _error = 'Not connected to Music Assistant';
+          _isLoading = false;
+        });
+        return;
+      }
+
+      _logger.log('📚 SeriesScreen calling getSeriesAudiobooks: path=${widget.series.id}');
+      final books = await maProvider.api!.getSeriesAudiobooks(widget.series.id);
+      _logger.log('📚 SeriesScreen got ${books.length} books');
+
+      // Debug: Log sequence data for each book
+      for (final book in books) {
+        _logger.log('📚 Book: "${book.name}" | position=${book.position} | browseOrder=${book.browseOrder} | sortName=${book.sortName} | seq=${book.seriesSequence} | metadata.series=${book.metadata?['series']}');
+      }
+
+      if (mounted) {
+        setState(() {
+          _audiobooks = books;
+          _sortAudiobooks(); // Sort inside setState so UI updates
+          _isLoading = false;
+        });
+        // Debug: Log sorted order
+        _logger.log('📚 Sorted order ($_sortOrder):');
+        for (final book in _audiobooks) {
+          _logger.log('  - ${book.seriesSequence ?? "null"}: ${book.name}');
+        }
+      }
+    } catch (e, stack) {
+      _logger.log('📚 SeriesScreen error: $e');
+      _logger.log('📚 SeriesScreen stack: $stack');
+      if (mounted) {
+        setState(() {
+          _error = 'Failed to load books: $e';
+          _isLoading = false;
+        });
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final maProvider = context.watch<MusicAssistantProvider>();
+
+    return Scaffold(
+      backgroundColor: colorScheme.surface,
+      body: CustomScrollView(
+        slivers: [
+          // App bar with series cover collage (matches audiobook detail screen)
+          SliverAppBar(
+            expandedHeight: 350,
+            pinned: true,
+            backgroundColor: colorScheme.surface,
+            leading: IconButton(
+              icon: const Icon(Icons.arrow_back_rounded),
+              onPressed: () => Navigator.pop(context),
+              color: colorScheme.onSurface,
+            ),
+            flexibleSpace: FlexibleSpaceBar(
+              background: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const SizedBox(height: 60),
+                  // Series cover collage - same size as audiobook detail cover
+                  Hero(
+                    tag: widget.heroTag ?? 'series_cover_${widget.series.id}',
+                    child: Container(
+                      width: 280,
+                      height: 280,
+                      decoration: BoxDecoration(
+                        color: colorScheme.surfaceContainerHighest,
+                        borderRadius: BorderRadius.circular(12),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withOpacity(0.2),
+                            blurRadius: 10,
+                            offset: const Offset(0, 4),
+                          ),
+                        ],
+                      ),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(12),
+                        child: _buildSeriesCover(colorScheme, maProvider),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Title and count
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.all(24.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    widget.series.name,
+                    style: textTheme.headlineMedium?.copyWith(
+                      color: colorScheme.onSurface,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+                  Text(
+                    _isLoading
+                        ? 'Loading...'
+                        : '${_audiobooks.length} ${_audiobooks.length == 1 ? 'book' : 'books'}',
+                    style: textTheme.bodyLarge?.copyWith(
+                      color: colorScheme.onSurface.withOpacity(0.7),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Books section header with controls
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(24.0, 8.0, 12.0, 8.0),
+              child: Row(
+                children: [
+                  Text(
+                    'Books',
+                    style: textTheme.titleLarge?.copyWith(
+                      color: colorScheme.onSurface,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const Spacer(),
+                  // Sort toggle
+                  IconButton(
+                    icon: Icon(
+                      _sortOrder == 'series' ? Icons.format_list_numbered : Icons.sort_by_alpha,
+                      color: colorScheme.primary,
+                      size: 20,
+                    ),
+                    tooltip: _sortOrder == 'series' ? 'Sort alphabetically' : 'Sort by series order',
+                    onPressed: _toggleSortOrder,
+                    visualDensity: VisualDensity.compact,
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                  ),
+                  // View mode toggle
+                  IconButton(
+                    icon: Icon(
+                      _viewMode == 'list'
+                          ? Icons.view_list
+                          : _viewMode == 'grid3'
+                              ? Icons.grid_view
+                              : Icons.grid_on,
+                      color: colorScheme.primary,
+                      size: 20,
+                    ),
+                    tooltip: _viewMode == 'grid2'
+                        ? '3-column grid'
+                        : _viewMode == 'grid3'
+                            ? 'List view'
+                            : '2-column grid',
+                    onPressed: _cycleViewMode,
+                    visualDensity: VisualDensity.compact,
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Content
+          if (_isLoading)
+            const SliverFillRemaining(
+              child: Center(child: CircularProgressIndicator()),
+            )
+          else if (_error != null)
+            SliverFillRemaining(
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(Icons.error_outline, size: 48, color: colorScheme.error),
+                    const SizedBox(height: 16),
+                    Text(_error!, style: TextStyle(color: colorScheme.error)),
+                    const SizedBox(height: 16),
+                    ElevatedButton(
+                      onPressed: _loadSeriesBooks,
+                      child: const Text('Retry'),
+                    ),
+                  ],
+                ),
+              ),
+            )
+          else if (_audiobooks.isEmpty)
+            SliverFillRemaining(
+              child: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(Icons.library_books_outlined,
+                        size: 48, color: colorScheme.onSurfaceVariant),
+                    const SizedBox(height: 16),
+                    Text(
+                      'No books found in this series',
+                      style: TextStyle(color: colorScheme.onSurfaceVariant),
+                    ),
+                  ],
+                ),
+              ),
+            )
+          else
+            _buildAudiobookSliver(maProvider),
+
+          // Bottom padding for mini player
+          const SliverToBoxAdapter(
+            child: SizedBox(height: BottomSpacing.withMiniPlayer),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSeriesCover(ColorScheme colorScheme, MusicAssistantProvider maProvider) {
+    // If still loading or no books, show placeholder
+    if (_isLoading || _audiobooks.isEmpty) {
+      return Container(
+        color: colorScheme.surfaceContainerHighest,
+        child: Center(
+          child: Icon(
+            Icons.collections_bookmark_rounded,
+            size: 64,
+            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+          ),
+        ),
+      );
+    }
+
+    // Get cover URLs from loaded books
+    final covers = <String>[];
+    for (final book in _audiobooks.take(9)) {
+      final imageUrl = maProvider.getImageUrl(book);
+      if (imageUrl != null) {
+        covers.add(imageUrl);
+      }
+    }
+
+    if (covers.isEmpty) {
+      return Container(
+        color: colorScheme.surfaceContainerHighest,
+        child: Center(
+          child: Icon(
+            Icons.collections_bookmark_rounded,
+            size: 64,
+            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+          ),
+        ),
+      );
+    }
+
+    // Always use 3x3 grid for series detail
+    const int gridSize = 3;
+
+    // Pad covers to fill grid, using empty strings for missing slots
+    final displayCovers = List<String?>.filled(gridSize * gridSize, null);
+    for (var i = 0; i < covers.length && i < displayCovers.length; i++) {
+      displayCovers[i] = covers[i];
+    }
+
+    // Build grid using Column/Row for proper sizing (no scrolling issues)
+    return Column(
+      children: List.generate(gridSize, (row) {
+        return Expanded(
+          child: Row(
+            children: List.generate(gridSize, (col) {
+              final index = row * gridSize + col;
+              final coverUrl = displayCovers[index];
+
+              return Expanded(
+                child: Container(
+                  margin: EdgeInsets.only(
+                    right: col < gridSize - 1 ? 1 : 0,
+                    bottom: row < gridSize - 1 ? 1 : 0,
+                  ),
+                  child: coverUrl != null
+                      ? CachedNetworkImage(
+                          imageUrl: coverUrl,
+                          fit: BoxFit.cover,
+                          placeholder: (_, __) => Container(
+                            color: colorScheme.surfaceContainerHighest,
+                          ),
+                          errorWidget: (_, __, ___) => Container(
+                            color: colorScheme.surfaceContainerHighest,
+                            child: Icon(
+                              Icons.book,
+                              color: colorScheme.onSurfaceVariant.withOpacity(0.3),
+                              size: 20,
+                            ),
+                          ),
+                        )
+                      : Container(
+                          color: colorScheme.surfaceContainerHighest,
+                        ),
+                ),
+              );
+            }),
+          ),
+        );
+      }),
+    );
+  }
+
+  Widget _buildAudiobookSliver(MusicAssistantProvider maProvider) {
+    if (_viewMode == 'list') {
+      return SliverPadding(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        sliver: SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) => _buildAudiobookListTile(_audiobooks[index], maProvider),
+            childCount: _audiobooks.length,
+          ),
+        ),
+      );
+    }
+
+    final crossAxisCount = _viewMode == 'grid3' ? 3 : 2;
+    final childAspectRatio = _viewMode == 'grid3' ? 0.65 : 0.70;
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      sliver: SliverGrid(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: crossAxisCount,
+          childAspectRatio: childAspectRatio,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) => _buildAudiobookCard(_audiobooks[index], maProvider),
+          childCount: _audiobooks.length,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAudiobookCard(Audiobook book, MusicAssistantProvider maProvider) {
+    final imageUrl = maProvider.getImageUrl(book, size: 256);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final heroSuffix = 'series_${widget.series.id}';
+
+    return InkWell(
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          AspectRatio(
+            aspectRatio: 1.0,
+            child: Stack(
+              children: [
+                Hero(
+                  tag: HeroTags.audiobookCover + (book.uri ?? book.itemId) + '_$heroSuffix',
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      color: colorScheme.surfaceContainerHighest,
+                      child: imageUrl != null
+                          ? CachedNetworkImage(
+                              imageUrl: imageUrl,
+                              fit: BoxFit.cover,
+                              width: double.infinity,
+                              height: double.infinity,
+                              placeholder: (_, __) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                              errorWidget: (_, __, ___) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                            )
+                          : Center(
+                              child: Icon(
+                                MdiIcons.bookOutline,
+                                size: 48,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                    ),
+                  ),
+                ),
+                // Progress indicator
+                if (book.progress > 0)
+                  Positioned(
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    child: LinearProgressIndicator(
+                      value: book.progress,
+                      backgroundColor: Colors.black54,
+                      valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
+                      minHeight: 3,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 8),
+          Hero(
+            tag: HeroTags.audiobookTitle + (book.uri ?? book.itemId) + '_$heroSuffix',
+            child: Material(
+              color: Colors.transparent,
+              child: Text(
+                book.name,
+                style: textTheme.titleSmall?.copyWith(
+                  color: colorScheme.onSurface,
+                  fontWeight: FontWeight.w500,
+                ),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ),
+          if (book.authorsString.isNotEmpty && book.authorsString != 'Unknown Author')
+            Text(
+              book.authorsString,
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onSurface.withOpacity(0.6),
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAudiobookListTile(Audiobook book, MusicAssistantProvider maProvider) {
+    final imageUrl = maProvider.getImageUrl(book, size: 128);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final heroSuffix = 'series_${widget.series.id}';
+
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      leading: Hero(
+        tag: HeroTags.audiobookCover + (book.uri ?? book.itemId) + '_$heroSuffix',
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(4),
+          child: Stack(
+            children: [
+              Container(
+                width: 56,
+                height: 56,
+                color: colorScheme.surfaceContainerHighest,
+                child: imageUrl != null
+                    ? CachedNetworkImage(
+                        imageUrl: imageUrl,
+                        fit: BoxFit.cover,
+                        placeholder: (_, __) => Icon(
+                          MdiIcons.bookOutline,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                        errorWidget: (_, __, ___) => Icon(
+                          MdiIcons.bookOutline,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                      )
+                    : Icon(
+                        MdiIcons.bookOutline,
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+              ),
+              if (book.progress > 0)
+                Positioned(
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  child: LinearProgressIndicator(
+                    value: book.progress,
+                    backgroundColor: Colors.black54,
+                    valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
+                    minHeight: 2,
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+      title: Hero(
+        tag: HeroTags.audiobookTitle + (book.uri ?? book.itemId) + '_$heroSuffix',
+        child: Material(
+          color: Colors.transparent,
+          child: Text(
+            book.name,
+            style: textTheme.titleMedium?.copyWith(
+              color: colorScheme.onSurface,
+              fontWeight: FontWeight.w500,
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ),
+      subtitle: Text(
+        book.authorsString.isNotEmpty && book.authorsString != 'Unknown Author'
+            ? book.authorsString
+            : book.duration != null
+                ? _formatDuration(book.duration!)
+                : '',
+        style: textTheme.bodySmall?.copyWith(
+          color: colorScheme.onSurface.withOpacity(0.7),
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      trailing: book.progress > 0
+          ? Text(
+              '${(book.progress * 100).toInt()}%',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.primary,
+              ),
+            )
+          : null,
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+    );
+  }
+
+  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix}) {
+    Navigator.push(
+      context,
+      FadeSlidePageRoute(
+        child: AudiobookDetailScreen(
+          audiobook: book,
+          heroTagSuffix: heroTagSuffix,
+        ),
+      ),
+    );
+  }
+
+  String _formatDuration(Duration duration) {
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes % 60;
+    if (hours > 0) {
+      return '${hours}h ${minutes}m';
+    }
+    return '${minutes}m';
+  }
+}
@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
+import 'package:share_plus/share_plus.dart';
 import '../services/debug_logger.dart';
 import '../providers/music_assistant_provider.dart';
-import '../models/player.dart';
 import '../widgets/global_player_overlay.dart';

 class DebugLogScreen extends StatefulWidget {
@@ -16,6 +16,8 @@ class DebugLogScreen extends StatefulWidget {
 class _DebugLogScreenState extends State<DebugLogScreen> {
  final _logger = DebugLogger();
  final _scrollController = ScrollController();
+  LogLevel _filterLevel = LogLevel.debug; // Show all by default
+  bool _isGeneratingReport = false;

  @override
  void initState() {
@@ -34,17 +36,37 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
    super.dispose();
  }

+  List<LogEntry> get _filteredEntries =>
+      _logger.entries.where((e) => e.level.index >= _filterLevel.index).toList();
+
  void _copyLogs() {
    Clipboard.setData(ClipboardData(text: _logger.getAllLogs()));
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
-        content: Text('Logs copied to clipboard!'),
+        content: Text('Logs copied to clipboard'),
        backgroundColor: Colors.green,
        duration: Duration(seconds: 2),
      ),
    );
  }

+  Future<void> _shareBugReport() async {
+    setState(() => _isGeneratingReport = true);
+
+    try {
+      final report = await _logger.generateBugReport();
+
+      await Share.share(
+        report,
+        subject: 'Ensemble Bug Report',
+      );
+    } finally {
+      if (mounted) {
+        setState(() => _isGeneratingReport = false);
+      }
+    }
+  }
+
  void _clearLogs() {
    setState(() {
      _logger.clear();
@@ -217,16 +239,39 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
        ),
        centerTitle: true,
        actions: [
+          // Share bug report button
+          _isGeneratingReport
+              ? const Padding(
+                  padding: EdgeInsets.all(12),
+                  child: SizedBox(
+                    width: 24,
+                    height: 24,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: Colors.white,
+                    ),
+                  ),
+                )
+              : IconButton(
+                  icon: const Icon(Icons.share_rounded),
+                  onPressed: _shareBugReport,
+                  color: Colors.white,
+                  tooltip: 'Share bug report',
+                ),
          PopupMenuButton<String>(
            icon: const Icon(Icons.more_vert, color: Colors.white),
-            tooltip: 'Player tools',
+            tooltip: 'More options',
            onSelected: (value) async {
              switch (value) {
                case 'show_players':
                  _showAllPlayers();
                  break;
-                // NOTE: Ghost cleanup and repair options removed - MA APIs don't work
-                // reliably and caused corrupt entries. See PLAYER_LIFECYCLE_GUIDE.md
+                case 'copy_logs':
+                  _copyLogs();
+                  break;
+                case 'clear_logs':
+                  _clearLogs();
+                  break;
              }
            },
            itemBuilder: (context) => [
@@ -238,49 +283,61 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                  dense: true,
                ),
              ),
+              const PopupMenuItem(
+                value: 'copy_logs',
+                child: ListTile(
+                  leading: Icon(Icons.copy_rounded),
+                  title: Text('Copy Logs'),
+                  dense: true,
+                ),
+              ),
+              const PopupMenuItem(
+                value: 'clear_logs',
+                child: ListTile(
+                  leading: Icon(Icons.delete_rounded),
+                  title: Text('Clear Logs'),
+                  dense: true,
+                ),
+              ),
            ],
          ),
-          IconButton(
-            icon: const Icon(Icons.copy_rounded),
-            onPressed: _copyLogs,
-            color: Colors.white,
-            tooltip: 'Copy logs',
-          ),
-          IconButton(
-            icon: const Icon(Icons.delete_rounded),
-            onPressed: _clearLogs,
-            color: Colors.white,
-            tooltip: 'Clear logs',
-          ),
        ],
      ),
      body: Column(
        children: [
+          // Filter chips and stats
          Container(
-            padding: const EdgeInsets.all(16),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            color: Colors.white.withOpacity(0.05),
-            child: Row(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
-                const Icon(
-                  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',
@@ -292,43 +349,11 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                  )
                : ListView.builder(
                    controller: _scrollController,
-                    padding: EdgeInsets.fromLTRB(8, 8, 8, BottomSpacing.navBarOnly + 56), // Extra space for FAB
-                    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);
                    },
                  ),
          ),
@@ -354,4 +379,70 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
      ),
    );
  }
+
+  Widget _buildFilterChip(String label, LogLevel level) {
+    final isSelected = _filterLevel == level;
+    return FilterChip(
+      label: Text(label),
+      selected: isSelected,
+      showCheckmark: false,
+      onSelected: (_) {
+        setState(() {
+          _filterLevel = level;
+        });
+      },
+      backgroundColor: Colors.white.withOpacity(0.1),
+      selectedColor: _getLevelColor(level).withOpacity(0.3),
+      labelStyle: TextStyle(
+        color: isSelected ? _getLevelColor(level) : Colors.white70,
+        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+        fontSize: 12,
+      ),
+      side: BorderSide(
+        color: isSelected ? _getLevelColor(level) : Colors.transparent,
+      ),
+    );
+  }
+
+  Widget _buildLogEntry(LogEntry entry) {
+    final color = _getLevelColor(entry.level);
+
+    return Container(
+      margin: const EdgeInsets.only(bottom: 4),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      decoration: BoxDecoration(
+        color: color.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(4),
+        border: Border.all(color: color.withOpacity(0.3)),
+      ),
+      child: Text(
+        entry.formatted,
+        style: TextStyle(
+          color: entry.level == LogLevel.error
+              ? Colors.red[300]
+              : entry.level == LogLevel.warning
+                  ? Colors.orange[300]
+                  : Colors.white70,
+          fontSize: 11,
+          fontFamily: 'monospace',
+          height: 1.4,
+        ),
+      ),
+    );
+  }
+
+  Color _getLevelColor(LogLevel level) {
+    switch (level) {
+      case LogLevel.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;
+    }
+  }
 }
@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../widgets/album_card.dart';
+import '../widgets/common/empty_state.dart';

 class LibraryAlbumsScreen extends StatelessWidget {
  const LibraryAlbumsScreen({super.key});
@@ -52,37 +53,8 @@ class LibraryAlbumsScreen extends StatelessWidget {
    }

    if (albums.isEmpty) {
-      return Center(
-        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: () {
-                context.read<MusicAssistantProvider>().loadLibrary();
-              },
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
+      return EmptyState.albums(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
      );
    }

@@ -95,6 +67,8 @@ class LibraryAlbumsScreen extends StatelessWidget {
      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,
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../utils/page_transitions.dart';
+import '../widgets/common/empty_state.dart';
+import '../widgets/artist_avatar.dart';
 import 'artist_details_screen.dart';

 class LibraryArtistsScreen extends StatelessWidget {
@@ -54,37 +55,8 @@ class LibraryArtistsScreen extends StatelessWidget {
    }

    if (artists.isEmpty) {
-      return Center(
-        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: () {
-                context.read<MusicAssistantProvider>().loadLibrary();
-              },
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
+      return EmptyState.artists(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
      );
    }

@@ -97,6 +69,8 @@ class LibraryArtistsScreen extends StatelessWidget {
      child: ListView.builder(
        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) {
@@ -116,23 +90,21 @@ class LibraryArtistsScreen extends StatelessWidget {
    Artist artist, {
    Key? key,
  }) {
-    final provider = context.read<MusicAssistantProvider>();
-    final imageUrl = provider.getImageUrl(artist, size: 128);
    final colorScheme = Theme.of(context).colorScheme;
    final textTheme = Theme.of(context).textTheme;
+    final maProvider = context.read<MusicAssistantProvider>();
+    // Get image URL for hero animation
+    final imageUrl = maProvider.getImageUrl(artist, size: 256);

    // RepaintBoundary isolates repaints to individual tiles
    return RepaintBoundary(
      child: ListTile(
        key: key,
-        leading: CircleAvatar(
-        radius: 24,
-        backgroundColor: colorScheme.surfaceVariant,
-        backgroundImage: imageUrl != null ? CachedNetworkImageProvider(imageUrl) : null,
-        child: imageUrl == null
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
-      ),
+        leading: ArtistAvatar(
+          artist: artist,
+          radius: 24,
+          imageSize: 128,
+        ),
      title: Text(
        artist.name,
        style: textTheme.titleMedium?.copyWith(
@@ -149,6 +121,7 @@ class LibraryArtistsScreen extends StatelessWidget {
              child: ArtistDetailsScreen(
                artist: artist,
                heroTagSuffix: 'library',
+                initialImageUrl: imageUrl,
              ),
            ),
          );
@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
+import '../widgets/common/empty_state.dart';
 import 'playlist_details_screen.dart';

 class LibraryPlaylistsScreen extends StatefulWidget {
@@ -80,36 +81,7 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
    }

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

 class LibraryTracksScreen extends StatelessWidget {
  const LibraryTracksScreen({super.key});
@@ -47,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);
@@ -101,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: CachedNetworkImageProvider(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),
    );
  }

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/settings_service.dart';
+import '../services/database_service.dart';
+import '../services/profile_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 {
@@ -269,7 +271,13 @@ class _LoginScreenState extends State<LoginScreen> {
      // 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());
+        final ownerName = _ownerNameController.text.trim();
+        await SettingsService.setOwnerName(ownerName);
+
+        // Create/activate profile in local database for manual name entry
+        if (DatabaseService.instance.isInitialized) {
+          await ProfileService.instance.onManualNameEntered(ownerName);
+        }
      }
      await SettingsService.setWebSocketPort(portNum);

@@ -767,141 +775,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();
-                              if (logs.isNotEmpty) {
-                                Clipboard.setData(ClipboardData(text: logs));
-                                ScaffoldMessenger.of(context).showSnackBar(
-                                  const SnackBar(
-                                    content: Text('Logs copied to clipboard'),
-                                    backgroundColor: Colors.green,
-                                    duration: Duration(seconds: 2),
-                                  ),
-                                );
-                              } else {
-                                ScaffoldMessenger.of(context).showSnackBar(
-                                  const SnackBar(
-                                    content: Text('No logs to copy'),
-                                    duration: Duration(seconds: 2),
-                                  ),
-                                );
-                              }
-                            },
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                              minimumSize: const Size(50, 20),
-                            ),
-                            icon: const Icon(Icons.copy, size: 10, color: Colors.green),
-                            label: const Text(
-                              'Copy',
-                              style: TextStyle(fontSize: 10, color: Colors.green),
-                            ),
-                          ),
-                          TextButton(
-                            onPressed: () {
-                              DebugLogger().clear();
-                              setState(() {
-                                _debugLogs.clear();
-                              });
-                            },
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                              minimumSize: const Size(40, 20),
-                            ),
-                            child: const Text(
-                              'Clear',
-                              style: TextStyle(fontSize: 10, color: Colors.green),
-                            ),
-                          ),
-                        ],
-                      ),
-                      const Divider(color: Colors.green, height: 8),
-                      Expanded(
-                        child: SingleChildScrollView(
-                          reverse: true,
-                          child: Builder(
-                            builder: (context) {
-                              // Get all logs from DebugLogger singleton
-                              final allLogs = DebugLogger().logs;
-                              final recentLogs = allLogs.length > 50
-                                  ? allLogs.sublist(allLogs.length - 50)
-                                  : allLogs;
-
-                              return recentLogs.isEmpty
-                                  ? const Text(
-                                      'No debug logs yet. Try detecting auth.',
-                                      style: TextStyle(
-                                        color: Colors.green,
-                                        fontSize: 10,
-                                        fontStyle: FontStyle.italic,
-                                      ),
-                                    )
-                                  : Column(
-                                      crossAxisAlignment: CrossAxisAlignment.start,
-                                      children: recentLogs
-                                          .map((log) => Padding(
-                                                padding: const EdgeInsets.only(bottom: 2),
-                                                child: Text(
-                                                  log,
-                                                  style: const TextStyle(
-                                                    color: Colors.green,
-                                                    fontSize: 10,
-                                                    fontFamily: 'monospace',
-                                                  ),
-                                                ),
-                                              ))
-                                          .toList(),
-                                    );
-                            },
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
+                DebugConsole(
+                  onClear: () => setState(() => _debugLogs.clear()),
                ),
                const SizedBox(height: 16),
              ],
@@ -1,10 +1,18 @@
 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 '../services/sync_service.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/audiobook_row.dart';
+import '../widgets/series_row.dart';
+import '../widgets/common/disconnected_state.dart';
 import 'settings_screen.dart';
 import 'search_screen.dart';

@@ -15,17 +23,86 @@ 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;
+  // Audiobook rows (default off)
+  bool _showContinueListeningAudiobooks = false;
+  bool _showDiscoverAudiobooks = false;
+  bool _showDiscoverSeries = 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();
+    final showContAudiobooks = await SettingsService.getShowContinueListeningAudiobooks();
+    final showDiscAudiobooks = await SettingsService.getShowDiscoverAudiobooks();
+    final showDiscSeries = await SettingsService.getShowDiscoverSeries();
+    if (mounted) {
+      setState(() {
+        _showRecentAlbums = showRecent;
+        _showDiscoverArtists = showDiscArtists;
+        _showDiscoverAlbums = showDiscAlbums;
+        _showFavoriteAlbums = showFavAlbums;
+        _showFavoriteArtists = showFavArtists;
+        _showFavoriteTracks = showFavTracks;
+        _showContinueListeningAudiobooks = showContAudiobooks;
+        _showDiscoverAudiobooks = showDiscAudiobooks;
+        _showDiscoverSeries = showDiscSeries;
+      });
+    }
+  }
+
  Future<void> _onRefresh() async {
    // Invalidate cache to force fresh data on pull-to-refresh
    final provider = context.read<MusicAssistantProvider>();
    provider.invalidateHomeCache();

+    // Force full library sync from MA API
+    await provider.forceLibrarySync();
+
+    // Reload settings in case they changed
+    await _loadSettings();
+
    if (mounted) {
      setState(() {
        _refreshKey = UniqueKey();
@@ -36,6 +113,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(
@@ -65,6 +143,28 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        titleSpacing: 0,
        centerTitle: false,
        actions: [
+          // Sync indicator - shows when library is syncing in background
+          ListenableBuilder(
+            listenable: SyncService.instance,
+            builder: (context, _) {
+              if (!SyncService.instance.isSyncing) {
+                return const SizedBox.shrink();
+              }
+              return Padding(
+                padding: const EdgeInsets.only(right: 8.0),
+                child: SizedBox(
+                  width: 20,
+                  height: 20,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                    valueColor: AlwaysStoppedAnimation<Color>(
+                      Theme.of(context).colorScheme.primary.withOpacity(0.7),
+                    ),
+                  ),
+                ),
+              );
+            },
+          ),
          const PlayerSelector(),
        ],
      ),
@@ -73,119 +173,214 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
          selector: (_, p) => p.isConnected,
          builder: (context, isConnected, child) {
            final maProvider = context.read<MusicAssistantProvider>();
-            return !isConnected
-                ? _buildDisconnectedView(context, maProvider)
-                : RefreshIndicator(
+            final syncService = SyncService.instance;
+
+            // Show cached data even when not connected (if we have cache)
+            // Only show disconnected state if we have no cached data at all
+            if (!isConnected && !syncService.hasCache) {
+              return DisconnectedState.full(
+                onSettings: () => Navigator.push(
+                  context,
+                  MaterialPageRoute(builder: (context) => const SettingsScreen()),
+                ),
+              );
+            }
+
+            return Column(
+              children: [
+                // Connecting banner when showing cached data
+                if (!isConnected && syncService.hasCache)
+                  Container(
+                    width: double.infinity,
+                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                    color: colorScheme.primaryContainer.withOpacity(0.5),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: 12,
+                          height: 12,
+                          child: CircularProgressIndicator(
+                            strokeWidth: 2,
+                            color: colorScheme.primary,
+                          ),
+                        ),
+                        const SizedBox(width: 8),
+                        Text(
+                          'Connecting...',
+                          style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            color: colorScheme.onPrimaryContainer,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                Expanded(
+                  child: RefreshIndicator(
                    onRefresh: _onRefresh,
                    color: colorScheme.primary,
                    backgroundColor: colorScheme.surface,
                    child: _buildConnectedView(context, maProvider),
-                  );
+                  ),
+                ),
+              ],
+            );
          },
        ),
      ),
    );
  }

-  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) {
-    // Use Android 12+ stretch overscroll effect
-    return ScrollConfiguration(
-      behavior: const _StretchScrollBehavior(),
-      child: SingleChildScrollView(
-        physics: const AlwaysScrollableScrollPhysics(),
-        child: Column(
-        key: _refreshKey,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          // Recently played albums (with caching)
-          AlbumRow(
-            title: 'Recently Played',
-            loadAlbums: () => provider.getRecentAlbumsWithCache(),
-          ),
-          const SizedBox(height: 21),
+    // 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;

-          // Discover Artists (with caching)
-          ArtistRow(
-            title: 'Discover Artists',
-            loadArtists: () => provider.getDiscoverArtistsWithCache(),
-          ),
-          const SizedBox(height: 3),
+        // Build favorites rows in random order
+        final favoritesWidgets = _buildFavoritesRows(provider, rowHeight);

-          // Discover Albums (with caching)
-          AlbumRow(
-            title: 'Discover Albums',
-            loadAlbums: () => provider.getDiscoverAlbumsWithCache(),
+        // 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 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,
+                    ),
+
+                  // Continue Listening Audiobooks (optional)
+                  if (_showContinueListeningAudiobooks)
+                    AudiobookRow(
+                      key: const ValueKey('continue-listening-audiobooks'),
+                      title: 'Continue Listening',
+                      loadAudiobooks: () => provider.getInProgressAudiobooks(),
+                      rowHeight: rowHeight,
+                    ),
+
+                  // Discover Audiobooks (optional)
+                  if (_showDiscoverAudiobooks)
+                    AudiobookRow(
+                      key: const ValueKey('discover-audiobooks'),
+                      title: 'Discover Audiobooks',
+                      loadAudiobooks: () => provider.getDiscoverAudiobooks(),
+                      rowHeight: rowHeight,
+                    ),
+
+                  // Discover Series (optional)
+                  if (_showDiscoverSeries)
+                    SeriesRow(
+                      key: const ValueKey('discover-series'),
+                      title: 'Discover Series',
+                      loadSeries: () => provider.getDiscoverSeries(),
+                      rowHeight: rowHeight,
+                    ),
+
+                  // Favorites rows in random order
+                  ...favoritesWidgets,
+                ],
+              ),
+            ),
          ),
-          SizedBox(height: BottomSpacing.withMiniPlayer), // Space for bottom nav + 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
@@ -2,6 +2,10 @@ 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 '../services/recently_played_service.dart';
+
+final _playlistLogger = DebugLogger();

 class PlaylistDetailsScreen extends StatefulWidget {
  final Playlist playlist;
@@ -61,11 +65,14 @@ 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');
+
+      // Record to local recently played (per-profile)
+      RecentlyPlayedService.instance.recordPlaylistPlayed(widget.playlist);

      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
@@ -76,7 +83,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');
    }
  }
@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/player.dart';
 import '../services/debug_logger.dart';
+import '../widgets/common/empty_state.dart';

 class QueueScreen extends StatefulWidget {
  const QueueScreen({super.key});
@@ -139,19 +140,7 @@ class _QueueScreenState extends State<QueueScreen> {
    }

    if (_queue == null || _queue!.items.isEmpty) {
-      return Center(
-        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)
@@ -159,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',
      );
    }

@@ -231,6 +211,9 @@ class _QueueScreenState extends State<QueueScreen> {
      ),
      onDismissed: (direction) {
        // TODO: Implement queue item removal via API
+        // Currently only removes locally from UI state, not from actual Music Assistant queue
+        // Need to investigate if Music Assistant API supports player_queues/remove_item or similar endpoint
+        // Requires: API method like removeQueueItem(queueId, queueItemId) that calls player_queues/remove_item
        setState(() {
          _queue!.items.removeAt(index);
        });
@@ -7,6 +7,9 @@ import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../services/debug_logger.dart';
 import '../widgets/global_player_overlay.dart';
+import '../widgets/common/empty_state.dart';
+import '../widgets/common/disconnected_state.dart';
+import '../widgets/artist_avatar.dart';
 import 'album_details_screen.dart';
 import 'artist_details_screen.dart';

@@ -17,6 +20,41 @@ class SearchScreen extends StatefulWidget {
  State<SearchScreen> createState() => SearchScreenState();
 }

+// Helper enum and class for ListView.builder item types
+enum _ListItemType { header, artist, album, track, spacer }
+
+class _ListItem {
+  final _ListItemType type;
+  final MediaItem? mediaItem;
+  final String? headerTitle;
+  final int? headerCount;
+
+  _ListItem.header(this.headerTitle, this.headerCount)
+      : type = _ListItemType.header,
+        mediaItem = null;
+
+  _ListItem.artist(this.mediaItem)
+      : type = _ListItemType.artist,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.album(this.mediaItem)
+      : type = _ListItemType.album,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.track(this.mediaItem)
+      : type = _ListItemType.track,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.spacer()
+      : type = _ListItemType.spacer,
+        mediaItem = null,
+        headerTitle = null,
+        headerCount = null;
+}
+
 class SearchScreenState extends State<SearchScreen> {
  final _logger = DebugLogger();
  final TextEditingController _searchController = TextEditingController();
@@ -62,11 +100,11 @@ class SearchScreenState extends State<SearchScreen> {
  void _onSearchChanged(String query) {
    _debounceTimer?.cancel();
    _debounceTimer = Timer(Timings.searchDebounce, () {
-      _performSearch(query);
+      _performSearch(query, keepFocus: true);
    });
  }

-  Future<void> _performSearch(String query) async {
+  Future<void> _performSearch(String query, {bool keepFocus = false}) async {
    if (query.isEmpty) {
      setState(() {
        _searchResults = {'artists': [], 'albums': [], 'tracks': []};
@@ -91,6 +129,10 @@ class SearchScreenState extends State<SearchScreen> {
          _isSearching = false;
          _hasSearched = true;
        });
+        // Keep keyboard open if user is still typing
+        if (keepFocus && _focusNode.hasFocus) {
+          _focusNode.requestFocus();
+        }
      }
    } catch (e) {
      _logger.log('Search error: $e');
@@ -100,6 +142,9 @@ class SearchScreenState extends State<SearchScreen> {
          _hasSearched = true;
          _searchError = 'Search failed. Please check your connection.';
        });
+        if (keepFocus && _focusNode.hasFocus) {
+          _focusNode.requestFocus();
+        }
      }
    }
  }
@@ -108,7 +153,6 @@ class SearchScreenState extends State<SearchScreen> {
  Widget build(BuildContext context) {
    final maProvider = context.watch<MusicAssistantProvider>();
    final colorScheme = Theme.of(context).colorScheme;
-    final textTheme = Theme.of(context).textTheme;

    return Scaffold(
      backgroundColor: colorScheme.background,
@@ -120,6 +164,7 @@ class SearchScreenState extends State<SearchScreen> {
          focusNode: _focusNode,
          style: TextStyle(color: colorScheme.onSurface),
          cursorColor: colorScheme.primary,
+          textInputAction: TextInputAction.search,
          decoration: InputDecoration(
            hintText: 'Search music...',
            hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
@@ -129,53 +174,28 @@ class SearchScreenState extends State<SearchScreen> {
                    icon: Icon(Icons.clear_rounded, color: colorScheme.onSurface.withOpacity(0.5)),
                    onPressed: () {
                      _searchController.clear();
-                      _performSearch('');
+                      setState(() {
+                        _searchResults = {'artists': [], 'albums': [], 'tracks': []};
+                        _hasSearched = false;
+                        _searchError = null;
+                      });
                    },
                  )
                : null,
          ),
          onChanged: (value) {
-            setState(() {});
+            setState(() {}); // Update clear button visibility
            _onSearchChanged(value);
          },
-          onSubmitted: _performSearch,
+          onSubmitted: (query) => _performSearch(query),
        ),
      ),
      body: !maProvider.isConnected
-          ? _buildDisconnectedView()
+          ? DisconnectedState.simple()
          : _buildSearchContent(),
    );
  }

-  Widget _buildDisconnectedView() {
-    final colorScheme = Theme.of(context).colorScheme;
-    
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.cloud_off_rounded,
-              size: 64,
-              color: colorScheme.onBackground.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'Not connected to Music Assistant',
-              style: TextStyle(
-                color: colorScheme.onBackground.withOpacity(0.7),
-                fontSize: 16,
-              ),
-              textAlign: TextAlign.center,
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
  Widget _buildSearchContent() {
    final colorScheme = Theme.of(context).colorScheme;

@@ -244,26 +264,7 @@ class SearchScreenState extends State<SearchScreen> {
    final hasResults = artists.isNotEmpty || albums.isNotEmpty || tracks.isNotEmpty;

    if (!hasResults) {
-      return Center(
-        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(
@@ -293,30 +294,80 @@ class SearchScreenState extends State<SearchScreen> {
        
        // Results
        Expanded(
-          child: ListView(
-            padding: EdgeInsets.fromLTRB(16, 8, 16, BottomSpacing.navBarOnly),
-            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;
@@ -355,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 ? CachedNetworkImageProvider(imageUrl) : null,
-        child: imageUrl == null
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
+        imageSize: 128,
      ),
      title: Text(
        artist.name,
@@ -381,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,
+              ),
+            ),
+          );
+        },
+      ),
    );
  }

@@ -397,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(
@@ -416,7 +472,7 @@ class SearchScreenState extends State<SearchScreen> {
            : null,
      ),
      title: Text(
-        album.name,
+        album.nameWithYear,
        style: TextStyle(
          color: colorScheme.onSurface,
          fontWeight: FontWeight.w500,
@@ -430,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),
+            ),
+          );
+        },
+      ),
    );
  }

@@ -448,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(
@@ -481,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),
+      ),
    );
  }

@@ -18,6 +18,21 @@ class SettingsScreen extends StatefulWidget {
 class _SettingsScreenState extends State<SettingsScreen> {
  final _lastFmApiKeyController = TextEditingController();
  final _audioDbApiKeyController = 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;
+  // Audiobook home rows (default off)
+  bool _showContinueListeningAudiobooks = false;
+  bool _showDiscoverAudiobooks = false;
+  bool _showDiscoverSeries = false;
+  // Audiobook libraries
+  List<Map<String, String>> _discoveredLibraries = [];
+  Map<String, bool> _libraryEnabled = {};

  @override
  void initState() {
@@ -35,6 +50,45 @@ class _SettingsScreenState extends State<SettingsScreen> {
    if (audioDbKey != null) {
      _audioDbApiKeyController.text = audioDbKey;
    }
+
+    // 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();
+
+    // Load audiobook home row settings
+    final showContinueAudiobooks = await SettingsService.getShowContinueListeningAudiobooks();
+    final showDiscAudiobooks = await SettingsService.getShowDiscoverAudiobooks();
+    final showDiscSeries = await SettingsService.getShowDiscoverSeries();
+
+    // Load audiobook library settings
+    final discovered = await SettingsService.getDiscoveredAbsLibraries() ?? [];
+    final enabled = await SettingsService.getEnabledAbsLibraries();
+    final libraryEnabled = <String, bool>{};
+    for (final lib in discovered) {
+      final path = lib['path'] ?? '';
+      // null means all enabled
+      libraryEnabled[path] = enabled == null || enabled.contains(path);
+    }
+
+    if (mounted) {
+      setState(() {
+        _showRecentAlbums = showRecent;
+        _showDiscoverArtists = showDiscArtists;
+        _showDiscoverAlbums = showDiscAlbums;
+        _showFavoriteAlbums = showFavAlbums;
+        _showFavoriteArtists = showFavArtists;
+        _showFavoriteTracks = showFavTracks;
+        _showContinueListeningAudiobooks = showContinueAudiobooks;
+        _showDiscoverAudiobooks = showDiscAudiobooks;
+        _showDiscoverSeries = showDiscSeries;
+        _discoveredLibraries = discovered;
+        _libraryEnabled = libraryEnabled;
+      });
+    }
  }

  @override
@@ -308,6 +362,243 @@ 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: 16),
+
+            Text(
+              'Audiobooks',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onBackground.withOpacity(0.6),
+              ),
+            ),
+            const SizedBox(height: 8),
+
+            // Audiobook home 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(
+                      'Continue Listening',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show audiobooks in progress',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showContinueListeningAudiobooks,
+                    onChanged: (value) {
+                      setState(() => _showContinueListeningAudiobooks = value);
+                      SettingsService.setShowContinueListeningAudiobooks(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Discover Audiobooks',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show random audiobooks to discover',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showDiscoverAudiobooks,
+                    onChanged: (value) {
+                      setState(() => _showDiscoverAudiobooks = value);
+                      SettingsService.setShowDiscoverAudiobooks(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Discover Series',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show random audiobook series to discover',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showDiscoverSeries,
+                    onChanged: (value) {
+                      setState(() => _showDiscoverSeries = value);
+                      SettingsService.setShowDiscoverSeries(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ],
+              ),
+            ),
+
+            const SizedBox(height: 32),
+
            Text(
              'Metadata APIs (Optional)',
              style: textTheme.titleMedium?.copyWith(
@@ -317,7 +608,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
            ),
            const SizedBox(height: 8),
            Text(
-              'Add API keys to fetch artist biographies and album descriptions when Music Assistant doesn\'t have them',
+              'Artist images are automatically fetched from Deezer. Add API keys below for artist biographies and album descriptions.',
              style: textTheme.bodySmall?.copyWith(
                color: colorScheme.onBackground.withOpacity(0.6),
              ),
@@ -365,7 +656,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,
@@ -398,6 +689,76 @@ class _SettingsScreenState extends State<SettingsScreen> {

            const SizedBox(height: 32),

+            // Audiobook Libraries section
+            if (_discoveredLibraries.isNotEmpty) ...[
+              Text(
+                'Audiobook Libraries',
+                style: textTheme.titleMedium?.copyWith(
+                  color: colorScheme.onBackground,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 8),
+              Text(
+                'Choose which Audiobookshelf libraries to include',
+                style: textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onBackground.withOpacity(0.6),
+                ),
+              ),
+              const SizedBox(height: 16),
+
+              Container(
+                decoration: BoxDecoration(
+                  color: colorScheme.surfaceVariant.withOpacity(0.3),
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: Column(
+                  children: _discoveredLibraries.asMap().entries.map((entry) {
+                    final index = entry.key;
+                    final library = entry.value;
+                    final path = library['path'] ?? '';
+                    final name = library['name'] ?? 'Unknown Library';
+                    final isEnabled = _libraryEnabled[path] ?? true;
+
+                    return Column(
+                      children: [
+                        SwitchListTile(
+                          title: Text(
+                            name,
+                            style: TextStyle(color: colorScheme.onSurface),
+                          ),
+                          value: isEnabled,
+                          onChanged: (value) async {
+                            setState(() {
+                              _libraryEnabled[path] = value;
+                            });
+                            await SettingsService.toggleAbsLibrary(path, value);
+                            if (mounted) {
+                              ScaffoldMessenger.of(context).showSnackBar(
+                                const SnackBar(
+                                  content: Text('Pull to refresh the library to apply changes'),
+                                  duration: Duration(seconds: 2),
+                                ),
+                              );
+                            }
+                          },
+                          activeColor: colorScheme.primary,
+                        ),
+                        if (index < _discoveredLibraries.length - 1)
+                          Divider(
+                            height: 1,
+                            indent: 16,
+                            endIndent: 16,
+                            color: colorScheme.onSurface.withOpacity(0.1),
+                          ),
+                      ],
+                    );
+                  }).toList(),
+                ),
+              ),
+              const SizedBox(height: 32),
+            ],
+
            SizedBox(
              width: double.infinity,
              height: 50,
@@ -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,
+  });
+}
@@ -15,17 +15,28 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
  // This allows us to update the notification when metadata arrives late
  MediaItem? _currentMediaItem;

-  // Callbacks for skip actions (wired up by MusicAssistantProvider)
+  // 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 {
-    _logger.log('MassivAudioHandler: Initializing...');
-
    // Configure audio session
    final session = await AudioSession.instance;
    await session.configure(const AudioSessionConfiguration.music());
@@ -70,8 +81,6 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
        mediaItem.add(_currentMediaItem);
      }
    });
-
-    _logger.log('MassivAudioHandler: Initialized');
  }

  /// Broadcast the current playback state to the system
@@ -84,7 +93,7 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
        MediaControl.skipToPrevious,
        if (playing) MediaControl.pause else MediaControl.play,
        MediaControl.skipToNext,
-        // Note: We intentionally omit MediaControl.stop to avoid the white square icon issue
+        _switchPlayerControl, // Switch player button
      ],
      // System-level actions (for headphones, car stereos, etc.)
      systemActions: const {
@@ -98,7 +107,8 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
        MediaAction.skipToPrevious,
      },
      // Which buttons to show in compact notification (max 3)
-      androidCompactActionIndices: const [0, 1, 2],
+      // Show: play/pause (1), skip-next (2), switch-player (3)
+      androidCompactActionIndices: const [1, 2, 3],
      processingState: {
        ProcessingState.idle: AudioProcessingState.idle,
        ProcessingState.loading: AudioProcessingState.loading,
@@ -116,16 +126,28 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
  // --- Playback control methods ---

  @override
-  Future<void> play() => _player.play();
+  Future<void> play() async {
+    if (_isRemoteMode) {
+      onPlay?.call();
+    } else {
+      await _player.play();
+    }
+  }

  @override
-  Future<void> pause() => _player.pause();
+  Future<void> pause() async {
+    if (_isRemoteMode) {
+      onPause?.call();
+    } else {
+      await _player.pause();
+    }
+  }

  @override
  Future<void> stop() async {
-    await _player.stop();
-    // Don't call super.stop() which would end the service
-    // Just stop playback and let the notification remain for resuming
+    // 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
@@ -133,27 +155,18 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {

  @override
  Future<void> skipToNext() async {
-    _logger.log('MassivAudioHandler: skipToNext requested');
-    if (onSkipToNext != null) {
-      onSkipToNext!();
-    }
+    onSkipToNext?.call();
  }

  @override
  Future<void> skipToPrevious() async {
-    _logger.log('MassivAudioHandler: skipToPrevious requested');
-    if (onSkipToPrevious != null) {
-      onSkipToPrevious!();
-    }
+    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 {
-    _logger.log('MassivAudioHandler: Playing URL: $url');
-    _logger.log('MassivAudioHandler: Metadata: ${item.title} by ${item.artist}');
-
    _currentMediaItem = item;
    mediaItem.add(item);

@@ -166,10 +179,8 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {

      await _player.setAudioSource(source);
      await _player.play();
-      _logger.log('MassivAudioHandler: Playback started');
-    } catch (e, stackTrace) {
+    } catch (e) {
      _logger.log('MassivAudioHandler: Error playing URL: $e');
-      _logger.log('MassivAudioHandler: Stack trace: $stackTrace');
      rethrow;
    }
  }
@@ -178,7 +189,6 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
  /// This can be called when metadata arrives after playback starts
  @override
  Future<void> updateMediaItem(MediaItem item) async {
-    _logger.log('MassivAudioHandler: Updating media item: ${item.title} by ${item.artist}');
    _currentMediaItem = item;
    mediaItem.add(item);
  }
@@ -188,6 +198,82 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
    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;
@@ -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;
+  }
+}
@@ -0,0 +1,159 @@
+import 'dart:convert';
+import '../database/database.dart';
+import 'debug_logger.dart';
+
+/// Singleton service for database access throughout the app
+class DatabaseService {
+  static DatabaseService? _instance;
+  static AppDatabase? _database;
+  static final _logger = DebugLogger();
+
+  DatabaseService._();
+
+  /// Get the singleton instance
+  static DatabaseService get instance {
+    _instance ??= DatabaseService._();
+    return _instance!;
+  }
+
+  /// Get the database instance
+  AppDatabase get db {
+    if (_database == null) {
+      throw StateError('Database not initialized. Call initialize() first.');
+    }
+    return _database!;
+  }
+
+  /// Check if database is initialized
+  bool get isInitialized => _database != null;
+
+  /// Initialize the database
+  Future<void> initialize() async {
+    if (_database != null) {
+      _logger.log('Database already initialized');
+      return;
+    }
+
+    _logger.log('Initializing database...');
+    _database = AppDatabase();
+    _logger.log('Database initialized successfully');
+  }
+
+  /// Close the database (for cleanup)
+  Future<void> close() async {
+    await _database?.close();
+    _database = null;
+    _logger.log('Database closed');
+  }
+
+  // ============================================
+  // Profile Convenience Methods
+  // ============================================
+
+  /// Get the currently active profile
+  Future<Profile?> getActiveProfile() => db.getActiveProfile();
+
+  /// Set the active profile (creates if doesn't exist)
+  Future<Profile> setActiveProfile({
+    required String username,
+    String? displayName,
+    required String source,
+  }) {
+    _logger.log('Setting active profile: $username (source: $source)');
+    return db.setActiveProfile(
+      username: username,
+      displayName: displayName,
+      source: source,
+    );
+  }
+
+  /// Get all profiles
+  Future<List<Profile>> getAllProfiles() => db.getAllProfiles();
+
+  // ============================================
+  // Recently Played Convenience Methods
+  // ============================================
+
+  /// Add an item to recently played
+  Future<void> addRecentlyPlayed({
+    required String mediaId,
+    required String mediaType,
+    required String name,
+    String? artistName,
+    String? imageUrl,
+    Map<String, dynamic>? metadata,
+  }) {
+    _logger.log('Adding to recently played: $name ($mediaType)');
+    return db.addRecentlyPlayed(
+      mediaId: mediaId,
+      mediaType: mediaType,
+      name: name,
+      artistName: artistName,
+      imageUrl: imageUrl,
+      metadata: metadata != null ? jsonEncode(metadata) : null,
+    );
+  }
+
+  /// Get recently played items
+  Future<List<RecentlyPlayedData>> getRecentlyPlayed({int limit = 20}) {
+    return db.getRecentlyPlayed(limit: limit);
+  }
+
+  /// Clear recently played for current profile
+  Future<void> clearRecentlyPlayed() => db.clearRecentlyPlayed();
+
+  // ============================================
+  // Library Cache Convenience Methods
+  // ============================================
+
+  /// Cache an item with JSON serialization
+  Future<void> cacheItem<T>({
+    required String itemType,
+    required String itemId,
+    required Map<String, dynamic> data,
+  }) {
+    return db.cacheItem(
+      itemType: itemType,
+      itemId: itemId,
+      data: jsonEncode(data),
+    );
+  }
+
+  /// Get cached items with JSON deserialization
+  Future<List<Map<String, dynamic>>> getCachedItems(String itemType) async {
+    final items = await db.getCachedItems(itemType);
+    return items.map((item) {
+      try {
+        return jsonDecode(item.data) as Map<String, dynamic>;
+      } catch (e) {
+        _logger.log('Error decoding cached item: $e');
+        return <String, dynamic>{};
+      }
+    }).where((item) => item.isNotEmpty).toList();
+  }
+
+  /// Get a single cached item
+  Future<Map<String, dynamic>?> getCachedItem(String itemType, String itemId) async {
+    final item = await db.getCachedItem(itemType, itemId);
+    if (item == null) return null;
+    try {
+      return jsonDecode(item.data) as Map<String, dynamic>;
+    } catch (e) {
+      _logger.log('Error decoding cached item: $e');
+      return null;
+    }
+  }
+
+  /// Check if sync is needed
+  Future<bool> needsSync(String syncType, {Duration maxAge = const Duration(minutes: 5)}) {
+    return db.needsSync(syncType, maxAge);
+  }
+
+  /// Update sync timestamp
+  Future<void> updateSyncMetadata(String syncType, int itemCount) {
+    return db.updateSyncMetadata(syncType, itemCount);
+  }
+
+  /// Clear all cached data (useful for logout)
+  Future<void> clearAllCache() => db.clearAllCache();
+}
@@ -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();
  }
 }
@@ -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') ||
@@ -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);
+    }
+  }
+}
@@ -1,221 +0,0 @@
-import '../constants/timings.dart' show LibraryConstants;
-import '../models/media_item.dart';
-import 'music_assistant_api.dart';
-import 'debug_logger.dart';
-import 'error_handler.dart';
-
-/// Service responsible for library data management.
-/// Handles loading and caching of artists, albums, tracks, and search.
-class LibraryService {
-  final DebugLogger _logger = DebugLogger();
-
-  MusicAssistantAPI? _api;
-
-  List<Artist> _artists = [];
-  List<Album> _albums = [];
-  List<Track> _tracks = [];
-  bool _isLoading = false;
-  String? _error;
-
-  // Search state persistence
-  String _lastSearchQuery = '';
-  Map<String, List<MediaItem>> _lastSearchResults = {
-    'artists': [],
-    'albums': [],
-    'tracks': [],
-  };
-
-  // Getters
-  List<Artist> get artists => _artists;
-  List<Album> get albums => _albums;
-  List<Track> get tracks => _tracks;
-  bool get isLoading => _isLoading;
-  String? get error => _error;
-  String get lastSearchQuery => _lastSearchQuery;
-  Map<String, List<MediaItem>> get lastSearchResults => _lastSearchResults;
-
-  /// Set the API instance (called when connection established)
-  void setApi(MusicAssistantAPI? api) {
-    _api = api;
-  }
-
-  /// Clear all library data (called on disconnect)
-  void clear() {
-    _artists = [];
-    _albums = [];
-    _tracks = [];
-    _error = null;
-    _isLoading = false;
-  }
-
-  /// Save search state for persistence across screen changes
-  void saveSearchState(String query, Map<String, List<MediaItem>> results) {
-    _lastSearchQuery = query;
-    _lastSearchResults = results;
-  }
-
-  /// Clear search state
-  void clearSearchState() {
-    _lastSearchQuery = '';
-    _lastSearchResults = {
-      'artists': [],
-      'albums': [],
-      'tracks': [],
-    };
-  }
-
-  /// Load all library data (artists, albums, tracks) in parallel
-  /// Returns true if successful
-  Future<bool> loadLibrary() async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      final results = await Future.wait([
-        _api!.getArtists(limit: LibraryConstants.maxLibraryItems),
-        _api!.getAlbums(limit: LibraryConstants.maxLibraryItems),
-        _api!.getTracks(limit: LibraryConstants.maxLibraryItems),
-      ]);
-
-      _artists = results[0] as List<Artist>;
-      _albums = results[1] as List<Album>;
-      _tracks = results[2] as List<Track>;
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load library');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Load artists with optional pagination and search
-  Future<bool> loadArtists({int? limit, int? offset, String? search}) async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      _artists = await _api!.getArtists(
-        limit: limit ?? LibraryConstants.maxLibraryItems,
-        offset: offset,
-        search: search,
-      );
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load artists');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Load albums with optional pagination, search, and artist filter
-  Future<bool> loadAlbums({
-    int? limit,
-    int? offset,
-    String? search,
-    String? artistId,
-  }) async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      _albums = await _api!.getAlbums(
-        limit: limit ?? LibraryConstants.maxLibraryItems,
-        offset: offset,
-        search: search,
-        artistId: artistId,
-      );
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load albums');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Get tracks for a specific album
-  Future<List<Track>> getAlbumTracks(String provider, String itemId) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getAlbumTracks(provider, itemId);
-    } catch (e) {
-      ErrorHandler.logError('Get album tracks', e);
-      return [];
-    }
-  }
-
-  /// Search for artists, albums, and tracks
-  Future<Map<String, List<MediaItem>>> search(String query, {bool libraryOnly = false}) async {
-    if (_api == null) {
-      return {'artists': [], 'albums': [], 'tracks': []};
-    }
-
-    try {
-      return await _api!.search(query, libraryOnly: libraryOnly);
-    } catch (e) {
-      ErrorHandler.logError('Search', e);
-      return {'artists': [], 'albums': [], 'tracks': []};
-    }
-  }
-
-  /// Get recent albums
-  Future<List<Album>> getRecentAlbums({int limit = 10}) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getRecentAlbums(limit: limit);
-    } catch (e) {
-      ErrorHandler.logError('Get recent albums', e);
-      return [];
-    }
-  }
-
-  /// Get random albums for discovery
-  Future<List<Album>> getRandomAlbums({int limit = 10}) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getRandomAlbums(limit: limit);
-    } catch (e) {
-      ErrorHandler.logError('Get random albums', e);
-      return [];
-    }
-  }
-
-  /// Toggle favorite status for a media item
-  Future<void> toggleFavorite(String itemId, String mediaType, bool favorite) async {
-    if (_api == null) return;
-
-    try {
-      await _api!.setFavorite(itemId, mediaType, favorite);
-    } catch (e) {
-      ErrorHandler.logError('Toggle favorite', e);
-      rethrow;
-    }
-  }
-
-  /// Get image URL for a media item
-  String getImageUrl(dynamic item, {int? size}) {
-    return _api?.getImageUrl(item, size: size) ?? '';
-  }
-
-  /// Get stream URL for a track
-  String getStreamUrl(String provider, String itemId, {String? uri, List<ProviderMapping>? providerMappings}) {
-    return _api?.getStreamUrl(provider, itemId, uri: uri, providerMappings: providerMappings) ?? '';
-  }
-}
@@ -84,11 +84,9 @@ class LocalPlayerService {
  Future<void> initialize() async {
    if (_isInitialized) return;

-    _logger.log('LocalPlayerService: Initializing with audio_service...');
    // The audioHandler is already initialized in main.dart
    // Just mark ourselves as initialized
    _isInitialized = true;
-    _logger.log('LocalPlayerService: Initialized (using global audioHandler)');
  }

  /// Set metadata for the current track (for notification display)
@@ -100,22 +98,13 @@ class LocalPlayerService {
  Future<void> playUrl(String url) async {
    // Ensure player is initialized before playing
    if (!_isInitialized) {
-      _logger.log('LocalPlayerService: Not initialized, initializing now...');
      await initialize();
    }

    try {
-      _logger.log('LocalPlayerService: Loading URL: $url');
-
      // 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 MediaItem from current metadata
      final mediaItem = _currentMetadata?.toMediaItem(url) ?? MediaItem(
        id: url,
@@ -123,19 +112,13 @@ class LocalPlayerService {
        artist: 'Unknown Artist',
      );

-      _logger.log('LocalPlayerService: Playing with audio_service');
-      _logger.log('LocalPlayerService: Metadata: ${mediaItem.title} by ${mediaItem.artist}');
-
      await audioHandler.playUrl(
        url,
        mediaItem,
        headers: headers.isNotEmpty ? headers : null,
      );
-
-      _logger.log('LocalPlayerService: Playback started with notification');
    } catch (e, stackTrace) {
      _logger.log('LocalPlayerService: Error playing URL: $e');
-      _logger.log('LocalPlayerService: Stack trace: $stackTrace');
      rethrow;
    }
  }
@@ -156,24 +139,18 @@ class LocalPlayerService {
      artworkUrl: artworkUrl,
      duration: duration,
    );
-
-    _logger.log('LocalPlayerService: Metadata updated for notification');
  }

  /// 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 {
-    _logger.log('LocalPlayerService: Updating notification mid-playback: ${metadata.title} by ${metadata.artist}');
-
    final currentItem = audioHandler.currentMediaItem;
    final id = currentItem?.id ?? 'unknown';

    final newMediaItem = metadata.toMediaItem(id);
    audioHandler.updateMediaItem(newMediaItem);
    _currentMetadata = metadata;
-
-    _logger.log('LocalPlayerService: Notification updated successfully');
  }

  Future<void> play() async {
@@ -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,269 @@ 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 = {};
+
+  // Cache for author images (audiobooks)
+  static final Map<String, String?> _authorImageCache = {};
+
+  /// 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;
+  }
+
+  /// Fetches author image URL from multiple sources
+  /// Priority: 1. Audnexus, 2. Open Library, 3. Wikipedia
+  /// Returns the image URL if found, null otherwise
+  static Future<String?> getAuthorImageUrl(String authorName) async {
+    // Check cache first
+    final cacheKey = 'authorImage:$authorName';
+    if (_authorImageCache.containsKey(cacheKey)) {
+      return _authorImageCache[cacheKey];
+    }
+
+    // Try Audnexus (specifically for audiobook authors, uses Audible data)
+    try {
+      final audnexusUri = Uri.https(
+        'api.audnex.us',
+        '/authors',
+        {'name': authorName},
+      );
+
+      final audnexusResponse = await http.get(audnexusUri).timeout(const Duration(seconds: 5));
+
+      if (audnexusResponse.statusCode == 200) {
+        final data = json.decode(audnexusResponse.body);
+        // Audnexus returns an array of authors
+        if (data is List && data.isNotEmpty) {
+          final author = data[0];
+          final imageUrl = author['image'] as String?;
+          if (imageUrl != null && imageUrl.isNotEmpty) {
+            _authorImageCache[cacheKey] = imageUrl;
+            return imageUrl;
+          }
+        }
+      }
+    } catch (e) {
+      _logger.warning('Audnexus author image error: $e', context: 'Metadata');
+    }
+
+    // Fall back to Open Library API
+    try {
+      final uri = Uri.https(
+        'openlibrary.org',
+        '/search/authors.json',
+        {
+          'q': authorName,
+          'limit': '1',
+        },
+      );
+
+      final response = await http.get(uri).timeout(const Duration(seconds: 5));
+
+      if (response.statusCode == 200) {
+        final data = json.decode(response.body);
+        final authors = data['docs'] as List?;
+        if (authors != null && authors.isNotEmpty) {
+          final author = authors[0];
+          final authorKey = author['key'] as String?;
+          if (authorKey != null) {
+            // Open Library author images are available at:
+            // https://covers.openlibrary.org/a/olid/{OLID}-L.jpg
+            final olid = authorKey.replaceAll('/authors/', '');
+            final imageUrl = 'https://covers.openlibrary.org/a/olid/$olid-L.jpg';
+
+            // Verify the image actually exists (Open Library returns 404 for missing images)
+            try {
+              final imageCheck = await http.head(Uri.parse(imageUrl)).timeout(const Duration(seconds: 3));
+              if (imageCheck.statusCode == 200) {
+                _authorImageCache[cacheKey] = imageUrl;
+                return imageUrl;
+              }
+            } catch (_) {
+              // Image doesn't exist, continue to cache null
+            }
+          }
+        }
+      }
+    } catch (e) {
+      _logger.warning('Open Library author image error: $e', context: 'Metadata');
+    }
+
+    // Fall back to Wikipedia API
+    try {
+      // Search for author on Wikipedia
+      final searchUri = Uri.https(
+        'en.wikipedia.org',
+        '/w/api.php',
+        {
+          'action': 'query',
+          'list': 'search',
+          'srsearch': '$authorName writer',
+          'srlimit': '1',
+          'format': 'json',
+        },
+      );
+
+      final searchResponse = await http.get(searchUri).timeout(const Duration(seconds: 5));
+
+      if (searchResponse.statusCode == 200) {
+        final searchData = json.decode(searchResponse.body);
+        final searchResults = searchData['query']?['search'] as List?;
+        if (searchResults != null && searchResults.isNotEmpty) {
+          final pageTitle = searchResults[0]['title'] as String?;
+          if (pageTitle != null) {
+            // Get page image
+            final imageUri = Uri.https(
+              'en.wikipedia.org',
+              '/w/api.php',
+              {
+                'action': 'query',
+                'titles': pageTitle,
+                'prop': 'pageimages',
+                'pithumbsize': '500',
+                'format': 'json',
+              },
+            );
+
+            final imageResponse = await http.get(imageUri).timeout(const Duration(seconds: 5));
+
+            if (imageResponse.statusCode == 200) {
+              final imageData = json.decode(imageResponse.body);
+              final pages = imageData['query']?['pages'] as Map<String, dynamic>?;
+              if (pages != null && pages.isNotEmpty) {
+                final page = pages.values.first as Map<String, dynamic>?;
+                final thumbnail = page?['thumbnail'] as Map<String, dynamic>?;
+                final imageUrl = thumbnail?['source'] as String?;
+                if (imageUrl != null && imageUrl.isNotEmpty) {
+                  _authorImageCache[cacheKey] = imageUrl;
+                  return imageUrl;
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (e) {
+      _logger.warning('Wikipedia author image error: $e', context: 'Metadata');
+    }
+
+    // Cache the null result to avoid repeated failed lookups
+    _authorImageCache[cacheKey] = null;
+    return null;
+  }
+
  /// Clears the metadata cache
  static void clearCache() {
    _cache.clear();
+    _artistImageCache.clear();
+    _albumImageCache.clear();
+    _authorImageCache.clear();
  }
 }
@@ -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');
+  }
+}
@@ -1,391 +0,0 @@
-import 'dart:async';
-import '../constants/timings.dart' show Timings;
-import '../models/player.dart';
-import '../models/media_item.dart';
-import 'music_assistant_api.dart';
-import 'settings_service.dart';
-import 'debug_logger.dart';
-import 'error_handler.dart';
-
-/// Callback type for notifying state changes
-typedef StateChangeCallback = void Function();
-
-/// Service responsible for player state management.
-/// Handles player selection, playback controls, and state polling.
-class PlayerStateService {
-  final DebugLogger _logger = DebugLogger();
-  final StateChangeCallback? onStateChanged;
-
-  MusicAssistantAPI? _api;
-
-  // Player selection
-  Player? _selectedPlayer;
-  List<Player> _availablePlayers = [];
-  Track? _currentTrack;
-  Timer? _playerStateTimer;
-
-  // Player list caching
-  DateTime? _playersLastFetched;
-
-  PlayerStateService({this.onStateChanged});
-
-  // Getters
-  Player? get selectedPlayer => _selectedPlayer;
-  List<Player> get availablePlayers => _availablePlayers;
-  Track? get currentTrack => _currentTrack;
-  MusicAssistantAPI? get api => _api;
-
-  /// Set the API instance (called when connection established)
-  void setApi(MusicAssistantAPI? api) {
-    _api = api;
-  }
-
-  /// Clear all player state (called on disconnect)
-  void clear() {
-    _playerStateTimer?.cancel();
-    _playerStateTimer = null;
-    _selectedPlayer = null;
-    _availablePlayers = [];
-    _currentTrack = null;
-    _playersLastFetched = null;
-  }
-
-  /// Get all players from the API
-  Future<List<Player>> getPlayers() async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getPlayers();
-    } catch (e) {
-      ErrorHandler.logError('Get players', e);
-      return [];
-    }
-  }
-
-  /// Load available players and auto-select one
-  Future<void> loadAndSelectPlayers({bool forceRefresh = false}) async {
-    try {
-      // Check cache first
-      final now = DateTime.now();
-      if (!forceRefresh &&
-          _playersLastFetched != null &&
-          _availablePlayers.isNotEmpty &&
-          now.difference(_playersLastFetched!) < Timings.playersCacheDuration) {
-        return;
-      }
-
-      final allPlayers = await getPlayers();
-      final builtinPlayerId = await SettingsService.getBuiltinPlayerId();
-
-      _logger.log('🎛️ getPlayers returned ${allPlayers.length} players');
-
-      // Filter out unavailable players and legacy ghosts
-      int filteredCount = 0;
-
-      _availablePlayers = allPlayers.where((player) {
-        final nameLower = player.name.toLowerCase();
-
-        // Filter out legacy "Music Assistant Mobile" ghosts
-        if (nameLower.contains('music assistant mobile')) {
-          filteredCount++;
-          return false;
-        }
-
-        // Filter out unavailable players (ghost players from old installations)
-        // Exception: Keep our own player even if temporarily unavailable
-        if (!player.available) {
-          if (builtinPlayerId != null && player.playerId == builtinPlayerId) {
-            return true;
-          }
-          filteredCount++;
-          return false;
-        }
-
-        return true;
-      }).toList();
-
-      _playersLastFetched = DateTime.now();
-
-      _logger.log('🎛️ After filtering: ${_availablePlayers.length} players available');
-
-      if (_availablePlayers.isNotEmpty) {
-        Player? playerToSelect;
-
-        // Keep current selection if still valid
-        if (_selectedPlayer != null) {
-          final stillAvailable = _availablePlayers.any(
-            (p) => p.playerId == _selectedPlayer!.playerId && p.available,
-          );
-          if (stillAvailable) {
-            playerToSelect = _availablePlayers.firstWhere(
-              (p) => p.playerId == _selectedPlayer!.playerId,
-            );
-          }
-        }
-
-        // Only auto-select if NO player is currently selected
-        if (playerToSelect == null) {
-          // Priority 1: Local player (this device)
-          if (builtinPlayerId != null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.playerId == builtinPlayerId && p.available,
-              );
-              _logger.log('📱 Auto-selected local player: ${playerToSelect?.name}');
-            } catch (e) {
-              // Local player not found
-            }
-          }
-
-          // Priority 2: A currently playing player
-          if (playerToSelect == null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.state == 'playing' && p.available,
-              );
-            } catch (e) {
-              // No playing player
-            }
-          }
-
-          // Priority 3: First available player
-          if (playerToSelect == null) {
-            playerToSelect = _availablePlayers.firstWhere(
-              (p) => p.available,
-              orElse: () => _availablePlayers.first,
-            );
-          }
-        }
-
-        selectPlayer(playerToSelect);
-      }
-
-      onStateChanged?.call();
-    } catch (e) {
-      ErrorHandler.logError('Load players', e);
-    }
-  }
-
-  /// Select a player and start polling its state
-  void selectPlayer(Player player) {
-    _selectedPlayer = player;
-    _startPlayerPolling();
-    onStateChanged?.call();
-  }
-
-  /// Start polling player state at configured interval
-  void _startPlayerPolling() {
-    _playerStateTimer?.cancel();
-
-    if (_selectedPlayer == null) return;
-
-    _playerStateTimer = Timer.periodic(Timings.playerPollingInterval, (_) async {
-      try {
-        await updatePlayerState();
-      } catch (e) {
-        _logger.log('Error updating player state (will retry): $e');
-      }
-    });
-
-    // Also update immediately
-    updatePlayerState();
-  }
-
-  /// Update the selected player's state from the server
-  Future<void> updatePlayerState() async {
-    if (_selectedPlayer == null || _api == null) return;
-
-    try {
-      final updatedPlayer = await _api!.getPlayer(_selectedPlayer!.playerId);
-      if (updatedPlayer != null) {
-        _selectedPlayer = updatedPlayer;
-
-        // Get current track info if playing
-        if (updatedPlayer.currentMedia != null) {
-          _currentTrack = updatedPlayer.currentMedia;
-        }
-
-        onStateChanged?.call();
-      }
-    } catch (e) {
-      _logger.log('Error updating player state: $e');
-    }
-  }
-
-  /// Refresh the list of available players
-  Future<void> refreshPlayers() async {
-    final previousState = _selectedPlayer?.state;
-
-    await loadAndSelectPlayers(forceRefresh: true);
-
-    // If selected player changed state, notify listeners
-    if (_selectedPlayer?.state != previousState) {
-      onStateChanged?.call();
-    }
-  }
-
-  // ============================================================================
-  // PLAYBACK CONTROLS
-  // ============================================================================
-
-  Future<void> pausePlayer(String playerId) async {
-    try {
-      await _api?.pausePlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Pause player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> resumePlayer(String playerId) async {
-    try {
-      await _api?.playPlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Resume player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> stopPlayer(String playerId) async {
-    try {
-      await _api?.stopPlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Stop player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> nextTrack(String playerId) async {
-    try {
-      await _api?.nextTrack(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Next track', e);
-      rethrow;
-    }
-  }
-
-  Future<void> previousTrack(String playerId) async {
-    try {
-      await _api?.previousTrack(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Previous track', e);
-      rethrow;
-    }
-  }
-
-  Future<void> togglePower(String playerId) async {
-    try {
-      final player = _availablePlayers.firstWhere(
-        (p) => p.playerId == playerId,
-        orElse: () => throw Exception('Player not found'),
-      );
-
-      if (player.powered) {
-        await _api?.powerOffPlayer(playerId);
-      } else {
-        await _api?.powerOnPlayer(playerId);
-      }
-
-      await refreshPlayers();
-    } catch (e) {
-      _logger.log('ERROR in togglePower: $e');
-      ErrorHandler.logError('Toggle power', e);
-    }
-  }
-
-  Future<void> setVolume(String playerId, int volumeLevel) async {
-    try {
-      await _api?.setVolume(playerId, volumeLevel);
-    } catch (e) {
-      ErrorHandler.logError('Set volume', e);
-      rethrow;
-    }
-  }
-
-  Future<void> setMute(String playerId, bool muted) async {
-    try {
-      await _api?.setMute(playerId, muted);
-      await refreshPlayers();
-    } catch (e) {
-      ErrorHandler.logError('Set mute', e);
-      rethrow;
-    }
-  }
-
-  Future<void> seek(String playerId, int position) async {
-    try {
-      await _api?.seek(playerId, position);
-    } catch (e) {
-      ErrorHandler.logError('Seek', e);
-      rethrow;
-    }
-  }
-
-  Future<void> toggleShuffle(String queueId) async {
-    try {
-      await _api?.toggleShuffle(queueId);
-    } catch (e) {
-      ErrorHandler.logError('Toggle shuffle', e);
-      rethrow;
-    }
-  }
-
-  Future<void> setRepeatMode(String queueId, String mode) async {
-    try {
-      await _api?.setRepeatMode(queueId, mode);
-    } catch (e) {
-      ErrorHandler.logError('Set repeat mode', e);
-      rethrow;
-    }
-  }
-
-  /// Cycle through repeat modes: off -> all -> one -> off
-  Future<void> cycleRepeatMode(String queueId, String? currentMode) async {
-    String nextMode;
-    switch (currentMode) {
-      case 'off':
-      case null:
-        nextMode = 'all';
-        break;
-      case 'all':
-        nextMode = 'one';
-        break;
-      case 'one':
-        nextMode = 'off';
-        break;
-      default:
-        nextMode = 'off';
-    }
-    await setRepeatMode(queueId, nextMode);
-  }
-
-  // ============================================================================
-  // CONVENIENCE METHODS (for selected player)
-  // ============================================================================
-
-  Future<void> playPauseSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-
-    if (_selectedPlayer!.state == 'playing') {
-      await pausePlayer(_selectedPlayer!.playerId);
-    } else {
-      await resumePlayer(_selectedPlayer!.playerId);
-    }
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-
-  Future<void> nextTrackSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-    await nextTrack(_selectedPlayer!.playerId);
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-
-  Future<void> previousTrackSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-    await previousTrack(_selectedPlayer!.playerId);
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-}
@@ -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();
+  }
+}
@@ -0,0 +1,110 @@
+import 'database_service.dart';
+import 'settings_service.dart';
+import 'debug_logger.dart';
+import '../database/database.dart';
+
+/// Service for managing user profiles
+/// Profiles are auto-created from MA authentication or manual name entry
+class ProfileService {
+  static ProfileService? _instance;
+  static final _logger = DebugLogger();
+
+  ProfileService._();
+
+  /// Get the singleton instance
+  static ProfileService get instance {
+    _instance ??= ProfileService._();
+    return _instance!;
+  }
+
+  DatabaseService get _db => DatabaseService.instance;
+
+  /// Get the currently active profile
+  Future<Profile?> getActiveProfile() async {
+    if (!_db.isInitialized) return null;
+    return _db.getActiveProfile();
+  }
+
+  /// Get the active profile's username/name
+  Future<String?> getActiveProfileName() async {
+    final profile = await getActiveProfile();
+    return profile?.displayName ?? profile?.username;
+  }
+
+  /// Called after successful MA authentication
+  /// Creates or activates profile based on MA user info
+  Future<Profile> onMaAuthenticated({
+    required String username,
+    String? displayName,
+  }) async {
+    _logger.log('MA authenticated: username=$username, displayName=$displayName');
+
+    final profile = await _db.setActiveProfile(
+      username: username,
+      displayName: displayName,
+      source: 'ma_auth',
+    );
+
+    _logger.log('Profile activated: ${profile.username} (${profile.displayName})');
+    return profile;
+  }
+
+  /// Called when user manually enters their name (no MA auth)
+  /// Creates or activates profile based on entered name
+  Future<Profile> onManualNameEntered(String name) async {
+    _logger.log('Manual name entered: $name');
+
+    // Use name as both username and display name for manual profiles
+    final profile = await _db.setActiveProfile(
+      username: name.toLowerCase().replaceAll(' ', '_'),
+      displayName: name,
+      source: 'manual',
+    );
+
+    _logger.log('Profile activated: ${profile.username} (${profile.displayName})');
+    return profile;
+  }
+
+  /// Migrate existing ownerName to profile (one-time migration)
+  Future<void> migrateFromOwnerName() async {
+    if (!_db.isInitialized) return;
+
+    // Check if we already have any profiles
+    final profiles = await _db.getAllProfiles();
+    if (profiles.isNotEmpty) {
+      _logger.log('Migration skipped - profiles already exist');
+      return;
+    }
+
+    // Check for existing ownerName in settings
+    final ownerName = await SettingsService.getOwnerName();
+    if (ownerName == null || ownerName.isEmpty) {
+      _logger.log('Migration skipped - no ownerName to migrate');
+      return;
+    }
+
+    _logger.log('Migrating ownerName "$ownerName" to profile...');
+
+    // Create profile from ownerName
+    // We don't know if it was MA auth or manual, so default to manual
+    await _db.setActiveProfile(
+      username: ownerName.toLowerCase().replaceAll(' ', '_'),
+      displayName: ownerName,
+      source: 'migrated',
+    );
+
+    _logger.log('Migration complete');
+  }
+
+  /// Get all profiles (for potential profile switcher UI)
+  Future<List<Profile>> getAllProfiles() async {
+    if (!_db.isInitialized) return [];
+    return _db.getAllProfiles();
+  }
+
+  /// Check if any profile exists
+  Future<bool> hasAnyProfile() async {
+    final profiles = await getAllProfiles();
+    return profiles.isNotEmpty;
+  }
+}
@@ -0,0 +1,243 @@
+import 'dart:convert';
+import 'database_service.dart';
+import 'debug_logger.dart';
+import '../database/database.dart';
+import '../models/media_item.dart';
+
+/// Service for tracking recently played items locally, per-profile
+/// This supplements MA's server-side tracking with instant local data
+class RecentlyPlayedService {
+  static RecentlyPlayedService? _instance;
+  static final _logger = DebugLogger();
+
+  RecentlyPlayedService._();
+
+  /// Get the singleton instance
+  static RecentlyPlayedService get instance {
+    _instance ??= RecentlyPlayedService._();
+    return _instance!;
+  }
+
+  DatabaseService get _db => DatabaseService.instance;
+
+  /// Record an album being played
+  Future<void> recordAlbumPlayed(Album album) async {
+    if (!_db.isInitialized) return;
+
+    try {
+      await _db.addRecentlyPlayed(
+        mediaId: album.itemId,
+        mediaType: 'album',
+        name: album.name,
+        artistName: album.artistsString,
+        metadata: {
+          'provider': album.provider,
+          'uri': album.uri,
+        },
+      );
+      _logger.log('📝 Recorded album play: ${album.name}');
+    } catch (e) {
+      _logger.log('⚠️ Failed to record album play: $e');
+    }
+  }
+
+  /// Record an artist being played (e.g., artist radio)
+  Future<void> recordArtistPlayed(Artist artist) async {
+    if (!_db.isInitialized) return;
+
+    try {
+      await _db.addRecentlyPlayed(
+        mediaId: artist.itemId,
+        mediaType: 'artist',
+        name: artist.name,
+        metadata: {
+          'provider': artist.provider,
+          'uri': artist.uri,
+        },
+      );
+      _logger.log('📝 Recorded artist play: ${artist.name}');
+    } catch (e) {
+      _logger.log('⚠️ Failed to record artist play: $e');
+    }
+  }
+
+  /// Record a track being played
+  Future<void> recordTrackPlayed(Track track) async {
+    if (!_db.isInitialized) return;
+
+    try {
+      await _db.addRecentlyPlayed(
+        mediaId: track.itemId,
+        mediaType: 'track',
+        name: track.name,
+        artistName: track.artistsString,
+        metadata: {
+          'provider': track.provider,
+          'uri': track.uri,
+          'albumName': track.album?.name,
+        },
+      );
+      _logger.log('📝 Recorded track play: ${track.name}');
+    } catch (e) {
+      _logger.log('⚠️ Failed to record track play: $e');
+    }
+  }
+
+  /// Record a playlist being played
+  Future<void> recordPlaylistPlayed(Playlist playlist) async {
+    if (!_db.isInitialized) return;
+
+    try {
+      await _db.addRecentlyPlayed(
+        mediaId: playlist.itemId,
+        mediaType: 'playlist',
+        name: playlist.name,
+        metadata: {
+          'provider': playlist.provider,
+          'uri': playlist.uri,
+        },
+      );
+      _logger.log('📝 Recorded playlist play: ${playlist.name}');
+    } catch (e) {
+      _logger.log('⚠️ Failed to record playlist play: $e');
+    }
+  }
+
+  /// Record an audiobook being played
+  Future<void> recordAudiobookPlayed(Audiobook audiobook) async {
+    if (!_db.isInitialized) return;
+
+    try {
+      await _db.addRecentlyPlayed(
+        mediaId: audiobook.itemId,
+        mediaType: 'audiobook',
+        name: audiobook.name,
+        artistName: audiobook.authorsString,
+        metadata: {
+          'provider': audiobook.provider,
+          'uri': audiobook.uri,
+          'narrators': audiobook.narratorsString,
+          'duration': audiobook.duration?.inSeconds,
+          'resumePositionMs': audiobook.resumePositionMs,
+        },
+      );
+      _logger.log('📝 Recorded audiobook play: ${audiobook.name}');
+    } catch (e) {
+      _logger.log('⚠️ Failed to record audiobook play: $e');
+    }
+  }
+
+  /// Get recently played albums for the current profile
+  /// Returns Album objects reconstructed from local data
+  Future<List<Album>> getRecentAlbums({int limit = 20}) async {
+    if (!_db.isInitialized) return [];
+
+    try {
+      final items = await _db.getRecentlyPlayed(limit: limit * 2); // Get more to filter
+
+      // Filter for albums and convert to Album objects
+      final albums = <Album>[];
+      final seenIds = <String>{};
+
+      for (final item in items) {
+        if (item.mediaType != 'album') continue;
+        if (seenIds.contains(item.mediaId)) continue;
+        seenIds.add(item.mediaId);
+
+        Map<String, dynamic>? metadata;
+        if (item.metadata != null) {
+          try {
+            metadata = jsonDecode(item.metadata!) as Map<String, dynamic>;
+          } catch (_) {}
+        }
+
+        albums.add(Album(
+          itemId: item.mediaId,
+          provider: metadata?['provider'] ?? 'library',
+          name: item.name,
+          uri: metadata?['uri'],
+          // Create minimal artist info from stored name
+          artists: item.artistName != null
+              ? [Artist(itemId: '', provider: '', name: item.artistName!)]
+              : null,
+        ));
+
+        if (albums.length >= limit) break;
+      }
+
+      return albums;
+    } catch (e) {
+      _logger.log('⚠️ Failed to get recent albums: $e');
+      return [];
+    }
+  }
+
+  /// Get recently played audiobooks for the current profile
+  /// Returns Audiobook objects reconstructed from local data
+  Future<List<Audiobook>> getRecentAudiobooks({int limit = 20}) async {
+    if (!_db.isInitialized) return [];
+
+    try {
+      final items = await _db.getRecentlyPlayed(limit: limit * 2); // Get more to filter
+
+      // Filter for audiobooks and convert to Audiobook objects
+      final audiobooks = <Audiobook>[];
+      final seenIds = <String>{};
+
+      for (final item in items) {
+        if (item.mediaType != 'audiobook') continue;
+        if (seenIds.contains(item.mediaId)) continue;
+        seenIds.add(item.mediaId);
+
+        Map<String, dynamic>? metadata;
+        if (item.metadata != null) {
+          try {
+            metadata = jsonDecode(item.metadata!) as Map<String, dynamic>;
+          } catch (_) {}
+        }
+
+        audiobooks.add(Audiobook(
+          itemId: item.mediaId,
+          provider: metadata?['provider'] ?? 'library',
+          name: item.name,
+          uri: metadata?['uri'],
+          // Create minimal author info from stored name
+          authors: item.artistName != null
+              ? [Artist(itemId: '', provider: '', name: item.artistName!)]
+              : null,
+          duration: metadata?['duration'] != null
+              ? Duration(seconds: metadata!['duration'] as int)
+              : null,
+          resumePositionMs: metadata?['resumePositionMs'] as int?,
+        ));
+
+        if (audiobooks.length >= limit) break;
+      }
+
+      return audiobooks;
+    } catch (e) {
+      _logger.log('⚠️ Failed to get recent audiobooks: $e');
+      return [];
+    }
+  }
+
+  /// Get all recently played items for the current profile
+  Future<List<RecentlyPlayedData>> getRecentlyPlayed({int limit = 20}) async {
+    if (!_db.isInitialized) return [];
+    return _db.getRecentlyPlayed(limit: limit);
+  }
+
+  /// Check if we have local recently played data
+  Future<bool> hasLocalData() async {
+    if (!_db.isInitialized) return false;
+    final items = await _db.getRecentlyPlayed(limit: 1);
+    return items.isNotEmpty;
+  }
+
+  /// Clear recently played for current profile
+  Future<void> clear() async {
+    if (!_db.isInitialized) return;
+    await _db.clearRecentlyPlayed();
+    _logger.log('🗑️ Cleared recently played');
+  }
+}
@@ -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();
+  }
+}
@@ -20,6 +20,42 @@ class SettingsService {
  static const String _keyEnableLocalPlayback = 'enable_local_playback';
  static const String _keyLocalPlayerName = 'local_player_name';
  static const String _keyOwnerName = 'owner_name';
+  static const String _keyLastSelectedPlayerId = 'last_selected_player_id';
+  static const String _keyShowRecentAlbums = 'show_recent_albums';
+  static const String _keyShowDiscoverArtists = 'show_discover_artists';
+  static const String _keyShowDiscoverAlbums = 'show_discover_albums';
+  static const String _keyShowContinueListeningAudiobooks = 'show_continue_listening_audiobooks';
+  static const String _keyShowDiscoverAudiobooks = 'show_discover_audiobooks';
+  static const String _keyShowDiscoverSeries = 'show_discover_series';
+  static const String _keyShowFavoriteAlbums = 'show_favorite_albums';
+  static const String _keyShowFavoriteArtists = 'show_favorite_artists';
+  static const String _keyShowFavoriteTracks = 'show_favorite_tracks';
+
+  // View Mode Settings
+  static const String _keyArtistAlbumsSortOrder = 'artist_albums_sort_order'; // 'alpha' or 'year'
+  static const String _keyArtistAlbumsViewMode = 'artist_albums_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryArtistsViewMode = 'library_artists_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryAlbumsViewMode = 'library_albums_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryPlaylistsViewMode = 'library_playlists_view_mode'; // 'grid2', 'grid3', 'list'
+
+  // Audiobook View Mode Settings
+  static const String _keyAuthorAudiobooksSortOrder = 'author_audiobooks_sort_order'; // 'alpha' or 'year'
+  static const String _keyAuthorAudiobooksViewMode = 'author_audiobooks_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryAuthorsViewMode = 'library_authors_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryAudiobooksViewMode = 'library_audiobooks_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryAudiobooksSortOrder = 'library_audiobooks_sort_order'; // 'alpha' or 'year'
+  static const String _keyLibrarySeriesViewMode = 'library_series_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keySeriesAudiobooksSortOrder = 'series_audiobooks_sort_order'; // 'alpha' or 'year'
+  static const String _keySeriesAudiobooksViewMode = 'series_audiobooks_view_mode'; // 'grid2', 'grid3', 'list'
+
+  // Audiobookshelf Direct Integration Settings
+  static const String _keyAbsServerUrl = 'abs_server_url';
+  static const String _keyAbsApiToken = 'abs_api_token';
+  static const String _keyAbsEnabled = 'abs_enabled';
+
+  // Audiobookshelf Library Settings (via MA browse)
+  static const String _keyEnabledAbsLibraries = 'enabled_abs_libraries'; // JSON list of library paths
+  static const String _keyDiscoveredAbsLibraries = 'discovered_abs_libraries'; // JSON list of {path, name}

  static Future<String?> getServerUrl() async {
    final prefs = await SharedPreferences.getInstance();
@@ -283,6 +319,21 @@ class SettingsService {
    await prefs.setString(_keyOwnerName, name.trim());
  }

+  // Last selected player ID - persists user's player selection across sessions
+  static Future<String?> getLastSelectedPlayerId() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLastSelectedPlayerId);
+  }
+
+  static Future<void> setLastSelectedPlayerId(String? playerId) async {
+    final prefs = await SharedPreferences.getInstance();
+    if (playerId == null || playerId.isEmpty) {
+      await prefs.remove(_keyLastSelectedPlayerId);
+    } else {
+      await prefs.setString(_keyLastSelectedPlayerId, playerId);
+    }
+  }
+
  // Helper to create player name with possessive apostrophe
  static String _makePlayerName(String ownerName) {
    // Handle possessive: "Chris" -> "Chris' Phone", "Mom" -> "Mom's Phone"
@@ -297,4 +348,344 @@ class SettingsService {
    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 Audiobook Rows (default off - optional)
+  static Future<bool> getShowContinueListeningAudiobooks() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowContinueListeningAudiobooks) ?? false;
+  }
+
+  static Future<void> setShowContinueListeningAudiobooks(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowContinueListeningAudiobooks, show);
+  }
+
+  static Future<bool> getShowDiscoverAudiobooks() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowDiscoverAudiobooks) ?? false;
+  }
+
+  static Future<void> setShowDiscoverAudiobooks(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowDiscoverAudiobooks, show);
+  }
+
+  static Future<bool> getShowDiscoverSeries() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowDiscoverSeries) ?? false;
+  }
+
+  static Future<void> setShowDiscoverSeries(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowDiscoverSeries, 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);
+  }
+
+  // View Mode Settings - Artist Albums
+  static Future<String> getArtistAlbumsSortOrder() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyArtistAlbumsSortOrder) ?? 'alpha';
+  }
+
+  static Future<void> setArtistAlbumsSortOrder(String order) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyArtistAlbumsSortOrder, order);
+  }
+
+  static Future<String> getArtistAlbumsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyArtistAlbumsViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setArtistAlbumsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyArtistAlbumsViewMode, mode);
+  }
+
+  // View Mode Settings - Library Artists
+  static Future<String> getLibraryArtistsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryArtistsViewMode) ?? 'list';
+  }
+
+  static Future<void> setLibraryArtistsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryArtistsViewMode, mode);
+  }
+
+  // View Mode Settings - Library Albums
+  static Future<String> getLibraryAlbumsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryAlbumsViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setLibraryAlbumsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryAlbumsViewMode, mode);
+  }
+
+  // View Mode Settings - Library Playlists
+  static Future<String> getLibraryPlaylistsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryPlaylistsViewMode) ?? 'list';
+  }
+
+  static Future<void> setLibraryPlaylistsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryPlaylistsViewMode, mode);
+  }
+
+  // View Mode Settings - Author Audiobooks (author detail screen)
+  static Future<String> getAuthorAudiobooksSortOrder() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyAuthorAudiobooksSortOrder) ?? 'alpha';
+  }
+
+  static Future<void> setAuthorAudiobooksSortOrder(String order) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyAuthorAudiobooksSortOrder, order);
+  }
+
+  static Future<String> getAuthorAudiobooksViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyAuthorAudiobooksViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setAuthorAudiobooksViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyAuthorAudiobooksViewMode, mode);
+  }
+
+  // View Mode Settings - Library Authors
+  static Future<String> getLibraryAuthorsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryAuthorsViewMode) ?? 'list';
+  }
+
+  static Future<void> setLibraryAuthorsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryAuthorsViewMode, mode);
+  }
+
+  // View Mode Settings - Library Audiobooks
+  static Future<String> getLibraryAudiobooksViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryAudiobooksViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setLibraryAudiobooksViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryAudiobooksViewMode, mode);
+  }
+
+  static Future<String> getLibraryAudiobooksSortOrder() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryAudiobooksSortOrder) ?? 'alpha';
+  }
+
+  static Future<void> setLibraryAudiobooksSortOrder(String order) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryAudiobooksSortOrder, order);
+  }
+
+  static Future<String> getLibrarySeriesViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibrarySeriesViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setLibrarySeriesViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibrarySeriesViewMode, mode);
+  }
+
+  // View Mode Settings - Series Audiobooks (series detail screen)
+  static Future<String> getSeriesAudiobooksSortOrder() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keySeriesAudiobooksSortOrder) ?? 'series';
+  }
+
+  static Future<void> setSeriesAudiobooksSortOrder(String order) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keySeriesAudiobooksSortOrder, order);
+  }
+
+  static Future<String> getSeriesAudiobooksViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keySeriesAudiobooksViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setSeriesAudiobooksViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keySeriesAudiobooksViewMode, mode);
+  }
+
+  // Audiobookshelf Settings
+  static Future<String?> getAbsServerUrl() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyAbsServerUrl);
+  }
+
+  static Future<void> setAbsServerUrl(String url) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyAbsServerUrl, url);
+  }
+
+  static Future<String?> getAbsApiToken() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyAbsApiToken);
+  }
+
+  static Future<void> setAbsApiToken(String token) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyAbsApiToken, token);
+  }
+
+  static Future<bool> getAbsEnabled() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyAbsEnabled) ?? false;
+  }
+
+  static Future<void> setAbsEnabled(bool enabled) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyAbsEnabled, enabled);
+  }
+
+  static Future<void> clearAbsSettings() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove(_keyAbsServerUrl);
+    await prefs.remove(_keyAbsApiToken);
+    await prefs.remove(_keyAbsEnabled);
+  }
+
+  // Audiobookshelf Library Settings (via MA browse API)
+
+  /// Get list of enabled library paths (all enabled by default if not set)
+  static Future<List<String>?> getEnabledAbsLibraries() async {
+    final prefs = await SharedPreferences.getInstance();
+    final json = prefs.getString(_keyEnabledAbsLibraries);
+    if (json == null) return null; // null means all libraries are enabled
+    try {
+      final list = jsonDecode(json) as List<dynamic>;
+      return list.cast<String>();
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /// Set list of enabled library paths
+  static Future<void> setEnabledAbsLibraries(List<String> paths) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyEnabledAbsLibraries, jsonEncode(paths));
+  }
+
+  /// Clear enabled libraries (reverts to all enabled)
+  static Future<void> clearEnabledAbsLibraries() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove(_keyEnabledAbsLibraries);
+  }
+
+  /// Get discovered libraries [{path: String, name: String}]
+  static Future<List<Map<String, String>>?> getDiscoveredAbsLibraries() async {
+    final prefs = await SharedPreferences.getInstance();
+    final json = prefs.getString(_keyDiscoveredAbsLibraries);
+    if (json == null) return null;
+    try {
+      final list = jsonDecode(json) as List<dynamic>;
+      return list.map((e) => Map<String, String>.from(e as Map)).toList();
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /// Save discovered libraries
+  static Future<void> setDiscoveredAbsLibraries(List<Map<String, String>> libraries) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyDiscoveredAbsLibraries, jsonEncode(libraries));
+  }
+
+  /// Check if a specific library is enabled
+  static Future<bool> isAbsLibraryEnabled(String libraryPath) async {
+    final enabled = await getEnabledAbsLibraries();
+    if (enabled == null) return true; // All enabled by default
+    return enabled.contains(libraryPath);
+  }
+
+  /// Toggle a specific library
+  static Future<void> toggleAbsLibrary(String libraryPath, bool enable) async {
+    final discovered = await getDiscoveredAbsLibraries();
+    if (discovered == null) return;
+
+    var enabled = await getEnabledAbsLibraries();
+    // If null (all enabled), initialize with all library paths
+    enabled ??= discovered.map((lib) => lib['path']!).toList();
+
+    if (enable && !enabled.contains(libraryPath)) {
+      enabled.add(libraryPath);
+    } else if (!enable && enabled.contains(libraryPath)) {
+      enabled.remove(libraryPath);
+    }
+
+    await setEnabledAbsLibraries(enabled);
+  }
 }
@@ -0,0 +1,299 @@
+import 'dart:async';
+import 'dart:convert';
+import 'package:flutter/foundation.dart';
+import '../models/media_item.dart';
+import 'database_service.dart';
+import 'debug_logger.dart';
+import 'music_assistant_api.dart';
+
+/// Sync status for UI indicators
+enum SyncStatus {
+  idle,
+  syncing,
+  completed,
+  error,
+}
+
+/// Service for background library synchronization
+/// Loads from database cache first, then syncs from MA API in background
+class SyncService with ChangeNotifier {
+  static SyncService? _instance;
+  static final _logger = DebugLogger();
+
+  SyncService._();
+
+  static SyncService get instance {
+    _instance ??= SyncService._();
+    return _instance!;
+  }
+
+  DatabaseService get _db => DatabaseService.instance;
+
+  // Sync state
+  SyncStatus _status = SyncStatus.idle;
+  String? _lastError;
+  DateTime? _lastSyncTime;
+  bool _isSyncing = false;
+
+  // Cached data (loaded from DB, updated after sync)
+  List<Album> _cachedAlbums = [];
+  List<Artist> _cachedArtists = [];
+  List<Audiobook> _cachedAudiobooks = [];
+  List<Playlist> _cachedPlaylists = [];
+
+  // Getters
+  SyncStatus get status => _status;
+  String? get lastError => _lastError;
+  DateTime? get lastSyncTime => _lastSyncTime;
+  bool get isSyncing => _isSyncing;
+  List<Album> get cachedAlbums => _cachedAlbums;
+  List<Artist> get cachedArtists => _cachedArtists;
+  List<Audiobook> get cachedAudiobooks => _cachedAudiobooks;
+  List<Playlist> get cachedPlaylists => _cachedPlaylists;
+  bool get hasCache => _cachedAlbums.isNotEmpty || _cachedArtists.isNotEmpty ||
+                       _cachedAudiobooks.isNotEmpty || _cachedPlaylists.isNotEmpty;
+
+  /// Load library data from database cache (instant)
+  /// Call this on app startup for immediate data
+  Future<void> loadFromCache() async {
+    if (!_db.isInitialized) {
+      _logger.log('⚠️ Database not initialized, skipping cache load');
+      return;
+    }
+
+    try {
+      _logger.log('📦 Loading library from database cache...');
+
+      // Load albums from cache
+      final albumData = await _db.getCachedItems('album');
+      _cachedAlbums = albumData.map((data) {
+        try {
+          return Album.fromJson(data);
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse cached album: $e');
+          return null;
+        }
+      }).whereType<Album>().toList();
+
+      // Load artists from cache
+      final artistData = await _db.getCachedItems('artist');
+      _cachedArtists = artistData.map((data) {
+        try {
+          return Artist.fromJson(data);
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse cached artist: $e');
+          return null;
+        }
+      }).whereType<Artist>().toList();
+
+      // Load audiobooks from cache
+      final audiobookData = await _db.getCachedItems('audiobook');
+      _cachedAudiobooks = audiobookData.map((data) {
+        try {
+          return Audiobook.fromJson(data);
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse cached audiobook: $e');
+          return null;
+        }
+      }).whereType<Audiobook>().toList();
+
+      // Load playlists from cache
+      final playlistData = await _db.getCachedItems('playlist');
+      _cachedPlaylists = playlistData.map((data) {
+        try {
+          return Playlist.fromJson(data);
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse cached playlist: $e');
+          return null;
+        }
+      }).whereType<Playlist>().toList();
+
+      _logger.log('📦 Loaded ${_cachedAlbums.length} albums, ${_cachedArtists.length} artists, '
+                  '${_cachedAudiobooks.length} audiobooks, ${_cachedPlaylists.length} playlists from cache');
+      notifyListeners();
+    } catch (e) {
+      _logger.log('❌ Failed to load from cache: $e');
+    }
+  }
+
+  /// Sync library data from MA API in background
+  /// Updates database cache and notifies listeners when complete
+  Future<void> syncFromApi(MusicAssistantAPI api, {bool force = false}) async {
+    if (_isSyncing) {
+      _logger.log('🔄 Sync already in progress, skipping');
+      return;
+    }
+
+    if (!_db.isInitialized) {
+      _logger.log('⚠️ Database not initialized, skipping sync');
+      return;
+    }
+
+    // Check if sync is needed (default: every 5 minutes)
+    if (!force) {
+      final albumsNeedSync = await _db.needsSync('albums', maxAge: const Duration(minutes: 5));
+      final artistsNeedSync = await _db.needsSync('artists', maxAge: const Duration(minutes: 5));
+      final audiobooksNeedSync = await _db.needsSync('audiobooks', maxAge: const Duration(minutes: 5));
+      final playlistsNeedSync = await _db.needsSync('playlists', maxAge: const Duration(minutes: 5));
+
+      if (!albumsNeedSync && !artistsNeedSync && !audiobooksNeedSync && !playlistsNeedSync) {
+        _logger.log('✅ Cache is fresh, skipping sync');
+        return;
+      }
+    }
+
+    _isSyncing = true;
+    _status = SyncStatus.syncing;
+    _lastError = null;
+    notifyListeners();
+
+    try {
+      _logger.log('🔄 Starting background library sync...');
+
+      // Fetch fresh data from MA API (in parallel for speed)
+      final results = await Future.wait([
+        api.getAlbums(limit: 1000),
+        api.getArtists(limit: 1000),
+        api.getAudiobooks(limit: 1000),
+        api.getPlaylists(limit: 1000),
+      ]);
+
+      final albums = results[0] as List<Album>;
+      final artists = results[1] as List<Artist>;
+      final audiobooks = results[2] as List<Audiobook>;
+      final playlists = results[3] as List<Playlist>;
+
+      _logger.log('📥 Fetched ${albums.length} albums, ${artists.length} artists, '
+                  '${audiobooks.length} audiobooks, ${playlists.length} playlists from MA');
+
+      // Save to database cache
+      await _saveAlbumsToCache(albums);
+      await _saveArtistsToCache(artists);
+      await _saveAudiobooksToCache(audiobooks);
+      await _savePlaylistsToCache(playlists);
+
+      // Update sync metadata
+      await _db.updateSyncMetadata('albums', albums.length);
+      await _db.updateSyncMetadata('artists', artists.length);
+      await _db.updateSyncMetadata('audiobooks', audiobooks.length);
+      await _db.updateSyncMetadata('playlists', playlists.length);
+
+      // Update in-memory cache
+      _cachedAlbums = albums;
+      _cachedArtists = artists;
+      _cachedAudiobooks = audiobooks;
+      _cachedPlaylists = playlists;
+      _lastSyncTime = DateTime.now();
+      _status = SyncStatus.completed;
+
+      _logger.log('✅ Library sync complete');
+    } catch (e) {
+      _logger.log('❌ Library sync failed: $e');
+      _status = SyncStatus.error;
+      _lastError = e.toString();
+    } finally {
+      _isSyncing = false;
+      notifyListeners();
+    }
+  }
+
+  /// Save albums to database cache
+  Future<void> _saveAlbumsToCache(List<Album> albums) async {
+    for (final album in albums) {
+      try {
+        await _db.cacheItem(
+          itemType: 'album',
+          itemId: album.itemId,
+          data: album.toJson(),
+        );
+      } catch (e) {
+        _logger.log('⚠️ Failed to cache album ${album.name}: $e');
+      }
+    }
+    _logger.log('💾 Saved ${albums.length} albums to cache');
+  }
+
+  /// Save artists to database cache
+  Future<void> _saveArtistsToCache(List<Artist> artists) async {
+    for (final artist in artists) {
+      try {
+        await _db.cacheItem(
+          itemType: 'artist',
+          itemId: artist.itemId,
+          data: artist.toJson(),
+        );
+      } catch (e) {
+        _logger.log('⚠️ Failed to cache artist ${artist.name}: $e');
+      }
+    }
+    _logger.log('💾 Saved ${artists.length} artists to cache');
+  }
+
+  /// Save audiobooks to database cache
+  Future<void> _saveAudiobooksToCache(List<Audiobook> audiobooks) async {
+    for (final audiobook in audiobooks) {
+      try {
+        await _db.cacheItem(
+          itemType: 'audiobook',
+          itemId: audiobook.itemId,
+          data: audiobook.toJson(),
+        );
+      } catch (e) {
+        _logger.log('⚠️ Failed to cache audiobook ${audiobook.name}: $e');
+      }
+    }
+    _logger.log('💾 Saved ${audiobooks.length} audiobooks to cache');
+  }
+
+  /// Save playlists to database cache
+  Future<void> _savePlaylistsToCache(List<Playlist> playlists) async {
+    for (final playlist in playlists) {
+      try {
+        await _db.cacheItem(
+          itemType: 'playlist',
+          itemId: playlist.itemId,
+          data: playlist.toJson(),
+        );
+      } catch (e) {
+        _logger.log('⚠️ Failed to cache playlist ${playlist.name}: $e');
+      }
+    }
+    _logger.log('💾 Saved ${playlists.length} playlists to cache');
+  }
+
+  /// Force a fresh sync (for pull-to-refresh)
+  Future<void> forceSync(MusicAssistantAPI api) async {
+    await syncFromApi(api, force: true);
+  }
+
+  /// Clear all cached data
+  Future<void> clearCache() async {
+    if (!_db.isInitialized) return;
+
+    await _db.clearAllCache();
+    _cachedAlbums = [];
+    _cachedArtists = [];
+    _cachedAudiobooks = [];
+    _cachedPlaylists = [];
+    _lastSyncTime = null;
+    _status = SyncStatus.idle;
+    notifyListeners();
+    _logger.log('🗑️ Library cache cleared');
+  }
+
+  /// Get albums (from cache or empty if not loaded)
+  List<Album> getAlbums() => _cachedAlbums;
+
+  /// Get artists (from cache or empty if not loaded)
+  List<Artist> getArtists() => _cachedArtists;
+
+  /// Get audiobooks (from cache or empty if not loaded)
+  List<Audiobook> getAudiobooks() => _cachedAudiobooks;
+
+  /// Get playlists (from cache or empty if not loaded)
+  List<Playlist> getPlaylists() => _cachedPlaylists;
+
+  /// Check if we have data available (from cache or sync)
+  bool get hasData => _cachedAlbums.isNotEmpty || _cachedArtists.isNotEmpty ||
+                      _cachedAudiobooks.isNotEmpty || _cachedPlaylists.isNotEmpty;
+}
@@ -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);
+}
@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:palette_generator/palette_generator.dart';
+import '../services/debug_logger.dart';
+
+final _logger = DebugLogger();

 /// Extracted adaptive colors from album art
 class AdaptiveColors {
@@ -40,7 +43,7 @@ class PaletteHelper {
      );
      return palette;
    } catch (e) {
-      print('⚠️ Failed to extract palette: $e');
+      _logger.warning('Failed to extract palette: $e', context: 'Palette');
      return null;
    }
  }
@@ -56,10 +59,21 @@ class PaletteHelper {
                         const Color(0xFF604CEC);

    // Ensure primary has enough saturation to be visually distinct
+    // AND enough lightness for white text to be readable on it
    final HSLColor hslPrimary = HSLColor.fromColor(primary);
-    final Color adjustedPrimary = hslPrimary.saturation < 0.3
-        ? hslPrimary.withSaturation(0.5).toColor()
-        : 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
@@ -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;
@@ -2,8 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
 import 'palette_helper.dart';

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

@@ -7,8 +7,9 @@ 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;
@@ -20,26 +21,82 @@ class AlbumCard extends StatelessWidget {
    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' : '';
+    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: onTap ?? () {
+        onTap: widget.onTap ?? () {
          // Update adaptive colors immediately on tap
          updateAdaptiveColorsFromImage(context, imageUrl);
          Navigator.push(
            context,
            FadeSlidePageRoute(
              child: AlbumDetailsScreen(
-                album: album,
-                heroTagSuffix: heroTagSuffix,
+                album: widget.album,
+                heroTagSuffix: widget.heroTagSuffix,
              ),
            ),
          );
@@ -51,7 +108,7 @@ class AlbumCard extends StatelessWidget {
            AspectRatio(
              aspectRatio: 1.0,
              child: Hero(
-                tag: HeroTags.albumCover + (album.uri ?? album.itemId) + suffix,
+                tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + suffix,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12.0),
                  child: Container(
@@ -64,11 +121,19 @@ class AlbumCard extends StatelessWidget {
                            memCacheHeight: 256,
                            fadeInDuration: const Duration(milliseconds: 150),
                            placeholder: (context, url) => const SizedBox(),
-                            errorWidget: (context, url, error) => Icon(
-                              Icons.album_rounded,
-                              size: 64,
-                              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 Icon(
+                                Icons.album_rounded,
+                                size: 64,
+                                color: colorScheme.onSurfaceVariant,
+                              );
+                            },
                          )
                        : Center(
                            child: Icon(
@@ -82,13 +147,13 @@ class AlbumCard extends StatelessWidget {
              ),
            ),
          const SizedBox(height: 8),
-          // Album title
+          // Album title with year
          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.nameWithYear,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: textTheme.titleSmall?.copyWith(
@@ -100,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(
@@ -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
@@ -44,79 +47,103 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
    }
  }

+  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: 193,
-          child: FutureBuilder<List<Album>>(
-            future: _albumsFuture,
-            builder: (context, snapshot) {
-              // Use cached data immediately if available (prevents flash on rebuild)
-              final albums = snapshot.data ?? _cachedAlbums;
+          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;

-              // Only show loading if we have no data at all
-              if (albums == null && snapshot.connectionState == ConnectionState.waiting) {
-                return const Center(child: CircularProgressIndicator());
-              }
+                // Only show loading if we have no data at all
+                if (albums == null && snapshot.connectionState == ConnectionState.waiting) {
+                  return const Center(child: CircularProgressIndicator());
+                }

-              if (snapshot.hasError && albums == null) {
-                return Center(
-                  child: Text('Error: ${snapshot.error}'),
-                );
-              }
+                if (snapshot.hasError && albums == null) {
+                  return Center(
+                    child: Text('Error: ${snapshot.error}'),
+                  );
+                }

-              if (albums == null || albums.isEmpty) {
-                return Center(
-                  child: Text(
-                    'No albums found',
-                    style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+                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,
+                        ),
+                      );
+                    },
                  ),
                );
-              }
-
-              return ScrollConfiguration(
-                behavior: const _StretchScrollBehavior(),
-                child: ListView.builder(
-                  scrollDirection: Axis.horizontal,
-                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                  itemCount: albums.length,
-                  itemExtent: 162, // 150px width + 12px horizontal margins
-                  itemBuilder: (context, index) {
-                    final album = albums[index];
-                    return Container(
-                      key: ValueKey(album.uri ?? album.itemId),
-                      width: 150,
-                      margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                      child: AlbumCard(
-                        album: album,
-                        heroTagSuffix: widget.heroTagSuffix,
-                      ),
-                    );
-                  },
-                ),
-              );
-            },
+              },
+            ),
          ),
+          ],
        ),
-      ],
+      ),
    );
+    _logger.endBuild('AlbumRow:${widget.title}');
+    return result;
  }
 }

@@ -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;
+  }
+}
@@ -1,44 +1,98 @@
 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,
    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' : '';
+    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: onTap ?? () {
+        onTap: widget.onTap ?? () {
          // Update adaptive colors immediately on tap
          updateAdaptiveColorsFromImage(context, imageUrl);
          Navigator.push(
            context,
            FadeSlidePageRoute(
              child: ArtistDetailsScreen(
-                artist: artist,
-                heroTagSuffix: heroTagSuffix,
+                artist: widget.artist,
+                heroTagSuffix: widget.heroTagSuffix,
+                initialImageUrl: imageUrl,
              ),
            ),
          );
@@ -46,44 +100,69 @@ class ArtistCard extends StatelessWidget {
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
-            // Artist image - circular
-            Hero(
-              tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
-              child: ClipOval(
-                child: Container(
-                  width: 110,
-                  height: 110,
-                  color: colorScheme.surfaceVariant,
-                  child: imageUrl != null
-                      ? Image.network(
-                          imageUrl,
-                          fit: BoxFit.cover,
-                          cacheWidth: 256,
-                          cacheHeight: 256,
-                          errorBuilder: (_, __, ___) => Icon(
-                            Icons.person_rounded,
-                            size: 60,
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        )
-                      : Icon(Icons.person_rounded, size: 60, color: colorScheme.onSurfaceVariant),
+            // 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,
+                  ),
                ),
              ),
            ),
@@ -93,4 +172,14 @@ class ArtistCard extends StatelessWidget {
      ),
    );
  }
+
+  Future<void> _fetchFallbackImage() async {
+    final fallbackUrl = await MetadataService.getArtistImageUrl(widget.artist.name);
+    if (fallbackUrl != null && mounted) {
+      _logger.debug('Found fallback image for "${widget.artist.name}"', context: 'ArtistCard');
+      setState(() {
+        _fallbackImageUrl = fallbackUrl;
+      });
+    }
+  }
 }
@@ -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
@@ -44,79 +47,103 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
    }
  }

+  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: 163,
-          child: FutureBuilder<List<Artist>>(
-            future: _artistsFuture,
-            builder: (context, snapshot) {
-              // Use cached data immediately if available (prevents flash on rebuild)
-              final artists = snapshot.data ?? _cachedArtists;
+          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;

-              // Only show loading if we have no data at all
-              if (artists == null && snapshot.connectionState == ConnectionState.waiting) {
-                return const Center(child: CircularProgressIndicator());
-              }
+                // Only show loading if we have no data at all
+                if (artists == null && snapshot.connectionState == ConnectionState.waiting) {
+                  return const Center(child: CircularProgressIndicator());
+                }

-              if (snapshot.hasError && artists == null) {
-                return Center(
-                  child: Text('Error: ${snapshot.error}'),
-                );
-              }
+                if (snapshot.hasError && artists == null) {
+                  return Center(
+                    child: Text('Error: ${snapshot.error}'),
+                  );
+                }

-              if (artists == null || artists.isEmpty) {
-                return Center(
-                  child: Text(
-                    'No artists found',
-                    style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+                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,
+                        ),
+                      );
+                    },
                  ),
                );
-              }
-
-              return ScrollConfiguration(
-                behavior: const _StretchScrollBehavior(),
-                child: ListView.builder(
-                  scrollDirection: Axis.horizontal,
-                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                  itemCount: artists.length,
-                  itemExtent: 136, // 120px width + 16px horizontal margins
-                  itemBuilder: (context, index) {
-                    final artist = artists[index];
-                    return Container(
-                      key: ValueKey(artist.uri ?? artist.itemId),
-                      width: 120,
-                      margin: const EdgeInsets.symmetric(horizontal: 8.0),
-                      child: ArtistCard(
-                        artist: artist,
-                        heroTagSuffix: widget.heroTagSuffix,
-                      ),
-                    );
-                  },
-                ),
-              );
-            },
+              },
+            ),
          ),
+          ],
        ),
-      ],
+      ),
    );
+    _logger.endBuild('ArtistRow:${widget.title}');
+    return result;
  }
 }

@@ -0,0 +1,285 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../services/debug_logger.dart';
+import '../utils/page_transitions.dart';
+import '../screens/audiobook_detail_screen.dart';
+import '../constants/hero_tags.dart';
+
+class AudiobookRow extends StatefulWidget {
+  final String title;
+  final Future<List<Audiobook>> Function() loadAudiobooks;
+  final String? heroTagSuffix;
+  final double? rowHeight;
+
+  const AudiobookRow({
+    super.key,
+    required this.title,
+    required this.loadAudiobooks,
+    this.heroTagSuffix,
+    this.rowHeight,
+  });
+
+  @override
+  State<AudiobookRow> createState() => _AudiobookRowState();
+}
+
+class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClientMixin {
+  late Future<List<Audiobook>> _audiobooksFuture;
+  List<Audiobook>? _cachedAudiobooks;
+  bool _hasLoaded = false;
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadAudiobooksOnce();
+  }
+
+  void _loadAudiobooksOnce() {
+    if (!_hasLoaded) {
+      _audiobooksFuture = widget.loadAudiobooks().then((audiobooks) {
+        _cachedAudiobooks = audiobooks;
+        return audiobooks;
+      });
+      _hasLoaded = true;
+    }
+  }
+
+  static final _logger = DebugLogger();
+
+  @override
+  Widget build(BuildContext context) {
+    _logger.startBuild('AudiobookRow:${widget.title}');
+    super.build(context);
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    final totalHeight = widget.rowHeight ?? 237.0;
+    const titleHeight = 44.0;
+    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,
+                ),
+              ),
+            ),
+            Expanded(
+              child: FutureBuilder<List<Audiobook>>(
+                future: _audiobooksFuture,
+                builder: (context, snapshot) {
+                  final audiobooks = snapshot.data ?? _cachedAudiobooks;
+
+                  if (audiobooks == null && snapshot.connectionState == ConnectionState.waiting) {
+                    return const Center(child: CircularProgressIndicator());
+                  }
+
+                  if (snapshot.hasError && audiobooks == null) {
+                    return Center(
+                      child: Text('Error: ${snapshot.error}'),
+                    );
+                  }
+
+                  if (audiobooks == null || audiobooks.isEmpty) {
+                    return Center(
+                      child: Text(
+                        'No audiobooks found',
+                        style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+                      ),
+                    );
+                  }
+
+                  const textAreaHeight = 44.0;
+                  final artworkSize = contentHeight - textAreaHeight;
+                  final cardWidth = artworkSize;
+                  final itemExtent = cardWidth + 12;
+
+                  return ScrollConfiguration(
+                    behavior: const _StretchScrollBehavior(),
+                    child: ListView.builder(
+                      scrollDirection: Axis.horizontal,
+                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                      itemCount: audiobooks.length,
+                      itemExtent: itemExtent,
+                      cacheExtent: 500,
+                      addAutomaticKeepAlives: false,
+                      addRepaintBoundaries: false,
+                      itemBuilder: (context, index) {
+                        final audiobook = audiobooks[index];
+                        return Container(
+                          key: ValueKey(audiobook.uri ?? audiobook.itemId),
+                          width: cardWidth,
+                          margin: const EdgeInsets.symmetric(horizontal: 6.0),
+                          child: _AudiobookCard(
+                            audiobook: audiobook,
+                            heroTagSuffix: widget.heroTagSuffix ?? 'home_${widget.title.replaceAll(' ', '_').toLowerCase()}',
+                            maProvider: maProvider,
+                          ),
+                        );
+                      },
+                    ),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+    _logger.endBuild('AudiobookRow:${widget.title}');
+    return result;
+  }
+}
+
+class _AudiobookCard extends StatelessWidget {
+  final Audiobook audiobook;
+  final String heroTagSuffix;
+  final MusicAssistantProvider maProvider;
+
+  const _AudiobookCard({
+    required this.audiobook,
+    required this.heroTagSuffix,
+    required this.maProvider,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+    final imageUrl = maProvider.getImageUrl(audiobook, size: 256);
+
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          FadeSlidePageRoute(
+            child: AudiobookDetailScreen(
+              audiobook: audiobook,
+              heroTagSuffix: heroTagSuffix,
+            ),
+          ),
+        );
+      },
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: Stack(
+              children: [
+                Hero(
+                  tag: HeroTags.audiobookCover + (audiobook.uri ?? audiobook.itemId) + '_$heroTagSuffix',
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      width: double.infinity,
+                      height: double.infinity,
+                      color: colorScheme.surfaceContainerHighest,
+                      child: imageUrl != null
+                          ? CachedNetworkImage(
+                              imageUrl: imageUrl,
+                              fit: BoxFit.cover,
+                              placeholder: (_, __) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                              errorWidget: (_, __, ___) => Center(
+                                child: Icon(
+                                  MdiIcons.bookOutline,
+                                  size: 48,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              ),
+                            )
+                          : Center(
+                              child: Icon(
+                                MdiIcons.bookOutline,
+                                size: 48,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                    ),
+                  ),
+                ),
+                // Progress indicator
+                if (audiobook.progress > 0)
+                  Positioned(
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    child: ClipRRect(
+                      borderRadius: const BorderRadius.only(
+                        bottomLeft: Radius.circular(8),
+                        bottomRight: Radius.circular(8),
+                      ),
+                      child: LinearProgressIndicator(
+                        value: audiobook.progress,
+                        backgroundColor: Colors.black54,
+                        valueColor: AlwaysStoppedAnimation<Color>(colorScheme.primary),
+                        minHeight: 4,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 8),
+          Hero(
+            tag: HeroTags.audiobookTitle + (audiobook.uri ?? audiobook.itemId) + '_$heroTagSuffix',
+            child: Material(
+              color: Colors.transparent,
+              child: Text(
+                audiobook.name,
+                style: textTheme.bodyMedium?.copyWith(
+                  fontWeight: FontWeight.w500,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ),
+          Text(
+            audiobook.authorsString,
+            style: textTheme.bodySmall?.copyWith(
+              color: colorScheme.onSurface.withOpacity(0.6),
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
+    );
+  }
+}
@@ -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),
+                  ),
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -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,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -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),
+      ),
+    );
+  }
+}
@@ -5,6 +5,40 @@ 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>();

@@ -23,7 +57,7 @@ class BottomSpacing {
  static const double navBarOnly = navBarHeight + 16.0;

  /// Space needed when mini player is also visible
-  static const double withMiniPlayer = navBarHeight + miniPlayerHeight + 14.0;
+  static const double withMiniPlayer = navBarHeight + miniPlayerHeight + 22.0;
 }

 /// ValueNotifier for player expansion progress (0.0 to 1.0) and background color
@@ -135,33 +169,73 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
              return Consumer<ThemeProvider>(
                builder: (context, themeProvider, _) {
                  // Use adaptive primary color for bottom nav when adaptive theme is enabled
-                  var navSelectedColor = themeProvider.adaptiveTheme
+                  final sourceColor = themeProvider.adaptiveTheme
                      ? themeProvider.adaptivePrimaryColor
                      : colorScheme.primary;

-                  // Ensure nav color has sufficient contrast against the surface background
+                  // Use cached color computation to avoid expensive HSL operations during scroll
                  final isDark = Theme.of(context).brightness == Brightness.dark;
-                  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();
-                  }
+                  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,
-                    builder: (context, expansionState, child) {
-                      // Base background: use adaptive surface color if available, otherwise default surface
-                      final baseBgColor = (themeProvider.adaptiveTheme && themeProvider.adaptiveSurfaceColor != null)
-                          ? themeProvider.adaptiveSurfaceColor!
-                          : colorScheme.surface;
-
-                      // Lerp between base color and player background when expanded
+                    // 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,
@@ -175,56 +249,7 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                                ]
                              : null,
                        ),
-                        child: BottomNavigationBar(
-                          currentIndex: navigationProvider.selectedIndex,
-                          onTap: (index) {
-                            // Collapse player if expanded
-                            if (GlobalPlayerOverlay.isPlayerExpanded) {
-                              GlobalPlayerOverlay.collapsePlayer();
-                            }
-
-                            // Pop any pushed routes (album/artist details) first
-                            navigationProvider.navigatorKey.currentState?.popUntil((route) => route.isFirst);
-
-                            // Hide mini player on Settings screen, show on other screens
-                            if (index == 3) {
-                              GlobalPlayerOverlay.hidePlayer();
-                            } else if (navigationProvider.selectedIndex == 3) {
-                              GlobalPlayerOverlay.showPlayer();
-                            }
-
-                            navigationProvider.setSelectedIndex(index);
-                          },
-                          backgroundColor: Colors.transparent,
-                          selectedItemColor: navSelectedColor,
-                          unselectedItemColor: colorScheme.onSurface.withOpacity(0.54),
-                          elevation: 0,
-                          type: BottomNavigationBarType.fixed,
-                          selectedFontSize: 12,
-                          unselectedFontSize: 12,
-                          items: const [
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.home_outlined),
-                              activeIcon: Icon(Icons.home_rounded),
-                              label: 'Home',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.library_music_outlined),
-                              activeIcon: Icon(Icons.library_music_rounded),
-                              label: 'Library',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.search_rounded),
-                              activeIcon: Icon(Icons.search_rounded),
-                              label: 'Search',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.settings_outlined),
-                              activeIcon: Icon(Icons.settings_rounded),
-                              label: 'Settings',
-                            ),
-                          ],
-                        ),
+                        child: navBar, // Reuse pre-built navigation bar
                      );
                    },
                  );
@@ -234,17 +259,22 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
          ),
        ),
        // Global player overlay - slides down when hidden, renders ON TOP of bottom nav
-        AnimatedBuilder(
-          animation: _slideAnimation,
-          builder: (context, child) {
-            return Consumer<MusicAssistantProvider>(
-              builder: (context, maProvider, _) {
-                // Only show player if connected and has a track
-                if (!maProvider.isConnected ||
-                    maProvider.currentTrack == null ||
-                    maProvider.selectedPlayer == null) {
-                  return const SizedBox.shrink();
-                }
+        // 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,
@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+import '../../providers/music_assistant_provider.dart';
+import '../../models/media_item.dart' show Audiobook, Chapter;
+import '../../theme/design_tokens.dart';
+import '../common/empty_state.dart';
+
+/// Panel that displays audiobook chapters for navigation
+class ChaptersPanel extends StatelessWidget {
+  final MusicAssistantProvider maProvider;
+  final Audiobook? audiobook;
+  final Color textColor;
+  final Color primaryColor;
+  final Color backgroundColor;
+  final double topPadding;
+  final VoidCallback onClose;
+
+  const ChaptersPanel({
+    super.key,
+    required this.maProvider,
+    required this.audiobook,
+    required this.textColor,
+    required this.primaryColor,
+    required this.backgroundColor,
+    required this.topPadding,
+    required this.onClose,
+  });
+
+  String _formatDuration(int seconds) {
+    final duration = Duration(seconds: seconds);
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes % 60;
+    final secs = duration.inSeconds % 60;
+
+    if (hours > 0) {
+      return '${hours}:${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}';
+    }
+    return '${minutes}:${secs.toString().padLeft(2, '0')}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final chapters = audiobook?.chapters ?? [];
+    final currentChapterIndex = maProvider.getCurrentChapterIndex();
+
+    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(
+                  'Chapters',
+                  style: TextStyle(
+                    color: textColor,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                const Spacer(),
+                // Placeholder for symmetry
+                const SizedBox(width: 48),
+              ],
+            ),
+          ),
+
+          // Chapters list
+          Expanded(
+            child: chapters.isEmpty
+                ? _buildEmptyState()
+                : _buildChaptersList(chapters, currentChapterIndex),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildEmptyState() {
+    return EmptyState.custom(
+      icon: Icons.bookmark_outline_rounded,
+      title: 'No chapters',
+      subtitle: 'This audiobook has no chapter information',
+    );
+  }
+
+  Widget _buildChaptersList(List<Chapter> chapters, int currentChapterIndex) {
+    return ListView.builder(
+      padding: Spacing.paddingH8,
+      cacheExtent: 500,
+      addAutomaticKeepAlives: false,
+      addRepaintBoundaries: false,
+      itemCount: chapters.length,
+      itemBuilder: (context, index) {
+        final chapter = chapters[index];
+        final isCurrentChapter = index == currentChapterIndex;
+        final isPastChapter = index < currentChapterIndex;
+
+        return RepaintBoundary(
+          child: Opacity(
+            opacity: isPastChapter ? 0.5 : 1.0,
+            child: Container(
+              margin: EdgeInsets.symmetric(vertical: Spacing.xxs),
+              decoration: BoxDecoration(
+                color: isCurrentChapter ? primaryColor.withOpacity(0.15) : Colors.transparent,
+                borderRadius: BorderRadius.circular(Radii.md),
+              ),
+              child: ListTile(
+                dense: true,
+                leading: Container(
+                  width: 44,
+                  height: 44,
+                  decoration: BoxDecoration(
+                    color: isCurrentChapter
+                        ? primaryColor.withOpacity(0.2)
+                        : textColor.withOpacity(0.1),
+                    borderRadius: BorderRadius.circular(Radii.sm),
+                  ),
+                  child: Center(
+                    child: Text(
+                      '${index + 1}',
+                      style: TextStyle(
+                        color: isCurrentChapter ? primaryColor : textColor.withOpacity(0.6),
+                        fontSize: 14,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ),
+                ),
+                title: Text(
+                  chapter.title,
+                  style: TextStyle(
+                    color: isCurrentChapter ? primaryColor : textColor,
+                    fontSize: 14,
+                    fontWeight: isCurrentChapter ? FontWeight.w600 : FontWeight.normal,
+                  ),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                ),
+                subtitle: Text(
+                        _formatDuration(chapter.positionMs ~/ 1000),
+                        style: TextStyle(
+                          color: textColor.withOpacity(0.5),
+                          fontSize: 12,
+                        ),
+                      ),
+                trailing: isCurrentChapter
+                    ? Icon(Icons.play_arrow_rounded, color: primaryColor, size: 20)
+                    : null,
+                onTap: () => _seekToChapter(index),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _seekToChapter(int chapterIndex) {
+    final player = maProvider.selectedPlayer;
+    if (player == null || audiobook == null) return;
+
+    final chapters = audiobook!.chapters;
+    if (chapters == null || chapterIndex >= chapters.length) return;
+
+    final chapter = chapters[chapterIndex];
+    // Seek to the chapter's start position (positionMs is in milliseconds)
+    maProvider.seek(player.playerId, (chapter.positionMs / 1000).round());
+  }
+}
@@ -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;
+    }
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,7 @@
+/// Player widget components extracted from expandable_player.dart
+library player_widgets;
+
+export 'chapters_panel.dart';
+export 'device_selector_bar.dart';
+export 'player_controls.dart';
+export '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
+              },
+            ),
+          ),
+          ),
+        );
+      },
+    );
+  }
+}
--- a/Show More
+++ b/Show More