Fix: Preserve reference image panel state and selection on recall (#9010)

* Fix: Preserve reference image panel state and selection on recall

Made-with: Cursor

* chore: apply Prettier to refImagesSlice

Made-with: Cursor

* fix: refine ref image recall selection behavior

Simplify image-name fingerprint fallback, add an explicit guard for open-panel with null selection, and document the acceptable empty-config collision tradeoff.

Made-with: Cursor

---------

Co-authored-by: Alexander Eichhorn <alex@eichhorn.dev>

Author: ufuksarp

invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts

@@ -35,6 +35,15 @@ type PayloadActionWithId<T = void> = T extends void
       } & T
     >;
 
+/** Fingerprint used to match the same reference image entry after recall when ids are regenerated. */
+/** Empty configs of the same type may collide; the worst case is selecting an equivalent empty entity. */
+const getRefImageRecallMatchKey = (entity: RefImageState): string => {
+  const { config } = entity;
+  const imageName = config.image?.original.image.image_name ?? '';
+  const modelKey = 'model' in config && config.model ? config.model.key : '';
+  return `${config.type}\0${modelKey}\0${imageName}`;
+};
+
 const slice = createSlice({
   name: 'refImages',
   initialState: getInitialRefImagesState(),
@@ -54,13 +63,41 @@ const slice = createSlice({
     },
     refImagesRecalled: (state, action: PayloadAction<{ entities: RefImageState[]; replace: boolean }>) => {
       const { entities, replace } = action.payload;
-      if (replace) {
-        state.entities = entities;
+      if (!replace) {
+        state.entities.push(...entities);
+        return;
+      }
+      const wasPanelOpen = state.isPanelOpen;
+      const previousSelectedId = state.selectedEntityId;
+      let previousEntity: RefImageState | null = null;
+      if (previousSelectedId !== null) {
+        previousEntity = state.entities.find((e) => e.id === previousSelectedId) ?? null;
+      }
+      state.entities = entities;
+      if (entities.length === 0) {
+        state.selectedEntityId = null;
         state.isPanelOpen = false;
+        return;
+      }
+      if (!wasPanelOpen) {
         state.selectedEntityId = null;
-      } else {
-        state.entities.push(...entities);
+        return;
+      }
+      const firstEntity = entities[0];
+      assert(firstEntity);
+      if (previousSelectedId === null) {
+        // Open panel must have a selection; otherwise, fall back to the first entity.
+        state.selectedEntityId = firstEntity.id;
+        return;
+      }
+      if (previousSelectedId !== null && entities.some((e) => e.id === previousSelectedId)) {
+        state.selectedEntityId = previousSelectedId;
+        return;
       }
+      const previousKey = previousEntity ? getRefImageRecallMatchKey(previousEntity) : null;
+      const matched =
+        previousKey !== null ? entities.find((e) => getRefImageRecallMatchKey(e) === previousKey) : undefined;
+      state.selectedEntityId = matched?.id ?? firstEntity.id;
     },
     refImageImageChanged: (state, action: PayloadActionWithId<{ croppableImage: CroppableImageWithDims | null }>) => {
       const { id, croppableImage } = action.payload;