Pre UI Sweep

Refactor of the SearchScreen and ImageWithEverything.kt to use include and exlcude filtering

//TODO remove tags easy (versus exlude switch but both are needed)
//SearchScreen still needs export to collage TBD

.idea/deviceManager.xml

@@ -5,9 +5,14 @@
       <list>
         <ColumnSorterState>
           <option name="column" value="Name" />
-          <option name="order" value="ASCENDING" />
+          <option name="order" value="DESCENDING" />
         </ColumnSorterState>
       </list>
     </option>
+    <option name="groupByAttributes">
+      <list>
+        <option value="Type" />
+      </list>
+    </option>
   </component>
 </project>

app/build.gradle.kts

@@ -85,4 +85,10 @@ dependencies {
 
     // Gson for storing FloatArrays in Room
     implementation(libs.gson)
+
+    // Zoomable
+    implementation(libs.zoomable)
+    implementation(libs.vico.compose)
+    implementation(libs.vico.compose.m3)
+    implementation(libs.vico.core)
 }

app/src/main/java/com/placeholder/sherpai2/data/local/dao/ImageDao.kt

@@ -9,6 +9,34 @@ import com.placeholder.sherpai2.data.local.entity.ImageEntity
 import com.placeholder.sherpai2.data.local.model.ImageWithEverything
 import kotlinx.coroutines.flow.Flow
 
+/**
+ * Data classes for statistics queries
+ */
+data class DateCount(
+    val date: String,  // YYYY-MM-DD format
+    val count: Int
+)
+
+data class MonthCount(
+    val month: String, // YYYY-MM format
+    val count: Int
+)
+
+data class YearCount(
+    val year: String,  // YYYY format
+    val count: Int
+)
+
+data class DayOfWeekCount(
+    val dayOfWeek: Int, // 0 = Sunday, 6 = Saturday
+    val count: Int
+)
+
+data class HourCount(
+    val hour: Int,     // 0-23
+    val count: Int
+)
+
 @Dao
 interface ImageDao {
 
@@ -87,4 +115,130 @@ interface ImageDao {
      */
     @Query("SELECT * FROM images ORDER BY capturedAt ASC")
     suspend fun getAllImagesSortedByTime(): List<ImageEntity>
+
+    // ==========================================
+    // STATISTICS QUERIES - ADDED FOR STATS SECTION
+    // ==========================================
+
+    /**
+     * Get photo counts by date (daily granularity)
+     * Returns all days that have at least one photo
+     */
+    @Query("""
+        SELECT 
+            date(capturedAt/1000, 'unixepoch') as date,
+            COUNT(*) as count
+        FROM images
+        GROUP BY date
+        ORDER BY date ASC
+    """)
+    suspend fun getPhotoCountsByDate(): List<DateCount>
+
+    /**
+     * Get photo counts by month (monthly granularity)
+     */
+    @Query("""
+        SELECT 
+            strftime('%Y-%m', capturedAt/1000, 'unixepoch') as month,
+            COUNT(*) as count
+        FROM images
+        GROUP BY month
+        ORDER BY month ASC
+    """)
+    suspend fun getPhotoCountsByMonth(): List<MonthCount>
+
+    /**
+     * Get photo counts by year (yearly granularity)
+     */
+    @Query("""
+        SELECT 
+            strftime('%Y', capturedAt/1000, 'unixepoch') as year,
+            COUNT(*) as count
+        FROM images
+        GROUP BY year
+        ORDER BY year DESC
+    """)
+    suspend fun getPhotoCountsByYear(): List<YearCount>
+
+    /**
+     * Get photo counts by year (Flow version for reactive UI)
+     */
+    @Query("""
+        SELECT 
+            strftime('%Y', capturedAt/1000, 'unixepoch') as year,
+            COUNT(*) as count
+        FROM images
+        GROUP BY year
+        ORDER BY year DESC
+    """)
+    fun getPhotoCountsByYearFlow(): Flow<List<YearCount>>
+
+    /**
+     * Get photo counts by day of week (0 = Sunday, 6 = Saturday)
+     * Shows which days you take the most photos
+     */
+    @Query("""
+        SELECT 
+            CAST(strftime('%w', capturedAt/1000, 'unixepoch') AS INTEGER) as dayOfWeek,
+            COUNT(*) as count
+        FROM images
+        GROUP BY dayOfWeek
+        ORDER BY dayOfWeek ASC
+    """)
+    suspend fun getPhotoCountsByDayOfWeek(): List<DayOfWeekCount>
+
+    /**
+     * Get photo counts by hour of day (0-23)
+     * Shows when you take the most photos
+     */
+    @Query("""
+        SELECT 
+            CAST(strftime('%H', capturedAt/1000, 'unixepoch') AS INTEGER) as hour,
+            COUNT(*) as count
+        FROM images
+        GROUP BY hour
+        ORDER BY hour ASC
+    """)
+    suspend fun getPhotoCountsByHour(): List<HourCount>
+
+    /**
+     * Get earliest and latest photo timestamps
+     * Used for date range calculations
+     */
+    @Query("""
+        SELECT 
+            MIN(capturedAt) as earliest,
+            MAX(capturedAt) as latest
+        FROM images
+    """)
+    suspend fun getPhotoDateRange(): PhotoDateRange?
+
+    /**
+     * Get photo count for a specific year
+     */
+    @Query("""
+        SELECT COUNT(*) FROM images
+        WHERE strftime('%Y', capturedAt/1000, 'unixepoch') = :year
+    """)
+    suspend fun getPhotoCountForYear(year: String): Int
+
+    /**
+     * Get average photos per day (for stats display)
+     */
+    @Query("""
+        SELECT 
+            CAST(COUNT(*) AS REAL) / 
+            CAST((MAX(capturedAt) - MIN(capturedAt)) / 86400000 AS REAL) as avgPerDay
+        FROM images
+        WHERE (SELECT COUNT(*) FROM images) > 0
+    """)
+    suspend fun getAveragePhotosPerDay(): Float?
 }
+
+/**
+ * Data class for date range result
+ */
+data class PhotoDateRange(
+    val earliest: Long,
+    val latest: Long
+)

app/src/main/java/com/placeholder/sherpai2/data/local/dao/ImageTagDao.kt

@@ -9,6 +9,15 @@ import com.placeholder.sherpai2.data.local.entity.ImageTagEntity
 import com.placeholder.sherpai2.data.local.entity.TagEntity
 import kotlinx.coroutines.flow.Flow
 
+/**
+ * Data class for burst statistics
+ */
+data class BurstStats(
+    val totalBurstPhotos: Int,
+    val estimatedBurstGroups: Int,
+    val burstRepresentatives: Int
+)
+
 @Dao
 interface ImageTagDao {
 
@@ -50,4 +59,84 @@ interface ImageTagDao {
      */
     @Insert(onConflict = OnConflictStrategy.IGNORE)
     suspend fun insert(imageTag: ImageTagEntity): Long
+
+    // ==========================================
+    // BURST STATISTICS - ADDED FOR STATS SECTION
+    // ==========================================
+
+    /**
+     * Get comprehensive burst statistics
+     * Returns total burst photos, estimated groups, and representative count
+     */
+    @Query("""
+        SELECT 
+            (SELECT COUNT(DISTINCT it.imageId) 
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst') as totalBurstPhotos,
+            (SELECT COUNT(DISTINCT it.imageId) / 3
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst') as estimatedBurstGroups,
+            (SELECT COUNT(DISTINCT it.imageId)
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst_representative') as burstRepresentatives
+    """)
+    suspend fun getBurstStats(): BurstStats?
+
+    /**
+     * Get burst statistics (Flow version for reactive UI)
+     */
+    @Query("""
+        SELECT 
+            (SELECT COUNT(DISTINCT it.imageId) 
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst') as totalBurstPhotos,
+            (SELECT COUNT(DISTINCT it.imageId) / 3
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst') as estimatedBurstGroups,
+            (SELECT COUNT(DISTINCT it.imageId)
+             FROM image_tags it 
+             INNER JOIN tags t ON it.tagId = t.tagId 
+             WHERE t.value = 'burst_representative') as burstRepresentatives
+    """)
+    fun getBurstStatsFlow(): Flow<BurstStats?>
+
+    /**
+     * Get count of burst photos
+     */
+    @Query("""
+        SELECT COUNT(DISTINCT it.imageId)
+        FROM image_tags it
+        INNER JOIN tags t ON it.tagId = t.tagId
+        WHERE t.value = 'burst'
+    """)
+    suspend fun getBurstPhotoCount(): Int
+
+    /**
+     * Get count of burst representative photos
+     * (photos marked as the best in each burst sequence)
+     */
+    @Query("""
+        SELECT COUNT(DISTINCT it.imageId)
+        FROM image_tags it
+        INNER JOIN tags t ON it.tagId = t.tagId
+        WHERE t.value = 'burst_representative'
+    """)
+    suspend fun getBurstRepresentativeCount(): Int
+
+    /**
+     * Get estimated number of burst groups
+     * Assumes average of 3 photos per burst
+     */
+    @Query("""
+        SELECT COUNT(DISTINCT it.imageId) / 3
+        FROM image_tags it
+        INNER JOIN tags t ON it.tagId = t.tagId
+        WHERE t.value = 'burst'
+    """)
+    suspend fun getEstimatedBurstGroupCount(): Int
 }

app/src/main/java/com/placeholder/sherpai2/data/local/dao/TagDao.kt

@@ -9,6 +9,16 @@ import com.placeholder.sherpai2.data.local.entity.TagEntity
 import com.placeholder.sherpai2.data.local.entity.TagWithUsage
 import kotlinx.coroutines.flow.Flow
 
+/**
+ * Data class for tag statistics
+ */
+data class TagStat(
+    val tagValue: String,
+    val tagType: String,
+    val imageCount: Int,
+    val tagId: String
+)
+
 /**
  * TagDao - Tag management with face recognition integration
  *
@@ -218,4 +228,70 @@ interface TagDao {
         LIMIT :limit
     """)
     suspend fun searchTagsWithUsage(query: String, limit: Int): List<TagWithUsage>
+
+    // ==========================================
+    // STATISTICS QUERIES - ADDED FOR STATS SECTION
+    // ==========================================
+
+    /**
+     * Get system tag statistics (for utilities stats display)
+     * Returns tag value, type, and count of tagged images
+     */
+    @Query("""
+        SELECT 
+            t.value as tagValue,
+            t.type as tagType,
+            COUNT(DISTINCT it.imageId) as imageCount,
+            t.tagId as tagId
+        FROM tags t
+        INNER JOIN image_tags it ON t.tagId = it.tagId
+        WHERE t.type = 'SYSTEM'
+        GROUP BY t.tagId
+        ORDER BY imageCount DESC
+    """)
+    suspend fun getSystemTagStats(): List<TagStat>
+
+    /**
+     * Get system tag statistics (Flow version for reactive UI)
+     */
+    @Query("""
+        SELECT 
+            t.value as tagValue,
+            t.type as tagType,
+            COUNT(DISTINCT it.imageId) as imageCount,
+            t.tagId as tagId
+        FROM tags t
+        INNER JOIN image_tags it ON t.tagId = it.tagId
+        WHERE t.type = 'SYSTEM'
+        GROUP BY t.tagId
+        ORDER BY imageCount DESC
+    """)
+    fun getSystemTagStatsFlow(): Flow<List<TagStat>>
+
+    /**
+     * Get count of photos with a specific system tag
+     */
+    @Query("""
+        SELECT COUNT(DISTINCT it.imageId)
+        FROM image_tags it
+        INNER JOIN tags t ON it.tagId = t.tagId
+        WHERE t.value = :tagValue AND t.type = 'SYSTEM'
+    """)
+    suspend fun getSystemTagCount(tagValue: String): Int
+
+    /**
+     * Get all tag types with counts
+     * Shows breakdown of SYSTEM vs USER vs GENERIC tags
+     */
+    @Query("""
+        SELECT 
+            t.type as tagValue,
+            t.type as tagType,
+            COUNT(DISTINCT t.tagId) as imageCount,
+            '' as tagId
+        FROM tags t
+        GROUP BY t.type
+        ORDER BY imageCount DESC
+    """)
+    suspend fun getTagTypeBreakdown(): List<TagStat>
 }

app/src/main/java/com/placeholder/sherpai2/data/local/model/ImageWithEverything.kt

@@ -1,23 +1,46 @@
 package com.placeholder.sherpai2.data.local.model
 
 import androidx.room.Embedded
+import androidx.room.Junction
 import androidx.room.Relation
 import com.placeholder.sherpai2.data.local.entity.*
 
+/**
+ * ImageWithEverything - Fully hydrated image with ALL relationships
+ *
+ * Room loads this in ONE query using @Transaction!
+ * NO N+1 problem - all tags and face tags loaded together
+ *
+ * Usage:
+ * - ImageAggregateDao.observeAllImagesWithEverything()
+ * - Search, Explore, Albums
+ */
 data class ImageWithEverything(
-
     @Embedded
     val image: ImageEntity,
 
+    /**
+     * Tags for this image (via image_tags join table)
+     * Room automatically joins through ImageTagEntity
+     */
     @Relation(
         parentColumn = "imageId",
-        entityColumn = "imageId"
+        entityColumn = "tagId",
+        associateBy = Junction(
+            value = ImageTagEntity::class,
+            parentColumn = "imageId",
+            entityColumn = "tagId"
         )
-    val tags: List<ImageTagEntity>,
+    )
+    val tags: List<TagEntity>,
 
+    /**
+     * Face tags for this image
+     * Room automatically loads all PhotoFaceTagEntity for this imageId
+     */
     @Relation(
         parentColumn = "imageId",
         entityColumn = "imageId"
     )
-    val events: List<ImageEventEntity>
+    val faceTags: List<PhotoFaceTagEntity>
 )

app/src/main/java/com/placeholder/sherpai2/ui/album/Albumviewmodel.kt

@@ -12,7 +12,6 @@ import com.placeholder.sherpai2.data.local.entity.PersonEntity
 import com.placeholder.sherpai2.data.local.entity.PhotoFaceTagEntity
 import com.placeholder.sherpai2.data.repository.FaceRecognitionRepository
 import com.placeholder.sherpai2.ui.search.DateRange
-import com.placeholder.sherpai2.ui.search.DisplayMode
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.*
 import kotlinx.coroutines.launch
@@ -25,8 +24,8 @@ import javax.inject.Inject
  * Features:
  * - Search within album
  * - Date filtering
- * - Simple/Verbose toggle
  * - Album stats
+ * - Export functionality
  */
 @HiltViewModel
 class AlbumViewModel @Inject constructor(
@@ -54,10 +53,6 @@ class AlbumViewModel @Inject constructor(
     private val _dateRange = MutableStateFlow(DateRange.ALL_TIME)
     val dateRange: StateFlow<DateRange> = _dateRange.asStateFlow()
 
-    // Display mode
-    private val _displayMode = MutableStateFlow(DisplayMode.SIMPLE)
-    val displayMode: StateFlow<DisplayMode> = _displayMode.asStateFlow()
-
     init {
         loadAlbumData()
     }
@@ -93,7 +88,7 @@ class AlbumViewModel @Inject constructor(
         combine(
             _searchQuery,
             _dateRange
-        ) { query, dateRange ->
+        ) { query: String, dateRange: DateRange ->
             Pair(query, dateRange)
         }.collectLatest { (query, dateRange) ->
             val imageIds = imageTagDao.findImagesByTag(tag.tagId, 0.5f)
@@ -119,7 +114,7 @@ class AlbumViewModel @Inject constructor(
                 .distinctBy { it.id }
 
             _uiState.value = AlbumUiState.Success(
-                albumName = tag.value.replace("_", " ").capitalize(),
+                albumName = tag.value.replace("_", " ").replaceFirstChar { it.uppercase() },
                 albumType = "Tag",
                 photos = imagesWithFaces,
                 personCount = uniquePersons.size,
@@ -138,7 +133,7 @@ class AlbumViewModel @Inject constructor(
         combine(
             _searchQuery,
             _dateRange
-        ) { query, dateRange ->
+        ) { query: String, dateRange: DateRange ->
             Pair(query, dateRange)
         }.collectLatest { (query, dateRange) ->
             val images = faceRecognitionRepository.getImagesForPerson(albumId)
@@ -184,7 +179,7 @@ class AlbumViewModel @Inject constructor(
         combine(
             _searchQuery,
             _dateRange
-        ) { query, _ ->
+        ) { query: String, _: DateRange ->
             query
         }.collectLatest { query ->
             val images = imageDao.getImagesInRange(startTime, endTime)
@@ -224,13 +219,6 @@ class AlbumViewModel @Inject constructor(
         _dateRange.value = range
     }
 
-    fun toggleDisplayMode() {
-        _displayMode.value = when (_displayMode.value) {
-            DisplayMode.SIMPLE -> DisplayMode.VERBOSE
-            DisplayMode.VERBOSE -> DisplayMode.SIMPLE
-        }
-    }
-
     private fun isInDateRange(timestamp: Long, range: DateRange): Boolean {
         return when (range) {
             DateRange.ALL_TIME -> true
@@ -311,10 +299,6 @@ class AlbumViewModel @Inject constructor(
             set(Calendar.MILLISECOND, 0)
         }.timeInMillis
     }
-
-    private fun String.capitalize(): String {
-        return this.replaceFirstChar { it.uppercase() }
-    }
 }
 
 sealed class AlbumUiState {

app/src/main/java/com/placeholder/sherpai2/ui/album/Albumviewscreen.kt

@@ -1,10 +1,9 @@
 package com.placeholder.sherpai2.ui.album
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.grid.*
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
@@ -12,25 +11,24 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import coil.compose.AsyncImage
 import com.placeholder.sherpai2.ui.search.DateRange
-import com.placeholder.sherpai2.ui.search.DisplayMode
-import com.placeholder.sherpai2.ui.search.components.ImageGridItem
 
 /**
- * AlbumViewScreen - Beautiful album detail view
+ * AlbumViewScreen - CLEAN VERSION with Export
  *
- * Features:
+ * REMOVED:
- * - Album stats
+ * - DisplayMode toggle
- * - Search within album
+ * - Verbose person tags
- * - Date filtering
+ *
- * - Simple/Verbose toggle
+ * ADDED:
- * - Clean person display
+ * - Export menu (Folder, Zip, Collage)
+ * - Clean simple layout
  */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -42,7 +40,8 @@ fun AlbumViewScreen(
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val searchQuery by viewModel.searchQuery.collectAsStateWithLifecycle()
     val dateRange by viewModel.dateRange.collectAsStateWithLifecycle()
-    val displayMode by viewModel.displayMode.collectAsStateWithLifecycle()
+
+    var showExportMenu by remember { mutableStateOf(false) }
 
     Scaffold(
         topBar = {
@@ -74,15 +73,9 @@ fun AlbumViewScreen(
                     }
                 },
                 actions = {
-                    IconButton(onClick = { viewModel.toggleDisplayMode() }) {
+                    // Export button
-                        Icon(
+                    IconButton(onClick = { showExportMenu = true }) {
-                            imageVector = if (displayMode == DisplayMode.SIMPLE) {
+                        Icon(Icons.Default.FileDownload, "Export")
-                                Icons.Default.ViewList
-                            } else {
-                                Icons.Default.ViewModule
-                            },
-                            contentDescription = "Toggle view"
-                        )
                     }
                 }
             )
@@ -128,7 +121,6 @@ fun AlbumViewScreen(
                     state = state,
                     searchQuery = searchQuery,
                     dateRange = dateRange,
-                    displayMode = displayMode,
                     onSearchChange = { viewModel.setSearchQuery(it) },
                     onDateRangeChange = { viewModel.setDateRange(it) },
                     onImageClick = onImageClick,
@@ -137,6 +129,33 @@ fun AlbumViewScreen(
             }
         }
     }
+
+    // Export menu dialog
+    if (showExportMenu) {
+        ExportDialog(
+            albumName = when (val state = uiState) {
+                is AlbumUiState.Success -> state.albumName
+                else -> "Album"
+            },
+            photoCount = when (val state = uiState) {
+                is AlbumUiState.Success -> state.photos.size
+                else -> 0
+            },
+            onDismiss = { showExportMenu = false },
+            onExportToFolder = {
+                // TODO: Implement folder export
+                showExportMenu = false
+            },
+            onExportToZip = {
+                // TODO: Implement zip export
+                showExportMenu = false
+            },
+            onExportToCollage = {
+                // TODO: Implement collage export
+                showExportMenu = false
+            }
+        )
+    }
 }
 
 @Composable
@@ -144,7 +163,6 @@ private fun AlbumContent(
     state: AlbumUiState.Success,
     searchQuery: String,
     dateRange: DateRange,
-    displayMode: DisplayMode,
     onSearchChange: (String) -> Unit,
     onDateRangeChange: (DateRange) -> Unit,
     onImageClick: (String) -> Unit,
@@ -207,7 +225,8 @@ private fun AlbumContent(
                 .padding(horizontal = 16.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp)
         ) {
-            items(DateRange.entries) { range ->
+            items(DateRange.entries.size) { index ->
+                val range = DateRange.entries[index]
                 val isActive = dateRange == range
                 FilterChip(
                     selected = isActive,
@@ -245,7 +264,6 @@ private fun AlbumContent(
                 ) { photo ->
                     PhotoCard(
                         photo = photo,
-                        displayMode = displayMode,
                         onImageClick = onImageClick
                     )
                 }
@@ -255,7 +273,11 @@ private fun AlbumContent(
 }
 
 @Composable
-private fun StatItem(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, value: String) {
+private fun StatItem(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    label: String,
+    value: String
+) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(4.dp)
@@ -279,80 +301,181 @@ private fun StatItem(icon: androidx.compose.ui.graphics.vector.ImageVector, labe
     }
 }
 
+/**
+ * PhotoCard - CLEAN VERSION: Simple image + person names
+ */
 @Composable
 private fun PhotoCard(
     photo: AlbumPhoto,
-    displayMode: DisplayMode,
     onImageClick: (String) -> Unit
 ) {
     Card(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .aspectRatio(1f)
+            .clickable { onImageClick(photo.image.imageUri) },
         shape = RoundedCornerShape(12.dp)
     ) {
-        Column {
+        Box {
-            ImageGridItem(
+            // Image
-                image = photo.image,
+            AsyncImage(
-                onClick = { onImageClick(photo.image.imageUri) }
+                model = photo.image.imageUri,
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize(),
+                contentScale = androidx.compose.ui.layout.ContentScale.Crop
             )
 
+            // Person names overlay (if any)
             if (photo.persons.isNotEmpty()) {
-                when (displayMode) {
-                    DisplayMode.SIMPLE -> {
                 Surface(
-                            color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f),
+                    color = MaterialTheme.colorScheme.surface.copy(alpha = 0.9f),
-                            modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .fillMaxWidth()
                 ) {
                     Text(
-                                text = photo.persons.take(3).joinToString(", ") { it.name },
+                        text = photo.persons.take(2).joinToString(", ") { it.name },
                         style = MaterialTheme.typography.bodySmall,
                         modifier = Modifier.padding(8.dp),
                         maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
+                        overflow = TextOverflow.Ellipsis,
+                        fontWeight = FontWeight.Medium
                     )
                 }
             }
-                    DisplayMode.VERBOSE -> {
+        }
-                        Surface(
+    }
-                            color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f),
+}
-                            modifier = Modifier.fillMaxWidth()
+
+/**
+ * Export Dialog
+ */
+@Composable
+private fun ExportDialog(
+    albumName: String,
+    photoCount: Int,
+    onDismiss: () -> Unit,
+    onExportToFolder: () -> Unit,
+    onExportToZip: () -> Unit,
+    onExportToCollage: () -> Unit
 ) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        icon = { Icon(Icons.Default.FileDownload, null) },
+        title = { Text("Export Album") },
+        text = {
             Column(
-                                modifier = Modifier.padding(8.dp),
+                modifier = Modifier.fillMaxWidth(),
-                                verticalArrangement = Arrangement.spacedBy(4.dp)
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                Text(
+                    "$photoCount photos from \"$albumName\"",
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+
+                // Export to Folder
+                ExportOption(
+                    icon = Icons.Default.Folder,
+                    title = "Export to Folder",
+                    description = "Save all photos to a folder",
+                    onClick = onExportToFolder
+                )
+
+                // Export to Zip
+                ExportOption(
+                    icon = Icons.Default.FolderZip,
+                    title = "Export as ZIP",
+                    description = "Create a compressed archive",
+                    onClick = onExportToZip
+                )
+
+                // Export to Collage (placeholder)
+                ExportOption(
+                    icon = Icons.Default.GridView,
+                    title = "Create Collage",
+                    description = "Coming soon!",
+                    onClick = onExportToCollage,
+                    enabled = false
+                )
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    )
+}
+
+@Composable
+private fun ExportOption(
+    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    title: String,
+    description: String,
+    onClick: () -> Unit,
+    enabled: Boolean = true
+) {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(enabled = enabled, onClick = onClick),
+        shape = RoundedCornerShape(12.dp),
+        color = if (enabled) {
+            MaterialTheme.colorScheme.surfaceVariant
+        } else {
+            MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
+        }
     ) {
-                                photo.persons.take(3).forEachIndexed { index, person ->
         Row(
-                                        horizontalArrangement = Arrangement.spacedBy(6.dp),
+            modifier = Modifier.padding(16.dp),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
+            Surface(
+                shape = RoundedCornerShape(8.dp),
+                color = MaterialTheme.colorScheme.primary.copy(
+                    alpha = if (enabled) 1f else 0.5f
+                ),
+                modifier = Modifier.size(40.dp)
+            ) {
+                Box(contentAlignment = Alignment.Center) {
                     Icon(
-                                            Icons.Default.Face,
+                        icon,
-                                            null,
+                        contentDescription = null,
-                                            Modifier.size(14.dp),
+                        modifier = Modifier.size(24.dp),
-                                            MaterialTheme.colorScheme.primary
+                        tint = MaterialTheme.colorScheme.onPrimary
+                    )
+                }
+            }
+
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    title,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold,
+                    color = if (enabled) {
+                        MaterialTheme.colorScheme.onSurface
+                    } else {
+                        MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
+                    }
                 )
                 Text(
-                                            text = person.name,
+                    description,
                     style = MaterialTheme.typography.bodySmall,
-                                            modifier = Modifier.weight(1f),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(
-                                            maxLines = 1,
+                        alpha = if (enabled) 1f else 0.5f
-                                            overflow = TextOverflow.Ellipsis
                     )
-                                        if (index < photo.faceTags.size) {
+                )
-                                            val confidence = (photo.faceTags[index].confidence * 100).toInt()
+            }
-                                            Text(
+
-                                                text = "$confidence%",
+            if (enabled) {
-                                                style = MaterialTheme.typography.labelSmall,
+                Icon(
-                                                color = MaterialTheme.colorScheme.primary
+                    Icons.Default.ChevronRight,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
         }
     }
 }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

app/src/main/java/com/placeholder/sherpai2/ui/explore/Explorescreen.kt

@@ -23,57 +23,28 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 
 /**
- * ExploreScreen - REDESIGNED
+ * CLEANED ExploreScreen - No gradient header banner
+ *
+ * Removed:
+ * - Gradient header box (lines 46-75) that created banner effect
+ * - "Explore" title (MainScreen shows it)
  *
  * Features:
- * - Rectangular album cards (more compact)
+ * - Rectangular album cards (compact)
  * - Stories section (recent highlights)
  * - Clickable navigation to AlbumViewScreen
  * - Beautiful gradients and icons
+ * - Mobile-friendly scrolling
  */
 @Composable
 fun ExploreScreen(
     onAlbumClick: (albumType: String, albumId: String) -> Unit,
-    viewModel: ExploreViewModel = hiltViewModel()
+    viewModel: ExploreViewModel = hiltViewModel(),
+    modifier: Modifier = Modifier
 ) {
     val uiState by viewModel.uiState.collectAsState()
 
-    Column(
+    Box(modifier = modifier.fillMaxSize()) {
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colorScheme.surface)
-    ) {
-        // Header with gradient
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .background(
-                    Brush.verticalGradient(
-                        colors = listOf(
-                            MaterialTheme.colorScheme.primaryContainer,
-                            MaterialTheme.colorScheme.surface
-                        )
-                    )
-                )
-        ) {
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(16.dp)
-            ) {
-                Text(
-                    text = "Explore",
-                    style = MaterialTheme.typography.headlineLarge,
-                    fontWeight = FontWeight.Bold
-                )
-                Text(
-                    text = "Your photo collection organized",
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
-        }
-
         when (val state = uiState) {
             is ExploreViewModel.ExploreUiState.Loading -> {
                 Box(
@@ -83,12 +54,18 @@ fun ExploreScreen(
                     CircularProgressIndicator()
                 }
             }
+
             is ExploreViewModel.ExploreUiState.Success -> {
+                if (state.smartAlbums.isEmpty()) {
+                    EmptyExploreView()
+                } else {
                     ExploreContent(
                         smartAlbums = state.smartAlbums,
                         onAlbumClick = onAlbumClick
                     )
                 }
+            }
+
             is ExploreViewModel.ExploreUiState.Error -> {
                 Box(
                     modifier = Modifier.fillMaxSize(),
@@ -96,17 +73,25 @@ fun ExploreScreen(
                 ) {
                     Column(
                         horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalArrangement = Arrangement.spacedBy(8.dp)
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                        modifier = Modifier.padding(32.dp)
                     ) {
                         Icon(
                             Icons.Default.Error,
                             contentDescription = null,
-                            modifier = Modifier.size(48.dp),
+                            modifier = Modifier.size(64.dp),
                             tint = MaterialTheme.colorScheme.error
                         )
+                        Text(
+                            text = "Error Loading Albums",
+                            style = MaterialTheme.typography.titleLarge,
+                            fontWeight = FontWeight.Bold
+                        )
                         Text(
                             text = state.message,
-                            color = MaterialTheme.colorScheme.error
+                            style = MaterialTheme.typography.bodyMedium,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            textAlign = androidx.compose.ui.text.style.TextAlign.Center
                         )
                     }
                 }
@@ -115,6 +100,9 @@ fun ExploreScreen(
     }
 }
 
+/**
+ * Main content - scrollable album sections
+ */
 @Composable
 private fun ExploreContent(
     smartAlbums: List<SmartAlbum>,
@@ -127,11 +115,14 @@ private fun ExploreContent(
     ) {
         // Stories Section (Recent Highlights)
         item {
+            val storyAlbums = smartAlbums.filter { it.imageCount > 0 }.take(10)
+            if (storyAlbums.isNotEmpty()) {
                 StoriesSection(
-                albums = smartAlbums.filter { it.imageCount > 0 }.take(10),
+                    albums = storyAlbums,
                     onAlbumClick = onAlbumClick
                 )
             }
+        }
 
         // Time-based Albums
         val timeAlbums = smartAlbums.filterIsInstance<SmartAlbum.TimeRange>()
@@ -225,7 +216,7 @@ private fun ExploreContent(
 }
 
 /**
- * Stories section - Instagram-style circular highlights
+ * Stories section - circular album previews
  */
 @Composable
 private fun StoriesSection(
@@ -294,7 +285,8 @@ private fun StoryCircle(
             style = MaterialTheme.typography.labelSmall,
             maxLines = 2,
             modifier = Modifier.width(80.dp),
-            fontWeight = FontWeight.Medium
+            fontWeight = FontWeight.Medium,
+            textAlign = androidx.compose.ui.text.style.TextAlign.Center
         )
 
         Text(
@@ -342,7 +334,7 @@ private fun AlbumSection(
 }
 
 /**
- * Rectangular album card - more compact than square
+ * Rectangular album card - compact design
  */
 @Composable
 private fun AlbumCard(
@@ -398,6 +390,44 @@ private fun AlbumCard(
     }
 }
 
+/**
+ * Empty state
+ */
+@Composable
+private fun EmptyExploreView() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(32.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            Icon(
+                Icons.Default.PhotoAlbum,
+                contentDescription = null,
+                modifier = Modifier.size(80.dp),
+                tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+            )
+
+            Text(
+                "No Albums Yet",
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Bold
+            )
+
+            Text(
+                "Add photos to your collection to see smart albums",
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = androidx.compose.ui.text.style.TextAlign.Center
+            )
+        }
+    }
+}
+
 /**
  * Get navigation parameters for album
  */

app/src/main/java/com/placeholder/sherpai2/ui/imagedetail/ImageDetailScreen.kt

@@ -1,86 +1,323 @@
 package com.placeholder.sherpai2.ui.imagedetail
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.navigation.NavController
 import coil.compose.AsyncImage
+import com.placeholder.sherpai2.data.local.entity.TagEntity
 import com.placeholder.sherpai2.ui.imagedetail.viewmodel.ImageDetailViewModel
-
+import net.engawapg.lib.zoomable.rememberZoomState
-
+import net.engawapg.lib.zoomable.zoomable
-
+import java.net.URLEncoder
 
 /**
- * ImageDetailScreen
+ * ImageDetailScreen - COMPLETE with navigation and tags
  *
- * Purpose:
+ * Features:
- *  - Add tags
+ * - Full-screen zoomable image
- *  - Remove tags
+ * - Previous/Next navigation buttons
- *  - Validate write propagation
+ * - Image counter (3/45)
+ * - Tags button (toggle show/hide)
+ * - Shows all tags on photo
  */
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ImageDetailScreen(
     modifier: Modifier = Modifier,
     imageUri: String,
-    onBack: () -> Unit
+    onBack: () -> Unit,
+    navController: NavController? = null,
+    allImageUris: List<String> = emptyList(), // Pass from caller
+    viewModel: ImageDetailViewModel = hiltViewModel() // ✅ FIXED: Use hiltViewModel
 ) {
-    val viewModel: ImageDetailViewModel = androidx.lifecycle.viewmodel.compose.viewModel()
 
     LaunchedEffect(imageUri) {
         viewModel.loadImage(imageUri)
     }
 
     val tags by viewModel.tags.collectAsStateWithLifecycle()
+    var showTags by remember { mutableStateOf(false) }
 
-    var newTag by remember { mutableStateOf("") }
+    // Navigation state
+    val currentIndex = if (allImageUris.isNotEmpty()) allImageUris.indexOf(imageUri) else -1
+    val hasNavigation = allImageUris.isNotEmpty() && currentIndex >= 0
+    val canGoPrevious = hasNavigation && currentIndex > 0
+    val canGoNext = hasNavigation && currentIndex < allImageUris.size - 1
 
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {
+                    if (hasNavigation) {
+                        Text(
+                            "${currentIndex + 1} / ${allImageUris.size}",
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                    } else {
+                        Text("Photo")
+                    }
+                },
+                navigationIcon = {
+                    IconButton(onClick = onBack) {
+                        Icon(Icons.Default.ArrowBack, "Back")
+                    }
+                },
+                actions = {
+                    // Tags toggle button
+                    IconButton(onClick = { showTags = !showTags }) {
+                        Row(
+                            horizontalArrangement = Arrangement.spacedBy(4.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            if (tags.isNotEmpty()) {
+                                Badge(
+                                    containerColor = if (showTags)
+                                        MaterialTheme.colorScheme.primary
+                                    else
+                                        MaterialTheme.colorScheme.surfaceVariant
+                                ) {
+                                    Text(
+                                        tags.size.toString(),
+                                        color = if (showTags)
+                                            MaterialTheme.colorScheme.onPrimary
+                                        else
+                                            MaterialTheme.colorScheme.onSurfaceVariant
+                                    )
+                                }
+                            }
+                            Icon(
+                                if (showTags) Icons.Default.Label else Icons.Default.LocalOffer,
+                                "Show Tags",
+                                tint = if (showTags)
+                                    MaterialTheme.colorScheme.primary
+                                else
+                                    MaterialTheme.colorScheme.onSurfaceVariant
+                            )
+                        }
+                    }
+
+                    // Previous button (only show if has navigation)
+                    if (hasNavigation && navController != null) {
+                        IconButton(
+                            onClick = {
+                                if (canGoPrevious) {
+                                    val prevUri = allImageUris[currentIndex - 1]
+                                    val encoded = URLEncoder.encode(prevUri, "UTF-8")
+                                    navController.navigate("image_detail/$encoded") {
+                                        popUpTo("image_detail/${URLEncoder.encode(imageUri, "UTF-8")}") {
+                                            inclusive = true
+                                        }
+                                    }
+                                }
+                            },
+                            enabled = canGoPrevious
+                        ) {
+                            Icon(Icons.Default.KeyboardArrowLeft, "Previous")
+                        }
+
+                        // Next button (only show if has navigation)
+                        IconButton(
+                            onClick = {
+                                if (canGoNext) {
+                                    val nextUri = allImageUris[currentIndex + 1]
+                                    val encoded = URLEncoder.encode(nextUri, "UTF-8")
+                                    navController.navigate("image_detail/$encoded") {
+                                        popUpTo("image_detail/${URLEncoder.encode(imageUri, "UTF-8")}") {
+                                            inclusive = true
+                                        }
+                                    }
+                                }
+                            },
+                            enabled = canGoNext
+                        ) {
+                            Icon(Icons.Default.KeyboardArrowRight, "Next")
+                        }
+                    }
+                }
+            )
+        }
+    ) { paddingValues ->
         Column(
             modifier = modifier
                 .fillMaxSize()
-            .padding(12.dp)
+                .padding(paddingValues)
         ) {
+            // Zoomable image
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .background(Color.Black)
+            ) {
+                val zoomState = rememberZoomState()
 
                 AsyncImage(
                     model = imageUri,
-            contentDescription = null,
+                    contentDescription = "Photo",
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .zoomable(zoomState),
+                    contentScale = ContentScale.Fit
+                )
+            }
+
+            // Tags panel (slides up when enabled)
+            if (showTags) {
+                Surface(
                     modifier = Modifier
                         .fillMaxWidth()
-                .aspectRatio(1f)
+                        .heightIn(max = 300.dp),
-        )
+                    color = MaterialTheme.colorScheme.surfaceVariant,
-
+                    tonalElevation = 3.dp
-        Spacer(modifier = Modifier.height(12.dp))
-
-        OutlinedTextField(
-            value = newTag,
-            onValueChange = { newTag = it },
-            label = { Text("Add tag") },
-            modifier = Modifier.fillMaxWidth()
-        )
-
-        Button(
-            onClick = {
-                viewModel.addTag(newTag)
-                newTag = ""
-            },
-            modifier = Modifier.padding(top = 8.dp)
                 ) {
-            Text("Add Tag")
+                    LazyColumn(
+                        contentPadding = PaddingValues(16.dp),
+                        verticalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        item {
+                            Text(
+                                "Tags (${tags.size})",
+                                style = MaterialTheme.typography.titleMedium,
+                                fontWeight = FontWeight.Bold
+                            )
                         }
 
-        Spacer(modifier = Modifier.height(16.dp))
+                        if (tags.isEmpty()) {
+                            item {
+                                Text(
+                                    "No tags yet",
+                                    style = MaterialTheme.typography.bodyMedium,
+                                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                                )
+                            }
+                        }
 
-        tags.forEach { tag ->
+                        items(tags, key = { it.tagId }) { tag ->
+                            TagCard(
+                                tag = tag,
+                                onRemove = { viewModel.removeTag(tag) }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TagCard(
+    tag: TagEntity,
+    onRemove: () -> Unit
+) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        colors = CardDefaults.cardColors(
+            containerColor = when (tag.type) {
+                "PERSON" -> MaterialTheme.colorScheme.primaryContainer
+                "SYSTEM" -> MaterialTheme.colorScheme.secondaryContainer
+                else -> MaterialTheme.colorScheme.tertiaryContainer
+            }
+        ),
+        shape = RoundedCornerShape(8.dp)
+    ) {
         Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
-                modifier = Modifier.fillMaxWidth()
+            verticalAlignment = Alignment.CenterVertically
         ) {
-                Text(tag.value)
+            Column(modifier = Modifier.weight(1f)) {
-                TextButton(onClick = { viewModel.removeTag(tag) }) {
+                Row(
-                    Text("Remove")
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Icon(
+                        imageVector = when (tag.type) {
+                            "PERSON" -> Icons.Default.Face
+                            "SYSTEM" -> Icons.Default.AutoAwesome
+                            else -> Icons.Default.Label
+                        },
+                        contentDescription = null,
+                        modifier = Modifier.size(20.dp),
+                        tint = when (tag.type) {
+                            "PERSON" -> MaterialTheme.colorScheme.primary
+                            "SYSTEM" -> MaterialTheme.colorScheme.secondary
+                            else -> MaterialTheme.colorScheme.tertiary
+                        }
+                    )
+                    Text(
+                        text = tag.getDisplayValue(), // Uses TagEntity's built-in method
+                        style = MaterialTheme.typography.bodyLarge,
+                        fontWeight = FontWeight.SemiBold
+                    )
+                }
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = tag.type.lowercase().replaceFirstChar { it.uppercase() },
+                        style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                    Text(
+                        text = "•",
+                        style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                    Text(
+                        text = formatTimestamp(tag.createdAt),
+                        style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                }
+            }
+
+            // Remove button (only for user-created tags)
+            if (tag.isUserTag()) {
+                IconButton(
+                    onClick = onRemove,
+                    colors = IconButtonDefaults.iconButtonColors(
+                        contentColor = MaterialTheme.colorScheme.error
+                    )
+                ) {
+                    Icon(Icons.Default.Delete, "Remove tag")
                 }
             }
         }
     }
 }
+
+/**
+ * Format timestamp to relative time
+ */
+private fun formatTimestamp(timestamp: Long): String {
+    val now = System.currentTimeMillis()
+    val diff = now - timestamp
+
+    return when {
+        diff < 60_000 -> "Just now"
+        diff < 3600_000 -> "${diff / 60_000}m ago"
+        diff < 86400_000 -> "${diff / 3600_000}h ago"
+        diff < 604800_000 -> "${diff / 86400_000}d ago"
+        else -> "${diff / 604800_000}w ago"
+    }
+}

app/src/main/java/com/placeholder/sherpai2/ui/modelinventory/Personinventoryscreen.kt

@@ -14,24 +14,23 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import java.text.SimpleDateFormat
-import java.util.*
 
 /**
- * PersonInventoryScreen - Manage trained face models
+ * CLEANED PersonInventoryScreen - No duplicate header
  *
- * Features:
+ * Removed:
- * - List all trained persons
+ * - Scaffold wrapper
- * - View stats
+ * - TopAppBar (was creating banner)
- * - DELETE models
+ * - "Trained People" title (MainScreen shows it)
- * - SCAN LIBRARY to find person in all photos (NEW!)
+ *
+ * FIXED to match ViewModel exactly:
+ * - Uses InventoryUiState.Success with persons
+ * - Uses stats.taggedPhotoCount (not photoCount)
+ * - Passes both personId AND faceModelId to methods
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun PersonInventoryScreen(
     modifier: Modifier = Modifier,
@@ -44,316 +43,171 @@ fun PersonInventoryScreen(
     var personToDelete by remember { mutableStateOf<PersonInventoryViewModel.PersonWithStats?>(null) }
     var personToScan by remember { mutableStateOf<PersonInventoryViewModel.PersonWithStats?>(null) }
 
-    Scaffold(
+    LazyColumn(
-        topBar = {
+        modifier = modifier.fillMaxSize(),
-            TopAppBar(
+        contentPadding = PaddingValues(16.dp),
-                title = { Text("Trained People") },
+        verticalArrangement = Arrangement.spacedBy(12.dp)
-                colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.primaryContainer
-                ),
-                actions = {
-                    IconButton(onClick = { viewModel.loadPersons() }) {
-                        Icon(Icons.Default.Refresh, contentDescription = "Refresh")
-                    }
-                }
-            )
-        }
-    ) { paddingValues ->
-        Box(
-            modifier = modifier
-                .fillMaxSize()
-                .padding(paddingValues)
     ) {
         when (val state = uiState) {
             is PersonInventoryViewModel.InventoryUiState.Loading -> {
-                    LoadingView()
+                item {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(32.dp),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                }
             }
 
             is PersonInventoryViewModel.InventoryUiState.Success -> {
-                    if (state.persons.isEmpty()) {
+                // Summary card
-                        EmptyView()
+                item {
-                    } else {
+                    SummaryCard(
-                        PersonListView(
+                        peopleCount = state.persons.size,
-                            persons = state.persons,
+                        totalPhotos = state.persons.sumOf { it.stats.taggedPhotoCount }
-                            onDeleteClick = { personToDelete = it },
-                            onScanClick = { personToScan = it },
-                            onViewPhotos = { onViewPersonPhotos(it.person.id) },
-                            scanningState = scanningState
                     )
                 }
+
+                // Scanning progress
+                val currentScanningState = scanningState
+                if (currentScanningState is PersonInventoryViewModel.ScanningState.Scanning) {
+                    item {
+                        ScanningProgressCard(currentScanningState)
+                    }
+                }
+
+                // Person list
+                if (state.persons.isEmpty()) {
+                    item {
+                        EmptyState()
+                    }
+                } else {
+                    items(state.persons) { person ->
+                        PersonCard(
+                            person = person,
+                            onDelete = { personToDelete = person },
+                            onScan = { personToScan = person },
+                            onViewPhotos = { onViewPersonPhotos(person.person.id) }
+                        )
+                    }
+                }
             }
 
             is PersonInventoryViewModel.InventoryUiState.Error -> {
-                    ErrorView(
+                item {
-                        message = state.message,
+                    ErrorCard(message = state.message)
-                        onRetry = { viewModel.loadPersons() }
-                    )
                 }
             }
-
-            // Scanning overlay
-            if (scanningState is PersonInventoryViewModel.ScanningState.Scanning) {
-                ScanningOverlay(scanningState as PersonInventoryViewModel.ScanningState.Scanning)
-            }
         }
     }
 
-    // Delete confirmation dialog
+    // Delete confirmation
-    personToDelete?.let { personWithStats ->
+    personToDelete?.let { person ->
-        AlertDialog(
+        DeleteDialog(
-            onDismissRequest = { personToDelete = null },
+            person = person,
-            title = { Text("Delete ${personWithStats.person.name}?") },
+            onDismiss = { personToDelete = null },
-            text = {
+            onConfirm = {
-                Text(
+                viewModel.deletePerson(person.person.id, person.stats.faceModelId)
-                    "This will delete the face model and all ${personWithStats.stats.taggedPhotoCount} " +
-                            "face tags. Your photos will NOT be deleted."
-                )
-            },
-            confirmButton = {
-                TextButton(
-                    onClick = {
-                        viewModel.deletePerson(
-                            personWithStats.person.id,
-                            personWithStats.stats.faceModelId
-                        )
                 personToDelete = null
-                    },
-                    colors = ButtonDefaults.textButtonColors(
-                        contentColor = MaterialTheme.colorScheme.error
-                    )
-                ) {
-                    Text("Delete")
-                }
-            },
-            dismissButton = {
-                TextButton(onClick = { personToDelete = null }) {
-                    Text("Cancel")
-                }
             }
         )
     }
 
-    // Scan library confirmation dialog
+    // Scan confirmation
-    personToScan?.let { personWithStats ->
+    personToScan?.let { person ->
-        AlertDialog(
+        ScanDialog(
-            onDismissRequest = { personToScan = null },
+            person = person,
-            icon = { Icon(Icons.Default.Search, contentDescription = null) },
+            onDismiss = { personToScan = null },
-            title = { Text("Scan Library for ${personWithStats.person.name}?") },
+            onConfirm = {
-            text = {
+                viewModel.scanLibraryForPerson(person.person.id, person.stats.faceModelId)
-                Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
-                    Text(
-                        "This will scan your entire photo library and automatically tag " +
-                                "all photos containing ${personWithStats.person.name}."
-                    )
-                    Text(
-                        "Currently tagged: ${personWithStats.stats.taggedPhotoCount} photos",
-                        style = MaterialTheme.typography.bodySmall,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant
-                    )
-                }
-            },
-            confirmButton = {
-                Button(
-                    onClick = {
-                        viewModel.scanLibraryForPerson(
-                            personWithStats.person.id,
-                            personWithStats.stats.faceModelId
-                        )
                 personToScan = null
             }
-                ) {
-                    Icon(Icons.Default.Search, contentDescription = null)
-                    Spacer(modifier = Modifier.width(8.dp))
-                    Text("Start Scan")
-                }
-            },
-            dismissButton = {
-                TextButton(onClick = { personToScan = null }) {
-                    Text("Cancel")
-                }
-            }
         )
     }
 }
 
+/**
+ * Summary card with stats
+ */
 @Composable
-private fun LoadingView() {
+private fun SummaryCard(peopleCount: Int, totalPhotos: Int) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            CircularProgressIndicator()
-            Text(
-                text = "Loading trained models...",
-                style = MaterialTheme.typography.bodyMedium
-            )
-        }
-    }
-}
-
-@Composable
-private fun EmptyView() {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp),
-            modifier = Modifier.padding(32.dp)
-        ) {
-            Icon(
-                Icons.Default.Face,
-                contentDescription = null,
-                modifier = Modifier.size(64.dp),
-                tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
-            )
-            Text(
-                text = "No trained people yet",
-                style = MaterialTheme.typography.titleMedium,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = "Train a person using 10+ photos to start recognizing faces",
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurfaceVariant
-            )
-        }
-    }
-}
-
-@Composable
-private fun ErrorView(
-    message: String,
-    onRetry: () -> Unit
-) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp),
-            modifier = Modifier.padding(32.dp)
-        ) {
-            Icon(
-                Icons.Default.Warning,
-                contentDescription = null,
-                modifier = Modifier.size(64.dp),
-                tint = MaterialTheme.colorScheme.error
-            )
-            Text(
-                text = "Error",
-                style = MaterialTheme.typography.titleMedium,
-                fontWeight = FontWeight.Bold
-            )
-            Text(
-                text = message,
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurfaceVariant
-            )
-            Button(onClick = onRetry) {
-                Icon(Icons.Default.Refresh, contentDescription = null)
-                Spacer(modifier = Modifier.width(8.dp))
-                Text("Retry")
-            }
-        }
-    }
-}
-
-@Composable
-private fun PersonListView(
-    persons: List<PersonInventoryViewModel.PersonWithStats>,
-    onDeleteClick: (PersonInventoryViewModel.PersonWithStats) -> Unit,
-    onScanClick: (PersonInventoryViewModel.PersonWithStats) -> Unit,
-    onViewPhotos: (PersonInventoryViewModel.PersonWithStats) -> Unit,
-    scanningState: PersonInventoryViewModel.ScanningState
-) {
-    LazyColumn(
-        contentPadding = PaddingValues(16.dp),
-        verticalArrangement = Arrangement.spacedBy(12.dp)
-    ) {
-        // Summary card
-        item {
-            SummaryCard(totalPersons = persons.size)
-            Spacer(modifier = Modifier.height(8.dp))
-        }
-
-        // Person cards
-        items(persons) { personWithStats ->
-            PersonCard(
-                personWithStats = personWithStats,
-                onDeleteClick = { onDeleteClick(personWithStats) },
-                onScanClick = { onScanClick(personWithStats) },
-                onViewPhotos = { onViewPhotos(personWithStats) },
-                isScanning = scanningState is PersonInventoryViewModel.ScanningState.Scanning &&
-                        scanningState.personId == personWithStats.person.id
-            )
-        }
-    }
-}
-
-@Composable
-private fun SummaryCard(totalPersons: Int) {
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.primaryContainer
+            containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
         )
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(16.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            horizontalArrangement = Arrangement.SpaceEvenly
-            verticalAlignment = Alignment.CenterVertically
         ) {
-            Icon(
+            StatItem(
-                Icons.Default.Face,
+                icon = Icons.Default.People,
-                contentDescription = null,
+                value = peopleCount.toString(),
-                modifier = Modifier.size(48.dp),
+                label = "People"
-                tint = MaterialTheme.colorScheme.primary
             )
-            Column {
+            VerticalDivider(
-                Text(
+                modifier = Modifier.height(56.dp),
-                    text = "$totalPersons trained ${if (totalPersons == 1) "person" else "people"}",
+                color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)
-                    style = MaterialTheme.typography.titleLarge,
-                    fontWeight = FontWeight.Bold
             )
-                Text(
+            StatItem(
-                    text = "Face recognition models ready",
+                icon = Icons.Default.PhotoLibrary,
-                    style = MaterialTheme.typography.bodyMedium,
+                value = totalPhotos.toString(),
-                    color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.7f)
+                label = "Tagged"
             )
         }
     }
 }
-}
 
 @Composable
-private fun PersonCard(
+private fun StatItem(icon: androidx.compose.ui.graphics.vector.ImageVector, value: String, label: String) {
-    personWithStats: PersonInventoryViewModel.PersonWithStats,
+    Column(
-    onDeleteClick: () -> Unit,
+        horizontalAlignment = Alignment.CenterHorizontally,
-    onScanClick: () -> Unit,
+        verticalArrangement = Arrangement.spacedBy(4.dp)
-    onViewPhotos: () -> Unit,
-    isScanning: Boolean
     ) {
-    val stats = personWithStats.stats
+        Icon(
+            icon,
+            contentDescription = null,
+            modifier = Modifier.size(28.dp),
+            tint = MaterialTheme.colorScheme.primary
+        )
+        Text(
+            value,
+            style = MaterialTheme.typography.headlineMedium,
+            fontWeight = FontWeight.Bold
+        )
+        Text(
+            label,
+            style = MaterialTheme.typography.labelMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+    }
+}
 
+/**
+ * Person card with stats and actions
+ */
+@Composable
+private fun PersonCard(
+    person: PersonInventoryViewModel.PersonWithStats,
+    onDelete: () -> Unit,
+    onScan: () -> Unit,
+    onViewPhotos: () -> Unit
+) {
     Card(
         modifier = Modifier.fillMaxWidth(),
         elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
     ) {
         Column(
-            modifier = Modifier
+            modifier = Modifier.padding(16.dp),
-                .fillMaxWidth()
+            verticalArrangement = Arrangement.spacedBy(12.dp)
-                .padding(16.dp)
         ) {
-            // Header: Name and actions
+            // Header row
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.SpaceBetween,
@@ -363,38 +217,39 @@ private fun PersonCard(
                     horizontalArrangement = Arrangement.spacedBy(12.dp),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Box(
+                    // Avatar
-                        modifier = Modifier
+                    Surface(
-                            .size(48.dp)
+                        modifier = Modifier.size(48.dp),
-                            .clip(CircleShape)
+                        shape = CircleShape,
-                            .background(MaterialTheme.colorScheme.primary),
+                        color = MaterialTheme.colorScheme.primaryContainer
-                        contentAlignment = Alignment.Center
                     ) {
-                        Text(
+                        Box(contentAlignment = Alignment.Center) {
-                            text = personWithStats.person.name.take(1).uppercase(),
+                            Icon(
-                            style = MaterialTheme.typography.titleLarge,
+                                Icons.Default.Person,
-                            fontWeight = FontWeight.Bold,
+                                contentDescription = null,
-                            color = MaterialTheme.colorScheme.onPrimary
+                                modifier = Modifier.size(24.dp),
+                                tint = MaterialTheme.colorScheme.onPrimaryContainer
                             )
                         }
+                    }
 
+                    // Name and stats
                     Column {
                         Text(
-                            text = personWithStats.person.name,
+                            text = person.person.name,
-                            style = MaterialTheme.typography.titleMedium,
+                            style = MaterialTheme.typography.titleLarge,
-                            fontWeight = FontWeight.Bold,
+                            fontWeight = FontWeight.Bold
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis
                         )
                         Text(
-                            text = "ID: ${personWithStats.person.id.take(8)}",
+                            text = "${person.stats.taggedPhotoCount} photos • ${person.stats.trainingImageCount} trained",
                             style = MaterialTheme.typography.bodySmall,
                             color = MaterialTheme.colorScheme.onSurfaceVariant
                         )
                     }
                 }
 
-                IconButton(onClick = onDeleteClick) {
+                // Delete button
+                IconButton(onClick = onDelete) {
                     Icon(
                         Icons.Default.Delete,
                         contentDescription = "Delete",
@@ -403,212 +258,251 @@ private fun PersonCard(
                 }
             }
 
-            Spacer(modifier = Modifier.height(16.dp))
+            // Action buttons
-
-            // Stats grid
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceEvenly
-            ) {
-                StatItem(
-                    icon = Icons.Default.PhotoCamera,
-                    label = "Training",
-                    value = "${stats.trainingImageCount}"
-                )
-                StatItem(
-                    icon = Icons.Default.AccountBox,
-                    label = "Tagged",
-                    value = "${stats.taggedPhotoCount}"
-                )
-                StatItem(
-                    icon = Icons.Default.CheckCircle,
-                    label = "Confidence",
-                    value = "${(stats.averageConfidence * 100).toInt()}%",
-                    valueColor = if (stats.averageConfidence >= 0.8f) {
-                        MaterialTheme.colorScheme.primary
-                    } else if (stats.averageConfidence >= 0.6f) {
-                        MaterialTheme.colorScheme.tertiary
-                    } else {
-                        MaterialTheme.colorScheme.error
-                    }
-                )
-            }
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            // Last detected
-            stats.lastDetectedAt?.let { timestamp ->
-                Surface(
-                    modifier = Modifier.fillMaxWidth(),
-                    color = MaterialTheme.colorScheme.surfaceVariant,
-                    shape = RoundedCornerShape(8.dp)
-                ) {
-                    Row(
-                        modifier = Modifier.padding(12.dp),
-                        horizontalArrangement = Arrangement.spacedBy(8.dp),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Icon(
-                            Icons.Default.DateRange,
-                            contentDescription = null,
-                            modifier = Modifier.size(16.dp),
-                            tint = MaterialTheme.colorScheme.onSurfaceVariant
-                        )
-                        Text(
-                            text = "Last detected: ${formatDate(timestamp)}",
-                            style = MaterialTheme.typography.bodySmall,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant
-                        )
-                    }
-                }
-            }
-
-            Spacer(modifier = Modifier.height(12.dp))
-
-            // Action buttons row
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.spacedBy(8.dp)
             ) {
-                // Scan Library button (PRIMARY ACTION)
+                OutlinedButton(
-                Button(
+                    onClick = onScan,
-                    onClick = onScanClick,
+                    modifier = Modifier.weight(1f)
-                    modifier = Modifier.weight(1f),
-                    enabled = !isScanning,
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = MaterialTheme.colorScheme.primary
-                    )
                 ) {
-                    if (isScanning) {
-                        CircularProgressIndicator(
-                            modifier = Modifier.size(16.dp),
-                            color = MaterialTheme.colorScheme.onPrimary,
-                            strokeWidth = 2.dp
-                        )
-                    } else {
                     Icon(
                         Icons.Default.Search,
                         contentDescription = null,
                         modifier = Modifier.size(18.dp)
                     )
-                    }
+                    Spacer(Modifier.width(4.dp))
-                    Spacer(modifier = Modifier.width(8.dp))
+                    Text("Scan")
-                    Text(if (isScanning) "Scanning..." else "Scan Library")
                 }
 
-                // View photos button
+                Button(
-                if (stats.taggedPhotoCount > 0) {
-                    OutlinedButton(
                     onClick = onViewPhotos,
                     modifier = Modifier.weight(1f)
                 ) {
                     Icon(
-                            Icons.Default.Photo,
+                        Icons.Default.PhotoLibrary,
                         contentDescription = null,
                         modifier = Modifier.size(18.dp)
                     )
-                        Spacer(modifier = Modifier.width(8.dp))
+                    Spacer(Modifier.width(4.dp))
-                        Text("View (${stats.taggedPhotoCount})")
+                    Text("View")
-                    }
                 }
             }
         }
     }
 }
 
+/**
+ * Scanning progress card
+ */
 @Composable
-private fun StatItem(
+private fun ScanningProgressCard(scanningState: PersonInventoryViewModel.ScanningState.Scanning) {
-    icon: ImageVector,
+    Card(
-    label: String,
+        modifier = Modifier.fillMaxWidth(),
-    value: String,
+        colors = CardDefaults.cardColors(
-    valueColor: Color = MaterialTheme.colorScheme.primary
+            containerColor = MaterialTheme.colorScheme.tertiaryContainer.copy(alpha = 0.5f)
+        )
     ) {
         Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.padding(16.dp),
-        verticalArrangement = Arrangement.spacedBy(4.dp)
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
             ) {
-        Icon(
-            icon,
-            contentDescription = null,
-            modifier = Modifier.size(24.dp),
-            tint = MaterialTheme.colorScheme.onSurfaceVariant
-        )
                 Text(
-            text = value,
+                    "Scanning for ${scanningState.personName}",
                     style = MaterialTheme.typography.titleMedium,
-            fontWeight = FontWeight.Bold,
+                    fontWeight = FontWeight.Bold
-            color = valueColor
                 )
                 Text(
-            text = label,
+                    "${scanningState.progress}/${scanningState.total}",
+                    style = MaterialTheme.typography.bodySmall
+                )
+            }
+
+            LinearProgressIndicator(
+                progress = {
+                    if (scanningState.total > 0) {
+                        scanningState.progress.toFloat() / scanningState.total.toFloat()
+                    } else {
+                        0f
+                    }
+                },
+                modifier = Modifier.fillMaxWidth()
+            )
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Text(
+                    "Matches found: ${scanningState.facesFound}",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                Text(
+                    "Faces: ${scanningState.facesDetected}",
                     style = MaterialTheme.typography.bodySmall,
                     color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
         }
+    }
+}
 
 /**
- * Scanning overlay showing progress
+ * Empty state
  */
 @Composable
-private fun ScanningOverlay(state: PersonInventoryViewModel.ScanningState.Scanning) {
+private fun EmptyState() {
     Box(
         modifier = Modifier
-            .fillMaxSize()
+            .fillMaxWidth()
-            .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.95f)),
+            .padding(vertical = 48.dp),
         contentAlignment = Alignment.Center
-    ) {
-        Card(
-            modifier = Modifier
-                .fillMaxWidth(0.85f)
-                .padding(24.dp),
-            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
     ) {
         Column(
-                modifier = Modifier.padding(24.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
             Icon(
-                    Icons.Default.Search,
+                Icons.Default.PersonOff,
                 contentDescription = null,
-                    modifier = Modifier.size(48.dp),
+                modifier = Modifier.size(64.dp),
-                    tint = MaterialTheme.colorScheme.primary
+                tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
             )
 
             Text(
-                    text = "Scanning Library",
+                "No People Trained",
                 style = MaterialTheme.typography.titleLarge,
                 fontWeight = FontWeight.Bold
             )
 
             Text(
-                    text = "Finding ${state.personName} in your photos...",
+                "Train face recognition to find people in your photos",
                 style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = androidx.compose.ui.text.style.TextAlign.Center
             )
+        }
+    }
+}
 
-                LinearProgressIndicator(
+/**
-                    progress = { state.progress / state.total.toFloat() },
+ * Error card
+ */
+@Composable
+private fun ErrorCard(message: String) {
+    Card(
         modifier = Modifier.fillMaxWidth(),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.errorContainer
+        )
+    ) {
+        Row(
+            modifier = Modifier.padding(16.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                Icons.Default.Error,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.error
             )
-
             Text(
-                    text = "${state.progress} / ${state.total} photos scanned",
+                message,
-                    style = MaterialTheme.typography.bodySmall
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onErrorContainer
             )
+        }
+    }
+}
 
+/**
+ * Delete confirmation dialog
+ */
+@Composable
+private fun DeleteDialog(
+    person: PersonInventoryViewModel.PersonWithStats,
+    onDismiss: () -> Unit,
+    onConfirm: () -> Unit
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        icon = {
+            Icon(
+                Icons.Default.Warning,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.error
+            )
+        },
+        title = { Text("Delete ${person.person.name}?") },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                Text("This will permanently delete:")
+                Text("• Face recognition model", style = MaterialTheme.typography.bodyMedium)
+                Text("• ${person.stats.taggedPhotoCount} tagged photos will be untagged", style = MaterialTheme.typography.bodyMedium)
                 Text(
-                    text = "${state.facesFound} faces detected",
+                    "This action cannot be undone.",
-                    style = MaterialTheme.typography.labelMedium,
+                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.primary
+                    color = MaterialTheme.colorScheme.error
                 )
             }
+        },
+        confirmButton = {
+            Button(
+                onClick = onConfirm,
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = MaterialTheme.colorScheme.error
+                )
+            ) {
+                Text("Delete")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
             }
         }
+    )
 }
 
-private fun formatDate(timestamp: Long): String {
+/**
-    val formatter = SimpleDateFormat("MMM d, yyyy h:mm a", Locale.getDefault())
+ * Scan confirmation dialog
-    return formatter.format(Date(timestamp))
+ */
+@Composable
+private fun ScanDialog(
+    person: PersonInventoryViewModel.PersonWithStats,
+    onDismiss: () -> Unit,
+    onConfirm: () -> Unit
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        icon = { Icon(Icons.Default.Search, contentDescription = null) },
+        title = { Text("Scan for ${person.person.name}?") },
+        text = {
+            Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                Text("This will:")
+                Text("• Scan all photos in your library", style = MaterialTheme.typography.bodyMedium)
+                Text("• Detect and tag ${person.person.name}'s face", style = MaterialTheme.typography.bodyMedium)
+                Text("• May take several minutes", style = MaterialTheme.typography.bodyMedium)
+            }
+        },
+        confirmButton = {
+            Button(onClick = onConfirm) {
+                Icon(Icons.Default.Search, contentDescription = null, modifier = Modifier.size(18.dp))
+                Spacer(Modifier.width(8.dp))
+                Text("Start Scan")
+            }
+        },
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Cancel")
+            }
+        }
+    )
 }

app/src/main/java/com/placeholder/sherpai2/ui/navigation/AppDestinations.kt

@@ -49,22 +49,22 @@ sealed class AppDestinations(
     data object Inventory : AppDestinations(
         route = AppRoutes.INVENTORY,
         icon = Icons.Default.Face,
-        label = "People",
+        label = "People Models",
-        description = "Trained face models"
+        description = "Existing Face Detection Models"
     )
 
     data object Train : AppDestinations(
         route = AppRoutes.TRAIN,
         icon = Icons.Default.ModelTraining,
-        label = "Train",
+        label = "Create Model",
-        description = "Train new person"
+        description = "Create a new Person Model"
     )
 
     data object Models : AppDestinations(
         route = AppRoutes.MODELS,
         icon = Icons.Default.SmartToy,
-        label = "Models",
+        label = "Generative",
-        description = "AI model management"
+        description = "AI Creation"
     )
 
     // ==================

app/src/main/java/com/placeholder/sherpai2/ui/navigation/AppNavHost.kt

@@ -7,6 +7,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
@@ -14,6 +15,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.navArgument
 import com.placeholder.sherpai2.ui.devscreens.DummyScreen
 import com.placeholder.sherpai2.ui.album.AlbumViewScreen
+import com.placeholder.sherpai2.ui.album.AlbumViewModel
 import com.placeholder.sherpai2.ui.explore.ExploreScreen
 import com.placeholder.sherpai2.ui.imagedetail.ImageDetailScreen
 import com.placeholder.sherpai2.ui.modelinventory.PersonInventoryScreen
@@ -30,20 +32,12 @@ import java.net.URLDecoder
 import java.net.URLEncoder
 
 /**
- * AppNavHost - Main navigation graph
+ * AppNavHost - UPDATED with image list navigation
- * UPDATED: Added Explore and Tags screens
  *
- * Complete flow:
+ * Changes:
- * - Photo browsing (Search, Explore, Detail)
+ * - Search/Album screens pass full image list to detail screen
- * - Face recognition (Inventory, Train)
+ * - Detail screen can navigate prev/next
- * - Organization (Tags, Upload)
+ * - Image URIs stored in SavedStateHandle for navigation
- * - Settings
- *
- * Features:
- * - URL encoding for safe navigation
- * - Proper back stack management
- * - State preservation
- * - Beautiful placeholders
  */
 @Composable
 fun AppNavHost(
@@ -61,19 +55,21 @@ fun AppNavHost(
         // ==========================================
 
         /**
-         * SEARCH SCREEN
+         * SEARCH SCREEN - UPDATED: Stores image list for navigation
-         * Main photo browser with face tag search
          */
         composable(AppRoutes.SEARCH) {
             val searchViewModel: SearchViewModel = hiltViewModel()
+
             SearchScreen(
                 searchViewModel = searchViewModel,
                 onImageClick = { imageUri ->
+                    // Single image view - no prev/next navigation
+                    ImageListHolder.clear() // Clear any previous list
+
                     val encodedUri = URLEncoder.encode(imageUri, "UTF-8")
                     navController.navigate("${AppRoutes.IMAGE_DETAIL}/$encodedUri")
                 },
                 onAlbumClick = { tagValue ->
-                    // Navigate to tag-based album
                     navController.navigate("album/tag/$tagValue")
                 }
             )
@@ -81,7 +77,6 @@ fun AppNavHost(
 
         /**
          * EXPLORE SCREEN
-         * Browse smart albums (auto-generated from tags)
          */
         composable(AppRoutes.EXPLORE) {
             ExploreScreen(
@@ -92,8 +87,7 @@ fun AppNavHost(
         }
 
         /**
-         * IMAGE DETAIL SCREEN
+         * IMAGE DETAIL SCREEN - UPDATED: Receives image list for navigation
-         * Single photo view with metadata
          */
         composable(
             route = "${AppRoutes.IMAGE_DETAIL}/{imageUri}",
@@ -107,15 +101,22 @@ fun AppNavHost(
                 ?.let { URLDecoder.decode(it, "UTF-8") }
                 ?: error("imageUri missing from navigation")
 
+            // Get image list from holder
+            val allImageUris = ImageListHolder.getImageList()
+
             ImageDetailScreen(
                 imageUri = imageUri,
-                onBack = { navController.popBackStack() }
+                onBack = {
+                    ImageListHolder.clear() // Clean up when leaving
+                    navController.popBackStack()
+                },
+                navController = navController,
+                allImageUris = allImageUris
             )
         }
 
         /**
-         * ALBUM VIEW SCREEN
+         * ALBUM VIEW SCREEN - UPDATED: Stores image list for navigation
-         * View photos in a specific album (tag, person, or time-based)
          */
         composable(
             route = "album/{albumType}/{albumId}",
@@ -128,11 +129,25 @@ fun AppNavHost(
                 }
             )
         ) {
+            val albumViewModel: AlbumViewModel = hiltViewModel()
+            val uiState by albumViewModel.uiState.collectAsStateWithLifecycle()
+
             AlbumViewScreen(
                 onBack = {
                     navController.popBackStack()
                 },
                 onImageClick = { imageUri ->
+                    // Store full album image list
+                    val allImageUris = if (uiState is com.placeholder.sherpai2.ui.album.AlbumUiState.Success) {
+                        (uiState as com.placeholder.sherpai2.ui.album.AlbumUiState.Success)
+                            .photos
+                            .map { it.image.imageUri }
+                    } else {
+                        emptyList()
+                    }
+
+                    ImageListHolder.setImageList(allImageUris)
+
                     val encodedUri = URLEncoder.encode(imageUri, "UTF-8")
                     navController.navigate("${AppRoutes.IMAGE_DETAIL}/$encodedUri")
                 }
@@ -145,19 +160,10 @@ fun AppNavHost(
 
         /**
          * PERSON INVENTORY SCREEN
-         * View all trained face models
-         *
-         * Features:
-         * - List all trained people
-         * - Show stats (training count, tagged photos, confidence)
-         * - Delete models
-         * - View photos containing each person
          */
         composable(AppRoutes.INVENTORY) {
             PersonInventoryScreen(
                 onViewPersonPhotos = { personId ->
-                    // Navigate back to search
-                    // TODO: In future, add person filter to search screen
                     navController.navigate(AppRoutes.SEARCH)
                 }
             )
@@ -165,22 +171,13 @@ fun AppNavHost(
 
         /**
          * TRAINING FLOW
-         * Train new face recognition model
-         *
-         * Flow:
-         * 1. TrainingScreen (select images button)
-         * 2. ImageSelectorScreen (pick 15-50 photos)
-         * 3. ScanResultsScreen (validation + name input)
-         * 4. Training completes → navigate to Inventory
          */
         composable(AppRoutes.TRAIN) { entry ->
             val trainViewModel: TrainViewModel = hiltViewModel()
             val uiState by trainViewModel.uiState.collectAsState()
 
-            // Get images selected from ImageSelector
             val selectedUris = entry.savedStateHandle.get<List<Uri>>("selected_image_uris")
 
-            // Start scanning when new images are selected
             LaunchedEffect(selectedUris) {
                 if (selectedUris != null && uiState is ScanningState.Idle) {
                     trainViewModel.scanAndTagFaces(selectedUris)
@@ -190,7 +187,6 @@ fun AppNavHost(
 
             when (uiState) {
                 is ScanningState.Idle -> {
-                    // Show start screen with "Select Images" button
                     TrainingScreen(
                         onSelectImages = {
                             navController.navigate(AppRoutes.IMAGE_SELECTOR)
@@ -198,11 +194,9 @@ fun AppNavHost(
                     )
                 }
                 else -> {
-                    // Show validation results and training UI
                     ScanResultsScreen(
                         state = uiState,
                         onFinish = {
-                            // After training, go to inventory to see new person
                             navController.navigate(AppRoutes.INVENTORY) {
                                 popUpTo(AppRoutes.TRAIN) { inclusive = true }
                             }
@@ -214,12 +208,10 @@ fun AppNavHost(
 
         /**
          * IMAGE SELECTOR SCREEN
-         * Pick images for training (internal screen)
          */
         composable(AppRoutes.IMAGE_SELECTOR) {
             ImageSelectorScreen(
                 onImagesSelected = { uris ->
-                    // Pass selected URIs back to Train screen
                     navController.previousBackStackEntry
                         ?.savedStateHandle
                         ?.set("selected_image_uris", uris)
@@ -230,7 +222,6 @@ fun AppNavHost(
 
         /**
          * MODELS SCREEN
-         * AI model management (placeholder)
          */
         composable(AppRoutes.MODELS) {
             DummyScreen(
@@ -245,7 +236,6 @@ fun AppNavHost(
 
         /**
          * TAGS SCREEN
-         * Manage photo tags with auto-tagging features
          */
         composable(AppRoutes.TAGS) {
             TagManagementScreen()
@@ -253,7 +243,6 @@ fun AppNavHost(
 
         /**
          * UTILITIES SCREEN
-         * Photo collection management tools
          */
         composable(AppRoutes.UTILITIES) {
             PhotoUtilitiesScreen()
@@ -265,7 +254,6 @@ fun AppNavHost(
 
         /**
          * SETTINGS SCREEN
-         * App preferences (placeholder)
          */
         composable(AppRoutes.SETTINGS) {
             DummyScreen(

app/src/main/java/com/placeholder/sherpai2/ui/navigation/Imagelistholder.kt

@@ -0,0 +1,21 @@
+package com.placeholder.sherpai2.ui.navigation
+
+/**
+ * Simple holder for passing image lists between screens
+ * Used for prev/next navigation in ImageDetailScreen
+ */
+object ImageListHolder {
+    private var imageUris: List<String> = emptyList()
+
+    fun setImageList(uris: List<String>) {
+        imageUris = uris
+    }
+
+    fun getImageList(): List<String> {
+        return imageUris
+    }
+
+    fun clear() {
+        imageUris = emptyList()
+    }
+}

app/src/main/java/com/placeholder/sherpai2/ui/presentation/AppDrawerContent.kt

@@ -18,8 +18,7 @@ import androidx.compose.material.icons.filled.*
 import com.placeholder.sherpai2.ui.navigation.AppRoutes
 
 /**
- * Beautiful app drawer with sections, gradient header, and polish
+ * SLIMMED DOWN AppDrawer - 280dp width, inline logo, cleaner sections
- * UPDATED: Tour → Explore
  */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -28,12 +27,12 @@ fun AppDrawerContent(
     onDestinationClicked: (String) -> Unit
 ) {
     ModalDrawerSheet(
-        modifier = Modifier.width(300.dp),
+        modifier = Modifier.width(280.dp), // SLIMMER (was 300dp)
         drawerContainerColor = MaterialTheme.colorScheme.surface
     ) {
         Column(modifier = Modifier.fillMaxSize()) {
 
-            // ===== BEAUTIFUL GRADIENT HEADER =====
+            // ===== COMPACT HEADER - Icon + Text Inline =====
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -45,15 +44,16 @@ fun AppDrawerContent(
                             )
                         )
                     )
-                    .padding(24.dp)
+                    .padding(20.dp) // Reduced padding
             ) {
-                Column(
+                Row(
-                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                    verticalAlignment = Alignment.CenterVertically
                 ) {
-                    // App icon/logo area
+                    // App icon - smaller
                     Surface(
-                        modifier = Modifier.size(56.dp),
+                        modifier = Modifier.size(48.dp), // Smaller (was 56dp)
-                        shape = RoundedCornerShape(16.dp),
+                        shape = RoundedCornerShape(14.dp),
                         color = MaterialTheme.colorScheme.primary,
                         shadowElevation = 4.dp
                     ) {
@@ -61,44 +61,47 @@ fun AppDrawerContent(
                             Icon(
                                 Icons.Default.Face,
                                 contentDescription = null,
-                                modifier = Modifier.size(32.dp),
+                                modifier = Modifier.size(28.dp),
                                 tint = MaterialTheme.colorScheme.onPrimary
                             )
                         }
                     }
 
+                    // Text next to icon
+                    Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {
                         Text(
                             "SherpAI",
-                        style = MaterialTheme.typography.headlineMedium,
+                            style = MaterialTheme.typography.titleLarge, // Smaller (was headlineMedium)
                             fontWeight = FontWeight.Bold,
                             color = MaterialTheme.colorScheme.onSurface
                         )
 
                         Text(
                             "Face Recognition System",
-                        style = MaterialTheme.typography.bodyMedium,
+                            style = MaterialTheme.typography.bodySmall, // Smaller
                             color = MaterialTheme.colorScheme.onSurfaceVariant
                         )
                     }
                 }
+            }
 
-            Spacer(modifier = Modifier.height(8.dp))
+            Spacer(modifier = Modifier.height(4.dp)) // Reduced spacing
 
             // ===== NAVIGATION SECTIONS =====
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
                     .weight(1f)
-                    .padding(horizontal = 12.dp),
+                    .padding(horizontal = 8.dp), // Reduced padding
-                verticalArrangement = Arrangement.spacedBy(4.dp)
+                verticalArrangement = Arrangement.spacedBy(2.dp) // Tighter spacing
             ) {
 
                 // Photos Section
                 DrawerSection(title = "Photos")
 
                 val photoItems = listOf(
-                    DrawerItem(AppRoutes.SEARCH, "Search", Icons.Default.Search, "Find photos by tag or person"),
+                    DrawerItem(AppRoutes.SEARCH, "Search", Icons.Default.Search),
-                    DrawerItem(AppRoutes.EXPLORE, "Explore", Icons.Default.Explore, "Browse smart albums")
+                    DrawerItem(AppRoutes.EXPLORE, "Explore", Icons.Default.Explore)
                 )
 
                 photoItems.forEach { item ->
@@ -109,15 +112,15 @@ fun AppDrawerContent(
                     )
                 }
 
-                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(modifier = Modifier.height(4.dp))
 
                 // Face Recognition Section
                 DrawerSection(title = "Face Recognition")
 
                 val faceItems = listOf(
-                    DrawerItem(AppRoutes.INVENTORY, "People", Icons.Default.Face, "Trained face models"),
+                    DrawerItem(AppRoutes.INVENTORY, "People", Icons.Default.Face),
-                    DrawerItem(AppRoutes.TRAIN, "Train", Icons.Default.ModelTraining, "Train new person"),
+                    DrawerItem(AppRoutes.TRAIN, "Train New", Icons.Default.ModelTraining),
-                    DrawerItem(AppRoutes.MODELS, "Models", Icons.Default.SmartToy, "AI model management")
+                    DrawerItem(AppRoutes.MODELS, "Models", Icons.Default.SmartToy)
                 )
 
                 faceItems.forEach { item ->
@@ -128,14 +131,14 @@ fun AppDrawerContent(
                     )
                 }
 
-                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(modifier = Modifier.height(4.dp))
 
                 // Organization Section
                 DrawerSection(title = "Organization")
 
                 val orgItems = listOf(
-                    DrawerItem(AppRoutes.TAGS, "Tags", Icons.AutoMirrored.Filled.Label, "Manage photo tags"),
+                    DrawerItem(AppRoutes.TAGS, "Tags", Icons.AutoMirrored.Filled.Label),
-                    DrawerItem(AppRoutes.UTILITIES, "Upload", Icons.Default.UploadFile, "Add new photos")
+                    DrawerItem(AppRoutes.UTILITIES, "Utilities", Icons.Default.Build)
                 )
 
                 orgItems.forEach { item ->
@@ -150,7 +153,7 @@ fun AppDrawerContent(
 
                 // Settings at bottom
                 HorizontalDivider(
-                    modifier = Modifier.padding(vertical = 8.dp),
+                    modifier = Modifier.padding(vertical = 6.dp),
                     color = MaterialTheme.colorScheme.outlineVariant
                 )
 
@@ -158,35 +161,34 @@ fun AppDrawerContent(
                     item = DrawerItem(
                         AppRoutes.SETTINGS,
                         "Settings",
-                        Icons.Default.Settings,
+                        Icons.Default.Settings
-                        "App preferences"
                     ),
                     selected = AppRoutes.SETTINGS == currentRoute,
                     onClick = { onDestinationClicked(AppRoutes.SETTINGS) }
                 )
 
-                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(modifier = Modifier.height(4.dp))
             }
         }
     }
 }
 
 /**
- * Section header in drawer
+ * Section header - more compact
  */
 @Composable
 private fun DrawerSection(title: String) {
     Text(
         text = title,
-        style = MaterialTheme.typography.labelMedium,
+        style = MaterialTheme.typography.labelSmall, // Smaller
         fontWeight = FontWeight.Bold,
         color = MaterialTheme.colorScheme.primary,
-        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
+        modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp) // Reduced padding
     )
 }
 
 /**
- * Individual navigation item with icon, label, and subtitle
+ * Navigation item - cleaner, no subtitle
  */
 @Composable
 private fun DrawerNavigationItem(
@@ -196,33 +198,24 @@ private fun DrawerNavigationItem(
 ) {
     NavigationDrawerItem(
         label = {
-            Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {
             Text(
                 text = item.label,
-                    style = MaterialTheme.typography.bodyLarge,
+                style = MaterialTheme.typography.bodyMedium, // Slightly smaller
                 fontWeight = if (selected) FontWeight.SemiBold else FontWeight.Normal
             )
-                item.subtitle?.let {
-                    Text(
-                        text = it,
-                        style = MaterialTheme.typography.bodySmall,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f)
-                    )
-                }
-            }
         },
         icon = {
             Icon(
                 item.icon,
                 contentDescription = item.label,
-                modifier = Modifier.size(24.dp)
+                modifier = Modifier.size(22.dp) // Slightly smaller
             )
         },
         selected = selected,
         onClick = onClick,
         modifier = Modifier
             .padding(NavigationDrawerItemDefaults.ItemPadding)
-            .clip(RoundedCornerShape(12.dp)),
+            .clip(RoundedCornerShape(10.dp)), // Slightly smaller radius
         colors = NavigationDrawerItemDefaults.colors(
             selectedContainerColor = MaterialTheme.colorScheme.primaryContainer,
             selectedIconColor = MaterialTheme.colorScheme.primary,
@@ -233,11 +226,10 @@ private fun DrawerNavigationItem(
 }
 
 /**
- * Data class for drawer items
+ * Simplified drawer item (no subtitle)
  */
 private data class DrawerItem(
     val route: String,
     val label: String,
-    val icon: androidx.compose.ui.graphics.vector.ImageVector,
+    val icon: androidx.compose.ui.graphics.vector.ImageVector
-    val subtitle: String? = null
 )

app/src/main/java/com/placeholder/sherpai2/ui/search/SearchScreen.kt

@@ -1,35 +1,34 @@
 package com.placeholder.sherpai2.ui.search
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.grid.*
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import com.placeholder.sherpai2.ui.search.components.ImageGridItem
+import coil.compose.AsyncImage
 
 /**
- * SearchScreen - COMPLETE REDESIGN
+ * ADVANCED SearchScreen with Boolean Logic
  *
  * Features:
- * - Near-match search ("low" → "low_res")
+ * - Include/Exclude people (visual chips)
- * - Quick tag filter chips
+ * - Include/Exclude tags (visual chips)
- * - Date range filtering
+ * - Clear visual distinction (green = include, red = exclude)
- * - Clean person-only display
+ * - Real-time filtering
- * - Simple/Verbose toggle
+ * - OpenSearch-style query building
  */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -37,107 +36,85 @@ fun SearchScreen(
     modifier: Modifier = Modifier,
     searchViewModel: SearchViewModel,
     onImageClick: (String) -> Unit,
-    onAlbumClick: (String) -> Unit = {} // For opening album view
+    onAlbumClick: ((String) -> Unit)? = null
 ) {
-
     val searchQuery by searchViewModel.searchQuery.collectAsStateWithLifecycle()
-    val activeTagFilters by searchViewModel.activeTagFilters.collectAsStateWithLifecycle()
+    val includedPeople by searchViewModel.includedPeople.collectAsStateWithLifecycle()
+    val excludedPeople by searchViewModel.excludedPeople.collectAsStateWithLifecycle()
+    val includedTags by searchViewModel.includedTags.collectAsStateWithLifecycle()
+    val excludedTags by searchViewModel.excludedTags.collectAsStateWithLifecycle()
     val dateRange by searchViewModel.dateRange.collectAsStateWithLifecycle()
-    val displayMode by searchViewModel.displayMode.collectAsStateWithLifecycle()
+
-    val systemTags by searchViewModel.systemTags.collectAsStateWithLifecycle()
+    val availablePeople by searchViewModel.availablePeople.collectAsStateWithLifecycle()
+    val availableTags by searchViewModel.availableTags.collectAsStateWithLifecycle()
 
     val images by searchViewModel
         .searchImages()
         .collectAsStateWithLifecycle(initialValue = emptyList())
 
-    Scaffold { paddingValues ->
+    var showPeoplePicker by remember { mutableStateOf(false) }
-        Column(
+    var showTagPicker by remember { mutableStateOf(false) }
-            modifier = modifier
+
-                .fillMaxSize()
+    Column(modifier = modifier.fillMaxSize()) {
-                .padding(paddingValues)
+        // Search bar + quick add buttons
-        ) {
-            // Header with gradient
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .background(
-                        Brush.verticalGradient(
-                            colors = listOf(
-                                MaterialTheme.colorScheme.primaryContainer,
-                                MaterialTheme.colorScheme.surface
-                            )
-                        )
-                    )
-            ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(16.dp),
-                    verticalArrangement = Arrangement.spacedBy(12.dp)
-                ) {
-                    // Title
         Row(
-                        verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
-                        horizontalArrangement = Arrangement.SpaceBetween,
+                .fillMaxWidth()
-                        modifier = Modifier.fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically
         ) {
-                        Column {
-                            Text(
-                                text = "Search Photos",
-                                style = MaterialTheme.typography.headlineMedium,
-                                fontWeight = FontWeight.Bold
-                            )
-                            Text(
-                                text = "Near-match • Filters • Smart tags",
-                                style = MaterialTheme.typography.bodySmall,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant
-                            )
-                        }
-
-                        // Simple/Verbose toggle
-                        IconButton(
-                            onClick = { searchViewModel.toggleDisplayMode() }
-                        ) {
-                            Icon(
-                                imageVector = if (displayMode == DisplayMode.SIMPLE) {
-                                    Icons.Default.ViewList
-                                } else {
-                                    Icons.Default.ViewModule
-                                },
-                                contentDescription = "Toggle view mode",
-                                tint = MaterialTheme.colorScheme.primary
-                            )
-                        }
-                    }
-
-                    // Search bar
             OutlinedTextField(
                 value = searchQuery,
                 onValueChange = { searchViewModel.setSearchQuery(it) },
-                        placeholder = { Text("Search... (e.g., 'low', 'gro', 'nig')") },
+                placeholder = { Text("Search tags...") },
-                        leadingIcon = {
+                leadingIcon = { Icon(Icons.Default.Search, null) },
-                            Icon(Icons.Default.Search, contentDescription = null)
-                        },
                 trailingIcon = {
                     if (searchQuery.isNotEmpty()) {
                         IconButton(onClick = { searchViewModel.setSearchQuery("") }) {
-                                    Icon(Icons.Default.Clear, contentDescription = "Clear")
+                            Icon(Icons.Default.Close, "Clear")
                         }
                     }
                 },
-                        modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.weight(1f),
                 singleLine = true,
-                        shape = RoundedCornerShape(16.dp)
+                shape = RoundedCornerShape(12.dp)
             )
+
+            // Add person button
+            IconButton(
+                onClick = { showPeoplePicker = true },
+                colors = IconButtonDefaults.iconButtonColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer
+                )
+            ) {
+                Icon(Icons.Default.PersonAdd, "Add person filter")
+            }
+
+            // Add tag button
+            IconButton(
+                onClick = { showTagPicker = true },
+                colors = IconButtonDefaults.iconButtonColors(
+                    containerColor = MaterialTheme.colorScheme.secondaryContainer
+                )
+            ) {
+                Icon(Icons.Default.LabelImportant, "Add tag filter")
             }
         }
 
-            // Quick Tag Filters
+        // Active filters display (chips)
-            if (systemTags.isNotEmpty()) {
+        if (searchViewModel.hasActiveFilters()) {
-                Column(
+            Card(
                 modifier = Modifier
                     .fillMaxWidth()
-                        .padding(horizontal = 16.dp, vertical = 8.dp)
+                    .padding(horizontal = 16.dp, vertical = 4.dp),
+                colors = CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
+                )
+            ) {
+                Column(
+                    modifier = Modifier.padding(12.dp),
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
                     Row(
                         modifier = Modifier.fillMaxWidth(),
@@ -145,303 +122,421 @@ fun SearchScreen(
                         verticalAlignment = Alignment.CenterVertically
                     ) {
                         Text(
-                            text = "Quick Filters",
+                            "Active Filters",
                             style = MaterialTheme.typography.labelLarge,
-                            fontWeight = FontWeight.Bold,
-                            color = MaterialTheme.colorScheme.primary
-                        )
-                        if (activeTagFilters.isNotEmpty()) {
-                            TextButton(onClick = { searchViewModel.clearTagFilters() }) {
-                                Text("Clear all")
-                            }
-                        }
-                    }
-
-                    LazyRow(
-                        horizontalArrangement = Arrangement.spacedBy(8.dp)
-                    ) {
-                        items(systemTags) { tag ->
-                            val isActive = tag.value in activeTagFilters
-                            FilterChip(
-                                selected = isActive,
-                                onClick = { searchViewModel.toggleTagFilter(tag.value) },
-                                label = {
-                                    Row(
-                                        horizontalArrangement = Arrangement.spacedBy(4.dp),
-                                        verticalAlignment = Alignment.CenterVertically
-                                    ) {
-                                        Text(
-                                            text = getTagEmoji(tag.value),
-                                            style = MaterialTheme.typography.bodyMedium
-                                        )
-                                        Text(
-                                            text = tag.value.replace("_", " "),
-                                            style = MaterialTheme.typography.bodySmall
-                                        )
-                                    }
-                                },
-                                leadingIcon = if (isActive) {
-                                    { Icon(Icons.Default.Check, null, Modifier.size(16.dp)) }
-                                } else null
-                            )
-                        }
-                    }
-                }
-            }
-
-            // Date Range Filters
-            LazyRow(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 16.dp, vertical = 8.dp),
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                items(DateRange.entries) { range ->
-                    val isActive = dateRange == range
-                    FilterChip(
-                        selected = isActive,
-                        onClick = { searchViewModel.setDateRange(range) },
-                        label = { Text(range.displayName) },
-                        leadingIcon = if (isActive) {
-                            { Icon(Icons.Default.DateRange, null, Modifier.size(16.dp)) }
-                        } else null
-                    )
-                }
-            }
-
-            HorizontalDivider(
-                modifier = Modifier.padding(horizontal = 16.dp),
-                color = MaterialTheme.colorScheme.outlineVariant
-            )
-
-            // Results
-            if (images.isEmpty() && searchQuery.isBlank() && activeTagFilters.isEmpty()) {
-                EmptySearchState()
-            } else if (images.isEmpty()) {
-                NoResultsState(
-                    query = searchQuery,
-                    hasFilters = activeTagFilters.isNotEmpty() || dateRange != DateRange.ALL_TIME
-                )
-            } else {
-                Column {
-                    // Results header
-                    Row(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(16.dp),
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Text(
-                            text = "${images.size} ${if (images.size == 1) "photo" else "photos"}",
-                            style = MaterialTheme.typography.titleMedium,
                             fontWeight = FontWeight.Bold
                         )
-
-                        // View Album button (if search results can be grouped)
-                        if (activeTagFilters.size == 1 || searchQuery.isNotBlank()) {
                         TextButton(
-                                onClick = {
+                            onClick = { searchViewModel.clearAllFilters() },
-                                    val albumTag = activeTagFilters.firstOrNull() ?: searchQuery
+                            contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
-                                    onAlbumClick(albumTag)
-                                }
                         ) {
-                                Icon(
+                            Text("Clear All", style = MaterialTheme.typography.labelMedium)
-                                    Icons.Default.Collections,
+                        }
-                                    contentDescription = null,
+                    }
-                                    modifier = Modifier.size(16.dp)
+
+                    // Included People (GREEN)
+                    if (includedPeople.isNotEmpty()) {
+                        LazyRow(
+                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                            contentPadding = PaddingValues(vertical = 4.dp)
+                        ) {
+                            items(includedPeople.toList()) { personId ->
+                                val person = availablePeople.find { it.id == personId }
+                                if (person != null) {
+                                    FilterChip(
+                                        selected = true,
+                                        onClick = { searchViewModel.excludePerson(personId) },
+                                        onLongClick = { searchViewModel.removePersonFilter(personId) },
+                                        label = { Text(person.name) },
+                                        leadingIcon = {
+                                            Icon(Icons.Default.Person, null, Modifier.size(16.dp))
+                                        },
+                                        trailingIcon = {
+                                            Icon(Icons.Default.Check, null, Modifier.size(16.dp))
+                                        },
+                                        colors = FilterChipDefaults.filterChipColors(
+                                            selectedContainerColor = Color(0xFF4CAF50), // Green
+                                            selectedLabelColor = Color.White
                                         )
-                                Spacer(Modifier.width(4.dp))
+                                    )
-                                Text("View Album")
+                                }
                             }
                         }
                     }
 
-                    // Photo grid
+                    // Excluded People (RED)
+                    if (excludedPeople.isNotEmpty()) {
+                        LazyRow(
+                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                            contentPadding = PaddingValues(vertical = 4.dp)
+                        ) {
+                            items(excludedPeople.toList()) { personId ->
+                                val person = availablePeople.find { it.id == personId }
+                                if (person != null) {
+                                    FilterChip(
+                                        selected = true,
+                                        onClick = { searchViewModel.includePerson(personId) },
+                                        onLongClick = { searchViewModel.removePersonFilter(personId) },
+                                        label = { Text(person.name) },
+                                        leadingIcon = {
+                                            Icon(Icons.Default.Person, null, Modifier.size(16.dp))
+                                        },
+                                        trailingIcon = {
+                                            Icon(Icons.Default.Close, null, Modifier.size(16.dp))
+                                        },
+                                        colors = FilterChipDefaults.filterChipColors(
+                                            selectedContainerColor = Color(0xFFF44336), // Red
+                                            selectedLabelColor = Color.White
+                                        )
+                                    )
+                                }
+                            }
+                        }
+                    }
+
+                    // Included Tags (GREEN)
+                    if (includedTags.isNotEmpty()) {
+                        LazyRow(
+                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                            contentPadding = PaddingValues(vertical = 4.dp)
+                        ) {
+                            items(includedTags.toList()) { tagValue ->
+                                FilterChip(
+                                    selected = true,
+                                    onClick = { searchViewModel.excludeTag(tagValue) },
+                                    onLongClick = { searchViewModel.removeTagFilter(tagValue) },
+                                    label = { Text(tagValue) },
+                                    leadingIcon = {
+                                        Icon(Icons.Default.Label, null, Modifier.size(16.dp))
+                                    },
+                                    trailingIcon = {
+                                        Icon(Icons.Default.Check, null, Modifier.size(16.dp))
+                                    },
+                                    colors = FilterChipDefaults.filterChipColors(
+                                        selectedContainerColor = Color(0xFF4CAF50),
+                                        selectedLabelColor = Color.White
+                                    )
+                                )
+                            }
+                        }
+                    }
+
+                    // Excluded Tags (RED)
+                    if (excludedTags.isNotEmpty()) {
+                        LazyRow(
+                            horizontalArrangement = Arrangement.spacedBy(6.dp),
+                            contentPadding = PaddingValues(vertical = 4.dp)
+                        ) {
+                            items(excludedTags.toList()) { tagValue ->
+                                FilterChip(
+                                    selected = true,
+                                    onClick = { searchViewModel.includeTag(tagValue) },
+                                    onLongClick = { searchViewModel.removeTagFilter(tagValue) },
+                                    label = { Text(tagValue) },
+                                    leadingIcon = {
+                                        Icon(Icons.Default.Label, null, Modifier.size(16.dp))
+                                    },
+                                    trailingIcon = {
+                                        Icon(Icons.Default.Close, null, Modifier.size(16.dp))
+                                    },
+                                    colors = FilterChipDefaults.filterChipColors(
+                                        selectedContainerColor = Color(0xFFF44336),
+                                        selectedLabelColor = Color.White
+                                    )
+                                )
+                            }
+                        }
+                    }
+
+                    // Date range
+                    if (dateRange != DateRange.ALL_TIME) {
+                        FilterChip(
+                            selected = true,
+                            onClick = { searchViewModel.setDateRange(DateRange.ALL_TIME) },
+                            label = { Text(dateRange.displayName) },
+                            leadingIcon = {
+                                Icon(Icons.Default.DateRange, null, Modifier.size(16.dp))
+                            },
+                            colors = FilterChipDefaults.filterChipColors(
+                                selectedContainerColor = MaterialTheme.colorScheme.tertiaryContainer
+                            )
+                        )
+                    }
+                }
+            }
+        }
+
+        // Results
+        if (images.isEmpty() && !searchViewModel.hasActiveFilters()) {
+            EmptyState()
+        } else if (images.isEmpty()) {
+            NoResultsState()
+        } else {
+            // Results count
+            Text(
+                text = "${images.size} photos • ${searchViewModel.getSearchSummary()}",
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                style = MaterialTheme.typography.titleSmall,
+                fontWeight = FontWeight.SemiBold
+            )
+
+            // Image grid
             LazyVerticalGrid(
-                        columns = GridCells.Adaptive(120.dp),
+                columns = GridCells.Adaptive(minSize = 120.dp),
-                        contentPadding = PaddingValues(12.dp),
+                modifier = Modifier.fillMaxSize(),
-                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                contentPadding = PaddingValues(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 16.dp),
-                        horizontalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
-                        modifier = Modifier.fillMaxSize()
+                verticalArrangement = Arrangement.spacedBy(8.dp)
             ) {
                 items(
                     items = images,
-                            key = { it.image.imageId }
+                    key = { it.image.imageUri }
-                        ) { imageWithFaceTags ->
+                ) { imageWithTags ->
-                            PhotoCard(
-                                imageWithFaceTags = imageWithFaceTags,
-                                displayMode = displayMode,
-                                onImageClick = onImageClick
-                            )
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-/**
- * Photo card with clean person display
- */
-@Composable
-private fun PhotoCard(
-    imageWithFaceTags: ImageWithFaceTags,
-    displayMode: DisplayMode,
-    onImageClick: (String) -> Unit
-) {
                     Card(
-        modifier = Modifier.fillMaxWidth(),
+                        modifier = Modifier
-        shape = RoundedCornerShape(12.dp),
+                            .aspectRatio(1f)
-        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+                            .clickable { onImageClick(imageWithTags.image.imageUri) }
                     ) {
-        Column {
+                        AsyncImage(
-            // Image
+                            model = imageWithTags.image.imageUri,
-            ImageGridItem(
+                            contentDescription = null,
-                image = imageWithFaceTags.image,
+                            modifier = Modifier.fillMaxSize(),
-                onClick = { onImageClick(imageWithFaceTags.image.imageUri) }
+                            contentScale = androidx.compose.ui.layout.ContentScale.Crop
                         )
+                    }
+                }
+            }
+        }
+    }
 
-            // Person tags (deduplicated)
+    // People picker dialog
-            val uniquePersons = imageWithFaceTags.persons.distinctBy { it.id }
+    if (showPeoplePicker) {
+        PeoplePickerDialog(
+            people = availablePeople,
+            includedPeople = includedPeople,
+            excludedPeople = excludedPeople,
+            onInclude = { searchViewModel.includePerson(it) },
+            onExclude = { searchViewModel.excludePerson(it) },
+            onDismiss = { showPeoplePicker = false }
+        )
+    }
 
-            if (uniquePersons.isNotEmpty()) {
+    // Tag picker dialog
-                when (displayMode) {
+    if (showTagPicker) {
-                    DisplayMode.SIMPLE -> {
+        TagPickerDialog(
-                        // SIMPLE: Just names, no icons, no percentages
+            tags = availableTags,
-                        Surface(
+            includedTags = includedTags,
-                            color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f),
+            excludedTags = excludedTags,
-                            modifier = Modifier.fillMaxWidth()
+            onInclude = { searchViewModel.includeTag(it) },
+            onExclude = { searchViewModel.excludeTag(it) },
+            onDismiss = { showTagPicker = false }
+        )
+    }
+}
+
+@Composable
+private fun FilterChip(
+    selected: Boolean,
+    onClick: () -> Unit,
+    onLongClick: (() -> Unit)? = null,
+    label: @Composable () -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    colors: androidx.compose.material3.SelectableChipColors = FilterChipDefaults.filterChipColors()
+) {
+    androidx.compose.material3.FilterChip(
+        selected = selected,
+        onClick = onClick,
+        label = label,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        colors = colors
+    )
+}
+
+@Composable
+private fun PeoplePickerDialog(
+    people: List<com.placeholder.sherpai2.data.local.entity.PersonEntity>,
+    includedPeople: Set<String>,
+    excludedPeople: Set<String>,
+    onInclude: (String) -> Unit,
+    onExclude: (String) -> Unit,
+    onDismiss: () -> Unit
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text("Add People Filter") },
+        text = {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(400.dp)
+                    .verticalScroll(rememberScrollState()),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
             ) {
                 Text(
-                                text = uniquePersons
+                    "Tap to INCLUDE (green) • Long press to EXCLUDE (red)",
-                                    .take(3)
-                                    .joinToString(", ") { it.name },
                     style = MaterialTheme.typography.bodySmall,
-                                modifier = Modifier.padding(8.dp),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
                 )
+
+                people.forEach { person ->
+                    val isIncluded = person.id in includedPeople
+                    val isExcluded = person.id in excludedPeople
+
+                    Card(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable { onInclude(person.id) },
+                        colors = CardDefaults.cardColors(
+                            containerColor = when {
+                                isIncluded -> Color(0xFF4CAF50).copy(alpha = 0.3f)
+                                isExcluded -> Color(0xFFF44336).copy(alpha = 0.3f)
+                                else -> MaterialTheme.colorScheme.surfaceVariant
                             }
-                    }
+                        )
-                    DisplayMode.VERBOSE -> {
-                        // VERBOSE: Person tags + System tags
-                        Surface(
-                            color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f),
-                            modifier = Modifier.fillMaxWidth()
                     ) {
-                            Column(
-                                modifier = Modifier.padding(8.dp),
-                                verticalArrangement = Arrangement.spacedBy(4.dp)
-                            ) {
-                                // Person tags with confidence
-                                uniquePersons.take(3).forEachIndexed { index, person ->
                         Row(
-                                        horizontalArrangement = Arrangement.spacedBy(6.dp),
+                            modifier = Modifier.padding(12.dp),
+                            horizontalArrangement = Arrangement.SpaceBetween,
                             verticalAlignment = Alignment.CenterVertically
                         ) {
-                                        Icon(
+                            Text(person.name, fontWeight = FontWeight.Medium)
-                                            Icons.Default.Face,
+                            Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
-                                            contentDescription = null,
+                                IconButton(
-                                            modifier = Modifier.size(14.dp),
+                                    onClick = { onInclude(person.id) },
-                                            tint = MaterialTheme.colorScheme.primary
+                                    colors = IconButtonDefaults.iconButtonColors(
+                                        containerColor = if (isIncluded) Color(0xFF4CAF50) else Color.Transparent
                                     )
+                                ) {
+                                    Icon(Icons.Default.Check, "Include", tint = if (isIncluded) Color.White else MaterialTheme.colorScheme.onSurface)
+                                }
+                                IconButton(
+                                    onClick = { onExclude(person.id) },
+                                    colors = IconButtonDefaults.iconButtonColors(
+                                        containerColor = if (isExcluded) Color(0xFFF44336) else Color.Transparent
+                                    )
+                                ) {
+                                    Icon(Icons.Default.Close, "Exclude", tint = if (isExcluded) Color.White else MaterialTheme.colorScheme.onSurface)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Done")
+            }
+        }
+    )
+}
+
+@Composable
+private fun TagPickerDialog(
+    tags: List<String>,
+    includedTags: Set<String>,
+    excludedTags: Set<String>,
+    onInclude: (String) -> Unit,
+    onExclude: (String) -> Unit,
+    onDismiss: () -> Unit
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        title = { Text("Add Tag Filter") },
+        text = {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(400.dp)
+                    .verticalScroll(rememberScrollState()),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
                 Text(
-                                            text = person.name,
+                    "Tap to INCLUDE (green) • Long press to EXCLUDE (red)",
                     style = MaterialTheme.typography.bodySmall,
-                                            modifier = Modifier.weight(1f),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                                            maxLines = 1,
-                                            overflow = TextOverflow.Ellipsis
-                                        )
-                                        // Find matching face tag for confidence
-                                        val matchingTag = imageWithFaceTags.faceTags
-                                            .find { tag ->
-                                                imageWithFaceTags.persons[imageWithFaceTags.faceTags.indexOf(tag)].id == person.id
-                                            }
-                                        if (matchingTag != null) {
-                                            val confidence = (matchingTag.confidence * 100).toInt()
-                                            Text(
-                                                text = "$confidence%",
-                                                style = MaterialTheme.typography.labelSmall,
-                                                color = MaterialTheme.colorScheme.primary
-                                            )
-                                        }
-                                    }
-                                }
-
-                                if (uniquePersons.size > 3) {
-                                    Text(
-                                        text = "+${uniquePersons.size - 3} more",
-                                        style = MaterialTheme.typography.labelSmall,
-                                        color = MaterialTheme.colorScheme.primary
-                                    )
-                                }
-
-                                // System tags (verbose mode only)
-                                // TODO: Get image tags from ImageWithEverything
-                                // For now, show placeholder
-                                HorizontalDivider(
-                                    modifier = Modifier.padding(vertical = 4.dp),
-                                    color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)
                 )
 
+                tags.forEach { tagValue ->
+                    val isIncluded = tagValue in includedTags
+                    val isExcluded = tagValue in excludedTags
+
+                    Card(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable { onInclude(tagValue) },
+                        colors = CardDefaults.cardColors(
+                            containerColor = when {
+                                isIncluded -> Color(0xFF4CAF50).copy(alpha = 0.3f)
+                                isExcluded -> Color(0xFFF44336).copy(alpha = 0.3f)
+                                else -> MaterialTheme.colorScheme.surfaceVariant
+                            }
+                        )
+                    ) {
                         Row(
-                                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                            modifier = Modifier.padding(12.dp),
-                                    modifier = Modifier.fillMaxWidth()
+                            horizontalArrangement = Arrangement.SpaceBetween,
+                            verticalAlignment = Alignment.CenterVertically
                         ) {
-                                    // Example system tags - replace with actual tags from image
+                            Text(tagValue, fontWeight = FontWeight.Medium)
-                                    SystemTagChip("indoor")
+                            Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
-                                    SystemTagChip("high_res")
+                                IconButton(
-                                    SystemTagChip("morning")
+                                    onClick = { onInclude(tagValue) },
-                                }
+                                    colors = IconButtonDefaults.iconButtonColors(
-                            }
+                                        containerColor = if (isIncluded) Color(0xFF4CAF50) else Color.Transparent
-                        }
+                                    )
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun SystemTagChip(tagValue: String) {
-    Surface(
-        shape = RoundedCornerShape(4.dp),
-        color = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.5f)
                                 ) {
-        Text(
+                                    Icon(Icons.Default.Check, "Include", tint = if (isIncluded) Color.White else MaterialTheme.colorScheme.onSurface)
-            text = tagValue.replace("_", " "),
+                                }
-            style = MaterialTheme.typography.labelSmall,
+                                IconButton(
-            modifier = Modifier.padding(horizontal = 4.dp, vertical = 2.dp)
+                                    onClick = { onExclude(tagValue) },
+                                    colors = IconButtonDefaults.iconButtonColors(
+                                        containerColor = if (isExcluded) Color(0xFFF44336) else Color.Transparent
+                                    )
+                                ) {
+                                    Icon(Icons.Default.Close, "Exclude", tint = if (isExcluded) Color.White else MaterialTheme.colorScheme.onSurface)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        confirmButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Done")
+            }
+        }
     )
 }
-}
 
 @Composable
-private fun EmptySearchState() {
+private fun EmptyState() {
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(32.dp),
         contentAlignment = Alignment.Center
     ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
-            modifier = Modifier.padding(32.dp)
         ) {
             Icon(
                 Icons.Default.Search,
                 contentDescription = null,
-                modifier = Modifier.size(80.dp),
+                modifier = Modifier.size(64.dp),
-                tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.3f)
+                tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
             )
             Text(
-                text = "Search or filter photos",
+                "Advanced Search",
                 style = MaterialTheme.typography.titleLarge,
                 fontWeight = FontWeight.Bold
             )
             Text(
-                text = "Try searching or tapping quick filters",
+                "Add people and tags to build your search",
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
@@ -450,67 +545,33 @@ private fun EmptySearchState() {
 }
 
 @Composable
-private fun NoResultsState(query: String, hasFilters: Boolean) {
+private fun NoResultsState() {
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(32.dp),
         contentAlignment = Alignment.Center
     ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
-            modifier = Modifier.padding(32.dp)
         ) {
             Icon(
                 Icons.Default.SearchOff,
                 contentDescription = null,
-                modifier = Modifier.size(80.dp),
+                modifier = Modifier.size(64.dp),
-                tint = MaterialTheme.colorScheme.error.copy(alpha = 0.5f)
+                tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
             )
             Text(
-                text = "No results found",
+                "No photos found",
                 style = MaterialTheme.typography.titleLarge,
                 fontWeight = FontWeight.Bold
             )
-            if (query.isNotBlank()) {
             Text(
-                    text = "No matches for \"$query\"",
+                "Try different filters",
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
         }
-            if (hasFilters) {
-                Text(
-                    text = "Try removing some filters",
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
-        }
-    }
-}
-
-/**
- * Get emoji for tag type
- */
-private fun getTagEmoji(tagValue: String): String {
-    return when (tagValue) {
-        "night" -> "🌙"
-        "morning" -> "🌅"
-        "afternoon" -> "☀️"
-        "evening" -> "🌇"
-        "indoor" -> "🏠"
-        "outdoor" -> "🌲"
-        "group_photo" -> "👥"
-        "selfie" -> "🤳"
-        "couple" -> "💑"
-        "family" -> "👨‍👩‍👧"
-        "friend" -> "🤝"
-        "birthday" -> "🎂"
-        "high_res" -> "⭐"
-        "low_res" -> "📦"
-        "landscape" -> "🖼️"
-        "portrait" -> "📱"
-        "square" -> "⬜"
-        else -> "🏷️"
     }
 }

app/src/main/java/com/placeholder/sherpai2/ui/search/SearchViewModel.kt

@@ -2,13 +2,13 @@ package com.placeholder.sherpai2.ui.search
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import com.placeholder.sherpai2.data.local.dao.ImageAggregateDao
+import com.placeholder.sherpai2.data.local.dao.PersonDao
 import com.placeholder.sherpai2.data.local.dao.TagDao
 import com.placeholder.sherpai2.data.local.entity.ImageEntity
 import com.placeholder.sherpai2.data.local.entity.PersonEntity
 import com.placeholder.sherpai2.data.local.entity.PhotoFaceTagEntity
-import com.placeholder.sherpai2.data.local.entity.TagEntity
 import com.placeholder.sherpai2.data.repository.FaceRecognitionRepository
-import com.placeholder.sherpai2.domain.repository.ImageRepository
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.*
 import kotlinx.coroutines.launch
@@ -16,220 +16,241 @@ import java.util.Calendar
 import javax.inject.Inject
 
 /**
- * SearchViewModel - COMPLETE REDESIGN
+ * OPTIMIZED SearchViewModel with Boolean Logic
  *
- * Features:
+ * PERFORMANCE: NO N+1 QUERIES!
- * - Near-match search ("low" → "low_res", "gro" → "group_photo")
+ * ✅ ImageAggregateDao loads tags via @Relation (1 query for 100 images!)
- * - Date range filtering
+ * ✅ Person cache for O(1) faceModelId lookups
- * - Quick tag filters
+ * ✅ All filtering in memory (FAST)
- * - Clean person-only display
- * - Simple/Verbose toggle
  */
 @HiltViewModel
 class SearchViewModel @Inject constructor(
-    private val imageRepository: ImageRepository,
+    private val imageAggregateDao: ImageAggregateDao,
     private val faceRecognitionRepository: FaceRecognitionRepository,
+    private val personDao: PersonDao,
     private val tagDao: TagDao
 ) : ViewModel() {
 
-    // Search query with near-match support
     private val _searchQuery = MutableStateFlow("")
     val searchQuery: StateFlow<String> = _searchQuery.asStateFlow()
 
-    // Active tag filters (quick chips)
+    private val _includedPeople = MutableStateFlow<Set<String>>(emptySet())
-    private val _activeTagFilters = MutableStateFlow<Set<String>>(emptySet())
+    val includedPeople: StateFlow<Set<String>> = _includedPeople.asStateFlow()
-    val activeTagFilters: StateFlow<Set<String>> = _activeTagFilters.asStateFlow()
+
+    private val _excludedPeople = MutableStateFlow<Set<String>>(emptySet())
+    val excludedPeople: StateFlow<Set<String>> = _excludedPeople.asStateFlow()
+
+    private val _includedTags = MutableStateFlow<Set<String>>(emptySet())
+    val includedTags: StateFlow<Set<String>> = _includedTags.asStateFlow()
+
+    private val _excludedTags = MutableStateFlow<Set<String>>(emptySet())
+    val excludedTags: StateFlow<Set<String>> = _excludedTags.asStateFlow()
 
-    // Date range filter
     private val _dateRange = MutableStateFlow(DateRange.ALL_TIME)
     val dateRange: StateFlow<DateRange> = _dateRange.asStateFlow()
 
-    // Display mode (simple = names only, verbose = icons + percentages)
+    private val _availablePeople = MutableStateFlow<List<PersonEntity>>(emptyList())
-    private val _displayMode = MutableStateFlow(DisplayMode.SIMPLE)
+    val availablePeople: StateFlow<List<PersonEntity>> = _availablePeople.asStateFlow()
-    val displayMode: StateFlow<DisplayMode> = _displayMode.asStateFlow()
 
-    // Available system tags for quick filters
+    private val _availableTags = MutableStateFlow<List<String>>(emptyList())
-    private val _systemTags = MutableStateFlow<List<TagEntity>>(emptyList())
+    val availableTags: StateFlow<List<String>> = _availableTags.asStateFlow()
-    val systemTags: StateFlow<List<TagEntity>> = _systemTags.asStateFlow()
+
+    private val personCache = mutableMapOf<String, String>()
 
     init {
-        loadSystemTags()
+        loadAvailableFilters()
+        buildPersonCache()
+    }
+
+    private fun buildPersonCache() {
+        viewModelScope.launch {
+            val people = personDao.getAllPersons()
+            people.forEach { person ->
+                val stats = faceRecognitionRepository.getPersonFaceStats(person.id)
+                if (stats != null) {
+                    personCache[stats.faceModelId] = person.id
+                }
+            }
+        }
     }
 
-    /**
-     * Main search flow - combines query, tag filters, and date range
-     */
     fun searchImages(): Flow<List<ImageWithFaceTags>> {
         return combine(
             _searchQuery,
-            _activeTagFilters,
+            _includedPeople,
+            _excludedPeople,
+            _includedTags,
+            _excludedTags,
             _dateRange
-        ) { query, tagFilters, dateRange ->
+        ) { values: Array<*> ->
-            Triple(query, tagFilters, dateRange)
+            SearchCriteria(
-        }.flatMapLatest { (query, tagFilters, dateRange) ->
+                query = values[0] as String,
-
+                includedPeople = values[1] as Set<String>,
-            channelFlow {
+                excludedPeople = values[2] as Set<String>,
-                // Get matching tags FIRST (suspend call)
+                includedTags = values[3] as Set<String>,
-                val matchingTags = if (query.isNotBlank()) {
+                excludedTags = values[4] as Set<String>,
-                    findMatchingTags(query)
+                dateRange = values[5] as DateRange
-                } else {
-                    emptyList()
-                }
-
-                // Get base images
-                val imagesFlow = when {
-                    matchingTags.isNotEmpty() -> {
-                        // Search by all matching tags
-                        combine(matchingTags.map { tag ->
-                            imageRepository.findImagesByTag(tag.value)
-                        }) { results ->
-                            results.flatMap { it }.distinctBy { it.image.imageId }
-                        }
-                    }
-                    tagFilters.isNotEmpty() -> {
-                        // Filter by active tags
-                        combine(tagFilters.map { tagValue ->
-                            imageRepository.findImagesByTag(tagValue)
-                        }) { results ->
-                            results.flatMap { it }.distinctBy { it.image.imageId }
-                        }
-                    }
-                    else -> imageRepository.getAllImages()
-                }
-
-                // Apply date filtering and add face data
-                imagesFlow.collect { imagesList ->
-                    val filtered = imagesList
-                        .filter { imageWithEverything ->
-                            isInDateRange(imageWithEverything.image.capturedAt, dateRange)
-                        }
-                        .map { imageWithEverything ->
-                            // Get face tags with person info
-                            val tagsWithPersons = faceRecognitionRepository.getFaceTagsWithPersons(
-                                imageWithEverything.image.imageId
             )
+        }.flatMapLatest { criteria ->
+            imageAggregateDao.observeAllImagesWithEverything()
+                .map { imagesList ->
+                    imagesList.mapNotNull { imageWithEverything ->
+                        if (!isInDateRange(imageWithEverything.image.capturedAt, criteria.dateRange)) {
+                            return@mapNotNull null
+                        }
+
+                        val personIds = imageWithEverything.faceTags
+                            .mapNotNull { faceTag -> personCache[faceTag.faceModelId] }
+                            .toSet()
+
+                        val imageTags = imageWithEverything.tags
+                            .map { it.value }
+                            .toSet()
+
+                        val passesFilter = applyBooleanLogic(
+                            personIds = personIds,
+                            imageTags = imageTags,
+                            criteria = criteria
+                        )
+
+                        if (passesFilter) {
+                            val persons = personIds.mapNotNull { personId ->
+                                _availablePeople.value.find { it.id == personId }
+                            }
 
                             ImageWithFaceTags(
                                 image = imageWithEverything.image,
-                                faceTags = tagsWithPersons.map { it.first },
+                                faceTags = imageWithEverything.faceTags,
-                                persons = tagsWithPersons.map { it.second }
+                                persons = persons
                             )
+                        } else {
+                            null
                         }
-                        .sortedByDescending { it.image.capturedAt }
+                    }.sortedByDescending { it.image.capturedAt }
-
-                    send(filtered)
-                }
-            }
-        }
-    }
-
-    /**
-     * Near-match search: "low" matches "low_res", "gro" matches "group_photo"
-     */
-    private suspend fun findMatchingTags(query: String): List<TagEntity> {
-        val normalizedQuery = query.trim().lowercase()
-
-        // Get all system tags
-        val allTags = tagDao.getByType("SYSTEM")
-
-        // Find tags that contain the query or match it closely
-        return allTags.filter { tag ->
-            val tagValue = tag.value.lowercase()
-
-            // Exact match
-            tagValue == normalizedQuery ||
-                    // Contains match
-                    tagValue.contains(normalizedQuery) ||
-                    // Starts with match
-                    tagValue.startsWith(normalizedQuery) ||
-                    // Fuzzy match (remove underscores and compare)
-                    tagValue.replace("_", "").contains(normalizedQuery.replace("_", ""))
-        }.sortedBy { tag ->
-            // Sort by relevance: exact > starts with > contains
-            when {
-                tag.value.lowercase() == normalizedQuery -> 0
-                tag.value.lowercase().startsWith(normalizedQuery) -> 1
-                else -> 2
                 }
         }
     }
 
-    /**
+    private fun applyBooleanLogic(
-     * Load available system tags for quick filters
+        personIds: Set<String>,
-     */
+        imageTags: Set<String>,
-    private fun loadSystemTags() {
+        criteria: SearchCriteria
+    ): Boolean {
+        val hasAllIncludedPeople = if (criteria.includedPeople.isNotEmpty()) {
+            criteria.includedPeople.all { it in personIds }
+        } else true
+
+        val hasNoExcludedPeople = if (criteria.excludedPeople.isNotEmpty()) {
+            criteria.excludedPeople.none { it in personIds }
+        } else true
+
+        val hasAllIncludedTags = if (criteria.includedTags.isNotEmpty()) {
+            criteria.includedTags.all { it in imageTags }
+        } else true
+
+        val hasNoExcludedTags = if (criteria.excludedTags.isNotEmpty()) {
+            criteria.excludedTags.none { it in imageTags }
+        } else true
+
+        val matchesTextSearch = if (criteria.query.isNotBlank()) {
+            val normalizedQuery = criteria.query.trim().lowercase()
+            imageTags.any { tag -> tag.lowercase().contains(normalizedQuery) }
+        } else true
+
+        return hasAllIncludedPeople && hasNoExcludedPeople &&
+                hasAllIncludedTags && hasNoExcludedTags &&
+                matchesTextSearch
+    }
+
+    private fun loadAvailableFilters() {
         viewModelScope.launch {
-            val tags = tagDao.getByType("SYSTEM")
+            val people = personDao.getAllPersons()
+            _availablePeople.value = people.sortedBy { it.name }
 
-            // Get usage counts for all tags
+            val tags = tagDao.getByType("SYSTEM")
             val tagsWithUsage = tags.map { tag ->
                 tag to tagDao.getTagUsageCount(tag.tagId)
             }
-
+            _availableTags.value = tagsWithUsage
-            // Sort by most commonly used
-            val sortedTags = tagsWithUsage
                 .sortedByDescending { (_, usageCount) -> usageCount }
-                .take(12) // Show top 12 most used tags
+                .take(30)
-                .map { (tag, _) -> tag }
+                .map { (tag, _) -> tag.value }
-
-            _systemTags.value = sortedTags
         }
     }
 
-    /**
+    fun includePerson(personId: String) {
-     * Update search query
+        _includedPeople.value = _includedPeople.value + personId
-     */
+        _excludedPeople.value = _excludedPeople.value - personId
+    }
+
+    fun excludePerson(personId: String) {
+        _excludedPeople.value = _excludedPeople.value + personId
+        _includedPeople.value = _includedPeople.value - personId
+    }
+
+    fun removePersonFilter(personId: String) {
+        _includedPeople.value = _includedPeople.value - personId
+        _excludedPeople.value = _excludedPeople.value - personId
+    }
+
+    fun includeTag(tagValue: String) {
+        _includedTags.value = _includedTags.value + tagValue
+        _excludedTags.value = _excludedTags.value - tagValue
+    }
+
+    fun excludeTag(tagValue: String) {
+        _excludedTags.value = _excludedTags.value + tagValue
+        _includedTags.value = _includedTags.value - tagValue
+    }
+
+    fun removeTagFilter(tagValue: String) {
+        _includedTags.value = _includedTags.value - tagValue
+        _excludedTags.value = _excludedTags.value - tagValue
+    }
+
     fun setSearchQuery(query: String) {
         _searchQuery.value = query
     }
 
-    /**
-     * Toggle a tag filter
-     */
-    fun toggleTagFilter(tagValue: String) {
-        _activeTagFilters.value = if (tagValue in _activeTagFilters.value) {
-            _activeTagFilters.value - tagValue
-        } else {
-            _activeTagFilters.value + tagValue
-        }
-    }
-
-    /**
-     * Clear all tag filters
-     */
-    fun clearTagFilters() {
-        _activeTagFilters.value = emptySet()
-    }
-
-    /**
-     * Set date range filter
-     */
     fun setDateRange(range: DateRange) {
         _dateRange.value = range
     }
 
-    /**
+    fun clearAllFilters() {
-     * Toggle display mode (simple/verbose)
+        _searchQuery.value = ""
-     */
+        _includedPeople.value = emptySet()
-    fun toggleDisplayMode() {
+        _excludedPeople.value = emptySet()
-        _displayMode.value = when (_displayMode.value) {
+        _includedTags.value = emptySet()
-            DisplayMode.SIMPLE -> DisplayMode.VERBOSE
+        _excludedTags.value = emptySet()
-            DisplayMode.VERBOSE -> DisplayMode.SIMPLE
+        _dateRange.value = DateRange.ALL_TIME
-        }
     }
 
-    /**
+    fun hasActiveFilters(): Boolean {
-     * Check if timestamp is in date range
+        return _searchQuery.value.isNotBlank() ||
-     */
+                _includedPeople.value.isNotEmpty() ||
-    private fun isInDateRange(timestamp: Long, range: DateRange): Boolean {
+                _excludedPeople.value.isNotEmpty() ||
-        return when (range) {
+                _includedTags.value.isNotEmpty() ||
+                _excludedTags.value.isNotEmpty() ||
+                _dateRange.value != DateRange.ALL_TIME
+    }
+
+    fun getSearchSummary(): String {
+        val parts = mutableListOf<String>()
+        if (_includedPeople.value.isNotEmpty()) parts.add("WITH: ${_includedPeople.value.size} people")
+        if (_excludedPeople.value.isNotEmpty()) parts.add("WITHOUT: ${_excludedPeople.value.size} people")
+        if (_includedTags.value.isNotEmpty()) parts.add("HAS: ${_includedTags.value.size} tags")
+        if (_excludedTags.value.isNotEmpty()) parts.add("NOT: ${_excludedTags.value.size} tags")
+        if (_dateRange.value != DateRange.ALL_TIME) parts.add(_dateRange.value.displayName)
+        return parts.joinToString(" • ")
+    }
+
+    private fun isInDateRange(timestamp: Long, range: DateRange): Boolean = when (range) {
         DateRange.ALL_TIME -> true
         DateRange.TODAY -> isToday(timestamp)
         DateRange.THIS_WEEK -> isThisWeek(timestamp)
         DateRange.THIS_MONTH -> isThisMonth(timestamp)
         DateRange.THIS_YEAR -> isThisYear(timestamp)
     }
-    }
 
     private fun isToday(timestamp: Long): Boolean {
         val today = Calendar.getInstance()
@@ -259,18 +280,21 @@ class SearchViewModel @Inject constructor(
     }
 }
 
-/**
+private data class SearchCriteria(
- * Data class containing image with face recognition data
+    val query: String,
- */
+    val includedPeople: Set<String>,
+    val excludedPeople: Set<String>,
+    val includedTags: Set<String>,
+    val excludedTags: Set<String>,
+    val dateRange: DateRange
+)
+
 data class ImageWithFaceTags(
     val image: ImageEntity,
     val faceTags: List<PhotoFaceTagEntity>,
     val persons: List<PersonEntity>
 )
 
-/**
- * Date range filters
- */
 enum class DateRange(val displayName: String) {
     ALL_TIME("All Time"),
     TODAY("Today"),
@@ -279,10 +303,5 @@ enum class DateRange(val displayName: String) {
     THIS_YEAR("This Year")
 }
 
-/**
+@Deprecated("No longer used")
- * Display modes for photo tags
+enum class DisplayMode { SIMPLE, VERBOSE }
- */
-enum class DisplayMode {
-    SIMPLE,    // Just person names
-    VERBOSE    // Names + icons + confidence percentages
-}

app/src/main/java/com/placeholder/sherpai2/ui/tags/Tagmanagementscreen.kt

@@ -24,9 +24,24 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.placeholder.sherpai2.data.local.entity.TagWithUsage
 
+/**
+ * CLEANED TagManagementScreen - No Scaffold wrapper
+ *
+ * Removed:
+ * - Scaffold wrapper (line 38)
+ * - Moved FAB inline as part of content
+ *
+ * Features:
+ * - Tag list with usage counts
+ * - Search functionality
+ * - Scanning progress
+ * - Delete tags
+ * - System/User tag distinction
+ */
 @Composable
 fun TagManagementScreen(
-    viewModel: TagManagementViewModel = hiltViewModel()
+    viewModel: TagManagementViewModel = hiltViewModel(),
+    modifier: Modifier = Modifier
 ) {
     val uiState by viewModel.uiState.collectAsState()
     val scanningState by viewModel.scanningState.collectAsState()
@@ -35,105 +50,8 @@ fun TagManagementScreen(
     var showScanMenu by remember { mutableStateOf(false) }
     var searchQuery by remember { mutableStateOf("") }
 
-    Scaffold(
+    Box(modifier = modifier.fillMaxSize()) {
-        floatingActionButton = {
+        Column(modifier = Modifier.fillMaxSize()) {
-            // Single extended FAB with dropdown menu
-            var showMenu by remember { mutableStateOf(false) }
-
-            Column(
-                horizontalAlignment = Alignment.End,
-                verticalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                // Dropdown menu for scan options
-                if (showMenu) {
-                    Card(
-                        modifier = Modifier.width(180.dp),
-                        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
-                    ) {
-                        Column {
-                            ListItem(
-                                headlineContent = { Text("Scan All", style = MaterialTheme.typography.bodyMedium) },
-                                leadingContent = {
-                                    Icon(
-                                        Icons.Default.AutoFixHigh,
-                                        null,
-                                        tint = MaterialTheme.colorScheme.primary,
-                                        modifier = Modifier.size(20.dp)
-                                    )
-                                },
-                                modifier = Modifier.clickable {
-                                    viewModel.scanForAllTags()
-                                    showMenu = false
-                                }
-                            )
-                            ListItem(
-                                headlineContent = { Text("Base Tags", style = MaterialTheme.typography.bodyMedium) },
-                                leadingContent = {
-                                    Icon(
-                                        Icons.Default.PhotoCamera,
-                                        null,
-                                        tint = MaterialTheme.colorScheme.primary,
-                                        modifier = Modifier.size(20.dp)
-                                    )
-                                },
-                                modifier = Modifier.clickable {
-                                    viewModel.scanForBaseTags()
-                                    showMenu = false
-                                }
-                            )
-                            ListItem(
-                                headlineContent = { Text("Relationships", style = MaterialTheme.typography.bodyMedium) },
-                                leadingContent = {
-                                    Icon(
-                                        Icons.Default.People,
-                                        null,
-                                        tint = MaterialTheme.colorScheme.primary,
-                                        modifier = Modifier.size(20.dp)
-                                    )
-                                },
-                                modifier = Modifier.clickable {
-                                    viewModel.scanForRelationshipTags()
-                                    showMenu = false
-                                }
-                            )
-                            ListItem(
-                                headlineContent = { Text("Birthdays", style = MaterialTheme.typography.bodyMedium) },
-                                leadingContent = {
-                                    Icon(
-                                        Icons.Default.Cake,
-                                        null,
-                                        tint = MaterialTheme.colorScheme.primary,
-                                        modifier = Modifier.size(20.dp)
-                                    )
-                                },
-                                modifier = Modifier.clickable {
-                                    viewModel.scanForBirthdayTags()
-                                    showMenu = false
-                                }
-                            )
-                        }
-                    }
-                }
-
-                // Main FAB
-                ExtendedFloatingActionButton(
-                    onClick = { showMenu = !showMenu },
-                    icon = {
-                        Icon(
-                            if (showMenu) Icons.Default.Close else Icons.Default.AutoFixHigh,
-                            "Scan"
-                        )
-                    },
-                    text = { Text(if (showMenu) "Close" else "Scan Tags") }
-                )
-            }
-        }
-    ) { paddingValues ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(paddingValues)
-        ) {
             // Stats Bar
             StatsBar(uiState)
 
@@ -166,16 +84,30 @@ fun TagManagementScreen(
                     }
                 }
                 is TagManagementViewModel.TagUiState.Success -> {
+                    if (state.tags.isEmpty()) {
+                        EmptyTagsView()
+                    } else {
                         TagList(
                             tags = state.tags,
                             onDeleteTag = { viewModel.deleteTag(it) }
                         )
                     }
+                }
                 is TagManagementViewModel.TagUiState.Error -> {
                     Box(
                         modifier = Modifier.fillMaxSize(),
                         contentAlignment = Alignment.Center
                     ) {
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            verticalArrangement = Arrangement.spacedBy(8.dp)
+                        ) {
+                            Icon(
+                                Icons.Default.Error,
+                                contentDescription = null,
+                                modifier = Modifier.size(48.dp),
+                                tint = MaterialTheme.colorScheme.error
+                            )
                             Text(
                                 text = state.message,
                                 color = MaterialTheme.colorScheme.error
@@ -186,6 +118,28 @@ fun TagManagementScreen(
             }
         }
 
+        // FAB (inline, positioned over content)
+        ScanFAB(
+            showMenu = showScanMenu,
+            onToggleMenu = { showScanMenu = !showScanMenu },
+            onScanAll = {
+                viewModel.scanForAllTags()
+                showScanMenu = false
+            },
+            onScanBase = {
+                viewModel.scanForBaseTags()
+                showScanMenu = false
+            },
+            onScanRelationships = {
+                viewModel.scanForRelationshipTags()
+                showScanMenu = false
+            },
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(16.dp)
+        )
+    }
+
     // Add Tag Dialog
     if (showAddTagDialog) {
         AddTagDialog(
@@ -196,73 +150,77 @@ fun TagManagementScreen(
             }
         )
     }
-
-    // Scan Menu
-    if (showScanMenu) {
-        ScanMenuDialog(
-            onDismiss = { showScanMenu = false },
-            onScanSelected = { scanType ->
-                when (scanType) {
-                    TagManagementViewModel.ScanType.BASE_TAGS -> viewModel.scanForBaseTags()
-                    TagManagementViewModel.ScanType.RELATIONSHIP_TAGS -> viewModel.scanForRelationshipTags()
-                    TagManagementViewModel.ScanType.BIRTHDAY_TAGS -> viewModel.scanForBirthdayTags()
-                    TagManagementViewModel.ScanType.SCENE_TAGS -> viewModel.scanForSceneTags()
-                    TagManagementViewModel.ScanType.ALL -> viewModel.scanForAllTags()
-                }
-                showScanMenu = false
-            }
-        )
-    }
 }
 
+/**
+ * Stats bar at top
+ */
 @Composable
 private fun StatsBar(uiState: TagManagementViewModel.TagUiState) {
-    if (uiState is TagManagementViewModel.TagUiState.Success) {
+    val (totalTags, totalPhotos) = when (uiState) {
-        Card(
+        is TagManagementViewModel.TagUiState.Success -> {
-            modifier = Modifier
+            val photoCount: Int = uiState.tags.sumOf { it.usageCount }
-                .fillMaxWidth()
+            uiState.tags.size to photoCount
-                .padding(16.dp),
+        }
-            colors = CardDefaults.cardColors(
+        else -> 0 to 0
-                containerColor = MaterialTheme.colorScheme.primaryContainer
+    }
-            )
+
+    Surface(
+        modifier = Modifier.fillMaxWidth(),
+        color = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(16.dp),
-                horizontalArrangement = Arrangement.SpaceAround
+            horizontalArrangement = Arrangement.SpaceEvenly
         ) {
-                StatItem("Total", uiState.totalTags.toString(), Icons.Default.Label)
+            StatItem(
-                StatItem("System", uiState.systemTags.toString(), Icons.Default.AutoAwesome)
+                icon = Icons.Default.Label,
-                StatItem("User", uiState.userTags.toString(), Icons.Default.PersonOutline)
+                value = totalTags.toString(),
-            }
+                label = "Tags"
+            )
+            VerticalDivider(
+                modifier = Modifier.height(48.dp),
+                color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)
+            )
+            StatItem(
+                icon = Icons.Default.Photo,
+                value = totalPhotos.toString(),
+                label = "Tagged Photos"
+            )
         }
     }
 }
 
 @Composable
-private fun StatItem(label: String, value: String, icon: ImageVector) {
+private fun StatItem(icon: ImageVector, value: String, label: String) {
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
         Icon(
-            imageVector = icon,
+            icon,
             contentDescription = null,
-            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(24.dp),
-            modifier = Modifier.size(24.dp)
+            tint = MaterialTheme.colorScheme.primary
         )
-        Spacer(modifier = Modifier.height(4.dp))
         Text(
-            text = value,
+            value,
             style = MaterialTheme.typography.headlineSmall,
             fontWeight = FontWeight.Bold
         )
         Text(
-            text = label,
+            label,
-            style = MaterialTheme.typography.bodySmall,
+            style = MaterialTheme.typography.labelMedium,
             color = MaterialTheme.colorScheme.onSurfaceVariant
         )
     }
 }
 
+/**
+ * Search bar
+ */
 @Composable
 private fun SearchBar(
     searchQuery: String,
@@ -273,9 +231,9 @@ private fun SearchBar(
         onValueChange = onSearchChange,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp),
+            .padding(16.dp),
         placeholder = { Text("Search tags...") },
-        leadingIcon = { Icon(Icons.Default.Search, "Search") },
+        leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
         trailingIcon = {
             if (searchQuery.isNotEmpty()) {
                 IconButton(onClick = { onSearchChange("") }) {
@@ -283,96 +241,124 @@ private fun SearchBar(
                 }
             }
         },
-        singleLine = true
+        singleLine = true,
+        shape = RoundedCornerShape(16.dp)
     )
 }
 
+/**
+ * Scanning progress indicator
+ */
 @Composable
 private fun ScanningProgress(
     scanningState: TagManagementViewModel.TagScanningState,
     viewModel: TagManagementViewModel
 ) {
+    when (scanningState) {
+        is TagManagementViewModel.TagScanningState.Scanning -> {
             Card(
                 modifier = Modifier
                     .fillMaxWidth()
-            .padding(16.dp),
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
                 colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.secondaryContainer
+                    containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f)
                 )
             ) {
                 Column(
+                    modifier = Modifier.padding(16.dp),
+                    verticalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            "Scanning: ${scanningState.scanType}",
+                            style = MaterialTheme.typography.titleSmall,
+                            fontWeight = FontWeight.SemiBold
+                        )
+                        Text(
+                            "${scanningState.progress}/${scanningState.total}",
+                            style = MaterialTheme.typography.bodySmall
+                        )
+                    }
+                    LinearProgressIndicator(
+                        progress = {
+                            if (scanningState.total > 0) {
+                                scanningState.progress.toFloat() / scanningState.total.toFloat()
+                            } else {
+                                0f
+                            }
+                        },
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                    Text(
+                        "Tags applied: ${scanningState.tagsApplied}",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                    if (scanningState.currentImage.isNotEmpty()) {
+                        Text(
+                            "Current: ${scanningState.currentImage}",
+                            style = MaterialTheme.typography.labelSmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant
+                        )
+                    }
+                }
+            }
+        }
+        is TagManagementViewModel.TagScanningState.Complete -> {
+            Card(
                 modifier = Modifier
                     .fillMaxWidth()
-                .padding(16.dp)
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
+                colors = CardDefaults.cardColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer
+                )
             ) {
-            when (scanningState) {
+                Row(
-                is TagManagementViewModel.TagScanningState.Scanning -> {
+                    modifier = Modifier.padding(16.dp),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Icon(
+                        Icons.Default.CheckCircle,
+                        contentDescription = null,
+                        tint = MaterialTheme.colorScheme.primary
+                    )
+                    Column {
                         Text(
-                        text = "Scanning: ${scanningState.scanType.name.replace("_", " ")}",
+                            "Scan Complete!",
-                        style = MaterialTheme.typography.titleMedium,
+                            style = MaterialTheme.typography.titleSmall,
                             fontWeight = FontWeight.Bold
                         )
-                    Spacer(modifier = Modifier.height(8.dp))
-                    LinearProgressIndicator(
-                        progress = { scanningState.progress.toFloat() / scanningState.total.toFloat() },
-                        modifier = Modifier.fillMaxWidth(),
-                    )
-                    Spacer(modifier = Modifier.height(4.dp))
                         Text(
-                        text = "${scanningState.progress} / ${scanningState.total} images",
+                            "Processed: ${scanningState.imagesProcessed} images",
                             style = MaterialTheme.typography.bodySmall
                         )
                         Text(
-                        text = "Tags applied: ${scanningState.tagsApplied}",
+                            "Applied: ${scanningState.tagsApplied} tags",
+                            style = MaterialTheme.typography.bodySmall
+                        )
+                        if (scanningState.newTagsCreated > 0) {
+                            Text(
+                                "Created: ${scanningState.newTagsCreated} new tags",
                                 style = MaterialTheme.typography.bodySmall,
                                 color = MaterialTheme.colorScheme.primary
                             )
                         }
-                is TagManagementViewModel.TagScanningState.Complete -> {
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Column {
-                            Text(
-                                text = "✓ Scan Complete",
-                                style = MaterialTheme.typography.titleMedium,
-                                fontWeight = FontWeight.Bold,
-                                color = MaterialTheme.colorScheme.primary
-                            )
-                            Text(
-                                text = "${scanningState.tagsApplied} tags applied to ${scanningState.imagesProcessed} images",
-                                style = MaterialTheme.typography.bodySmall
-                            )
-                        }
-                        IconButton(onClick = { viewModel.resetScanningState() }) {
-                            Icon(Icons.Default.Close, "Close")
                     }
                 }
             }
-                is TagManagementViewModel.TagScanningState.Error -> {
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Text(
-                            text = "Error: ${scanningState.message}",
-                            style = MaterialTheme.typography.bodyMedium,
-                            color = MaterialTheme.colorScheme.error
-                        )
-                        IconButton(onClick = { viewModel.resetScanningState() }) {
-                            Icon(Icons.Default.Close, "Close")
-                        }
-                    }
-                }
-                else -> { /* Idle - don't show */ }
-            }
         }
+        else -> {}
     }
 }
 
+/**
+ * Tag list
+ */
 @Composable
 private fun TagList(
     tags: List<TagWithUsage>,
@@ -383,82 +369,100 @@ private fun TagList(
         contentPadding = PaddingValues(16.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
-        items(tags, key = { it.tagId }) { tag ->
+        items(tags) { tagWithUsage ->
-            TagListItem(tag, onDeleteTag)
+            TagCard(
+                tagWithUsage = tagWithUsage,
+                onDelete = { onDeleteTag(tagWithUsage.tagId) }
+            )
         }
     }
 }
 
+/**
+ * Individual tag card
+ */
 @Composable
-private fun TagListItem(
+private fun TagCard(
-    tag: TagWithUsage,
+    tagWithUsage: TagWithUsage,
-    onDeleteTag: (String) -> Unit
+    onDelete: () -> Unit
 ) {
-    var showDeleteConfirm by remember { mutableStateOf(false) }
+    val isSystemTag = tagWithUsage.type == "SYSTEM"
 
     Card(
         modifier = Modifier.fillMaxWidth(),
-        onClick = { /* TODO: Navigate to images with this tag */ }
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
     ) {
         Row(
-            modifier = Modifier
+            modifier = Modifier.padding(16.dp),
-                .fillMaxWidth()
-                .padding(16.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
             Row(
+                modifier = Modifier.weight(1f),
                 horizontalArrangement = Arrangement.spacedBy(12.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                // Tag type icon
+                // Tag icon
-                Icon(
+                Surface(
-                    imageVector = if (tag.type == "SYSTEM") Icons.Default.AutoAwesome else Icons.Default.Label,
+                    modifier = Modifier.size(40.dp),
-                    contentDescription = null,
+                    shape = RoundedCornerShape(8.dp),
-                    tint = if (tag.type == "SYSTEM")
+                    color = if (isSystemTag)
-                        MaterialTheme.colorScheme.secondary
+                        MaterialTheme.colorScheme.primaryContainer
                     else
-                        MaterialTheme.colorScheme.primary
+                        MaterialTheme.colorScheme.secondaryContainer
+                ) {
+                    Box(contentAlignment = Alignment.Center) {
+                        Icon(
+                            if (isSystemTag) Icons.Default.AutoAwesome else Icons.Default.Label,
+                            contentDescription = null,
+                            modifier = Modifier.size(20.dp),
+                            tint = if (isSystemTag)
+                                MaterialTheme.colorScheme.onPrimaryContainer
+                            else
+                                MaterialTheme.colorScheme.onSecondaryContainer
                         )
+                    }
+                }
 
+                // Tag info
                 Column {
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
                         Text(
-                        text = tag.value,
+                            text = tagWithUsage.value,
                             style = MaterialTheme.typography.titleMedium,
-                        fontWeight = FontWeight.Medium
+                            fontWeight = FontWeight.SemiBold
                         )
+                        if (isSystemTag) {
+                            Surface(
+                                shape = RoundedCornerShape(4.dp),
+                                color = MaterialTheme.colorScheme.primary.copy(alpha = 0.1f)
+                            ) {
                                 Text(
-                        text = if (tag.type == "SYSTEM") "System tag" else "User tag",
+                                    "SYSTEM",
+                                    modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp),
+                                    style = MaterialTheme.typography.labelSmall,
+                                    color = MaterialTheme.colorScheme.primary
+                                )
+                            }
+                        }
+                    }
+                    Text(
+                        text = "${tagWithUsage.usageCount} ${if (tagWithUsage.usageCount == 1) "photo" else "photos"}",
                         style = MaterialTheme.typography.bodySmall,
                         color = MaterialTheme.colorScheme.onSurfaceVariant
                     )
                 }
             }
 
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                // Usage count badge
-                Surface(
-                    shape = RoundedCornerShape(12.dp),
-                    color = MaterialTheme.colorScheme.primaryContainer
-                ) {
-                    Text(
-                        text = tag.usageCount.toString(),
-                        modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
-                        style = MaterialTheme.typography.labelMedium,
-                        fontWeight = FontWeight.Bold,
-                        color = MaterialTheme.colorScheme.onPrimaryContainer
-                    )
-                }
-
             // Delete button (only for user tags)
-                if (tag.type == "GENERIC") {
+            if (!isSystemTag) {
-                    IconButton(onClick = { showDeleteConfirm = true }) {
+                IconButton(onClick = onDelete) {
                     Icon(
                         Icons.Default.Delete,
-                            contentDescription = "Delete tag",
+                        contentDescription = "Delete",
                         tint = MaterialTheme.colorScheme.error
                     )
                 }
@@ -467,30 +471,136 @@ private fun TagListItem(
     }
 }
 
-    if (showDeleteConfirm) {
+/**
-        AlertDialog(
+ * Empty state
-            onDismissRequest = { showDeleteConfirm = false },
+ */
-            title = { Text("Delete Tag?") },
+@Composable
-            text = { Text("Are you sure you want to delete '${tag.value}'? This will remove it from ${tag.usageCount} images.") },
+private fun EmptyTagsView() {
-            confirmButton = {
+    Box(
-                TextButton(
+        modifier = Modifier
-                    onClick = {
+            .fillMaxSize()
-                        onDeleteTag(tag.tagId)
+            .padding(32.dp),
-                        showDeleteConfirm = false
+        contentAlignment = Alignment.Center
-                    }
     ) {
-                    Text("Delete", color = MaterialTheme.colorScheme.error)
+        Column(
-                }
+            horizontalAlignment = Alignment.CenterHorizontally,
-            },
+            verticalArrangement = Arrangement.spacedBy(16.dp)
-            dismissButton = {
+        ) {
-                TextButton(onClick = { showDeleteConfirm = false }) {
+            Icon(
-                    Text("Cancel")
+                Icons.Default.LabelOff,
+                contentDescription = null,
+                modifier = Modifier.size(64.dp),
+                tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+            )
+            Text(
+                "No Tags Yet",
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Bold
+            )
+            Text(
+                "Scan your photos to generate tags automatically",
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = androidx.compose.ui.text.style.TextAlign.Center
+            )
         }
     }
+}
+
+/**
+ * Floating Action Button with scan menu
+ */
+@Composable
+private fun ScanFAB(
+    showMenu: Boolean,
+    onToggleMenu: () -> Unit,
+    onScanAll: () -> Unit,
+    onScanBase: () -> Unit,
+    onScanRelationships: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.End,
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        // Menu options
+        AnimatedVisibility(visible = showMenu) {
+            Column(
+                horizontalAlignment = Alignment.End,
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                SmallFAB(
+                    icon = Icons.Default.AutoFixHigh,
+                    text = "Scan All",
+                    onClick = onScanAll
+                )
+                SmallFAB(
+                    icon = Icons.Default.PhotoCamera,
+                    text = "Base Tags",
+                    onClick = onScanBase
+                )
+                SmallFAB(
+                    icon = Icons.Default.People,
+                    text = "Relationships",
+                    onClick = onScanRelationships
                 )
             }
         }
 
+        // Main FAB
+        ExtendedFloatingActionButton(
+            onClick = onToggleMenu,
+            icon = {
+                Icon(
+                    if (showMenu) Icons.Default.Close else Icons.Default.AutoFixHigh,
+                    "Scan"
+                )
+            },
+            text = { Text(if (showMenu) "Close" else "Scan Tags") },
+            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            contentColor = MaterialTheme.colorScheme.onPrimaryContainer
+        )
+    }
+}
+
+@Composable
+private fun SmallFAB(
+    icon: ImageVector,
+    text: String,
+    onClick: () -> Unit
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        Surface(
+            shape = RoundedCornerShape(8.dp),
+            color = MaterialTheme.colorScheme.surface,
+            shadowElevation = 2.dp
+        ) {
+            Text(
+                text,
+                modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
+                style = MaterialTheme.typography.bodySmall,
+                fontWeight = FontWeight.Medium
+            )
+        }
+
+        FloatingActionButton(
+            onClick = onClick,
+            modifier = Modifier.size(48.dp),
+            containerColor = MaterialTheme.colorScheme.secondaryContainer,
+            contentColor = MaterialTheme.colorScheme.onSecondaryContainer
+        ) {
+            Icon(icon, contentDescription = text, modifier = Modifier.size(20.dp))
+        }
+    }
+}
+
+/**
+ * Add tag dialog
+ */
 @Composable
 private fun AddTagDialog(
     onDismiss: () -> Unit,
@@ -500,18 +610,19 @@ private fun AddTagDialog(
 
     AlertDialog(
         onDismissRequest = onDismiss,
-        title = { Text("Add New Tag") },
+        icon = { Icon(Icons.Default.Add, contentDescription = null) },
+        title = { Text("Add Custom Tag") },
         text = {
             OutlinedTextField(
                 value = tagName,
                 onValueChange = { tagName = it },
-                label = { Text("Tag name") },
+                label = { Text("Tag Name") },
                 singleLine = true,
                 modifier = Modifier.fillMaxWidth()
             )
         },
         confirmButton = {
-            TextButton(
+            Button(
                 onClick = { onConfirm(tagName) },
                 enabled = tagName.isNotBlank()
             ) {
@@ -525,100 +636,3 @@ private fun AddTagDialog(
         }
     )
 }
-
-@Composable
-private fun ScanMenuDialog(
-    onDismiss: () -> Unit,
-    onScanSelected: (TagManagementViewModel.ScanType) -> Unit
-) {
-    AlertDialog(
-        onDismissRequest = onDismiss,
-        title = { Text("Scan for Tags") },
-        text = {
-            Column(
-                verticalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                ScanOption(
-                    title = "Base Tags",
-                    description = "Face count, orientation, time, quality",
-                    icon = Icons.Default.PhotoCamera,
-                    onClick = { onScanSelected(TagManagementViewModel.ScanType.BASE_TAGS) }
-                )
-                ScanOption(
-                    title = "Relationship Tags",
-                    description = "Family, friends, colleagues",
-                    icon = Icons.Default.People,
-                    onClick = { onScanSelected(TagManagementViewModel.ScanType.RELATIONSHIP_TAGS) }
-                )
-                ScanOption(
-                    title = "Birthday Tags",
-                    description = "Photos near birthdays",
-                    icon = Icons.Default.Cake,
-                    onClick = { onScanSelected(TagManagementViewModel.ScanType.BIRTHDAY_TAGS) }
-                )
-                ScanOption(
-                    title = "Scene Tags",
-                    description = "Indoor/outdoor detection",
-                    icon = Icons.Default.Landscape,
-                    onClick = { onScanSelected(TagManagementViewModel.ScanType.SCENE_TAGS) }
-                )
-                Divider()
-                ScanOption(
-                    title = "Scan All",
-                    description = "Run all scans",
-                    icon = Icons.Default.AutoFixHigh,
-                    onClick = { onScanSelected(TagManagementViewModel.ScanType.ALL) }
-                )
-            }
-        },
-        confirmButton = {
-            TextButton(onClick = onDismiss) {
-                Text("Cancel")
-            }
-        }
-    )
-}
-
-@Composable
-private fun ScanOption(
-    title: String,
-    description: String,
-    icon: ImageVector,
-    onClick: () -> Unit
-) {
-    Card(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clickable(onClick = onClick),
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surfaceVariant
-        )
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
-            horizontalArrangement = Arrangement.spacedBy(12.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Icon(
-                imageVector = icon,
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.primary,
-                modifier = Modifier.size(32.dp)
-            )
-            Column {
-                Text(
-                    text = title,
-                    style = MaterialTheme.typography.titleMedium,
-                    fontWeight = FontWeight.Medium
-                )
-                Text(
-                    text = description,
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
-        }
-    }
-}

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/Beautifulpersoninfodialog.kt

@@ -0,0 +1,373 @@
+package com.placeholder.sherpai2.ui.trainingprep
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import java.text.SimpleDateFormat
+import java.util.*
+
+/**
+ * BEAUTIFUL PersonInfoDialog - Modern, centered, spacious
+ *
+ * Improvements:
+ * - Full-screen dialog with proper centering
+ * - Better spacing and visual hierarchy
+ * - Larger touch targets
+ * - Scrollable content
+ * - Modern rounded design
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BeautifulPersonInfoDialog(
+    onDismiss: () -> Unit,
+    onConfirm: (name: String, dateOfBirth: Long?, relationship: String) -> Unit
+) {
+    var name by remember { mutableStateOf("") }
+    var dateOfBirth by remember { mutableStateOf<Long?>(null) }
+    var selectedRelationship by remember { mutableStateOf("Other") }
+    var showDatePicker by remember { mutableStateOf(false) }
+
+    val relationships = listOf(
+        "Family" to "👨‍👩‍👧‍👦",
+        "Friend" to "🤝",
+        "Partner" to "❤️",
+        "Parent" to "👪",
+        "Sibling" to "👫",
+        "Colleague" to "💼"
+    )
+
+    Dialog(
+        onDismissRequest = onDismiss,
+        properties = DialogProperties(usePlatformDefaultWidth = false)
+    ) {
+        Card(
+            modifier = Modifier
+                .fillMaxWidth(0.92f)
+                .fillMaxHeight(0.85f),
+            shape = RoundedCornerShape(28.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surface
+            ),
+            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
+        ) {
+            Column(
+                modifier = Modifier.fillMaxSize()
+            ) {
+                // Header with icon and close button
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(24.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(16.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Surface(
+                            shape = RoundedCornerShape(16.dp),
+                            color = MaterialTheme.colorScheme.primaryContainer,
+                            modifier = Modifier.size(64.dp)
+                        ) {
+                            Box(contentAlignment = Alignment.Center) {
+                                Icon(
+                                    Icons.Default.Person,
+                                    contentDescription = null,
+                                    modifier = Modifier.size(36.dp),
+                                    tint = MaterialTheme.colorScheme.primary
+                                )
+                            }
+                        }
+
+                        Column {
+                            Text(
+                                "Person Details",
+                                style = MaterialTheme.typography.headlineMedium,
+                                fontWeight = FontWeight.Bold
+                            )
+                            Text(
+                                "Help us organize your photos",
+                                style = MaterialTheme.typography.bodyMedium,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant
+                            )
+                        }
+                    }
+
+                    IconButton(onClick = onDismiss) {
+                        Icon(
+                            Icons.Default.Close,
+                            contentDescription = "Close",
+                            modifier = Modifier.size(24.dp)
+                        )
+                    }
+                }
+
+                HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
+
+                // Scrollable content
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .verticalScroll(rememberScrollState())
+                        .padding(24.dp),
+                    verticalArrangement = Arrangement.spacedBy(24.dp)
+                ) {
+                    // Name field
+                    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                        Text(
+                            "Name *",
+                            style = MaterialTheme.typography.titleSmall,
+                            fontWeight = FontWeight.SemiBold,
+                            color = MaterialTheme.colorScheme.primary
+                        )
+                        OutlinedTextField(
+                            value = name,
+                            onValueChange = { name = it },
+                            placeholder = { Text("e.g., John Doe") },
+                            leadingIcon = {
+                                Icon(Icons.Default.Face, contentDescription = null)
+                            },
+                            modifier = Modifier.fillMaxWidth(),
+                            singleLine = true,
+                            shape = RoundedCornerShape(16.dp),
+                            keyboardOptions = androidx.compose.foundation.text.KeyboardOptions(
+                                capitalization = KeyboardCapitalization.Words
+                            )
+                        )
+                    }
+
+                    // Birthday (Optional)
+                    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                        Text(
+                            "Birthday (Optional)",
+                            style = MaterialTheme.typography.titleSmall,
+                            fontWeight = FontWeight.SemiBold
+                        )
+                        OutlinedButton(
+                            onClick = { showDatePicker = true },
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(56.dp),
+                            shape = RoundedCornerShape(16.dp),
+                            colors = ButtonDefaults.outlinedButtonColors(
+                                containerColor = if (dateOfBirth != null)
+                                    MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
+                                else
+                                    MaterialTheme.colorScheme.surface
+                            )
+                        ) {
+                            Icon(
+                                Icons.Default.Cake,
+                                contentDescription = null,
+                                modifier = Modifier.size(24.dp)
+                            )
+                            Spacer(Modifier.width(12.dp))
+                            Text(
+                                if (dateOfBirth != null) {
+                                    formatDate(dateOfBirth!!)
+                                } else {
+                                    "Select Birthday"
+                                },
+                                style = MaterialTheme.typography.bodyLarge
+                            )
+                            Spacer(Modifier.weight(1f))
+                            if (dateOfBirth != null) {
+                                IconButton(
+                                    onClick = { dateOfBirth = null },
+                                    modifier = Modifier.size(24.dp)
+                                ) {
+                                    Icon(
+                                        Icons.Default.Clear,
+                                        contentDescription = "Clear",
+                                        modifier = Modifier.size(18.dp)
+                                    )
+                                }
+                            }
+                        }
+                    }
+
+                    // Relationship
+                    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                        Text(
+                            "Relationship",
+                            style = MaterialTheme.typography.titleSmall,
+                            fontWeight = FontWeight.SemiBold
+                        )
+
+                        // 3 columns grid for relationship chips
+                        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+                            relationships.chunked(3).forEach { rowChips ->
+                                Row(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                                ) {
+                                    rowChips.forEach { (rel, emoji) ->
+                                        FilterChip(
+                                            selected = selectedRelationship == rel,
+                                            onClick = { selectedRelationship = rel },
+                                            label = {
+                                                Row(
+                                                    horizontalArrangement = Arrangement.spacedBy(6.dp),
+                                                    verticalAlignment = Alignment.CenterVertically
+                                                ) {
+                                                    Text(emoji, style = MaterialTheme.typography.titleMedium)
+                                                    Text(rel)
+                                                }
+                                            },
+                                            modifier = Modifier.weight(1f),
+                                            shape = RoundedCornerShape(12.dp)
+                                        )
+                                    }
+                                    // Fill empty space if less than 3 chips
+                                    repeat(3 - rowChips.size) {
+                                        Spacer(Modifier.weight(1f))
+                                    }
+                                }
+                            }
+
+                            // "Other" option
+                            FilterChip(
+                                selected = selectedRelationship == "Other",
+                                onClick = { selectedRelationship = "Other" },
+                                label = {
+                                    Row(
+                                        horizontalArrangement = Arrangement.spacedBy(6.dp),
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text("👤", style = MaterialTheme.typography.titleMedium)
+                                        Text("Other")
+                                    }
+                                },
+                                modifier = Modifier.fillMaxWidth(),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                        }
+                    }
+
+                    // Privacy note
+                    Card(
+                        colors = CardDefaults.cardColors(
+                            containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
+                        ),
+                        shape = RoundedCornerShape(16.dp)
+                    ) {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            horizontalArrangement = Arrangement.spacedBy(12.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Icon(
+                                Icons.Default.Lock,
+                                contentDescription = null,
+                                modifier = Modifier.size(24.dp),
+                                tint = MaterialTheme.colorScheme.primary
+                            )
+                            Column {
+                                Text(
+                                    "Privacy First",
+                                    style = MaterialTheme.typography.titleSmall,
+                                    fontWeight = FontWeight.Bold,
+                                    color = MaterialTheme.colorScheme.primary
+                                )
+                                Text(
+                                    "All data stays on your device",
+                                    style = MaterialTheme.typography.bodySmall,
+                                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                                )
+                            }
+                        }
+                    }
+                }
+
+                HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
+
+                // Action buttons
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(24.dp),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    OutlinedButton(
+                        onClick = onDismiss,
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(56.dp),
+                        shape = RoundedCornerShape(16.dp)
+                    ) {
+                        Text("Cancel", style = MaterialTheme.typography.titleMedium)
+                    }
+
+                    Button(
+                        onClick = {
+                            if (name.isNotBlank()) {
+                                onConfirm(name.trim(), dateOfBirth, selectedRelationship)
+                            }
+                        },
+                        enabled = name.isNotBlank(),
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(56.dp),
+                        shape = RoundedCornerShape(16.dp)
+                    ) {
+                        Icon(
+                            Icons.Default.ArrowForward,
+                            contentDescription = null,
+                            modifier = Modifier.size(20.dp)
+                        )
+                        Spacer(Modifier.width(8.dp))
+                        Text("Continue", style = MaterialTheme.typography.titleMedium)
+                    }
+                }
+            }
+        }
+    }
+
+    // Date picker dialog
+    if (showDatePicker) {
+        DatePickerDialog(
+            onDismissRequest = { showDatePicker = false },
+            confirmButton = {
+                TextButton(
+                    onClick = {
+                        dateOfBirth = System.currentTimeMillis()
+                        showDatePicker = false
+                    }
+                ) {
+                    Text("OK")
+                }
+            },
+            dismissButton = {
+                TextButton(onClick = { showDatePicker = false }) {
+                    Text("Cancel")
+                }
+            }
+        ) {
+            DatePicker(
+                state = rememberDatePickerState(),
+                modifier = Modifier.padding(16.dp)
+            )
+        }
+    }
+}
+
+private fun formatDate(timestamp: Long): String {
+    val formatter = SimpleDateFormat("MMMM dd, yyyy", Locale.getDefault())
+    return formatter.format(Date(timestamp))
+}

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/FacePickerDialog.kt

@@ -5,65 +5,105 @@ import android.graphics.BitmapFactory
 import android.graphics.Rect
 import android.net.Uri
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CheckCircle
+import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
-import coil.compose.AsyncImage
+import com.google.mlkit.vision.common.InputImage
+import com.google.mlkit.vision.face.FaceDetection
+import androidx.compose.ui.graphics.Color
+import com.google.mlkit.vision.face.FaceDetectorOptions
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.tasks.await
 import kotlinx.coroutines.withContext
 
 /**
- * Dialog for selecting a face from multiple detected faces
+ * MINIMAL FacePickerDialog - Optimized for batch processing 30-50 photos
+ *
+ * REMOVED CLUTTER:
+ * - "Preview (tap to select)" header
+ * - "Face will be used for training" info box
+ * - "Face #" labels covering previews
+ * - Original image preview
+ *
+ * IMPROVED:
+ * - Larger face previews (1:1 aspect ratio)
+ * - Clean checkmark overlay only
+ * - Minimal text
+ * - Fast workflow
  */
 @Composable
 fun FacePickerDialog(
     result: FaceDetectionHelper.FaceDetectionResult,
     onDismiss: () -> Unit,
-    onFaceSelected: (Int, Bitmap) -> Unit // faceIndex, croppedFaceBitmap
+    onFaceSelected: (Int, Bitmap) -> Unit
 ) {
     val context = LocalContext.current
-    var selectedFaceIndex by remember { mutableStateOf<Int?>(null) }
+    var selectedFaceIndex by remember { mutableStateOf(0) }
     var croppedFaces by remember { mutableStateOf<List<Bitmap>>(emptyList()) }
     var isLoading by remember { mutableStateOf(true) }
+    var errorMessage by remember { mutableStateOf<String?>(null) }
 
-    // Load and crop all faces
+    // Load and crop all faces - RE-DETECT to get accurate bounds
     LaunchedEffect(result) {
         isLoading = true
+        errorMessage = null
+
+        try {
             croppedFaces = withContext(Dispatchers.IO) {
-            val bitmap = loadBitmapFromUri(context, result.uri)
+                // Load the FULL resolution bitmap (no downsampling)
-            bitmap?.let { bmp ->
+                val fullBitmap = loadFullResolutionBitmap(context, result.uri)
-                result.faceBounds.map { bounds ->
+
-                    cropFaceFromBitmap(bmp, bounds)
+                if (fullBitmap == null) {
+                    errorMessage = "Failed to load image"
+                    return@withContext emptyList()
                 }
-            } ?: emptyList()
+
+                // Re-detect faces on the full resolution bitmap to get accurate bounds
+                val accurateFaceBounds = detectFacesOnBitmap(fullBitmap)
+
+                if (accurateFaceBounds.isEmpty()) {
+                    // Fallback: try to use the original bounds with scaling
+                    val scaledBounds = result.faceBounds.map { originalBounds ->
+                        cropFaceFromBitmap(fullBitmap, originalBounds)
                     }
+                    fullBitmap.recycle()
+                    return@withContext scaledBounds
+                }
+
+                // Crop faces using accurate bounds
+                val croppedList = accurateFaceBounds.map { bounds ->
+                    cropFaceFromBitmap(fullBitmap, bounds)
+                }
+
+                // CRITICAL: Recycle AFTER all cropping is done
+                fullBitmap.recycle()
+
+                croppedList
+            }
+
+            if (croppedFaces.isEmpty() && errorMessage == null) {
+                errorMessage = "No faces found in full resolution image"
+            }
+
+        } catch (e: Exception) {
+            errorMessage = "Error processing faces: ${e.message}"
+        } finally {
             isLoading = false
-        // Auto-select the first (largest) face
-        if (croppedFaces.isNotEmpty()) {
-            selectedFaceIndex = 0
         }
     }
 
@@ -73,96 +113,62 @@ fun FacePickerDialog(
     ) {
         Card(
             modifier = Modifier
-                .fillMaxWidth(0.95f)
+                .fillMaxWidth(0.92f)
-                .fillMaxHeight(0.9f),
+                .wrapContentHeight(),
-            shape = RoundedCornerShape(16.dp)
+            shape = RoundedCornerShape(20.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surface
+            )
         ) {
             Column(
                 modifier = Modifier
-                    .fillMaxSize()
+                    .fillMaxWidth()
                     .padding(20.dp),
                 verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
-                // Header
+                // Minimal header - just close button
                 Row(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.SpaceBetween,
                     verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Column {
                     Text(
-                            text = "Pick a Face",
+                        text = "${result.faceCount} faces",
-                            style = MaterialTheme.typography.headlineSmall,
+                        style = MaterialTheme.typography.titleLarge,
                         fontWeight = FontWeight.Bold
                     )
-                        Text(
-                            text = "${result.faceCount} faces detected",
-                            style = MaterialTheme.typography.bodyMedium,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant
-                        )
-                    }
 
                     IconButton(onClick = onDismiss) {
-                        Icon(Icons.Default.Close, "Close")
+                        Icon(Icons.Default.Close, contentDescription = "Close")
                     }
                 }
 
-                // Instruction
-                Text(
-                    text = "Tap a face below to select it for training:",
-                    style = MaterialTheme.typography.bodyMedium
-                )
-
                 if (isLoading) {
-                    // Loading state
+                    // Loading state - minimal
                     Box(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .weight(1f),
+                            .height(180.dp),
                         contentAlignment = Alignment.Center
                     ) {
                         CircularProgressIndicator()
                     }
-                } else {
+                } else if (errorMessage != null) {
-                    // Original image with face boxes overlay
+                    // Error state - minimal
-                    Card(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .weight(1f),
-                        colors = CardDefaults.cardColors(
-                            containerColor = MaterialTheme.colorScheme.surfaceVariant
-                        )
-                    ) {
-                        Box(
-                            modifier = Modifier.fillMaxSize(),
-                            contentAlignment = Alignment.Center
-                        ) {
-                            FaceOverlayImage(
-                                imageUri = result.uri,
-                                faceBounds = result.faceBounds,
-                                selectedFaceIndex = selectedFaceIndex,
-                                onFaceClick = { index ->
-                                    selectedFaceIndex = index
-                                }
-                            )
-                        }
-                    }
-
-                    // Face previews grid
                     Text(
-                        text = "Preview (tap to select):",
+                        text = errorMessage!!,
-                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.error,
-                        fontWeight = FontWeight.SemiBold
+                        style = MaterialTheme.typography.bodyMedium
                     )
-
+                } else {
+                    // CLEAN face grid - NO labels, NO text
                     Row(
                         modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.spacedBy(12.dp)
+                        horizontalArrangement = Arrangement.spacedBy(10.dp)
                     ) {
                         croppedFaces.forEachIndexed { index, faceBitmap ->
-                            FacePreviewCard(
+                            CleanFaceCard(
                                 faceBitmap = faceBitmap,
-                                index = index,
                                 isSelected = selectedFaceIndex == index,
                                 onClick = { selectedFaceIndex = index },
                                 modifier = Modifier.weight(1f)
@@ -171,32 +177,34 @@ fun FacePickerDialog(
                     }
                 }
 
-                // Action buttons
+                // Action buttons - minimal
                 Row(
                     modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.spacedBy(12.dp)
+                    horizontalArrangement = Arrangement.spacedBy(10.dp)
                 ) {
-                    OutlinedButton(
+                    TextButton(
                         onClick = onDismiss,
                         modifier = Modifier.weight(1f)
                     ) {
-                        Text("Cancel")
+                        Text("Skip")
                     }
 
                     Button(
                         onClick = {
-                            selectedFaceIndex?.let { index ->
+                            if (selectedFaceIndex < croppedFaces.size) {
-                                if (index < croppedFaces.size) {
+                                onFaceSelected(selectedFaceIndex, croppedFaces[selectedFaceIndex])
-                                    onFaceSelected(index, croppedFaces[index])
-                                }
                             }
                         },
-                        modifier = Modifier.weight(1f),
+                        enabled = !isLoading && croppedFaces.isNotEmpty(),
-                        enabled = selectedFaceIndex != null && !isLoading
+                        modifier = Modifier.weight(1f)
                     ) {
-                        Icon(Icons.Default.CheckCircle, contentDescription = null)
+                        Icon(
-                        Spacer(modifier = Modifier.width(8.dp))
+                            Icons.Default.Check,
-                        Text("Use This Face")
+                            contentDescription = null,
+                            modifier = Modifier.size(18.dp)
+                        )
+                        Spacer(modifier = Modifier.width(6.dp))
+                        Text("Use")
                     }
                 }
             }
@@ -205,204 +213,75 @@ fun FacePickerDialog(
 }
 
 /**
- * Image with interactive face boxes overlay
+ * ULTRA-CLEAN face card - NO TEXT, just image + checkmark
+ *
+ * CHANGES:
+ * - 1:1 aspect ratio (bigger!)
+ * - NO "Face #" label
+ * - Checkmark in corner only
+ * - Minimal border
  */
 @Composable
-private fun FaceOverlayImage(
+private fun CleanFaceCard(
-    imageUri: Uri,
-    faceBounds: List<Rect>,
-    selectedFaceIndex: Int?,
-    onFaceClick: (Int) -> Unit
-) {
-    var imageSize by remember { mutableStateOf(Size.Zero) }
-    var imageBounds by remember { mutableStateOf(Rect()) }
-
-    Box(
-        modifier = Modifier.fillMaxSize()
-    ) {
-        // Original image
-        AsyncImage(
-            model = imageUri,
-            contentDescription = "Original image",
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(8.dp),
-            contentScale = ContentScale.Fit,
-            onSuccess = { state ->
-                val drawable = state.result.drawable
-                imageBounds = Rect(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight)
-            }
-        )
-
-        // Face boxes overlay
-        Canvas(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(8.dp)
-        ) {
-            if (imageBounds.width() > 0 && imageBounds.height() > 0) {
-                // Calculate scale to fit image in canvas
-                val scaleX = size.width / imageBounds.width()
-                val scaleY = size.height / imageBounds.height()
-                val scale = minOf(scaleX, scaleY)
-
-                // Calculate offset to center image
-                val scaledWidth = imageBounds.width() * scale
-                val scaledHeight = imageBounds.height() * scale
-                val offsetX = (size.width - scaledWidth) / 2
-                val offsetY = (size.height - scaledHeight) / 2
-
-                faceBounds.forEachIndexed { index, bounds ->
-                    val isSelected = selectedFaceIndex == index
-
-                    // Scale and position the face box
-                    val left = bounds.left * scale + offsetX
-                    val top = bounds.top * scale + offsetY
-                    val width = bounds.width() * scale
-                    val height = bounds.height() * scale
-
-                    // Draw box
-                    drawRect(
-                        color = if (isSelected) Color(0xFF4CAF50) else Color(0xFF2196F3),
-                        topLeft = Offset(left, top),
-                        size = Size(width, height),
-                        style = Stroke(width = if (isSelected) 6f else 4f)
-                    )
-
-                    // Draw semi-transparent fill for selected
-                    if (isSelected) {
-                        drawRect(
-                            color = Color(0xFF4CAF50).copy(alpha = 0.2f),
-                            topLeft = Offset(left, top),
-                            size = Size(width, height)
-                        )
-                    }
-
-                    // Draw face number label
-                    drawCircle(
-                        color = if (isSelected) Color(0xFF4CAF50) else Color(0xFF2196F3),
-                        radius = 20f * scale,
-                        center = Offset(left + 20f * scale, top + 20f * scale)
-                    )
-                }
-            }
-        }
-
-        // Clickable areas for each face
-        faceBounds.forEachIndexed { index, bounds ->
-            if (imageBounds.width() > 0 && imageBounds.height() > 0) {
-                val scaleX = imageSize.width / imageBounds.width()
-                val scaleY = imageSize.height / imageBounds.height()
-                val scale = minOf(scaleX, scaleY)
-
-                val scaledWidth = imageBounds.width() * scale
-                val scaledHeight = imageBounds.height() * scale
-                val offsetX = (imageSize.width - scaledWidth) / 2
-                val offsetY = (imageSize.height - scaledHeight) / 2
-
-                Box(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .clickable { onFaceClick(index) }
-                )
-            }
-        }
-    }
-
-    // Update image size
-    BoxWithConstraints {
-        LaunchedEffect(constraints) {
-            imageSize = Size(constraints.maxWidth.toFloat(), constraints.maxHeight.toFloat())
-        }
-    }
-}
-
-/**
- * Individual face preview card
- */
-@Composable
-private fun FacePreviewCard(
     faceBitmap: Bitmap,
-    index: Int,
     isSelected: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     Card(
         modifier = modifier
-            .aspectRatio(1f)
+            .aspectRatio(1f) // SQUARE = bigger previews!
             .clickable(onClick = onClick),
         colors = CardDefaults.cardColors(
-            containerColor = if (isSelected)
+            containerColor = MaterialTheme.colorScheme.surfaceVariant
-                MaterialTheme.colorScheme.primaryContainer
-            else
-                MaterialTheme.colorScheme.surface
         ),
         border = if (isSelected)
             BorderStroke(3.dp, MaterialTheme.colorScheme.primary)
         else
-            BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
+            BorderStroke(1.dp, MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)),
+        shape = RoundedCornerShape(12.dp),
+        elevation = CardDefaults.cardElevation(
+            defaultElevation = if (isSelected) 4.dp else 1.dp
+        )
     ) {
-        Box(
+        Box(modifier = Modifier.fillMaxSize()) {
-            modifier = Modifier.fillMaxSize()
+            // Face image - FULL SIZE
-        ) {
+            Image(
-            androidx.compose.foundation.Image(
                 bitmap = faceBitmap.asImageBitmap(),
-                contentDescription = "Face ${index + 1}",
+                contentDescription = null,
                 modifier = Modifier.fillMaxSize(),
                 contentScale = ContentScale.Crop
             )
 
-            // Selected checkmark (only show when selected)
+            // Checkmark in corner - ONLY if selected
             if (isSelected) {
                 Surface(
                     modifier = Modifier
-                        .align(Alignment.Center),
+                        .align(Alignment.TopEnd)
+                        .padding(6.dp)
+                        .size(32.dp),
                     shape = CircleShape,
-                    color = MaterialTheme.colorScheme.primary.copy(alpha = 0.9f)
+                    color = MaterialTheme.colorScheme.primary,
+                    shadowElevation = 4.dp
                 ) {
                     Icon(
                         Icons.Default.CheckCircle,
                         contentDescription = "Selected",
                         modifier = Modifier
-                            .padding(12.dp)
+                            .padding(6.dp)
-                            .size(32.dp),
+                            .size(20.dp),
                         tint = MaterialTheme.colorScheme.onPrimary
                     )
                 }
             }
-
-            // Face number badge (always in top-right, small)
-            Surface(
-                modifier = Modifier
-                    .align(Alignment.TopEnd)
-                    .padding(4.dp),
-                shape = CircleShape,
-                color = if (isSelected)
-                    MaterialTheme.colorScheme.primary
-                else
-                    MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.9f),
-                shadowElevation = 2.dp
-            ) {
-                Text(
-                    text = "${index + 1}",
-                    modifier = Modifier.padding(6.dp),
-                    style = MaterialTheme.typography.labelSmall,
-                    fontWeight = FontWeight.Bold,
-                    color = if (isSelected)
-                        MaterialTheme.colorScheme.onPrimary
-                    else
-                        MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
         }
     }
 }
 
 /**
- * Helper function to load bitmap from URI
+ * Load full resolution bitmap WITHOUT downsampling
  */
-private suspend fun loadBitmapFromUri(
+private suspend fun loadFullResolutionBitmap(
     context: android.content.Context,
     uri: Uri
 ): Bitmap? = withContext(Dispatchers.IO) {
@@ -417,7 +296,33 @@ private suspend fun loadBitmapFromUri(
 }
 
 /**
- * Helper function to crop face from bitmap
+ * Re-detect faces on full resolution bitmap to get accurate bounds
+ */
+private suspend fun detectFacesOnBitmap(bitmap: Bitmap): List<Rect> = withContext(Dispatchers.Default) {
+    try {
+        val options = FaceDetectorOptions.Builder()
+            .setPerformanceMode(FaceDetectorOptions.PERFORMANCE_MODE_ACCURATE)
+            .setLandmarkMode(FaceDetectorOptions.LANDMARK_MODE_NONE)
+            .setClassificationMode(FaceDetectorOptions.CLASSIFICATION_MODE_NONE)
+            .setMinFaceSize(0.10f)
+            .build()
+
+        val detector = FaceDetection.getClient(options)
+        val image = InputImage.fromBitmap(bitmap, 0)
+        val faces = detector.process(image).await()
+
+        // Sort by size (largest first)
+        faces.sortedByDescending { face ->
+            face.boundingBox.width() * face.boundingBox.height()
+        }.map { it.boundingBox }
+
+    } catch (e: Exception) {
+        emptyList()
+    }
+}
+
+/**
+ * Crop face from bitmap with padding
  */
 private fun cropFaceFromBitmap(bitmap: Bitmap, faceBounds: Rect): Bitmap {
     // Add 20% padding around the face

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/ImageSelectorScreen.kt

@@ -4,32 +4,28 @@ import android.net.Uri
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 
 /**
- * Enhanced ImageSelectorScreen
+ * FIXED ImageSelectorScreen
  *
- * Changes:
+ * Fixes:
- * - NO LIMIT on photo count (was 10)
+ * - Added verticalScroll to Column for proper scrolling
- * - Recommends 20-30 photos
+ * - Buttons are now always accessible via scroll
- * - Real-time progress feedback
+ * - Better spacing and padding
- * - Quality indicators
+ * - Cleaner layout structure
- * - Training tips
  */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -37,6 +33,7 @@ fun ImageSelectorScreen(
     onImagesSelected: (List<Uri>) -> Unit
 ) {
     var selectedImages by remember { mutableStateOf<List<Uri>>(emptyList()) }
+    val scrollState = rememberScrollState()
 
     val photoPicker = rememberLauncherForActivityResult(
         contract = ActivityResultContracts.GetMultipleContents()
@@ -60,6 +57,7 @@ fun ImageSelectorScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(paddingValues)
+                .verticalScroll(scrollState) // FIXED: Added scrolling
                 .padding(16.dp),
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
@@ -124,8 +122,6 @@ fun ImageSelectorScreen(
                 ProgressCard(selectedImages.size)
             }
 
-            Spacer(Modifier.weight(1f))
-
             // Select photos button
             Button(
                 onClick = { photoPicker.launch("image/*") },
@@ -147,7 +143,7 @@ fun ImageSelectorScreen(
                 )
             }
 
-            // Continue button
+            // Continue button - FIXED: Always visible via scroll
             AnimatedVisibility(selectedImages.size >= 15) {
                 Button(
                     onClick = { onImagesSelected(selectedImages) },
@@ -200,6 +196,9 @@ fun ImageSelectorScreen(
                     }
                 }
             }
+
+            // Bottom spacing to ensure last item is visible
+            Spacer(Modifier.height(32.dp))
         }
     }
 }

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/Improvednameinputdialog.kt

@@ -0,0 +1,231 @@
+package com.placeholder.sherpai2.ui.trainingprep
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+
+/**
+ * IMPROVED NameInputDialog - Better centered, cleaner layout
+ *
+ * Fixes:
+ * - Centered dialog with proper constraints
+ * - Better spacing and padding
+ * - Clearer visual hierarchy
+ * - Improved error state handling
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ImprovedNameInputDialog(
+    onDismiss: () -> Unit,
+    onConfirm: (String) -> Unit,
+    trainingState: TrainingState
+) {
+    var personName by remember { mutableStateOf("") }
+    val isError = trainingState is TrainingState.Error
+    val isProcessing = trainingState is TrainingState.Processing
+
+    Dialog(
+        onDismissRequest = {
+            if (!isProcessing) {
+                onDismiss()
+            }
+        }
+    ) {
+        Card(
+            modifier = Modifier
+                .fillMaxWidth(0.9f) // 90% of screen width
+                .wrapContentHeight(),
+            shape = RoundedCornerShape(24.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surface
+            ),
+            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(24.dp),
+                verticalArrangement = Arrangement.spacedBy(20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                // Icon
+                Surface(
+                    shape = RoundedCornerShape(16.dp),
+                    color = if (isError) {
+                        MaterialTheme.colorScheme.errorContainer
+                    } else {
+                        MaterialTheme.colorScheme.primaryContainer
+                    },
+                    modifier = Modifier.size(72.dp)
+                ) {
+                    Box(contentAlignment = Alignment.Center) {
+                        Icon(
+                            if (isError) Icons.Default.Warning else Icons.Default.Face,
+                            contentDescription = null,
+                            modifier = Modifier.size(40.dp),
+                            tint = if (isError) {
+                                MaterialTheme.colorScheme.error
+                            } else {
+                                MaterialTheme.colorScheme.primary
+                            }
+                        )
+                    }
+                }
+
+                // Title
+                Text(
+                    text = if (isError) "Training Error" else "Who is this?",
+                    style = MaterialTheme.typography.headlineSmall,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.onSurface
+                )
+
+                // Error message or description
+                if (isError) {
+                    val error = trainingState as TrainingState.Error
+                    Card(
+                        colors = CardDefaults.cardColors(
+                            containerColor = MaterialTheme.colorScheme.errorContainer
+                        ),
+                        shape = RoundedCornerShape(12.dp)
+                    ) {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            horizontalArrangement = Arrangement.spacedBy(12.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Icon(
+                                Icons.Default.Error,
+                                contentDescription = null,
+                                tint = MaterialTheme.colorScheme.error
+                            )
+                            Text(
+                                text = error.message,
+                                style = MaterialTheme.typography.bodyMedium,
+                                color = MaterialTheme.colorScheme.onErrorContainer
+                            )
+                        }
+                    }
+                } else {
+                    Text(
+                        text = "Enter the name of the person in these training images. This will help you find their photos later.",
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                }
+
+                // Name input field
+                OutlinedTextField(
+                    value = personName,
+                    onValueChange = { personName = it },
+                    label = { Text("Person's Name") },
+                    placeholder = { Text("e.g., John Doe") },
+                    singleLine = true,
+                    enabled = !isProcessing,
+                    keyboardOptions = KeyboardOptions(
+                        capitalization = KeyboardCapitalization.Words,
+                        imeAction = ImeAction.Done
+                    ),
+                    keyboardActions = KeyboardActions(
+                        onDone = {
+                            if (personName.isNotBlank() && !isProcessing) {
+                                onConfirm(personName.trim())
+                            }
+                        }
+                    ),
+                    modifier = Modifier.fillMaxWidth(),
+                    shape = RoundedCornerShape(12.dp),
+                    colors = OutlinedTextFieldDefaults.colors(
+                        focusedBorderColor = MaterialTheme.colorScheme.primary,
+                        unfocusedBorderColor = MaterialTheme.colorScheme.outline
+                    )
+                )
+
+                // Action buttons
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    // Cancel button
+                    if (!isProcessing) {
+                        OutlinedButton(
+                            onClick = onDismiss,
+                            modifier = Modifier.weight(1f),
+                            shape = RoundedCornerShape(12.dp),
+                            contentPadding = PaddingValues(vertical = 14.dp)
+                        ) {
+                            Text("Cancel")
+                        }
+                    }
+
+                    // Confirm button
+                    Button(
+                        onClick = { onConfirm(personName.trim()) },
+                        enabled = personName.isNotBlank() && !isProcessing,
+                        modifier = Modifier.weight(if (isProcessing) 1f else 1f),
+                        shape = RoundedCornerShape(12.dp),
+                        contentPadding = PaddingValues(vertical = 14.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = if (isError) {
+                                MaterialTheme.colorScheme.error
+                            } else {
+                                MaterialTheme.colorScheme.primary
+                            }
+                        )
+                    ) {
+                        if (isProcessing) {
+                            CircularProgressIndicator(
+                                modifier = Modifier.size(20.dp),
+                                strokeWidth = 2.dp,
+                                color = MaterialTheme.colorScheme.onPrimary
+                            )
+                            Spacer(modifier = Modifier.width(12.dp))
+                            Text("Training...")
+                        } else {
+                            Icon(
+                                if (isError) Icons.Default.Refresh else Icons.Default.Check,
+                                contentDescription = null,
+                                modifier = Modifier.size(20.dp)
+                            )
+                            Spacer(modifier = Modifier.width(8.dp))
+                            Text(if (isError) "Try Again" else "Start Training")
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Alternative: Use this version in ScanResultsScreen.kt
+ *
+ * Replace the existing NameInputDialog function (lines 154-257) with:
+ *
+ * @Composable
+ * private fun NameInputDialog(
+ *     onDismiss: () -> Unit,
+ *     onConfirm: (String) -> Unit,
+ *     trainingState: TrainingState
+ * ) {
+ *     ImprovedNameInputDialog(
+ *         onDismiss = onDismiss,
+ *         onConfirm = onConfirm,
+ *         trainingState = trainingState
+ *     )
+ * }
+ */

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/ScanResultsScreen.kt

@@ -32,6 +32,9 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import coil.compose.AsyncImage
+import com.placeholder.sherpai2.ui.trainingprep.BeautifulPersonInfoDialog
+import com.placeholder.sherpai2.ui.trainingprep.FaceDetectionHelper
+
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -125,7 +128,7 @@ fun ScanResultsScreen(
 
     // Face Picker Dialog
     showFacePickerDialog?.let { result ->
-        FacePickerDialog(
+        FacePickerDialog (  // CHANGED
             result = result,
             onDismiss = { showFacePickerDialog = null },
             onFaceSelected = { faceIndex, croppedFaceBitmap ->

app/src/main/java/com/placeholder/sherpai2/ui/trainingprep/TrainingScreen.kt

@@ -13,45 +13,38 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import java.text.SimpleDateFormat
+import androidx.hilt.navigation.compose.hiltViewModel
-import java.util.*
 
 /**
- * Beautiful TrainingScreen with person info capture
+ * CLEANED TrainingScreen - No duplicate header
+ *
+ * Removed:
+ * - Scaffold wrapper (lines 46-55)
+ * - TopAppBar (was creating banner)
+ * - "Train New Person" title (MainScreen shows it)
  *
  * Features:
- * - Name input
+ * - Person info capture (name, DOB, relationship)
- * - Date of birth picker
- * - Relationship selector
  * - Onboarding cards
  * - Beautiful gradient design
  * - Clear call to action
+ * - Scrollable on small screens
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TrainingScreen(
     onSelectImages: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    trainViewModel: TrainViewModel = hiltViewModel()
 ) {
     var showInfoDialog by remember { mutableStateOf(false) }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Train New Person") },
-                colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.primaryContainer
-                )
-            )
-        }
-    ) { paddingValues ->
     Column(
         modifier = modifier
             .fillMaxSize()
-                .padding(paddingValues)
             .verticalScroll(rememberScrollState())
             .padding(20.dp),
         verticalArrangement = Arrangement.spacedBy(20.dp)
@@ -94,16 +87,15 @@ fun TrainingScreen(
 
         Spacer(Modifier.height(8.dp))
     }
-    }
 
     // Person info dialog
     if (showInfoDialog) {
-        PersonInfoDialog(
+        BeautifulPersonInfoDialog(
             onDismiss = { showInfoDialog = false },
             onConfirm = { name, dob, relationship ->
                 showInfoDialog = false
-                // TODO: Store this info before photo selection
+                // Store person info in ViewModel
-                // For now, just proceed to photo selection
+                trainViewModel.setPersonInfo(name, dob, relationship)
                 onSelectImages()
             }
         )
@@ -195,16 +187,16 @@ private fun HowItWorksSection() {
 
         StepCard(
             number = 3,
-            icon = Icons.Default.ModelTraining,
+            icon = Icons.Default.SmartToy,
-            title = "AI Learns Their Face",
+            title = "AI Training",
-            description = "Takes ~30 seconds to train"
+            description = "We'll create a recognition model"
         )
 
         StepCard(
             number = 4,
-            icon = Icons.Default.Search,
+            icon = Icons.Default.AutoFixHigh,
-            title = "Auto-Tag Your Library",
+            title = "Auto-Tag Photos",
-            description = "Find them in all your photos"
+            description = "Find this person across your library"
         )
     }
 }
@@ -212,31 +204,31 @@ private fun HowItWorksSection() {
 @Composable
 private fun StepCard(
     number: Int,
-    icon: androidx.compose.ui.graphics.vector.ImageVector,
+    icon: ImageVector,
     title: String,
     description: String
 ) {
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surfaceVariant
+            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
         ),
-        shape = RoundedCornerShape(12.dp)
+        shape = RoundedCornerShape(16.dp)
     ) {
         Row(
             modifier = Modifier.padding(16.dp),
             horizontalArrangement = Arrangement.spacedBy(16.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            // Number badge
+            // Number circle
             Surface(
+                modifier = Modifier.size(48.dp),
                 shape = RoundedCornerShape(12.dp),
-                color = MaterialTheme.colorScheme.primary,
+                color = MaterialTheme.colorScheme.primary
-                modifier = Modifier.size(48.dp)
             ) {
                 Box(contentAlignment = Alignment.Center) {
                     Text(
-                        text = number.toString(),
+                        "$number",
                         style = MaterialTheme.typography.titleLarge,
                         fontWeight = FontWeight.Bold,
                         color = MaterialTheme.colorScheme.onPrimary
@@ -244,6 +236,7 @@ private fun StepCard(
                 }
             }
 
+            // Content
             Column(modifier = Modifier.weight(1f)) {
                 Row(
                     horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -261,7 +254,6 @@ private fun StepCard(
                         fontWeight = FontWeight.SemiBold
                     )
                 }
-                Spacer(Modifier.height(4.dp))
                 Text(
                     description,
                     style = MaterialTheme.typography.bodyMedium,
@@ -277,7 +269,7 @@ private fun RequirementsCard() {
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.secondaryContainer
+            containerColor = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.3f)
         ),
         shape = RoundedCornerShape(16.dp)
     ) {
@@ -292,225 +284,59 @@ private fun RequirementsCard() {
                 Icon(
                     Icons.Default.CheckCircle,
                     contentDescription = null,
-                    tint = MaterialTheme.colorScheme.primary
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(24.dp)
                 )
                 Text(
-                    "What You'll Need",
+                    "Best Results",
                     style = MaterialTheme.typography.titleMedium,
                     fontWeight = FontWeight.Bold
                 )
             }
 
-            RequirementItem("20-30 photos of the person", true)
+            RequirementItem(
-            RequirementItem("Different angles and lighting", true)
+                icon = Icons.Default.PhotoCamera,
-            RequirementItem("Clear face visibility", true)
+                text = "20-30 photos minimum"
-            RequirementItem("Mix of expressions", true)
+            )
-            RequirementItem("2-3 minutes of your time", true)
+
+            RequirementItem(
+                icon = Icons.Default.Face,
+                text = "Clear, well-lit face photos"
+            )
+
+            RequirementItem(
+                icon = Icons.Default.Diversity1,
+                text = "Variety of angles & expressions"
+            )
+
+            RequirementItem(
+                icon = Icons.Default.HighQuality,
+                text = "Good quality images"
+            )
         }
     }
 }
 
 @Composable
-private fun RequirementItem(text: String, isMet: Boolean) {
+private fun RequirementItem(
+    icon: ImageVector,
+    text: String
+) {
     Row(
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
-        verticalAlignment = Alignment.CenterVertically
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.padding(vertical = 4.dp)
     ) {
         Icon(
-            if (isMet) Icons.Default.Check else Icons.Default.Close,
+            icon,
             contentDescription = null,
-            modifier = Modifier.size(18.dp),
+            modifier = Modifier.size(20.dp),
-            tint = if (isMet) {
+            tint = MaterialTheme.colorScheme.onSecondaryContainer
-                MaterialTheme.colorScheme.primary
-            } else {
-                MaterialTheme.colorScheme.error
-            }
         )
         Text(
-            text = text,
+            text,
-            style = MaterialTheme.typography.bodyMedium
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSecondaryContainer
         )
     }
 }
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-private fun PersonInfoDialog(
-    onDismiss: () -> Unit,
-    onConfirm: (name: String, dateOfBirth: Long?, relationship: String) -> Unit
-) {
-    var name by remember { mutableStateOf("") }
-    var dateOfBirth by remember { mutableStateOf<Long?>(null) }
-    var selectedRelationship by remember { mutableStateOf("Other") }
-    var showDatePicker by remember { mutableStateOf(false) }
-
-    val relationships = listOf(
-        "Family" to "👨‍👩‍👧‍👦",
-        "Friend" to "🤝",
-        "Partner" to "❤️",
-        "Child" to "👶",
-        "Parent" to "👪",
-        "Sibling" to "👫",
-        "Colleague" to "💼",
-        "Other" to "👤"
-    )
-
-    AlertDialog(
-        onDismissRequest = onDismiss,
-        title = {
-            Column {
-                Text("Person Details")
-                Text(
-                    "Help us organize your photos",
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
-        },
-        text = {
-            Column(
-                modifier = Modifier.fillMaxWidth(),
-                verticalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
-                // Name field
-                OutlinedTextField(
-                    value = name,
-                    onValueChange = { name = it },
-                    label = { Text("Name *") },
-                    placeholder = { Text("e.g., John Doe") },
-                    leadingIcon = {
-                        Icon(Icons.Default.Person, contentDescription = null)
-                    },
-                    modifier = Modifier.fillMaxWidth(),
-                    singleLine = true
-                )
-
-                // Date of birth
-                OutlinedButton(
-                    onClick = { showDatePicker = true },
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    Icon(Icons.Default.Cake, contentDescription = null)
-                    Spacer(Modifier.width(8.dp))
-                    Text(
-                        if (dateOfBirth != null) {
-                            "Birthday: ${formatDate(dateOfBirth!!)}"
-                        } else {
-                            "Add Birthday (Optional)"
-                        }
-                    )
-                }
-
-                // Relationship selector
-                Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
-                    Text(
-                        "Relationship",
-                        style = MaterialTheme.typography.labelMedium
-                    )
-
-                    // Relationship chips
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.spacedBy(8.dp)
-                    ) {
-                        relationships.take(4).forEach { (rel, emoji) ->
-                            FilterChip(
-                                selected = selectedRelationship == rel,
-                                onClick = { selectedRelationship = rel },
-                                label = { Text("$emoji $rel") }
-                            )
-                        }
-                    }
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.spacedBy(8.dp)
-                    ) {
-                        relationships.drop(4).forEach { (rel, emoji) ->
-                            FilterChip(
-                                selected = selectedRelationship == rel,
-                                onClick = { selectedRelationship = rel },
-                                label = { Text("$emoji $rel") }
-                            )
-                        }
-                    }
-                }
-
-                // Privacy note
-                Card(
-                    colors = CardDefaults.cardColors(
-                        containerColor = MaterialTheme.colorScheme.surfaceVariant
-                    )
-                ) {
-                    Row(
-                        modifier = Modifier.padding(12.dp),
-                        horizontalArrangement = Arrangement.spacedBy(8.dp)
-                    ) {
-                        Icon(
-                            Icons.Default.Lock,
-                            contentDescription = null,
-                            modifier = Modifier.size(16.dp),
-                            tint = MaterialTheme.colorScheme.primary
-                        )
-                        Text(
-                            "All data stays on your device",
-                            style = MaterialTheme.typography.bodySmall,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant
-                        )
-                    }
-                }
-            }
-        },
-        confirmButton = {
-            Button(
-                onClick = {
-                    if (name.isNotBlank()) {
-                        onConfirm(name, dateOfBirth, selectedRelationship)
-                    }
-                },
-                enabled = name.isNotBlank()
-            ) {
-                Text("Continue")
-            }
-        },
-        dismissButton = {
-            TextButton(onClick = onDismiss) {
-                Text("Cancel")
-            }
-        }
-    )
-
-    // Date picker dialog
-    if (showDatePicker) {
-        DatePickerDialog(
-            onDismissRequest = { showDatePicker = false },
-            confirmButton = {
-                TextButton(
-                    onClick = {
-                        // Get selected date from date picker
-                        // For now, set to current date as placeholder
-                        dateOfBirth = System.currentTimeMillis()
-                        showDatePicker = false
-                    }
-                ) {
-                    Text("OK")
-                }
-            },
-            dismissButton = {
-                TextButton(onClick = { showDatePicker = false }) {
-                    Text("Cancel")
-                }
-            }
-        ) {
-            // Material3 DatePicker
-            DatePicker(
-                state = rememberDatePickerState(),
-                modifier = Modifier.padding(16.dp)
-            )
-        }
-    }
-}
-
-private fun formatDate(timestamp: Long): String {
-    val formatter = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault())
-    return formatter.format(Date(timestamp))
-}

app/src/main/java/com/placeholder/sherpai2/ui/utilities/Photoutilitiesscreen.kt

@@ -14,51 +14,85 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.placeholder.sherpai2.ui.utilities.stats.StatsScreen
 
 /**
- * PhotoUtilitiesScreen - Manage photo collection
+ * CLEANED PhotoUtilitiesScreen - No duplicate header
+ *
+ * Removed:
+ * - Scaffold wrapper (lines 36-74)
+ * - TopAppBar (was creating banner)
+ * - "Photo Utilities" title (MainScreen shows it)
  *
  * Features:
- * - Manual photo scan
+ * - Stats tab (photo statistics and analytics)
- * - Duplicate detection
+ * - Tools tab (scan, duplicates, bursts, quality)
- * - Burst detection
+ * - Clean TabRow navigation
- * - Quality analysis
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun PhotoUtilitiesScreen(
-    viewModel: PhotoUtilitiesViewModel = hiltViewModel()
+    viewModel: PhotoUtilitiesViewModel = hiltViewModel(),
+    modifier: Modifier = Modifier
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val scanProgress by viewModel.scanProgress.collectAsStateWithLifecycle()
 
-    Scaffold(
+    var selectedTab by remember { mutableStateOf(0) }
-        topBar = {
+
-            TopAppBar(
+    Column(modifier = modifier.fillMaxSize()) {
-                title = {
+        // TabRow for Stats/Tools
-                    Column {
+        TabRow(
-                        Text(
+            selectedTabIndex = selectedTab,
-                            "Photo Utilities",
+            containerColor = MaterialTheme.colorScheme.surface,
-                            style = MaterialTheme.typography.titleLarge,
+            contentColor = MaterialTheme.colorScheme.primary
-                            fontWeight = FontWeight.Bold
+        ) {
+            Tab(
+                selected = selectedTab == 0,
+                onClick = { selectedTab = 0 },
+                text = { Text("Stats") },
+                icon = { Icon(Icons.Default.BarChart, "Statistics") }
             )
-                        Text(
+            Tab(
-                            "Manage your photo collection",
+                selected = selectedTab == 1,
-                            style = MaterialTheme.typography.bodySmall,
+                onClick = { selectedTab = 1 },
-                            color = MaterialTheme.colorScheme.onSurfaceVariant
+                text = { Text("Tools") },
+                icon = { Icon(Icons.Default.Build, "Tools") }
             )
         }
-                },
+
-                colors = TopAppBarDefaults.topAppBarColors(
+        // Tab content
-                    containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f)
+        when (selectedTab) {
-                )
+            0 -> {
+                // Stats tab
+                StatsScreen()
+            }
+            1 -> {
+                // Tools tab
+                ToolsTabContent(
+                    uiState = uiState,
+                    scanProgress = scanProgress,
+                    onScanPhotos = { viewModel.scanForPhotos() },
+                    onDetectDuplicates = { viewModel.detectDuplicates() },
+                    onDetectBursts = { viewModel.detectBursts() },
+                    onAnalyzeQuality = { viewModel.analyzeQuality() }
                 )
             }
-    ) { paddingValues ->
+        }
+    }
+}
+
+@Composable
+private fun ToolsTabContent(
+    uiState: UtilitiesUiState,
+    scanProgress: ScanProgress?,
+    onScanPhotos: () -> Unit,
+    onDetectDuplicates: () -> Unit,
+    onDetectBursts: () -> Unit,
+    onAnalyzeQuality: () -> Unit,
+    modifier: Modifier = Modifier
+) {
     LazyColumn(
-            modifier = Modifier
+        modifier = modifier.fillMaxSize(),
-                .fillMaxSize()
-                .padding(paddingValues),
         contentPadding = PaddingValues(16.dp),
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
@@ -77,7 +111,7 @@ fun PhotoUtilitiesScreen(
                 icon = Icons.Default.PhotoLibrary,
                 buttonText = "Scan Now",
                 enabled = uiState !is UtilitiesUiState.Scanning,
-                    onClick = { viewModel.scanForPhotos() }
+                onClick = onScanPhotos
             )
         }
 
@@ -97,7 +131,7 @@ fun PhotoUtilitiesScreen(
                 icon = Icons.Default.FileCopy,
                 buttonText = "Find Duplicates",
                 enabled = uiState !is UtilitiesUiState.Scanning,
-                    onClick = { viewModel.detectDuplicates() }
+                onClick = onDetectDuplicates
             )
         }
 
@@ -108,7 +142,7 @@ fun PhotoUtilitiesScreen(
                 icon = Icons.Default.BurstMode,
                 buttonText = "Find Bursts",
                 enabled = uiState !is UtilitiesUiState.Scanning,
-                    onClick = { viewModel.detectBursts() }
+                onClick = onDetectBursts
             )
         }
 
@@ -128,14 +162,14 @@ fun PhotoUtilitiesScreen(
                 icon = Icons.Default.PhoneAndroid,
                 buttonText = "Analyze",
                 enabled = uiState !is UtilitiesUiState.Scanning,
-                    onClick = { viewModel.analyzeQuality() }
+                onClick = onAnalyzeQuality
             )
         }
 
         // Progress indicator
         if (scanProgress != null) {
             item {
-                    ProgressCard(scanProgress!!)
+                ProgressCard(scanProgress)
             }
         }
 
@@ -201,7 +235,6 @@ fun PhotoUtilitiesScreen(
         }
     }
 }
-}
 
 @Composable
 private fun SectionHeader(
@@ -211,13 +244,13 @@ private fun SectionHeader(
     Row(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(8.dp),
-        modifier = Modifier.padding(vertical = 8.dp)
+        modifier = Modifier.padding(vertical = 4.dp)
     ) {
         Icon(
             icon,
             contentDescription = null,
             tint = MaterialTheme.colorScheme.primary,
-            modifier = Modifier.size(24.dp)
+            modifier = Modifier.size(20.dp)
         )
         Text(
             text = title,
@@ -239,36 +272,35 @@ private fun UtilityCard(
 ) {
     Card(
         modifier = Modifier.fillMaxWidth(),
-        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
+        )
+    ) {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
             Row(
-            modifier = Modifier
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
-                .fillMaxWidth()
-                .padding(16.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-            // Icon
                 Surface(
+                    modifier = Modifier.size(48.dp),
                     shape = RoundedCornerShape(12.dp),
-                color = MaterialTheme.colorScheme.primaryContainer,
+                    color = MaterialTheme.colorScheme.primaryContainer
-                modifier = Modifier.size(56.dp)
                 ) {
                     Box(contentAlignment = Alignment.Center) {
                         Icon(
                             icon,
                             contentDescription = null,
-                        modifier = Modifier.size(32.dp),
+                            tint = MaterialTheme.colorScheme.onPrimaryContainer,
-                        tint = MaterialTheme.colorScheme.primary
+                            modifier = Modifier.size(24.dp)
                         )
                     }
                 }
 
-            // Text
+                Column(modifier = Modifier.weight(1f)) {
-            Column(
-                modifier = Modifier.weight(1f),
-                verticalArrangement = Arrangement.spacedBy(4.dp)
-            ) {
                     Text(
                         text = title,
                         style = MaterialTheme.typography.titleMedium,
@@ -280,11 +312,13 @@ private fun UtilityCard(
                         color = MaterialTheme.colorScheme.onSurfaceVariant
                     )
                 }
+            }
 
-            // Button
             Button(
                 onClick = onClick,
-                enabled = enabled
+                modifier = Modifier.fillMaxWidth(),
+                enabled = enabled,
+                shape = RoundedCornerShape(12.dp)
             ) {
                 Text(buttonText)
             }
@@ -297,43 +331,34 @@ private fun ProgressCard(progress: ScanProgress) {
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.secondaryContainer
+            containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
         )
     ) {
         Column(
-            modifier = Modifier
+            modifier = Modifier.padding(16.dp),
-                .fillMaxWidth()
+            verticalArrangement = Arrangement.spacedBy(8.dp)
-                .padding(16.dp),
-            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
             Row(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.SpaceBetween
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
             ) {
                 Text(
                     text = progress.message,
                     style = MaterialTheme.typography.bodyMedium,
                     fontWeight = FontWeight.Medium
                 )
-                if (progress.total > 0) {
                 Text(
                     text = "${progress.current}/${progress.total}",
                     style = MaterialTheme.typography.bodySmall,
-                        color = MaterialTheme.colorScheme.primary
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
-            }
 
-            if (progress.total > 0) {
             LinearProgressIndicator(
                 progress = { progress.current.toFloat() / progress.total.toFloat() },
-                    modifier = Modifier.fillMaxWidth()
+                modifier = Modifier.fillMaxWidth(),
             )
-            } else {
-                LinearProgressIndicator(
-                    modifier = Modifier.fillMaxWidth()
-                )
-            }
         }
     }
 }
@@ -347,15 +372,11 @@ private fun ResultCard(
 ) {
     Card(
         modifier = Modifier.fillMaxWidth(),
-        colors = CardDefaults.cardColors(
+        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
-            containerColor = iconTint.copy(alpha = 0.1f)
-        )
     ) {
         Row(
-            modifier = Modifier
+            modifier = Modifier.padding(16.dp),
-                .fillMaxWidth()
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
-                .padding(16.dp),
-            horizontalArrangement = Arrangement.spacedBy(16.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             Icon(
@@ -364,9 +385,7 @@ private fun ResultCard(
                 tint = iconTint,
                 modifier = Modifier.size(32.dp)
             )
-            Column(
+            Column {
-                verticalArrangement = Arrangement.spacedBy(4.dp)
-            ) {
                 Text(
                     text = title,
                     style = MaterialTheme.typography.titleMedium,
@@ -374,7 +393,8 @@ private fun ResultCard(
                 )
                 Text(
                     text = message,
-                    style = MaterialTheme.typography.bodyMedium
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
         }
@@ -386,62 +406,25 @@ private fun InfoCard() {
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surfaceVariant
+            containerColor = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.3f)
         )
-    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
-            verticalArrangement = Arrangement.spacedBy(12.dp)
     ) {
         Row(
+            modifier = Modifier.padding(12.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             Icon(
                 Icons.Default.Info,
                 contentDescription = null,
-                    tint = MaterialTheme.colorScheme.primary
+                tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                modifier = Modifier.size(20.dp)
             )
             Text(
-                    text = "How It Works",
+                text = "These tools help you organize and maintain your photo collection",
-                    style = MaterialTheme.typography.titleSmall,
-                    fontWeight = FontWeight.Bold
-                )
-            }
-
-            InfoItem(
-                "Duplicates",
-                "Finds exact duplicates by comparing file content"
-            )
-            InfoItem(
-                "Bursts",
-                "Groups 3+ photos taken within 2 seconds. Tags one as 'representative' for albums"
-            )
-            InfoItem(
-                "Quality",
-                "Detects screenshots by screen dimensions. Blurry detection coming soon"
-            )
-        }
-    }
-}
-
-@Composable
-private fun InfoItem(title: String, description: String) {
-    Column(
-        verticalArrangement = Arrangement.spacedBy(2.dp)
-    ) {
-        Text(
-            text = "• $title",
-            style = MaterialTheme.typography.bodyMedium,
-            fontWeight = FontWeight.Medium
-        )
-        Text(
-            text = description,
                 style = MaterialTheme.typography.bodySmall,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                color = MaterialTheme.colorScheme.onSecondaryContainer
-            modifier = Modifier.padding(start = 12.dp)
             )
         }
     }
+}

app/src/main/java/com/placeholder/sherpai2/ui/utilities/stats/Statsscreen.kt

@@ -0,0 +1,635 @@
+package com.placeholder.sherpai2.ui.utilities.stats
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
+import com.patrykandpatrick.vico.compose.cartesian.axis.rememberBottomAxis
+import com.patrykandpatrick.vico.compose.cartesian.axis.rememberStartAxis
+import com.patrykandpatrick.vico.compose.cartesian.layer.rememberColumnCartesianLayer
+import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLineCartesianLayer
+import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
+import com.patrykandpatrick.vico.compose.common.component.rememberLineComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberShapeComponent
+import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent
+import com.patrykandpatrick.vico.compose.common.of
+import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer
+import com.patrykandpatrick.vico.core.cartesian.data.columnSeries
+import com.patrykandpatrick.vico.core.cartesian.data.lineSeries
+import com.patrykandpatrick.vico.core.common.shape.Shape
+import java.text.SimpleDateFormat
+import java.util.*
+
+/**
+ * StatsScreen - Beautiful statistics dashboard
+ *
+ * Features:
+ * - Photo count timeline (with granularity toggle)
+ * - Year-by-year breakdown
+ * - System tag statistics
+ * - Burst detection stats
+ * - Usage patterns (day of week, time of day)
+ * - Face recognition stats
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun StatsScreen(
+    viewModel: StatsViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val granularity by viewModel.timelineGranularity.collectAsStateWithLifecycle()
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {
+                    Column {
+                        Text(
+                            "Photo Statistics",
+                            style = MaterialTheme.typography.titleLarge,
+                            fontWeight = FontWeight.Bold
+                        )
+                        Text(
+                            "Your collection insights",
+                            style = MaterialTheme.typography.bodySmall,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant
+                        )
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { viewModel.refresh() }) {
+                        Icon(Icons.Default.Refresh, "Refresh")
+                    }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f)
+                )
+            )
+        }
+    ) { paddingValues ->
+        when (val state = uiState) {
+            is StatsUiState.Loading -> {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(paddingValues),
+                    contentAlignment = Alignment.Center
+                ) {
+                    CircularProgressIndicator()
+                }
+            }
+
+            is StatsUiState.Error -> {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(paddingValues),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(16.dp)
+                    ) {
+                        Icon(
+                            Icons.Default.Error,
+                            contentDescription = null,
+                            modifier = Modifier.size(64.dp),
+                            tint = MaterialTheme.colorScheme.error
+                        )
+                        Text(
+                            state.message,
+                            style = MaterialTheme.typography.bodyLarge,
+                            color = MaterialTheme.colorScheme.error
+                        )
+                        Button(onClick = { viewModel.refresh() }) {
+                            Text("Retry")
+                        }
+                    }
+                }
+            }
+
+            is StatsUiState.Success -> {
+                StatsContent(
+                    state = state,
+                    granularity = granularity,
+                    onGranularityChange = { viewModel.setTimelineGranularity(it) },
+                    modifier = Modifier.padding(paddingValues)
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun StatsContent(
+    state: StatsUiState.Success,
+    granularity: TimelineGranularity,
+    onGranularityChange: (TimelineGranularity) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    LazyColumn(
+        modifier = modifier.fillMaxSize(),
+        contentPadding = PaddingValues(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        // Overview stats cards
+        item {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                StatCard(
+                    title = "Total Photos",
+                    value = state.totalPhotos.toString(),
+                    icon = Icons.Default.Photo,
+                    color = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.weight(1f)
+                )
+                StatCard(
+                    title = "Per Day",
+                    value = String.format("%.1f", state.averagePerDay),
+                    icon = Icons.Default.CalendarToday,
+                    color = MaterialTheme.colorScheme.tertiary,
+                    modifier = Modifier.weight(1f)
+                )
+            }
+        }
+
+        item {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                StatCard(
+                    title = "People",
+                    value = state.personCount.toString(),
+                    icon = Icons.Default.Face,
+                    color = MaterialTheme.colorScheme.secondary,
+                    modifier = Modifier.weight(1f)
+                )
+                state.burstStats?.let { burst ->
+                    StatCard(
+                        title = "Burst Groups",
+                        value = burst.estimatedBurstGroups.toString(),
+                        icon = Icons.Default.BurstMode,
+                        color = MaterialTheme.colorScheme.error,
+                        modifier = Modifier.weight(1f)
+                    )
+                }
+            }
+        }
+
+        // Timeline chart
+        item {
+            SectionHeader("Photo Timeline")
+        }
+
+        item {
+            TimelineChart(
+                state = state,
+                granularity = granularity,
+                onGranularityChange = onGranularityChange
+            )
+        }
+
+        // Year breakdown
+        item {
+            Spacer(Modifier.height(8.dp))
+            SectionHeader("Photos by Year")
+        }
+
+        items(state.yearCounts) { yearCount ->
+            YearStatRow(
+                year = yearCount.year,
+                count = yearCount.count,
+                totalPhotos = state.totalPhotos
+            )
+        }
+
+        // System tags
+        if (state.systemTagStats.isNotEmpty()) {
+            item {
+                Spacer(Modifier.height(8.dp))
+                SectionHeader("System Tags")
+            }
+
+            items(state.systemTagStats) { tagStat ->
+                TagStatRow(tagStat)
+            }
+        }
+
+        // Usage patterns
+        if (state.dayOfWeekCounts.isNotEmpty()) {
+            item {
+                Spacer(Modifier.height(8.dp))
+                SectionHeader("When You Shoot")
+            }
+
+            item {
+                DayOfWeekChart(state.dayOfWeekCounts)
+            }
+        }
+
+        // Date range info
+        state.dateRange?.let { range ->
+            item {
+                Spacer(Modifier.height(8.dp))
+                DateRangeCard(range)
+            }
+        }
+    }
+}
+
+@Composable
+private fun SectionHeader(title: String) {
+    Text(
+        text = title,
+        style = MaterialTheme.typography.titleMedium,
+        fontWeight = FontWeight.Bold,
+        color = MaterialTheme.colorScheme.primary,
+        modifier = Modifier.padding(vertical = 8.dp)
+    )
+}
+
+@Composable
+private fun StatCard(
+    title: String,
+    value: String,
+    icon: ImageVector,
+    color: Color,
+    modifier: Modifier = Modifier
+) {
+    Card(
+        modifier = modifier,
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = color.copy(alpha = 0.1f)
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Icon(
+                icon,
+                contentDescription = null,
+                modifier = Modifier.size(32.dp),
+                tint = color
+            )
+            Text(
+                value,
+                style = MaterialTheme.typography.headlineMedium,
+                fontWeight = FontWeight.Bold,
+                color = color
+            )
+            Text(
+                title,
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
+}
+
+@Composable
+private fun TimelineChart(
+    state: StatsUiState.Success,
+    granularity: TimelineGranularity,
+    onGranularityChange: (TimelineGranularity) -> Unit
+) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            // Granularity selector
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                TimelineGranularity.entries.forEach { g ->
+                    FilterChip(
+                        selected = granularity == g,
+                        onClick = { onGranularityChange(g) },
+                        label = {
+                            Text(
+                                when (g) {
+                                    TimelineGranularity.DAILY -> "Daily"
+                                    TimelineGranularity.MONTHLY -> "Monthly"
+                                    TimelineGranularity.YEARLY -> "Yearly"
+                                }
+                            )
+                        }
+                    )
+                }
+            }
+
+            // Chart
+            val modelProducer = remember { CartesianChartModelProducer.build() }
+
+            LaunchedEffect(granularity, state) {
+                val data = when (granularity) {
+                    TimelineGranularity.DAILY -> state.dailyCounts.map { it.count.toFloat() }
+                    TimelineGranularity.MONTHLY -> state.monthlyCounts.map { it.count.toFloat() }
+                    TimelineGranularity.YEARLY -> state.yearCounts.reversed().map { it.count.toFloat() }
+                }
+
+                if (data.isNotEmpty()) {
+                    modelProducer.tryRunTransaction {
+                        lineSeries { series(data) }
+                    }
+                }
+            }
+
+            if (state.dailyCounts.isNotEmpty()) {
+                CartesianChartHost(
+                    chart = rememberCartesianChart(
+                        rememberLineCartesianLayer(),
+                        startAxis = rememberStartAxis(),
+                        bottomAxis = rememberBottomAxis()
+                    ),
+                    modelProducer = modelProducer,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(200.dp)
+                )
+            } else {
+                Text(
+                    "No data available",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(32.dp),
+                    textAlign = TextAlign.Center,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun YearStatRow(
+    year: String,
+    count: Int,
+    totalPhotos: Int
+) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                Text(
+                    year,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold
+                )
+                val percentage = if (totalPhotos > 0) {
+                    (count.toFloat() / totalPhotos * 100).toInt()
+                } else 0
+                Text(
+                    "$percentage% of collection",
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+            }
+
+            Surface(
+                shape = RoundedCornerShape(8.dp),
+                color = MaterialTheme.colorScheme.primaryContainer
+            ) {
+                Text(
+                    count.toString(),
+                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.primary
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun TagStatRow(tagStat: com.placeholder.sherpai2.data.local.dao.TagStat) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.weight(1f)
+            ) {
+                Icon(
+                    getTagIcon(tagStat.tagValue),
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(24.dp)
+                )
+                Text(
+                    tagStat.tagValue.replace("_", " ").capitalize(),
+                    style = MaterialTheme.typography.bodyLarge
+                )
+            }
+
+            Surface(
+                shape = RoundedCornerShape(8.dp),
+                color = MaterialTheme.colorScheme.secondaryContainer
+            ) {
+                Text(
+                    tagStat.imageCount.toString(),
+                    modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
+                    style = MaterialTheme.typography.bodyMedium,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colorScheme.secondary
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun DayOfWeekChart(counts: List<com.placeholder.sherpai2.data.local.dao.DayOfWeekCount>) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            val days = listOf("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
+            val maxCount = counts.maxOfOrNull { it.count } ?: 1
+
+            counts.forEach { dayCount ->
+                val dayName = days.getOrNull(dayCount.dayOfWeek) ?: "?"
+                val percentage = (dayCount.count.toFloat() / maxCount)
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        dayName,
+                        modifier = Modifier.width(50.dp),
+                        style = MaterialTheme.typography.bodyMedium,
+                        fontWeight = FontWeight.Medium
+                    )
+
+                    Box(
+                        modifier = Modifier
+                            .weight(1f)
+                            .height(32.dp)
+                            .background(
+                                MaterialTheme.colorScheme.surfaceVariant,
+                                RoundedCornerShape(4.dp)
+                            )
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxHeight()
+                                .fillMaxWidth(percentage)
+                                .background(
+                                    MaterialTheme.colorScheme.primary,
+                                    RoundedCornerShape(4.dp)
+                                )
+                        )
+                        Text(
+                            dayCount.count.toString(),
+                            modifier = Modifier
+                                .align(Alignment.CenterEnd)
+                                .padding(end = 8.dp),
+                            style = MaterialTheme.typography.bodySmall,
+                            fontWeight = FontWeight.Bold
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun DateRangeCard(range: com.placeholder.sherpai2.data.local.dao.PhotoDateRange) {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    Icons.Default.DateRange,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.primary
+                )
+                Text(
+                    "Collection Date Range",
+                    style = MaterialTheme.typography.titleSmall,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+
+            val dateFormat = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault())
+            val earliest = dateFormat.format(Date(range.earliest))
+            val latest = dateFormat.format(Date(range.latest))
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Column {
+                    Text(
+                        "Earliest",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                    Text(
+                        earliest,
+                        style = MaterialTheme.typography.bodyMedium,
+                        fontWeight = FontWeight.Medium
+                    )
+                }
+                Column(horizontalAlignment = Alignment.End) {
+                    Text(
+                        "Latest",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                    Text(
+                        latest,
+                        style = MaterialTheme.typography.bodyMedium,
+                        fontWeight = FontWeight.Medium
+                    )
+                }
+            }
+        }
+    }
+}
+
+private fun getTagIcon(tagValue: String): ImageVector {
+    return when (tagValue) {
+        "burst" -> Icons.Default.BurstMode
+        "duplicate" -> Icons.Default.FileCopy
+        "screenshot" -> Icons.Default.Screenshot
+        "blurry" -> Icons.Default.BlurOn
+        "low_quality" -> Icons.Default.LowPriority
+        else -> Icons.Default.LocalOffer
+    }
+}
+
+private fun String.capitalize(): String {
+    return this.split("_").joinToString(" ") { word ->
+        word.replaceFirstChar { it.uppercase() }
+    }
+}

app/src/main/java/com/placeholder/sherpai2/ui/utilities/stats/Statsviewmodel.kt

@@ -0,0 +1,127 @@
+package com.placeholder.sherpai2.ui.utilities.stats
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.placeholder.sherpai2.data.local.dao.*
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+/**
+ * StatsViewModel - Photo collection statistics
+ *
+ * Features:
+ * 1. Photo count timeline (daily/monthly/yearly)
+ * 2. Year-by-year breakdown
+ * 3. System tag statistics
+ * 4. Burst detection stats
+ * 5. Usage patterns (day of week, hour of day)
+ */
+@HiltViewModel
+class StatsViewModel @Inject constructor(
+    private val imageDao: ImageDao,
+    private val tagDao: TagDao,
+    private val imageTagDao: ImageTagDao,
+    private val personDao: PersonDao,
+    private val photoFaceTagDao: PhotoFaceTagDao
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow<StatsUiState>(StatsUiState.Loading)
+    val uiState: StateFlow<StatsUiState> = _uiState.asStateFlow()
+
+    private val _timelineGranularity = MutableStateFlow(TimelineGranularity.MONTHLY)
+    val timelineGranularity: StateFlow<TimelineGranularity> = _timelineGranularity.asStateFlow()
+
+    init {
+        loadStats()
+    }
+
+    fun loadStats() {
+        viewModelScope.launch(Dispatchers.IO) {
+            try {
+                _uiState.value = StatsUiState.Loading
+
+                // Load all stats in parallel
+                val totalCount = imageDao.getImageCount()
+                val yearCounts = imageDao.getPhotoCountsByYear()
+                val monthlyCounts = imageDao.getPhotoCountsByMonth()
+                val dailyCounts = imageDao.getPhotoCountsByDate()
+                val systemTagStats = tagDao.getSystemTagStats()
+                val burstStats = imageTagDao.getBurstStats()
+                val dateRange = imageDao.getPhotoDateRange()
+                val avgPerDay = imageDao.getAveragePhotosPerDay()
+                val dayOfWeekCounts = imageDao.getPhotoCountsByDayOfWeek()
+                val hourCounts = imageDao.getPhotoCountsByHour()
+
+                // Face recognition stats
+                val personCount = personDao.getPersonCount()
+                val taggedFaceCount = photoFaceTagDao.getUnverifiedTagCount()
+
+                _uiState.value = StatsUiState.Success(
+                    totalPhotos = totalCount,
+                    yearCounts = yearCounts,
+                    monthlyCounts = monthlyCounts,
+                    dailyCounts = dailyCounts,
+                    systemTagStats = systemTagStats,
+                    burstStats = burstStats,
+                    dateRange = dateRange,
+                    averagePerDay = avgPerDay ?: 0f,
+                    dayOfWeekCounts = dayOfWeekCounts,
+                    hourCounts = hourCounts,
+                    personCount = personCount,
+                    taggedFaceCount = taggedFaceCount
+                )
+
+            } catch (e: Exception) {
+                _uiState.value = StatsUiState.Error(
+                    e.message ?: "Failed to load statistics"
+                )
+            }
+        }
+    }
+
+    fun setTimelineGranularity(granularity: TimelineGranularity) {
+        _timelineGranularity.value = granularity
+    }
+
+    fun refresh() {
+        loadStats()
+    }
+}
+
+/**
+ * UI State for stats screen
+ */
+sealed class StatsUiState {
+    object Loading : StatsUiState()
+
+    data class Success(
+        val totalPhotos: Int,
+        val yearCounts: List<YearCount>,
+        val monthlyCounts: List<MonthCount>,
+        val dailyCounts: List<DateCount>,
+        val systemTagStats: List<TagStat>,
+        val burstStats: BurstStats?,
+        val dateRange: PhotoDateRange?,
+        val averagePerDay: Float,
+        val dayOfWeekCounts: List<DayOfWeekCount>,
+        val hourCounts: List<HourCount>,
+        val personCount: Int,
+        val taggedFaceCount: Int
+    ) : StatsUiState()
+
+    data class Error(val message: String) : StatsUiState()
+}
+
+/**
+ * Timeline granularity options
+ */
+enum class TimelineGranularity {
+    DAILY,
+    MONTHLY,
+    YEARLY
+}

gradle/libs.versions.toml

@@ -28,6 +28,13 @@ tensorflow-lite = "2.14.0"
 tensorflow-lite-support = "0.4.4"
 gson = "2.10.1"
 
+#Album/Image View Tools
+zoomable = "1.6.1"
+
+#Charting Lib
+vico = "2.0.0-alpha.28"
+
+
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
 androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycle" }
@@ -68,6 +75,16 @@ tensorflow-lite-gpu = { group = "org.tensorflow", name = "tensorflow-lite-gpu",
 
 gson = { group = "com.google.code.gson", name = "gson", version.ref = "gson" }
 
+
+#Album/Image View Tools
+zoomable = { group = "net.engawapg.lib", name = "zoomable", version.ref = "zoomable" }
+
+vico-compose = { module = "com.patrykandpatrick.vico:compose", version.ref = "vico" }
+vico-compose-m3 = { module = "com.patrykandpatrick.vico:compose-m3", version.ref = "vico" }
+vico-core = { module = "com.patrykandpatrick.vico:core", version.ref = "vico" }
+
+
+
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }