Change implementation to check $ispending

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx

@@ -17,8 +17,8 @@ export const StagingAreaItemsList = memo(() => {
       return;
     }
 
-    return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData);
-  }, [canvasManager, ctx.$progressData, ctx.$selectedItemId]);
+    return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending);
+  }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]);
 
   return (
     <ScrollableContent overflowX="scroll" overflowY="hidden">

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx

@@ -92,6 +92,7 @@ type CanvasSessionContextValue = {
   $items: Atom<S['SessionQueueItem'][]>;
   $itemCount: Atom<number>;
   $hasItems: Atom<boolean>;
+  $isPending: Atom<boolean>;
   $progressData: ProgressDataMap;
   $selectedItemId: WritableAtom<number | null>;
   $selectedItem: Atom<S['SessionQueueItem'] | null>;
@@ -170,6 +171,13 @@ export const CanvasSessionContextProvider = memo(
      */
     const $hasItems = useState(() => computed([$items], (items) => items.length > 0))[0];
 
+    /**
+     * Whether there are any pending or in-progress items. Computed from the queue items array.
+     */
+    const $isPending = useState(() =>
+      computed([$items], (items) => items.some((item) => item.status === 'pending' || item.status === 'in_progress'))
+    )[0];
+
     /**
      * The currently selected queue item, or null if one is not selected.
      */
@@ -506,6 +514,7 @@ export const CanvasSessionContextProvider = memo(
         session,
         $items,
         $hasItems,
+        $isPending,
         $progressData,
         $selectedItemId,
         $autoSwitch,
@@ -523,6 +532,7 @@ export const CanvasSessionContextProvider = memo(
         $autoSwitch,
         $items,
         $hasItems,
+        $isPending,
         $progressData,
         $selectedItem,
         $selectedItemId,

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts

@@ -59,6 +59,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
 
   $shouldShowStagedImage = atom<boolean>(true);
   $isStaging = atom<boolean>(false);
+  $isPending = atom<boolean>(false);
 
   constructor(manager: CanvasManager) {
     super();
@@ -152,7 +153,11 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     this.$isStaging.set(this.manager.stateApi.runSelector(selectIsStaging));
   };
 
-  connectToSession = ($selectedItemId: Atom<number | null>, $progressData: ProgressDataMap) => {
+  connectToSession = (
+    $selectedItemId: Atom<number | null>,
+    $progressData: ProgressDataMap,
+    $isPending: Atom<boolean>
+  ) => {
     const cb = (selectedItemId: number | null, progressData: Record<number, ProgressData | undefined>) => {
       if (!selectedItemId) {
         this.$imageSrc.set(null);
@@ -176,7 +181,17 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     cb($selectedItemId.get(), $progressData.get());
     this.render();
 
-    return effect([$selectedItemId, $progressData], cb);
+    // Sync the $isPending flag with the computed
+    const unsubIsPending = effect([$isPending], (isPending) => {
+      this.$isPending.set(isPending);
+    });
+
+    const unsubImageSrc = effect([$selectedItemId, $progressData], cb);
+
+    return () => {
+      unsubIsPending();
+      unsubImageSrc();
+    };
   };
 
   private _getImageFromSrc = (
@@ -206,6 +221,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
 
       const { x, y, width, height } = this.manager.stateApi.getBbox().rect;
       const shouldShowStagedImage = this.$shouldShowStagedImage.get();
+      const isPending = this.$isPending.get();
 
       this.konva.group.position({ x, y });
 
@@ -226,7 +242,8 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
       } else {
         this.image?.destroy();
         this.image = null;
-        this.konva.placeholder.group.visible(true);
+        // Only show placeholder if there are pending items, otherwise show nothing
+        this.konva.placeholder.group.visible(isPending);
       }
 
       this.konva.group.visible(shouldShowStagedImage && this.$isStaging.get());

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -9,7 +9,6 @@ import { $queueId } from 'app/store/nanostores/queueId';
 import type { AppStore } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { forEach, isNil, round } from 'es-toolkit/compat';
-import { canvasSessionReset, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   $isInPublishFlow,
   $outputNodeId,
@@ -348,15 +347,6 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
 
     log.debug({ data }, `Queue item ${item_id} status updated: ${status}`);
 
-    // If this queue item was canceled and it belongs to the current canvas session, reset the canvas session
-    if (status === 'canceled' && destination) {
-      const currentCanvasSessionId = selectCanvasSessionId(getState());
-      if (currentCanvasSessionId === destination) {
-        dispatch(canvasSessionReset());
-        log.debug(`Canvas session reset due to canceled queue item ${item_id}`);
-      }
-    }
-
     // Invalidate caches for things we cannot easily update
     const tagsToInvalidate: ApiTagDescription[] = [
       'SessionQueueStatus',