chore: bump version to v6.1.0rc1

Make the staging area a virtualized list so it doesn't choke when there
are a large number (i.e. more than a few hundred) of queue items.

invokeai/app/api/routers/images.py

@@ -72,7 +72,7 @@ async def upload_image(
     resize_to: Optional[str] = Body(
         default=None,
         description=f"Dimensions to resize the image to, must be stringified tuple of 2 integers. Max total pixel count: {ResizeToDimensions.MAX_SIZE}",
-        example='"[1024,1024]"',
+        examples=['"[1024,1024]"'],
     ),
     metadata: Optional[str] = Body(
         default=None,

invokeai/app/api/routers/model_manager.py

@@ -292,7 +292,7 @@ async def get_hugging_face_models(
 )
 async def update_model_record(
     key: Annotated[str, Path(description="Unique key of model")],
-    changes: Annotated[ModelRecordChanges, Body(description="Model config", example=example_model_input)],
+    changes: Annotated[ModelRecordChanges, Body(description="Model config", examples=[example_model_input])],
 ) -> AnyModelConfig:
     """Update a model's config."""
     logger = ApiDependencies.invoker.services.logger
@@ -450,7 +450,7 @@ async def install_model(
     access_token: Optional[str] = Query(description="access token for the remote resource", default=None),
     config: ModelRecordChanges = Body(
         description="Object containing fields that override auto-probed values in the model config record, such as name, description and prediction_type ",
-        example={"name": "string", "description": "string"},
+        examples=[{"name": "string", "description": "string"}],
     ),
 ) -> ModelInstallJob:
     """Install a model using a string identifier.

invokeai/app/services/session_queue/session_queue_sqlite.py

@@ -404,6 +404,8 @@ class SqliteSessionQueue(SessionQueueBase):
                   AND status != 'canceled'
                   AND status != 'completed'
                   AND status != 'failed'
+                  -- We will cancel the current item separately below - skip it here
+                  AND status != 'in_progress'
                 """
             params = [queue_id] + batch_ids
             cursor.execute(
@@ -442,6 +444,8 @@ class SqliteSessionQueue(SessionQueueBase):
                   AND status != 'canceled'
                   AND status != 'completed'
                   AND status != 'failed'
+                  -- We will cancel the current item separately below - skip it here
+                  AND status != 'in_progress'
                 """
             params = (queue_id, destination)
             cursor.execute(
@@ -544,6 +548,8 @@ class SqliteSessionQueue(SessionQueueBase):
                   AND status != 'canceled'
                   AND status != 'completed'
                   AND status != 'failed'
+                  -- We will cancel the current item separately below - skip it here
+                  AND status != 'in_progress'
                 """
             params = [queue_id]
             cursor.execute(
@@ -564,12 +570,9 @@ class SqliteSessionQueue(SessionQueueBase):
                 tuple(params),
             )
             self._conn.commit()
+
             if current_queue_item is not None and current_queue_item.queue_id == queue_id:
-                batch_status = self.get_batch_status(queue_id=queue_id, batch_id=current_queue_item.batch_id)
-                queue_status = self.get_queue_status(queue_id=queue_id)
-                self.__invoker.services.events.emit_queue_item_status_changed(
-                    current_queue_item, batch_status, queue_status
-                )
+                self._set_queue_item_status(current_queue_item.item_id, "canceled")
         except Exception:
             self._conn.rollback()
             raise

invokeai/backend/model_manager/starter_models.py

@@ -143,11 +143,19 @@ flux_dev = StarterModel(
 flux_kontext = StarterModel(
     name="FLUX.1 Kontext dev",
     base=BaseModelType.Flux,
-    source="black-forest-labs/FLUX.1-Kontext-dev::flux1-kontext-dev.safetensors",
+    source="https://huggingface.co/black-forest-labs/FLUX.1-Kontext-dev/resolve/main/flux1-kontext-dev.safetensors",
     description="FLUX.1 Kontext dev transformer in bfloat16. Total size with dependencies: ~33GB",
     type=ModelType.Main,
     dependencies=[t5_base_encoder, flux_vae, clip_l_encoder],
 )
+flux_kontext_quantized = StarterModel(
+    name="FLUX.1 Kontext dev (Quantized)",
+    base=BaseModelType.Flux,
+    source="https://huggingface.co/unsloth/FLUX.1-Kontext-dev-GGUF/resolve/main/flux1-kontext-dev-Q4_K_M.gguf",
+    description="FLUX.1 Kontext dev quantized (q4_k_m). Total size with dependencies: ~14GB",
+    type=ModelType.Main,
+    dependencies=[t5_8b_quantized_encoder, flux_vae, clip_l_encoder],
+)
 sd35_medium = StarterModel(
     name="SD3.5 Medium",
     base=BaseModelType.StableDiffusion3,
@@ -664,7 +672,7 @@ flux_fill = StarterModel(
 # List of starter models, displayed on the frontend.
 # The order/sort of this list is not changed by the frontend - set it how you want it here.
 STARTER_MODELS: list[StarterModel] = [
-    flux_kontext,
+    flux_kontext_quantized,
     flux_schnell_quantized,
     flux_dev_quantized,
     flux_schnell,
@@ -785,7 +793,7 @@ flux_bundle: list[StarterModel] = [
     flux_depth_control_lora,
     flux_redux,
     flux_fill,
-    flux_kontext,
+    flux_kontext_quantized,
 ]
 
 STARTER_BUNDLES: dict[str, StarterModelBundle] = {

invokeai/frontend/web/knip.ts

@@ -12,6 +12,8 @@ const config: KnipConfig = {
     'src/features/parameters/types/parameterSchemas.ts',
     // TODO(psyche): maybe we can clean up these utils after canvas v2 release
     'src/features/controlLayers/konva/util.ts',
+    // Will be using this
+    'src/common/hooks/useAsyncState.ts',
   ],
   ignoreBinaries: ['only-allow'],
   paths: {

invokeai/frontend/web/public/locales/en.json

@@ -1399,7 +1399,7 @@
         "fluxFillIncompatibleWithT2IAndI2I": "FLUX Fill is not compatible with Text to Image or Image to Image. Use other FLUX models for these tasks.",
         "imagenIncompatibleGenerationMode": "Google {{model}} supports Text to Image only. Use other models for Image to Image, Inpainting and Outpainting tasks.",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4o supports Text to Image and Image to Image only. Use other models Inpainting and Outpainting tasks.",
-        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext supports Text to Image only. Use other models for Image to Image, Inpainting and Outpainting tasks.",
+        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext does not support generation from images placed on the canvas. Re-try using the Reference Image section and disable any Raster Layers.",
         "problemUnpublishingWorkflow": "Problem Unpublishing Workflow",
         "problemUnpublishingWorkflowDescription": "There was a problem unpublishing the workflow. Please try again.",
         "workflowUnpublished": "Workflow Unpublished",
@@ -1407,7 +1407,7 @@
         "sentToUpscale": "Sent to Upscale",
         "promptGenerationStarted": "Prompt generation started",
         "uploadAndPromptGenerationFailed": "Failed to upload image and generate prompt",
-        "promptExpansionFailed": "Prompt expansion failed"
+        "promptExpansionFailed": "We ran into an issue. Please try prompt expansion again."
     },
     "popovers": {
         "clipSkip": {
@@ -1962,6 +1962,7 @@
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",
         "outputOnlyMaskedRegions": "Output Only Generated Regions",
+        "saveAllImagesToGallery": "Save All Images to Gallery",
         "addLayer": "Add Layer",
         "duplicate": "Duplicate",
         "moveToFront": "Move to Front",
@@ -2330,6 +2331,9 @@
                 "label": "Preserve Masked Region",
                 "alert": "Preserving Masked Region"
             },
+            "saveAllImagesToGallery": {
+                "alert": "Saving All Images to Gallery"
+            },
             "isolatedStagingPreview": "Isolated Staging Preview",
             "isolatedPreview": "Isolated Preview",
             "isolatedLayerPreview": "Isolated Layer Preview",
@@ -2376,6 +2380,11 @@
             "saveToGallery": "Save To Gallery",
             "showResultsOn": "Showing Results",
             "showResultsOff": "Hiding Results"
+        },
+        "autoSwitch": {
+            "off": "Off",
+            "switchOnStart": "On Start",
+            "switchOnFinish": "On Finish"
         }
     },
     "upscaling": {
@@ -2551,8 +2560,9 @@
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
         "items": [
-            "Inpainting: Per-mask noise levels and denoise limits.",
-            "Canvas: Smarter aspect ratios for SDXL and improved scroll-to-zoom."
+            "Generate images faster with new Launchpads and a simplified Generate tab.",
+            "Edit with prompts using Flux Kontext Dev.",
+            "Export to PSD, bulk-hide overlays, organize models & images — all in a reimagined interface built for control."
         ],
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
@@ -2561,62 +2571,16 @@
     "supportVideos": {
         "supportVideos": "Support Videos",
         "gettingStarted": "Getting Started",
-        "controlCanvas": "Control Canvas",
         "watch": "Watch",
-        "studioSessionsDesc1": "Check out the <StudioSessionsPlaylistLink /> for Invoke deep dives.",
-        "studioSessionsDesc2": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
+        "studioSessionsDesc": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
         "videos": {
-            "creatingYourFirstImage": {
-                "title": "Creating Your First Image",
-                "description": "Introduction to creating an image from scratch using Invoke's tools."
+            "gettingStarted": {
+                "title": "Getting Started with Invoke",
+                "description": "Complete video series covering everything you need to know to get started with Invoke, from creating your first image to advanced techniques."
             },
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Using Control Layers and Reference Guides",
-                "description": "Learn how to guide your image creation with control layers and reference images."
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Understanding Image-to-Image and Denoising",
-                "description": "Overview of image-to-image transformations and denoising in Invoke."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "title": "Exploring AI Models and Concept Adapters",
-                "description": "Dive into AI models and how to use concept adapters for creative control."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "title": "Creating and Composing on Invoke's Control Canvas",
-                "description": "Learn to compose images using Invoke's control canvas."
-            },
-            "upscaling": {
-                "title": "Upscaling",
-                "description": "How to upscale images with Invoke's tools to enhance resolution."
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "title": "How Do I Generate and Save to the Gallery?",
-                "description": "Steps to generate and save images to the gallery."
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "How Do I Edit on the Canvas?",
-                "description": "Guide to editing images directly on the canvas."
-            },
-            "howDoIDoImageToImageTransformation": {
-                "title": "How Do I Do Image-to-Image Transformation?",
-                "description": "Tutorial on performing image-to-image transformations in Invoke."
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "How Do I Use Control Nets and Control Layers?",
-                "description": "Learn to apply control layers and controlnets to your images."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "How Do I Use Global IP Adapters and Reference Images?",
-                "description": "Introduction to adding reference images and global IP adapters."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "How Do I Use Inpaint Masks?",
-                "description": "How to apply inpaint masks for image correction and variation."
-            },
-            "howDoIOutpaint": {
-                "title": "How Do I Outpaint?",
-                "description": "Guide to outpainting beyond the original image borders."
+            "studioSessions": {
+                "title": "Studio Sessions",
+                "description": "Deep dive sessions exploring advanced Invoke features, creative workflows, and community discussions."
             }
         }
     }

invokeai/frontend/web/src/app/components/App.tsx

@@ -11,6 +11,7 @@ import { memo, useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
+import ThemeLocaleProvider from './ThemeLocaleProvider';
 const DEFAULT_CONFIG = {};
 
 interface Props {
@@ -30,12 +31,14 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
-      <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
-        <AppContent />
-        {!didStudioInit && <Loading />}
-      </Box>
-      <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
-      <GlobalModalIsolator />
+      <ThemeLocaleProvider>
+        <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
+          <AppContent />
+          {!didStudioInit && <Loading />}
+        </Box>
+        <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
+        <GlobalModalIsolator />
+      </ThemeLocaleProvider>
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/app/components/GlobalImageHotkeys.tsx

@@ -1,11 +1,14 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useImageActions } from 'features/gallery/hooks/useImageActions';
+import { useLoadWorkflow } from 'features/gallery/hooks/useLoadWorkflow';
+import { useRecallAll } from 'features/gallery/hooks/useRecallAll';
+import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions';
+import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
+import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
+import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useImageDTO } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
@@ -27,59 +30,64 @@ GlobalImageHotkeys.displayName = 'GlobalImageHotkeys';
 const GlobalImageHotkeysInternal = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const isGalleryFocused = useIsRegionFocused('gallery');
   const isViewerFocused = useIsRegionFocused('viewer');
-  const imageActions = useImageActions(imageDTO);
-  const isStaging = useAppSelector(selectIsStaging);
-  const isUpscalingEnabled = useFeatureStatus('upscaling');
+
+  const isFocusOK = isGalleryFocused || isViewerFocused;
+
+  const recallAll = useRecallAll(imageDTO);
+  const recallRemix = useRecallRemix(imageDTO);
+  const recallPrompts = useRecallPrompts(imageDTO);
+  const recallSeed = useRecallSeed(imageDTO);
+  const recallDimensions = useRecallDimensions(imageDTO);
+  const loadWorkflow = useLoadWorkflow(imageDTO);
 
   useRegisteredHotkeys({
     id: 'loadWorkflow',
     category: 'viewer',
-    callback: imageActions.loadWorkflow,
-    options: { enabled: isGalleryFocused || isViewerFocused },
-    dependencies: [imageActions.loadWorkflow, isGalleryFocused, isViewerFocused],
+    callback: loadWorkflow.load,
+    options: { enabled: loadWorkflow.isEnabled && isFocusOK },
+    dependencies: [loadWorkflow, isFocusOK],
   });
+
   useRegisteredHotkeys({
     id: 'recallAll',
     category: 'viewer',
-    callback: imageActions.recallAll,
-    options: { enabled: !isStaging && (isGalleryFocused || isViewerFocused) },
-    dependencies: [imageActions.recallAll, isStaging, isGalleryFocused, isViewerFocused],
+    callback: recallAll.recall,
+    options: { enabled: recallAll.isEnabled && isFocusOK },
+    dependencies: [recallAll, isFocusOK],
   });
+
   useRegisteredHotkeys({
     id: 'recallSeed',
     category: 'viewer',
-    callback: imageActions.recallSeed,
-    options: { enabled: isGalleryFocused || isViewerFocused },
-    dependencies: [imageActions.recallSeed, isGalleryFocused, isViewerFocused],
+    callback: recallSeed.recall,
+    options: { enabled: recallSeed.isEnabled && isFocusOK },
+    dependencies: [recallSeed, isFocusOK],
   });
+
   useRegisteredHotkeys({
     id: 'recallPrompts',
     category: 'viewer',
-    callback: imageActions.recallPrompts,
-    options: { enabled: isGalleryFocused || isViewerFocused },
-    dependencies: [imageActions.recallPrompts, isGalleryFocused, isViewerFocused],
+    callback: recallPrompts.recall,
+    options: { enabled: recallPrompts.isEnabled && isFocusOK },
+    dependencies: [recallPrompts, isFocusOK],
   });
+
   useRegisteredHotkeys({
     id: 'remix',
     category: 'viewer',
-    callback: imageActions.remix,
-    options: { enabled: isGalleryFocused || isViewerFocused },
-    dependencies: [imageActions.remix, isGalleryFocused, isViewerFocused],
+    callback: recallRemix.recall,
+    options: { enabled: recallRemix.isEnabled && isFocusOK },
+    dependencies: [recallRemix, isFocusOK],
   });
+
   useRegisteredHotkeys({
     id: 'useSize',
     category: 'viewer',
-    callback: imageActions.recallSize,
-    options: { enabled: !isStaging && (isGalleryFocused || isViewerFocused) },
-    dependencies: [imageActions.recallSize, isStaging, isGalleryFocused, isViewerFocused],
-  });
-  useRegisteredHotkeys({
-    id: 'runPostprocessing',
-    category: 'viewer',
-    callback: imageActions.upscale,
-    options: { enabled: isUpscalingEnabled && isViewerFocused },
-    dependencies: [isUpscalingEnabled, imageDTO, isViewerFocused],
+    callback: recallDimensions.recall,
+    options: { enabled: recallDimensions.isEnabled && isFocusOK },
+    dependencies: [recallDimensions, isFocusOK],
   });
+
   return null;
 });
 

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -42,7 +42,6 @@ import { $socketOptions } from 'services/events/stores';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
 
 const App = lazy(() => import('./App'));
-const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
@@ -330,9 +329,7 @@ const InvokeAIUI = ({
     <React.StrictMode>
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
-          <ThemeLocaleProvider>
-            <App config={config} studioInitAction={studioInitAction} />
-          </ThemeLocaleProvider>
+          <App config={config} studioInitAction={studioInitAction} />
         </React.Suspense>
       </Provider>
     </React.StrictMode>

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -20,6 +20,7 @@ import {
 import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { toast } from 'features/toast/toast';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
+import { LAUNCHPAD_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
 import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { atom } from 'nanostores';
@@ -91,6 +92,7 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
       const overrides: Partial<CanvasRasterLayerState> = {
         objects: [imageObject],
       };
+      await navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
       store.dispatch(canvasReset());
       store.dispatch(rasterLayerAdded({ overrides, isSelected: true }));
       store.dispatch(sentImageToCanvas());
@@ -157,16 +159,17 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
   );
 
   const handleGoToDestination = useCallback(
-    (destination: StudioDestinationAction['data']['destination']) => {
+    async (destination: StudioDestinationAction['data']['destination']) => {
       switch (destination) {
         case 'generation':
-          // Go to the canvas tab, open the image viewer, and enable send-to-gallery mode
+          // Go to the generate tab, open the launchpad
+          await navigationApi.focusPanel('generate', LAUNCHPAD_PANEL_ID);
           store.dispatch(paramsReset());
           store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
           break;
         case 'canvas':
-          // Go to the canvas tab, close the image viewer, and disable send-to-gallery mode
-          store.dispatch(canvasReset());
+          // Go to the canvas tab, open the launchpad
+          await navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
           break;
         case 'workflows':
           // Go to the workflows tab

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -1,14 +1,28 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { bboxSyncedToOptimalDimension } from 'features/controlLayers/store/canvasSlice';
+import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
-import { selectBboxModelBase } from 'features/controlLayers/store/selectors';
+import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
+import {
+  selectAllEntitiesOfType,
+  selectBboxModelBase,
+  selectCanvasSlice,
+} from 'features/controlLayers/store/selectors';
+import { getEntityIdentifier } from 'features/controlLayers/store/types';
 import { modelSelected } from 'features/parameters/store/actions';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
+import { selectGlobalRefImageModels, selectRegionalRefImageModels } from 'services/api/hooks/modelsByType';
+import type { AnyModelConfig } from 'services/api/types';
+import {
+  isChatGPT4oModelConfig,
+  isFluxKontextApiModelConfig,
+  isFluxKontextModelConfig,
+  isFluxReduxModelConfig,
+} from 'services/api/types';
 
 const log = logger('models');
 
@@ -25,9 +39,8 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       }
 
       const newModel = result.data;
-
-      const newBaseModel = newModel.base;
-      const didBaseModelChange = state.params.model?.base !== newBaseModel;
+      const newBase = newModel.base;
+      const didBaseModelChange = state.params.model?.base !== newBase;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
@@ -35,7 +48,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
 
         // handle incompatible loras
         state.loras.loras.forEach((lora) => {
-          if (lora.model.base !== newBaseModel) {
+          if (lora.model.base !== newBase) {
             dispatch(loraDeleted({ id: lora.id }));
             modelsCleared += 1;
           }
@@ -43,20 +56,82 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
 
         // handle incompatible vae
         const { vae } = state.params;
-        if (vae && vae.base !== newBaseModel) {
+        if (vae && vae.base !== newBase) {
           dispatch(vaeSelected(null));
           modelsCleared += 1;
         }
 
-        // handle incompatible controlnets
-        // state.canvas.present.controlAdapters.entities.forEach((ca) => {
-        //   if (ca.model?.base !== newBaseModel) {
-        //     modelsCleared += 1;
-        //     if (ca.isEnabled) {
-        //       dispatch(entityIsEnabledToggled({ entityIdentifier: { id: ca.id, type: 'control_adapter' } }));
-        //     }
-        //   }
-        // });
+        // Handle incompatible reference image models - switch to first compatible model, with some smart logic
+        // to choose the best available model based on the new main model.
+        const allRefImageModels = selectGlobalRefImageModels(state).filter(({ base }) => base === newBase);
+
+        let newGlobalRefImageModel = null;
+
+        // Certain models require the ref image model to be the same as the main model - others just need a matching
+        // base. Helper to grab the first exact match or the first available model if no exact match is found.
+        const exactMatchOrFirst = <T extends AnyModelConfig>(candidates: T[]): T | null =>
+          candidates.find(({ key }) => key === newModel.key) ?? candidates[0] ?? null;
+
+        // The only way we can differentiate between FLUX and FLUX Kontext is to check for "kontext" in the name
+        if (newModel.base === 'flux' && newModel.name.toLowerCase().includes('kontext')) {
+          const fluxKontextDevModels = allRefImageModels.filter(isFluxKontextModelConfig);
+          newGlobalRefImageModel = exactMatchOrFirst(fluxKontextDevModels);
+        } else if (newModel.base === 'chatgpt-4o') {
+          const chatGPT4oModels = allRefImageModels.filter(isChatGPT4oModelConfig);
+          newGlobalRefImageModel = exactMatchOrFirst(chatGPT4oModels);
+        } else if (newModel.base === 'flux-kontext') {
+          const fluxKontextApiModels = allRefImageModels.filter(isFluxKontextApiModelConfig);
+          newGlobalRefImageModel = exactMatchOrFirst(fluxKontextApiModels);
+        } else if (newModel.base === 'flux') {
+          const fluxReduxModels = allRefImageModels.filter(isFluxReduxModelConfig);
+          newGlobalRefImageModel = fluxReduxModels[0] ?? null;
+        } else {
+          newGlobalRefImageModel = allRefImageModels[0] ?? null;
+        }
+
+        // All ref image entities are updated to use the same new model
+        const refImageEntities = selectReferenceImageEntities(state);
+        for (const entity of refImageEntities) {
+          const shouldUpdateModel =
+            (entity.config.model && entity.config.model.base !== newBase) ||
+            (!entity.config.model && newGlobalRefImageModel);
+
+          if (shouldUpdateModel) {
+            dispatch(
+              refImageModelChanged({
+                id: entity.id,
+                modelConfig: newGlobalRefImageModel,
+              })
+            );
+            modelsCleared += 1;
+          }
+        }
+
+        // For regional guidance, there is no smart logic - we just pick the first available model.
+        const newRegionalRefImageModel = selectRegionalRefImageModels(state)[0] ?? null;
+
+        // All regional guidance entities are updated to use the same new model.
+        const canvasState = selectCanvasSlice(state);
+        const canvasRegionalGuidanceEntities = selectAllEntitiesOfType(canvasState, 'regional_guidance');
+        for (const entity of canvasRegionalGuidanceEntities) {
+          for (const refImage of entity.referenceImages) {
+            // Only change the model if the current one is not compatible with the new base model.
+            const shouldUpdateModel =
+              (refImage.config.model && refImage.config.model.base !== newBase) ||
+              (!refImage.config.model && newRegionalRefImageModel);
+
+            if (shouldUpdateModel) {
+              dispatch(
+                rgRefImageModelChanged({
+                  entityIdentifier: getEntityIdentifier(entity),
+                  referenceImageId: refImage.id,
+                  modelConfig: newRegionalRefImageModel,
+                })
+              );
+              modelsCleared += 1;
+            }
+          }
+        }
 
         if (modelsCleared > 0) {
           toast({

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts

@@ -3,6 +3,7 @@ import { isNil } from 'es-toolkit';
 import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
+  heightChanged,
   setCfgRescaleMultiplier,
   setCfgScale,
   setGuidance,
@@ -10,6 +11,7 @@ import {
   setSteps,
   vaePrecisionChanged,
   vaeSelected,
+  widthChanged,
 } from 'features/controlLayers/store/paramsSlice';
 import { setDefaultSettings } from 'features/parameters/store/actions';
 import {
@@ -24,6 +26,7 @@ import {
   zParameterVAEModel,
 } from 'features/parameters/types/parameterSchemas';
 import { toast } from 'features/toast/toast';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { t } from 'i18next';
 import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
 import { isNonRefinerMainModelConfig } from 'services/api/types';
@@ -113,15 +116,24 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
         const isStaging = selectIsStaging(getState());
-        if (!isStaging && width) {
+        const activeTab = selectActiveTab(getState());
+        if (activeTab === 'generate') {
           if (isParameterWidth(width)) {
-            dispatch(bboxWidthChanged({ width, ...setSizeOptions }));
+            dispatch(widthChanged({ width, ...setSizeOptions }));
+          }
+          if (isParameterHeight(height)) {
+            dispatch(heightChanged({ height, ...setSizeOptions }));
           }
         }
 
-        if (!isStaging && height) {
-          if (isParameterHeight(height)) {
-            dispatch(bboxHeightChanged({ height, ...setSizeOptions }));
+        if (activeTab === 'canvas') {
+          if (!isStaging) {
+            if (isParameterWidth(width)) {
+              dispatch(bboxWidthChanged({ width, ...setSizeOptions }));
+            }
+            if (isParameterHeight(height)) {
+              dispatch(bboxHeightChanged({ height, ...setSizeOptions }));
+            }
           }
         }
 

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -87,14 +87,10 @@ export const buildGroup = <T extends object>(group: Omit<Group<T>, typeof unique
   [uniqueGroupKey]: true,
 });
 
-const isGroup = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is Group<T> => {
+export const isGroup = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is Group<T> => {
   return uniqueGroupKey in optionOrGroup && optionOrGroup[uniqueGroupKey] === true;
 };
 
-export const isOption = <T extends object>(optionOrGroup: OptionOrGroup<T>): optionOrGroup is T => {
-  return !(uniqueGroupKey in optionOrGroup);
-};
-
 const DefaultOptionComponent = typedMemo(<T extends object>({ option }: { option: T }) => {
   const { getOptionId } = usePickerContext();
   return <Text fontWeight="bold">{getOptionId(option)}</Text>;

invokeai/frontend/web/src/common/hooks/useAsyncState.ts

@@ -0,0 +1,115 @@
+import { useStore } from '@nanostores/react';
+import { WrappedError } from 'common/util/result';
+import type { Atom } from 'nanostores';
+import { atom } from 'nanostores';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type SuccessState<T> = {
+  status: 'success';
+  value: T;
+  error: null;
+};
+
+type ErrorState = {
+  status: 'error';
+  value: null;
+  error: Error;
+};
+
+type PendingState = {
+  status: 'pending';
+  value: null;
+  error: null;
+};
+
+type IdleState = {
+  status: 'idle';
+  value: null;
+  error: null;
+};
+
+export type State<T> = IdleState | PendingState | SuccessState<T> | ErrorState;
+
+type UseAsyncStateOptions = {
+  immediate?: boolean;
+};
+
+type UseAsyncReturn<T> = {
+  $state: Atom<State<T>>;
+  trigger: () => Promise<void>;
+  reset: () => void;
+};
+
+export const useAsyncState = <T>(execute: () => Promise<T>, options?: UseAsyncStateOptions): UseAsyncReturn<T> => {
+  const $state = useState(() =>
+    atom<State<T>>({
+      status: 'idle',
+      value: null,
+      error: null,
+    })
+  )[0];
+
+  const trigger = useCallback(async () => {
+    $state.set({
+      status: 'pending',
+      value: null,
+      error: null,
+    });
+    try {
+      const value = await execute();
+      $state.set({
+        status: 'success',
+        value,
+        error: null,
+      });
+    } catch (error) {
+      $state.set({
+        status: 'error',
+        value: null,
+        error: WrappedError.wrap(error),
+      });
+    }
+  }, [$state, execute]);
+
+  const reset = useCallback(() => {
+    $state.set({
+      status: 'idle',
+      value: null,
+      error: null,
+    });
+  }, [$state]);
+
+  useEffect(() => {
+    if (options?.immediate) {
+      trigger();
+    }
+  }, [options?.immediate, trigger]);
+
+  const api = useMemo(
+    () =>
+      ({
+        $state,
+        trigger,
+        reset,
+      }) satisfies UseAsyncReturn<T>,
+    [$state, trigger, reset]
+  );
+
+  return api;
+};
+
+type UseAsyncReturnReactive<T> = {
+  state: State<T>;
+  trigger: () => Promise<void>;
+  reset: () => void;
+};
+
+export const useAsyncStateReactive = <T>(
+  execute: () => Promise<T>,
+  options?: UseAsyncStateOptions
+): UseAsyncReturnReactive<T> => {
+  const { $state, trigger, reset } = useAsyncState(execute, options);
+  const state = useStore($state);
+
+  return { state, trigger, reset };
+};

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSaveAllImagesToGallery.tsx

@@ -0,0 +1,23 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasAlertsSaveAllImagesToGallery = memo(() => {
+  const { t } = useTranslation();
+  const saveAllImagesToGallery = useAppSelector(selectSaveAllImagesToGallery);
+
+  if (!saveAllImagesToGallery) {
+    return null;
+  }
+
+  return (
+    <Alert status="info" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+      <AlertIcon />
+      <AlertTitle>{t('controlLayers.settings.saveAllImagesToGallery.alert')}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsSaveAllImagesToGallery.displayName = 'CanvasAlertsSaveAllImagesToGallery';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageHeader.tsx

@@ -4,13 +4,17 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useRefImageEntity } from 'features/controlLayers/components/RefImage/useRefImageEntity';
 import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
+import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice';
 import {
   refImageDeleted,
   refImageIsEnabledToggled,
   selectRefImageEntityIds,
 } from 'features/controlLayers/store/refImagesSlice';
+import { getGlobalReferenceImageWarnings } from 'features/controlLayers/store/validators';
 import { memo, useCallback, useMemo } from 'react';
-import { PiCircleBold, PiCircleFill, PiTrashBold } from 'react-icons/pi';
+import { PiCircleBold, PiCircleFill, PiTrashBold, PiWarningBold } from 'react-icons/pi';
+
+import { RefImageWarningTooltipContent } from './RefImageWarningTooltipContent';
 
 const textSx: SystemStyleObject = {
   color: 'base.300',
@@ -28,6 +32,12 @@ export const RefImageHeader = memo(() => {
   );
   const refImageNumber = useAppSelector(selectRefImageNumber);
   const entity = useRefImageEntity(id);
+  const mainModelConfig = useAppSelector(selectMainModelConfig);
+
+  const warnings = useMemo(() => {
+    return getGlobalReferenceImageWarnings(entity, mainModelConfig);
+  }, [entity, mainModelConfig]);
+
   const deleteRefImage = useCallback(() => {
     dispatch(refImageDeleted({ id }));
   }, [dispatch, id]);
@@ -42,6 +52,18 @@ export const RefImageHeader = memo(() => {
         Reference Image #{refImageNumber}
       </Text>
       <Flex alignItems="center" gap={1}>
+        {warnings.length > 0 && (
+          <IconButton
+            as="span"
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            aria-label="warnings"
+            tooltip={<RefImageWarningTooltipContent warnings={warnings} />}
+            icon={<PiWarningBold />}
+            colorScheme="warning"
+          />
+        )}
         {!entity.isEnabled && (
           <Text fontSize="xs" fontStyle="italic" color="base.400">
             Disabled

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageImage.tsx

@@ -61,7 +61,7 @@ export const RefImageImage = memo(
         )}
         {imageDTO && (
           <>
-            <DndImage imageDTO={imageDTO} borderWidth={1} borderStyle="solid" w="full" />
+            <DndImage imageDTO={imageDTO} borderRadius="base" borderWidth={1} borderStyle="solid" w="full" />
             <Flex position="absolute" flexDir="column" top={2} insetInlineEnd={2} gap={1}>
               <DndImageIcon
                 onClick={handleResetControlImage}

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx

@@ -1,9 +1,12 @@
-import { Button, Collapse, Divider, Flex } from '@invoke-ai/ui-library';
+import { Button, Collapse, Divider, Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { RefImagePreview } from 'features/controlLayers/components/RefImage/RefImagePreview';
+import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { RefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { getDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
+import { useNewGlobalReferenceImageFromBbox } from 'features/controlLayers/hooks/saveCanvasHooks';
+import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import {
   refImageAdded,
   selectIsRefImagePanelOpen,
@@ -13,8 +16,10 @@ import {
 import { imageDTOToImageWithDims } from 'features/controlLayers/store/util';
 import { addGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useMemo } from 'react';
-import { PiUploadBold } from 'react-icons/pi';
+import { useTranslation } from 'react-i18next';
+import { PiBoundingBoxBold, PiUploadBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
 
 import { RefImageHeader } from './RefImageHeader';
@@ -78,6 +83,7 @@ MaxRefImages.displayName = 'MaxRefImages';
 
 const AddRefImageDropTargetAndButton = memo(() => {
   const { dispatch, getState } = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
 
   const uploadOptions = useMemo(
     () =>
@@ -95,7 +101,7 @@ const AddRefImageDropTargetAndButton = memo(() => {
   const uploadApi = useImageUploadButton(uploadOptions);
 
   return (
-    <>
+    <Flex gap={1} h="full" w="full">
       <Button
         position="relative"
         size="sm"
@@ -112,7 +118,31 @@ const AddRefImageDropTargetAndButton = memo(() => {
         <input {...uploadApi.getUploadInputProps()} />
         <DndDropTarget label="Drop" dndTarget={addGlobalReferenceImageDndTarget} dndTargetData={dndTargetData} />
       </Button>
-    </>
+      {tab === 'canvas' && (
+        <CanvasManagerProviderGate>
+          <BboxButton />
+        </CanvasManagerProviderGate>
+      )}
+    </Flex>
+  );
+});
+
+const BboxButton = memo(() => {
+  const { t } = useTranslation();
+  const isBusy = useCanvasIsBusySafe();
+  const newGlobalReferenceImageFromBbox = useNewGlobalReferenceImageFromBbox();
+
+  return (
+    <IconButton
+      size="lg"
+      variant="outline"
+      h="full"
+      icon={<PiBoundingBoxBold />}
+      onClick={newGlobalReferenceImageFromBbox}
+      isDisabled={isBusy}
+      aria-label={t('controlLayers.pullBboxIntoReferenceImage')}
+      tooltip={t('controlLayers.pullBboxIntoReferenceImage')}
+    />
   );
 });
 AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx

@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Icon, IconButton, Image, Skeleton, Text } from '@invoke-ai/ui-library';
+import { Flex, Icon, IconButton, Image, Skeleton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { round } from 'es-toolkit/compat';
@@ -17,6 +17,8 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { PiExclamationMarkBold, PiEyeSlashBold, PiImageBold } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
+import { RefImageWarningTooltipContent } from './RefImageWarningTooltipContent';
+
 const baseSx: SystemStyleObject = {
   '&[data-is-open="true"]': {
     borderColor: 'invokeBlue.300',
@@ -51,9 +53,6 @@ const getImageSxWithWeight = (weight: number): SystemStyleObject => {
 
   return {
     ...baseSx,
-    '&[data-is-disabled="true"]': {
-      opacity: 0.4,
-    },
     _after: {
       content: '""',
       position: 'absolute',
@@ -95,8 +94,8 @@ export const RefImagePreview = memo(() => {
     };
   }, [entity.config]);
 
-  const isInvalid = useMemo(() => {
-    return getGlobalReferenceImageWarnings(entity, mainModelConfig).length > 0;
+  const warnings = useMemo(() => {
+    return getGlobalReferenceImageWarnings(entity, mainModelConfig);
   }, [entity, mainModelConfig]);
 
   const onClick = useCallback(() => {
@@ -126,74 +125,76 @@ export const RefImagePreview = memo(() => {
     );
   }
   return (
-    <Flex
-      position="relative"
-      borderWidth={1}
-      borderStyle="solid"
-      borderRadius="base"
-      aspectRatio="1/1"
-      maxW="full"
-      maxH="full"
-      flexShrink={0}
-      sx={sx}
-      data-is-open={selectedEntityId === id && isPanelOpen}
-      data-is-error={isInvalid}
-      data-is-disabled={!entity.isEnabled}
-      role="button"
-      onClick={onClick}
-      cursor="pointer"
-    >
-      <Image
-        src={imageDTO?.thumbnail_url}
-        objectFit="contain"
+    <Tooltip label={warnings.length > 0 ? <RefImageWarningTooltipContent warnings={warnings} /> : undefined}>
+      <Flex
+        position="relative"
+        borderWidth={1}
+        borderStyle="solid"
+        borderRadius="base"
         aspectRatio="1/1"
-        height={imageDTO?.height}
-        fallback={<Skeleton h="full" aspectRatio="1/1" />}
         maxW="full"
         maxH="full"
-        borderRadius="base"
-      />
-      {isIPAdapterConfig(entity.config) && (
-        <Flex
-          position="absolute"
-          inset={0}
-          fontWeight="semibold"
-          alignItems="center"
-          justifyContent="center"
-          zIndex={1}
-          data-visible={showWeightDisplay}
-          sx={weightDisplaySx}
-        >
-          <Text filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))">
-            {`${round(entity.config.weight * 100, 2)}%`}
-          </Text>
-        </Flex>
-      )}
-      {!entity.isEnabled && (
-        <Icon
-          position="absolute"
-          top="50%"
-          left="50%"
-          transform="translateX(-50%) translateY(-50%)"
-          filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))"
-          color="base.300"
-          boxSize={8}
-          as={PiEyeSlashBold}
+        flexShrink={0}
+        sx={sx}
+        data-is-open={selectedEntityId === id && isPanelOpen}
+        data-is-error={warnings.length > 0}
+        data-is-disabled={!entity.isEnabled}
+        role="button"
+        onClick={onClick}
+        cursor="pointer"
+        overflow="hidden"
+      >
+        <Image
+          src={imageDTO?.thumbnail_url}
+          objectFit="contain"
+          aspectRatio="1/1"
+          height={imageDTO?.height}
+          fallback={<Skeleton h="full" aspectRatio="1/1" />}
+          maxW="full"
+          maxH="full"
         />
-      )}
-      {entity.isEnabled && isInvalid && (
-        <Icon
-          position="absolute"
-          top="50%"
-          left="50%"
-          transform="translateX(-50%) translateY(-50%)"
-          filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))"
-          color="error.500"
-          boxSize={12}
-          as={PiExclamationMarkBold}
-        />
-      )}
-    </Flex>
+        {isIPAdapterConfig(entity.config) && (
+          <Flex
+            position="absolute"
+            inset={0}
+            fontWeight="semibold"
+            alignItems="center"
+            justifyContent="center"
+            zIndex={1}
+            data-visible={showWeightDisplay}
+            sx={weightDisplaySx}
+          >
+            <Text filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))">
+              {`${round(entity.config.weight * 100, 2)}%`}
+            </Text>
+          </Flex>
+        )}
+        {!entity.isEnabled && (
+          <Icon
+            position="absolute"
+            top="50%"
+            left="50%"
+            transform="translateX(-50%) translateY(-50%)"
+            filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))"
+            color="base.300"
+            boxSize={8}
+            as={PiEyeSlashBold}
+          />
+        )}
+        {entity.isEnabled && warnings.length > 0 && (
+          <Icon
+            position="absolute"
+            top="50%"
+            left="50%"
+            transform="translateX(-50%) translateY(-50%)"
+            filter="drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1))"
+            color="error.500"
+            boxSize={12}
+            as={PiExclamationMarkBold}
+          />
+        )}
+      </Flex>
+    </Tooltip>
   );
 });
 RefImagePreview.displayName = 'RefImagePreview';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageWarningTooltipContent.tsx

@@ -0,0 +1,18 @@
+import { Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import { upperFirst } from 'es-toolkit/compat';
+import { useTranslation } from 'react-i18next';
+
+export const RefImageWarningTooltipContent = ({ warnings }: { warnings: string[] }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">Invalid Reference Image:</Text>
+      <UnorderedList>
+        {warnings.map((tKey) => (
+          <ListItem key={tKey}>{upperFirst(t(tKey))}</ListItem>
+        ))}
+      </UnorderedList>
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx

@@ -26,6 +26,7 @@ import { CanvasSettingsPreserveMaskCheckbox } from 'features/controlLayers/compo
 import { CanvasSettingsPressureSensitivityCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsPressureSensitivity';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
 import { CanvasSettingsRuleOfThirdsSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsRuleOfThirdsGuideSwitch';
+import { CanvasSettingsSaveAllImagesToGalleryCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsSaveAllImagesToGalleryCheckbox';
 import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
 import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
 import { memo } from 'react';
@@ -61,6 +62,7 @@ export const CanvasSettingsPopover = memo(() => {
               <CanvasSettingsPreserveMaskCheckbox />
               <CanvasSettingsClipToBboxCheckbox />
               <CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
+              <CanvasSettingsSaveAllImagesToGalleryCheckbox />
             </Flex>
 
             <Divider />

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsSaveAllImagesToGalleryCheckbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  selectSaveAllImagesToGallery,
+  settingsSaveAllImagesToGalleryToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsSaveAllImagesToGalleryCheckbox = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const saveAllImagesToGallery = useAppSelector(selectSaveAllImagesToGallery);
+  const onChange = useCallback(() => {
+    dispatch(settingsSaveAllImagesToGalleryToggled());
+  }, [dispatch]);
+  return (
+    <FormControl w="full">
+      <FormLabel flexGrow={1}>{t('controlLayers.saveAllImagesToGallery')}</FormLabel>
+      <Checkbox isChecked={saveAllImagesToGallery} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasSettingsSaveAllImagesToGalleryCheckbox.displayName = 'CanvasSettingsSaveAllImagesToGalleryCheckbox';

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

@@ -1,4 +1,4 @@
-import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
+import { Button, Flex, Grid, Text } from '@invoke-ai/ui-library';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
 import { memo, useCallback } from 'react';
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { InitialStateMainModelPicker } from './InitialStateMainModelPicker';
 import { LaunchpadAddStyleReference } from './LaunchpadAddStyleReference';
+import { LaunchpadContainer } from './LaunchpadContainer';
 import { LaunchpadEditImageButton } from './LaunchpadEditImageButton';
 import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButton';
 import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton';
@@ -16,35 +17,30 @@ export const CanvasLaunchpadPanel = memo(() => {
     navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
   }, []);
   return (
-    <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
-      <Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
-        <Heading mb={4}>{t('ui.launchpad.canvasTitle')}</Heading>
-        <Flex flexDir="column" gap={8}>
-          <Grid gridTemplateColumns="1fr 1fr" gap={8}>
-            <InitialStateMainModelPicker />
-            <Flex flexDir="column" gap={2} justifyContent="center">
-              <Text>
-                {t('ui.launchpad.modelGuideText')}{' '}
-                <Button
-                  as="a"
-                  variant="link"
-                  href="https://support.invoke.ai/support/solutions/articles/151000216086-model-guide"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  size="sm"
-                >
-                  {t('ui.launchpad.modelGuideLink')}
-                </Button>
-              </Text>
-            </Flex>
-          </Grid>
-          <LaunchpadGenerateFromTextButton extraAction={focusCanvas} />
-          <LaunchpadAddStyleReference extraAction={focusCanvas} />
-          <LaunchpadEditImageButton extraAction={focusCanvas} />
-          <LaunchpadUseALayoutImageButton extraAction={focusCanvas} />
+    <LaunchpadContainer heading={t('ui.launchpad.canvasTitle')}>
+      <Grid gridTemplateColumns="1fr 1fr" gap={8}>
+        <InitialStateMainModelPicker />
+        <Flex flexDir="column" gap={2} justifyContent="center">
+          <Text>
+            {t('ui.launchpad.modelGuideText')}{' '}
+            <Button
+              as="a"
+              variant="link"
+              href="https://support.invoke.ai/support/solutions/articles/151000216086-model-guide"
+              target="_blank"
+              rel="noopener noreferrer"
+              size="sm"
+            >
+              {t('ui.launchpad.modelGuideLink')}
+            </Button>
+          </Text>
         </Flex>
-      </Flex>
-    </Flex>
+      </Grid>
+      <LaunchpadGenerateFromTextButton extraAction={focusCanvas} />
+      <LaunchpadAddStyleReference extraAction={focusCanvas} />
+      <LaunchpadEditImageButton extraAction={focusCanvas} />
+      <LaunchpadUseALayoutImageButton extraAction={focusCanvas} />
+    </LaunchpadContainer>
   );
 });
 CanvasLaunchpadPanel.displayName = 'CanvasLaunchpadPanel';

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

@@ -1,9 +1,10 @@
-import { Alert, Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
+import { Alert, Button, Flex, Grid, Text } from '@invoke-ai/ui-library';
 import { InitialStateMainModelPicker } from 'features/controlLayers/components/SimpleSession/InitialStateMainModelPicker';
 import { LaunchpadAddStyleReference } from 'features/controlLayers/components/SimpleSession/LaunchpadAddStyleReference';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { memo, useCallback } from 'react';
 
+import { LaunchpadContainer } from './LaunchpadContainer';
 import { LaunchpadGenerateFromTextButton } from './LaunchpadGenerateFromTextButton';
 
 export const GenerateLaunchpadPanel = memo(() => {
@@ -12,41 +13,36 @@ export const GenerateLaunchpadPanel = memo(() => {
   }, []);
 
   return (
-    <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
-      <Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
-        <Heading mb={4}>Generate images from text prompts.</Heading>
-        <Flex flexDir="column" gap={8}>
-          <Grid gridTemplateColumns="1fr 1fr" gap={8}>
-            <InitialStateMainModelPicker />
-            <Flex flexDir="column" gap={2} justifyContent="center">
-              <Text>
-                Want to learn what prompts work best for each model?{' '}
-                <Button
-                  as="a"
-                  variant="link"
-                  href="https://support.invoke.ai/support/solutions/articles/151000216086-model-guide"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  size="sm"
-                >
-                  Check out our Model Guide.
-                </Button>
-              </Text>
-            </Flex>
-          </Grid>
-          <LaunchpadGenerateFromTextButton />
-          <LaunchpadAddStyleReference />
-          <Alert status="info" borderRadius="base" flexDir="column" gap={2} overflow="unset">
-            <Text fontSize="md" fontWeight="semibold">
-              Looking to get more control, edit, and iterate on your images?
-            </Text>
-            <Button variant="link" onClick={newCanvasSession}>
-              Navigate to Canvas for more capabilities.
+    <LaunchpadContainer heading="Generate images from text prompts.">
+      <Grid gridTemplateColumns="1fr 1fr" gap={8}>
+        <InitialStateMainModelPicker />
+        <Flex flexDir="column" gap={2} justifyContent="center">
+          <Text>
+            Want to learn what prompts work best for each model?{' '}
+            <Button
+              as="a"
+              variant="link"
+              href="https://support.invoke.ai/support/solutions/articles/151000216086-model-guide"
+              target="_blank"
+              rel="noopener noreferrer"
+              size="sm"
+            >
+              Check out our Model Guide.
             </Button>
-          </Alert>
+          </Text>
         </Flex>
-      </Flex>
-    </Flex>
+      </Grid>
+      <LaunchpadGenerateFromTextButton />
+      <LaunchpadAddStyleReference />
+      <Alert status="info" borderRadius="base" flexDir="column" gap={2} overflow="unset">
+        <Text fontSize="md" fontWeight="semibold">
+          Looking to get more control, edit, and iterate on your images?
+        </Text>
+        <Button variant="link" onClick={newCanvasSession}>
+          Navigate to Canvas for more capabilities.
+        </Button>
+      </Alert>
+    </LaunchpadContainer>
   );
 });
 GenerateLaunchpadPanel.displayName = 'GenerateLaunchpad';

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

@@ -0,0 +1,17 @@
+import { Flex, Heading } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+export const LaunchpadContainer = memo((props: PropsWithChildren<{ heading: string }>) => {
+  return (
+    <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
+      <Flex flexDir="column" w="full" gap={4} px={14} maxW={768}>
+        <Heading>{props.heading}</Heading>
+        <Flex flexDir="column" gap={4}>
+          {props.children}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+});
+LaunchpadContainer.displayName = 'LaunchpadContainer';

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

@@ -1,5 +1,6 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   useCanvasSessionContext,
   useOutputImageDTO,
@@ -10,6 +11,10 @@ import { QueueItemNumber } from 'features/controlLayers/components/SimpleSession
 import { QueueItemProgressImage } from 'features/controlLayers/components/SimpleSession/QueueItemProgressImage';
 import { QueueItemStatusLabel } from 'features/controlLayers/components/SimpleSession/QueueItemStatusLabel';
 import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
+import {
+  selectStagingAreaAutoSwitch,
+  settingsStagingAreaAutoSwitchChanged,
+} from 'features/controlLayers/store/canvasSettingsSlice';
 import { DndImage } from 'features/dnd/DndImage';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
@@ -21,12 +26,13 @@ const sx = {
   pos: 'relative',
   alignItems: 'center',
   justifyContent: 'center',
-  h: 108,
-  w: 108,
   flexShrink: 0,
+  h: 'full',
+  aspectRatio: '1/1',
   borderWidth: 2,
   borderRadius: 'base',
   bg: 'base.900',
+  overflow: 'hidden',
   '&[data-selected="true"]': {
     borderColor: 'invokeBlue.300',
   },
@@ -34,28 +40,29 @@ const sx = {
 
 type Props = {
   item: S['SessionQueueItem'];
-  number: number;
+  index: number;
   isSelected: boolean;
 };
 
-export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) => {
+export const QueueItemPreviewMini = memo(({ item, isSelected, index }: Props) => {
+  const dispatch = useAppDispatch();
   const ctx = useCanvasSessionContext();
   const { imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
   const imageDTO = useOutputImageDTO(item);
+  const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
 
   const onClick = useCallback(() => {
     ctx.$selectedItemId.set(item.item_id);
   }, [ctx.$selectedItemId, item.item_id]);
 
   const onDoubleClick = useCallback(() => {
-    const autoSwitch = ctx.$autoSwitch.get();
     if (autoSwitch !== 'off') {
-      ctx.$autoSwitch.set('off');
+      dispatch(settingsStagingAreaAutoSwitchChanged('off'));
       toast({
         title: 'Auto-Switch Disabled',
       });
     }
-  }, [ctx.$autoSwitch]);
+  }, [autoSwitch, dispatch]);
 
   const onLoad = useCallback(() => {
     ctx.onImageLoad(item.item_id);
@@ -63,7 +70,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
 
   return (
     <Flex
-      id={getQueueItemElementId(item.item_id)}
+      id={getQueueItemElementId(index)}
       sx={sx}
       data-selected={isSelected}
       onClick={onClick}
@@ -72,7 +79,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
       <QueueItemStatusLabel item={item} position="absolute" margin="auto" />
       {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
       {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
-      <QueueItemNumber number={number} position="absolute" top={0} left={1} />
+      <QueueItemNumber number={index + 1} position="absolute" top={0} left={1} />
       <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
     </Flex>
   );

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

@@ -16,21 +16,21 @@ export const QueueItemStatusLabel = memo(({ item, ...rest }: Props) => {
 
   if (item.status === 'pending') {
     return (
-      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="base.300" {...rest}>
+      <Text fontSize="xs" pointerEvents="none" userSelect="none" fontWeight="semibold" color="base.300" {...rest}>
         Pending
       </Text>
     );
   }
   if (item.status === 'canceled') {
     return (
-      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="warning.300" {...rest}>
+      <Text fontSize="xs" pointerEvents="none" userSelect="none" fontWeight="semibold" color="warning.300" {...rest}>
         Canceled
       </Text>
     );
   }
   if (item.status === 'failed') {
     return (
-      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="error.300" {...rest}>
+      <Text fontSize="xs" pointerEvents="none" userSelect="none" fontWeight="semibold" color="error.300" {...rest}>
         Failed
       </Text>
     );
@@ -38,7 +38,7 @@ export const QueueItemStatusLabel = memo(({ item, ...rest }: Props) => {
 
   if (item.status === 'in_progress') {
     return (
-      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="invokeBlue.300" {...rest}>
+      <Text fontSize="xs" pointerEvents="none" userSelect="none" fontWeight="semibold" color="invokeBlue.300" {...rest}>
         In Progress
       </Text>
     );
@@ -46,7 +46,14 @@ export const QueueItemStatusLabel = memo(({ item, ...rest }: Props) => {
 
   if (item.status === 'completed') {
     return (
-      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="invokeGreen.300" {...rest}>
+      <Text
+        fontSize="xs"
+        pointerEvents="none"
+        userSelect="none"
+        fontWeight="semibold"
+        color="invokeGreen.300"
+        {...rest}
+      >
         Completed
       </Text>
     );

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

@@ -1,17 +1,148 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Box, Flex, forwardRef } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { logger } from 'app/logging/logger';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { QueueItemPreviewMini } from 'features/controlLayers/components/SimpleSession/QueueItemPreviewMini';
 import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type { CSSProperties, RefObject } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Components, ItemContent, ListRange, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
+import type { S } from 'services/api/types';
+
+import { getQueueItemElementId } from './shared';
+
+const log = logger('system');
+
+const virtuosoStyles = {
+  width: '100%',
+  height: '72px',
+} satisfies CSSProperties;
+
+type VirtuosoContext = { selectedItemId: number | null };
+
+/**
+ * Scroll the item at the given index into view if it is not currently visible.
+ */
+const scrollIntoView = (
+  targetIndex: number,
+  rootEl: HTMLDivElement,
+  virtuosoHandle: VirtuosoHandle,
+  range: ListRange
+) => {
+  if (range.endIndex === 0) {
+    // No range is rendered; no need to scroll to anything.
+    return;
+  }
+
+  const targetItem = rootEl.querySelector(`#${getQueueItemElementId(targetIndex)}`);
+
+  if (!targetItem) {
+    if (targetIndex > range.endIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'end',
+      });
+    } else if (targetIndex < range.startIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'start',
+      });
+    } else {
+      log.debug(
+        `Unable to find queue item at index ${targetIndex} but it is in the rendered range ${range.startIndex}-${range.endIndex}`
+      );
+    }
+    return;
+  }
+
+  // We found the image in the DOM, but it might be in the overscan range - rendered but not in the visible viewport.
+  // Check if it is in the viewport and scroll if necessary.
+
+  const itemRect = targetItem.getBoundingClientRect();
+  const rootRect = rootEl.getBoundingClientRect();
+
+  if (itemRect.left < rootRect.left) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'start',
+    });
+  } else if (itemRect.right > rootRect.right) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'end',
+    });
+  } else {
+    // Image is already in view
+  }
+
+  return;
+};
+
+const useScrollableStagingArea = (rootRef: RefObject<HTMLDivElement>) => {
+  const [scroller, scrollerRef] = useState<HTMLElement | null>(null);
+  const [initialize, osInstance] = useOverlayScrollbars({
+    defer: true,
+    events: {
+      initialized(osInstance) {
+        // force overflow styles
+        const { viewport } = osInstance.elements();
+        viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
+        viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
+      },
+    },
+    options: {
+      scrollbars: {
+        visibility: 'auto',
+        autoHide: 'scroll',
+        autoHideDelay: 1300,
+        theme: 'os-theme-dark',
+      },
+      overflow: {
+        y: 'hidden',
+        x: 'scroll',
+      },
+    },
+  });
+
+  useEffect(() => {
+    const { current: root } = rootRef;
+
+    if (scroller && root) {
+      initialize({
+        target: root,
+        elements: {
+          viewport: scroller,
+        },
+      });
+    }
+
+    return () => {
+      osInstance()?.destroy();
+    };
+  }, [scroller, initialize, osInstance, rootRef]);
+
+  return scrollerRef;
+};
 
 export const StagingAreaItemsList = memo(() => {
   const canvasManager = useCanvasManagerSafe();
   const ctx = useCanvasSessionContext();
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
+  const rootRef = useRef<HTMLDivElement>(null);
+
   const items = useStore(ctx.$items);
   const selectedItemId = useStore(ctx.$selectedItemId);
 
+  const context = useMemo(() => ({ selectedItemId }), [selectedItemId]);
+  const scrollerRef = useScrollableStagingArea(rootRef);
+
   useEffect(() => {
     if (!canvasManager) {
       return;
@@ -20,19 +151,64 @@ export const StagingAreaItemsList = memo(() => {
     return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending);
   }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]);
 
+  useEffect(() => {
+    return ctx.$selectedItemIndex.listen((index) => {
+      if (!virtuosoRef.current) {
+        return;
+      }
+
+      if (!rootRef.current) {
+        return;
+      }
+
+      if (index === null) {
+        return;
+      }
+
+      scrollIntoView(index, rootRef.current, virtuosoRef.current, rangeRef.current);
+    });
+  }, [ctx.$selectedItemIndex]);
+
+  const onRangeChanged = useCallback((range: ListRange) => {
+    rangeRef.current = range;
+  }, []);
+
   return (
-    <ScrollableContent overflowX="scroll" overflowY="hidden">
-      <Flex gap={2} w="full" h="full" justifyContent="safe center">
-        {items.map((item, i) => (
-          <QueueItemPreviewMini
-            key={`${item.item_id}-mini`}
-            item={item}
-            number={i + 1}
-            isSelected={selectedItemId === item.item_id}
-          />
-        ))}
-      </Flex>
-    </ScrollableContent>
+    <Box data-overlayscrollbars-initialize="" ref={rootRef} position="relative" w="full" h="full">
+      <Virtuoso<S['SessionQueueItem'], VirtuosoContext>
+        ref={virtuosoRef}
+        context={context}
+        data={items}
+        horizontalDirection
+        style={virtuosoStyles}
+        itemContent={itemContent}
+        components={components}
+        rangeChanged={onRangeChanged}
+        // Virtuoso expects the ref to be of HTMLElement | null | Window, but overlayscrollbars doesn't allow Window
+        scrollerRef={scrollerRef as VirtuosoProps<S['SessionQueueItem'], VirtuosoContext>['scrollerRef']}
+      />
+    </Box>
   );
 });
 StagingAreaItemsList.displayName = 'StagingAreaItemsList';
+
+const itemContent: ItemContent<S['SessionQueueItem'], VirtuosoContext> = (index, item, { selectedItemId }) => (
+  <QueueItemPreviewMini
+    key={`${item.item_id}-mini`}
+    item={item}
+    index={index}
+    isSelected={selectedItemId === item.item_id}
+  />
+);
+
+const listSx = {
+  '& > * + *': {
+    pl: 2,
+  },
+};
+
+const components: Components<S['SessionQueueItem'], VirtuosoContext> = {
+  List: forwardRef(({ context: _, ...rest }, ref) => {
+    return <Flex ref={ref} sx={listSx} {...rest} />;
+  }),
+};

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

@@ -24,6 +24,7 @@ import {
 import type { ImageDTO } from 'services/api/types';
 
 import { LaunchpadButton } from './LaunchpadButton';
+import { LaunchpadContainer } from './LaunchpadContainer';
 
 export const UpscalingLaunchpadPanel = memo(() => {
   const { t } = useTranslation();
@@ -65,108 +66,104 @@ export const UpscalingLaunchpadPanel = memo(() => {
   }, [dispatch]);
 
   return (
-    <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
-      <Flex flexDir="column" w="full" gap={8} px={14} maxW={768} pt="20vh">
-        <Heading>{t('ui.launchpad.upscalingTitle')}</Heading>
-
-        {/* Upload Area */}
-        <LaunchpadButton {...uploadApi.getUploadButtonProps()} position="relative" gap={8}>
-          {!upscaleInitialImage ? (
-            <>
-              <Icon as={PiImageBold} boxSize={8} color="base.500" />
-              <Flex flexDir="column" alignItems="flex-start" gap={2}>
-                <Heading size="sm">{t('ui.launchpad.upscaling.uploadImage.title')}</Heading>
-                <Text color="base.300">{t('ui.launchpad.upscaling.uploadImage.description')}</Text>
-              </Flex>
-              <Flex position="absolute" right={3} bottom={3}>
-                <PiUploadBold />
-                <input {...uploadApi.getUploadInputProps()} />
-              </Flex>
-            </>
-          ) : (
-            <>
-              <Icon as={PiImageBold} boxSize={8} color="base.500" />
-              <Flex flexDir="column" alignItems="flex-start" gap={2}>
-                <Heading size="sm">{t('ui.launchpad.upscaling.replaceImage.title')}</Heading>
-                <Text color="base.300">{t('ui.launchpad.upscaling.replaceImage.description')}</Text>
-              </Flex>
-              <Flex position="absolute" right={3} bottom={3}>
-                <PiUploadBold />
-                <input {...uploadApi.getUploadInputProps()} />
-              </Flex>
-            </>
-          )}
-          <DndDropTarget
-            dndTarget={setUpscaleInitialImageDndTarget}
-            dndTargetData={dndTargetData}
-            label={t('gallery.drop')}
-          />
-        </LaunchpadButton>
-
-        {/* Guidance text */}
-        {upscaleInitialImage && (
-          <Flex bg="base.800" p={4} borderRadius="base" border="1px solid" borderColor="base.700">
-            <Text variant="subtext" fontSize="sm" lineHeight="1.6">
-              <strong>{t('ui.launchpad.upscaling.readyToUpscale.title')}</strong>{' '}
-              {t('ui.launchpad.upscaling.readyToUpscale.description')}
-            </Text>
-          </Flex>
+    <LaunchpadContainer heading={t('ui.launchpad.upscalingTitle')}>
+      {/* Upload Area */}
+      <LaunchpadButton {...uploadApi.getUploadButtonProps()} position="relative" gap={8}>
+        {!upscaleInitialImage ? (
+          <>
+            <Icon as={PiImageBold} boxSize={8} color="base.500" />
+            <Flex flexDir="column" alignItems="flex-start" gap={2}>
+              <Heading size="sm">{t('ui.launchpad.upscaling.uploadImage.title')}</Heading>
+              <Text color="base.300">{t('ui.launchpad.upscaling.uploadImage.description')}</Text>
+            </Flex>
+            <Flex position="absolute" right={3} bottom={3}>
+              <PiUploadBold />
+              <input {...uploadApi.getUploadInputProps()} />
+            </Flex>
+          </>
+        ) : (
+          <>
+            <Icon as={PiImageBold} boxSize={8} color="base.500" />
+            <Flex flexDir="column" alignItems="flex-start" gap={2}>
+              <Heading size="sm">{t('ui.launchpad.upscaling.replaceImage.title')}</Heading>
+              <Text color="base.300">{t('ui.launchpad.upscaling.replaceImage.description')}</Text>
+            </Flex>
+            <Flex position="absolute" right={3} bottom={3}>
+              <PiUploadBold />
+              <input {...uploadApi.getUploadInputProps()} />
+            </Flex>
+          </>
         )}
+        <DndDropTarget
+          dndTarget={setUpscaleInitialImageDndTarget}
+          dndTargetData={dndTargetData}
+          label={t('gallery.drop')}
+        />
+      </LaunchpadButton>
 
-        {/* Controls */}
-        <Grid gridTemplateColumns="1fr 1fr" gap={8} alignItems="start">
-          {/* Left Column: Creativity and Structural Defaults */}
-          <Box>
-            <Text fontWeight="semibold" fontSize="sm" mb={3}>
-              Creativity & Structure Defaults
-            </Text>
-            <ButtonGroup size="sm" orientation="vertical" variant="outline" w="full">
-              <Button
-                colorScheme={creativity === -5 && structure === 5 ? 'invokeBlue' : undefined}
-                justifyContent="center"
-                onClick={onConservativeClick}
-                leftIcon={<PiShieldCheckBold />}
-              >
-                Conservative
-              </Button>
-              <Button
-                colorScheme={creativity === 0 && structure === 0 ? 'invokeBlue' : undefined}
-                justifyContent="center"
-                onClick={onBalancedClick}
-                leftIcon={<PiScalesBold />}
-              >
-                Balanced
-              </Button>
-              <Button
-                colorScheme={creativity === 5 && structure === -2 ? 'invokeBlue' : undefined}
-                justifyContent="center"
-                onClick={onCreativeClick}
-                leftIcon={<PiPaletteBold />}
-              >
-                Creative
-              </Button>
-              <Button
-                colorScheme={creativity === 8 && structure === -5 ? 'invokeBlue' : undefined}
-                justifyContent="center"
-                onClick={onArtisticClick}
-                leftIcon={<PiSparkleBold />}
-              >
-                Artistic
-              </Button>
-            </ButtonGroup>
-          </Box>
-          {/* Right Column: Description/help text */}
-          <Box>
-            <Text variant="subtext" fontSize="sm" lineHeight="1.6">
-              {t('ui.launchpad.upscaling.helpText.promptAdvice')}
-            </Text>
-            <Text variant="subtext" fontSize="sm" lineHeight="1.6" mt={3}>
-              {t('ui.launchpad.upscaling.helpText.styleAdvice')}
-            </Text>
-          </Box>
-        </Grid>
-      </Flex>
-    </Flex>
+      {/* Guidance text */}
+      {upscaleInitialImage && (
+        <Flex bg="base.800" p={4} borderRadius="base" border="1px solid" borderColor="base.700">
+          <Text variant="subtext" fontSize="sm" lineHeight="1.6">
+            <strong>{t('ui.launchpad.upscaling.readyToUpscale.title')}</strong>{' '}
+            {t('ui.launchpad.upscaling.readyToUpscale.description')}
+          </Text>
+        </Flex>
+      )}
+
+      {/* Controls */}
+      <Grid gridTemplateColumns="1fr 1fr" gap={8} alignItems="start">
+        {/* Left Column: Creativity and Structural Defaults */}
+        <Box>
+          <Text fontWeight="semibold" fontSize="sm" mb={3}>
+            Creativity & Structure Defaults
+          </Text>
+          <ButtonGroup size="sm" orientation="vertical" variant="outline" w="full">
+            <Button
+              colorScheme={creativity === -5 && structure === 5 ? 'invokeBlue' : undefined}
+              justifyContent="center"
+              onClick={onConservativeClick}
+              leftIcon={<PiShieldCheckBold />}
+            >
+              Conservative
+            </Button>
+            <Button
+              colorScheme={creativity === 0 && structure === 0 ? 'invokeBlue' : undefined}
+              justifyContent="center"
+              onClick={onBalancedClick}
+              leftIcon={<PiScalesBold />}
+            >
+              Balanced
+            </Button>
+            <Button
+              colorScheme={creativity === 5 && structure === -2 ? 'invokeBlue' : undefined}
+              justifyContent="center"
+              onClick={onCreativeClick}
+              leftIcon={<PiPaletteBold />}
+            >
+              Creative
+            </Button>
+            <Button
+              colorScheme={creativity === 8 && structure === -5 ? 'invokeBlue' : undefined}
+              justifyContent="center"
+              onClick={onArtisticClick}
+              leftIcon={<PiSparkleBold />}
+            >
+              Artistic
+            </Button>
+          </ButtonGroup>
+        </Box>
+        {/* Right Column: Description/help text */}
+        <Box>
+          <Text variant="subtext" fontSize="sm" lineHeight="1.6">
+            {t('ui.launchpad.upscaling.helpText.promptAdvice')}
+          </Text>
+          <Text variant="subtext" fontSize="sm" lineHeight="1.6" mt={3}>
+            {t('ui.launchpad.upscaling.helpText.styleAdvice')}
+          </Text>
+        </Box>
+      </Grid>
+    </LaunchpadContainer>
   );
 });
 

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

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { PiFilePlusBold, PiFolderOpenBold, PiUploadBold } from 'react-icons/pi';
 
 import { LaunchpadButton } from './LaunchpadButton';
+import { LaunchpadContainer } from './LaunchpadContainer';
 
 export const WorkflowsLaunchpadPanel = memo(() => {
   const { t } = useTranslation();
@@ -45,63 +46,59 @@ export const WorkflowsLaunchpadPanel = memo(() => {
   });
 
   return (
-    <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
-      <Flex flexDir="column" w="full" gap={4} px={14} maxW={768} pt="20vh">
-        <Heading>{t('ui.launchpad.workflowsTitle')}</Heading>
+    <LaunchpadContainer heading={t('ui.launchpad.workflowsTitle')}>
+      {/* Description */}
+      <Text variant="subtext" fontSize="md" lineHeight="1.6">
+        {t('ui.launchpad.workflows.description')}
+      </Text>
 
-        {/* Description */}
-        <Text variant="subtext" fontSize="md" lineHeight="1.6">
-          {t('ui.launchpad.workflows.description')}
-        </Text>
+      <Text>
+        <Button
+          as="a"
+          variant="link"
+          href="https://support.invoke.ai/support/solutions/articles/151000189610-getting-started-with-workflows-denoise-latents"
+          target="_blank"
+          rel="noopener noreferrer"
+          size="sm"
+        >
+          {t('ui.launchpad.workflows.learnMoreLink')}
+        </Button>
+      </Text>
 
-        <Text>
-          <Button
-            as="a"
-            variant="link"
-            href="https://support.invoke.ai/support/solutions/articles/151000189610-getting-started-with-workflows-denoise-latents"
-            target="_blank"
-            rel="noopener noreferrer"
-            size="sm"
-          >
-            {t('ui.launchpad.workflows.learnMoreLink')}
-          </Button>
-        </Text>
+      {/* Action Buttons */}
+      <Flex flexDir="column" gap={8}>
+        {/* Browse Workflow Templates */}
+        <LaunchpadButton onClick={handleBrowseTemplates} position="relative" gap={8}>
+          <Icon as={PiFolderOpenBold} boxSize={8} color="base.500" />
+          <Flex flexDir="column" alignItems="flex-start" gap={2}>
+            <Heading size="sm">{t('ui.launchpad.workflows.browseTemplates.title')}</Heading>
+            <Text color="base.300">{t('ui.launchpad.workflows.browseTemplates.description')}</Text>
+          </Flex>
+        </LaunchpadButton>
 
-        {/* Action Buttons */}
-        <Flex flexDir="column" gap={8}>
-          {/* Browse Workflow Templates */}
-          <LaunchpadButton onClick={handleBrowseTemplates} position="relative" gap={8}>
-            <Icon as={PiFolderOpenBold} boxSize={8} color="base.500" />
-            <Flex flexDir="column" alignItems="flex-start" gap={2}>
-              <Heading size="sm">{t('ui.launchpad.workflows.browseTemplates.title')}</Heading>
-              <Text color="base.300">{t('ui.launchpad.workflows.browseTemplates.description')}</Text>
-            </Flex>
-          </LaunchpadButton>
+        {/* Create a new Workflow */}
+        <LaunchpadButton onClick={handleCreateNew} position="relative" gap={8}>
+          <Icon as={PiFilePlusBold} boxSize={8} color="base.500" />
+          <Flex flexDir="column" alignItems="flex-start" gap={2}>
+            <Heading size="sm">{t('ui.launchpad.workflows.createNew.title')}</Heading>
+            <Text color="base.300">{t('ui.launchpad.workflows.createNew.description')}</Text>
+          </Flex>
+        </LaunchpadButton>
 
-          {/* Create a new Workflow */}
-          <LaunchpadButton onClick={handleCreateNew} position="relative" gap={8}>
-            <Icon as={PiFilePlusBold} boxSize={8} color="base.500" />
-            <Flex flexDir="column" alignItems="flex-start" gap={2}>
-              <Heading size="sm">{t('ui.launchpad.workflows.createNew.title')}</Heading>
-              <Text color="base.300">{t('ui.launchpad.workflows.createNew.description')}</Text>
-            </Flex>
-          </LaunchpadButton>
-
-          {/* Load workflow from existing image or file */}
-          <LaunchpadButton {...uploadApi.getRootProps()} position="relative" gap={8}>
-            <Icon as={PiUploadBold} boxSize={8} color="base.500" />
-            <Flex flexDir="column" alignItems="flex-start" gap={2}>
-              <Heading size="sm">{t('ui.launchpad.workflows.loadFromFile.title')}</Heading>
-              <Text color="base.300">{t('ui.launchpad.workflows.loadFromFile.description')}</Text>
-            </Flex>
-            <Flex position="absolute" right={3} bottom={3}>
-              <PiUploadBold />
-              <input {...uploadApi.getInputProps()} />
-            </Flex>
-          </LaunchpadButton>
-        </Flex>
+        {/* Load workflow from existing image or file */}
+        <LaunchpadButton {...uploadApi.getRootProps()} position="relative" gap={8}>
+          <Icon as={PiUploadBold} boxSize={8} color="base.500" />
+          <Flex flexDir="column" alignItems="flex-start" gap={2}>
+            <Heading size="sm">{t('ui.launchpad.workflows.loadFromFile.title')}</Heading>
+            <Text color="base.300">{t('ui.launchpad.workflows.loadFromFile.description')}</Text>
+          </Flex>
+          <Flex position="absolute" right={3} bottom={3}>
+            <PiUploadBold />
+            <input {...uploadApi.getInputProps()} />
+          </Flex>
+        </LaunchpadButton>
       </Flex>
-    </Flex>
+    </LaunchpadContainer>
   );
 });
 

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

@@ -1,9 +1,12 @@
 import { useStore } from '@nanostores/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppStore } from 'app/store/storeHooks';
-import { buildZodTypeGuard } from 'common/util/zodUtils';
 import { getOutputImageName } from 'features/controlLayers/components/SimpleSession/shared';
+import { selectStagingAreaAutoSwitch } from 'features/controlLayers/store/canvasSettingsSlice';
+import {
+  buildSelectSessionQueueItems,
+  canvasQueueItemDiscarded,
+  canvasSessionReset,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import type { ProgressImage } from 'features/nodes/types/common';
 import type { Atom, MapStore, StoreValue, WritableAtom } from 'nanostores';
 import { atom, computed, effect, map, subscribeKeys } from 'nanostores';
@@ -14,11 +17,6 @@ import { queueApi } from 'services/api/endpoints/queue';
 import type { ImageDTO, S } from 'services/api/types';
 import { $socket } from 'services/events/stores';
 import { assert, objectEntries } from 'tsafe';
-import { z } from 'zod/v4';
-
-const zAutoSwitchMode = z.enum(['off', 'switch_on_start', 'switch_on_finish']);
-export const isAutoSwitchMode = buildZodTypeGuard(zAutoSwitchMode);
-type AutoSwitchMode = z.infer<typeof zAutoSwitchMode>;
 
 export type ProgressData = {
   itemId: number;
@@ -98,12 +96,13 @@ type CanvasSessionContextValue = {
   $selectedItem: Atom<S['SessionQueueItem'] | null>;
   $selectedItemIndex: Atom<number | null>;
   $selectedItemOutputImageDTO: Atom<ImageDTO | null>;
-  $autoSwitch: WritableAtom<AutoSwitchMode>;
   selectNext: () => void;
   selectPrev: () => void;
   selectFirst: () => void;
   selectLast: () => void;
   onImageLoad: (itemId: number) => void;
+  discard: (itemId: number) => void;
+  discardAll: () => void;
 };
 
 const CanvasSessionContext = createContext<CanvasSessionContextValue | null>(null);
@@ -140,11 +139,6 @@ export const CanvasSessionContextProvider = memo(
      */
     const $items = useState(() => atom<S['SessionQueueItem'][]>([]))[0];
 
-    /**
-     * Whether auto-switch is enabled.
-     */
-    const $autoSwitch = useState(() => atom<AutoSwitchMode>('switch_on_start'))[0];
-
     /**
      * An internal flag used to work around race conditions with auto-switch switching to queue items before their
      * output images have fully loaded.
@@ -226,19 +220,21 @@ export const CanvasSessionContextProvider = memo(
     )[0];
 
     /**
-     * A redux selector to select all queue items from the RTK Query cache. It's important that this returns stable
-     * references if possible to reduce re-renders. All derivations of the queue items (e.g. filtering out canceled
-     * items) should be done in a nanostores computed.
+     * A redux selector to select all queue items from the RTK Query cache.
      */
-    const selectQueueItems = useMemo(
-      () =>
-        createSelector(
-          queueApi.endpoints.listAllQueueItems.select({ destination: session.id }),
-          ({ data }) => data ?? EMPTY_ARRAY
-        ),
-      [session.id]
+    const selectQueueItems = useMemo(() => buildSelectSessionQueueItems(session.id), [session.id]);
+
+    const discard = useCallback(
+      (itemId: number) => {
+        store.dispatch(canvasQueueItemDiscarded({ itemId }));
+      },
+      [store]
     );
 
+    const discardAll = useCallback(() => {
+      store.dispatch(canvasSessionReset());
+    }, [store]);
+
     const selectNext = useCallback(() => {
       const selectedItemId = $selectedItemId.get();
       if (selectedItemId === null) {
@@ -300,12 +296,15 @@ export const CanvasSessionContextProvider = memo(
             imageLoaded: true,
           });
         }
-        if ($lastCompletedItemId.get() === itemId && $autoSwitch.get() === 'switch_on_finish') {
+        if (
+          $lastCompletedItemId.get() === itemId &&
+          selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish'
+        ) {
           $selectedItemId.set(itemId);
           $lastCompletedItemId.set(null);
         }
       },
-      [$autoSwitch, $lastCompletedItemId, $progressData, $selectedItemId]
+      [$lastCompletedItemId, $progressData, $selectedItemId, store]
     );
 
     // Set up socket listeners
@@ -340,7 +339,7 @@ export const CanvasSessionContextProvider = memo(
         socket.off('invocation_progress', onProgress);
         socket.off('queue_item_status_changed', onQueueItemStatusChanged);
       };
-    }, [$autoSwitch, $lastCompletedItemId, $lastStartedItemId, $progressData, $selectedItemId, session.id, socket]);
+    }, [$lastCompletedItemId, $lastStartedItemId, $progressData, $selectedItemId, session.id, socket]);
 
     // Set up state subscriptions and effects
     useEffect(() => {
@@ -362,33 +361,32 @@ export const CanvasSessionContextProvider = memo(
       const unsubEnsureSelectedItemIdExists = effect(
         [$items, $selectedItemId, $lastStartedItemId],
         (items, selectedItemId, lastStartedItemId) => {
-          // If there are no items, cannot have a selected item.
           if (items.length === 0) {
+            // If there are no items, cannot have a selected item.
             $selectedItemId.set(null);
-            return;
-          }
-          // If there is no selected item but there are items, select the first one.
-          if (selectedItemId === null && items.length > 0) {
+          } else if (selectedItemId === null && items.length > 0) {
+            // If there is no selected item but there are items, select the first one.
             $selectedItemId.set(items[0]?.item_id ?? null);
             return;
-          }
-          if (
-            $autoSwitch.get() === 'switch_on_start' &&
+          } else if (
+            selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_start' &&
             items.findIndex(({ item_id }) => item_id === lastStartedItemId) !== -1
           ) {
             $selectedItemId.set(lastStartedItemId);
             $lastStartedItemId.set(null);
-          }
-          // If an item is selected and it is not in the list of items, un-set it. This effect will run again and we'll
-          // the above case, selecting the first item if there are any.
-          if (selectedItemId !== null && items.findIndex(({ item_id }) => item_id === selectedItemId) === -1) {
+          } else if (selectedItemId !== null && items.findIndex(({ item_id }) => item_id === selectedItemId) === -1) {
+            // If an item is selected and it is not in the list of items, un-set it. This effect will run again and we'll
+            // the above case, selecting the first item if there are any.
             let prevIndex = _prevItems.findIndex(({ item_id }) => item_id === selectedItemId);
             if (prevIndex >= items.length) {
               prevIndex = items.length - 1;
             }
             const nextItem = items[prevIndex];
             $selectedItemId.set(nextItem?.item_id ?? null);
-            return;
+          }
+
+          if (items !== _prevItems) {
+            _prevItems = items;
           }
         }
       );
@@ -474,7 +472,7 @@ export const CanvasSessionContextProvider = memo(
         if (lastLoadedItemId === null) {
           return;
         }
-        if ($autoSwitch.get() === 'switch_on_finish') {
+        if (selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish') {
           $selectedItemId.set(lastLoadedItemId);
         }
         $lastLoadedItemId.set(null);
@@ -486,6 +484,22 @@ export const CanvasSessionContextProvider = memo(
         queueApi.endpoints.listAllQueueItems.initiate({ destination: session.id })
       );
 
+      // const unsubListener = store.dispatch(
+      //   addAppListener({
+      //     matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled,
+      //     effect: ({ payload }, { getState }) => {
+      //       const { item_id } = payload;
+
+      //       const items = selectQueueItems(getState());
+      //       if (items.length === 0) {
+      //         $selectedItemId.set(null);
+      //       } else if ($selectedItemId.get() === null) {
+      //         $selectedItemId.set(items[0].item_id);
+      //       }
+      //     },
+      //   })
+      // );
+
       // Clean up all subscriptions and top-level (i.e. non-computed/derived state)
       return () => {
         unsubHandleAutoSwitch();
@@ -498,7 +512,6 @@ export const CanvasSessionContextProvider = memo(
         $selectedItemId.set(null);
       };
     }, [
-      $autoSwitch,
       $items,
       $lastLoadedItemId,
       $lastStartedItemId,
@@ -517,7 +530,6 @@ export const CanvasSessionContextProvider = memo(
         $isPending,
         $progressData,
         $selectedItemId,
-        $autoSwitch,
         $selectedItem,
         $selectedItemIndex,
         $selectedItemOutputImageDTO,
@@ -527,9 +539,10 @@ export const CanvasSessionContextProvider = memo(
         selectFirst,
         selectLast,
         onImageLoad,
+        discard,
+        discardAll,
       }),
       [
-        $autoSwitch,
         $items,
         $hasItems,
         $isPending,
@@ -545,6 +558,8 @@ export const CanvasSessionContextProvider = memo(
         selectFirst,
         selectLast,
         onImageLoad,
+        discard,
+        discardAll,
       ]
     );
 

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/shared.ts

@@ -13,7 +13,7 @@ export const getProgressMessage = (data?: S['InvocationProgressEvent'] | null) =
 
 export const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3))';
 
-export const getQueueItemElementId = (itemId: number) => `queue-item-status-card-${itemId}`;
+export const getQueueItemElementId = (index: number) => `queue-item-preview-${index}`;
 
 export const getOutputImageName = (item: S['SessionQueueItem']) => {
   const nodeId = Object.entries(item.session.source_prepared_mapping).find(([nodeId]) =>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx

@@ -0,0 +1,50 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  selectStagingAreaAutoSwitch,
+  settingsStagingAreaAutoSwitchChanged,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { PiCaretLineRightBold, PiCaretRightBold, PiMoonBold } from 'react-icons/pi';
+
+export const StagingAreaAutoSwitchButtons = memo(() => {
+  const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
+  const dispatch = useAppDispatch();
+
+  const onClickOff = useCallback(() => {
+    dispatch(settingsStagingAreaAutoSwitchChanged('off'));
+  }, [dispatch]);
+  const onClickSwitchOnStart = useCallback(() => {
+    dispatch(settingsStagingAreaAutoSwitchChanged('switch_on_start'));
+  }, [dispatch]);
+  const onClickSwitchOnFinished = useCallback(() => {
+    dispatch(settingsStagingAreaAutoSwitchChanged('switch_on_finish'));
+  }, [dispatch]);
+
+  return (
+    <>
+      <IconButton
+        aria-label="Do not auto-switch"
+        tooltip="Do not auto-switch"
+        icon={<PiMoonBold />}
+        colorScheme={autoSwitch === 'off' ? 'invokeBlue' : 'base'}
+        onClick={onClickOff}
+      />
+      <IconButton
+        aria-label="Switch on start"
+        tooltip="Switch on start"
+        icon={<PiCaretRightBold />}
+        colorScheme={autoSwitch === 'switch_on_start' ? 'invokeBlue' : 'base'}
+        onClick={onClickSwitchOnStart}
+      />
+      <IconButton
+        aria-label="Switch on finish"
+        tooltip="Switch on finish"
+        icon={<PiCaretLineRightBold />}
+        colorScheme={autoSwitch === 'switch_on_finish' ? 'invokeBlue' : 'base'}
+        onClick={onClickSwitchOnFinished}
+      />
+    </>
+  );
+});
+StagingAreaAutoSwitchButtons.displayName = 'StagingAreaAutoSwitchButtons';

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx

@@ -1,7 +1,6 @@
-import { ButtonGroup } from '@invoke-ai/ui-library';
+import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
 import { StagingAreaToolbarAcceptButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton';
 import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
 import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
@@ -12,27 +11,22 @@ import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/
 import { StagingAreaToolbarSaveSelectedToGalleryButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton';
 import { StagingAreaToolbarToggleShowResultsButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
+import { StagingAreaAutoSwitchButtons } from './StagingAreaAutoSwitchButtons';
+
 export const StagingAreaToolbar = memo(() => {
   const canvasManager = useCanvasManager();
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
   const ctx = useCanvasSessionContext();
 
-  useEffect(() => {
-    return ctx.$selectedItemId.listen((id) => {
-      if (id !== null) {
-        document.getElementById(getQueueItemElementId(id))?.scrollIntoView();
-      }
-    });
-  }, [ctx.$selectedItemId]);
-
   useHotkeys('meta+left', ctx.selectFirst, { preventDefault: true });
   useHotkeys('meta+right', ctx.selectLast, { preventDefault: true });
+
   return (
-    <>
+    <Flex gap={2}>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaToolbarPrevButton isDisabled={!shouldShowStagedImage} />
         <StagingAreaToolbarImageCountButton />
@@ -44,9 +38,14 @@ export const StagingAreaToolbar = memo(() => {
         <StagingAreaToolbarSaveSelectedToGalleryButton />
         <StagingAreaToolbarMenu />
         <StagingAreaToolbarDiscardSelectedButton isDisabled={!shouldShowStagedImage} />
+      </ButtonGroup>
+      <ButtonGroup borderRadius="base" shadow="dark-lg">
+        <StagingAreaAutoSwitchButtons />
+      </ButtonGroup>
+      <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaToolbarDiscardAllButton isDisabled={!shouldShowStagedImage} />
       </ButtonGroup>
-    </>
+    </Flex>
   );
 });
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx

@@ -9,7 +9,7 @@ import { canvasSessionReset } from 'features/controlLayers/store/canvasStagingAr
 import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
 import { imageNameToImageObject } from 'features/controlLayers/store/util';
-import { useDeleteQueueItemsByDestination } from 'features/queue/hooks/useDeleteQueueItemsByDestination';
+import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +24,7 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
   const isCanvasFocused = useIsRegionFocused('canvas');
   const selectedItemImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
-  const deleteQueueItemsByDestination = useDeleteQueueItemsByDestination();
+  const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
 
   const { t } = useTranslation();
 
@@ -41,13 +41,13 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
 
     dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
     dispatch(canvasSessionReset());
-    deleteQueueItemsByDestination.trigger(ctx.session.id);
+    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
   }, [
     selectedItemImageDTO,
     bboxRect,
     dispatch,
     selectedEntityIdentifier?.type,
-    deleteQueueItemsByDestination,
+    cancelQueueItemsByDestination,
     ctx.session.id,
   ]);
 
@@ -68,8 +68,8 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
       icon={<PiCheckBold />}
       onClick={acceptSelected}
       colorScheme="invokeBlue"
-      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled}
-      isLoading={deleteQueueItemsByDestination.isLoading}
+      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled}
+      isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx

@@ -1,27 +1,19 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useDeleteQueueItemsByDestination } from 'features/queue/hooks/useDeleteQueueItemsByDestination';
+import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
   const ctx = useCanvasSessionContext();
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const deleteQueueItemsByDestination = useDeleteQueueItemsByDestination();
+  const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
 
   const discardAll = useCallback(() => {
-    deleteQueueItemsByDestination.trigger(ctx.session.id);
-    if (ctx.session.type === 'advanced') {
-      dispatch(canvasSessionReset());
-    } else {
-      // ctx.session.type === 'simple'
-      dispatch(generateSessionReset());
-    }
-  }, [deleteQueueItemsByDestination, ctx.session.id, ctx.session.type, dispatch]);
+    ctx.discardAll();
+    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
+  }, [cancelQueueItemsByDestination, ctx]);
 
   return (
     <IconButton
@@ -30,9 +22,8 @@ export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisa
       icon={<PiTrashSimpleBold />}
       onClick={discardAll}
       colorScheme="error"
-      fontSize={16}
-      isDisabled={isDisabled || deleteQueueItemsByDestination.isDisabled}
-      isLoading={deleteQueueItemsByDestination.isLoading}
+      isDisabled={isDisabled || cancelQueueItemsByDestination.isDisabled}
+      isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx

@@ -1,17 +1,14 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch } from 'app/store/storeHooks';
 import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useDeleteQueueItem } from 'features/queue/hooks/useDeleteQueueItem';
+import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const dispatch = useAppDispatch();
   const ctx = useCanvasSessionContext();
-  const deleteQueueItem = useDeleteQueueItem();
+  const cancelQueueItem = useCancelQueueItem();
   const selectedItemId = useStore(ctx.$selectedItemId);
 
   const { t } = useTranslation();
@@ -20,17 +17,9 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { i
     if (selectedItemId === null) {
       return;
     }
-    await deleteQueueItem.trigger(selectedItemId);
-    const itemCount = ctx.$itemCount.get();
-    if (itemCount <= 1) {
-      if (ctx.session.type === 'advanced') {
-        dispatch(canvasSessionReset());
-      } else {
-        // ctx.session.type === 'simple'
-        dispatch(generateSessionReset());
-      }
-    }
-  }, [selectedItemId, deleteQueueItem, ctx.$itemCount, ctx.session.type, dispatch]);
+    ctx.discard(selectedItemId);
+    await cancelQueueItem.trigger(selectedItemId, { withToast: false });
+  }, [selectedItemId, ctx, cancelQueueItem]);
 
   return (
     <IconButton
@@ -39,9 +28,8 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { i
       icon={<PiXBold />}
       onClick={discardSelected}
       colorScheme="invokeBlue"
-      fontSize={16}
-      isDisabled={selectedItemId === null || deleteQueueItem.isDisabled || isDisabled}
-      isLoading={deleteQueueItem.isLoading}
+      isDisabled={selectedItemId === null || cancelQueueItem.isDisabled || isDisabled}
+      isLoading={cancelQueueItem.isLoading}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenu.tsx

@@ -1,16 +1,13 @@
-import { IconButton, Menu, MenuButton, MenuDivider, MenuList } from '@invoke-ai/ui-library';
-import { StagingAreaToolbarMenuAutoSwitch } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch';
+import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
 import { StagingAreaToolbarNewLayerFromImageMenuItems } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage';
 import { memo } from 'react';
-import { PiDotsThreeBold } from 'react-icons/pi';
+import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarMenu = memo(() => {
   return (
     <Menu>
-      <MenuButton as={IconButton} icon={<PiDotsThreeBold />} colorScheme="invokeBlue" />
+      <MenuButton as={IconButton} icon={<PiDotsThreeVerticalBold />} colorScheme="invokeBlue" />
       <MenuList>
-        <StagingAreaToolbarMenuAutoSwitch />
-        <MenuDivider />
         <StagingAreaToolbarNewLayerFromImageMenuItems />
       </MenuList>
     </Menu>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch.tsx

@@ -1,34 +0,0 @@
-import { MenuItemOption, MenuOptionGroup } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { isAutoSwitchMode, useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { memo, useCallback } from 'react';
-import { assert } from 'tsafe';
-
-export const StagingAreaToolbarMenuAutoSwitch = memo(() => {
-  const ctx = useCanvasSessionContext();
-  const autoSwitch = useStore(ctx.$autoSwitch);
-
-  const onChange = useCallback(
-    (val: string | string[]) => {
-      assert(isAutoSwitchMode(val));
-      ctx.$autoSwitch.set(val);
-    },
-    [ctx.$autoSwitch]
-  );
-
-  return (
-    <MenuOptionGroup value={autoSwitch} onChange={onChange} title="Auto-Switch" type="radio">
-      <MenuItemOption value="off" closeOnSelect={false}>
-        Off
-      </MenuItemOption>
-      <MenuItemOption value="switch_on_start" closeOnSelect={false}>
-        Switch on Start
-      </MenuItemOption>
-      <MenuItemOption value="switch_on_finish" closeOnSelect={false}>
-        Switch on Finish
-      </MenuItemOption>
-    </MenuOptionGroup>
-  );
-});
-
-StagingAreaToolbarMenuAutoSwitch.displayName = 'StagingAreaToolbarMenuAutoSwitch';

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

@@ -1,38 +1,41 @@
 import type { PayloadAction, Selector } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
-import type { RgbaColor } from 'features/controlLayers/store/types';
+import { zRgbaColor } from 'features/controlLayers/store/types';
+import { z } from 'zod/v4';
 
-type CanvasSettingsState = {
+const zAutoSwitchMode = z.enum(['off', 'switch_on_start', 'switch_on_finish']);
+
+const zCanvasSettingsState = z.object({
   /**
    * Whether to show HUD (Heads-Up Display) on the canvas.
    */
-  showHUD: boolean;
+  showHUD: z.boolean().default(true),
   /**
    * Whether to clip lines and shapes to the generation bounding box. If disabled, lines and shapes will be clipped to
    * the canvas bounds.
    */
-  clipToBbox: boolean;
+  clipToBbox: z.boolean().default(false),
   /**
    * Whether to show a dynamic grid on the canvas. If disabled, a checkerboard pattern will be shown instead.
    */
-  dynamicGrid: boolean;
+  dynamicGrid: z.boolean().default(false),
   /**
    * Whether to invert the scroll direction when adjusting the brush or eraser width with the scroll wheel.
    */
-  invertScrollForToolWidth: boolean;
+  invertScrollForToolWidth: z.boolean().default(false),
   /**
    * The width of the brush tool.
    */
-  brushWidth: number;
+  brushWidth: z.int().gt(0).default(50),
   /**
    * The width of the eraser tool.
    */
-  eraserWidth: number;
+  eraserWidth: z.int().gt(0).default(50),
   /**
    * The color to use when drawing lines or filling shapes.
    */
-  color: RgbaColor;
+  color: zRgbaColor.default({ r: 31, g: 160, b: 224, a: 1 }), // invokeBlue.500
   /**
    * Whether to composite inpainted/outpainted regions back onto the source image when saving canvas generations.
    *
@@ -40,70 +43,61 @@ type CanvasSettingsState = {
    *
    * When `sendToCanvas` is disabled, this setting is ignored, masked regions will always be composited.
    */
-  outputOnlyMaskedRegions: boolean;
+  outputOnlyMaskedRegions: z.boolean().default(true),
   /**
    * Whether to automatically process the operations like filtering and auto-masking.
    */
-  autoProcess: boolean;
+  autoProcess: z.boolean().default(true),
   /**
    * The snap-to-grid setting for the canvas.
    */
-  snapToGrid: boolean;
+  snapToGrid: z.boolean().default(true),
   /**
    * Whether to show progress on the canvas when generating images.
    */
-  showProgressOnCanvas: boolean;
+  showProgressOnCanvas: z.boolean().default(true),
   /**
    * Whether to show the bounding box overlay on the canvas.
    */
-  bboxOverlay: boolean;
+  bboxOverlay: z.boolean().default(false),
   /**
    * Whether to preserve the masked region instead of inpainting it.
    */
-  preserveMask: boolean;
+  preserveMask: z.boolean().default(false),
   /**
    * Whether to show only raster layers while staging.
    */
-  isolatedStagingPreview: boolean;
+  isolatedStagingPreview: z.boolean().default(true),
   /**
    * Whether to show only the selected layer while filtering, transforming, or doing other operations.
    */
-  isolatedLayerPreview: boolean;
+  isolatedLayerPreview: z.boolean().default(true),
   /**
    * Whether to use pressure sensitivity for the brush and eraser tool when a pen device is used.
    */
-  pressureSensitivity: boolean;
+  pressureSensitivity: z.boolean().default(true),
   /**
    * Whether to show the rule of thirds composition guide overlay on the canvas.
    */
-  ruleOfThirds: boolean;
-};
+  ruleOfThirds: z.boolean().default(false),
+  /**
+   * Whether to save all staging images to the gallery instead of keeping them as intermediate images.
+   */
+  saveAllImagesToGallery: z.boolean().default(false),
+  /**
+   * The auto-switch mode for the canvas staging area.
+   */
+  stagingAreaAutoSwitch: zAutoSwitchMode.default('switch_on_start'),
+});
 
-const initialState: CanvasSettingsState = {
-  showHUD: true,
-  clipToBbox: false,
-  dynamicGrid: false,
-  brushWidth: 50,
-  eraserWidth: 50,
-  invertScrollForToolWidth: false,
-  color: { r: 31, g: 160, b: 224, a: 1 }, // invokeBlue.500
-  outputOnlyMaskedRegions: true,
-  autoProcess: true,
-  snapToGrid: true,
-  showProgressOnCanvas: true,
-  bboxOverlay: false,
-  preserveMask: false,
-  isolatedStagingPreview: true,
-  isolatedLayerPreview: true,
-  pressureSensitivity: true,
-  ruleOfThirds: false,
-};
+type CanvasSettingsState = z.infer<typeof zCanvasSettingsState>;
+const getInitialState = () => zCanvasSettingsState.parse({});
 
 export const canvasSettingsSlice = createSlice({
   name: 'canvasSettings',
-  initialState,
+  initialState: getInitialState(),
   reducers: {
-    settingsClipToBboxChanged: (state, action: PayloadAction<boolean>) => {
+    settingsClipToBboxChanged: (state, action: PayloadAction<CanvasSettingsState['clipToBbox']>) => {
       state.clipToBbox = action.payload;
     },
     settingsDynamicGridToggled: (state) => {
@@ -112,16 +106,19 @@ export const canvasSettingsSlice = createSlice({
     settingsShowHUDToggled: (state) => {
       state.showHUD = !state.showHUD;
     },
-    settingsBrushWidthChanged: (state, action: PayloadAction<number>) => {
+    settingsBrushWidthChanged: (state, action: PayloadAction<CanvasSettingsState['brushWidth']>) => {
       state.brushWidth = Math.round(action.payload);
     },
-    settingsEraserWidthChanged: (state, action: PayloadAction<number>) => {
+    settingsEraserWidthChanged: (state, action: PayloadAction<CanvasSettingsState['eraserWidth']>) => {
       state.eraserWidth = Math.round(action.payload);
     },
-    settingsColorChanged: (state, action: PayloadAction<RgbaColor>) => {
+    settingsColorChanged: (state, action: PayloadAction<CanvasSettingsState['color']>) => {
       state.color = action.payload;
     },
-    settingsInvertScrollForToolWidthChanged: (state, action: PayloadAction<boolean>) => {
+    settingsInvertScrollForToolWidthChanged: (
+      state,
+      action: PayloadAction<CanvasSettingsState['invertScrollForToolWidth']>
+    ) => {
       state.invertScrollForToolWidth = action.payload;
     },
     settingsOutputOnlyMaskedRegionsToggled: (state) => {
@@ -154,6 +151,15 @@ export const canvasSettingsSlice = createSlice({
     settingsRuleOfThirdsToggled: (state) => {
       state.ruleOfThirds = !state.ruleOfThirds;
     },
+    settingsSaveAllImagesToGalleryToggled: (state) => {
+      state.saveAllImagesToGallery = !state.saveAllImagesToGallery;
+    },
+    settingsStagingAreaAutoSwitchChanged: (
+      state,
+      action: PayloadAction<CanvasSettingsState['stagingAreaAutoSwitch']>
+    ) => {
+      state.stagingAreaAutoSwitch = action.payload;
+    },
   },
 });
 
@@ -175,6 +181,8 @@ export const {
   settingsIsolatedLayerPreviewToggled,
   settingsPressureSensitivityToggled,
   settingsRuleOfThirdsToggled,
+  settingsSaveAllImagesToGalleryToggled,
+  settingsStagingAreaAutoSwitchChanged,
 } = canvasSettingsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -184,7 +192,7 @@ const migrate = (state: any): any => {
 
 export const canvasSettingsPersistConfig: PersistConfig<CanvasSettingsState> = {
   name: canvasSettingsSlice.name,
-  initialState,
+  initialState: getInitialState(),
   migrate,
   persistDenylist: [],
 };
@@ -209,3 +217,5 @@ export const selectIsolatedStagingPreview = createCanvasSettingsSelector((settin
 export const selectIsolatedLayerPreview = createCanvasSettingsSelector((settings) => settings.isolatedLayerPreview);
 export const selectPressureSensitivity = createCanvasSettingsSelector((settings) => settings.pressureSensitivity);
 export const selectRuleOfThirds = createCanvasSettingsSelector((settings) => settings.ruleOfThirds);
+export const selectSaveAllImagesToGallery = createCanvasSettingsSelector((settings) => settings.saveAllImagesToGallery);
+export const selectStagingAreaAutoSwitch = createCanvasSettingsSelector((settings) => settings.stagingAreaAutoSwitch);

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

@@ -1,16 +1,20 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { EMPTY_ARRAY } from 'app/store/constants';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { canvasReset } from 'features/controlLayers/store/actions';
+import { queueApi } from 'services/api/endpoints/queue';
 
 type CanvasStagingAreaState = {
   generateSessionId: string | null;
   canvasSessionId: string | null;
+  canvasDiscardedQueueItems: number[];
 };
 
 const INITIAL_STATE: CanvasStagingAreaState = {
   generateSessionId: null,
   canvasSessionId: null,
+  canvasDiscardedQueueItems: [],
 };
 
 const getInitialState = (): CanvasStagingAreaState => deepClone(INITIAL_STATE);
@@ -26,12 +30,20 @@ export const canvasSessionSlice = createSlice({
     generateSessionReset: (state) => {
       state.generateSessionId = null;
     },
+    canvasQueueItemDiscarded: (state, action: PayloadAction<{ itemId: number }>) => {
+      const { itemId } = action.payload;
+      if (!state.canvasDiscardedQueueItems.includes(itemId)) {
+        state.canvasDiscardedQueueItems.push(itemId);
+      }
+    },
     canvasSessionIdChanged: (state, action: PayloadAction<{ id: string }>) => {
       const { id } = action.payload;
       state.canvasSessionId = id;
+      state.canvasDiscardedQueueItems = [];
     },
     canvasSessionReset: (state) => {
       state.canvasSessionId = null;
+      state.canvasDiscardedQueueItems = [];
     },
   },
   extraReducers(builder) {
@@ -41,8 +53,13 @@ export const canvasSessionSlice = createSlice({
   },
 });
 
-export const { generateSessionIdChanged, generateSessionReset, canvasSessionIdChanged, canvasSessionReset } =
-  canvasSessionSlice.actions;
+export const {
+  generateSessionIdChanged,
+  generateSessionReset,
+  canvasSessionIdChanged,
+  canvasSessionReset,
+  canvasQueueItemDiscarded,
+} = canvasSessionSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrate = (state: any): any => {
@@ -63,4 +80,34 @@ export const selectGenerateSessionId = createSelector(
   selectCanvasSessionSlice,
   ({ generateSessionId }) => generateSessionId
 );
-export const selectIsStaging = createSelector(selectCanvasSessionId, (canvasSessionId) => canvasSessionId !== null);
+export const buildSelectSessionQueueItems = (sessionId: string) =>
+  createSelector(
+    [queueApi.endpoints.listAllQueueItems.select({ destination: sessionId }), selectDiscardedItems],
+    ({ data }, discardedItems) => {
+      if (!data) {
+        return EMPTY_ARRAY;
+      }
+      return data.filter(
+        ({ status, item_id }) => status !== 'canceled' && status !== 'failed' && !discardedItems.includes(item_id)
+      );
+    }
+  );
+
+export const selectIsStaging = (state: RootState) => {
+  const sessionId = selectCanvasSessionId(state);
+  if (!sessionId) {
+    return false;
+  }
+  const { data } = queueApi.endpoints.listAllQueueItems.select({ destination: sessionId })(state);
+  if (!data) {
+    return false;
+  }
+  const discardedItems = selectDiscardedItems(state);
+  return data.some(
+    ({ status, item_id }) => status !== 'canceled' && status !== 'failed' && !discardedItems.includes(item_id)
+  );
+};
+const selectDiscardedItems = createSelector(
+  selectCanvasSessionSlice,
+  ({ canvasDiscardedQueueItems }) => canvasDiscardedQueueItems
+);

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

@@ -57,6 +57,8 @@ export const refImagesSlice = createSlice({
       const { entities, replace } = action.payload;
       if (replace) {
         state.entities = entities;
+        state.isPanelOpen = false;
+        state.selectedEntityId = null;
       } else {
         state.entities.push(...entities);
       }

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

@@ -98,7 +98,7 @@ const zRgbColor = z.object({
   b: z.number().int().min(0).max(255),
 });
 export type RgbColor = z.infer<typeof zRgbColor>;
-const zRgbaColor = zRgbColor.extend({
+export const zRgbaColor = zRgbColor.extend({
   a: z.number().min(0).max(1),
 });
 export type RgbaColor = z.infer<typeof zRgbaColor>;

invokeai/frontend/web/src/features/dnd/DndImage.tsx

@@ -15,7 +15,6 @@ const sx = {
   objectFit: 'contain',
   maxW: 'full',
   maxH: 'full',
-  borderRadius: 'base',
   cursor: 'grab',
   '&[data-is-dragging=true]': {
     opacity: 0.3,

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActions.tsx

@@ -1,25 +1,33 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
-import { useImageActions } from 'features/gallery/hooks/useImageActions';
+import { useRecallAll } from 'features/gallery/hooks/useRecallAll';
+import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions';
+import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
+import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
+import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiArrowBendUpLeftBold,
   PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
-  PiPaintBrushBold,
   PiPlantBold,
   PiQuotesBold,
+  PiRulerBold,
 } from 'react-icons/pi';
 
 export const ImageMenuItemMetadataRecallActions = memo(() => {
   const { t } = useTranslation();
-  const imageDTO = useImageDTOContext();
   const subMenu = useSubMenu();
 
-  const { recallAll, remix, recallSeed, recallPrompts, hasMetadata, hasSeed, hasPrompts, createAsPreset } =
-    useImageActions(imageDTO);
+  const imageDTO = useImageDTOContext();
+
+  const recallAll = useRecallAll(imageDTO);
+  const recallRemix = useRecallRemix(imageDTO);
+  const recallPrompts = useRecallPrompts(imageDTO);
+  const recallSeed = useRecallSeed(imageDTO);
+  const recallDimensions = useRecallDimensions(imageDTO);
 
   return (
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiArrowBendUpLeftBold />}>
@@ -28,20 +36,24 @@ export const ImageMenuItemMetadataRecallActions = memo(() => {
           <SubMenuButtonContent label={t('parameters.recallMetadata')} />
         </MenuButton>
         <MenuList {...subMenu.menuListProps}>
-          <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={remix} isDisabled={!hasMetadata}>
+          <MenuItem
+            icon={<PiArrowsCounterClockwiseBold />}
+            onClick={recallRemix.recall}
+            isDisabled={!recallRemix.isEnabled}
+          >
             {t('parameters.remixImage')}
           </MenuItem>
-          <MenuItem icon={<PiQuotesBold />} onClick={recallPrompts} isDisabled={!hasPrompts}>
+          <MenuItem icon={<PiQuotesBold />} onClick={recallPrompts.recall} isDisabled={!recallPrompts.isEnabled}>
             {t('parameters.usePrompt')}
           </MenuItem>
-          <MenuItem icon={<PiPlantBold />} onClick={recallSeed} isDisabled={!hasSeed}>
+          <MenuItem icon={<PiPlantBold />} onClick={recallSeed.recall} isDisabled={!recallSeed.isEnabled}>
             {t('parameters.useSeed')}
           </MenuItem>
-          <MenuItem icon={<PiAsteriskBold />} onClick={recallAll} isDisabled={!hasMetadata}>
+          <MenuItem icon={<PiAsteriskBold />} onClick={recallAll.recall} isDisabled={!recallAll.isEnabled}>
             {t('parameters.useAll')}
           </MenuItem>
-          <MenuItem icon={<PiPaintBrushBold />} onClick={createAsPreset} isDisabled={!hasPrompts}>
-            {t('stylePresets.useForTemplate')}
+          <MenuItem icon={<PiRulerBold />} onClick={recallDimensions.recall} isDisabled={!recallDimensions.isEnabled}>
+            {t('parameters.useSize')}
           </MenuItem>
         </MenuList>
       </Menu>

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemUseAsPromptTemplate.tsx

@@ -0,0 +1,20 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
+import { useCreateStylePresetFromMetadata } from 'features/gallery/hooks/useCreateStylePresetFromMetadata';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPaintBrushBold } from 'react-icons/pi';
+
+export const ImageMenuItemUseAsPromptTemplate = memo(() => {
+  const { t } = useTranslation();
+  const imageDTO = useImageDTOContext();
+  const stylePreset = useCreateStylePresetFromMetadata(imageDTO);
+
+  return (
+    <MenuItem icon={<PiPaintBrushBold />} onClickCapture={stylePreset.create} isDisabled={!stylePreset.isEnabled}>
+      {t('stylePresets.useForTemplate')}
+    </MenuItem>
+  );
+});
+
+ImageMenuItemUseAsPromptTemplate.displayName = 'ImageMenuItemUseAsPromptTemplate';

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -1,4 +1,5 @@
 import { MenuDivider } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
 import { IconMenuItemGroup } from 'common/components/IconMenuItem';
 import { ImageMenuItemChangeBoard } from 'features/gallery/components/ImageContextMenu/ImageMenuItemChangeBoard';
 import { ImageMenuItemCopy } from 'features/gallery/components/ImageContextMenu/ImageMenuItemCopy';
@@ -16,14 +17,19 @@ import { ImageMenuItemStarUnstar } from 'features/gallery/components/ImageContex
 import { ImageMenuItemUseAsRefImage } from 'features/gallery/components/ImageContextMenu/ImageMenuItemUseAsRefImage';
 import { ImageMenuItemUseForPromptGeneration } from 'features/gallery/components/ImageContextMenu/ImageMenuItemUseForPromptGeneration';
 import { ImageDTOContextProvider } from 'features/gallery/contexts/ImageDTOContext';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
+import { ImageMenuItemUseAsPromptTemplate } from './ImageMenuItemUseAsPromptTemplate';
+
 type SingleSelectionMenuItemsProps = {
   imageDTO: ImageDTO;
 };
 
 const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) => {
+  const tab = useAppSelector(selectActiveTab);
+
   return (
     <ImageDTOContextProvider value={imageDTO}>
       <IconMenuItemGroup>
@@ -36,13 +42,14 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       </IconMenuItemGroup>
       <MenuDivider />
       <ImageMenuItemLoadWorkflow />
-      <ImageMenuItemMetadataRecallActions />
+      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemMetadataRecallActions />}
       <MenuDivider />
       <ImageMenuItemSendToUpscale />
       <ImageMenuItemUseForPromptGeneration />
-      <ImageMenuItemUseAsRefImage />
+      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemUseAsRefImage />}
+      <ImageMenuItemUseAsPromptTemplate />
       <ImageMenuItemNewCanvasFromImageSubMenu />
-      <ImageMenuItemNewLayerFromImageSubMenu />
+      {tab === 'canvas' && <ImageMenuItemNewLayerFromImageSubMenu />}
       <MenuDivider />
       <ImageMenuItemChangeBoard />
       <ImageMenuItemStarUnstar />

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx

@@ -85,7 +85,7 @@ const UnrecallableMetadataParsed = typedMemo(
 
     return (
       <Box as="span" lineHeight={1}>
-        <LabelComponent />
+        <LabelComponent i18nKey={handler.i18nKey} />
         <ValueComponent value={data.value} />
       </Box>
     );
@@ -128,7 +128,7 @@ const SingleMetadataParsed = typedMemo(
           onClick={onClick}
         />
         <Box as="span" lineHeight={1}>
-          <LabelComponent />
+          <LabelComponent i18nKey={handler.i18nKey} />
           <ValueComponent value={data.value} />
         </Box>
       </Flex>
@@ -178,7 +178,7 @@ const CollectionMetadataParsed = typedMemo(
           onClick={onClick}
         />
         <Box as="span" lineHeight={1}>
-          <LabelComponent />
+          <LabelComponent i18nKey={handler.i18nKey} />
           <ValueComponent value={value} />
         </Box>
       </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx

@@ -1,21 +1,19 @@
 import { Button, Divider, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useAppSelector } from 'app/store/storeHooks';
 import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton';
 import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
-import { useImageActions } from 'features/gallery/hooks/useImageActions';
-import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
-import { newCanvasFromImage } from 'features/imageActions/actions';
-import { $hasTemplates } from 'features/nodes/store/nodesSlice';
+import { useDeleteImage } from 'features/gallery/hooks/useDeleteImage';
+import { useEditImage } from 'features/gallery/hooks/useEditImage';
+import { useLoadWorkflow } from 'features/gallery/hooks/useLoadWorkflow';
+import { useRecallAll } from 'features/gallery/hooks/useRecallAll';
+import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions';
+import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
+import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
+import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
 import { PostProcessingPopover } from 'features/parameters/components/PostProcessing/PostProcessingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { toast } from 'features/toast/toast';
-import { navigationApi } from 'features/ui/layouts/navigation-api';
-import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
-import { selectShouldShowProgressInViewer } from 'features/ui/store/uiSelectors';
-import { memo, useCallback } from 'react';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiArrowsCounterClockwiseBold,
@@ -27,51 +25,23 @@ import {
   PiQuotesBold,
   PiRulerBold,
 } from 'react-icons/pi';
-import { useImageDTO } from 'services/api/endpoints/images';
+import type { ImageDTO } from 'services/api/types';
 
-import { useImageViewerContext } from './context';
-
-export const CurrentImageButtons = memo(() => {
+export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const { t } = useTranslation();
-  const ctx = useImageViewerContext();
-  const hasProgressImage = useStore(ctx.$hasProgressImage);
-  const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer);
-  const isDisabledOverride = hasProgressImage && shouldShowProgressInViewer;
+  const tab = useAppSelector(selectActiveTab);
+  const isCanvasOrGenerateTab = tab === 'canvas' || tab === 'generate';
 
-  const imageName = useAppSelector(selectLastSelectedImage);
-  const imageDTO = useImageDTO(imageName);
-  const hasTemplates = useStore($hasTemplates);
-  const imageActions = useImageActions(imageDTO);
-  const isStaging = useAppSelector(selectIsStaging);
   const isUpscalingEnabled = useFeatureStatus('upscaling');
-  const { getState, dispatch } = useAppStore();
-  const canvasManager = useCanvasManagerSafe();
 
-  const handleEdit = useCallback(async () => {
-    if (!imageDTO) {
-      return;
-    }
-
-    await newCanvasFromImage({
-      imageDTO,
-      type: 'raster_layer',
-      withInpaintMask: true,
-      getState,
-      dispatch,
-    });
-    navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
-
-    // Automatically select the brush tool when editing an image
-    if (canvasManager) {
-      canvasManager.tool.$tool.set('brush');
-    }
-
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [imageDTO, getState, dispatch, t, canvasManager]);
+  const recallAll = useRecallAll(imageDTO);
+  const recallRemix = useRecallRemix(imageDTO);
+  const recallPrompts = useRecallPrompts(imageDTO);
+  const recallSeed = useRecallSeed(imageDTO);
+  const recallDimensions = useRecallDimensions(imageDTO);
+  const loadWorkflow = useLoadWorkflow(imageDTO);
+  const editImage = useEditImage(imageDTO);
+  const deleteImage = useDeleteImage(imageDTO);
 
   return (
     <>
@@ -80,7 +50,7 @@ export const CurrentImageButtons = memo(() => {
           as={IconButton}
           aria-label={t('parameters.imageActions')}
           tooltip={t('parameters.imageActions')}
-          isDisabled={isDisabledOverride || !imageDTO}
+          isDisabled={!imageDTO}
           variant="link"
           alignSelf="stretch"
           icon={<PiDotsThreeOutlineFill />}
@@ -92,8 +62,8 @@ export const CurrentImageButtons = memo(() => {
 
       <Button
         leftIcon={<PiPencilBold />}
-        onClick={handleEdit}
-        isDisabled={isDisabledOverride || !imageDTO}
+        onClick={editImage.edit}
+        isDisabled={!editImage.isEnabled}
         variant="link"
         size="sm"
         alignSelf="stretch"
@@ -108,62 +78,72 @@ export const CurrentImageButtons = memo(() => {
         icon={<PiFlowArrowBold />}
         tooltip={`${t('nodes.loadWorkflow')} (W)`}
         aria-label={`${t('nodes.loadWorkflow')} (W)`}
-        isDisabled={isDisabledOverride || !imageDTO || !imageActions.hasWorkflow || !hasTemplates}
+        isDisabled={!loadWorkflow.isEnabled}
         variant="link"
         alignSelf="stretch"
-        onClick={imageActions.loadWorkflow}
-      />
-      <IconButton
-        icon={<PiArrowsCounterClockwiseBold />}
-        tooltip={`${t('parameters.remixImage')} (R)`}
-        aria-label={`${t('parameters.remixImage')} (R)`}
-        isDisabled={isDisabledOverride || !imageDTO || !imageActions.hasMetadata}
-        variant="link"
-        alignSelf="stretch"
-        onClick={imageActions.remix}
-      />
-      <IconButton
-        icon={<PiQuotesBold />}
-        tooltip={`${t('parameters.usePrompt')} (P)`}
-        aria-label={`${t('parameters.usePrompt')} (P)`}
-        isDisabled={isDisabledOverride || !imageDTO || !imageActions.hasPrompts}
-        variant="link"
-        alignSelf="stretch"
-        onClick={imageActions.recallPrompts}
-      />
-      <IconButton
-        icon={<PiPlantBold />}
-        tooltip={`${t('parameters.useSeed')} (S)`}
-        aria-label={`${t('parameters.useSeed')} (S)`}
-        isDisabled={isDisabledOverride || !imageDTO || !imageActions.hasSeed}
-        variant="link"
-        alignSelf="stretch"
-        onClick={imageActions.recallSeed}
-      />
-      <IconButton
-        icon={<PiRulerBold />}
-        tooltip={`${t('parameters.useSize')} (D)`}
-        aria-label={`${t('parameters.useSize')} (D)`}
-        variant="link"
-        alignSelf="stretch"
-        onClick={imageActions.recallSize}
-        isDisabled={isDisabledOverride || !imageDTO || isStaging}
-      />
-      <IconButton
-        icon={<PiAsteriskBold />}
-        tooltip={`${t('parameters.useAll')} (A)`}
-        aria-label={`${t('parameters.useAll')} (A)`}
-        isDisabled={isDisabledOverride || !imageDTO || !imageActions.hasMetadata}
-        variant="link"
-        alignSelf="stretch"
-        onClick={imageActions.recallAll}
+        onClick={loadWorkflow.load}
       />
+      {isCanvasOrGenerateTab && (
+        <IconButton
+          icon={<PiArrowsCounterClockwiseBold />}
+          tooltip={`${t('parameters.remixImage')} (R)`}
+          aria-label={`${t('parameters.remixImage')} (R)`}
+          isDisabled={!recallRemix.isEnabled}
+          variant="link"
+          alignSelf="stretch"
+          onClick={recallRemix.recall}
+        />
+      )}
+      {isCanvasOrGenerateTab && (
+        <IconButton
+          icon={<PiQuotesBold />}
+          tooltip={`${t('parameters.usePrompt')} (P)`}
+          aria-label={`${t('parameters.usePrompt')} (P)`}
+          isDisabled={!recallPrompts.isEnabled}
+          variant="link"
+          alignSelf="stretch"
+          onClick={recallPrompts.recall}
+        />
+      )}
+      {isCanvasOrGenerateTab && (
+        <IconButton
+          icon={<PiPlantBold />}
+          tooltip={`${t('parameters.useSeed')} (S)`}
+          aria-label={`${t('parameters.useSeed')} (S)`}
+          isDisabled={!recallSeed.isEnabled}
+          variant="link"
+          alignSelf="stretch"
+          onClick={recallSeed.recall}
+        />
+      )}
+      {isCanvasOrGenerateTab && (
+        <IconButton
+          icon={<PiRulerBold />}
+          tooltip={`${t('parameters.useSize')} (D)`}
+          aria-label={`${t('parameters.useSize')} (D)`}
+          variant="link"
+          alignSelf="stretch"
+          onClick={recallDimensions.recall}
+          isDisabled={!recallDimensions.isEnabled}
+        />
+      )}
+      {isCanvasOrGenerateTab && (
+        <IconButton
+          icon={<PiAsteriskBold />}
+          tooltip={`${t('parameters.useAll')} (A)`}
+          aria-label={`${t('parameters.useAll')} (A)`}
+          isDisabled={!recallAll.isEnabled}
+          variant="link"
+          alignSelf="stretch"
+          onClick={recallAll.recall}
+        />
+      )}
 
-      {isUpscalingEnabled && <PostProcessingPopover imageDTO={imageDTO} isDisabled={isDisabledOverride} />}
+      {isUpscalingEnabled && <PostProcessingPopover imageDTO={imageDTO} isDisabled={false} />}
 
       <Divider orientation="vertical" h={8} mx={2} />
 
-      <DeleteImageButton onClick={imageActions.delete} isDisabled={isDisabledOverride || !imageDTO} />
+      <DeleteImageButton onClick={deleteImage.delete} isDisabled={!deleteImage.isEnabled} />
     </>
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx

@@ -50,7 +50,7 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
     >
       {imageDTO && (
         <Flex w="full" h="full" position="absolute" alignItems="center" justifyContent="center">
-          <DndImage imageDTO={imageDTO} onLoad={onLoadImage} />
+          <DndImage imageDTO={imageDTO} onLoad={onLoadImage} borderRadius="base" />
         </Flex>
       )}
       {!imageDTO && <NoContentForViewer />}

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx

@@ -1,18 +1,24 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
 import { ToggleMetadataViewerButton } from 'features/gallery/components/ImageViewer/ToggleMetadataViewerButton';
+import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { memo } from 'react';
+import { useImageDTO } from 'services/api/endpoints/images';
 
 import { CurrentImageButtons } from './CurrentImageButtons';
 import { ToggleProgressButton } from './ToggleProgressButton';
 
 export const ViewerToolbar = memo(() => {
+  const imageName = useAppSelector(selectLastSelectedImage);
+  const imageDTO = useImageDTO(imageName);
+
   return (
     <Flex w="full" justifyContent="center" h={8}>
       <ToggleProgressButton />
       <Spacer />
-      <CurrentImageButtons />
+      {imageDTO && <CurrentImageButtons imageDTO={imageDTO} />}
       <Spacer />
-      <ToggleMetadataViewerButton />
+      {imageDTO && <ToggleMetadataViewerButton />}
     </Flex>
   );
 });

invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, forwardRef, Grid, GridItem, Spinner, Text } from '@invoke-ai
 import { createSelector } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { getFocusedRegion } from 'common/hooks/focus';
 import { useRangeBasedImageFetching } from 'features/gallery/hooks/useRangeBasedImageFetching';
 import type { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import {
@@ -221,6 +222,10 @@ const useKeyboardNavigation = (
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
+      if (getFocusedRegion() !== 'gallery') {
+        // Only handle keyboard navigation when the gallery is focused
+        return;
+      }
       // Only handle arrow keys
       if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
         return;
@@ -477,11 +482,6 @@ export const NewGallery = memo(() => {
 
   const context = useMemo<GridContext>(() => ({ imageNames, queryArgs }), [imageNames, queryArgs]);
 
-  // Item content function
-  const itemContent: GridItemContent<string, GridContext> = useCallback((index, imageName) => {
-    return <ImageAtPosition index={index} imageName={imageName} />;
-  }, []);
-
   if (isLoading) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center" gap={4}>
@@ -506,7 +506,7 @@ export const NewGallery = memo(() => {
         ref={virtuosoRef}
         context={context}
         data={imageNames}
-        increaseViewportBy={2048}
+        increaseViewportBy={4096}
         itemContent={itemContent}
         computeItemKey={computeItemKey}
         components={components}
@@ -523,8 +523,12 @@ export const NewGallery = memo(() => {
 NewGallery.displayName = 'NewGallery';
 
 const scrollSeekConfiguration: ScrollSeekConfiguration = {
-  enter: (velocity) => velocity > 4096,
-  exit: (velocity) => velocity === 0,
+  enter: (velocity) => {
+    return Math.abs(velocity) > 2048;
+  },
+  exit: (velocity) => {
+    return velocity === 0;
+  },
 };
 
 // Styles
@@ -544,6 +548,10 @@ const ListComponent: GridComponents<GridContext>['List'] = forwardRef(({ context
 });
 ListComponent.displayName = 'ListComponent';
 
+const itemContent: GridItemContent<string, GridContext> = (index, imageName) => {
+  return <ImageAtPosition index={index} imageName={imageName} />;
+};
+
 const ItemComponent: GridComponents<GridContext>['Item'] = forwardRef(({ context: _, ...rest }, ref) => (
   <GridItem ref={ref} aspectRatio="1/1" {...rest} />
 ));

invokeai/frontend/web/src/features/gallery/hooks/useClearStylePresetWithToast.ts

@@ -0,0 +1,26 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import {
+  activeStylePresetIdChanged,
+  selectStylePresetActivePresetId,
+} from 'features/stylePresets/store/stylePresetSlice';
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useClearStylePresetWithToast = () => {
+  const store = useAppStore();
+  const { t } = useTranslation();
+  const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
+
+  const clearStylePreset = useCallback(() => {
+    if (activeStylePresetId) {
+      store.dispatch(activeStylePresetIdChanged(null));
+      toast({
+        status: 'info',
+        title: t('stylePresets.promptTemplateCleared'),
+      });
+    }
+  }, [activeStylePresetId, store, t]);
+
+  return clearStylePreset;
+};

invokeai/frontend/web/src/features/gallery/hooks/useCreateStylePresetFromMetadata.ts

@@ -0,0 +1,81 @@
+import { useAppStore } from 'app/store/storeHooks';
+import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
+import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
+import type { ImageDTO } from 'services/api/types';
+
+export const useCreateStylePresetFromMetadata = (imageDTO?: ImageDTO | null) => {
+  const store = useAppStore();
+  const [hasPrompts, setHasPrompts] = useState(false);
+
+  const { metadata } = useDebouncedMetadata(imageDTO?.image_name);
+
+  useEffect(() => {
+    MetadataUtils.hasMetadataByHandlers({
+      handlers: [MetadataHandlers.PositivePrompt, MetadataHandlers.NegativePrompt],
+      metadata,
+      store,
+      require: 'some',
+    })
+      .then((result) => {
+        setHasPrompts(result);
+      })
+      .catch(() => {
+        setHasPrompts(false);
+      });
+  }, [metadata, store]);
+
+  const isEnabled = useMemo(() => {
+    if (!imageDTO) {
+      return false;
+    }
+    if (!hasPrompts) {
+      return false;
+    }
+    return true;
+  }, [hasPrompts, imageDTO]);
+
+  const create = useCallback(async () => {
+    if (!imageDTO) {
+      return;
+    }
+    if (!metadata) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+
+    let positivePrompt: string;
+    let negativePrompt: string;
+
+    try {
+      positivePrompt = await MetadataHandlers.PositivePrompt.parse(metadata, store);
+    } catch (error) {
+      positivePrompt = '';
+    }
+    try {
+      negativePrompt = (await MetadataHandlers.NegativePrompt.parse(metadata, store)) ?? '';
+    } catch (error) {
+      negativePrompt = '';
+    }
+
+    $stylePresetModalState.set({
+      prefilledFormData: {
+        name: '',
+        positivePrompt,
+        negativePrompt,
+        imageUrl: imageDTO.image_url,
+        type: 'user',
+      },
+      updatingStylePresetId: null,
+      isModalOpen: true,
+    });
+  }, [imageDTO, isEnabled, metadata, store]);
+
+  return {
+    create,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useDeleteImage.ts

@@ -0,0 +1,28 @@
+import { useDeleteImageModalApi } from 'features/deleteImageModal/store/state';
+import { useCallback, useMemo } from 'react';
+import type { ImageDTO } from 'services/api/types';
+
+export const useDeleteImage = (imageDTO?: ImageDTO | null) => {
+  const deleteImageModal = useDeleteImageModalApi();
+
+  const isEnabled = useMemo(() => {
+    if (!imageDTO) {
+      return;
+    }
+    return true;
+  }, [imageDTO]);
+  const _delete = useCallback(() => {
+    if (!imageDTO) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+    deleteImageModal.delete([imageDTO.image_name]);
+  }, [deleteImageModal, imageDTO, isEnabled]);
+
+  return {
+    delete: _delete,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useEditImage.ts

@@ -0,0 +1,57 @@
+import { useAppStore } from 'app/store/storeHooks';
+import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { newCanvasFromImage } from 'features/imageActions/actions';
+import { toast } from 'features/toast/toast';
+import { navigationApi } from 'features/ui/layouts/navigation-api';
+import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ImageDTO } from 'services/api/types';
+
+export const useEditImage = (imageDTO?: ImageDTO | null) => {
+  const { t } = useTranslation();
+
+  const { getState, dispatch } = useAppStore();
+  const canvasManager = useCanvasManagerSafe();
+
+  const isEnabled = useMemo(() => {
+    if (!imageDTO) {
+      return false;
+    }
+    return true;
+  }, [imageDTO]);
+
+  const edit = useCallback(async () => {
+    if (!imageDTO) {
+      return;
+    }
+
+    if (!isEnabled) {
+      return;
+    }
+
+    await newCanvasFromImage({
+      imageDTO,
+      type: 'raster_layer',
+      withInpaintMask: true,
+      getState,
+      dispatch,
+    });
+    navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
+
+    if (canvasManager) {
+      canvasManager.tool.$tool.set('brush');
+    }
+
+    toast({
+      id: 'SENT_TO_CANVAS',
+      title: t('toast.sentToCanvas'),
+      status: 'success',
+    });
+  }, [imageDTO, isEnabled, getState, dispatch, canvasManager, t]);
+
+  return {
+    edit,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts

@@ -1,209 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { adHocPostProcessingRequested } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
-import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useDeleteImageModalApi } from 'features/deleteImageModal/store/state';
-import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
-import { $hasTemplates } from 'features/nodes/store/nodesSlice';
-import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
-import {
-  activeStylePresetIdChanged,
-  selectStylePresetActivePresetId,
-} from 'features/stylePresets/store/stylePresetSlice';
-import { toast } from 'features/toast/toast';
-import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
-import type { ImageDTO } from 'services/api/types';
-
-export const useImageActions = (imageDTO: ImageDTO | null) => {
-  const store = useAppStore();
-  const { t } = useTranslation();
-  const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
-  const isStaging = useAppSelector(selectIsStaging);
-  const { metadata } = useDebouncedMetadata(imageDTO?.image_name ?? null);
-  const [hasMetadata, setHasMetadata] = useState(false);
-  const [hasSeed, setHasSeed] = useState(false);
-  const [hasPrompts, setHasPrompts] = useState(false);
-  const hasTemplates = useStore($hasTemplates);
-  const deleteImageModal = useDeleteImageModalApi();
-
-  useEffect(() => {
-    const parseMetadata = async () => {
-      if (metadata) {
-        setHasMetadata(true);
-        try {
-          await MetadataHandlers.Seed.parse(metadata, store);
-          setHasSeed(true);
-        } catch {
-          setHasSeed(false);
-        }
-
-        let hasPrompt = false;
-        // Need to catch all of these to avoid unhandled promise rejections bubbling up to instrumented error handlers
-        for (const handler of [
-          MetadataHandlers.PositivePrompt,
-          MetadataHandlers.NegativePrompt,
-          MetadataHandlers.PositiveStylePrompt,
-          MetadataHandlers.NegativeStylePrompt,
-        ]) {
-          try {
-            await handler.parse(metadata, store);
-            hasPrompt = true;
-            break;
-          } catch {
-            // noop
-          }
-        }
-        setHasPrompts(hasPrompt);
-      } else {
-        setHasMetadata(false);
-        setHasSeed(false);
-        setHasPrompts(false);
-      }
-    };
-    parseMetadata();
-  }, [metadata, store]);
-
-  const clearStylePreset = useCallback(() => {
-    if (activeStylePresetId) {
-      store.dispatch(activeStylePresetIdChanged(null));
-      toast({
-        status: 'info',
-        title: t('stylePresets.promptTemplateCleared'),
-      });
-    }
-  }, [activeStylePresetId, store, t]);
-
-  const recallAll = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!metadata) {
-      return;
-    }
-    MetadataUtils.recallAll(metadata, store, isStaging ? [MetadataHandlers.Width, MetadataHandlers.Height] : []);
-    clearStylePreset();
-  }, [imageDTO, metadata, store, isStaging, clearStylePreset]);
-
-  const remix = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!metadata) {
-      return;
-    }
-    // Recalls all metadata parameters except seed
-    MetadataUtils.recallAll(metadata, store, [MetadataHandlers.Seed]);
-    clearStylePreset();
-  }, [imageDTO, metadata, store, clearStylePreset]);
-
-  const recallSeed = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!metadata) {
-      return;
-    }
-    MetadataUtils.recallByHandler({ metadata, store, handler: MetadataHandlers.Seed });
-  }, [imageDTO, metadata, store]);
-
-  const recallPrompts = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!metadata) {
-      return;
-    }
-    MetadataUtils.recallPrompts(metadata, store);
-    clearStylePreset();
-  }, [imageDTO, metadata, store, clearStylePreset]);
-
-  const createAsPreset = useCallback(async () => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!metadata) {
-      return;
-    }
-    let positivePrompt: string;
-    let negativePrompt: string;
-
-    try {
-      positivePrompt = await MetadataHandlers.PositivePrompt.parse(metadata, store);
-    } catch (error) {
-      positivePrompt = '';
-    }
-    try {
-      negativePrompt = (await MetadataHandlers.NegativePrompt.parse(metadata, store)) ?? '';
-    } catch (error) {
-      negativePrompt = '';
-    }
-
-    $stylePresetModalState.set({
-      prefilledFormData: {
-        name: '',
-        positivePrompt,
-        negativePrompt,
-        imageUrl: imageDTO.image_url,
-        type: 'user',
-      },
-      updatingStylePresetId: null,
-      isModalOpen: true,
-    });
-  }, [imageDTO, metadata, store]);
-
-  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
-
-  const loadWorkflowFromImage = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (!imageDTO.has_workflow || !hasTemplates) {
-      return;
-    }
-
-    loadWorkflowWithDialog({ type: 'image', data: imageDTO.image_name });
-  }, [hasTemplates, imageDTO, loadWorkflowWithDialog]);
-
-  const recallSize = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    if (isStaging) {
-      return;
-    }
-    MetadataUtils.recallDimensions(imageDTO, store);
-  }, [imageDTO, isStaging, store]);
-
-  const upscale = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    store.dispatch(adHocPostProcessingRequested({ imageDTO }));
-  }, [imageDTO, store]);
-
-  const _delete = useCallback(() => {
-    if (!imageDTO) {
-      return;
-    }
-    deleteImageModal.delete([imageDTO.image_name]);
-  }, [deleteImageModal, imageDTO]);
-
-  return {
-    hasMetadata,
-    hasSeed,
-    hasPrompts,
-    recallAll,
-    remix,
-    recallSeed,
-    recallPrompts,
-    createAsPreset,
-    loadWorkflow: loadWorkflowFromImage,
-    hasWorkflow: imageDTO?.has_workflow ?? false,
-    recallSize,
-    upscale,
-    delete: _delete,
-  };
-};

invokeai/frontend/web/src/features/gallery/hooks/useLoadWorkflow.ts

@@ -0,0 +1,34 @@
+import { useStore } from '@nanostores/react';
+import { $hasTemplates } from 'features/nodes/store/nodesSlice';
+import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import { useCallback, useMemo } from 'react';
+import type { ImageDTO } from 'services/api/types';
+
+export const useLoadWorkflow = (imageDTO: ImageDTO) => {
+  const hasTemplates = useStore($hasTemplates);
+
+  const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
+
+  const isEnabled = useMemo(() => {
+    if (!imageDTO.has_workflow) {
+      return false;
+    }
+    if (!hasTemplates) {
+      return false;
+    }
+    return true;
+  }, [hasTemplates, imageDTO]);
+
+  const load = useCallback(() => {
+    if (!imageDTO) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+
+    loadWorkflowWithDialog({ type: 'image', data: imageDTO.image_name });
+  }, [imageDTO, isEnabled, loadWorkflowWithDialog]);
+
+  return { load, isEnabled };
+};

invokeai/frontend/web/src/features/gallery/hooks/useRangeBasedImageFetching.ts

@@ -1,5 +1,5 @@
 import { useAppStore } from 'app/store/storeHooks';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { ListRange } from 'react-virtuoso';
 import { imagesApi, useGetImageDTOsByNamesMutation } from 'services/api/endpoints/images';
 import { useThrottledCallback } from 'use-debounce';
@@ -13,33 +13,20 @@ interface UseRangeBasedImageFetchingReturn {
   onRangeChanged: (range: ListRange) => void;
 }
 
-const getUncachedNames = (imageNames: string[], cachedImageNames: string[], range: ListRange): string[] => {
-  if (range.startIndex === range.endIndex) {
-    // If the start and end indices are the same, no range to fetch
-    return [];
-  }
+const getUncachedNames = (imageNames: string[], cachedImageNames: string[], ranges: ListRange[]): string[] => {
+  const uncachedNamesSet = new Set<string>();
+  const cachedImageNamesSet = new Set(cachedImageNames);
 
-  if (imageNames.length === 0) {
-    return [];
-  }
-
-  const start = Math.max(0, range.startIndex);
-  const end = Math.min(imageNames.length - 1, range.endIndex);
-
-  if (cachedImageNames.length === 0) {
-    return imageNames.slice(start, end + 1);
-  }
-
-  const uncachedNames: string[] = [];
-
-  for (let i = start; i <= end; i++) {
-    const imageName = imageNames[i]!;
-    if (!cachedImageNames.includes(imageName)) {
-      uncachedNames.push(imageName);
+  for (const range of ranges) {
+    for (let i = range.startIndex; i <= range.endIndex; i++) {
+      const n = imageNames[i]!;
+      if (n && !cachedImageNamesSet.has(n)) {
+        uncachedNamesSet.add(n);
+      }
     }
   }
 
-  return uncachedNames;
+  return Array.from(uncachedNamesSet);
 };
 
 /**
@@ -53,30 +40,36 @@ export const useRangeBasedImageFetching = ({
 }: UseRangeBasedImageFetchingArgs): UseRangeBasedImageFetchingReturn => {
   const store = useAppStore();
   const [getImageDTOsByNames] = useGetImageDTOsByNamesMutation();
+  const [lastRange, setLastRange] = useState<ListRange | null>(null);
+  const [pendingRanges, setPendingRanges] = useState<ListRange[]>([]);
 
   const fetchImages = useCallback(
-    (visibleRange: ListRange) => {
+    (ranges: ListRange[], imageNames: string[]) => {
       if (!enabled) {
         return;
       }
       const cachedImageNames = imagesApi.util.selectCachedArgsForQuery(store.getState(), 'getImageDTO');
-      const uncachedNames = getUncachedNames(imageNames, cachedImageNames, visibleRange);
+      const uncachedNames = getUncachedNames(imageNames, cachedImageNames, ranges);
       if (uncachedNames.length === 0) {
         return;
       }
       getImageDTOsByNames({ image_names: uncachedNames });
+      setPendingRanges([]);
     },
-    [enabled, getImageDTOsByNames, imageNames, store]
+    [enabled, getImageDTOsByNames, store]
   );
 
-  const throttledFetchImages = useThrottledCallback(fetchImages, 100);
+  const throttledFetchImages = useThrottledCallback(fetchImages, 500);
 
-  const onRangeChanged = useCallback(
-    (range: ListRange) => {
-      throttledFetchImages(range);
-    },
-    [throttledFetchImages]
-  );
+  const onRangeChanged = useCallback((range: ListRange) => {
+    setLastRange(range);
+    setPendingRanges((prev) => [...prev, range]);
+  }, []);
+
+  useEffect(() => {
+    const combinedRanges = lastRange ? [...pendingRanges, lastRange] : pendingRanges;
+    throttledFetchImages(combinedRanges, imageNames);
+  }, [imageNames, lastRange, pendingRanges, throttledFetchImages]);
 
   return {
     onRangeChanged,

invokeai/frontend/web/src/features/gallery/hooks/useRecallAll.ts

@@ -0,0 +1,57 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useCallback, useMemo } from 'react';
+import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
+import type { ImageDTO } from 'services/api/types';
+
+import { useClearStylePresetWithToast } from './useClearStylePresetWithToast';
+
+export const useRecallAll = (imageDTO: ImageDTO) => {
+  const store = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
+  const isStaging = useAppSelector(selectIsStaging);
+  const clearStylePreset = useClearStylePresetWithToast();
+
+  const isEnabled = useMemo(() => {
+    if (isLoading) {
+      return false;
+    }
+
+    if (tab !== 'canvas' && tab !== 'generate') {
+      return false;
+    }
+
+    if (!metadata) {
+      return false;
+    }
+
+    return true;
+  }, [isLoading, metadata, tab]);
+
+  const handlersToSkip = useMemo(() => {
+    if (tab === 'canvas' && isStaging) {
+      // When we are staging and on canvas, the bbox is locked - we cannot recall width and height
+      return [MetadataHandlers.Width, MetadataHandlers.Height];
+    }
+    return undefined;
+  }, [isStaging, tab]);
+
+  const recall = useCallback(() => {
+    if (!metadata) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+    MetadataUtils.recallAll(metadata, store, handlersToSkip);
+    clearStylePreset();
+  }, [metadata, isEnabled, store, handlersToSkip, clearStylePreset]);
+
+  return {
+    recall,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useRecallDimensions.ts

@@ -0,0 +1,36 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { MetadataUtils } from 'features/metadata/parsing';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useCallback, useMemo } from 'react';
+import type { ImageDTO } from 'services/api/types';
+
+export const useRecallDimensions = (imageDTO: ImageDTO) => {
+  const store = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const isStaging = useAppSelector(selectIsStaging);
+
+  const isEnabled = useMemo(() => {
+    if (tab !== 'canvas' && tab !== 'generate') {
+      return false;
+    }
+
+    if (tab === 'canvas' && isStaging) {
+      return false;
+    }
+
+    return true;
+  }, [isStaging, tab]);
+
+  const recall = useCallback(() => {
+    if (!isEnabled) {
+      return;
+    }
+    MetadataUtils.recallDimensions(imageDTO, store);
+  }, [isEnabled, imageDTO, store]);
+
+  return {
+    recall,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useRecallPrompts.ts

@@ -0,0 +1,72 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
+import type { ImageDTO } from 'services/api/types';
+
+import { useClearStylePresetWithToast } from './useClearStylePresetWithToast';
+
+export const useRecallPrompts = (imageDTO: ImageDTO) => {
+  const store = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const clearStylePreset = useClearStylePresetWithToast();
+  const [hasPrompts, setHasPrompts] = useState(false);
+
+  const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
+
+  useEffect(() => {
+    const parse = async () => {
+      try {
+        const result = await MetadataUtils.hasMetadataByHandlers({
+          handlers: [
+            MetadataHandlers.PositivePrompt,
+            MetadataHandlers.NegativePrompt,
+            MetadataHandlers.PositiveStylePrompt,
+            MetadataHandlers.NegativeStylePrompt,
+          ],
+          metadata,
+          store,
+          require: 'some',
+        });
+        setHasPrompts(result);
+      } catch {
+        setHasPrompts(false);
+      }
+    };
+
+    parse();
+  }, [metadata, store]);
+
+  const isEnabled = useMemo(() => {
+    if (isLoading) {
+      return false;
+    }
+
+    if (tab !== 'canvas' && tab !== 'generate') {
+      return false;
+    }
+
+    if (!hasPrompts) {
+      return false;
+    }
+
+    return true;
+  }, [hasPrompts, isLoading, tab]);
+
+  const recall = useCallback(() => {
+    if (!metadata) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+    MetadataUtils.recallPrompts(metadata, store);
+    clearStylePreset();
+  }, [metadata, isEnabled, store, clearStylePreset]);
+
+  return {
+    recall,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useRecallRemix.ts

@@ -0,0 +1,60 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useCallback, useMemo } from 'react';
+import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
+import type { ImageDTO } from 'services/api/types';
+
+import { useClearStylePresetWithToast } from './useClearStylePresetWithToast';
+
+export const useRecallRemix = (imageDTO: ImageDTO) => {
+  const store = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const isStaging = useAppSelector(selectIsStaging);
+  const clearStylePreset = useClearStylePresetWithToast();
+
+  const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
+
+  const isEnabled = useMemo(() => {
+    if (isLoading) {
+      return false;
+    }
+
+    if (tab !== 'canvas' && tab !== 'generate') {
+      return false;
+    }
+
+    if (!metadata) {
+      return false;
+    }
+
+    return true;
+  }, [isLoading, metadata, tab]);
+
+  const handlersToSkip = useMemo(() => {
+    // Remix always skips the seed handler
+    const _handlersToSkip = [MetadataHandlers.Seed];
+    if (tab === 'canvas' && isStaging) {
+      // When we are staging and on canvas, the bbox is locked - we cannot recall width and height
+      _handlersToSkip.push(MetadataHandlers.Width, MetadataHandlers.Height);
+    }
+    return _handlersToSkip;
+  }, [isStaging, tab]);
+
+  const recall = useCallback(() => {
+    if (!metadata) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+    MetadataUtils.recallAll(metadata, store, handlersToSkip);
+    clearStylePreset();
+  }, [metadata, isEnabled, store, handlersToSkip, clearStylePreset]);
+
+  return {
+    recall,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/gallery/hooks/useRecallSeed.ts

@@ -0,0 +1,62 @@
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
+import type { ImageDTO } from 'services/api/types';
+
+export const useRecallSeed = (imageDTO: ImageDTO) => {
+  const store = useAppStore();
+  const tab = useAppSelector(selectActiveTab);
+  const [hasSeed, setHasSeed] = useState(false);
+
+  const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
+
+  useEffect(() => {
+    const parse = async () => {
+      try {
+        await MetadataHandlers.Seed.parse(metadata, store);
+        setHasSeed(true);
+      } catch {
+        setHasSeed(false);
+      }
+    };
+
+    parse();
+  }, [metadata, store]);
+
+  const isEnabled = useMemo(() => {
+    if (isLoading) {
+      return false;
+    }
+
+    if (tab !== 'canvas' && tab !== 'generate') {
+      return false;
+    }
+
+    if (!metadata) {
+      return false;
+    }
+
+    if (!hasSeed) {
+      return false;
+    }
+
+    return true;
+  }, [hasSeed, isLoading, metadata, tab]);
+
+  const recall = useCallback(() => {
+    if (!metadata) {
+      return;
+    }
+    if (!isEnabled) {
+      return;
+    }
+    MetadataUtils.recallByHandler({ metadata, handler: MetadataHandlers.Seed, store });
+  }, [metadata, isEnabled, store]);
+
+  return {
+    recall,
+    isEnabled,
+  };
+};

invokeai/frontend/web/src/features/imageActions/actions.ts

@@ -85,7 +85,12 @@ export const createNewCanvasEntityFromImage = async (arg: {
 }) => {
   const { type, imageDTO, dispatch, getState, withResize, overrides: _overrides } = arg;
   const state = getState();
-  const { x, y, width, height } = selectBboxRect(state);
+  const { x, y } = selectBboxRect(state);
+
+  const base = selectBboxModelBase(state);
+  const ratio = imageDTO.width / imageDTO.height;
+  const optimalDimension = getOptimalDimension(base);
+  const { width, height } = calculateNewSize(ratio, optimalDimension ** 2, base);
 
   let imageObject: CanvasImageState;
 

invokeai/frontend/web/src/features/metadata/parsing.tsx

@@ -8,6 +8,7 @@ import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { bboxHeightChanged, bboxWidthChanged, canvasMetadataRecalled } from 'features/controlLayers/store/canvasSlice';
 import { loraAllDeleted, loraRecalled } from 'features/controlLayers/store/lorasSlice';
 import {
+  heightChanged,
   negativePrompt2Changed,
   negativePromptChanged,
   positivePrompt2Changed,
@@ -31,6 +32,7 @@ import {
   setSteps,
   shouldConcatPromptsChanged,
   vaeSelected,
+  widthChanged,
 } from 'features/controlLayers/store/paramsSlice';
 import { refImagesRecalled } from 'features/controlLayers/store/refImagesSlice';
 import type { CanvasMetadata, LoRA, RefImageState } from 'features/controlLayers/store/types';
@@ -82,8 +84,9 @@ import {
   zParameterStrength,
 } from 'features/parameters/types/parameterSchemas';
 import { toast } from 'features/toast/toast';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { t } from 'i18next';
-import type { ComponentType, ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { modelsApi } from 'services/api/endpoints/models';
@@ -170,7 +173,8 @@ export type SingleMetadataHandler<T> = {
   type: string;
   parse: (metadata: unknown, store: AppStore) => Promise<T>;
   recall: (value: T, store: AppStore) => void;
-  LabelComponent: ComponentType;
+  i18nKey: string;
+  LabelComponent: ComponentType<{ i18nKey: string }>;
   ValueComponent: ComponentType<SingleMetadataValueProps<T>>;
 };
 
@@ -184,7 +188,8 @@ export type CollectionMetadataHandler<T extends any[]> = {
   parse: (metadata: unknown, store: AppStore) => Promise<T>;
   recall: (values: T, store: AppStore) => void;
   recallOne: (value: T[number], store: AppStore) => void;
-  LabelComponent: ComponentType;
+  i18nKey: string;
+  LabelComponent: ComponentType<{ i18nKey: string }>;
   ValueComponent: ComponentType<CollectionMetadataValueProps<T>>;
 };
 
@@ -196,7 +201,8 @@ export type UnrecallableMetadataHandler<T> = {
   [UnrecallableMetadataKey]: true;
   type: string;
   parse: (metadata: unknown, store: AppStore) => Promise<T>;
-  LabelComponent: ComponentType;
+  i18nKey: string;
+  LabelComponent: ComponentType<{ i18nKey: string }>;
   ValueComponent: ComponentType<UnrecallableMetadataValueProps<T>>;
 };
 
@@ -221,7 +227,8 @@ const CreatedBy: UnrecallableMetadataHandler<string> = {
     const parsed = z.string().parse(raw);
     return Promise.resolve(parsed);
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.createdBy" />,
+  i18nKey: 'metadata.createdBy',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: UnrecallableMetadataValueProps<string>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Created By
@@ -235,7 +242,8 @@ const GenerationMode: UnrecallableMetadataHandler<string> = {
     const parsed = z.string().parse(raw);
     return Promise.resolve(parsed);
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.generationMode" />,
+  i18nKey: 'metadata.generationMode',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: UnrecallableMetadataValueProps<string>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Generation Mode
@@ -252,7 +260,8 @@ const PositivePrompt: SingleMetadataHandler<ParameterPositivePrompt> = {
   recall: (value, store) => {
     store.dispatch(positivePromptChanged(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.positivePrompt" />,
+  i18nKey: 'metadata.positivePrompt',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterPositivePrompt>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -271,7 +280,8 @@ const NegativePrompt: SingleMetadataHandler<ParameterNegativePrompt> = {
   recall: (value, store) => {
     store.dispatch(negativePromptChanged(value || null));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.negativePrompt" />,
+  i18nKey: 'metadata.negativePrompt',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterNegativePrompt>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -290,7 +300,8 @@ const PositiveStylePrompt: SingleMetadataHandler<ParameterPositiveStylePromptSDX
   recall: (value, store) => {
     store.dispatch(positivePrompt2Changed(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.posStylePrompt" />,
+  i18nKey: 'sdxl.posStylePrompt',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterPositiveStylePromptSDXL>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -309,7 +320,8 @@ const NegativeStylePrompt: SingleMetadataHandler<ParameterPositiveStylePromptSDX
   recall: (value, store) => {
     store.dispatch(negativePrompt2Changed(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.negStylePrompt" />,
+  i18nKey: 'sdxl.negStylePrompt',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterPositiveStylePromptSDXL>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -328,7 +340,8 @@ const CFGScale: SingleMetadataHandler<ParameterCFGScale> = {
   recall: (value, store) => {
     store.dispatch(setCfgScale(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.cfgScale" />,
+  i18nKey: 'metadata.cfgScale',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterCFGScale>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion CFG Scale
@@ -345,7 +358,8 @@ const CFGRescaleMultiplier: SingleMetadataHandler<ParameterCFGRescaleMultiplier>
   recall: (value, store) => {
     store.dispatch(setCfgRescaleMultiplier(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.cfgRescaleMultiplier" />,
+  i18nKey: 'metadata.cfgRescaleMultiplier',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterCFGRescaleMultiplier>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -364,7 +378,8 @@ const Guidance: SingleMetadataHandler<ParameterGuidance> = {
   recall: (value, store) => {
     store.dispatch(setGuidance(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.guidance" />,
+  i18nKey: 'metadata.guidance',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterGuidance>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Guidance
@@ -381,7 +396,8 @@ const Scheduler: SingleMetadataHandler<ParameterScheduler> = {
   recall: (value, store) => {
     store.dispatch(setScheduler(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.scheduler" />,
+  i18nKey: 'metadata.scheduler',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterScheduler>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Scheduler
@@ -396,9 +412,15 @@ const Width: SingleMetadataHandler<ParameterWidth> = {
     return Promise.resolve(parsed);
   },
   recall: (value, store) => {
-    store.dispatch(bboxWidthChanged({ width: value, updateAspectRatio: true, clamp: true }));
+    const activeTab = selectActiveTab(store.getState());
+    if (activeTab === 'canvas') {
+      store.dispatch(bboxWidthChanged({ width: value, updateAspectRatio: true, clamp: true }));
+    } else if (activeTab === 'generate') {
+      store.dispatch(widthChanged({ width: value, updateAspectRatio: true, clamp: true }));
+    }
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.width" />,
+  i18nKey: 'metadata.width',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterWidth>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Width
@@ -413,9 +435,15 @@ const Height: SingleMetadataHandler<ParameterHeight> = {
     return Promise.resolve(parsed);
   },
   recall: (value, store) => {
-    store.dispatch(bboxHeightChanged({ height: value, updateAspectRatio: true, clamp: true }));
+    const activeTab = selectActiveTab(store.getState());
+    if (activeTab === 'canvas') {
+      store.dispatch(bboxHeightChanged({ height: value, updateAspectRatio: true, clamp: true }));
+    } else if (activeTab === 'generate') {
+      store.dispatch(heightChanged({ height: value, updateAspectRatio: true, clamp: true }));
+    }
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.height" />,
+  i18nKey: 'metadata.height',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterHeight>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Height
@@ -432,7 +460,8 @@ const Seed: SingleMetadataHandler<ParameterSeed> = {
   recall: (value, store) => {
     store.dispatch(setSeed(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.seed" />,
+  i18nKey: 'metadata.seed',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSeed>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Seed
@@ -449,7 +478,8 @@ const Steps: SingleMetadataHandler<ParameterSteps> = {
   recall: (value, store) => {
     store.dispatch(setSteps(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.steps" />,
+  i18nKey: 'metadata.steps',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSteps>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion Steps
@@ -466,7 +496,8 @@ const DenoisingStrength: SingleMetadataHandler<ParameterStrength> = {
   recall: (value, store) => {
     store.dispatch(setImg2imgStrength(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.strength" />,
+  i18nKey: 'metadata.strength',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterStrength>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion DenoisingStrength
@@ -483,7 +514,8 @@ const SeamlessX: SingleMetadataHandler<ParameterSeamlessX> = {
   recall: (value, store) => {
     store.dispatch(setSeamlessXAxis(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.seamlessXAxis" />,
+  i18nKey: 'metadata.seamlessXAxis',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSeamlessX>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion SeamlessX
@@ -500,7 +532,8 @@ const SeamlessY: SingleMetadataHandler<ParameterSeamlessY> = {
   recall: (value, store) => {
     store.dispatch(setSeamlessYAxis(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.seamlessYAxis" />,
+  i18nKey: 'metadata.seamlessYAxis',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSeamlessY>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion SeamlessY
@@ -520,7 +553,8 @@ const RefinerModel: SingleMetadataHandler<ParameterSDXLRefinerModel> = {
   recall: (value, store) => {
     store.dispatch(refinerModelChanged(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.refinermodel" />,
+  i18nKey: 'sdxl.refinermodel',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSDXLRefinerModel>) => (
     <MetadataPrimitiveValue value={`${value.name} (${value.base.toUpperCase()})`} />
   ),
@@ -539,7 +573,8 @@ const RefinerSteps: SingleMetadataHandler<ParameterSteps> = {
   recall: (value, store) => {
     store.dispatch(setRefinerSteps(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.refinerSteps" />,
+  i18nKey: 'sdxl.refinerSteps',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSteps>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion RefinerSteps
@@ -556,7 +591,8 @@ const RefinerCFGScale: SingleMetadataHandler<ParameterCFGScale> = {
   recall: (value, store) => {
     store.dispatch(setRefinerCFGScale(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.cfgScale" />,
+  i18nKey: 'sdxl.cfgScale',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterCFGScale>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion RefinerCFGScale
@@ -573,7 +609,8 @@ const RefinerScheduler: SingleMetadataHandler<ParameterScheduler> = {
   recall: (value, store) => {
     store.dispatch(setRefinerScheduler(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.scheduler" />,
+  i18nKey: 'sdxl.scheduler',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterScheduler>) => <MetadataPrimitiveValue value={value} />,
 };
 //#endregion RefinerScheduler
@@ -590,7 +627,8 @@ const RefinerPositiveAestheticScore: SingleMetadataHandler<ParameterSDXLRefinerP
   recall: (value, store) => {
     store.dispatch(setRefinerPositiveAestheticScore(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.posAestheticScore" />,
+  i18nKey: 'sdxl.posAestheticScore',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSDXLRefinerPositiveAestheticScore>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -609,7 +647,8 @@ const RefinerNegativeAestheticScore: SingleMetadataHandler<ParameterSDXLRefinerN
   recall: (value, store) => {
     store.dispatch(setRefinerNegativeAestheticScore(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.negAestheticScore" />,
+  i18nKey: 'sdxl.negAestheticScore',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSDXLRefinerNegativeAestheticScore>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -628,7 +667,8 @@ const RefinerDenoisingStart: SingleMetadataHandler<ParameterSDXLRefinerStart> =
   recall: (value, store) => {
     store.dispatch(setRefinerStart(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="sdxl.refinerStart" />,
+  i18nKey: 'sdxl.refinerStart',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterSDXLRefinerStart>) => (
     <MetadataPrimitiveValue value={value} />
   ),
@@ -648,7 +688,8 @@ const MainModel: SingleMetadataHandler<ParameterModel> = {
   recall: (value, store) => {
     store.dispatch(modelSelected(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.model" />,
+  i18nKey: 'metadata.model',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterModel>) => (
     <MetadataPrimitiveValue value={`${value.name} (${value.base.toUpperCase()})`} />
   ),
@@ -669,7 +710,8 @@ const VAEModel: SingleMetadataHandler<ParameterVAEModel> = {
   recall: (value, store) => {
     store.dispatch(vaeSelected(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.vae" />,
+  i18nKey: 'metadata.vae',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<ParameterVAEModel>) => (
     <MetadataPrimitiveValue value={`${value.name} (${value.base.toUpperCase()})`} />
   ),
@@ -733,7 +775,8 @@ const LoRAs: CollectionMetadataHandler<LoRA[]> = {
       store.dispatch(loraRecalled({ lora }));
     }
   },
-  LabelComponent: () => <MetadataLabel i18nKey="models.lora" />,
+  i18nKey: 'models.lora',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: CollectionMetadataValueProps<LoRA[]>) => (
     <MetadataPrimitiveValue value={`${value.model.name} (${value.model.base.toUpperCase()}) - ${value.weight}`} />
   ),
@@ -763,7 +806,8 @@ const CanvasLayers: SingleMetadataHandler<CanvasMetadata> = {
     }
     store.dispatch(canvasMetadataRecalled(value));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="metadata.canvasV2Metadata" />,
+  i18nKey: 'metadata.canvasV2Metadata',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: SingleMetadataValueProps<CanvasMetadata>) => {
     const { t } = useTranslation();
     const count =
@@ -810,7 +854,8 @@ const RefImages: CollectionMetadataHandler<RefImageState[]> = {
     const entities = [{ ...data, id: getPrefixedId('reference_image') }];
     store.dispatch(refImagesRecalled({ entities, replace: false }));
   },
-  LabelComponent: () => <MetadataLabel i18nKey="controlLayers.referenceImage" />,
+  i18nKey: 'controlLayers.referenceImage',
+  LabelComponent: MetadataLabel,
   ValueComponent: ({ value }: CollectionMetadataValueProps<RefImageState[]>) => {
     if (value.config.model) {
       return <MetadataPrimitiveValue value={value.config.model.name} />;
@@ -862,7 +907,7 @@ export const MetadataHandlers = {
   // ipAdapterToIPAdapterLayer: parseIPAdapterToIPAdapterLayer,
 } as const;
 
-const successToast = (parameter: ReactNode) => {
+const successToast = (parameter: string) => {
   toast({
     id: 'PARAMETER_SET',
     title: t('toast.parameterSet'),
@@ -871,7 +916,7 @@ const successToast = (parameter: ReactNode) => {
   });
 };
 
-const failedToast = (parameter: ReactNode, message?: ReactNode) => {
+const failedToast = (parameter: string, message?: string) => {
   toast({
     id: 'PARAMETER_NOT_SET',
     title: t('toast.parameterNotSet'),
@@ -902,9 +947,9 @@ const recallByHandler = async (arg: {
 
   if (!silent) {
     if (didRecall) {
-      successToast(<handler.LabelComponent />);
+      successToast(t(handler.i18nKey));
     } else {
-      failedToast(<handler.LabelComponent />);
+      failedToast(t(handler.i18nKey));
     }
   }
 
@@ -950,21 +995,24 @@ const recallByHandlers = async (arg: {
     }
   }
 
-  // If we recalled style prompts, and they were _different_ from the positive prompt, we need to disable prompt concat.
+  // We may need to update the prompt concat flag based on the recalled prompts
   const positivePrompt = recalled.get(MetadataHandlers.PositivePrompt);
   const negativePrompt = recalled.get(MetadataHandlers.NegativePrompt);
   const positiveStylePrompt = recalled.get(MetadataHandlers.PositiveStylePrompt);
   const negativeStylePrompt = recalled.get(MetadataHandlers.NegativeStylePrompt);
 
+  // The values will be undefined if the handler was not recalled
   if (
-    (positiveStylePrompt && positiveStylePrompt !== positivePrompt) ||
-    (negativeStylePrompt && negativeStylePrompt !== negativePrompt)
+    positivePrompt !== undefined ||
+    negativePrompt !== undefined ||
+    positiveStylePrompt !== undefined ||
+    negativeStylePrompt !== undefined
   ) {
-    // If we set the negative style prompt or positive style prompt, we should disable prompt concat
-    store.dispatch(shouldConcatPromptsChanged(false));
-  } else {
-    // Otherwise, we should enable prompt concat
-    store.dispatch(shouldConcatPromptsChanged(true));
+    const concat =
+      (Boolean(positiveStylePrompt) && positiveStylePrompt === positivePrompt) ||
+      (Boolean(negativeStylePrompt) && negativeStylePrompt === negativePrompt);
+
+    store.dispatch(shouldConcatPromptsChanged(concat));
   }
 
   if (!silent) {
@@ -1003,6 +1051,28 @@ const recallPrompts = async (metadata: unknown, store: AppStore) => {
   }
 };
 
+const hasMetadataByHandlers = async (arg: {
+  metadata: unknown;
+  handlers: (SingleMetadataHandler<any> | CollectionMetadataHandler<any[]>)[];
+  store: AppStore;
+  require: 'some' | 'all';
+}) => {
+  const { metadata, handlers, store, require } = arg;
+  for (const handler of handlers) {
+    try {
+      await handler.parse(metadata, store);
+      if (require === 'some') {
+        return true;
+      }
+    } catch {
+      if (require === 'all') {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
 const recallDimensions = async (metadata: unknown, store: AppStore) => {
   const recalled = await recallByHandlers({
     metadata,
@@ -1032,6 +1102,7 @@ const recallAll = async (
 };
 
 export const MetadataUtils = {
+  hasMetadataByHandlers,
   recallByHandler,
   recallByHandlers,
   recallAll,

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -32,7 +32,7 @@ const CurrentImageNode = (props: NodeProps) => {
   if (imageDTO) {
     return (
       <Wrapper nodeProps={props}>
-        <DndImage imageDTO={imageDTO} />
+        <DndImage imageDTO={imageDTO} borderRadius="base" />
       </Wrapper>
     );
   }

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx

@@ -146,6 +146,7 @@ const ImageGridItemContent = memo(
     return (
       <>
         <DndImage
+          borderRadius="base"
           imageDTO={query.data}
           asThumbnail
           objectFit="contain"

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx

@@ -76,7 +76,7 @@ const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInst
       )}
       {imageDTO && (
         <>
-          <Flex borderRadius="base" borderWidth={1} borderStyle="solid">
+          <Flex borderRadius="base" borderWidth={1} borderStyle="solid" overflow="hidden">
             <DndImage imageDTO={imageDTO} asThumbnail />
           </Flex>
           <Text

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/ImageOutputPreview.tsx

@@ -14,7 +14,7 @@ const ImageOutputPreview = ({ output }: Props) => {
     return null;
   }
 
-  return <DndImage imageDTO={imageDTO} />;
+  return <DndImage imageDTO={imageDTO} borderRadius="base" />;
 };
 
 export default memo(ImageOutputPreview);

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/publish.ts

@@ -137,6 +137,8 @@ const NODE_TYPE_PUBLISH_DENYLIST = [
   'chatgpt_4o_edit_image',
   'flux_kontext_generate_image',
   'flux_kontext_edit_image',
+  'claude_expand_prompt',
+  'claude_analyze_image',
 ];
 
 export const selectHasUnpublishableNodes = createSelector(selectNodes, (nodes) => {

invokeai/frontend/web/src/features/nodes/util/graph/generation/addFLUXFill.ts

@@ -30,11 +30,14 @@ export const addFLUXFill = async ({
   denoise.denoising_start = denoising_start;
   denoise.denoising_end = denoising_end;
 
+  const { originalSize, scaledSize, rect } = getOriginalAndScaledSizesForOtherModes(state);
+
+  denoise.width = scaledSize.width;
+  denoise.height = scaledSize.height;
+
   const params = selectParamsSlice(state);
   const canvasSettings = selectCanvasSettingsSlice(state);
 
-  const { originalSize, scaledSize, rect } = getOriginalAndScaledSizesForOtherModes(state);
-
   const rasterAdapters = manager.compositor.getVisibleAdaptersOfType('raster_layer');
   const initialImage = await manager.compositor.getCompositeImageDTO(rasterAdapters, rect, {
     is_intermediate: true,

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts

@@ -78,8 +78,6 @@ export const buildFLUXGraph = async (arg: GraphBuilderArg): Promise<GraphBuilder
     if (generationMode !== 'txt2img') {
       throw new UnsupportedGenerationModeError(t('toast.fluxKontextIncompatibleGenerationMode'));
     }
-
-    guidance = 30;
   }
 
   const g = new Graph(getPrefixedId('flux_graph'));

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFluxKontextGraph.ts

@@ -26,7 +26,7 @@ export const buildFluxKontextGraph = (arg: GraphBuilderArg): GraphBuilderReturn
   assert(model.base === 'flux-kontext', 'Selected model is not a FLUX Kontext API model');
 
   if (generationMode !== 'txt2img') {
-    throw new UnsupportedGenerationModeError(t('toast.imagenIncompatibleGenerationMode', { model: 'FLUX Kontext' }));
+    throw new UnsupportedGenerationModeError(t('toast.fluxKontextIncompatibleGenerationMode'));
   }
 
   log.debug({ generationMode, manager: manager?.id }, 'Building FLUX Kontext graph');

invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
 import {
   selectImg2imgStrength,
   selectMainModelConfig,
@@ -44,8 +45,11 @@ export const selectCanvasOutputFields = (state: RootState) => {
   // Advanced session means working on canvas - images are not saved to gallery or added to a board.
   // Simple session means working in YOLO mode - images are saved to gallery & board.
   const tab = selectActiveTab(state);
-  const is_intermediate = tab === 'canvas';
-  const board = tab === 'canvas' ? undefined : getBoardField(state);
+  const saveAllImagesToGallery = selectSaveAllImagesToGallery(state);
+
+  // If we're on canvas and the save all images setting is enabled, save to gallery
+  const is_intermediate = tab === 'canvas' && !saveAllImagesToGallery;
+  const board = tab === 'canvas' && !saveAllImagesToGallery ? undefined : getBoardField(state);
 
   return {
     is_intermediate,

invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx

@@ -18,7 +18,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $onClickGoToModelManager } from 'app/store/nanostores/onClickGoToModelManager';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { Group, PickerContextState } from 'common/components/Picker/Picker';
-import { buildGroup, getRegex, isOption, Picker, usePickerContext } from 'common/components/Picker/Picker';
+import { buildGroup, getRegex, isGroup, Picker, usePickerContext } from 'common/components/Picker/Picker';
 import { useDisclosure } from 'common/hooks/useBoolean';
 import { typedMemo } from 'common/util/typedMemo';
 import { uniq } from 'es-toolkit/compat';
@@ -277,8 +277,22 @@ export const ModelPicker = typedMemo(
       if (!selectedModelConfig) {
         return undefined;
       }
+      let _selectedOption: WithStarred<T> | undefined = undefined;
 
-      return options.filter(isOption).find((o) => o.key === selectedModelConfig.key);
+      for (const optionOrGroup of options) {
+        if (isGroup(optionOrGroup)) {
+          const result = optionOrGroup.options.find((o) => o.key === selectedModelConfig.key);
+          if (result) {
+            _selectedOption = result;
+            break;
+          }
+        } else if (optionOrGroup.key === selectedModelConfig.key) {
+          _selectedOption = optionOrGroup;
+          break;
+        }
+      }
+
+      return _selectedOption;
     }, [options, selectedModelConfig]);
 
     const onClose = useCallback(() => {
@@ -361,9 +375,19 @@ const optionSx: SystemStyleObject = {
   cursor: 'pointer',
   borderRadius: 'base',
   '&[data-selected="true"]': {
-    bg: 'base.700',
+    bg: 'invokeBlue.300',
+    color: 'base.900',
+    '.extra-info': {
+      color: 'base.700',
+    },
+    '.picker-option': {
+      fontWeight: 'bold',
+      '&[data-is-compact="true"]': {
+        fontWeight: 'semibold',
+      },
+    },
     '&[data-active="true"]': {
-      bg: 'base.650',
+      bg: 'invokeBlue.250',
     },
   },
   '&[data-active="true"]': {
@@ -400,17 +424,31 @@ const PickerOptionComponent = typedMemo(
         <Flex flexDir="column" gap={1} flex={1}>
           <Flex gap={2} alignItems="center">
             {option.starred && <Icon as={PiLinkSimple} color="invokeYellow.500" boxSize={4} />}
-            <Text sx={optionNameSx} data-is-compact={compactView}>
+            <Text className="picker-option" sx={optionNameSx} data-is-compact={compactView}>
               {option.name}
             </Text>
             <Spacer />
             {option.file_size > 0 && (
-              <Text variant="subtext" fontStyle="italic" noOfLines={1} flexShrink={0} overflow="visible">
+              <Text
+                className="extra-info"
+                variant="subtext"
+                fontStyle="italic"
+                noOfLines={1}
+                flexShrink={0}
+                overflow="visible"
+              >
                 {filesize(option.file_size)}
               </Text>
             )}
             {option.usage_info && (
-              <Text variant="subtext" fontStyle="italic" noOfLines={1} flexShrink={0} overflow="visible">
+              <Text
+                className="extra-info"
+                variant="subtext"
+                fontStyle="italic"
+                noOfLines={1}
+                flexShrink={0}
+                overflow="visible"
+              >
                 {option.usage_info}
               </Text>
             )}

invokeai/frontend/web/src/features/parameters/components/Prompts/UpscalePrompts.tsx

@@ -0,0 +1,34 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import {
+  createParamsSelector,
+  selectHasNegativePrompt,
+  selectModelSupportsNegativePrompt,
+} from 'features/controlLayers/store/paramsSlice';
+import { ParamNegativePrompt } from 'features/parameters/components/Core/ParamNegativePrompt';
+import { ParamPositivePrompt } from 'features/parameters/components/Core/ParamPositivePrompt';
+import { ParamSDXLNegativeStylePrompt } from 'features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt';
+import { ParamSDXLPositiveStylePrompt } from 'features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt';
+import { memo } from 'react';
+
+const selectWithStylePrompts = createParamsSelector((params) => {
+  const isSDXL = params.model?.base === 'sdxl';
+  const shouldConcatPrompts = params.shouldConcatPrompts;
+  return isSDXL && !shouldConcatPrompts;
+});
+
+export const UpscalePrompts = memo(() => {
+  const withStylePrompts = useAppSelector(selectWithStylePrompts);
+  const modelSupportsNegativePrompt = useAppSelector(selectModelSupportsNegativePrompt);
+  const hasNegativePrompt = useAppSelector(selectHasNegativePrompt);
+  return (
+    <Flex flexDir="column" gap={2}>
+      <ParamPositivePrompt />
+      {withStylePrompts && <ParamSDXLPositiveStylePrompt />}
+      {modelSupportsNegativePrompt && hasNegativePrompt && <ParamNegativePrompt />}
+      {withStylePrompts && <ParamSDXLNegativeStylePrompt />}
+    </Flex>
+  );
+});
+
+UpscalePrompts.displayName = 'UpscalePrompts';

invokeai/frontend/web/src/features/queue/components/CancelAllExceptCurrentButton.tsx

@@ -0,0 +1,28 @@
+import type { ButtonProps } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
+import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXCircle } from 'react-icons/pi';
+
+export const CancelAllExceptCurrentButton = memo((props: ButtonProps) => {
+  const { t } = useTranslation();
+  const api = useCancelAllExceptCurrentQueueItemDialog();
+
+  return (
+    <Button
+      isDisabled={api.isDisabled}
+      isLoading={api.isLoading}
+      aria-label={t('queue.clear')}
+      tooltip={t('queue.cancelAllExceptCurrentTooltip')}
+      leftIcon={<PiXCircle />}
+      colorScheme="error"
+      onClick={api.openDialog}
+      {...props}
+    >
+      {t('queue.clear')}
+    </Button>
+  );
+});
+
+CancelAllExceptCurrentButton.displayName = 'CancelAllExceptCurrentButton';

invokeai/frontend/web/src/features/queue/components/CancelAllExceptCurrentIconButton.tsx

@@ -0,0 +1,25 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXCircle } from 'react-icons/pi';
+
+export const CancelAllExceptCurrentIconButton = memo(() => {
+  const { t } = useTranslation();
+  const api = useCancelAllExceptCurrentQueueItemDialog();
+
+  return (
+    <IconButton
+      size="lg"
+      isDisabled={api.isDisabled}
+      isLoading={api.isLoading}
+      aria-label={t('queue.clear')}
+      tooltip={t('queue.cancelAllExceptCurrentTooltip')}
+      icon={<PiXCircle />}
+      colorScheme="error"
+      onClick={api.openDialog}
+    />
+  );
+});
+
+CancelAllExceptCurrentIconButton.displayName = 'CancelAllExceptCurrentIconButton';

invokeai/frontend/web/src/features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 const [useCancelAllExceptCurrentQueueItemConfirmationAlertDialog] = buildUseBoolean(false);
 
-const useCancelAllExceptCurrentQueueItemDialog = () => {
+export const useCancelAllExceptCurrentQueueItemDialog = () => {
   const dialog = useCancelAllExceptCurrentQueueItemConfirmationAlertDialog();
   const cancelAllExceptCurrentQueueItem = useCancelAllExceptCurrentQueueItem();
 

invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx

@@ -0,0 +1,29 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
+
+export const CancelCurrentQueueItemIconButton = memo(() => {
+  const { t } = useTranslation();
+  const cancelCurrentQueueItem = useCancelCurrentQueueItem();
+
+  const cancelCurrentQueueItemWithToast = useCallback(() => {
+    cancelCurrentQueueItem.trigger({ withToast: true });
+  }, [cancelCurrentQueueItem]);
+
+  return (
+    <IconButton
+      size="lg"
+      onClick={cancelCurrentQueueItemWithToast}
+      isDisabled={cancelCurrentQueueItem.isDisabled}
+      isLoading={cancelCurrentQueueItem.isLoading}
+      aria-label={t('queue.cancel')}
+      tooltip={t('queue.cancelTooltip')}
+      icon={<PiXBold />}
+      colorScheme="error"
+    />
+  );
+});
+
+CancelCurrentQueueItemIconButton.displayName = 'CancelCurrentQueueItemIconButton';

invokeai/frontend/web/src/features/queue/components/DeleteAllExceptCurrentButton.tsx

@@ -1,32 +0,0 @@
-import type { ButtonProps } from '@invoke-ai/ui-library';
-import { Button } from '@invoke-ai/ui-library';
-import { useDeleteAllExceptCurrentQueueItemDialog } from 'features/queue/components/DeleteAllExceptCurrentQueueItemConfirmationAlertDialog';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiXCircle } from 'react-icons/pi';
-
-type Props = ButtonProps;
-
-export const DeleteAllExceptCurrentButton = memo((props: Props) => {
-  const { t } = useTranslation();
-  const deleteAllExceptCurrent = useDeleteAllExceptCurrentQueueItemDialog();
-
-  return (
-    <>
-      <Button
-        onClick={deleteAllExceptCurrent.openDialog}
-        isLoading={deleteAllExceptCurrent.isLoading}
-        isDisabled={deleteAllExceptCurrent.isDisabled}
-        tooltip={t('queue.cancelAllExceptCurrentTooltip')}
-        leftIcon={<PiXCircle />}
-        colorScheme="error"
-        data-testid={t('queue.clear')}
-        {...props}
-      >
-        {t('queue.clear')}
-      </Button>
-    </>
-  );
-});
-
-DeleteAllExceptCurrentButton.displayName = 'DeleteAllExceptCurrentButton';

invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx

@@ -1,8 +1,8 @@
 import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { SessionMenuItems } from 'common/components/SessionMenuItems';
-import { useDeleteAllExceptCurrentQueueItemDialog } from 'features/queue/components/DeleteAllExceptCurrentQueueItemConfirmationAlertDialog';
+import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
 import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
-import { useDeleteCurrentQueueItem } from 'features/queue/hooks/useDeleteCurrentQueueItem';
+import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
 import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -16,14 +16,18 @@ export const QueueActionsMenuButton = memo(() => {
   const { t } = useTranslation();
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
-  const deleteAllExceptCurrent = useDeleteAllExceptCurrentQueueItemDialog();
-  const deleteCurrentQueueItem = useDeleteCurrentQueueItem();
+  const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
+  const cancelCurrentQueueItem = useCancelCurrentQueueItem();
   const resumeProcessor = useResumeProcessor();
   const pauseProcessor = usePauseProcessor();
   const openQueue = useCallback(() => {
     navigationApi.switchToTab('queue');
   }, []);
 
+  const cancelCurrentQueueItemWithToast = useCallback(() => {
+    cancelCurrentQueueItem.trigger({ withToast: true });
+  }, [cancelCurrentQueueItem]);
+
   return (
     <>
       <Menu placement="bottom-end" isLazy lazyBehavior="unmount">
@@ -36,18 +40,18 @@ export const QueueActionsMenuButton = memo(() => {
             <MenuItem
               isDestructive
               icon={<PiXBold />}
-              onClick={deleteCurrentQueueItem.trigger}
-              isLoading={deleteCurrentQueueItem.isLoading}
-              isDisabled={deleteCurrentQueueItem.isDisabled}
+              onClick={cancelCurrentQueueItemWithToast}
+              isLoading={cancelCurrentQueueItem.isLoading}
+              isDisabled={cancelCurrentQueueItem.isDisabled}
             >
               {t('queue.cancelTooltip')}
             </MenuItem>
             <MenuItem
               isDestructive
               icon={<PiXCircle />}
-              onClick={deleteAllExceptCurrent.openDialog}
-              isLoading={deleteAllExceptCurrent.isLoading}
-              isDisabled={deleteAllExceptCurrent.isDisabled}
+              onClick={cancelAllExceptCurrent.openDialog}
+              isLoading={cancelAllExceptCurrent.isLoading}
+              isDisabled={cancelAllExceptCurrent.isDisabled}
             >
               {t('queue.cancelAllExceptCurrentTooltip')}
             </MenuItem>

invokeai/frontend/web/src/features/queue/components/QueueControls.tsx

@@ -5,6 +5,8 @@ import { QueueActionsMenuButton } from 'features/queue/components/QueueActionsMe
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo } from 'react';
 
+import { CancelAllExceptCurrentIconButton } from './CancelAllExceptCurrentIconButton';
+import { CancelCurrentQueueItemIconButton } from './CancelCurrentQueueItemIconButton';
 import { InvokeButton } from './InvokeQueueBackButton';
 
 const QueueControls = () => {
@@ -14,7 +16,7 @@ const QueueControls = () => {
         <InvokeButton />
         <Spacer />
         <QueueActionsMenuButton />
-        <DeleteIconButton />
+        <CancelIconButton />
       </Flex>
       <ProgressBar />
     </Flex>
@@ -34,3 +36,15 @@ const DeleteIconButton = memo(() => {
 });
 
 DeleteIconButton.displayName = 'DeleteIconButton';
+
+const CancelIconButton = memo(() => {
+  const shift = useShiftModifier();
+
+  if (!shift) {
+    return <CancelCurrentQueueItemIconButton />;
+  }
+
+  return <CancelAllExceptCurrentIconButton />;
+});
+
+CancelIconButton.displayName = 'CancelIconButton';

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx

@@ -3,7 +3,7 @@ import { Badge, ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
 import { useDestinationText } from 'features/queue/components/QueueList/useDestinationText';
 import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
-import { useDeleteQueueItem } from 'features/queue/hooks/useDeleteQueueItem';
+import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { useRetryQueueItem } from 'features/queue/hooks/useRetryQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -38,13 +38,13 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
   const handleToggle = useCallback(() => {
     context.toggleQueueItem(item.item_id);
   }, [context, item.item_id]);
-  const deleteQueueItem = useDeleteQueueItem();
-  const onClickDeleteQueueItem = useCallback(
+  const cancelQueueItem = useCancelQueueItem();
+  const onClickCancelQueueItem = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      deleteQueueItem.trigger(item.item_id);
+      cancelQueueItem.trigger(item.item_id);
     },
-    [deleteQueueItem, item.item_id]
+    [cancelQueueItem, item.item_id]
   );
   const retryQueueItem = useRetryQueueItem();
   const onClickRetryQueueItem = useCallback(
@@ -135,9 +135,9 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
           <ButtonGroup size="xs" variant="ghost">
             {(!isFailed || !isRetryEnabled || isValidationRun) && (
               <IconButton
-                onClick={onClickDeleteQueueItem}
+                onClick={onClickCancelQueueItem}
                 isDisabled={isCanceled}
-                isLoading={deleteQueueItem.isLoading}
+                isLoading={cancelQueueItem.isLoading}
                 aria-label={t('queue.cancelItem')}
                 icon={<PiXBold />}
               />

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx

@@ -5,7 +5,7 @@ import { useDestinationText } from 'features/queue/components/QueueList/useDesti
 import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
 import { useBatchIsCanceled } from 'features/queue/hooks/useBatchIsCanceled';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
-import { useDeleteQueueItem } from 'features/queue/hooks/useDeleteQueueItem';
+import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { useRetryQueueItem } from 'features/queue/hooks/useRetryQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -13,20 +13,22 @@ import type { ReactNode } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiXBold } from 'react-icons/pi';
+import { useGetQueueItemQuery } from 'services/api/endpoints/queue';
 import type { S } from 'services/api/types';
 
 type Props = {
   queueItem: S['SessionQueueItem'];
 };
 
-const QueueItemComponent = ({ queueItem }: Props) => {
-  const { session_id, batch_id, item_id, origin, destination } = queueItem;
+const QueueItemComponent = ({ queueItem: queueItemDTO }: Props) => {
+  const { session_id, batch_id, item_id, origin, destination } = queueItemDTO;
   const { t } = useTranslation();
   const isRetryEnabled = useFeatureStatus('retryQueueItem');
   const isBatchCanceled = useBatchIsCanceled(batch_id);
   const cancelBatch = useCancelBatch();
-  const deleteQueueItem = useDeleteQueueItem();
+  const cancelQueueItem = useCancelQueueItem();
   const retryQueueItem = useRetryQueueItem();
+  const { data: queueItem } = useGetQueueItemQuery(item_id);
 
   const originText = useOriginText(origin);
   const destinationText = useDestinationText(destination);
@@ -57,8 +59,8 @@ const QueueItemComponent = ({ queueItem }: Props) => {
   }, [cancelBatch, batch_id]);
 
   const onCancelQueueItem = useCallback(() => {
-    deleteQueueItem.trigger(item_id);
-  }, [deleteQueueItem, item_id]);
+    cancelQueueItem.trigger(item_id);
+  }, [cancelQueueItem, item_id]);
 
   const onRetryQueueItem = useCallback(() => {
     retryQueueItem.trigger(item_id);
@@ -85,8 +87,8 @@ const QueueItemComponent = ({ queueItem }: Props) => {
           {(!isFailed || !isRetryEnabled) && (
             <Button
               onClick={onCancelQueueItem}
-              isLoading={deleteQueueItem.isLoading}
-              isDisabled={deleteQueueItem.isDisabled || queueItem ? isCanceled : true}
+              isLoading={cancelQueueItem.isLoading}
+              isDisabled={cancelQueueItem.isDisabled || queueItem ? isCanceled : true}
               aria-label={t('queue.cancelItem')}
               leftIcon={<PiXBold />}
               colorScheme="error"

invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx

@@ -13,7 +13,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Components, ItemContent } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
-import { useListQueueItemsQuery } from 'services/api/endpoints/queue';
+import { queueItemsAdapterSelectors, useListQueueItemsQuery } from 'services/api/endpoints/queue';
 import type { S } from 'services/api/types';
 
 import QueueItemComponent from './QueueItemComponent';
@@ -70,7 +70,7 @@ const QueueList = () => {
     if (!listQueueItemsData) {
       return [];
     }
-    return listQueueItemsData.items;
+    return queueItemsAdapterSelectors.selectAll(listQueueItemsData);
   }, [listQueueItemsData]);
 
   const handleLoadMore = useCallback(() => {

invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx

@@ -1,8 +1,8 @@
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
-import { DeleteAllExceptCurrentButton } from 'features/queue/components/DeleteAllExceptCurrentButton';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
+import { CancelAllExceptCurrentButton } from './CancelAllExceptCurrentButton';
 import ClearModelCacheButton from './ClearModelCacheButton';
 import PauseProcessorButton from './PauseProcessorButton';
 import PruneQueueButton from './PruneQueueButton';
@@ -23,7 +23,7 @@ const QueueTabQueueControls = () => {
         )}
         <ButtonGroup w={28} orientation="vertical" size="sm">
           <PruneQueueButton />
-          <DeleteAllExceptCurrentButton />
+          <CancelAllExceptCurrentButton />
         </ButtonGroup>
       </Flex>
       <ClearModelCacheButton />

invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts

@@ -0,0 +1,24 @@
+import { useCurrentQueueItemId } from 'features/queue/hooks/useCurrentQueueItemId';
+import { useCallback } from 'react';
+
+import { useCancelQueueItem } from './useCancelQueueItem';
+
+export const useCancelCurrentQueueItem = () => {
+  const currentQueueItemId = useCurrentQueueItemId();
+  const cancelQueueItem = useCancelQueueItem();
+  const trigger = useCallback(
+    (options?: { withToast?: boolean }) => {
+      if (currentQueueItemId === null) {
+        return;
+      }
+      cancelQueueItem.trigger(currentQueueItemId, options);
+    },
+    [currentQueueItemId, cancelQueueItem]
+  );
+
+  return {
+    trigger,
+    isLoading: cancelQueueItem.isLoading,
+    isDisabled: cancelQueueItem.isDisabled || currentQueueItemId === null,
+  };
+};

invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts

@@ -0,0 +1,42 @@
+import { useStore } from '@nanostores/react';
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCancelQueueItemMutation } from 'services/api/endpoints/queue';
+import { $isConnected } from 'services/events/stores';
+
+const DEFAULTS = {
+  withToast: true,
+};
+
+export const useCancelQueueItem = () => {
+  const isConnected = useStore($isConnected);
+  const [_trigger, { isLoading }] = useCancelQueueItemMutation();
+  const { t } = useTranslation();
+  const trigger = useCallback(
+    async (item_id: number, options?: { withToast?: boolean }) => {
+      const { withToast } = { ...DEFAULTS, ...options };
+      try {
+        await _trigger({ item_id }).unwrap();
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_SUCCEEDED',
+            title: t('queue.cancelSucceeded'),
+            status: 'success',
+          });
+        }
+      } catch {
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_FAILED',
+            title: t('queue.cancelFailed'),
+            status: 'error',
+          });
+        }
+      }
+    },
+    [t, _trigger]
+  );
+
+  return { trigger, isLoading, isDisabled: !isConnected };
+};

invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItemsByDestination.ts

@@ -0,0 +1,43 @@
+import { useStore } from '@nanostores/react';
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCancelQueueItemsByDestinationMutation } from 'services/api/endpoints/queue';
+import { $isConnected } from 'services/events/stores';
+
+const DEFAULTS = {
+  withToast: true,
+};
+
+export const useCancelQueueItemsByDestination = () => {
+  const isConnected = useStore($isConnected);
+  const [_trigger, { isLoading }] = useCancelQueueItemsByDestinationMutation();
+  const { t } = useTranslation();
+  const trigger = useCallback(
+    async (destination: string, options?: { withToast?: boolean }) => {
+      const { withToast } = { ...DEFAULTS, ...options };
+
+      try {
+        await _trigger({ destination }).unwrap();
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_SUCCEEDED',
+            title: t('queue.cancelSucceeded'),
+            status: 'success',
+          });
+        }
+      } catch {
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_FAILED',
+            title: t('queue.cancelFailed'),
+            status: 'error',
+          });
+        }
+      }
+    },
+    [t, _trigger]
+  );
+
+  return { trigger, isLoading, isDisabled: !isConnected };
+};

invokeai/frontend/web/src/features/queue/hooks/useDeleteQueueItem.ts

@@ -5,25 +5,34 @@ import { useTranslation } from 'react-i18next';
 import { useDeleteQueueItemMutation } from 'services/api/endpoints/queue';
 import { $isConnected } from 'services/events/stores';
 
+const DEFAULTS = {
+  withToast: true,
+};
+
 export const useDeleteQueueItem = () => {
   const isConnected = useStore($isConnected);
   const [_trigger, { isLoading }] = useDeleteQueueItemMutation();
   const { t } = useTranslation();
   const trigger = useCallback(
-    async (item_id: number) => {
+    async (item_id: number, options?: { withToast?: boolean }) => {
+      const { withToast } = { ...DEFAULTS, ...options };
       try {
         await _trigger({ item_id }).unwrap();
-        toast({
-          id: 'QUEUE_CANCEL_SUCCEEDED',
-          title: t('queue.cancelSucceeded'),
-          status: 'success',
-        });
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_SUCCEEDED',
+            title: t('queue.cancelSucceeded'),
+            status: 'success',
+          });
+        }
       } catch {
-        toast({
-          id: 'QUEUE_CANCEL_FAILED',
-          title: t('queue.cancelFailed'),
-          status: 'error',
-        });
+        if (withToast) {
+          toast({
+            id: 'QUEUE_CANCEL_FAILED',
+            title: t('queue.cancelFailed'),
+            status: 'error',
+          });
+        }
       }
     },
     [t, _trigger]

invokeai/frontend/web/src/features/queue/hooks/useDeleteQueueItemsByDestination.ts

@@ -1,33 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { toast } from 'features/toast/toast';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useDeleteQueueItemsByDestinationMutation } from 'services/api/endpoints/queue';
-import { $isConnected } from 'services/events/stores';
-
-export const useDeleteQueueItemsByDestination = () => {
-  const isConnected = useStore($isConnected);
-  const [_trigger, { isLoading }] = useDeleteQueueItemsByDestinationMutation();
-  const { t } = useTranslation();
-  const trigger = useCallback(
-    async (destination: string) => {
-      try {
-        await _trigger({ destination }).unwrap();
-        toast({
-          id: 'QUEUE_CANCEL_SUCCEEDED',
-          title: t('queue.cancelSucceeded'),
-          status: 'success',
-        });
-      } catch {
-        toast({
-          id: 'QUEUE_CANCEL_FAILED',
-          title: t('queue.cancelFailed'),
-          status: 'error',
-        });
-      }
-    },
-    [t, _trigger]
-  );
-
-  return { trigger, isLoading, isDisabled: !isConnected };
-};

invokeai/frontend/web/src/features/queue/store/queueSlice.ts

@@ -33,7 +33,7 @@ export const queueSlice = createSlice({
   },
 });
 
-export const { listCursorChanged, listPriorityChanged } = queueSlice.actions;
+export const { listCursorChanged, listPriorityChanged, listParamsReset } = queueSlice.actions;
 
 const selectQueueSlice = (state: RootState) => state.queue;
 const createQueueSelector = <T>(selector: Selector<QueueState, T>) => createSelector(selectQueueSlice, selector);

invokeai/frontend/web/src/features/queue/store/readiness.ts

@@ -287,17 +287,19 @@ const getReasonsWhyCannotEnqueueGenerateTab = (arg: {
     reasons.push({ content: i18n.t('parameters.invoke.fluxKontextMultipleReferenceImages') });
   }
 
-  refImages.entities.forEach((entity, i) => {
-    const layerNumber = i + 1;
-    const refImageLiteral = i18n.t(LAYER_TYPE_TO_TKEY['reference_image']);
-    const prefix = `${refImageLiteral} #${layerNumber}`;
-    const problems = getGlobalReferenceImageWarnings(entity, model);
+  refImages.entities
+    .filter(({ isEnabled }) => isEnabled)
+    .forEach((entity, i) => {
+      const layerNumber = i + 1;
+      const refImageLiteral = i18n.t(LAYER_TYPE_TO_TKEY['reference_image']);
+      const prefix = `${refImageLiteral} #${layerNumber}`;
+      const problems = getGlobalReferenceImageWarnings(entity, model);
 
-    if (problems.length) {
-      const content = upperFirst(problems.map((p) => i18n.t(p)).join(', '));
-      reasons.push({ prefix, content });
-    }
-  });
+      if (problems.length) {
+        const content = upperFirst(problems.map((p) => i18n.t(p)).join(', '));
+        reasons.push({ prefix, content });
+      }
+    });
 
   return reasons;
 };

invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx

@@ -37,7 +37,7 @@ export const UpscaleInitialImage = () => {
         {!imageDTO && <UploadImageIconButton w="full" h="full" isError={!imageDTO} onUpload={onUpload} fontSize={36} />}
         {imageDTO && (
           <>
-            <DndImage imageDTO={imageDTO} />
+            <DndImage imageDTO={imageDTO} borderRadius="base" />
             <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
               <DndImageIcon
                 onClick={onReset}

invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

@@ -144,7 +144,6 @@ export const useHotkeyData = (): HotkeysData => {
     addHotkey('viewer', 'recallPrompts', ['p']);
     addHotkey('viewer', 'remix', ['r']);
     addHotkey('viewer', 'useSize', ['d']);
-    addHotkey('viewer', 'runPostprocessing', ['shift+u']);
     addHotkey('viewer', 'toggleMetadata', ['i']);
 
     // Gallery

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx

@@ -26,14 +26,14 @@ const optionsObject: Record<Language, string> = {
   nl: 'Nederlands',
   pl: 'Polski',
   pt: 'Português',
-  pt_BR: 'Português do Brasil',
+  'pt-BR': 'Português do Brasil',
   ru: 'Русский',
   sv: 'Svenska',
   tr: 'Türkçe',
   ua: 'Украї́нська',
   vi: 'Tiếng Việt',
-  zh_CN: '简体中文',
-  zh_Hant: '漢語',
+  'zh-CN': '简体中文',
+  'zh-Hant': '漢語',
 };
 
 const options = map(optionsObject, (label, value) => ({ label, value }));

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx

@@ -5,14 +5,10 @@ import { videoModalLinkClicked } from 'features/system/store/actions';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const formatTime = ({ minutes, seconds }: { minutes: number; seconds: number }) => {
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-};
-
 export const VideoCard = memo(({ video }: { video: VideoData }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { tKey, link, length } = video;
+  const { tKey, link } = video;
   const handleLinkClick = useCallback(() => {
     dispatch(videoModalLinkClicked(t(`supportVideos.videos.${tKey}.title`)));
   }, [dispatch, t, tKey]);
@@ -24,7 +20,6 @@ export const VideoCard = memo(({ video }: { video: VideoData }) => {
           {t(`supportVideos.videos.${tKey}.title`)}
         </Text>
         <Spacer />
-        <Text variant="subtext">{formatTime(length)}</Text>
         <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} onClick={handleLinkClick} />
       </Flex>
       <Text fontSize="md" variant="subtext">

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCardList.tsx

@@ -1,6 +1,6 @@
 import { Divider } from '@invoke-ai/ui-library';
 import { StickyScrollable } from 'features/system/components/StickyScrollable';
-import { gettingStartedVideos, type VideoData } from 'features/system/components/VideosModal/data';
+import type { VideoData } from 'features/system/components/VideosModal/data';
 import { VideoCard } from 'features/system/components/VideosModal/VideoCard';
 import { Fragment, memo } from 'react';
 
@@ -10,7 +10,7 @@ export const VideoCardList = memo(({ category, videos }: { category: string; vid
       {videos.map((video, i) => (
         <Fragment key={`${video.tKey}-${i}`}>
           <VideoCard video={video} />
-          {i < gettingStartedVideos.length - 1 && <Divider />}
+          {i < videos.length - 1 && <Divider />}
         </Fragment>
       ))}
     </StickyScrollable>