Upload status

* fix(ml): handle empty/corrupt images in face detection

When a corrupt or degenerate image with zero-dimension (0 width or 0 height)
reaches the face detection pipeline, insightface's RetinaFace.detect() calls
cv2.resize() with a target size of 0, triggering an OpenCV assertion failure:

  error: (-215:Assertion failed) inv_scale_x > 0 in function 'resize'

This crashes the ML worker and returns a 500 error to the server.

Add an early return in FaceDetector._predict() that checks for zero-dimension
images after decoding and returns empty detection results instead of passing
them to the insightface model.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(ml): move empty image validation to request level

Per review feedback, validate image dimensions in the predict endpoint
(returning 400) rather than in each model's _predict method. This
catches all zero-dimension images before they reach any model task.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(ml): resolve mypy strict type error in predict endpoint

Use intermediate `decoded` variable so mypy knows `.width` and `.height`
are accessed on `Image`, not on `Image | str`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

machine-learning/Dockerfile

@@ -48,14 +48,14 @@ FROM python:3.13-slim-trixie@sha256:d168b8d9eb761f4d3fe305ebd04aeb7e7f2de0297cec
 
 RUN apt-get update && \
     apt-get install --no-install-recommends -yqq ocl-icd-libopencl1 wget && \
-    wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/v2.28.4/intel-igc-core-2_2.28.4+20760_amd64.deb && \
-    wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/v2.28.4/intel-igc-opencl-2_2.28.4+20760_amd64.deb && \
-    wget -nv https://github.com/intel/compute-runtime/releases/download/26.05.37020.3/intel-opencl-icd_26.05.37020.3-0_amd64.deb &&  \
+    wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/v2.32.7/intel-igc-core-2_2.32.7+21184_amd64.deb && \
+    wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/v2.32.7/intel-igc-opencl-2_2.32.7+21184_amd64.deb && \
+    wget -nv https://github.com/intel/compute-runtime/releases/download/26.14.37833.4/intel-opencl-icd_26.14.37833.4-0_amd64.deb &&  \
     wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/igc-1.0.17537.24/intel-igc-core_1.0.17537.24_amd64.deb && \
     wget -nv https://github.com/intel/intel-graphics-compiler/releases/download/igc-1.0.17537.24/intel-igc-opencl_1.0.17537.24_amd64.deb && \
     wget -nv https://github.com/intel/compute-runtime/releases/download/24.35.30872.36/intel-opencl-icd-legacy1_24.35.30872.36_amd64.deb && \
     # TODO: Figure out how to get renovate to manage this differently versioned libigdgmm file
-    wget -nv https://github.com/intel/compute-runtime/releases/download/26.05.37020.3/libigdgmm12_22.9.0_amd64.deb && \
+    wget -nv https://github.com/intel/compute-runtime/releases/download/26.14.37833.4/libigdgmm12_22.9.0_amd64.deb && \
     dpkg -i *.deb && \
     rm *.deb && \
     apt-get remove wget -yqq && \

machine-learning/immich_ml/main.py

@@ -183,7 +183,10 @@ async def predict(
     text: str | None = Form(default=None),
 ) -> Any:
     if image is not None:
-        inputs: Image | str = await run(lambda: decode_pil(image))
+        decoded = await run(lambda: decode_pil(image))
+        if decoded.width == 0 or decoded.height == 0:
+            raise HTTPException(400, "Image has zero width or height")
+        inputs: Image | str = decoded
     elif text is not None:
         inputs = text
     else:

machine-learning/pyproject.toml

@@ -9,12 +9,12 @@ dependencies = [
     "aiocache>=0.12.1,<1.0",
     "fastapi>=0.95.2,<1.0",
     "gunicorn>=21.1.0",
-    "huggingface-hub>=0.20.1,<1.0",
+    "huggingface-hub>=1.0,<2.0",
     "insightface>=0.7.3,<1.0",
     "numpy<2.4.0",
     "opencv-python-headless>=4.7.0.72,<5.0",
     "orjson>=3.9.5",
-    "pillow>=12.2,<12.3",
+    "pillow>=12.2,<13",
     "pydantic>=2.0.0,<3",
     "pydantic-settings>=2.5.2,<3",
     "python-multipart>=0.0.6,<1.0",

machine-learning/test_main.py

@@ -1198,6 +1198,19 @@ class TestLoad:
         mock_model.model_format = ModelFormat.ONNX
 
 
+@pytest.mark.parametrize("size", [(0, 100), (100, 0), (0, 0)])
+def test_predict_rejects_empty_image(size: tuple[int, int], deployed_app: TestClient) -> None:
+    with mock.patch("immich_ml.main.decode_pil", return_value=Image.new("RGB", size)):
+        response = deployed_app.post(
+            "http://localhost:3003/predict",
+            data={"entries": json.dumps({"clip": {"visual": {"modelName": "ViT-B-32__openai"}}})},
+            files={"image": b"fake image bytes"},
+        )
+
+    assert response.status_code == 400
+    assert "zero" in response.json()["detail"].lower()
+
+
 def test_root_endpoint(deployed_app: TestClient) -> None:
     response = deployed_app.get("http://localhost:3003")
 

mobile/lib/domain/services/remote_album.service.dart

@@ -9,12 +9,47 @@ import 'package:immich_mobile/infrastructure/repositories/remote_album.repositor
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
+import 'package:logging/logging.dart';
+
+/// Categorizes a heterogeneous asset selection into the candidates that can
+/// be added to an album immediately (already on the server) and the local-only
+/// candidates that must be uploaded first.
+class AlbumAssetCandidates {
+  final List<String> remoteAssetIds;
+  final List<LocalAsset> localAssetsToUpload;
+
+  const AlbumAssetCandidates({required this.remoteAssetIds, required this.localAssetsToUpload});
+}
 
 class RemoteAlbumService {
+  static final _logger = Logger('RemoteAlbumService');
+
   final DriftRemoteAlbumRepository _repository;
   final DriftAlbumApiRepository _albumApiRepository;
+  final ForegroundUploadService _uploadService;
 
-  const RemoteAlbumService(this._repository, this._albumApiRepository);
+  const RemoteAlbumService(this._repository, this._albumApiRepository, this._uploadService);
+
+  /// Categorizes a heterogeneous asset selection into already-on-server IDs
+  /// and local assets that still need to be uploaded.
+  static AlbumAssetCandidates categorizeCandidates(Iterable<BaseAsset> assets) {
+    final remoteIds = <String>[];
+    final localToUpload = <LocalAsset>[];
+    for (final asset in assets) {
+      if (asset is RemoteAsset) {
+        remoteIds.add(asset.id);
+      } else if (asset is LocalAsset) {
+        final remoteId = asset.remoteId;
+        if (remoteId != null) {
+          remoteIds.add(remoteId);
+        } else {
+          localToUpload.add(asset);
+        }
+      }
+    }
+    return AlbumAssetCandidates(remoteAssetIds: remoteIds, localAssetsToUpload: localToUpload);
+  }
 
   Stream<RemoteAlbum?> watchAlbum(String albumId) {
     return _repository.watchAlbum(albumId);
@@ -148,6 +183,101 @@ class RemoteAlbumService {
     return album.added.length;
   }
 
+  /// !TODO The name here is not clear as we have addAssets method above,
+  /// which is only add remote assets to album, for the next PR, we will allow
+  /// adding local assets from album from the timeline as well with this flow.
+  /// So saving that for the next refactor
+  Future<int> addAssetsToAlbum({
+    required String albumId,
+    required UserDto uploader,
+    required AlbumAssetCandidates candidates,
+    UploadCallbacks uploadCallbacks = const UploadCallbacks(),
+  }) async {
+    int addedCount = 0;
+    if (candidates.remoteAssetIds.isNotEmpty) {
+      addedCount += await addAssets(albumId: albumId, assetIds: candidates.remoteAssetIds);
+    }
+    if (candidates.localAssetsToUpload.isNotEmpty) {
+      addedCount += await _uploadAndAddLocals(albumId, uploader, candidates.localAssetsToUpload, uploadCallbacks);
+    }
+    return addedCount;
+  }
+
+  /// Creates an album, seeding it with already-remote asset IDs, then uploads
+  /// local-only assets and links each one as it finishes.
+  Future<RemoteAlbum> createAlbumWithAssets({
+    required String title,
+    required UserDto owner,
+    String? description,
+    AlbumAssetCandidates candidates = const AlbumAssetCandidates(remoteAssetIds: [], localAssetsToUpload: []),
+    UploadCallbacks uploadCallbacks = const UploadCallbacks(),
+  }) async {
+    final album = await createAlbum(
+      title: title,
+      owner: owner,
+      description: description,
+      assetIds: candidates.remoteAssetIds,
+    );
+    if (candidates.localAssetsToUpload.isNotEmpty) {
+      await _uploadAndAddLocals(album.id, owner, candidates.localAssetsToUpload, uploadCallbacks);
+    }
+    return album;
+  }
+
+  Future<int> _uploadAndAddLocals(
+    String albumId,
+    UserDto uploader,
+    List<LocalAsset> localAssets,
+    UploadCallbacks userCallbacks,
+  ) async {
+    int addedCount = 0;
+    final pendingAdds = <Future<void>>[];
+    final localById = {for (final a in localAssets) a.id: a};
+
+    final wrappedCallbacks = UploadCallbacks(
+      onProgress: userCallbacks.onProgress,
+      onICloudProgress: userCallbacks.onICloudProgress,
+      onError: userCallbacks.onError,
+      onSuccess: (localId, remoteId) {
+        userCallbacks.onSuccess?.call(localId, remoteId);
+        final source = localById[localId];
+        if (source == null) {
+          _logger.warning('Upload success for $localId but source LocalAsset missing; skipping album link');
+          return;
+        }
+        pendingAdds.add(
+          _linkUploadedAssetToAlbum(albumId, remoteId, uploader, source)
+              .then<void>((added) {
+                addedCount += added;
+              })
+              .catchError((Object error, StackTrace stack) {
+                _logger.warning('Failed to add uploaded asset $remoteId to album $albumId', error, stack);
+              }),
+        );
+      },
+    );
+
+    await _uploadService.uploadManual(localAssets, callbacks: wrappedCallbacks);
+    await Future.wait(pendingAdds);
+    return addedCount;
+  }
+
+  /// Links a freshly-uploaded asset to an album, ensuring the local DB
+  /// reflects the change without waiting for the next sync. We call the API
+  /// (server is the source of truth), then upsert a placeholder
+  /// `remote_asset_entity` row from the local source so the FK-protected
+  /// junction insert succeeds. Sync overwrites the placeholder later with
+  /// the authoritative server data.
+  Future<int> _linkUploadedAssetToAlbum(String albumId, String remoteId, UserDto uploader, LocalAsset source) async {
+    final result = await _albumApiRepository.addAssets(albumId, [remoteId]);
+    if (result.added.isEmpty) {
+      return 0;
+    }
+    await _repository.upsertRemoteAssetStub(remoteId: remoteId, ownerId: uploader.id, source: source);
+    await _repository.addAssets(albumId, result.added);
+    return result.added.length;
+  }
+
   Future<void> deleteAlbum(String albumId) async {
     await _albumApiRepository.deleteAlbum(albumId);
 

mobile/lib/domain/services/sync_stream.service.dart

@@ -3,6 +3,7 @@
 import 'dart:async';
 import 'dart:convert';
 
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/sync_event.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
@@ -191,17 +192,22 @@ class SyncStreamService {
       case SyncEntityType.assetV1:
         final remoteSyncAssets = data.cast<SyncAssetV1>();
         await _syncStreamRepository.updateAssetsV1(remoteSyncAssets);
-        if (CurrentPlatform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false)) {
-          final hasPermission = await _localFilesManager.hasManageMediaPermission();
-          if (hasPermission) {
-            await _handleRemoteTrashed(remoteSyncAssets.where((e) => e.deletedAt != null).map((e) => e.checksum));
+        await _runWithManageMediaPermission(
+          logContext: "Trashed Assets",
+          action: () async {
+            await _handleRemoteDeleted(remoteSyncAssets.where((e) => e.deletedAt != null).map((e) => e.id));
             await _applyRemoteRestoreToLocal();
-          } else {
-            _logger.warning("sync Trashed Assets cannot proceed because MANAGE_MEDIA permission is missing");
-          }
-        }
+          },
+        );
         return;
       case SyncEntityType.assetDeleteV1:
+        await _runWithManageMediaPermission(
+          logContext: "Deleted Assets",
+          action: () async {
+            final remoteSyncAssets = data.cast<SyncAssetDeleteV1>();
+            await _handleRemoteDeleted(remoteSyncAssets.map((e) => e.assetId));
+          },
+        );
         return _syncStreamRepository.deleteAssetsV1(data.cast());
       case SyncEntityType.assetExifV1:
         return _syncStreamRepository.updateAssetsExifV1(data.cast());
@@ -382,28 +388,32 @@ class SyncStreamService {
     }
   }
 
-  Future<void> _handleRemoteTrashed(Iterable<String> checksums) async {
-    if (checksums.isEmpty) {
+  Future<void> _handleRemoteDeleted(Iterable<String> remoteIds) async {
+    if (remoteIds.isEmpty) {
       return Future.value();
     } else {
-      final localAssetsToTrash = await _localAssetRepository.getAssetsFromBackupAlbums(checksums);
+      final localAssetsToTrash = await _localAssetRepository.getAssetsFromBackupAlbums(remoteIds);
       if (localAssetsToTrash.isNotEmpty) {
-        final mediaUrls = await Future.wait(
-          localAssetsToTrash.values
-              .expand((e) => e)
-              .map((localAsset) => _storageRepository.getAssetEntityForAsset(localAsset).then((e) => e?.getMediaUrl())),
-        );
-        _logger.info("Moving to trash ${mediaUrls.join(", ")} assets");
-        final result = await _localFilesManager.moveToTrash(mediaUrls.nonNulls.toList());
-        if (result) {
-          await _trashedLocalAssetRepository.trashLocalAsset(localAssetsToTrash);
-        }
+        await _trashLocalAssets(localAssetsToTrash);
       } else {
-        _logger.info("No assets found in backup-enabled albums for assets: $checksums");
+        _logger.info("No assets found in backup-enabled albums for remote assets: $remoteIds");
       }
     }
   }
 
+  Future<void> _trashLocalAssets(Map<String, List<LocalAsset>> localAssetsToTrash) async {
+    final mediaUrls = await Future.wait(
+      localAssetsToTrash.values
+          .expand((e) => e)
+          .map((localAsset) => _storageRepository.getAssetEntityForAsset(localAsset).then((e) => e?.getMediaUrl())),
+    );
+    _logger.info("Moving to trash ${mediaUrls.join(", ")} assets");
+    final result = await _localFilesManager.moveToTrash(mediaUrls.nonNulls.toList());
+    if (result) {
+      await _trashedLocalAssetRepository.trashLocalAsset(localAssetsToTrash);
+    }
+  }
+
   Future<void> _applyRemoteRestoreToLocal() async {
     final assetsToRestore = await _trashedLocalAssetRepository.getToRestore();
     if (assetsToRestore.isNotEmpty) {
@@ -413,4 +423,21 @@ class SyncStreamService {
       _logger.info("No remote assets found for restoration");
     }
   }
+
+  Future<void> _runWithManageMediaPermission({
+    required String logContext,
+    required Future<void> Function() action,
+  }) async {
+    if (!CurrentPlatform.isAndroid || !Store.get(StoreKey.manageLocalMediaAndroid, false)) {
+      return;
+    }
+
+    final hasPermission = await _localFilesManager.hasManageMediaPermission();
+    if (!hasPermission) {
+      _logger.warning("sync $logContext cannot proceed because MANAGE_MEDIA permission is missing");
+      return;
+    }
+
+    await action();
+  }
 }

mobile/lib/infrastructure/repositories/local_asset.repository.dart

@@ -109,31 +109,40 @@ class DriftLocalAssetRepository extends DriftDatabaseRepository {
     return query.map((localAlbum) => localAlbum.toDto()).get();
   }
 
-  Future<Map<String, List<LocalAsset>>> getAssetsFromBackupAlbums(Iterable<String> checksums) async {
-    if (checksums.isEmpty) {
+  Future<Map<String, List<LocalAsset>>> getAssetsFromBackupAlbums(Iterable<String> remoteIds) async {
+    if (remoteIds.isEmpty) {
       return {};
     }
 
     final result = <String, List<LocalAsset>>{};
 
-    for (final slice in checksums.toSet().slices(kDriftMaxChunk)) {
+    for (final slice in remoteIds.toSet().slices(kDriftMaxChunk)) {
       final rows =
           await (_db.select(_db.localAlbumAssetEntity).join([
-                innerJoin(_db.localAlbumEntity, _db.localAlbumAssetEntity.albumId.equalsExp(_db.localAlbumEntity.id)),
+                innerJoin(
+                  _db.localAlbumEntity,
+                  _db.localAlbumAssetEntity.albumId.equalsExp(_db.localAlbumEntity.id),
+                  useColumns: false,
+                ),
                 innerJoin(_db.localAssetEntity, _db.localAlbumAssetEntity.assetId.equalsExp(_db.localAssetEntity.id)),
+                innerJoin(
+                  _db.remoteAssetEntity,
+                  _db.localAssetEntity.checksum.equalsExp(_db.remoteAssetEntity.checksum),
+                  useColumns: false,
+                ),
               ])..where(
                 _db.localAlbumEntity.backupSelection.equalsValue(BackupSelection.selected) &
-                    _db.localAssetEntity.checksum.isIn(slice),
+                    _db.remoteAssetEntity.id.isIn(slice),
               ))
               .get();
 
       for (final row in rows) {
         final albumId = row.readTable(_db.localAlbumAssetEntity).albumId;
-        final assetData = row.readTable(_db.localAssetEntity);
-        final asset = assetData.toDto();
+        final asset = row.readTable(_db.localAssetEntity).toDto();
         (result[albumId] ??= <LocalAsset>[]).add(asset);
       }
     }
+
     return result;
   }
 

mobile/lib/infrastructure/repositories/remote_album.repository.dart

@@ -10,6 +10,7 @@ import 'package:immich_mobile/infrastructure/entities/remote_album.entity.drift.
 import 'package:immich_mobile/infrastructure/entities/remote_album_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_album_user.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
+import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 
 enum SortRemoteAlbumsBy { id, updatedAt }
@@ -285,6 +286,37 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
     return assetIds.length;
   }
 
+  /// Inserts a placeholder `remote_asset_entity` row from a freshly-uploaded
+  /// local asset. Skips silently if a row with the same id or
+  /// (owner_id, checksum) already exists — sync will overwrite with the
+  /// authoritative server data once the AssetUploadReadyV1 event is processed.
+  Future<void> upsertRemoteAssetStub({
+    required String remoteId,
+    required String ownerId,
+    required LocalAsset source,
+  }) async {
+    await _db
+        .into(_db.remoteAssetEntity)
+        .insert(
+          RemoteAssetEntityCompanion(
+            id: Value(remoteId),
+            ownerId: Value(ownerId),
+            checksum: Value(source.checksum ?? ''),
+            name: Value(source.name),
+            type: Value(source.type),
+            createdAt: Value(source.createdAt),
+            updatedAt: Value(source.updatedAt),
+            width: Value(source.width),
+            height: Value(source.height),
+            durationMs: Value(source.durationMs),
+            isFavorite: Value(source.isFavorite),
+            visibility: const Value(AssetVisibility.timeline),
+            isEdited: Value(source.isEdited),
+          ),
+          mode: InsertMode.insertOrIgnore,
+        );
+  }
+
   Future<void> addUsers(String albumId, List<String> userIds) {
     final albumUsers = userIds.map(
       (assetId) => RemoteAlbumUserEntityCompanion(

mobile/lib/presentation/pages/drift_album.page.dart

@@ -37,6 +37,7 @@ class _DriftAlbumsPageState extends ConsumerState<DriftAlbumsPage> {
 
     final scrollView = CustomScrollView(
       controller: _scrollController,
+      physics: const AlwaysScrollableScrollPhysics(),
       slivers: [
         ImmichSliverAppBar(
           snap: false,

mobile/lib/presentation/pages/drift_asset_selection_timeline.page.dart

@@ -5,7 +5,6 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/providers/user.provider.dart';
 
 @RoutePage()
 class DriftAssetSelectionTimelinePage extends ConsumerWidget {
@@ -22,17 +21,13 @@ class DriftAssetSelectionTimelinePage extends ConsumerWidget {
           ),
         ),
         timelineServiceProvider.overrideWith((ref) {
-          final user = ref.watch(currentUserProvider);
-          if (user == null) {
-            throw Exception('User must be logged in to access asset selection timeline');
-          }
-
-          final timelineService = ref.watch(timelineFactoryProvider).remoteAssets(user.id);
+          final timelineUsers = ref.watch(timelineUsersProvider).valueOrNull ?? [];
+          final timelineService = ref.watch(timelineFactoryProvider).main(timelineUsers);
           ref.onDispose(timelineService.dispose);
           return timelineService;
         }),
       ],
-      child: const Timeline(),
+      child: const Timeline(showStorageIndicator: true),
     );
   }
 }

mobile/lib/presentation/pages/drift_create_album.page.dart

@@ -179,17 +179,14 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
     }
 
     final album = await ref
-        .watch(remoteAlbumProvider.notifier)
-        .createAlbum(
+        .read(remoteAlbumProvider.notifier)
+        .createAlbumWithAssets(
           title: title,
           description: albumDescriptionController.text.trim(),
-          assetIds: selectedAssets.map((asset) {
-            final remoteAsset = asset as RemoteAsset;
-            return remoteAsset.id;
-          }).toList(),
+          assets: selectedAssets,
         );
 
-    if (album != null) {
+    if (album != null && context.mounted) {
       unawaited(context.replaceRoute(RemoteAlbumRoute(album: album)));
     }
   }

mobile/lib/presentation/pages/drift_remote_album.page.dart

@@ -8,6 +8,7 @@ import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/album/pending_uploads_banner.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/remote_album_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/remote_album/drift_album_option.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
@@ -39,7 +40,8 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
   }
 
   Future<void> addAssets(BuildContext context) async {
-    final albumAssets = await ref.read(remoteAlbumProvider.notifier).getAssets(_album.id);
+    final notifier = ref.read(remoteAlbumProvider.notifier);
+    final albumAssets = await notifier.getAssets(_album.id);
 
     final newAssets = await context.pushRoute<Set<BaseAsset>>(
       DriftAssetSelectionTimelineRoute(lockedSelectionAssets: albumAssets.toSet()),
@@ -49,17 +51,9 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
       return;
     }
 
-    final added = await ref
-        .read(remoteAlbumProvider.notifier)
-        .addAssets(
-          _album.id,
-          newAssets.map((asset) {
-            final remoteAsset = asset as RemoteAsset;
-            return remoteAsset.id;
-          }).toList(),
-        );
+    final added = await notifier.addAssetsToAlbum(_album.id, newAssets);
 
-    if (added > 0) {
+    if (added > 0 && context.mounted) {
       ImmichToast.show(
         context: context,
         msg: "assets_added_to_album_count".t(context: context, args: {'count': added.toString()}),
@@ -186,6 +180,7 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
         currentRemoteAlbumScopedProvider.overrideWithValue(_album),
       ],
       child: Timeline(
+        topSliverWidget: PendingUploadsBanner(albumId: _album.id),
         appBar: RemoteAlbumSliverAppBar(
           icon: Icons.photo_album_outlined,
           kebabMenu: _AlbumKebabMenu(

mobile/lib/presentation/widgets/album/pending_uploads_banner.widget.dart

@@ -0,0 +1,250 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/album/pending_album_uploads.provider.dart';
+
+/// Pinned banner sliver that surfaces in-flight album uploads directly under
+/// the album app bar. Renders nothing while the queue is empty. Tapping the
+/// banner opens a bottom sheet with per-asset progress.
+class PendingUploadsBanner extends ConsumerWidget {
+  static const double _height = 52;
+
+  final String albumId;
+
+  const PendingUploadsBanner({super.key, required this.albumId});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pending = ref.watch(pendingAlbumUploadsProvider(albumId));
+    if (pending.isEmpty) {
+      return const SliverToBoxAdapter(child: SizedBox.shrink());
+    }
+
+    final hasFailures = pending.any((p) => p.failed);
+    final clamped = pending.map((p) => p.progress.clamp(0.0, 1.0)).toList(growable: false);
+    final overallProgress = clamped.isEmpty ? 0.0 : clamped.reduce((a, b) => a + b) / clamped.length;
+    final isIndeterminate = overallProgress <= 0.0;
+
+    return SliverPersistentHeader(
+      pinned: true,
+      delegate: _PendingUploadsBannerDelegate(
+        height: _height,
+        child: _PendingUploadsBannerContent(
+          albumId: albumId,
+          previewAsset: pending.first.asset,
+          count: pending.length,
+          overallProgress: overallProgress,
+          isIndeterminate: isIndeterminate,
+          hasFailures: hasFailures,
+        ),
+      ),
+    );
+  }
+
+  static void _openSheet(BuildContext context, String albumId) {
+    showModalBottomSheet(
+      context: context,
+      showDragHandle: true,
+      builder: (_) => _PendingUploadsSheet(albumId: albumId),
+    );
+  }
+}
+
+class _PendingUploadsBannerDelegate extends SliverPersistentHeaderDelegate {
+  final double height;
+  final Widget child;
+
+  const _PendingUploadsBannerDelegate({required this.height, required this.child});
+
+  @override
+  double get minExtent => height;
+
+  @override
+  double get maxExtent => height;
+
+  @override
+  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;
+
+  @override
+  bool shouldRebuild(covariant _PendingUploadsBannerDelegate oldDelegate) =>
+      height != oldDelegate.height || child != oldDelegate.child;
+}
+
+class _PendingUploadsBannerContent extends StatelessWidget {
+  final String albumId;
+  final BaseAsset previewAsset;
+  final int count;
+  final double overallProgress;
+  final bool isIndeterminate;
+  final bool hasFailures;
+
+  const _PendingUploadsBannerContent({
+    required this.albumId,
+    required this.previewAsset,
+    required this.count,
+    required this.overallProgress,
+    required this.isIndeterminate,
+    required this.hasFailures,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final percentLabel = isIndeterminate ? '' : ' · ${(overallProgress * 100).toInt()}%';
+    return Material(
+      color: hasFailures ? context.colorScheme.errorContainer : context.colorScheme.surfaceContainerHigh,
+      child: InkWell(
+        onTap: () => PendingUploadsBanner._openSheet(context, albumId),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: Row(
+                  children: [
+                    ClipRRect(
+                      borderRadius: const BorderRadius.all(Radius.circular(4)),
+                      child: SizedBox(width: 32, height: 32, child: Thumbnail.fromAsset(asset: previewAsset)),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Text(
+                        '${'uploading'.t(context: context)} $count$percentLabel',
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w500),
+                      ),
+                    ),
+                    if (hasFailures)
+                      Padding(
+                        padding: const EdgeInsets.only(left: 8),
+                        child: Icon(Icons.error_outline, color: context.colorScheme.error, size: 20),
+                      ),
+                    Icon(Icons.chevron_right_rounded, color: context.colorScheme.onSurfaceVariant),
+                  ],
+                ),
+              ),
+            ),
+            SizedBox(
+              height: 3,
+              child: LinearProgressIndicator(
+                value: isIndeterminate ? null : overallProgress,
+                backgroundColor: context.colorScheme.surfaceContainerHighest,
+                valueColor: AlwaysStoppedAnimation<Color>(
+                  hasFailures ? context.colorScheme.error : context.colorScheme.primary,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PendingUploadsSheet extends ConsumerWidget {
+  final String albumId;
+
+  const _PendingUploadsSheet({required this.albumId});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pending = ref.watch(pendingAlbumUploadsProvider(albumId));
+
+    // Auto-dismiss when the queue empties.
+    if (pending.isEmpty) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (Navigator.of(context).canPop()) Navigator.of(context).pop();
+      });
+      return const SizedBox.shrink();
+    }
+
+    final failedCount = pending.where((p) => p.failed).length;
+
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(bottom: 12),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      '${'uploading'.t(context: context)} (${pending.length})',
+                      style: context.textTheme.titleMedium,
+                    ),
+                  ),
+                  if (failedCount > 0)
+                    TextButton.icon(
+                      onPressed: () => ref.read(pendingAlbumUploadsProvider(albumId).notifier).clearFailed(),
+                      icon: const Icon(Icons.clear_rounded, size: 18),
+                      label: Text('Clear failed ($failedCount)'),
+                      style: TextButton.styleFrom(foregroundColor: context.colorScheme.error),
+                    ),
+                ],
+              ),
+            ),
+            SizedBox(
+              height: 96,
+              child: ListView.separated(
+                scrollDirection: Axis.horizontal,
+                itemCount: pending.length,
+                separatorBuilder: (_, __) => const SizedBox(width: 8),
+                itemBuilder: (_, index) => _PendingUploadTile(entry: pending[index]),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PendingUploadTile extends StatelessWidget {
+  final PendingAlbumUpload entry;
+
+  const _PendingUploadTile({required this.entry});
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: const BorderRadius.all(Radius.circular(8)),
+      child: SizedBox(
+        width: 96,
+        height: 96,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            Thumbnail.fromAsset(asset: entry.asset),
+            Positioned.fill(
+              child: ColoredBox(
+                color: entry.failed ? Colors.red.withValues(alpha: 0.6) : Colors.black54,
+                child: Center(
+                  child: entry.failed
+                      ? const Icon(Icons.error_outline, color: Colors.white, size: 28)
+                      : SizedBox(
+                          width: 32,
+                          height: 32,
+                          child: CircularProgressIndicator(
+                            value: entry.progress > 0 ? entry.progress : null,
+                            strokeWidth: 2.5,
+                            backgroundColor: Colors.white24,
+                            valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+                          ),
+                        ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -234,7 +234,11 @@ class _AssetTileWidget extends ConsumerWidget {
       return false;
     }
 
-    return lockSelectionAssets.contains(asset);
+    // Iterate with `==` instead of `Set.contains` because `RemoteAsset.hashCode`
+    // includes `localId` while `==` does not — so the same server asset can
+    // hash to a different bucket when its `localId` differs (e.g., album-fetched
+    // copy has localId=null, merged-timeline copy has it populated).
+    return lockSelectionAssets.any((a) => a == asset);
   }
 
   @override

mobile/lib/providers/album/pending_album_uploads.provider.dart

@@ -0,0 +1,52 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+
+class PendingAlbumUpload {
+  final LocalAsset asset;
+  final double progress;
+  final bool failed;
+
+  const PendingAlbumUpload({required this.asset, this.progress = 0.0, this.failed = false});
+
+  PendingAlbumUpload copyWith({double? progress, bool? failed}) =>
+      PendingAlbumUpload(asset: asset, progress: progress ?? this.progress, failed: failed ?? this.failed);
+}
+
+class AlbumPendingUploadsNotifier extends FamilyNotifier<List<PendingAlbumUpload>, String> {
+  @override
+  List<PendingAlbumUpload> build(String albumId) => const [];
+
+  void enqueue(Iterable<LocalAsset> assets) {
+    if (assets.isEmpty) return;
+    final existingIds = state.map((e) => e.asset.id).toSet();
+    final additions = assets.where((a) => !existingIds.contains(a.id)).map((a) => PendingAlbumUpload(asset: a));
+    state = [...state, ...additions];
+  }
+
+  void updateProgress(String localAssetId, double progress) {
+    state = [
+      for (final entry in state)
+        if (entry.asset.id == localAssetId) entry.copyWith(progress: progress, failed: false) else entry,
+    ];
+  }
+
+  void markFailed(String localAssetId) {
+    state = [
+      for (final entry in state)
+        if (entry.asset.id == localAssetId) entry.copyWith(failed: true) else entry,
+    ];
+  }
+
+  void remove(String localAssetId) {
+    state = state.where((e) => e.asset.id != localAssetId).toList();
+  }
+
+  void clearFailed() {
+    state = state.where((e) => !e.failed).toList();
+  }
+}
+
+final pendingAlbumUploadsProvider =
+    NotifierProvider.family<AlbumPendingUploadsNotifier, List<PendingAlbumUpload>, String>(
+      AlbumPendingUploadsNotifier.new,
+    );

mobile/lib/providers/infrastructure/album.provider.dart

@@ -9,6 +9,7 @@ import 'package:immich_mobile/infrastructure/repositories/remote_album.repositor
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
 
 final localAlbumRepository = Provider<DriftLocalAlbumRepository>(
   (ref) => DriftLocalAlbumRepository(ref.watch(driftProvider)),
@@ -33,7 +34,11 @@ final remoteAlbumRepository = Provider<DriftRemoteAlbumRepository>(
 );
 
 final remoteAlbumServiceProvider = Provider<RemoteAlbumService>(
-  (ref) => RemoteAlbumService(ref.watch(remoteAlbumRepository), ref.watch(driftAlbumApiRepositoryProvider)),
+  (ref) => RemoteAlbumService(
+    ref.watch(remoteAlbumRepository),
+    ref.watch(driftAlbumApiRepositoryProvider),
+    ref.watch(foregroundUploadServiceProvider),
+  ),
   dependencies: [remoteAlbumRepository],
 );
 

mobile/lib/providers/infrastructure/remote_album.provider.dart

@@ -6,8 +6,10 @@ import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/providers/album/pending_album_uploads.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:logging/logging.dart';
 
 class RemoteAlbumState {
@@ -103,6 +105,44 @@ class RemoteAlbumNotifier extends Notifier<RemoteAlbumState> {
     }
   }
 
+  /// Creates an album from a heterogeneous asset selection. Already-remote
+  /// assets seed the album immediately; local-only assets are uploaded and
+  /// linked one-by-one as each upload completes.
+  Future<RemoteAlbum?> createAlbumWithAssets({
+    required String title,
+    String? description,
+    Iterable<BaseAsset> assets = const [],
+  }) async {
+    try {
+      final currentUser = ref.read(currentUserProvider);
+      if (currentUser == null) {
+        throw Exception('User not logged in');
+      }
+
+      final candidates = RemoteAlbumService.categorizeCandidates(assets);
+      final album = await _remoteAlbumService.createAlbumWithAssets(
+        title: title,
+        owner: currentUser,
+        description: description,
+        candidates: candidates,
+      );
+
+      state = state.copyWith(albums: [...state.albums, album]);
+
+      // The createAlbum API returns the album with its initial asset count, but
+      // any local-only assets are uploaded and linked afterward — re-read to
+      // pick up the post-upload junction rows.
+      if (candidates.localAssetsToUpload.isNotEmpty) {
+        await _refreshAlbumInState(album.id);
+      }
+
+      return album;
+    } catch (error, stack) {
+      _logger.severe('Failed to create album with assets', error, stack);
+      rethrow;
+    }
+  }
+
   Future<RemoteAlbum?> updateAlbum(
     String albumId, {
     String? name,
@@ -153,8 +193,59 @@ class RemoteAlbumNotifier extends Notifier<RemoteAlbumState> {
     return _remoteAlbumService.getAssets(albumId);
   }
 
-  Future<int> addAssets(String albumId, List<String> assetIds) {
-    return _remoteAlbumService.addAssets(albumId: albumId, assetIds: assetIds);
+  Future<int> addAssets(String albumId, List<String> assetIds) async {
+    final added = await _remoteAlbumService.addAssets(albumId: albumId, assetIds: assetIds);
+    if (added > 0) {
+      await _refreshAlbumInState(albumId);
+    }
+    return added;
+  }
+
+  /// Adds a heterogeneous asset selection to an album. Already-remote assets
+  /// are linked immediately; local-only assets are queued in
+  /// [pendingAlbumUploadsProvider] (so the album page can show them with
+  /// progress indicators), uploaded, and linked one-by-one as each finishes.
+  Future<int> addAssetsToAlbum(String albumId, Iterable<BaseAsset> assets) async {
+    final currentUser = ref.read(currentUserProvider);
+    if (currentUser == null) {
+      throw Exception('User not logged in');
+    }
+
+    final candidates = RemoteAlbumService.categorizeCandidates(assets);
+    final pendingNotifier = ref.read(pendingAlbumUploadsProvider(albumId).notifier);
+    pendingNotifier.enqueue(candidates.localAssetsToUpload);
+
+    try {
+      final added = await _remoteAlbumService.addAssetsToAlbum(
+        albumId: albumId,
+        uploader: currentUser,
+        candidates: candidates,
+        uploadCallbacks: UploadCallbacks(
+          onProgress: (localAssetId, _, bytes, totalBytes) {
+            final progress = totalBytes > 0 ? bytes / totalBytes : 0.0;
+            pendingNotifier.updateProgress(localAssetId, progress);
+          },
+          onSuccess: (localAssetId, _) => pendingNotifier.remove(localAssetId),
+          onError: (localAssetId, _) => pendingNotifier.markFailed(localAssetId),
+        ),
+      );
+      if (added > 0) {
+        await _refreshAlbumInState(albumId);
+      }
+      return added;
+    } catch (error, stack) {
+      _logger.severe('Failed to add assets to album $albumId', error, stack);
+      rethrow;
+    }
+  }
+
+  /// Re-reads a single album from the local DB and replaces it in [state] so
+  /// that views bound to the album list (counts, thumbnails) reflect the
+  /// latest junction-table changes without a full `refresh()`.
+  Future<void> _refreshAlbumInState(String albumId) async {
+    final updated = await _remoteAlbumService.get(albumId);
+    if (updated == null) return;
+    state = state.copyWith(albums: state.albums.map((album) => album.id == albumId ? updated : album).toList());
   }
 
   Future<void> addUsers(String albumId, List<String> userIds) {

mobile/test/domain/services/sync_stream_service_test.dart

@@ -419,8 +419,8 @@ void main() {
         'album-b': [mergedAsset],
       };
       when(() => mockLocalAssetRepo.getAssetsFromBackupAlbums(any())).thenAnswer((invocation) async {
-        final Iterable<String> requestedChecksums = invocation.positionalArguments.first as Iterable<String>;
-        expect(requestedChecksums.toSet(), equals({'checksum-local', 'checksum-merged', 'checksum-remote-only'}));
+        final Iterable<String> requestedRemoteIds = invocation.positionalArguments.first as Iterable<String>;
+        expect(requestedRemoteIds.toSet(), equals({'remote-1', 'remote-2', 'remote-3'}));
         return assetsByAlbum;
       });
 
@@ -482,12 +482,18 @@ void main() {
       verifyNever(() => mockTrashedLocalAssetRepo.trashLocalAsset(any()));
     });
 
-    test("does not request local deletions for permanent remote delete events", () async {
+    test("requests local deletions lookup by remote ids for permanent remote delete events", () async {
+      when(() => mockLocalAssetRepo.getAssetsFromBackupAlbums(any())).thenAnswer((invocation) async {
+        final Iterable<String> requestedRemoteIds = invocation.positionalArguments.first as Iterable<String>;
+        expect(requestedRemoteIds.toSet(), equals({'remote-asset'}));
+        return {};
+      });
+
       final events = [SyncStreamStub.assetDeleteV1];
 
       await simulateEvents(events);
 
-      verifyNever(() => mockLocalAssetRepo.getAssetsFromBackupAlbums(any()));
+      verify(() => mockLocalAssetRepo.getAssetsFromBackupAlbums(any())).called(1);
       verifyNever(() => mockLocalFilesManagerRepo.moveToTrash(any()));
       verify(() => mockSyncStreamRepo.deleteAssetsV1(any())).called(1);
     });

server/src/services/album.service.spec.ts

@@ -196,6 +196,7 @@ describe(AlbumService.name, () => {
       expect(mocks.user.get).toHaveBeenCalledWith(albumUser.userId, {});
       expect(mocks.user.getMetadata).toHaveBeenCalledWith(owner.id);
       expect(mocks.access.asset.checkOwnerAccess).toHaveBeenCalledWith(owner.id, new Set([assetId]), false);
+      expect(mocks.event.emit).toHaveBeenCalledTimes(1);
       expect(mocks.event.emit).toHaveBeenCalledWith('AlbumInvite', {
         id: album.id,
         userId: albumUser.userId,

server/src/services/album.service.ts

@@ -114,7 +114,6 @@ export class AlbumService extends BaseService {
         throw new BadRequestException('Cannot share album with owner');
       }
     }
-    albumUsers.unshift({ userId: auth.user.id, role: AlbumUserRole.Owner });
 
     const allowedAssetIdsSet = await this.checkAccess({
       auth,
@@ -133,7 +132,7 @@ export class AlbumService extends BaseService {
         order: getPreferences(userMetadata).albums.defaultAssetOrder,
       },
       assetIds,
-      albumUsers,
+      [{ userId: auth.user.id, role: AlbumUserRole.Owner }, ...albumUsers],
       auth.user.id,
     );
 

web/src/lib/components/asset-viewer/DetailPanel.svelte

@@ -10,7 +10,6 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
-  import { boundingBoxesArray } from '$lib/stores/people.store';
   import { locale } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { delay, getDimensions } from '$lib/utils/asset-utils';
@@ -56,7 +55,6 @@
   let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
   let people = $derived(asset.people || []);
   let unassignedFaces = $derived(asset.unassignedFaces || []);
-  let showingHiddenPeople = $state(false);
   let latlng = $derived(
     (() => {
       const lat = asset.exifInfo?.latitude;
@@ -173,12 +171,12 @@
             {#if people.some((person) => person.isHidden)}
               <IconButton
                 aria-label={$t('show_hidden_people')}
-                icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
+                icon={assetViewerManager.isShowingHiddenPeople ? mdiEyeOff : mdiEye}
                 size="medium"
                 shape="round"
                 color="secondary"
                 variant="ghost"
-                onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
+                onclick={() => assetViewerManager.toggleHiddenPeople()}
               />
             {/if}
             <IconButton
@@ -207,15 +205,17 @@
 
         <div class="mt-2 flex flex-wrap gap-2">
           {#each people as person, index (person.id)}
-            {#if showingHiddenPeople || !person.isHidden}
-              {@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
+            {#if assetViewerManager.isShowingHiddenPeople || !person.isHidden}
+              {@const isHighlighted = people[index].faces.some((f) =>
+                assetViewerManager.highlightedFaces.some((b) => b.id === f.id),
+              )}
               <a
                 class="group w-22 outline-none"
                 href={Route.viewPerson(person, { previousRoute })}
-                onfocus={() => ($boundingBoxesArray = people[index].faces)}
-                onblur={() => ($boundingBoxesArray = [])}
-                onmouseover={() => ($boundingBoxesArray = people[index].faces)}
-                onmouseleave={() => ($boundingBoxesArray = [])}
+                onfocus={() => assetViewerManager.setHighlightedFaces(people[index].faces)}
+                onblur={() => assetViewerManager.clearHighlightedFaces()}
+                onpointerenter={() => assetViewerManager.setHighlightedFaces(people[index].faces)}
+                onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
               >
                 <div class="relative">
                   <ImageThumbnail

web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { assetViewerManager, type Faces } from '$lib/managers/asset-viewer-manager.svelte';
   import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
-  import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { calculateBoundingBoxMatrix, getOcrBoundingBoxes, type Point } from '$lib/utils/ocr-utils';
   import {
@@ -55,14 +54,9 @@
   let viewer: Viewer;
 
   let animationInProgress: { cancel: () => void } | undefined;
-  let previousFaces: Faces[] = [];
 
-  const boundingBoxesUnsubscribe = boundingBoxesArray.subscribe((faces: Faces[]) => {
-    // Debounce; don't do anything when the data didn't actually change.
-    if (faces === previousFaces) {
-      return;
-    }
-    previousFaces = faces;
+  $effect(() => {
+    const faces: Faces[] = assetViewerManager.highlightedFaces;
 
     if (animationInProgress) {
       animationInProgress.cancel();
@@ -105,7 +99,7 @@
         textureX: x,
         textureY: y,
         zoom: Math.min(viewer.getZoomLevel(), 75),
-        speed: 500, // duration in ms
+        speed: 500,
       });
     }
   });
@@ -247,7 +241,8 @@
     if (viewer) {
       viewer.destroy();
     }
-    boundingBoxesUnsubscribe();
+    assetViewerManager.clearHighlightedFaces();
+    assetViewerManager.hideHiddenPeople();
     assetViewerManager.zoom = 1;
   });
 </script>

web/src/lib/components/asset-viewer/PhotoViewer.svelte

@@ -6,10 +6,9 @@
   import Thumbhash from '$lib/components/Thumbhash.svelte';
   import OcrBoundingBox from '$lib/components/asset-viewer/OcrBoundingBox.svelte';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { assetViewerManager, type Faces } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
-  import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
@@ -50,12 +49,13 @@
     untrack(() => {
       assetViewerManager.resetZoomState();
       visibleImageReady = false;
-      $boundingBoxesArray = [];
+      assetViewerManager.clearHighlightedFaces();
     });
   });
 
   onDestroy(() => {
-    $boundingBoxesArray = [];
+    assetViewerManager.clearHighlightedFaces();
+    assetViewerManager.hideHiddenPeople();
   });
 
   let containerWidth = $state(0);
@@ -74,15 +74,13 @@
     return scaleToFit(getNaturalSize(assetViewerManager.imgRef), { width: containerWidth, height: containerHeight });
   });
 
-  const highlightedBoxes = $derived(getBoundingBox($boundingBoxesArray, overlaySize));
+  const highlightedBoxes = $derived(getBoundingBox(assetViewerManager.highlightedFaces, overlaySize));
   const isHighlighting = $derived(highlightedBoxes.length > 0);
 
   let visibleBoxes = $state<BoundingBox[]>([]);
-  let visibleBoundingBoxes = $state<Faces[]>([]);
   $effect(() => {
     if (isHighlighting) {
       visibleBoxes = highlightedBoxes;
-      visibleBoundingBoxes = $boundingBoxesArray;
     }
   });
 
@@ -160,6 +158,9 @@
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const map = new Map<Faces, string>();
     for (const person of asset.people ?? []) {
+      if (person.isHidden && !assetViewerManager.isShowingHiddenPeople) {
+        continue;
+      }
       for (const face of person.faces ?? []) {
         map.set(face, person.name);
       }
@@ -169,35 +170,31 @@
 
   const faces = $derived(Array.from(faceToNameMap.keys()));
 
-  const handleImageMouseMove = (event: MouseEvent) => {
-    $boundingBoxesArray = [];
-    if (!assetViewerManager.imgRef || !element || assetViewerManager.isFaceEditMode || ocrManager.showOverlay) {
-      return;
+  const boundingBoxes = $derived.by(() => {
+    if (assetViewerManager.isFaceEditMode || ocrManager.showOverlay) {
+      return [];
     }
 
-    const natural = getNaturalSize(assetViewerManager.imgRef);
-    const scaled = scaleToFit(natural, container);
-    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
+    const knownBoxes = getBoundingBox(faces, overlaySize);
+    const result = knownBoxes.map((box, index) => ({
+      ...box,
+      face: faces[index],
+      name: faceToNameMap.get(faces[index]),
+    }));
 
-    const contentOffsetX = (container.width - scaled.width) / 2;
-    const contentOffsetY = (container.height - scaled.height) / 2;
-
-    const containerRect = element.getBoundingClientRect();
-    const mouseX = (event.clientX - containerRect.left - contentOffsetX * currentZoom - currentPositionX) / currentZoom;
-    const mouseY = (event.clientY - containerRect.top - contentOffsetY * currentZoom - currentPositionY) / currentZoom;
-
-    const faceBoxes = getBoundingBox(faces, overlaySize);
-
-    for (const [index, box] of faceBoxes.entries()) {
-      if (mouseX >= box.left && mouseX <= box.left + box.width && mouseY >= box.top && mouseY <= box.top + box.height) {
-        $boundingBoxesArray.push(faces[index]);
-      }
+    if (assetViewerManager.highlightedFaces.length === 0) {
+      return result;
     }
-  };
 
-  const handleImageMouseLeave = () => {
-    $boundingBoxesArray = [];
-  };
+    const knownIds = new Set(faces.map((f) => f.id));
+    const unassignedFaces = assetViewerManager.highlightedFaces.filter((f) => !knownIds.has(f.id));
+    const unassignedBoxes = getBoundingBox(unassignedFaces, overlaySize);
+    for (let i = 0; i < unassignedBoxes.length; i++) {
+      result.push({ ...unassignedBoxes[i], face: unassignedFaces[i], name: undefined });
+    }
+
+    return result;
+  });
 </script>
 
 <AssetViewerEvents {onCopy} {onZoom} {onFaceEditModeChange} />
@@ -218,8 +215,6 @@
   bind:clientHeight={containerHeight}
   role="presentation"
   ondblclick={onZoom}
-  onmousemove={handleImageMouseMove}
-  onmouseleave={handleImageMouseLeave}
   use:zoomImageAction={{ zoomTarget: adaptiveImage }}
   {...useSwipe((event) => onSwipe?.(event))}
 >
@@ -261,22 +256,27 @@
           </defs>
           <rect width="100%" height="100%" fill="rgba(0,0,0,0.4)" mask="url(#face-dim-mask)" />
         </svg>
-        {#each visibleBoxes as boundingbox, index (boundingbox.id)}
-          <div
-            class="absolute border-solid border-white border-3 rounded-lg"
-            style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-          ></div>
-          {#if faceToNameMap.get(visibleBoundingBoxes[index])}
+      </div>
+      {#each boundingBoxes as boundingbox (boundingbox.id)}
+        {@const isActive = assetViewerManager.highlightedFaces.some((f) => f.id === boundingbox.id)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="absolute pointer-events-auto rounded-lg {isActive && 'border-solid border-white border-3'}"
+          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+          onpointerenter={() => assetViewerManager.setHighlightedFaces([boundingbox.face])}
+          onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
+        >
+          {#if isActive && boundingbox.name}
             <div
-              class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap pointer-events-none shadow-lg"
-              style="top: {boundingbox.top + boundingbox.height + 4}px; left: {boundingbox.left +
-                boundingbox.width}px; transform: translateX(-100%);"
+              aria-hidden="true"
+              class="absolute bg-white/90 text-black px-2 py-1 rounded text-sm font-medium whitespace-nowrap shadow-lg"
+              style="top: {boundingbox.height + 4}px; right: 0;"
             >
-              {faceToNameMap.get(visibleBoundingBoxes[index])}
+              {boundingbox.name}
             </div>
           {/if}
-        {/each}
-      </div>
+        </div>
+      {/each}
 
       {#each ocrBoxes as ocrBox (ocrBox.id)}
         <OcrBoundingBox {ocrBox} />

web/src/lib/components/faces-page/PersonSidePanel.svelte

@@ -4,7 +4,6 @@
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { boundingBoxesArray } from '$lib/stores/people.store';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { zoomImageToBase64 } from '$lib/utils/people-utils';
@@ -239,15 +238,15 @@
       {:else}
         {#each peopleWithFaces as face, index (face.id)}
           {@const personName = face.person ? face.person?.name : $t('face_unassigned')}
-          {@const isHighlighted = $boundingBoxesArray.some((b) => b.id === face.id)}
+          {@const isHighlighted = assetViewerManager.highlightedFaces.some((b) => b.id === face.id)}
           <div class="relative h-29 w-24">
             <div
               role="button"
               tabindex={index}
               class="absolute start-0 top-0 h-22.5 w-22.5 cursor-default"
-              onfocus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onmouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              onmouseleave={() => ($boundingBoxesArray = [])}
+              onfocus={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
+              onpointerenter={() => assetViewerManager.setHighlightedFaces([peopleWithFaces[index]])}
+              onpointerleave={() => assetViewerManager.clearHighlightedFaces()}
             >
               <div class="relative">
                 {#if selectedPersonToCreate[face.id]}

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -8,6 +8,16 @@ import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
 import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
 
+export interface Faces {
+  id: string;
+  imageHeight: number;
+  imageWidth: number;
+  boundingBoxX1: number;
+  boundingBoxX2: number;
+  boundingBoxY1: number;
+  boundingBoxY2: number;
+}
+
 const isShowDetailPanel = new PersistedLocalStorage<boolean>('asset-viewer-state', false);
 const isShowAssetPath = new PersistedLocalStorage<boolean>('asset-viewer-show-path', false);
 
@@ -48,6 +58,8 @@ class AssetViewerManager extends BaseEventManager<Events> {
   #isEditFacesPanelOpen = $state(false);
   #viewingAssetStoreState = $state<AssetResponseDto>();
   #viewState = $state<boolean>(false);
+  #highlightedFaces = $state<Faces[]>([]);
+  #showingHiddenPeople = $state(false);
   gridScrollTarget = $state<AssetGridRouteSearchParams | null | undefined>();
 
   get asset() {
@@ -209,6 +221,31 @@ class AssetViewerManager extends BaseEventManager<Events> {
     this.closeFaceEditMode();
     this.closeEditFacesPanel();
   }
+
+  get highlightedFaces() {
+    return this.#highlightedFaces;
+  }
+
+  setHighlightedFaces(faces: Faces[]) {
+    this.#highlightedFaces = faces;
+  }
+
+  clearHighlightedFaces() {
+    this.#highlightedFaces = [];
+  }
+
+  get isShowingHiddenPeople() {
+    return this.#showingHiddenPeople;
+  }
+
+  toggleHiddenPeople() {
+    this.#showingHiddenPeople = !this.#showingHiddenPeople;
+  }
+
+  hideHiddenPeople() {
+    this.#showingHiddenPeople = false;
+  }
+
   setAsset(asset: AssetResponseDto) {
     this.#viewingAssetStoreState = asset;
     this.#viewState = true;

web/src/lib/stores/people.store.ts

@@ -1,13 +0,0 @@
-import { writable } from 'svelte/store';
-
-export interface Faces {
-  id: string;
-  imageHeight: number;
-  imageWidth: number;
-  boundingBoxX1: number;
-  boundingBoxX2: number;
-  boundingBoxY1: number;
-  boundingBoxY2: number;
-}
-
-export const boundingBoxesArray = writable<Faces[]>([]);

web/src/lib/utils/people-utils.spec.ts

@@ -1,4 +1,4 @@
-import type { Faces } from '$lib/stores/people.store';
+import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import type { Size } from '$lib/utils/container-utils';
 import { getBoundingBox } from '$lib/utils/people-utils';
 

web/src/lib/utils/people-utils.ts

@@ -1,5 +1,5 @@
 import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
-import type { Faces } from '$lib/stores/people.store';
+import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
 import { mapNormalizedRectToContent, type Rect, type Size } from '$lib/utils/container-utils';