fix(ui): progress image does not reset when canceling generation

Previously, we cleared the canvas progress image when the canvas had no active generations. This allowed for a brief flash of canvas state between the last progress image for a given generation, and when the output image for that generation rendered. Here's the sequence:
- Progress images are received and rendered
- Generation completes - no active canvas generations
- Clear the progress image -> canvas layers visible unexpectedly, creating an awkward jarring change
- Generation output image is rendered -> output image overlaid on canvas layers

In 83538c4b2b I attempted to fix this by only clearing the progress image while we were not staging.

This isn't quite right, though. We are often staging with no active generations - for example, you have a few images completed and are waiting to choose one.

In this situation, if you cancel a pending generation, the logic to clear the progress image doesn't fire because it sees staging is in progress.

What we really need is:
- Staging area module clears the progress image once it has rendered an output image.
- Progress image module clears the progress image when a generation is canceled or failed, in which case there will be no output image.

To do this, we can add an event listener to the progress image module to listen for queue item status changes, and when we get a cancelation or failure, clear the progress image.

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

@@ -60,9 +60,6 @@ export class CanvasProgressImageModule extends CanvasModuleBase {
           this.$hasActiveGeneration.set(true);
         } else {
           this.$hasActiveGeneration.set(false);
-          if (!this.manager.stagingArea.$isStaging.get()) {
-            this.$lastProgressEvent.set(null);
-          }
         }
       })
     );
@@ -83,17 +80,30 @@ export class CanvasProgressImageModule extends CanvasModuleBase {
       this.$lastProgressEvent.set(data);
     };
 
+    // Handle a canceled or failed canvas generation. We should clear the progress image in this case.
+    const queueItemStatusChangedListener = (data: S['QueueItemStatusChangedEvent']) => {
+      if (data.destination !== 'canvas') {
+        return;
+      }
+      if (data.status === 'failed' || data.status === 'canceled') {
+        this.$lastProgressEvent.set(null);
+        this.$hasActiveGeneration.set(false);
+      }
+    };
+
     const clearProgress = () => {
       this.$lastProgressEvent.set(null);
     };
 
     this.manager.socket.on('invocation_progress', progressListener);
+    this.manager.socket.on('queue_item_status_changed', queueItemStatusChangedListener);
     this.manager.socket.on('connect', clearProgress);
     this.manager.socket.on('connect_error', clearProgress);
     this.manager.socket.on('disconnect', clearProgress);
 
     return () => {
       this.manager.socket.off('invocation_progress', progressListener);
+      this.manager.socket.off('queue_item_status_changed', queueItemStatusChangedListener);
       this.manager.socket.off('connect', clearProgress);
       this.manager.socket.off('connect_error', clearProgress);
       this.manager.socket.off('disconnect', clearProgress);