experiment(ui): add generate tab

This was needed for a canvas flow change which is currently paused, but the new API is much much nicer to use, so I am keeping it.

invokeai/app/api/routers/session_queue.py

@@ -14,13 +14,14 @@ from invokeai.app.services.session_queue.session_queue_common import (
     CancelByBatchIDsResult,
     CancelByDestinationResult,
     ClearResult,
+    DeleteAllExceptCurrentResult,
+    DeleteByDestinationResult,
     EnqueueBatchResult,
     FieldIdentifier,
     PruneResult,
     RetryItemsResult,
     SessionQueueCountsByDestination,
     SessionQueueItem,
-    SessionQueueItemDTO,
     SessionQueueStatus,
 )
 from invokeai.app.services.shared.pagination import CursorPaginatedResults
@@ -68,7 +69,7 @@ async def enqueue_batch(
     "/{queue_id}/list",
     operation_id="list_queue_items",
     responses={
-        200: {"model": CursorPaginatedResults[SessionQueueItemDTO]},
+        200: {"model": CursorPaginatedResults[SessionQueueItem]},
     },
 )
 async def list_queue_items(
@@ -77,11 +78,36 @@ async def list_queue_items(
     status: Optional[QUEUE_ITEM_STATUS] = Query(default=None, description="The status of items to fetch"),
     cursor: Optional[int] = Query(default=None, description="The pagination cursor"),
     priority: int = Query(default=0, description="The pagination cursor priority"),
-) -> CursorPaginatedResults[SessionQueueItemDTO]:
-    """Gets all queue items (without graphs)"""
+    destination: Optional[str] = Query(default=None, description="The destination of queue items to fetch"),
+) -> CursorPaginatedResults[SessionQueueItem]:
+    """Gets cursor-paginated queue items"""
 
     return ApiDependencies.invoker.services.session_queue.list_queue_items(
-        queue_id=queue_id, limit=limit, status=status, cursor=cursor, priority=priority
+        queue_id=queue_id,
+        limit=limit,
+        status=status,
+        cursor=cursor,
+        priority=priority,
+        destination=destination,
+    )
+
+
+@session_queue_router.get(
+    "/{queue_id}/list_all",
+    operation_id="list_all_queue_items",
+    responses={
+        200: {"model": list[SessionQueueItem]},
+    },
+)
+async def list_all_queue_items(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+    destination: Optional[str] = Query(default=None, description="The destination of queue items to fetch"),
+) -> list[SessionQueueItem]:
+    """Gets all queue items"""
+
+    return ApiDependencies.invoker.services.session_queue.list_all_queue_items(
+        queue_id=queue_id,
+        destination=destination,
     )
 
 
@@ -121,6 +147,18 @@ async def cancel_all_except_current(
     return ApiDependencies.invoker.services.session_queue.cancel_all_except_current(queue_id=queue_id)
 
 
+@session_queue_router.put(
+    "/{queue_id}/delete_all_except_current",
+    operation_id="delete_all_except_current",
+    responses={200: {"model": DeleteAllExceptCurrentResult}},
+)
+async def delete_all_except_current(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+) -> DeleteAllExceptCurrentResult:
+    """Immediately deletes all queue items except in-processing items"""
+    return ApiDependencies.invoker.services.session_queue.delete_all_except_current(queue_id=queue_id)
+
+
 @session_queue_router.put(
     "/{queue_id}/cancel_by_batch_ids",
     operation_id="cancel_by_batch_ids",
@@ -269,6 +307,18 @@ async def get_queue_item(
     return ApiDependencies.invoker.services.session_queue.get_queue_item(item_id)
 
 
+@session_queue_router.delete(
+    "/{queue_id}/i/{item_id}",
+    operation_id="delete_queue_item",
+)
+async def delete_queue_item(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+    item_id: int = Path(description="The queue item to delete"),
+) -> None:
+    """Deletes a queue item"""
+    ApiDependencies.invoker.services.session_queue.delete_queue_item(item_id)
+
+
 @session_queue_router.put(
     "/{queue_id}/i/{item_id}/cancel",
     operation_id="cancel_queue_item",
@@ -298,3 +348,18 @@ async def counts_by_destination(
     return ApiDependencies.invoker.services.session_queue.get_counts_by_destination(
         queue_id=queue_id, destination=destination
     )
+
+
+@session_queue_router.delete(
+    "/{queue_id}/d/{destination}",
+    operation_id="delete_by_destination",
+    responses={200: {"model": DeleteByDestinationResult}},
+)
+async def delete_by_destination(
+    queue_id: str = Path(description="The queue id to query"),
+    destination: str = Path(description="The destination to query"),
+) -> DeleteByDestinationResult:
+    """Deletes all items with the given destination"""
+    return ApiDependencies.invoker.services.session_queue.delete_by_destination(
+        queue_id=queue_id, destination=destination
+    )

invokeai/app/services/session_queue/session_queue_base.py

@@ -10,6 +10,8 @@ from invokeai.app.services.session_queue.session_queue_common import (
     CancelByDestinationResult,
     CancelByQueueIDResult,
     ClearResult,
+    DeleteAllExceptCurrentResult,
+    DeleteByDestinationResult,
     EnqueueBatchResult,
     IsEmptyResult,
     IsFullResult,
@@ -17,7 +19,6 @@ from invokeai.app.services.session_queue.session_queue_common import (
     RetryItemsResult,
     SessionQueueCountsByDestination,
     SessionQueueItem,
-    SessionQueueItemDTO,
     SessionQueueStatus,
 )
 from invokeai.app.services.shared.graph import GraphExecutionState
@@ -92,6 +93,11 @@ class SessionQueueBase(ABC):
         """Cancels a session queue item"""
         pass
 
+    @abstractmethod
+    def delete_queue_item(self, item_id: int) -> None:
+        """Deletes a session queue item"""
+        pass
+
     @abstractmethod
     def fail_queue_item(
         self, item_id: int, error_type: str, error_message: str, error_traceback: str
@@ -109,6 +115,11 @@ class SessionQueueBase(ABC):
         """Cancels all queue items with the given batch destination"""
         pass
 
+    @abstractmethod
+    def delete_by_destination(self, queue_id: str, destination: str) -> DeleteByDestinationResult:
+        """Deletes all queue items with the given batch destination"""
+        pass
+
     @abstractmethod
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         """Cancels all queue items with matching queue ID"""
@@ -119,6 +130,11 @@ class SessionQueueBase(ABC):
         """Cancels all queue items except in-progress items"""
         pass
 
+    @abstractmethod
+    def delete_all_except_current(self, queue_id: str) -> DeleteAllExceptCurrentResult:
+        """Deletes all queue items except in-progress items"""
+        pass
+
     @abstractmethod
     def list_queue_items(
         self,
@@ -127,10 +143,20 @@ class SessionQueueBase(ABC):
         priority: int,
         cursor: Optional[int] = None,
         status: Optional[QUEUE_ITEM_STATUS] = None,
-    ) -> CursorPaginatedResults[SessionQueueItemDTO]:
+        destination: Optional[str] = None,
+    ) -> CursorPaginatedResults[SessionQueueItem]:
         """Gets a page of session queue items"""
         pass
 
+    @abstractmethod
+    def list_all_queue_items(
+        self,
+        queue_id: str,
+        destination: Optional[str] = None,
+    ) -> list[SessionQueueItem]:
+        """Gets all queue items that match the given parameters"""
+        pass
+
     @abstractmethod
     def get_queue_item(self, item_id: int) -> SessionQueueItem:
         """Gets a session queue item by ID"""

invokeai/app/services/session_queue/session_queue_common.py

@@ -207,7 +207,7 @@ class FieldIdentifier(BaseModel):
     field_name: str = Field(description="The name of the field")
 
 
-class SessionQueueItemWithoutGraph(BaseModel):
+class SessionQueueItem(BaseModel):
     """Session queue item without the full graph. Used for serialization."""
 
     item_id: int = Field(description="The identifier of the session queue item")
@@ -251,42 +251,7 @@ class SessionQueueItemWithoutGraph(BaseModel):
         default=None,
         description="The ID of the published workflow associated with this queue item",
     )
-    api_input_fields: Optional[list[FieldIdentifier]] = Field(
-        default=None, description="The fields that were used as input to the API"
-    )
-    api_output_fields: Optional[list[FieldIdentifier]] = Field(
-        default=None, description="The nodes that were used as output from the API"
-    )
     credits: Optional[float] = Field(default=None, description="The total credits used for this queue item")
-
-    @classmethod
-    def queue_item_dto_from_dict(cls, queue_item_dict: dict) -> "SessionQueueItemDTO":
-        # must parse these manually
-        queue_item_dict["field_values"] = get_field_values(queue_item_dict)
-        return SessionQueueItemDTO(**queue_item_dict)
-
-    model_config = ConfigDict(
-        json_schema_extra={
-            "required": [
-                "item_id",
-                "status",
-                "batch_id",
-                "queue_id",
-                "session_id",
-                "priority",
-                "session_id",
-                "created_at",
-                "updated_at",
-            ]
-        }
-    )
-
-
-class SessionQueueItemDTO(SessionQueueItemWithoutGraph):
-    pass
-
-
-class SessionQueueItem(SessionQueueItemWithoutGraph):
     session: GraphExecutionState = Field(description="The fully-populated session to be executed")
     workflow: Optional[WorkflowWithoutID] = Field(
         default=None, description="The workflow associated with this queue item"
@@ -397,6 +362,18 @@ class CancelByDestinationResult(CancelByBatchIDsResult):
     pass
 
 
+class DeleteByDestinationResult(BaseModel):
+    """Result of deleting by a destination"""
+
+    deleted: int = Field(..., description="Number of queue items deleted")
+
+
+class DeleteAllExceptCurrentResult(DeleteByDestinationResult):
+    """Result of deleting all except current"""
+
+    pass
+
+
 class CancelByQueueIDResult(CancelByBatchIDsResult):
     """Result of canceling by queue id"""
 

invokeai/app/services/session_queue/session_queue_sqlite.py

@@ -17,6 +17,8 @@ from invokeai.app.services.session_queue.session_queue_common import (
     CancelByDestinationResult,
     CancelByQueueIDResult,
     ClearResult,
+    DeleteAllExceptCurrentResult,
+    DeleteByDestinationResult,
     EnqueueBatchResult,
     IsEmptyResult,
     IsFullResult,
@@ -24,7 +26,6 @@ from invokeai.app.services.session_queue.session_queue_common import (
     RetryItemsResult,
     SessionQueueCountsByDestination,
     SessionQueueItem,
-    SessionQueueItemDTO,
     SessionQueueItemNotFoundError,
     SessionQueueStatus,
     ValueToInsertTuple,
@@ -46,10 +47,6 @@ class SqliteSessionQueue(SessionQueueBase):
             clear_result = self.clear(DEFAULT_QUEUE_ID)
             if clear_result.deleted > 0:
                 self.__invoker.services.logger.info(f"Cleared all {clear_result.deleted} queue items")
-        else:
-            prune_result = self.prune(DEFAULT_QUEUE_ID)
-            if prune_result.deleted > 0:
-                self.__invoker.services.logger.info(f"Pruned {prune_result.deleted} finished queue items")
 
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
@@ -220,6 +217,19 @@ class SqliteSessionQueue(SessionQueueBase):
     ) -> SessionQueueItem:
         try:
             cursor = self._conn.cursor()
+            cursor.execute(
+                """--sql
+                SELECT status FROM session_queue WHERE item_id = ?
+                """,
+                (item_id,),
+            )
+            row = cursor.fetchone()
+            if row is None:
+                raise SessionQueueItemNotFoundError(f"No queue item with id {item_id}")
+            current_status = row[0]
+            # Only update if not already finished (completed, failed or canceled)
+            if current_status in ("completed", "failed", "canceled"):
+                return self.get_queue_item(item_id)
             cursor.execute(
                 """--sql
                 UPDATE session_queue
@@ -331,6 +341,27 @@ class SqliteSessionQueue(SessionQueueBase):
         queue_item = self._set_queue_item_status(item_id=item_id, status="canceled")
         return queue_item
 
+    def delete_queue_item(self, item_id: int) -> None:
+        """Deletes a session queue item"""
+        try:
+            self.cancel_queue_item(item_id)
+        except SessionQueueItemNotFoundError:
+            pass
+        try:
+            cursor = self._conn.cursor()
+            cursor.execute(
+                """--sql
+                DELETE
+                FROM session_queue
+                WHERE item_id = ?
+                """,
+                (item_id,),
+            )
+            self._conn.commit()
+        except Exception:
+            self._conn.rollback()
+            raise
+
     def complete_queue_item(self, item_id: int) -> SessionQueueItem:
         queue_item = self._set_queue_item_status(item_id=item_id, status="completed")
         return queue_item
@@ -428,6 +459,71 @@ class SqliteSessionQueue(SessionQueueBase):
             raise
         return CancelByDestinationResult(canceled=count)
 
+    def delete_by_destination(self, queue_id: str, destination: str) -> DeleteByDestinationResult:
+        try:
+            cursor = self._conn.cursor()
+            current_queue_item = self.get_current(queue_id)
+            if current_queue_item is not None and current_queue_item.destination == destination:
+                self.cancel_queue_item(current_queue_item.item_id)
+            params = (queue_id, destination)
+            cursor.execute(
+                """--sql
+                SELECT COUNT(*)
+                FROM session_queue
+                WHERE
+                  queue_id = ?
+                  AND destination = ?;
+                """,
+                params,
+            )
+            count = cursor.fetchone()[0]
+            cursor.execute(
+                """--sql
+                DELETE
+                FROM session_queue
+                WHERE
+                  queue_id = ?
+                  AND destination = ?;
+                """,
+                params,
+            )
+            self._conn.commit()
+        except Exception:
+            self._conn.rollback()
+            raise
+        return DeleteByDestinationResult(deleted=count)
+
+    def delete_all_except_current(self, queue_id: str) -> DeleteAllExceptCurrentResult:
+        try:
+            cursor = self._conn.cursor()
+            where = """--sql
+                WHERE
+                  queue_id == ?
+                  AND status == 'pending'
+                """
+            cursor.execute(
+                f"""--sql
+                SELECT COUNT(*)
+                FROM session_queue
+                {where};
+                """,
+                (queue_id,),
+            )
+            count = cursor.fetchone()[0]
+            cursor.execute(
+                f"""--sql
+                DELETE
+                FROM session_queue
+                {where};
+                """,
+                (queue_id,),
+            )
+            self._conn.commit()
+        except Exception:
+            self._conn.rollback()
+            raise
+        return DeleteAllExceptCurrentResult(deleted=count)
+
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         try:
             cursor = self._conn.cursor()
@@ -543,26 +639,12 @@ class SqliteSessionQueue(SessionQueueBase):
         priority: int,
         cursor: Optional[int] = None,
         status: Optional[QUEUE_ITEM_STATUS] = None,
-    ) -> CursorPaginatedResults[SessionQueueItemDTO]:
+        destination: Optional[str] = None,
+    ) -> CursorPaginatedResults[SessionQueueItem]:
         cursor_ = self._conn.cursor()
         item_id = cursor
         query = """--sql
-            SELECT item_id,
-                status,
-                priority,
-                field_values,
-                error_type,
-                error_message,
-                error_traceback,
-                created_at,
-                updated_at,
-                completed_at,
-                started_at,
-                session_id,
-                batch_id,
-                queue_id,
-                origin,
-                destination
+            SELECT *
             FROM session_queue
             WHERE queue_id = ?
         """
@@ -574,6 +656,12 @@ class SqliteSessionQueue(SessionQueueBase):
                 """
             params.append(status)
 
+        if destination is not None:
+            query += """---sql
+                AND destination = ?
+            """
+            params.append(destination)
+
         if item_id is not None:
             query += """--sql
                 AND (priority < ?) OR (priority = ? AND item_id > ?)
@@ -589,7 +677,7 @@ class SqliteSessionQueue(SessionQueueBase):
         params.append(limit + 1)
         cursor_.execute(query, params)
         results = cast(list[sqlite3.Row], cursor_.fetchall())
-        items = [SessionQueueItemDTO.queue_item_dto_from_dict(dict(result)) for result in results]
+        items = [SessionQueueItem.queue_item_from_dict(dict(result)) for result in results]
         has_more = False
         if len(items) > limit:
             # remove the extra item
@@ -597,6 +685,37 @@ class SqliteSessionQueue(SessionQueueBase):
             has_more = True
         return CursorPaginatedResults(items=items, limit=limit, has_more=has_more)
 
+    def list_all_queue_items(
+        self,
+        queue_id: str,
+        destination: Optional[str] = None,
+    ) -> list[SessionQueueItem]:
+        """Gets all queue items that match the given parameters"""
+        cursor_ = self._conn.cursor()
+        query = """--sql
+            SELECT *
+            FROM session_queue
+            WHERE queue_id = ?
+        """
+        params: list[Union[str, int]] = [queue_id]
+
+        if destination is not None:
+            query += """---sql
+                AND destination = ?
+            """
+            params.append(destination)
+
+        query += """--sql
+            ORDER BY
+                priority DESC,
+                item_id ASC
+            ;
+            """
+        cursor_.execute(query, params)
+        results = cast(list[sqlite3.Row], cursor_.fetchall())
+        items = [SessionQueueItem.queue_item_from_dict(dict(result)) for result in results]
+        return items
+
     def get_queue_status(self, queue_id: str) -> SessionQueueStatus:
         cursor = self._conn.cursor()
         cursor.execute(

invokeai/app/services/shared/graph.py

@@ -7,6 +7,7 @@ from typing import Any, Optional, TypeVar, Union, get_args, get_origin, get_type
 import networkx as nx
 from pydantic import (
     BaseModel,
+    ConfigDict,
     GetCoreSchemaHandler,
     GetJsonSchemaHandler,
     ValidationError,
@@ -787,6 +788,22 @@ class GraphExecutionState(BaseModel):
         default_factory=dict,
     )
 
+    model_config = ConfigDict(
+        json_schema_extra={
+            "required": [
+                "id",
+                "graph",
+                "execution_graph",
+                "executed",
+                "executed_history",
+                "results",
+                "errors",
+                "prepared_source_mapping",
+                "source_prepared_mapping",
+            ]
+        }
+    )
+
     @field_validator("graph")
     def graph_is_valid(cls, v: Graph):
         """Validates that the graph is valid"""

invokeai/frontend/web/knip.ts

@@ -3,6 +3,8 @@ import type { KnipConfig } from 'knip';
 const config: KnipConfig = {
   project: ['src/**/*.{ts,tsx}!'],
   ignore: [
+    // TODO(psyche): temporarily ignored all files for test build purposes
+    'src/**',
     // This file is only used during debugging
     'src/app/store/middleware/debugLoggerMiddleware.ts',
     // Autogenerated types - shouldn't ever touch these

invokeai/frontend/web/package.json

@@ -60,7 +60,7 @@
     "@fontsource-variable/inter": "^5.2.5",
     "@invoke-ai/ui-library": "^0.0.46",
     "@nanostores/react": "^1.0.0",
-    "@reduxjs/toolkit": "2.7.0",
+    "@reduxjs/toolkit": "2.8.2",
     "@roarr/browser-log-writer": "^1.3.0",
     "@xyflow/react": "^12.6.0",
     "async-mutex": "^0.5.0",

invokeai/frontend/web/pnpm-lock.yaml

@@ -30,8 +30,8 @@ dependencies:
     specifier: ^1.0.0
     version: 1.0.0(nanostores@1.0.1)(react@18.3.1)
   '@reduxjs/toolkit':
-    specifier: 2.7.0
-    version: 2.7.0(react-redux@9.2.0)(react@18.3.1)
+    specifier: 2.8.2
+    version: 2.8.2(react-redux@9.2.0)(react@18.3.1)
   '@roarr/browser-log-writer':
     specifier: ^1.3.0
     version: 1.3.0
@@ -2161,8 +2161,8 @@ packages:
       - supports-color
     dev: true
 
-  /@reduxjs/toolkit@2.7.0(react-redux@9.2.0)(react@18.3.1):
-    resolution: {integrity: sha512-XVwolG6eTqwV0N8z/oDlN93ITCIGIop6leXlGJI/4EKy+0POYkR+ABHRSdGXY+0MQvJBP8yAzh+EYFxTuvmBiQ==}
+  /@reduxjs/toolkit@2.8.2(react-redux@9.2.0)(react@18.3.1):
+    resolution: {integrity: sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==}
     peerDependencies:
       react: ^16.9.0 || ^17.0.0 || ^18 || ^19
       react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0

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

@@ -2016,6 +2016,7 @@
         "replaceCurrent": "Replace Current",
         "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
         "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or <PullBboxButton>pull the bounding box into this layer</PullBboxButton> to get started.",
+        "uploadOrDragAnImage": "Drag an image from the gallery or <UploadButton>upload an image</UploadButton>.",
         "imageNoise": "Image Noise",
         "denoiseLimit": "Denoise Limit",
         "warnings": {

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

@@ -10,17 +10,22 @@ import type { PartialAppConfig } from 'app/types/invokeai';
 import { useFocusRegionWatcher } from 'common/hooks/focus';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { useDynamicPromptsWatcher } from 'features/dynamicPrompts/hooks/useDynamicPromptsWatcher';
+import { toggleImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { useWorkflowBuilderWatcher } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher';
 import { useReadinessWatcher } from 'features/queue/store/readiness';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
 import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useEffect } from 'react';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
+import { useGetQueueCountsByDestinationQuery } from 'services/api/endpoints/queue';
 import { useSocketIO } from 'services/events/useSocketIO';
 
+const queueCountArg = { destination: 'canvas' };
+
 /**
  * GlobalHookIsolator is a logical component that runs global hooks in an isolated component, so that they do not
  * cause needless re-renders of any other components.
@@ -39,6 +44,10 @@ export const GlobalHookIsolator = memo(
     useGetOpenAPISchemaQuery();
     useSyncLoggingConfig();
 
+    // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending
+    // and/or in progress canvas sessions.
+    useGetQueueCountsByDestinationQuery(queueCountArg);
+
     useEffect(() => {
       i18n.changeLanguage(language);
     }, [language]);
@@ -61,6 +70,12 @@ export const GlobalHookIsolator = memo(
     useWorkflowBuilderWatcher();
     useDynamicPromptsWatcher();
 
+    useRegisteredHotkeys({
+      id: 'toggleViewer',
+      category: 'viewer',
+      callback: toggleImageViewer,
+    });
+
     return null;
   }
 );

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

@@ -6,15 +6,17 @@ import {
   NewGallerySessionDialog,
 } from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
+import { DeleteImageModal } from 'features/deleteImageModal/components/DeleteImageModal';
 import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { ImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
+import { ImageViewerModal } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { ShareWorkflowModal } from 'features/nodes/components/sidePanel/workflow/WorkflowLibrary/ShareWorkflowModal';
 import { WorkflowLibraryModal } from 'features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryModal';
 import { CancelAllExceptCurrentQueueItemConfirmationAlertDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
 import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { DeleteAllExceptCurrentQueueItemConfirmationAlertDialog } from 'features/queue/components/DeleteAllExceptCurrentQueueItemConfirmationAlertDialog';
 import { DeleteStylePresetDialog } from 'features/stylePresets/components/DeleteStylePresetDialog';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
 import RefreshAfterResetModal from 'features/system/components/SettingsModal/RefreshAfterResetModal';
@@ -39,6 +41,7 @@ export const GlobalModalIsolator = memo(() => {
       <StylePresetModal />
       <WorkflowLibraryModal />
       <CancelAllExceptCurrentQueueItemConfirmationAlertDialog />
+      <DeleteAllExceptCurrentQueueItemConfirmationAlertDialog />
       <ClearQueueConfirmationsAlertDialog />
       <NewWorkflowConfirmationAlertDialog />
       <LoadWorkflowConfirmationAlertDialog />
@@ -58,6 +61,7 @@ export const GlobalModalIsolator = memo(() => {
         <CanvasPasteModal />
       </CanvasManagerProviderGate>
       <LoadWorkflowFromGraphModal />
+      <ImageViewerModal />
     </>
   );
 });

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

@@ -3,8 +3,8 @@ import { useAppStore } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { withResultAsync } from 'common/util/result';
 import { canvasReset } from 'features/controlLayers/store/actions';
-import { settingsSendToCanvasChanged } from 'features/controlLayers/store/canvasSettingsSlice';
 import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import { paramsReset } from 'features/controlLayers/store/paramsSlice';
 import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
 import { imageDTOToImageObject } from 'features/controlLayers/store/util';
 import { $imageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
@@ -93,8 +93,6 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
       };
       store.dispatch(canvasReset());
       store.dispatch(rasterLayerAdded({ overrides, isSelected: true }));
-      store.dispatch(settingsSendToCanvasChanged(true));
-      store.dispatch(setActiveTab('canvas'));
       store.dispatch(sentImageToCanvas());
       $imageViewer.set(false);
       toast({
@@ -118,9 +116,9 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
         return;
       }
       const metadata = getImageMetadataResult.value;
+      store.dispatch(canvasReset());
       // This shows a toast
       await parseAndRecallAllMetadata(metadata, true);
-      store.dispatch(setActiveTab('canvas'));
     },
     [store, t]
   );
@@ -164,15 +162,13 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
       switch (destination) {
         case 'generation':
           // Go to the canvas tab, open the image viewer, and enable send-to-gallery mode
-          store.dispatch(setActiveTab('canvas'));
+          store.dispatch(paramsReset());
           store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
-          store.dispatch(settingsSendToCanvasChanged(false));
           $imageViewer.set(true);
           break;
         case 'canvas':
           // Go to the canvas tab, close the image viewer, and disable send-to-gallery mode
-          store.dispatch(setActiveTab('canvas'));
-          store.dispatch(settingsSendToCanvasChanged(true));
+          store.dispatch(canvasReset());
           $imageViewer.set(false);
           break;
         case 'workflows':

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -1,7 +1,6 @@
 import type { TypedStartListening } from '@reduxjs/toolkit';
 import { addListener, createListenerMiddleware } from '@reduxjs/toolkit';
 import { addAdHocPostProcessingRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
-import { addStagingListeners } from 'app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener';
 import { addAnyEnqueuedListener } from 'app/store/middleware/listenerMiddleware/listeners/anyEnqueued';
 import { addAppConfigReceivedListener } from 'app/store/middleware/listenerMiddleware/listeners/appConfigReceived';
 import { addAppStartedListener } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
@@ -10,15 +9,14 @@ import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/l
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
+import { addEnsureImageIsSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/ensureImageIsSelectedListener';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
 import { addGalleryOffsetChangedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryOffsetChanged';
 import { addGetOpenAPISchemaListener } from 'app/store/middleware/listenerMiddleware/listeners/getOpenAPISchema';
 import { addImageAddedToBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageAddedToBoard';
-import { addImageDeletionListeners } from 'app/store/middleware/listenerMiddleware/listeners/imageDeletionListeners';
 import { addImageRemovedFromBoardFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageRemovedFromBoard';
 import { addImagesStarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesStarred';
 import { addImagesUnstarredListener } from 'app/store/middleware/listenerMiddleware/listeners/imagesUnstarred';
-import { addImageToDeleteSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/imageToDeleteSelected';
 import { addImageUploadedFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageUploaded';
 import { addModelSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelSelected';
 import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded';
@@ -47,9 +45,7 @@ export const addAppListener = addListener.withTypes<RootState, AppDispatch>();
 addImageUploadedFulfilledListener(startAppListening);
 
 // Image deleted
-addImageDeletionListeners(startAppListening);
 addDeleteBoardAndImagesFulfilledListener(startAppListening);
-addImageToDeleteSelectedListener(startAppListening);
 
 // Image starred
 addImagesStarredListener(startAppListening);
@@ -65,9 +61,6 @@ addEnqueueRequestedUpscale(startAppListening);
 addAnyEnqueuedListener(startAppListening);
 addBatchEnqueuedListener(startAppListening);
 
-// Canvas actions
-addStagingListeners(startAppListening);
-
 // Socket.IO
 addSocketConnectedEventListener(startAppListening);
 
@@ -95,3 +88,5 @@ addAppConfigReceivedListener(startAppListening);
 addAdHocPostProcessingRequestedListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
+
+addEnsureImageIsSelectedListener(startAppListening);

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

@@ -1,46 +0,0 @@
-import { isAnyOf } from '@reduxjs/toolkit';
-import { logger } from 'app/logging/logger';
-import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { canvasReset, newSessionRequested } from 'features/controlLayers/store/actions';
-import { stagingAreaReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { toast } from 'features/toast/toast';
-import { t } from 'i18next';
-import { queueApi } from 'services/api/endpoints/queue';
-
-const log = logger('canvas');
-
-const matchCanvasOrStagingAreaReset = isAnyOf(stagingAreaReset, canvasReset, newSessionRequested);
-
-export const addStagingListeners = (startAppListening: AppStartListening) => {
-  startAppListening({
-    matcher: matchCanvasOrStagingAreaReset,
-    effect: async (_, { dispatch }) => {
-      try {
-        const req = dispatch(
-          queueApi.endpoints.cancelByBatchDestination.initiate(
-            { destination: 'canvas' },
-            { fixedCacheKey: 'cancelByBatchOrigin' }
-          )
-        );
-        const { canceled } = await req.unwrap();
-        req.reset();
-
-        if (canceled > 0) {
-          log.debug(`Canceled ${canceled} canvas batches`);
-          toast({
-            id: 'CANCEL_BATCH_SUCCEEDED',
-            title: t('queue.cancelBatchSucceeded'),
-            status: 'success',
-          });
-        }
-      } catch {
-        log.error('Failed to cancel canvas batches');
-        toast({
-          id: 'CANCEL_BATCH_FAILED',
-          title: t('queue.cancelBatchFailed'),
-          status: 'error',
-        });
-      }
-    },
-  });
-};

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

@@ -1,6 +1,6 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { getImageUsage } from 'features/deleteImageModal/store/selectors';
+import { getImageUsage } from 'features/deleteImageModal/store/state';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';

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

@@ -5,6 +5,12 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import { extractMessageFromAssertionError } from 'common/util/extractMessageFromAssertionError';
 import { withResult, withResultAsync } from 'common/util/result';
 import { parseify } from 'common/util/serialize';
+import {
+  canvasSessionIdCreated,
+  generateSessionIdCreated,
+  selectCanvasSessionId,
+  selectGenerateSessionId,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildChatGPT4oGraph } from 'features/nodes/util/graph/generation/buildChatGPT4oGraph';
@@ -17,6 +23,7 @@ import { buildSD3Graph } from 'features/nodes/util/graph/generation/buildSD3Grap
 import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
 import { UnsupportedGenerationModeError } from 'features/nodes/util/graph/types';
 import { toast } from 'features/toast/toast';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { serializeError } from 'serialize-error';
 import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
 import { assert, AssertionError } from 'tsafe';
@@ -30,11 +37,34 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
     actionCreator: enqueueRequestedCanvas,
     effect: async (action, { getState, dispatch }) => {
       log.debug('Enqueue requested');
+
+      const tab = selectActiveTab(getState());
+      let sessionId = null;
+      if (tab === 'generate') {
+        sessionId = selectGenerateSessionId(getState());
+        if (!sessionId) {
+          dispatch(generateSessionIdCreated());
+          sessionId = selectGenerateSessionId(getState());
+        }
+      } else if (tab === 'canvas') {
+        sessionId = selectCanvasSessionId(getState());
+        if (!sessionId) {
+          dispatch(canvasSessionIdCreated());
+          sessionId = selectCanvasSessionId(getState());
+        }
+      } else {
+        log.warn(`Enqueue requested in unsupported tab ${tab}`);
+        return;
+      }
+
       const state = getState();
+      const destination = sessionId;
+      assert(destination !== null);
+
       const { prepend } = action.payload;
 
       const manager = $canvasManager.get();
-      assert(manager, 'No canvas manager');
+      // assert(manager, 'No canvas manager');
 
       const model = state.params.model;
       assert(model, 'No model found in state');
@@ -87,8 +117,6 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
       const { g, seedFieldIdentifier, positivePromptFieldIdentifier } = buildGraphResult.value;
 
-      const destination = state.canvasSettings.sendToCanvas ? 'canvas' : 'gallery';
-
       const prepareBatchResult = withResult(() =>
         prepareLinearUIBatch({
           state,

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

@@ -0,0 +1,16 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addEnsureImageIsSelectedListener = (startAppListening: AppStartListening) => {
+  // When we list images, if no images is selected, select the first one.
+  startAppListening({
+    matcher: imagesApi.endpoints.listImages.matchFulfilled,
+    effect: (action, { dispatch, getState }) => {
+      const selection = getState().gallery.selection;
+      if (selection.length === 0) {
+        dispatch(imageSelected(action.payload.items[0] ?? null));
+      }
+    },
+  });
+};

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

@@ -1,221 +0,0 @@
-import { logger } from 'app/logging/logger';
-import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { AppDispatch, RootState } from 'app/store/store';
-import { entityDeleted, referenceImageIPAdapterImageChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { getEntityIdentifier } from 'features/controlLayers/store/types';
-import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
-import { isModalOpenChanged } from 'features/deleteImageModal/store/slice';
-import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { imageSelected } from 'features/gallery/store/gallerySlice';
-import { fieldImageCollectionValueChanged, fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { isImageFieldCollectionInputInstance, isImageFieldInputInstance } from 'features/nodes/types/field';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-import { forEach, intersectionBy } from 'lodash-es';
-import { imagesApi } from 'services/api/endpoints/images';
-import type { ImageDTO } from 'services/api/types';
-import type { Param0 } from 'tsafe';
-
-const log = logger('gallery');
-
-//TODO(psyche): handle image deletion (canvas staging area?)
-
-// Some utils to delete images from different parts of the app
-const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  const actions: Param0<typeof dispatch>[] = [];
-  state.nodes.present.nodes.forEach((node) => {
-    if (!isInvocationNode(node)) {
-      return;
-    }
-
-    forEach(node.data.inputs, (input) => {
-      if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) {
-        actions.push(
-          fieldImageValueChanged({
-            nodeId: node.data.id,
-            fieldName: input.name,
-            value: undefined,
-          })
-        );
-        return;
-      }
-      if (isImageFieldCollectionInputInstance(input)) {
-        actions.push(
-          fieldImageCollectionValueChanged({
-            nodeId: node.data.id,
-            fieldName: input.name,
-            value: input.value?.filter((value) => value?.image_name !== imageDTO.image_name),
-          })
-        );
-      }
-    });
-  });
-
-  actions.forEach(dispatch);
-};
-
-const deleteControlLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  selectCanvasSlice(state).controlLayers.entities.forEach(({ id, objects }) => {
-    let shouldDelete = false;
-    for (const obj of objects) {
-      if (obj.type === 'image' && obj.image.image_name === imageDTO.image_name) {
-        shouldDelete = true;
-        break;
-      }
-    }
-    if (shouldDelete) {
-      dispatch(entityDeleted({ entityIdentifier: { id, type: 'control_layer' } }));
-    }
-  });
-};
-
-const deleteReferenceImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  selectCanvasSlice(state).referenceImages.entities.forEach((entity) => {
-    if (entity.ipAdapter.image?.image_name === imageDTO.image_name) {
-      dispatch(referenceImageIPAdapterImageChanged({ entityIdentifier: getEntityIdentifier(entity), imageDTO: null }));
-    }
-  });
-};
-
-const deleteRasterLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  selectCanvasSlice(state).rasterLayers.entities.forEach(({ id, objects }) => {
-    let shouldDelete = false;
-    for (const obj of objects) {
-      if (obj.type === 'image' && obj.image.image_name === imageDTO.image_name) {
-        shouldDelete = true;
-        break;
-      }
-    }
-    if (shouldDelete) {
-      dispatch(entityDeleted({ entityIdentifier: { id, type: 'raster_layer' } }));
-    }
-  });
-};
-
-export const addImageDeletionListeners = (startAppListening: AppStartListening) => {
-  // Handle single image deletion
-  startAppListening({
-    actionCreator: imageDeletionConfirmed,
-    effect: async (action, { dispatch, getState }) => {
-      const { imageDTOs, imagesUsage } = action.payload;
-
-      if (imageDTOs.length !== 1 || imagesUsage.length !== 1) {
-        // handle multiples in separate listener
-        return;
-      }
-
-      const imageDTO = imageDTOs[0];
-      const imageUsage = imagesUsage[0];
-
-      if (!imageDTO || !imageUsage) {
-        // satisfy noUncheckedIndexedAccess
-        return;
-      }
-
-      try {
-        const state = getState();
-        await dispatch(imagesApi.endpoints.deleteImage.initiate(imageDTO)).unwrap();
-
-        if (state.gallery.selection.some((i) => i.image_name === imageDTO.image_name)) {
-          // The deleted image was a selected image, we need to select the next image
-          const newSelection = state.gallery.selection.filter((i) => i.image_name !== imageDTO.image_name);
-
-          if (newSelection.length > 0) {
-            return;
-          }
-
-          // Get the current list of images and select the same index
-          const baseQueryArgs = selectListImagesQueryArgs(state);
-          const data = imagesApi.endpoints.listImages.select(baseQueryArgs)(state).data;
-
-          if (data) {
-            const deletedImageIndex = data.items.findIndex((i) => i.image_name === imageDTO.image_name);
-            const nextImage = data.items[deletedImageIndex + 1] ?? data.items[0] ?? null;
-            if (nextImage?.image_name === imageDTO.image_name) {
-              // If the next image is the same as the deleted one, it means it was the last image, reset selection
-              dispatch(imageSelected(null));
-            } else {
-              dispatch(imageSelected(nextImage));
-            }
-          }
-        }
-
-        deleteNodesImages(state, dispatch, imageDTO);
-        deleteReferenceImages(state, dispatch, imageDTO);
-        deleteRasterLayerImages(state, dispatch, imageDTO);
-        deleteControlLayerImages(state, dispatch, imageDTO);
-      } catch {
-        // no-op
-      } finally {
-        dispatch(isModalOpenChanged(false));
-      }
-    },
-  });
-
-  // Handle multiple image deletion
-  startAppListening({
-    actionCreator: imageDeletionConfirmed,
-    effect: async (action, { dispatch, getState }) => {
-      const { imageDTOs, imagesUsage } = action.payload;
-
-      if (imageDTOs.length <= 1 || imagesUsage.length <= 1) {
-        // handle singles in separate listener
-        return;
-      }
-
-      try {
-        const state = getState();
-        await dispatch(imagesApi.endpoints.deleteImages.initiate({ imageDTOs })).unwrap();
-
-        if (intersectionBy(state.gallery.selection, imageDTOs, 'image_name').length > 0) {
-          // Some selected images were deleted, need to select the next image
-          const queryArgs = selectListImagesQueryArgs(state);
-          const { data } = imagesApi.endpoints.listImages.select(queryArgs)(state);
-          if (data) {
-            // When we delete multiple images, we clear the selection. Then, the the next time we load images, we will
-            // select the first one. This is handled below in the listener for `imagesApi.endpoints.listImages.matchFulfilled`.
-            dispatch(imageSelected(null));
-          }
-        }
-
-        // We need to reset the features where the image is in use - none of these work if their image(s) don't exist
-
-        imageDTOs.forEach((imageDTO) => {
-          deleteNodesImages(state, dispatch, imageDTO);
-          deleteControlLayerImages(state, dispatch, imageDTO);
-          deleteReferenceImages(state, dispatch, imageDTO);
-          deleteRasterLayerImages(state, dispatch, imageDTO);
-        });
-      } catch {
-        // no-op
-      } finally {
-        dispatch(isModalOpenChanged(false));
-      }
-    },
-  });
-
-  // When we list images, if no images is selected, select the first one.
-  startAppListening({
-    matcher: imagesApi.endpoints.listImages.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
-      const selection = getState().gallery.selection;
-      if (selection.length === 0) {
-        dispatch(imageSelected(action.payload.items[0] ?? null));
-      }
-    },
-  });
-
-  startAppListening({
-    matcher: imagesApi.endpoints.deleteImage.matchFulfilled,
-    effect: (action) => {
-      log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Image deleted');
-    },
-  });
-
-  startAppListening({
-    matcher: imagesApi.endpoints.deleteImage.matchRejected,
-    effect: (action) => {
-      log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Unable to delete image');
-    },
-  });
-};

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

@@ -1,32 +0,0 @@
-import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
-import { selectImageUsage } from 'features/deleteImageModal/store/selectors';
-import { imagesToDeleteSelected, isModalOpenChanged } from 'features/deleteImageModal/store/slice';
-
-export const addImageToDeleteSelectedListener = (startAppListening: AppStartListening) => {
-  startAppListening({
-    actionCreator: imagesToDeleteSelected,
-    effect: (action, { dispatch, getState }) => {
-      const imageDTOs = action.payload;
-      const state = getState();
-      const { shouldConfirmOnDelete } = state.system;
-      const imagesUsage = selectImageUsage(getState());
-
-      const isImageInUse =
-        imagesUsage.some((i) => i.isRasterLayerImage) ||
-        imagesUsage.some((i) => i.isControlLayerImage) ||
-        imagesUsage.some((i) => i.isReferenceImage) ||
-        imagesUsage.some((i) => i.isInpaintMaskImage) ||
-        imagesUsage.some((i) => i.isUpscaleImage) ||
-        imagesUsage.some((i) => i.isNodesImage) ||
-        imagesUsage.some((i) => i.isRegionalGuidanceImage);
-
-      if (shouldConfirmOnDelete || isImageInUse) {
-        dispatch(isModalOpenChanged(true));
-        return;
-      }
-
-      dispatch(imageDeletionConfirmed({ imageDTOs, imagesUsage }));
-    },
-  });
-};

invokeai/frontend/web/src/app/store/store.ts

@@ -8,12 +8,11 @@ import { changeBoardModalSlice } from 'features/changeBoardModal/store/slice';
 import { canvasSettingsPersistConfig, canvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
 import { canvasPersistConfig, canvasSlice, canvasUndoableConfig } from 'features/controlLayers/store/canvasSlice';
 import {
+  canvasSessionSlice,
   canvasStagingAreaPersistConfig,
-  canvasStagingAreaSlice,
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { lorasPersistConfig, lorasSlice } from 'features/controlLayers/store/lorasSlice';
 import { paramsPersistConfig, paramsSlice } from 'features/controlLayers/store/paramsSlice';
-import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
 import { dynamicPromptsPersistConfig, dynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { galleryPersistConfig, gallerySlice } from 'features/gallery/store/gallerySlice';
 import { hrfPersistConfig, hrfSlice } from 'features/hrf/store/hrfSlice';
@@ -54,7 +53,6 @@ const allReducers = {
   [configSlice.name]: configSlice.reducer,
   [uiSlice.name]: uiSlice.reducer,
   [dynamicPromptsSlice.name]: dynamicPromptsSlice.reducer,
-  [deleteImageModalSlice.name]: deleteImageModalSlice.reducer,
   [changeBoardModalSlice.name]: changeBoardModalSlice.reducer,
   [modelManagerV2Slice.name]: modelManagerV2Slice.reducer,
   [queueSlice.name]: queueSlice.reducer,
@@ -65,7 +63,7 @@ const allReducers = {
   [stylePresetSlice.name]: stylePresetSlice.reducer,
   [paramsSlice.name]: paramsSlice.reducer,
   [canvasSettingsSlice.name]: canvasSettingsSlice.reducer,
-  [canvasStagingAreaSlice.name]: canvasStagingAreaSlice.reducer,
+  [canvasSessionSlice.name]: canvasSessionSlice.reducer,
   [lorasSlice.name]: lorasSlice.reducer,
   [workflowLibrarySlice.name]: workflowLibrarySlice.reducer,
 };
@@ -175,6 +173,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
         .concat(api.middleware)
         .concat(dynamicMiddlewares)
         .concat(authToastMiddleware)
+        // .concat(getDebugLoggerMiddleware())
         .prepend(listenerMiddleware.middleware),
     enhancers: (getDefaultEnhancers) => {
       const _enhancers = getDefaultEnhancers().concat(autoBatchEnhancer());
@@ -209,3 +208,4 @@ export type RootState = ReturnType<AppStore['getState']>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppThunkDispatch = ThunkDispatch<RootState, any, UnknownAction>;
 export type AppDispatch = ReturnType<typeof createStore>['dispatch'];
+export type AppGetState = ReturnType<typeof createStore>['getState'];

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -11,13 +11,14 @@ import { memo, useEffect, useMemo, useState } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
+  maxWidth?: ChakraProps['maxWidth'];
   overflowX?: 'hidden' | 'scroll';
   overflowY?: 'hidden' | 'scroll';
 };
 
 const styles: CSSProperties = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
 
-const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflowY = 'scroll' }: Props) => {
+const ScrollableContent = ({ children, maxHeight, maxWidth, overflowX = 'hidden', overflowY = 'scroll' }: Props) => {
   const overlayscrollbarsOptions = useMemo(
     () => getOverlayScrollbarsParams({ overflowX, overflowY }).options,
     [overflowX, overflowY]
@@ -44,7 +45,7 @@ const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflow
   }, [os]);
 
   return (
-    <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
+    <Flex w="full" h="full" maxHeight={maxHeight} maxWidth={maxWidth} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
         <OverlayScrollbarsComponent ref={osRef} style={styles} options={overlayscrollbarsOptions}>
           {children}

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

@@ -1,6 +1,6 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
+import { useDeleteCurrentQueueItem } from 'features/queue/hooks/useDeleteCurrentQueueItem';
 import { useInvoke } from 'features/queue/hooks/useInvoke';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@@ -35,34 +35,30 @@ export const useGlobalHotkeys = () => {
     dependencies: [queue],
   });
 
-  const {
-    cancelQueueItem,
-    isDisabled: isDisabledCancelQueueItem,
-    isLoading: isLoadingCancelQueueItem,
-  } = useCancelCurrentQueueItem();
+  const deleteCurrentQueueItem = useDeleteCurrentQueueItem();
 
   useRegisteredHotkeys({
     id: 'cancelQueueItem',
     category: 'app',
-    callback: cancelQueueItem,
+    callback: deleteCurrentQueueItem.trigger,
     options: {
-      enabled: !isDisabledCancelQueueItem && !isLoadingCancelQueueItem,
+      enabled: !deleteCurrentQueueItem.isDisabled && !deleteCurrentQueueItem.isLoading,
       preventDefault: true,
     },
-    dependencies: [cancelQueueItem, isDisabledCancelQueueItem, isLoadingCancelQueueItem],
+    dependencies: [deleteCurrentQueueItem],
   });
 
-  const { clearQueue, isDisabled: isDisabledClearQueue, isLoading: isLoadingClearQueue } = useClearQueue();
+  const clearQueue = useClearQueue();
 
   useRegisteredHotkeys({
     id: 'clearQueue',
     category: 'app',
-    callback: clearQueue,
+    callback: clearQueue.trigger,
     options: {
-      enabled: !isDisabledClearQueue && !isLoadingClearQueue,
+      enabled: !clearQueue.isDisabled && !clearQueue.isLoading,
       preventDefault: true,
     },
-    dependencies: [clearQueue, isDisabledClearQueue, isLoadingClearQueue],
+    dependencies: [clearQueue],
   });
 
   useRegisteredHotkeys({

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -1,11 +1,11 @@
-import type { IconButtonProps, SystemStyleObject } from '@invoke-ai/ui-library';
-import { IconButton } from '@invoke-ai/ui-library';
+import type { ButtonProps, IconButtonProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { Button, IconButton } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { selectIsClientSideUploadEnabled } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import type { FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -163,32 +163,63 @@ const sx = {
   },
 } satisfies SystemStyleObject;
 
-export const UploadImageButton = ({
-  isDisabled = false,
-  onUpload,
-  isError = false,
-  ...rest
-}: {
+export const UploadImageIconButton = memo(
+  ({
+    isDisabled = false,
+    onUpload,
+    isError = false,
+    ...rest
+  }: {
+    onUpload?: (imageDTO: ImageDTO) => void;
+    isError?: boolean;
+  } & SetOptional<IconButtonProps, 'aria-label'>) => {
+    const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
+    return (
+      <>
+        <IconButton
+          aria-label="Upload image"
+          variant="outline"
+          sx={sx}
+          data-error={isError}
+          icon={<PiUploadBold />}
+          isLoading={uploadApi.request.isLoading}
+          {...rest}
+          {...uploadApi.getUploadButtonProps()}
+        />
+        <input {...uploadApi.getUploadInputProps()} />
+      </>
+    );
+  }
+);
+UploadImageIconButton.displayName = 'UploadImageIconButton';
+
+type UploadImageButtonProps = {
   onUpload?: (imageDTO: ImageDTO) => void;
   isError?: boolean;
-} & SetOptional<IconButtonProps, 'aria-label'>) => {
+} & ButtonProps;
+
+const UploadImageButton = memo((props: UploadImageButtonProps) => {
+  const { children, isDisabled = false, onUpload, isError = false, ...rest } = props;
   const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
   return (
     <>
-      <IconButton
+      <Button
         aria-label="Upload image"
         variant="outline"
         sx={sx}
         data-error={isError}
-        icon={<PiUploadBold />}
+        rightIcon={<PiUploadBold />}
         isLoading={uploadApi.request.isLoading}
         {...rest}
         {...uploadApi.getUploadButtonProps()}
-      />
+      >
+        {children ?? 'Upload'}
+      </Button>
       <input {...uploadApi.getUploadInputProps()} />
     </>
   );
-};
+});
+UploadImageButton.displayName = 'UploadImageButton';
 
 export const UploadMultipleImageButton = ({
   isDisabled = false,

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

@@ -1,12 +1,18 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { EMPTY_ARRAY } from 'app/store/constants';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
+import { selectLoRAsSlice } from 'features/controlLayers/store/lorasSlice';
+import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
+import { uniq } from 'lodash-es';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useGetRelatedModelIdsBatchQuery } from 'services/api/endpoints/modelRelationships';
 import type { AnyModelConfig } from 'services/api/types';
 
 import { useGroupedModelCombobox } from './useGroupedModelCombobox';
-import { useRelatedModelKeys } from './useRelatedModelKeys';
-import { useSelectedModelKeys } from './useSelectedModelKeys';
 
 type UseRelatedGroupedModelComboboxArg<T extends AnyModelConfig> = {
   modelConfigs: T[];
@@ -29,6 +35,32 @@ type UseRelatedGroupedModelComboboxReturn = {
   noOptionsMessage: () => string;
 };
 
+const selectSelectedModelKeys = createMemoizedSelector(selectParamsSlice, selectLoRAsSlice, (params, loras) => {
+  const keys: string[] = [];
+  const main = params.model;
+  const vae = params.vae;
+  const refiner = params.refinerModel;
+  const controlnet = params.controlLora;
+
+  if (main) {
+    keys.push(main.key);
+  }
+  if (vae) {
+    keys.push(vae.key);
+  }
+  if (refiner) {
+    keys.push(refiner.key);
+  }
+  if (controlnet) {
+    keys.push(controlnet.key);
+  }
+  for (const { model } of loras.loras) {
+    keys.push(model.key);
+  }
+
+  return uniq(keys);
+});
+
 export function useRelatedGroupedModelCombobox<T extends AnyModelConfig>({
   modelConfigs,
   selectedModel,
@@ -39,9 +71,15 @@ export function useRelatedGroupedModelCombobox<T extends AnyModelConfig>({
 }: UseRelatedGroupedModelComboboxArg<T>): UseRelatedGroupedModelComboboxReturn {
   const { t } = useTranslation();
 
-  const selectedKeys = useSelectedModelKeys();
-
-  const relatedKeys = useRelatedModelKeys(selectedKeys);
+  const selectedKeys = useAppSelector(selectSelectedModelKeys);
+  const { relatedKeys } = useGetRelatedModelIdsBatchQuery(selectedKeys, {
+    selectFromResult: ({ data }) => {
+      if (!data) {
+        return { relatedKeys: EMPTY_ARRAY };
+      }
+      return { relatedKeys: data };
+    },
+  });
 
   // Base grouped options
   const base = useGroupedModelCombobox({
@@ -53,40 +91,42 @@ export function useRelatedGroupedModelCombobox<T extends AnyModelConfig>({
     groupByType,
   });
 
-  // If no related models selected, just return base
-  if (relatedKeys.size === 0) {
-    return base;
-  }
+  const options = useMemo(() => {
+    if (relatedKeys.length === 0) {
+      return base.options;
+    }
 
-  const relatedOptions: ComboboxOption[] = [];
-  const updatedGroups: GroupBase<ComboboxOption>[] = [];
+    const relatedOptions: ComboboxOption[] = [];
+    const updatedGroups: GroupBase<ComboboxOption>[] = [];
 
-  for (const group of base.options) {
-    const remainingOptions: ComboboxOption[] = [];
+    for (const group of base.options) {
+      const remainingOptions: ComboboxOption[] = [];
 
-    for (const option of group.options) {
-      if (relatedKeys.has(option.value)) {
-        relatedOptions.push({ ...option, label: `* ${option.label}` });
-      } else {
-        remainingOptions.push(option);
+      for (const option of group.options) {
+        if (relatedKeys.includes(option.value)) {
+          relatedOptions.push({ ...option, label: `* ${option.label}` });
+        } else {
+          remainingOptions.push(option);
+        }
+      }
+
+      if (remainingOptions.length > 0) {
+        updatedGroups.push({
+          label: group.label,
+          options: remainingOptions,
+        });
       }
     }
 
-    if (remainingOptions.length > 0) {
-      updatedGroups.push({
-        label: group.label,
-        options: remainingOptions,
-      });
+    if (relatedOptions.length > 0) {
+      return [{ label: t('modelManager.relatedModels'), options: relatedOptions }, ...updatedGroups];
+    } else {
+      return updatedGroups;
     }
-  }
-
-  const finalOptions: GroupBase<ComboboxOption>[] =
-    relatedOptions.length > 0
-      ? [{ label: t('modelManager.relatedModels'), options: relatedOptions }, ...updatedGroups]
-      : updatedGroups;
+  }, [base.options, relatedKeys, t]);
 
   return {
     ...base,
-    options: finalOptions,
+    options,
   };
 }

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

@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import { useGetRelatedModelIdsBatchQuery } from 'services/api/endpoints/modelRelationships';
-
-/**
- * Fetches related model keys for a given set of selected model keys.
- * Returns a Set<string> for fast lookup.
- */
-export const useRelatedModelKeys = (selectedKeys: Set<string>) => {
-  const { data: related = [] } = useGetRelatedModelIdsBatchQuery([...selectedKeys], {
-    skip: selectedKeys.size === 0,
-  });
-
-  return useMemo(() => new Set(related), [related]);
-};

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

@@ -1,34 +0,0 @@
-import { useAppSelector } from 'app/store/storeHooks';
-
-/**
- * Gathers all currently selected model keys from parameters and loras.
- * This includes the main model, VAE, refiner model, controlnet, and loras.
- */
-export const useSelectedModelKeys = () => {
-  return useAppSelector((state) => {
-    const keys = new Set<string>();
-    const main = state.params.model;
-    const vae = state.params.vae;
-    const refiner = state.params.refinerModel;
-    const controlnet = state.params.controlLora;
-    const loras = state.loras.loras.map((l) => l.model);
-
-    if (main) {
-      keys.add(main.key);
-    }
-    if (vae) {
-      keys.add(vae.key);
-    }
-    if (refiner) {
-      keys.add(refiner.key);
-    }
-    if (controlnet) {
-      keys.add(controlnet.key);
-    }
-    for (const lora of loras) {
-      keys.add(lora.key);
-    }
-
-    return keys;
-  });
-};

invokeai/frontend/web/src/common/util/zodUtils.ts

@@ -0,0 +1,10 @@
+import type { z } from 'zod';
+
+/**
+ * Helper to create a type guard from a zod schema. The type guard will infer the schema's TS type.
+ * @param schema The zod schema to create a type guard from.
+ * @returns A type guard function for the schema.
+ */
+export const buildZodTypeGuard = <T extends z.ZodTypeAny>(schema: T) => {
+  return (val: unknown): val is z.infer<T> => schema.safeParse(val).success;
+};

invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable i18next/no-literal-string */
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { ContextMenu, Divider, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
+import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
+import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
+import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
+import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
+import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
+import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
+import { Filter } from 'features/controlLayers/components/Filters/Filter';
+import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
+import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
+import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject';
+import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
+import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList';
+import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
+import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
+import { Transform } from 'features/controlLayers/components/Transform/Transform';
+import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
+
+const FOCUS_REGION_STYLES: SystemStyleObject = {
+  width: 'full',
+  height: 'full',
+};
+
+const MenuContent = memo(() => {
+  return (
+    <CanvasManagerProviderGate>
+      <MenuList>
+        <CanvasContextMenuSelectedEntityMenuItems />
+        <CanvasContextMenuGlobalMenuItems />
+      </MenuList>
+    </CanvasManagerProviderGate>
+  );
+});
+MenuContent.displayName = 'MenuContent';
+
+const canvasBgSx = {
+  position: 'relative',
+  w: 'full',
+  h: 'full',
+  borderRadius: 'base',
+  overflow: 'hidden',
+  bg: 'base.900',
+  '&[data-dynamic-grid="true"]': {
+    bg: 'base.850',
+  },
+};
+
+export const AdvancedSession = memo(({ id }: { id: string | null }) => {
+  const dynamicGrid = useAppSelector(selectDynamicGrid);
+  const showHUD = useAppSelector(selectShowHUD);
+
+  const renderMenu = useCallback(() => {
+    return <MenuContent />;
+  }, []);
+
+  return (
+    <FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
+      <Flex
+        tabIndex={-1}
+        borderRadius="base"
+        position="relative"
+        flexDirection="column"
+        height="full"
+        width="full"
+        gap={2}
+        alignItems="center"
+        justifyContent="center"
+        overflow="hidden"
+      >
+        <CanvasManagerProviderGate>
+          <CanvasToolbar />
+        </CanvasManagerProviderGate>
+        <Divider />
+        <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
+          {(ref) => (
+            <Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
+              <InvokeCanvasComponent />
+              <CanvasManagerProviderGate>
+                <Flex
+                  position="absolute"
+                  flexDir="column"
+                  top={1}
+                  insetInlineStart={1}
+                  pointerEvents="none"
+                  gap={2}
+                  alignItems="flex-start"
+                >
+                  {showHUD && <CanvasHUD />}
+                  <CanvasAlertsSelectedEntityStatus />
+                  <CanvasAlertsPreserveMask />
+                  <CanvasAlertsInvocationProgress />
+                </Flex>
+                <Flex position="absolute" top={1} insetInlineEnd={1}>
+                  <Menu>
+                    <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
+                    <MenuContent />
+                  </Menu>
+                </Flex>
+              </CanvasManagerProviderGate>
+            </Flex>
+          )}
+        </ContextMenu>
+        {id !== null && (
+          <CanvasManagerProviderGate>
+            <CanvasSessionContextProvider type="advanced" id={id}>
+              <Flex
+                position="absolute"
+                flexDir="column"
+                bottom={4}
+                gap={2}
+                align="center"
+                justify="center"
+                left={4}
+                right={4}
+              >
+                <Flex position="relative" maxW="full" w="full" h={108}>
+                  <StagingAreaItemsList />
+                </Flex>
+                <Flex gap={2}>
+                  <StagingAreaToolbar />
+                </Flex>
+              </Flex>
+            </CanvasSessionContextProvider>
+          </CanvasManagerProviderGate>
+        )}
+        <Flex position="absolute" bottom={4}>
+          <CanvasManagerProviderGate>
+            <Filter />
+            <Transform />
+            <SelectObject />
+          </CanvasManagerProviderGate>
+        </Flex>
+        <CanvasManagerProviderGate>
+          <CanvasDropArea />
+        </CanvasManagerProviderGate>
+      </Flex>
+    </FocusRegionWrapper>
+  );
+});
+AdvancedSession.displayName = 'AdvancedSession';

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

@@ -6,11 +6,11 @@ import { selectIsLocal } from 'features/system/store/configSlice';
 import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { $invocationProgressMessage } from 'services/events/stores';
+import { $lastProgressMessage } from 'services/events/stores';
 
 const CanvasAlertsInvocationProgressContentLocal = memo(() => {
   const { t } = useTranslation();
-  const invocationProgressMessage = useStore($invocationProgressMessage);
+  const invocationProgressMessage = useStore($lastProgressMessage);
 
   if (!invocationProgressMessage) {
     return null;

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

@@ -1,146 +0,0 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Button, Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useBoolean } from 'common/hooks/useBoolean';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { activeTabCanvasRightPanelChanged, setActiveTab } from 'features/ui/store/uiSlice';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { PropsWithChildren, ReactNode } from 'react';
-import { useCallback, useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-
-const ActivateImageViewerButton = (props: PropsWithChildren) => {
-  const imageViewer = useImageViewer();
-  const dispatch = useAppDispatch();
-  const onClick = useCallback(() => {
-    imageViewer.open();
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [imageViewer, dispatch]);
-  return (
-    <Button onClick={onClick} size="sm" variant="link" color="base.50">
-      {props.children}
-    </Button>
-  );
-};
-
-export const CanvasAlertsSendingToGallery = () => {
-  const { t } = useTranslation();
-  const destination = useCurrentDestination();
-  const tab = useAppSelector(selectActiveTab);
-  const isVisible = useMemo(() => {
-    // This alert should only be visible when the destination is gallery and the tab is canvas
-    if (tab !== 'canvas') {
-      return false;
-    }
-    if (!destination) {
-      return false;
-    }
-
-    return destination === 'gallery';
-  }, [destination, tab]);
-
-  return (
-    <AlertWrapper
-      title={t('controlLayers.sendingToGallery')}
-      description={
-        <Trans i18nKey="controlLayers.viewProgressInViewer" components={{ Btn: <ActivateImageViewerButton /> }} />
-      }
-      isVisible={isVisible}
-    />
-  );
-};
-
-const ActivateCanvasButton = (props: PropsWithChildren) => {
-  const dispatch = useAppDispatch();
-  const imageViewer = useImageViewer();
-  const onClick = useCallback(() => {
-    dispatch(setActiveTab('canvas'));
-    dispatch(activeTabCanvasRightPanelChanged('layers'));
-    imageViewer.close();
-  }, [dispatch, imageViewer]);
-  return (
-    <Button onClick={onClick} size="sm" variant="link" color="base.50">
-      {props.children}
-    </Button>
-  );
-};
-
-export const CanvasAlertsSendingToCanvas = () => {
-  const { t } = useTranslation();
-  const destination = useCurrentDestination();
-  const isStaging = useAppSelector(selectIsStaging);
-  const tab = useAppSelector(selectActiveTab);
-  const isVisible = useMemo(() => {
-    // When we are on a non-canvas tab, and the current generation's destination is not the canvas, we don't show the alert
-    // For example, on the workflows tab, when the destinatin is gallery, we don't show the alert
-    if (tab !== 'canvas' && destination !== 'canvas') {
-      return false;
-    }
-    if (isStaging) {
-      return true;
-    }
-
-    if (!destination) {
-      return false;
-    }
-
-    return destination === 'canvas';
-  }, [destination, isStaging, tab]);
-
-  return (
-    <AlertWrapper
-      title={t('controlLayers.sendingToCanvas')}
-      description={
-        <Trans i18nKey="controlLayers.viewProgressOnCanvas" components={{ Btn: <ActivateCanvasButton /> }} />
-      }
-      isVisible={isVisible}
-    />
-  );
-};
-
-const AlertWrapper = ({
-  title,
-  description,
-  isVisible,
-}: {
-  title: ReactNode;
-  description: ReactNode;
-  isVisible: boolean;
-}) => {
-  const isHovered = useBoolean(false);
-
-  return (
-    <AnimatePresence>
-      {(isVisible || isHovered.isTrue) && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1, transition: { duration: 0.1, ease: 'easeOut' } }}
-          exit={{
-            opacity: 0,
-            transition: { duration: 0.1, delay: !isHovered.isTrue ? 1 : 0.1, ease: 'easeIn' },
-          }}
-          onMouseEnter={isHovered.setTrue}
-          onMouseLeave={isHovered.setFalse}
-        >
-          <Alert
-            status="warning"
-            flexDir="column"
-            pointerEvents="auto"
-            borderRadius="base"
-            fontSize="sm"
-            shadow="md"
-            w="fit-content"
-          >
-            <Flex w="full" alignItems="center">
-              <AlertIcon />
-              <AlertTitle>{title}</AlertTitle>
-            </Flex>
-            <AlertDescription>{description}</AlertDescription>
-          </Alert>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-};

invokeai/frontend/web/src/features/controlLayers/components/CanvasDropArea.tsx

@@ -2,7 +2,6 @@ import { Grid, GridItem } from '@invoke-ai/ui-library';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { newCanvasEntityFromImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -19,13 +18,8 @@ const addGlobalReferenceImageFromImageDndTargetData = newCanvasEntityFromImageDn
 
 export const CanvasDropArea = memo(() => {
   const { t } = useTranslation();
-  const imageViewer = useImageViewer();
   const isBusy = useCanvasIsBusy();
 
-  if (imageViewer.isOpen) {
-    return null;
-  }
-
   return (
     <>
       <Grid

invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx

@@ -1,140 +1,23 @@
-import {
-  ContextMenu,
-  Flex,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuList,
-  type SystemStyleObject,
-} from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
-import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
-import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
-import { CanvasAlertsSendingToGallery } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
-import { CanvasBusySpinner } from 'features/controlLayers/components/CanvasBusySpinner';
-import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
-import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
-import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
-import { Filter } from 'features/controlLayers/components/Filters/Filter';
-import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
-import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
-import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject';
-import { StagingAreaIsStagingGate } from 'features/controlLayers/components/StagingArea/StagingAreaIsStagingGate';
-import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
-import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
-import { Transform } from 'features/controlLayers/components/Transform/Transform';
-import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
-import { GatedImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import { memo, useCallback } from 'react';
-import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
-
-import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress';
-
-const FOCUS_REGION_STYLES: SystemStyleObject = {
-  width: 'full',
-  height: 'full',
-};
-
-const MenuContent = () => {
-  return (
-    <CanvasManagerProviderGate>
-      <MenuList>
-        <CanvasContextMenuSelectedEntityMenuItems />
-        <CanvasContextMenuGlobalMenuItems />
-      </MenuList>
-    </CanvasManagerProviderGate>
-  );
-};
+import { AdvancedSession } from 'features/controlLayers/components/AdvancedSession/AdvancedSession';
+import { SimpleSession } from 'features/controlLayers/components/SimpleSession/SimpleSession';
+import { selectCanvasSessionId, selectCanvasSessionType } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { memo } from 'react';
+import type { Equals } from 'tsafe';
+import { assert } from 'tsafe';
 
 export const CanvasMainPanelContent = memo(() => {
-  const dynamicGrid = useAppSelector(selectDynamicGrid);
-  const showHUD = useAppSelector(selectShowHUD);
+  const type = useAppSelector(selectCanvasSessionType);
+  const id = useAppSelector(selectCanvasSessionId);
 
-  const renderMenu = useCallback(() => {
-    return <MenuContent />;
-  }, []);
+  if (type === 'simple') {
+    return <SimpleSession id={id} />;
+  }
 
-  return (
-    <FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
-      <Flex
-        tabIndex={-1}
-        borderRadius="base"
-        position="relative"
-        flexDirection="column"
-        height="full"
-        width="full"
-        gap={2}
-        alignItems="center"
-        justifyContent="center"
-        overflow="hidden"
-      >
-        <CanvasManagerProviderGate>
-          <CanvasToolbar />
-        </CanvasManagerProviderGate>
-        <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
-          {(ref) => (
-            <Flex
-              ref={ref}
-              position="relative"
-              w="full"
-              h="full"
-              bg={dynamicGrid ? 'base.850' : 'base.900'}
-              borderRadius="base"
-              overflow="hidden"
-            >
-              <InvokeCanvasComponent />
-              <CanvasManagerProviderGate>
-                <Flex
-                  position="absolute"
-                  flexDir="column"
-                  top={1}
-                  insetInlineStart={1}
-                  pointerEvents="none"
-                  gap={2}
-                  alignItems="flex-start"
-                >
-                  {showHUD && <CanvasHUD />}
-                  <CanvasAlertsSelectedEntityStatus />
-                  <CanvasAlertsPreserveMask />
-                  <CanvasAlertsSendingToGallery />
-                  <CanvasAlertsInvocationProgress />
-                </Flex>
-                <Flex position="absolute" top={1} insetInlineEnd={1}>
-                  <Menu>
-                    <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
-                    <MenuContent />
-                  </Menu>
-                </Flex>
-                <Flex position="absolute" bottom={4} insetInlineEnd={4}>
-                  <CanvasBusySpinner />
-                </Flex>
-              </CanvasManagerProviderGate>
-            </Flex>
-          )}
-        </ContextMenu>
-        <Flex position="absolute" bottom={4} gap={2} align="center" justify="center">
-          <CanvasManagerProviderGate>
-            <StagingAreaIsStagingGate>
-              <StagingAreaToolbar />
-            </StagingAreaIsStagingGate>
-          </CanvasManagerProviderGate>
-        </Flex>
-        <Flex position="absolute" bottom={4}>
-          <CanvasManagerProviderGate>
-            <Filter />
-            <Transform />
-            <SelectObject />
-          </CanvasManagerProviderGate>
-        </Flex>
-        <CanvasManagerProviderGate>
-          <CanvasDropArea />
-        </CanvasManagerProviderGate>
-        <GatedImageViewer />
-      </Flex>
-    </FocusRegionWrapper>
-  );
+  if (type === 'advanced') {
+    return <AdvancedSession id={id} />;
+  }
+
+  assert<Equals<never, typeof type>>(false, 'Unexpected session type');
 });
-
 CanvasMainPanelContent.displayName = 'CanvasMainPanelContent';

invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx

@@ -1,272 +0,0 @@
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
-import { Box, Button, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
-import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
-import { multipleImageDndSource, singleImageDndSource } from 'features/dnd/dnd';
-import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
-import type { DndTargetState } from 'features/dnd/types';
-import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { selectActiveTabCanvasRightPanel } from 'features/ui/store/uiSelectors';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export const CanvasRightPanel = memo(() => {
-  const { t } = useTranslation();
-  const activeTab = useAppSelector(selectActiveTabCanvasRightPanel);
-  const imageViewer = useImageViewer();
-  const dispatch = useAppDispatch();
-
-  const tabIndex = useMemo(() => {
-    if (activeTab === 'gallery') {
-      return 1;
-    } else {
-      return 0;
-    }
-  }, [activeTab]);
-
-  const onClickViewerToggleButton = useCallback(() => {
-    if (activeTab !== 'gallery') {
-      dispatch(activeTabCanvasRightPanelChanged('gallery'));
-    }
-    imageViewer.toggle();
-  }, [imageViewer, activeTab, dispatch]);
-
-  const onChangeTab = useCallback(
-    (index: number) => {
-      if (index === 0) {
-        dispatch(activeTabCanvasRightPanelChanged('layers'));
-      } else {
-        dispatch(activeTabCanvasRightPanelChanged('gallery'));
-      }
-    },
-    [dispatch]
-  );
-
-  useRegisteredHotkeys({
-    id: 'toggleViewer',
-    category: 'viewer',
-    callback: imageViewer.toggle,
-    dependencies: [imageViewer],
-  });
-
-  return (
-    <Tabs index={tabIndex} onChange={onChangeTab} w="full" h="full" display="flex" flexDir="column">
-      <TabList alignItems="center">
-        <PanelTabs />
-        <Spacer />
-        <Button size="sm" variant="ghost" onClick={onClickViewerToggleButton}>
-          {imageViewer.isOpen ? t('gallery.closeViewer') : t('gallery.openViewer')}
-        </Button>
-      </TabList>
-      <TabPanels w="full" h="full">
-        <TabPanel w="full" h="full" p={0} pt={3}>
-          <CanvasManagerProviderGate>
-            <CanvasLayersPanelContent />
-          </CanvasManagerProviderGate>
-        </TabPanel>
-        <TabPanel w="full" h="full" p={0} pt={3}>
-          <GalleryPanelContent />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-});
-
-CanvasRightPanel.displayName = 'CanvasRightPanel';
-
-const PanelTabs = memo(() => {
-  const { t } = useTranslation();
-  const store = useAppStore();
-  const activeEntityCount = useAppSelector(selectEntityCountActive);
-  const [layersTabDndState, setLayersTabDndState] = useState<DndTargetState>('idle');
-  const [galleryTabDndState, setGalleryTabDndState] = useState<DndTargetState>('idle');
-  const layersTabRef = useRef<HTMLDivElement>(null);
-  const galleryTabRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<number | null>(null);
-
-  const layersTabLabel = useMemo(() => {
-    if (activeEntityCount === 0) {
-      return t('controlLayers.layer_other');
-    }
-    return `${t('controlLayers.layer_other')} (${activeEntityCount})`;
-  }, [activeEntityCount, t]);
-
-  useEffect(() => {
-    if (!layersTabRef.current) {
-      return;
-    }
-
-    const getIsOnLayersTab = () => selectActiveTabCanvasRightPanel(store.getState()) === 'layers';
-
-    const onDragEnter = () => {
-      // If we are already on the layers tab, do nothing
-      if (getIsOnLayersTab()) {
-        return;
-      }
-
-      // Else set the state to active and switch to the layers tab after a timeout
-      setLayersTabDndState('over');
-      timeoutRef.current = window.setTimeout(() => {
-        timeoutRef.current = null;
-        store.dispatch(activeTabCanvasRightPanelChanged('layers'));
-        // When we switch tabs, the other tab should be pending
-        setLayersTabDndState('idle');
-        setGalleryTabDndState('potential');
-      }, 300);
-    };
-    const onDragLeave = () => {
-      // Set the state to idle or pending depending on the current tab
-      if (getIsOnLayersTab()) {
-        setLayersTabDndState('idle');
-      } else {
-        setLayersTabDndState('potential');
-      }
-      // Abort the tab switch if it hasn't happened yet
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-    const onDragStart = () => {
-      // Set the state to pending when a drag starts
-      setLayersTabDndState('potential');
-    };
-    return combine(
-      dropTargetForElements({
-        element: layersTabRef.current,
-        onDragEnter,
-        onDragLeave,
-      }),
-      monitorForElements({
-        canMonitor: ({ source }) => {
-          if (!singleImageDndSource.typeGuard(source.data) && !multipleImageDndSource.typeGuard(source.data)) {
-            return false;
-          }
-          // Only monitor if we are not already on the gallery tab
-          return !getIsOnLayersTab();
-        },
-        onDragStart,
-      }),
-      dropTargetForExternal({
-        element: layersTabRef.current,
-        onDragEnter,
-        onDragLeave,
-      }),
-      monitorForExternal({
-        canMonitor: () => !getIsOnLayersTab(),
-        onDragStart,
-      })
-    );
-  }, [store]);
-
-  useEffect(() => {
-    if (!galleryTabRef.current) {
-      return;
-    }
-
-    const getIsOnGalleryTab = () => selectActiveTabCanvasRightPanel(store.getState()) === 'gallery';
-
-    const onDragEnter = () => {
-      // If we are already on the gallery tab, do nothing
-      if (getIsOnGalleryTab()) {
-        return;
-      }
-
-      // Else set the state to active and switch to the gallery tab after a timeout
-      setGalleryTabDndState('over');
-      timeoutRef.current = window.setTimeout(() => {
-        timeoutRef.current = null;
-        store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
-        // When we switch tabs, the other tab should be pending
-        setGalleryTabDndState('idle');
-        setLayersTabDndState('potential');
-      }, 300);
-    };
-
-    const onDragLeave = () => {
-      // Set the state to idle or pending depending on the current tab
-      if (getIsOnGalleryTab()) {
-        setGalleryTabDndState('idle');
-      } else {
-        setGalleryTabDndState('potential');
-      }
-      // Abort the tab switch if it hasn't happened yet
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-
-    const onDragStart = () => {
-      // Set the state to pending when a drag starts
-      setGalleryTabDndState('potential');
-    };
-
-    return combine(
-      dropTargetForElements({
-        element: galleryTabRef.current,
-        onDragEnter,
-        onDragLeave,
-      }),
-      monitorForElements({
-        canMonitor: ({ source }) => {
-          if (!singleImageDndSource.typeGuard(source.data) && !multipleImageDndSource.typeGuard(source.data)) {
-            return false;
-          }
-          // Only monitor if we are not already on the gallery tab
-          return !getIsOnGalleryTab();
-        },
-        onDragStart,
-      }),
-      dropTargetForExternal({
-        element: galleryTabRef.current,
-        onDragEnter,
-        onDragLeave,
-      }),
-      monitorForExternal({
-        canMonitor: () => !getIsOnGalleryTab(),
-        onDragStart,
-      })
-    );
-  }, [store]);
-
-  useEffect(() => {
-    const onDrop = () => {
-      // Reset the dnd state when a drop happens
-      setGalleryTabDndState('idle');
-      setLayersTabDndState('idle');
-    };
-    const cleanup = combine(monitorForElements({ onDrop }), monitorForExternal({ onDrop }));
-
-    return () => {
-      cleanup();
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      <Tab ref={layersTabRef} position="relative" w={32}>
-        <Box as="span" w="full">
-          {layersTabLabel}
-        </Box>
-        <DndDropOverlay dndState={layersTabDndState} withBackdrop={false} />
-      </Tab>
-      <Tab ref={galleryTabRef} position="relative" w={32}>
-        <Box as="span" w="full">
-          {t('gallery.gallery')}
-        </Box>
-        <DndDropOverlay dndState={galleryTabDndState} withBackdrop={false} />
-      </Tab>
-    </>
-  );
-});
-
-PanelTabs.displayName = 'PanelTabs';

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
-import { UploadImageButton } from 'common/hooks/useImageUploadButton';
+import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
 import type { setGlobalReferenceImageDndTarget, setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
@@ -51,7 +51,7 @@ export const IPAdapterImagePreview = memo(
     return (
       <Flex position="relative" w="full" h="full" alignItems="center" data-error={!imageDTO && !image?.image_name}>
         {!imageDTO && (
-          <UploadImageButton
+          <UploadImageIconButton
             w="full"
             h="full"
             isError={!imageDTO && !image?.image_name}

invokeai/frontend/web/src/features/controlLayers/components/NewSessionConfirmationAlertDialog.tsx

@@ -2,8 +2,7 @@ import { Checkbox, ConfirmationAlertDialog, Flex, FormControl, FormLabel, Text }
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { buildUseBoolean } from 'common/hooks/useBoolean';
-import { newCanvasSessionRequested, newGallerySessionRequested } from 'features/controlLayers/store/actions';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   selectSystemShouldConfirmOnNewSession,
   shouldConfirmOnNewSessionToggled,
@@ -17,15 +16,13 @@ const [useNewCanvasSessionDialog] = buildUseBoolean(false);
 
 export const useNewGallerySession = () => {
   const dispatch = useAppDispatch();
-  const imageViewer = useImageViewer();
   const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
   const newSessionDialog = useNewGallerySessionDialog();
 
   const newGallerySessionImmediate = useCallback(() => {
-    dispatch(newGallerySessionRequested());
-    imageViewer.open();
+    dispatch(generateSessionReset());
     dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch, imageViewer]);
+  }, [dispatch]);
 
   const newGallerySessionWithDialog = useCallback(() => {
     if (shouldConfirmOnNewSession) {
@@ -40,15 +37,13 @@ export const useNewGallerySession = () => {
 
 export const useNewCanvasSession = () => {
   const dispatch = useAppDispatch();
-  const imageViewer = useImageViewer();
   const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
   const newSessionDialog = useNewCanvasSessionDialog();
 
   const newCanvasSessionImmediate = useCallback(() => {
-    dispatch(newCanvasSessionRequested());
-    imageViewer.close();
+    dispatch(canvasSessionReset());
     dispatch(activeTabCanvasRightPanelChanged('layers'));
-  }, [dispatch, imageViewer]);
+  }, [dispatch]);
 
   const newCanvasSessionWithDialog = useCallback(() => {
     if (shouldConfirmOnNewSession) {

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

@@ -0,0 +1,29 @@
+/* eslint-disable i18next/no-literal-string */
+import type { ButtonGroupProps } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
+import { newCanvasFromImage } from 'features/imageActions/actions';
+import { memo, useCallback } from 'react';
+import type { ImageDTO } from 'services/api/types';
+
+export const ImageActions = memo(({ imageDTO, ...rest }: { imageDTO: ImageDTO } & ButtonGroupProps) => {
+  const { getState, dispatch } = useAppStore();
+
+  const edit = useCallback(() => {
+    newCanvasFromImage({
+      imageDTO,
+      type: 'raster_layer',
+      withInpaintMask: true,
+      getState,
+      dispatch,
+    });
+  }, [dispatch, getState, imageDTO]);
+  return (
+    <ButtonGroup isAttached={false} size="sm" {...rest}>
+      <Button onClick={edit} tooltip="Edit parts of this image with Inpainting">
+        Edit
+      </Button>
+    </ButtonGroup>
+  );
+});
+ImageActions.displayName = 'ImageActions';

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

@@ -0,0 +1,56 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Button, Divider, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference';
+import { InitialStateEditImageCard } from 'features/controlLayers/components/SimpleSession/InitialStateEditImageCard';
+import { InitialStateGenerateFromText } from 'features/controlLayers/components/SimpleSession/InitialStateGenerateFromText';
+import { InitialStateUseALayoutImageCard } from 'features/controlLayers/components/SimpleSession/InitialStateUseALayoutImageCard';
+import { toast } from 'features/toast/toast';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { memo, useCallback } from 'react';
+
+export const InitialState = memo(() => {
+  const dispatch = useAppDispatch();
+  const newCanvasSession = useCallback(() => {
+    dispatch(setActiveTab('canvas'));
+    toast({
+      title: 'Switched to Canvas',
+      description: 'You are in advanced mode yadda yadda.',
+      status: 'info',
+      position: 'top',
+      // isClosable: false,
+      duration: 5000,
+    });
+  }, [dispatch]);
+
+  return (
+    <Flex flexDir="column" h="full" w="full" gap={2}>
+      <Flex px={2} alignItems="center" minH="24px">
+        <Heading size="sm">Get Started</Heading>
+      </Flex>
+      <Divider />
+      <Flex flexDir="column" h="full" justifyContent="center" mx={16}>
+        <Heading mb={4}>Choose a starting method.</Heading>
+        <Text fontSize="md" fontStyle="italic" mb={6}>
+          Drag an image onto a card or click the upload icon.
+        </Text>
+
+        <Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
+          <InitialStateGenerateFromText />
+          <InitialStateAddAStyleReference />
+          <InitialStateUseALayoutImageCard />
+          <InitialStateEditImageCard />
+        </Grid>
+
+        <Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
+          or{' '}
+          <Button variant="link" onClick={newCanvasSession}>
+            start from a blank canvas.
+          </Button>
+        </Text>
+      </Flex>
+    </Flex>
+  );
+});
+InitialState.displayName = 'InitialState';

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

@@ -0,0 +1,42 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import { InitialStateButtonGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateButtonGridItem';
+import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { newCanvasFromImage } from 'features/imageActions/actions';
+import { memo, useCallback } from 'react';
+import { PiUploadBold, PiUserCircleGearBold } from 'react-icons/pi';
+import type { ImageDTO } from 'services/api/types';
+
+const NEW_CANVAS_OPTIONS = { type: 'reference_image' } as const;
+
+const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
+
+export const InitialStateAddAStyleReference = memo(() => {
+  const { getState, dispatch } = useAppStore();
+
+  const onUpload = useCallback(
+    (imageDTO: ImageDTO) => {
+      newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
+    },
+    [dispatch, getState]
+  );
+  const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });
+
+  return (
+    <InitialStateButtonGridItem {...uploadApi.getUploadButtonProps()}>
+      <Icon as={PiUserCircleGearBold} boxSize={8} color="base.500" />
+      <Heading size="sm">Add a Style Reference</Heading>
+      <Text color="base.300">Add an image to transfer its look.</Text>
+      <Flex w="full" justifyContent="flex-end" p={2}>
+        <PiUploadBold />
+        <input {...uploadApi.getUploadInputProps()} />
+      </Flex>
+      <DndDropTarget dndTarget={newCanvasFromImageDndTarget} dndTargetData={dndTargetData} label="Drop" />
+    </InitialStateButtonGridItem>
+  );
+});
+InitialStateAddAStyleReference.displayName = 'InitialStateAddAStyleReference';

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

@@ -0,0 +1,31 @@
+import type { GridItemProps } from '@invoke-ai/ui-library';
+import { Button, forwardRef, GridItem } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+
+export const InitialStateButtonGridItem = memo(
+  forwardRef(({ children, ...rest }: GridItemProps, ref) => {
+    return (
+      <GridItem
+        ref={ref}
+        as={Button}
+        variant="outline"
+        display="flex"
+        position="relative"
+        flexDir="column"
+        alignItems="center"
+        borderWidth={1}
+        borderRadius="base"
+        p={2}
+        pt={6}
+        gap={2}
+        w="full"
+        h="full"
+        {...rest}
+      >
+        {children}
+      </GridItem>
+    );
+  })
+);
+
+InitialStateButtonGridItem.displayName = 'InitialStateButtonGridItem';

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

@@ -0,0 +1,42 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import { InitialStateButtonGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateButtonGridItem';
+import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { newCanvasFromImage } from 'features/imageActions/actions';
+import { memo, useCallback } from 'react';
+import { PiPencilBold, PiUploadBold } from 'react-icons/pi';
+import type { ImageDTO } from 'services/api/types';
+
+const NEW_CANVAS_OPTIONS = { type: 'raster_layer', withInpaintMask: true } as const;
+
+const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
+
+export const InitialStateEditImageCard = memo(() => {
+  const { getState, dispatch } = useAppStore();
+
+  const onUpload = useCallback(
+    (imageDTO: ImageDTO) => {
+      newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
+    },
+    [dispatch, getState]
+  );
+  const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });
+
+  return (
+    <InitialStateButtonGridItem {...uploadApi.getUploadButtonProps()}>
+      <Icon as={PiPencilBold} boxSize={8} color="base.500" />
+      <Heading size="sm">Edit Image</Heading>
+      <Text color="base.300">Add an image to refine.</Text>
+      <Flex w="full" justifyContent="flex-end" p={2}>
+        <PiUploadBold />
+        <input {...uploadApi.getUploadInputProps()} />
+      </Flex>
+      <DndDropTarget dndTarget={newCanvasFromImageDndTarget} dndTargetData={dndTargetData} label="Drop" />
+    </InitialStateButtonGridItem>
+  );
+});
+InitialStateEditImageCard.displayName = 'InitialStateEditImageCard';

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

@@ -0,0 +1,28 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
+import { InitialStateButtonGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateButtonGridItem';
+import { memo } from 'react';
+import { PiCursorTextBold, PiTextAaBold } from 'react-icons/pi';
+
+const focusOnPrompt = () => {
+  const promptElement = document.getElementById('prompt');
+  if (promptElement instanceof HTMLTextAreaElement) {
+    promptElement.focus();
+    promptElement.select();
+  }
+};
+
+export const InitialStateGenerateFromText = memo(() => {
+  return (
+    <InitialStateButtonGridItem onClick={focusOnPrompt}>
+      <Icon as={PiTextAaBold} boxSize={8} color="base.500" />
+      <Heading size="sm">Generate from Text</Heading>
+      <Text color="base.300">Enter a prompt and Invoke.</Text>
+      <Flex w="full" justifyContent="flex-end" p={2}>
+        <PiCursorTextBold />
+      </Flex>
+    </InitialStateButtonGridItem>
+  );
+});
+InitialStateGenerateFromText.displayName = 'InitialStateGenerateFromText';

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

@@ -0,0 +1,42 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import { InitialStateButtonGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateButtonGridItem';
+import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
+import { newCanvasFromImage } from 'features/imageActions/actions';
+import { memo, useCallback } from 'react';
+import { PiRectangleDashedBold, PiUploadBold } from 'react-icons/pi';
+import type { ImageDTO } from 'services/api/types';
+
+const NEW_CANVAS_OPTIONS = { type: 'control_layer', withResize: true } as const;
+
+const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
+
+export const InitialStateUseALayoutImageCard = memo(() => {
+  const { getState, dispatch } = useAppStore();
+
+  const onUpload = useCallback(
+    (imageDTO: ImageDTO) => {
+      newCanvasFromImage({ imageDTO, getState, dispatch, ...NEW_CANVAS_OPTIONS });
+    },
+    [dispatch, getState]
+  );
+  const uploadApi = useImageUploadButton({ allowMultiple: false, onUpload });
+
+  return (
+    <InitialStateButtonGridItem {...uploadApi.getUploadButtonProps()}>
+      <Icon as={PiRectangleDashedBold} boxSize={8} color="base.500" />
+      <Heading size="sm">Use a Layout Image</Heading>
+      <Text color="base.300">Add an image to control composition.</Text>
+      <Flex w="full" justifyContent="flex-end" p={2}>
+        <PiUploadBold />
+        <input {...uploadApi.getUploadInputProps()} />
+      </Flex>
+      <DndDropTarget dndTarget={newCanvasFromImageDndTarget} dndTargetData={dndTargetData} label="Drop" />
+    </InitialStateButtonGridItem>
+  );
+});
+InitialStateUseALayoutImageCard.displayName = 'InitialStateUseALayoutImageCard';

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

@@ -0,0 +1,42 @@
+import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { CircularProgress, Tooltip } from '@invoke-ai/ui-library';
+import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
+import { getProgressMessage } from 'features/controlLayers/components/SimpleSession/shared';
+import { memo } from 'react';
+import type { S } from 'services/api/types';
+
+const circleStyles: SystemStyleObject = {
+  circle: {
+    transitionProperty: 'none',
+    transitionDuration: '0s',
+  },
+  position: 'absolute',
+  top: 2,
+  right: 2,
+};
+
+type Props = { itemId: number; status: S['SessionQueueItem']['status'] } & CircularProgressProps;
+
+export const QueueItemCircularProgress = memo(({ itemId, status, ...rest }: Props) => {
+  const { $progressData } = useCanvasSessionContext();
+  const { progressEvent } = useProgressData($progressData, itemId);
+
+  if (status !== 'in_progress') {
+    return null;
+  }
+
+  return (
+    <Tooltip label={getProgressMessage(progressEvent)}>
+      <CircularProgress
+        size="14px"
+        color="invokeBlue.500"
+        thickness={14}
+        isIndeterminate={!progressEvent || progressEvent.percentage === null}
+        value={progressEvent?.percentage ? progressEvent.percentage * 100 : undefined}
+        sx={circleStyles}
+        {...rest}
+      />
+    </Tooltip>
+  );
+});
+QueueItemCircularProgress.displayName = 'QueueItemCircularProgress';

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

@@ -0,0 +1,9 @@
+import type { TextProps } from '@invoke-ai/ui-library';
+import { Text } from '@invoke-ai/ui-library';
+import { DROP_SHADOW } from 'features/controlLayers/components/SimpleSession/shared';
+import { memo } from 'react';
+
+export const QueueItemNumber = memo(({ number, ...rest }: { number: number } & TextProps) => {
+  return <Text pointerEvents="none" userSelect="none" filter={DROP_SHADOW} {...rest}>{`#${number}`}</Text>;
+});
+QueueItemNumber.displayName = 'QueueItemNumber';

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

@@ -0,0 +1,55 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import { useOutputImageDTO } from 'features/controlLayers/components/SimpleSession/context';
+import { ImageActions } from 'features/controlLayers/components/SimpleSession/ImageActions';
+import { QueueItemCircularProgress } from 'features/controlLayers/components/SimpleSession/QueueItemCircularProgress';
+import { QueueItemNumber } from 'features/controlLayers/components/SimpleSession/QueueItemNumber';
+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 { DndImage } from 'features/dnd/DndImage';
+import { memo, useCallback, useState } from 'react';
+import type { S } from 'services/api/types';
+
+type Props = {
+  item: S['SessionQueueItem'];
+  number: number;
+};
+
+const sx = {
+  userSelect: 'none',
+  pos: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  h: 'full',
+  w: 'full',
+} satisfies SystemStyleObject;
+
+export const QueueItemPreviewFull = memo(({ item, number }: Props) => {
+  const imageDTO = useOutputImageDTO(item);
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const onLoad = useCallback(() => {
+    setImageLoaded(true);
+  }, []);
+
+  return (
+    <Flex id={getQueueItemElementId(item.item_id)} sx={sx}>
+      <QueueItemStatusLabel status={item.status} position="absolute" margin="auto" />
+      {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} />}
+      {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
+      {imageDTO && <ImageActions imageDTO={imageDTO} position="absolute" top={1} right={2} />}
+      <QueueItemNumber number={number} position="absolute" top={1} left={2} />
+      <QueueItemCircularProgress
+        itemId={item.item_id}
+        status={item.status}
+        position="absolute"
+        top={1}
+        right={2}
+        size={8}
+      />
+    </Flex>
+  );
+});
+QueueItemPreviewFull.displayName = 'QueueItemPreviewFull';

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

@@ -0,0 +1,62 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import { useCanvasSessionContext, useOutputImageDTO } from 'features/controlLayers/components/SimpleSession/context';
+import { QueueItemCircularProgress } from 'features/controlLayers/components/SimpleSession/QueueItemCircularProgress';
+import { QueueItemNumber } from 'features/controlLayers/components/SimpleSession/QueueItemNumber';
+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 { DndImage } from 'features/dnd/DndImage';
+import { memo, useCallback, useState } from 'react';
+import type { S } from 'services/api/types';
+
+const sx = {
+  cursor: 'pointer',
+  userSelect: 'none',
+  pos: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  h: 108,
+  w: 108,
+  flexShrink: 0,
+  borderWidth: 2,
+  borderRadius: 'base',
+  bg: 'base.900',
+  '&[data-selected="true"]': {
+    borderColor: 'invokeBlue.300',
+  },
+} satisfies SystemStyleObject;
+
+type Props = {
+  item: S['SessionQueueItem'];
+  number: number;
+  isSelected: boolean;
+};
+
+export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) => {
+  const ctx = useCanvasSessionContext();
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const imageDTO = useOutputImageDTO(item);
+
+  const onClick = useCallback(() => {
+    ctx.$selectedItemId.set(item.item_id);
+  }, [ctx.$selectedItemId, item.item_id]);
+
+  const onLoad = useCallback(() => {
+    setImageLoaded(true);
+    if (ctx.$progressData.get()[item.item_id]) {
+      ctx.$lastLoadedItemId.set(item.item_id);
+    }
+  }, [ctx.$lastLoadedItemId, ctx.$progressData, item.item_id]);
+
+  return (
+    <Flex id={getQueueItemElementId(item.item_id)} sx={sx} data-selected={isSelected} onClick={onClick}>
+      <QueueItemStatusLabel status={item.status} 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} />
+      <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
+    </Flex>
+  );
+});
+QueueItemPreviewMini.displayName = 'QueueItemPreviewMini';

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

@@ -0,0 +1,29 @@
+import type { ImageProps } from '@invoke-ai/ui-library';
+import { Image } from '@invoke-ai/ui-library';
+import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
+import { memo } from 'react';
+
+type Props = { itemId: number } & ImageProps;
+
+export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
+  const ctx = useCanvasSessionContext();
+  const { progressImage } = useProgressData(ctx.$progressData, itemId);
+
+  if (!progressImage) {
+    return null;
+  }
+
+  return (
+    <Image
+      objectFit="contain"
+      maxH="full"
+      maxW="full"
+      draggable={false}
+      src={progressImage.dataURL}
+      width={progressImage.width}
+      height={progressImage.height}
+      {...rest}
+    />
+  );
+});
+QueueItemProgressImage.displayName = 'QueueItemProgressImage';

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

@@ -0,0 +1,33 @@
+/* eslint-disable i18next/no-literal-string */
+import type { TextProps } from '@invoke-ai/ui-library';
+import { Text } from '@invoke-ai/ui-library';
+import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
+import { DROP_SHADOW, getProgressMessage } from 'features/controlLayers/components/SimpleSession/shared';
+import { memo } from 'react';
+import type { S } from 'services/api/types';
+
+type Props = { itemId: number; status: S['SessionQueueItem']['status'] } & TextProps;
+
+export const QueueItemProgressMessage = memo(({ itemId, status, ...rest }: Props) => {
+  const ctx = useCanvasSessionContext();
+  const { progressEvent } = useProgressData(ctx.$progressData, itemId);
+
+  if (status === 'completed' || status === 'failed' || status === 'canceled') {
+    return null;
+  }
+
+  if (status === 'pending') {
+    return (
+      <Text pointerEvents="none" userSelect="none" filter={DROP_SHADOW} {...rest}>
+        Waiting to start...
+      </Text>
+    );
+  }
+
+  return (
+    <Text pointerEvents="none" userSelect="none" filter={DROP_SHADOW} {...rest}>
+      {getProgressMessage(progressEvent)}
+    </Text>
+  );
+});
+QueueItemProgressMessage.displayName = 'QueueItemProgressMessage';

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

@@ -0,0 +1,42 @@
+/* eslint-disable i18next/no-literal-string */
+import type { TextProps } from '@invoke-ai/ui-library';
+import { Text } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import type { S } from 'services/api/types';
+
+type Props = { status: S['SessionQueueItem']['status'] } & TextProps;
+
+export const QueueItemStatusLabel = memo(({ status, ...rest }: Props) => {
+  if (status === 'pending') {
+    return (
+      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="base.300" {...rest}>
+        Pending
+      </Text>
+    );
+  }
+  if (status === 'canceled') {
+    return (
+      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="warning.300" {...rest}>
+        Canceled
+      </Text>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="error.300" {...rest}>
+        Failed
+      </Text>
+    );
+  }
+
+  if (status === 'in_progress') {
+    return (
+      <Text pointerEvents="none" userSelect="none" fontWeight="semibold" color="invokeBlue.300" {...rest}>
+        In Progress
+      </Text>
+    );
+  }
+
+  return null;
+});
+QueueItemStatusLabel.displayName = 'QueueItemStatusLabel';

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

@@ -0,0 +1,16 @@
+import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
+import { InitialState } from 'features/controlLayers/components/SimpleSession/InitialState';
+import { StagingArea } from 'features/controlLayers/components/SimpleSession/StagingArea';
+import { memo } from 'react';
+
+export const SimpleSession = memo(({ id }: { id: string | null }) => {
+  if (id === null) {
+    return <InitialState />;
+  }
+  return (
+    <CanvasSessionContextProvider type="simple" id={id}>
+      <StagingArea />
+    </CanvasSessionContextProvider>
+  );
+});
+SimpleSession.displayName = 'SimpleSession';

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

@@ -0,0 +1,35 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Divider, 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 { StagingAreaContent } from 'features/controlLayers/components/SimpleSession/StagingAreaContent';
+import { StagingAreaHeader } from 'features/controlLayers/components/SimpleSession/StagingAreaHeader';
+import { StagingAreaNoItems } from 'features/controlLayers/components/SimpleSession/StagingAreaNoItems';
+import { useStagingAreaKeyboardNav } from 'features/controlLayers/components/SimpleSession/use-staging-keyboard-nav';
+import { memo, useEffect } from 'react';
+
+export const StagingArea = memo(() => {
+  const ctx = useCanvasSessionContext();
+  const hasItems = useStore(ctx.$hasItems);
+  useStagingAreaKeyboardNav();
+
+  useEffect(() => {
+    return ctx.$selectedItemId.listen((id) => {
+      if (id !== null) {
+        document.getElementById(getQueueItemElementId(id))?.scrollIntoView();
+      }
+    });
+  }, [ctx.$selectedItemId]);
+
+  return (
+    <Flex flexDir="column" gap={2} w="full" h="full" minW={0} minH={0}>
+      <StagingAreaHeader />
+      <Divider />
+      {hasItems && <StagingAreaContent />}
+      {!hasItems && <StagingAreaNoItems />}
+    </Flex>
+  );
+});
+StagingArea.displayName = 'StagingArea';

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

@@ -0,0 +1,24 @@
+/* eslint-disable i18next/no-literal-string */
+import { Divider, Flex } from '@invoke-ai/ui-library';
+import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList';
+import { StagingAreaSelectedItem } from 'features/controlLayers/components/SimpleSession/StagingAreaSelectedItem';
+import { SimpleStagingAreaToolbar } from 'features/controlLayers/components/StagingArea/SimpleStagingAreaToolbar';
+import { memo } from 'react';
+
+export const StagingAreaContent = memo(() => {
+  return (
+    <>
+      <Flex position="relative" w="full" h="full" maxH="full" alignItems="center" justifyContent="center" minH={0}>
+        <StagingAreaSelectedItem />
+      </Flex>
+      <Divider />
+      <Flex position="relative" maxW="full" w="full" h={108} flexShrink={0}>
+        <StagingAreaItemsList />
+      </Flex>
+      <Flex gap={2} w="full" justifyContent="safe center">
+        <SimpleStagingAreaToolbar />
+      </Flex>
+    </>
+  );
+});
+StagingAreaContent.displayName = 'StagingAreaContent';

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

@@ -0,0 +1,13 @@
+/* eslint-disable i18next/no-literal-string */
+import { Flex, Heading, Spacer } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+
+export const StagingAreaHeader = memo(() => {
+  return (
+    <Flex gap={2} w="full" alignItems="center" px={2}>
+      <Heading size="sm">Review Session</Heading>
+      <Spacer />
+    </Flex>
+  );
+});
+StagingAreaHeader.displayName = 'StagingAreaHeader';

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

@@ -0,0 +1,39 @@
+/* eslint-disable i18next/no-literal-string */
+import { Flex } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+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';
+
+export const StagingAreaItemsList = memo(() => {
+  const canvasManager = useCanvasManagerSafe();
+  const ctx = useCanvasSessionContext();
+  const items = useStore(ctx.$items);
+  const selectedItemId = useStore(ctx.$selectedItemId);
+
+  useEffect(() => {
+    if (!canvasManager) {
+      return;
+    }
+
+    return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData);
+  }, [canvasManager, ctx.$progressData, ctx.$selectedItemId]);
+
+  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>
+  );
+});
+StagingAreaItemsList.displayName = 'StagingAreaItemsList';

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

@@ -0,0 +1,13 @@
+/* eslint-disable i18next/no-literal-string */
+
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+
+export const StagingAreaNoItems = memo(() => {
+  return (
+    <Flex w="full" h="full" alignItems="center" justifyContent="center">
+      <Text>No generations</Text>
+    </Flex>
+  );
+});
+StagingAreaNoItems.displayName = 'StagingAreaNoItems';

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

@@ -0,0 +1,21 @@
+/* eslint-disable i18next/no-literal-string */
+import { Text } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { QueueItemPreviewFull } from 'features/controlLayers/components/SimpleSession/QueueItemPreviewFull';
+import { memo } from 'react';
+
+export const StagingAreaSelectedItem = memo(() => {
+  const ctx = useCanvasSessionContext();
+  const selectedItem = useStore(ctx.$selectedItem);
+  const selectedItemIndex = useStore(ctx.$selectedItemIndex);
+
+  if (selectedItem && selectedItemIndex !== null) {
+    return (
+      <QueueItemPreviewFull key={`${selectedItem.item_id}-full`} item={selectedItem} number={selectedItemIndex + 1} />
+    );
+  }
+
+  return <Text>No generation selected</Text>;
+});
+StagingAreaSelectedItem.displayName = 'StagingAreaSelectedItem';

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

@@ -0,0 +1,497 @@
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { EMPTY_ARRAY } from 'app/store/constants';
+import { useAppStore } from 'app/store/nanostores/store';
+import { getOutputImageName } from 'features/controlLayers/components/SimpleSession/shared';
+import type { ProgressImage } from 'features/nodes/types/common';
+import type { Atom, WritableAtom } from 'nanostores';
+import { atom, computed, effect } from 'nanostores';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { getImageDTOSafe } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { ImageDTO, S } from 'services/api/types';
+import { $socket } from 'services/events/stores';
+import { assert } from 'tsafe';
+import { z } from 'zod';
+
+export const zAutoSwitchMode = z.enum(['off', 'first_progress', 'completed']);
+export type AutoSwitchMode = z.infer<typeof zAutoSwitchMode>;
+
+export type ProgressData = {
+  itemId: number;
+  progressEvent: S['InvocationProgressEvent'] | null;
+  progressImage: ProgressImage | null;
+  imageDTO: ImageDTO | null;
+};
+
+const getInitialProgressData = (itemId: number): ProgressData => ({
+  itemId,
+  progressEvent: null,
+  progressImage: null,
+  imageDTO: null,
+});
+
+export const useProgressData = (
+  $progressData: WritableAtom<Record<number, ProgressData>>,
+  itemId: number
+): ProgressData => {
+  const [value, setValue] = useState<ProgressData>(() => {
+    return $progressData.get()[itemId] ?? getInitialProgressData(itemId);
+  });
+  useEffect(() => {
+    const unsub = $progressData.subscribe((data) => {
+      const progressData = data[itemId];
+      if (!progressData) {
+        return;
+      }
+      setValue(progressData);
+    });
+    return () => {
+      unsub();
+    };
+  }, [$progressData, itemId]);
+
+  return value;
+};
+
+const setProgress = ($progressData: WritableAtom<Record<number, ProgressData>>, data: S['InvocationProgressEvent']) => {
+  const progressData = $progressData.get();
+  const current = progressData[data.item_id];
+  if (current) {
+    const next = { ...current };
+    next.progressEvent = data;
+    if (data.image) {
+      next.progressImage = data.image;
+    }
+    $progressData.set({
+      ...progressData,
+      [data.item_id]: next,
+    });
+  } else {
+    $progressData.set({
+      ...progressData,
+      [data.item_id]: {
+        itemId: data.item_id,
+        progressEvent: data,
+        progressImage: data.image ?? null,
+        imageDTO: null,
+      },
+    });
+  }
+};
+
+type CanvasSessionContextValue = {
+  session: { id: string; type: 'simple' | 'advanced' };
+  $items: Atom<S['SessionQueueItem'][]>;
+  $itemCount: Atom<number>;
+  $hasItems: Atom<boolean>;
+  $progressData: WritableAtom<Record<string, ProgressData>>;
+  $selectedItemId: WritableAtom<number | null>;
+  $selectedItem: Atom<S['SessionQueueItem'] | null>;
+  $selectedItemIndex: Atom<number | null>;
+  $selectedItemOutputImageDTO: Atom<ImageDTO | null>;
+  $autoSwitch: WritableAtom<AutoSwitchMode>;
+  $lastLoadedItemId: WritableAtom<number | null>;
+  selectNext: () => void;
+  selectPrev: () => void;
+  selectFirst: () => void;
+  selectLast: () => void;
+};
+
+const CanvasSessionContext = createContext<CanvasSessionContextValue | null>(null);
+
+export const CanvasSessionContextProvider = memo(
+  ({ id, type, children }: PropsWithChildren<{ id: string; type: 'simple' | 'advanced' }>) => {
+    /**
+     * For best performance and interop with the Canvas, which is outside react but needs to interact with the react
+     * app, all canvas session state is packaged as nanostores atoms. The trickiest part is syncing the queue items
+     * with a nanostores atom.
+     */
+    const session = useMemo(() => ({ type, id }), [type, id]);
+
+    /**
+     * App store
+     */
+    const store = useAppStore();
+
+    const socket = useStore($socket);
+
+    /**
+     * Manually-synced atom containing queue items for the current session. This is populated from the RTK Query cache
+     * and kept in sync with it via a redux subscription.
+     */
+    const $items = useState(() => atom<S['SessionQueueItem'][]>([]))[0];
+
+    /**
+     * Whether auto-switch is enabled.
+     */
+    const $autoSwitch = useState(() => atom<AutoSwitchMode>('first_progress'))[0];
+
+    /**
+     * An internal flag used to work around race conditions with auto-switch switching to queue items before their
+     * output images have fully loaded.
+     */
+    const $lastLoadedItemId = useState(() => atom<number | null>(null))[0];
+
+    /**
+     * An ephemeral store of progress events and images for all items in the current session.
+     */
+    const $progressData = useState(() => atom<Record<number, ProgressData>>({}))[0];
+
+    /**
+     * The currently selected queue item's ID, or null if one is not selected.
+     */
+    const $selectedItemId = useState(() => atom<number | null>(null))[0];
+
+    /**
+     * The number of items. Computed from the queue items array.
+     */
+    const $itemCount = useState(() => computed([$items], (items) => items.length))[0];
+
+    /**
+     * Whether there are any items. Computed from the queue items array.
+     */
+    const $hasItems = useState(() => computed([$items], (items) => items.length > 0))[0];
+
+    /**
+     * The currently selected queue item, or null if one is not selected.
+     */
+    const $selectedItem = useState(() =>
+      computed([$items, $selectedItemId], (items, selectedItemId) => {
+        if (items.length === 0) {
+          return null;
+        }
+        if (selectedItemId === null) {
+          return null;
+        }
+        return items.find(({ item_id }) => item_id === selectedItemId) ?? null;
+      })
+    )[0];
+
+    /**
+     * The currently selected queue item's index in the list of items, or null if one is not selected.
+     */
+    const $selectedItemIndex = useState(() =>
+      computed([$items, $selectedItemId], (items, selectedItemId) => {
+        if (items.length === 0) {
+          return null;
+        }
+        if (selectedItemId === null) {
+          return null;
+        }
+        return items.findIndex(({ item_id }) => item_id === selectedItemId) ?? null;
+      })
+    )[0];
+
+    /**
+     * The currently selected queue item's output image name, or null if one is not selected or there is no output
+     * image recorded.
+     */
+    const $selectedItemOutputImageDTO = useState(() =>
+      computed([$selectedItemId, $progressData], (selectedItemId, progressData) => {
+        if (selectedItemId === null) {
+          return null;
+        }
+        const datum = progressData[selectedItemId];
+        if (!datum) {
+          return null;
+        }
+        return datum.imageDTO;
+      })
+    )[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.
+     */
+    const selectQueueItems = useMemo(
+      () =>
+        createSelector(
+          queueApi.endpoints.listAllQueueItems.select({ destination: session.id }),
+          ({ data }) => data ?? EMPTY_ARRAY
+        ),
+      [session.id]
+    );
+
+    const selectNext = useCallback(() => {
+      const selectedItemId = $selectedItemId.get();
+      if (selectedItemId === null) {
+        return;
+      }
+      const items = $items.get();
+      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
+      const nextIndex = (currentIndex + 1) % items.length;
+      const nextItem = items[nextIndex];
+      if (!nextItem) {
+        return;
+      }
+      $selectedItemId.set(nextItem.item_id);
+    }, [$items, $selectedItemId]);
+
+    const selectPrev = useCallback(() => {
+      const selectedItemId = $selectedItemId.get();
+      if (selectedItemId === null) {
+        return;
+      }
+      const items = $items.get();
+      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
+      const prevIndex = (currentIndex - 1 + items.length) % items.length;
+      const prevItem = items[prevIndex];
+      if (!prevItem) {
+        return;
+      }
+      $selectedItemId.set(prevItem.item_id);
+    }, [$items, $selectedItemId]);
+
+    const selectFirst = useCallback(() => {
+      const items = $items.get();
+      const first = items.at(0);
+      if (!first) {
+        return;
+      }
+      $selectedItemId.set(first.item_id);
+    }, [$items, $selectedItemId]);
+
+    const selectLast = useCallback(() => {
+      const items = $items.get();
+      const last = items.at(-1);
+      if (!last) {
+        return;
+      }
+      $selectedItemId.set(last.item_id);
+    }, [$items, $selectedItemId]);
+
+    // Set up socket listeners
+    useEffect(() => {
+      if (!socket) {
+        return;
+      }
+
+      const onProgress = (data: S['InvocationProgressEvent']) => {
+        if (data.destination !== session.id) {
+          return;
+        }
+        const isFirstProgressImage = !$progressData.get()[data.item_id]?.progressImage && !!data.image;
+        setProgress($progressData, data);
+        if ($autoSwitch.get() === 'first_progress' && isFirstProgressImage) {
+          $selectedItemId.set(data.item_id);
+        }
+      };
+
+      socket.on('invocation_progress', onProgress);
+
+      return () => {
+        socket.off('invocation_progress', onProgress);
+      };
+    }, [$autoSwitch, $progressData, $selectedItemId, session.id, socket]);
+
+    // Set up state subscriptions and effects
+    useEffect(() => {
+      let _prevItems: readonly S['SessionQueueItem'][] = [];
+      // Seed the $items atom with the initial query cache state
+      $items.set(selectQueueItems(store.getState()));
+
+      // Manually keep the $items atom in sync as the query cache is updated
+      const unsubReduxSyncToItemsAtom = store.subscribe(() => {
+        const prevItems = $items.get();
+        const items = selectQueueItems(store.getState());
+        if (items !== prevItems) {
+          _prevItems = prevItems;
+          $items.set(items);
+        }
+      });
+
+      // Handle cases that could result in a nonexistent queue item being selected.
+      const unsubEnsureSelectedItemIdExists = effect([$items, $selectedItemId], (items, selectedItemId) => {
+        // If there are no items, cannot have a selected item.
+        if (items.length === 0) {
+          $selectedItemId.set(null);
+          return;
+        }
+        // If there is no selected item but there are items, select the first one.
+        if (selectedItemId === null && items.length > 0) {
+          $selectedItemId.set(items[0]?.item_id ?? null);
+          return;
+        }
+        // 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) {
+          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;
+        }
+      });
+
+      // Clean up the progress data when a queue item is discarded.
+      const unsubCleanUpProgressData = $items.listen(async (items) => {
+        const progressData = $progressData.get();
+
+        const toDelete: number[] = [];
+        const toUpdate: ProgressData[] = [];
+
+        for (const datum of Object.values(progressData)) {
+          const item = items.find(({ item_id }) => item_id === datum.itemId);
+          if (!item) {
+            toDelete.push(datum.itemId);
+          } else if (item.status === 'canceled' || item.status === 'failed') {
+            toUpdate[datum.itemId] = {
+              ...datum,
+              progressEvent: null,
+              progressImage: null,
+              imageDTO: null,
+            };
+          }
+        }
+
+        for (const item of items) {
+          const datum = progressData[item.item_id];
+
+          if (datum) {
+            if (datum.imageDTO) {
+              continue;
+            }
+            const outputImageName = getOutputImageName(item);
+            if (!outputImageName) {
+              continue;
+            }
+            const imageDTO = await getImageDTOSafe(outputImageName);
+            if (!imageDTO) {
+              continue;
+            }
+            toUpdate.push({
+              ...datum,
+              imageDTO,
+            });
+          } else {
+            const outputImageName = getOutputImageName(item);
+            if (!outputImageName) {
+              continue;
+            }
+            const imageDTO = await getImageDTOSafe(outputImageName);
+            if (!imageDTO) {
+              continue;
+            }
+            toUpdate.push({
+              ...getInitialProgressData(item.item_id),
+              imageDTO,
+            });
+          }
+        }
+
+        if (toDelete.length === 0 && toUpdate.length === 0) {
+          return;
+        }
+
+        const newProgressData = { ...progressData };
+
+        for (const itemId of toDelete) {
+          delete newProgressData[itemId];
+        }
+
+        for (const datum of toUpdate) {
+          newProgressData[datum.itemId] = datum;
+        }
+
+        $progressData.set(newProgressData);
+      });
+
+      // We only want to auto-switch to completed queue items once their images have fully loaded to prevent flashes
+      // of fallback content and/or progress images. The only surefire way to determine when images have fully loaded
+      // is via the image elements' `onLoad` callback. Images set `$lastLoadedItemId` to their queue item ID in their
+      // `onLoad` handler, and we listen for that here. If auto-switch is enabled, we then switch the to the item.
+      //
+      // TODO: This isn't perfect... we set $lastLoadedItemId in the mini preview component, but the full view
+      // component still needs to retrieve the image from the browser cache... can result in a flash of the progress
+      // image...
+      const unsubHandleAutoSwitch = $lastLoadedItemId.listen((lastLoadedItemId) => {
+        if (lastLoadedItemId === null) {
+          return;
+        }
+        if ($autoSwitch.get() === 'completed') {
+          $selectedItemId.set(lastLoadedItemId);
+        }
+        $lastLoadedItemId.set(null);
+      });
+
+      // Create an RTK Query subscription. Without this, the query cache selector will never return anything bc RTK
+      // doesn't know we care about it.
+      const { unsubscribe: unsubQueueItemsQuery } = store.dispatch(
+        queueApi.endpoints.listAllQueueItems.initiate({ destination: session.id })
+      );
+
+      // Clean up all subscriptions and top-level (i.e. non-computed/derived state)
+      return () => {
+        unsubHandleAutoSwitch();
+        unsubQueueItemsQuery();
+        unsubReduxSyncToItemsAtom();
+        unsubEnsureSelectedItemIdExists();
+        unsubCleanUpProgressData();
+        $items.set([]);
+        $progressData.set({});
+        $selectedItemId.set(null);
+      };
+    }, [$autoSwitch, $items, $lastLoadedItemId, $progressData, $selectedItemId, selectQueueItems, session.id, store]);
+
+    const value = useMemo<CanvasSessionContextValue>(
+      () => ({
+        session,
+        $items,
+        $hasItems,
+        $progressData,
+        $selectedItemId,
+        $autoSwitch,
+        $selectedItem,
+        $selectedItemIndex,
+        $lastLoadedItemId,
+        $selectedItemOutputImageDTO,
+        $itemCount,
+        selectNext,
+        selectPrev,
+        selectFirst,
+        selectLast,
+      }),
+      [
+        $autoSwitch,
+        $items,
+        $hasItems,
+        $lastLoadedItemId,
+        $progressData,
+        $selectedItem,
+        $selectedItemId,
+        $selectedItemIndex,
+        session,
+        $selectedItemOutputImageDTO,
+        $itemCount,
+        selectNext,
+        selectPrev,
+        selectFirst,
+        selectLast,
+      ]
+    );
+
+    return <CanvasSessionContext.Provider value={value}>{children}</CanvasSessionContext.Provider>;
+  }
+);
+CanvasSessionContextProvider.displayName = 'CanvasSessionContextProvider';
+
+export const useCanvasSessionContext = () => {
+  const ctx = useContext(CanvasSessionContext);
+  assert(ctx !== null, "'useCanvasSessionContext' must be used within a CanvasSessionContextProvider");
+  return ctx;
+};
+
+export const useOutputImageDTO = (item: S['SessionQueueItem']) => {
+  const ctx = useCanvasSessionContext();
+  const $imageDTO = useState(() =>
+    computed([ctx.$progressData], (progressData) => progressData[item.item_id]?.imageDTO ?? null)
+  )[0];
+  const imageDTO = useStore($imageDTO);
+
+  return imageDTO;
+};

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

@@ -0,0 +1,40 @@
+import { isImageField } from 'features/nodes/types/common';
+import { isCanvasOutputNodeId } from 'features/nodes/util/graph/graphBuilderUtils';
+import { round } from 'lodash-es';
+import type { S } from 'services/api/types';
+import { objectEntries } from 'tsafe';
+
+export const getProgressMessage = (data?: S['InvocationProgressEvent'] | null) => {
+  if (!data) {
+    return 'Generating';
+  }
+
+  let message = data.message;
+  if (data.percentage) {
+    message += ` (${round(data.percentage * 100)}%)`;
+  }
+  return message;
+};
+
+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 getOutputImageName = (item: S['SessionQueueItem']) => {
+  const nodeId = Object.entries(item.session.source_prepared_mapping).find(([nodeId]) =>
+    isCanvasOutputNodeId(nodeId)
+  )?.[1][0];
+  const output = nodeId ? item.session.results[nodeId] : undefined;
+
+  if (!output) {
+    return null;
+  }
+
+  for (const [_name, value] of objectEntries(output)) {
+    if (isImageField(value)) {
+      return value.image_name;
+    }
+  }
+
+  return null;
+};

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/use-staging-keyboard-nav.ts

@@ -0,0 +1,11 @@
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+export const useStagingAreaKeyboardNav = () => {
+  const ctx = useCanvasSessionContext();
+
+  useHotkeys('left', ctx.selectPrev, { preventDefault: true });
+  useHotkeys('right', ctx.selectNext, { preventDefault: true });
+  useHotkeys('meta+left', ctx.selectFirst, { preventDefault: true });
+  useHotkeys('meta+right', ctx.selectLast, { preventDefault: true });
+};

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

@@ -0,0 +1,27 @@
+import { ButtonGroup } from '@invoke-ai/ui-library';
+import { SimpleStagingAreaToolbarMenu } from 'features/controlLayers/components/StagingArea/SimpleStagingAreaToolbarMenu';
+import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
+import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
+import { StagingAreaToolbarImageCountButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton';
+import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton';
+import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
+import { memo } from 'react';
+
+export const SimpleStagingAreaToolbar = memo(() => {
+  return (
+    <>
+      <ButtonGroup borderRadius="base" shadow="dark-lg">
+        <StagingAreaToolbarPrevButton />
+        <StagingAreaToolbarImageCountButton />
+        <StagingAreaToolbarNextButton />
+      </ButtonGroup>
+      <ButtonGroup borderRadius="base" shadow="dark-lg">
+        <StagingAreaToolbarDiscardSelectedButton />
+        <SimpleStagingAreaToolbarMenu />
+        <StagingAreaToolbarDiscardAllButton />
+      </ButtonGroup>
+    </>
+  );
+});
+
+SimpleStagingAreaToolbar.displayName = 'SimpleStagingAreaToolbar';

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

@@ -0,0 +1,17 @@
+import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { StagingAreaToolbarMenuAutoSwitch } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenuAutoSwitch';
+import { memo } from 'react';
+import { PiDotsThreeBold } from 'react-icons/pi';
+
+export const SimpleStagingAreaToolbarMenu = memo(() => {
+  return (
+    <Menu>
+      <MenuButton as={IconButton} icon={<PiDotsThreeBold />} colorScheme="invokeBlue" />
+      <MenuList>
+        <StagingAreaToolbarMenuAutoSwitch />
+      </MenuList>
+    </Menu>
+  );
+});
+
+SimpleStagingAreaToolbarMenu.displayName = 'SimpleStagingAreaToolbarMenu';

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

@@ -1,24 +0,0 @@
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-import { useGetQueueCountsByDestinationQuery } from 'services/api/endpoints/queue';
-
-// This hook just serves as a persistent subscriber for the queue count query.
-const queueCountArg = { destination: 'canvas' };
-const useCanvasQueueCountWatcher = () => {
-  useGetQueueCountsByDestinationQuery(queueCountArg);
-};
-
-export const StagingAreaIsStagingGate = memo((props: PropsWithChildren) => {
-  useCanvasQueueCountWatcher();
-  const isStaging = useAppSelector(selectIsStaging);
-
-  if (!isStaging) {
-    return null;
-  }
-
-  return props.children;
-});
-
-StagingAreaIsStagingGate.displayName = 'StagingAreaIsStagingGate';

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

@@ -1,30 +1,50 @@
 import { ButtonGroup } 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';
 import { StagingAreaToolbarImageCountButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton';
+import { StagingAreaToolbarMenu } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenu';
 import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton';
 import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
-import { StagingAreaToolbarSaveAsMenu } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveAsMenu';
 import { StagingAreaToolbarSaveSelectedToGalleryButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton';
 import { StagingAreaToolbarToggleShowResultsButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton';
-import { memo } from 'react';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { memo, useEffect } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 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 (
     <>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
-        <StagingAreaToolbarPrevButton />
+        <StagingAreaToolbarPrevButton isDisabled={!shouldShowStagedImage} />
         <StagingAreaToolbarImageCountButton />
-        <StagingAreaToolbarNextButton />
+        <StagingAreaToolbarNextButton isDisabled={!shouldShowStagedImage} />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaToolbarAcceptButton />
         <StagingAreaToolbarToggleShowResultsButton />
         <StagingAreaToolbarSaveSelectedToGalleryButton />
-        <StagingAreaToolbarSaveAsMenu />
-        <StagingAreaToolbarDiscardSelectedButton />
-        <StagingAreaToolbarDiscardAllButton />
+        <StagingAreaToolbarMenu />
+        <StagingAreaToolbarDiscardSelectedButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarDiscardAllButton isDisabled={!shouldShowStagedImage} />
       </ButtonGroup>
     </>
   );

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

@@ -2,57 +2,63 @@ import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
-import {
-  selectImageCount,
-  selectSelectedImage,
-  stagingAreaReset,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { canvasSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
-import { imageDTOToImageObject } from 'features/controlLayers/store/util';
+import { imageNameToImageObject } from 'features/controlLayers/store/util';
+import { useDeleteQueueItemsByDestination } from 'features/queue/hooks/useDeleteQueueItemsByDestination';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiCheckBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarAcceptButton = memo(() => {
+  const ctx = useCanvasSessionContext();
   const dispatch = useAppDispatch();
   const canvasManager = useCanvasManager();
   const bboxRect = useAppSelector(selectBboxRect);
-  const selectedImage = useAppSelector(selectSelectedImage);
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
-  const imageCount = useAppSelector(selectImageCount);
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
   const isCanvasFocused = useIsRegionFocused('canvas');
+  const selectedItemImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const deleteQueueItemsByDestination = useDeleteQueueItemsByDestination();
 
   const { t } = useTranslation();
 
   const acceptSelected = useCallback(() => {
-    if (!selectedImage) {
+    if (!selectedItemImageDTO) {
       return;
     }
-    const { x, y } = bboxRect;
-    const { imageDTO, offsetX, offsetY } = selectedImage;
-    const imageObject = imageDTOToImageObject(imageDTO);
+    const { x, y, width, height } = bboxRect;
+    const imageObject = imageNameToImageObject(selectedItemImageDTO.image_name, { width, height });
     const overrides: Partial<CanvasRasterLayerState> = {
-      position: { x: x + offsetX, y: y + offsetY },
+      position: { x, y },
       objects: [imageObject],
     };
 
     dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
-    dispatch(stagingAreaReset());
-  }, [bboxRect, dispatch, selectedEntityIdentifier?.type, selectedImage]);
+    dispatch(canvasSessionReset());
+    deleteQueueItemsByDestination.trigger(ctx.session.id);
+  }, [
+    selectedItemImageDTO,
+    bboxRect,
+    dispatch,
+    selectedEntityIdentifier?.type,
+    deleteQueueItemsByDestination,
+    ctx.session.id,
+  ]);
 
   useHotkeys(
     ['enter'],
     acceptSelected,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && shouldShowStagedImage && imageCount > 1,
+      enabled: isCanvasFocused && shouldShowStagedImage && selectedItemImageDTO !== null,
     },
-    [isCanvasFocused, shouldShowStagedImage, imageCount]
+    [isCanvasFocused, shouldShowStagedImage, selectedItemImageDTO]
   );
 
   return (
@@ -62,7 +68,8 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
       icon={<PiCheckBold />}
       onClick={acceptSelected}
       colorScheme="invokeBlue"
-      isDisabled={!selectedImage}
+      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled}
+      isLoading={deleteQueueItemsByDestination.isLoading}
     />
   );
 });

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

@@ -1,17 +1,27 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { stagingAreaReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useDeleteQueueItemsByDestination } from 'features/queue/hooks/useDeleteQueueItemsByDestination';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardAllButton = memo(() => {
+export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
+  const ctx = useCanvasSessionContext();
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const deleteQueueItemsByDestination = useDeleteQueueItemsByDestination();
 
   const discardAll = useCallback(() => {
-    dispatch(stagingAreaReset());
-  }, [dispatch]);
+    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]);
 
   return (
     <IconButton
@@ -21,6 +31,8 @@ export const StagingAreaToolbarDiscardAllButton = memo(() => {
       onClick={discardAll}
       colorScheme="error"
       fontSize={16}
+      isDisabled={isDisabled || deleteQueueItemsByDestination.isDisabled}
+      isLoading={deleteQueueItemsByDestination.isLoading}
     />
   );
 });

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

@@ -1,34 +1,36 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  selectImageCount,
-  selectSelectedImage,
-  selectStagedImageIndex,
-  stagingAreaReset,
-  stagingAreaStagedImageDiscarded,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+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 { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardSelectedButton = memo(() => {
+export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
   const dispatch = useAppDispatch();
-  const index = useAppSelector(selectStagedImageIndex);
-  const selectedImage = useAppSelector(selectSelectedImage);
-  const imageCount = useAppSelector(selectImageCount);
+  const ctx = useCanvasSessionContext();
+  const deleteQueueItem = useDeleteQueueItem();
+  const selectedItemId = useStore(ctx.$selectedItemId);
 
   const { t } = useTranslation();
 
-  const discardSelected = useCallback(() => {
-    if (!selectedImage) {
+  const discardSelected = useCallback(async () => {
+    if (selectedItemId === null) {
       return;
     }
-    if (imageCount === 1) {
-      dispatch(stagingAreaReset());
-    } else {
-      dispatch(stagingAreaStagedImageDiscarded({ index }));
+    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());
+      }
     }
-  }, [selectedImage, imageCount, dispatch, index]);
+  }, [selectedItemId, deleteQueueItem, ctx.$itemCount, ctx.session.type, dispatch]);
 
   return (
     <IconButton
@@ -38,7 +40,8 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(() => {
       onClick={discardSelected}
       colorScheme="invokeBlue"
       fontSize={16}
-      isDisabled={!selectedImage}
+      isDisabled={selectedItemId === null || deleteQueueItem.isDisabled || isDisabled}
+      isLoading={deleteQueueItem.isLoading}
     />
   );
 });

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

@@ -1,19 +1,20 @@
 import { Button } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectImageCount, selectStagedImageIndex } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useStore } from '@nanostores/react';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { memo, useMemo } from 'react';
 
 export const StagingAreaToolbarImageCountButton = memo(() => {
-  const index = useAppSelector(selectStagedImageIndex);
-  const imageCount = useAppSelector(selectImageCount);
+  const ctx = useCanvasSessionContext();
+  const selectItemIndex = useStore(ctx.$selectedItemIndex);
+  const itemCount = useStore(ctx.$itemCount);
 
   const counterText = useMemo(() => {
-    if (imageCount > 0) {
-      return `${(index ?? 0) + 1} of ${imageCount}`;
+    if (itemCount > 0 && selectItemIndex !== null) {
+      return `${selectItemIndex + 1} of ${itemCount}`;
     } else {
       return `0 of 0`;
     }
-  }, [imageCount, index]);
+  }, [itemCount, selectItemIndex]);
 
   return (
     <Button colorScheme="base" pointerEvents="none" minW={28}>

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

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

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

@@ -0,0 +1,34 @@
+/* eslint-disable i18next/no-literal-string */
+import { MenuItemOption, MenuOptionGroup } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useCanvasSessionContext, zAutoSwitchMode } from 'features/controlLayers/components/SimpleSession/context';
+import { memo, useCallback } from 'react';
+
+export const StagingAreaToolbarMenuAutoSwitch = memo(() => {
+  const ctx = useCanvasSessionContext();
+  const autoSwitch = useStore(ctx.$autoSwitch);
+
+  const onChange = useCallback(
+    (val: string | string[]) => {
+      const newAutoSwitch = zAutoSwitchMode.parse(val);
+      ctx.$autoSwitch.set(newAutoSwitch);
+    },
+    [ctx.$autoSwitch]
+  );
+
+  return (
+    <MenuOptionGroup value={autoSwitch} onChange={onChange} title="Auto Switch" type="radio">
+      <MenuItemOption value="off" closeOnSelect={false}>
+        Off
+      </MenuItemOption>
+      <MenuItemOption value="first_progress" closeOnSelect={false}>
+        First Progress
+      </MenuItemOption>
+      <MenuItemOption value="completed" closeOnSelect={false}>
+        Completed
+      </MenuItemOption>
+    </MenuOptionGroup>
+  );
+});
+
+StagingAreaToolbarMenuAutoSwitch.displayName = 'StagingAreaToolbarMenuAutoSwitch';

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

@@ -0,0 +1,132 @@
+import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useAppStore } from 'app/store/nanostores/store';
+import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { createNewCanvasEntityFromImage } from 'features/imageActions/actions';
+import { toast } from 'features/toast/toast';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { copyImage } from 'services/api/endpoints/images';
+
+const uploadImageArg = { image_category: 'general', is_intermediate: true, silent: true } as const;
+
+export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
+  const canvasManager = useCanvasManager();
+  const { t } = useTranslation();
+  const ctx = useCanvasSessionContext();
+  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const store = useAppStore();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const toastSentToCanvas = useCallback(() => {
+    toast({
+      id: 'SENT_TO_CANVAS',
+      title: t('toast.sentToCanvas'),
+      status: 'success',
+    });
+  }, [t]);
+
+  const onClickNewRasterLayerFromImage = useCallback(async () => {
+    if (!selectedItemOutputImageDTO) {
+      return;
+    }
+    const { dispatch, getState } = store;
+    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    createNewCanvasEntityFromImage({
+      imageDTO,
+      type: 'raster_layer',
+      dispatch,
+      getState,
+      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
+    });
+    toastSentToCanvas();
+  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+
+  const onClickNewControlLayerFromImage = useCallback(async () => {
+    if (!selectedItemOutputImageDTO) {
+      return;
+    }
+    const { dispatch, getState } = store;
+    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+
+    createNewCanvasEntityFromImage({
+      imageDTO,
+      type: 'control_layer',
+      dispatch,
+      getState,
+      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
+    });
+    toastSentToCanvas();
+  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+
+  const onClickNewInpaintMaskFromImage = useCallback(async () => {
+    if (!selectedItemOutputImageDTO) {
+      return;
+    }
+    const { dispatch, getState } = store;
+    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+
+    createNewCanvasEntityFromImage({
+      imageDTO,
+      type: 'inpaint_mask',
+      dispatch,
+      getState,
+      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
+    });
+    toastSentToCanvas();
+  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+
+  const onClickNewRegionalGuidanceFromImage = useCallback(async () => {
+    if (!selectedItemOutputImageDTO) {
+      return;
+    }
+    const { dispatch, getState } = store;
+    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+
+    createNewCanvasEntityFromImage({
+      imageDTO,
+      type: 'regional_guidance',
+      dispatch,
+      getState,
+      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
+    });
+    toastSentToCanvas();
+  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+
+  return (
+    <MenuGroup title="New Layer From Image">
+      <MenuItem
+        icon={<NewLayerIcon />}
+        onClickCapture={onClickNewInpaintMaskFromImage}
+        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      >
+        {t('controlLayers.inpaintMask')}
+      </MenuItem>
+      <MenuItem
+        icon={<NewLayerIcon />}
+        onClickCapture={onClickNewRegionalGuidanceFromImage}
+        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      >
+        {t('controlLayers.regionalGuidance')}
+      </MenuItem>
+      <MenuItem
+        icon={<NewLayerIcon />}
+        onClickCapture={onClickNewControlLayerFromImage}
+        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      >
+        {t('controlLayers.controlLayer')}
+      </MenuItem>
+      <MenuItem
+        icon={<NewLayerIcon />}
+        onClickCapture={onClickNewRasterLayerFromImage}
+        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      >
+        {t('controlLayers.rasterLayer')}
+      </MenuItem>
+    </MenuGroup>
+  );
+});
+
+StagingAreaToolbarNewLayerFromImageMenuItems.displayName = 'StagingAreaToolbarNewLayerFromImageMenuItems';

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

@@ -1,38 +1,31 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import {
-  selectImageCount,
-  stagingAreaNextStagedImageSelected,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowRightBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarNextButton = memo(() => {
-  const dispatch = useAppDispatch();
-  const canvasManager = useCanvasManager();
-  const imageCount = useAppSelector(selectImageCount);
-  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
+  const ctx = useCanvasSessionContext();
+  const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
   const { t } = useTranslation();
 
   const selectNext = useCallback(() => {
-    dispatch(stagingAreaNextStagedImageSelected());
-  }, [dispatch]);
+    ctx.selectNext();
+  }, [ctx]);
 
   useHotkeys(
     ['right'],
-    selectNext,
+    ctx.selectNext,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && shouldShowStagedImage && imageCount > 1,
+      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
     },
-    [isCanvasFocused, shouldShowStagedImage, imageCount]
+    [isCanvasFocused, isDisabled, itemCount, ctx.selectNext]
   );
 
   return (
@@ -42,7 +35,7 @@ export const StagingAreaToolbarNextButton = memo(() => {
       icon={<PiArrowRightBold />}
       onClick={selectNext}
       colorScheme="invokeBlue"
-      isDisabled={imageCount <= 1 || !shouldShowStagedImage}
+      isDisabled={itemCount <= 1 || isDisabled}
     />
   );
 });

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

@@ -1,38 +1,31 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import {
-  selectImageCount,
-  stagingAreaPrevStagedImageSelected,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowLeftBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarPrevButton = memo(() => {
-  const dispatch = useAppDispatch();
-  const canvasManager = useCanvasManager();
-  const imageCount = useAppSelector(selectImageCount);
-  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
+  const ctx = useCanvasSessionContext();
+  const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
   const { t } = useTranslation();
 
   const selectPrev = useCallback(() => {
-    dispatch(stagingAreaPrevStagedImageSelected());
-  }, [dispatch]);
+    ctx.selectPrev();
+  }, [ctx]);
 
   useHotkeys(
     ['left'],
-    selectPrev,
+    ctx.selectPrev,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && shouldShowStagedImage && imageCount > 1,
+      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
     },
-    [isCanvasFocused, shouldShowStagedImage, imageCount]
+    [isCanvasFocused, isDisabled, itemCount, ctx.selectPrev]
   );
 
   return (
@@ -42,7 +35,7 @@ export const StagingAreaToolbarPrevButton = memo(() => {
       icon={<PiArrowLeftBold />}
       onClick={selectPrev}
       colorScheme="invokeBlue"
-      isDisabled={imageCount <= 1 || !shouldShowStagedImage}
+      isDisabled={itemCount <= 1 || isDisabled}
     />
   );
 });

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

@@ -1,136 +0,0 @@
-import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppStore } from 'app/store/nanostores/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
-import { selectSelectedImage } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { createNewCanvasEntityFromImage } from 'features/imageActions/actions';
-import { toast } from 'features/toast/toast';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiDotsThreeBold } from 'react-icons/pi';
-import { imageDTOToFile, uploadImage } from 'services/api/endpoints/images';
-
-const uploadImageArg = { image_category: 'general', is_intermediate: true, silent: true } as const;
-
-export const StagingAreaToolbarSaveAsMenu = memo(() => {
-  const { t } = useTranslation();
-  const selectedImage = useAppSelector(selectSelectedImage);
-  const store = useAppStore();
-
-  const onClickNewRasterLayerFromImage = useCallback(async () => {
-    if (!selectedImage) {
-      return;
-    }
-    const { dispatch, getState } = store;
-    const file = await imageDTOToFile(selectedImage.imageDTO);
-    const imageDTO = await uploadImage({ file, ...uploadImageArg });
-    createNewCanvasEntityFromImage({
-      imageDTO,
-      type: 'raster_layer',
-      dispatch,
-      getState,
-      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
-    });
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [selectedImage, store, t]);
-
-  const onClickNewControlLayerFromImage = useCallback(async () => {
-    if (!selectedImage) {
-      return;
-    }
-    const { dispatch, getState } = store;
-    const file = await imageDTOToFile(selectedImage.imageDTO);
-    const imageDTO = await uploadImage({ file, ...uploadImageArg });
-    createNewCanvasEntityFromImage({
-      imageDTO,
-      type: 'control_layer',
-      dispatch,
-      getState,
-      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
-    });
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [selectedImage, store, t]);
-
-  const onClickNewInpaintMaskFromImage = useCallback(async () => {
-    if (!selectedImage) {
-      return;
-    }
-    const { dispatch, getState } = store;
-    const file = await imageDTOToFile(selectedImage.imageDTO);
-    const imageDTO = await uploadImage({ file, ...uploadImageArg });
-    createNewCanvasEntityFromImage({
-      imageDTO,
-      type: 'inpaint_mask',
-      dispatch,
-      getState,
-      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
-    });
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [selectedImage, store, t]);
-
-  const onClickNewRegionalGuidanceFromImage = useCallback(async () => {
-    if (!selectedImage) {
-      return;
-    }
-    const { dispatch, getState } = store;
-    const file = await imageDTOToFile(selectedImage.imageDTO);
-    const imageDTO = await uploadImage({ file, ...uploadImageArg });
-    createNewCanvasEntityFromImage({
-      imageDTO,
-      type: 'regional_guidance',
-      dispatch,
-      getState,
-      overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
-    });
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [selectedImage, store, t]);
-
-  return (
-    <Menu>
-      <MenuButton
-        as={IconButton}
-        aria-label={t('controlLayers.newLayerFromImage')}
-        tooltip={t('controlLayers.newLayerFromImage')}
-        icon={<PiDotsThreeBold />}
-        colorScheme="invokeBlue"
-        isDisabled={!selectedImage}
-      />
-      <MenuList>
-        <MenuItem icon={<NewLayerIcon />} onClickCapture={onClickNewInpaintMaskFromImage} isDisabled={!selectedImage}>
-          {t('controlLayers.inpaintMask')}
-        </MenuItem>
-        <MenuItem
-          icon={<NewLayerIcon />}
-          onClickCapture={onClickNewRegionalGuidanceFromImage}
-          isDisabled={!selectedImage}
-        >
-          {t('controlLayers.regionalGuidance')}
-        </MenuItem>
-        <MenuItem icon={<NewLayerIcon />} onClickCapture={onClickNewControlLayerFromImage} isDisabled={!selectedImage}>
-          {t('controlLayers.controlLayer')}
-        </MenuItem>
-        <MenuItem icon={<NewLayerIcon />} onClickCapture={onClickNewRasterLayerFromImage} isDisabled={!selectedImage}>
-          {t('controlLayers.rasterLayer')}
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-});
-
-StagingAreaToolbarSaveAsMenu.displayName = 'StagingAreaToolbarSaveAsMenu';

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

@@ -1,24 +1,29 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { withResultAsync } from 'common/util/result';
-import { selectSelectedImage } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
-import { imageDTOToFile, uploadImage } from 'services/api/endpoints/images';
+import { copyImage } from 'services/api/endpoints/images';
 
 const TOAST_ID = 'SAVE_STAGING_AREA_IMAGE_TO_GALLERY';
 
 export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
+  const canvasManager = useCanvasManager();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const selectedImage = useAppSelector(selectSelectedImage);
+  const ctx = useCanvasSessionContext();
+  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
   const { t } = useTranslation();
 
   const saveSelectedImageToGallery = useCallback(async () => {
-    if (!selectedImage) {
+    if (!selectedItemOutputImageDTO) {
       return;
     }
 
@@ -26,10 +31,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
     // the gallery without borking the canvas, which may need this image to exist.
     const result = await withResultAsync(async () => {
       // Create a new file with the same name, which we will upload
-      const file = await imageDTOToFile(selectedImage.imageDTO);
-
-      await uploadImage({
-        file,
+      await copyImage(selectedItemOutputImageDTO.image_name, {
         // Image should show up in the Images tab
         image_category: 'general',
         is_intermediate: false,
@@ -53,7 +55,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
         status: 'error',
       });
     }
-  }, [autoAddBoardId, selectedImage, t]);
+  }, [autoAddBoardId, selectedItemOutputImageDTO, t]);
 
   return (
     <IconButton
@@ -62,7 +64,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
       icon={<PiFloppyDiskBold />}
       onClick={saveSelectedImageToGallery}
       colorScheme="invokeBlue"
-      isDisabled={!selectedImage}
+      isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
     />
   );
 });

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

@@ -12,8 +12,8 @@ export const StagingAreaToolbarToggleShowResultsButton = memo(() => {
   const { t } = useTranslation();
 
   const toggleShowResults = useCallback(() => {
-    canvasManager.stagingArea.$shouldShowStagedImage.set(!shouldShowStagedImage);
-  }, [canvasManager.stagingArea.$shouldShowStagedImage, shouldShowStagedImage]);
+    canvasManager.stagingArea.$shouldShowStagedImage.set(!canvasManager.stagingArea.$shouldShowStagedImage.get());
+  }, [canvasManager.stagingArea.$shouldShowStagedImage]);
 
   return (
     <IconButton

invokeai/frontend/web/src/features/controlLayers/components/StartOverButton.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable i18next/no-literal-string */
+import { Button } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { $simpleId } from 'features/ui/components/MainPanelContent';
+import { memo, useCallback } from 'react';
+
+export const StartOverButton = memo(() => {
+  const dispatch = useAppDispatch();
+
+  const startOver = useCallback(() => {
+    // dispatch(canvasSessionTypeChanged({ type: 'simple' }));
+    $simpleId.set(null);
+  }, []);
+
+  return (
+    <Button size="sm" variant="link" alignSelf="stretch" onClick={startOver} px={2}>
+      Start Over
+    </Button>
+  );
+});
+StartOverButton.displayName = 'StartOverButton';

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolBboxButton = memo(() => {
   const { t } = useTranslation();
   const selectBbox = useSelectTool('bbox');
   const isSelected = useToolIsSelected('bbox');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectBboxTool',
     category: 'canvas',
     callback: selectBbox,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [selectBbox, isSelected, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [selectBbox, isSelected],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolBrushButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('brush');
   const selectBrush = useSelectTool('brush');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectBrushTool',
     category: 'canvas',
     callback: selectBrush,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [isSelected, selectBrush, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [isSelected, selectBrush],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx

@@ -1,7 +1,6 @@
 import {
   CompositeSlider,
   FormControl,
-  FormLabel,
   IconButton,
   NumberInput,
   NumberInputField,
@@ -16,12 +15,10 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
 import { selectCanvasSettingsSlice, settingsBrushWidthChanged } from 'features/controlLayers/store/canvasSettingsSlice';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { clamp } from 'lodash-es';
 import type { KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
 
 const selectBrushWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.brushWidth);
@@ -68,8 +65,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
 
 export const ToolBrushWidth = memo(() => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const imageViewer = useImageViewer();
   const isSelected = useToolIsSelected('brush');
   const width = useAppSelector(selectBrushWidth);
   const [localValue, setLocalValue] = useState(width);
@@ -133,21 +128,20 @@ export const ToolBrushWidth = memo(() => {
     id: 'decrementToolWidth',
     category: 'canvas',
     callback: decrement,
-    options: { enabled: isSelected && !imageViewer.isOpen },
-    dependencies: [decrement, isSelected, imageViewer.isOpen],
+    options: { enabled: isSelected },
+    dependencies: [decrement, isSelected],
   });
   useRegisteredHotkeys({
     id: 'incrementToolWidth',
     category: 'canvas',
     callback: increment,
-    options: { enabled: isSelected && !imageViewer.isOpen },
-    dependencies: [increment, isSelected, imageViewer.isOpen],
+    options: { enabled: isSelected },
+    dependencies: [increment, isSelected],
   });
 
   return (
     <Popover>
       <FormControl w="min-content" gap={2}>
-        <FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
         <PopoverAnchor>
           <NumberInput
             variant="outline"

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolColorPickerButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('colorPicker');
   const selectColorPicker = useSelectTool('colorPicker');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectColorPickerTool',
     category: 'canvas',
     callback: selectColorPicker,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [selectColorPicker, isSelected, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [selectColorPicker, isSelected],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolEraserButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('eraser');
   const selectEraser = useSelectTool('eraser');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectEraserTool',
     category: 'canvas',
     callback: selectEraser,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [isSelected, selectEraser, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [isSelected, selectEraser],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx

@@ -1,7 +1,6 @@
 import {
   CompositeSlider,
   FormControl,
-  FormLabel,
   IconButton,
   NumberInput,
   NumberInputField,
@@ -19,12 +18,10 @@ import {
   selectCanvasSettingsSlice,
   settingsEraserWidthChanged,
 } from 'features/controlLayers/store/canvasSettingsSlice';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { clamp } from 'lodash-es';
 import type { KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
 
 const selectEraserWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.eraserWidth);
@@ -71,8 +68,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
 
 export const ToolEraserWidth = memo(() => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const imageViewer = useImageViewer();
   const isSelected = useToolIsSelected('eraser');
   const width = useAppSelector(selectEraserWidth);
   const [localValue, setLocalValue] = useState(width);
@@ -136,21 +131,20 @@ export const ToolEraserWidth = memo(() => {
     id: 'decrementToolWidth',
     category: 'canvas',
     callback: decrement,
-    options: { enabled: isSelected && !imageViewer.isOpen },
-    dependencies: [decrement, isSelected, imageViewer.isOpen],
+    options: { enabled: isSelected },
+    dependencies: [decrement, isSelected],
   });
   useRegisteredHotkeys({
     id: 'incrementToolWidth',
     category: 'canvas',
     callback: increment,
-    options: { enabled: isSelected && !imageViewer.isOpen },
-    dependencies: [increment, isSelected, imageViewer.isOpen],
+    options: { enabled: isSelected },
+    dependencies: [increment, isSelected],
   });
 
   return (
     <Popover>
       <FormControl w="min-content" gap={2}>
-        <FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
         <PopoverAnchor>
           <NumberInput
             variant="outline"

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx

@@ -14,7 +14,6 @@ import RgbaColorPicker from 'common/components/ColorPicker/RgbaColorPicker';
 import { rgbaColorToString } from 'common/util/colorCodeTransformers';
 import { selectCanvasSettingsSlice, settingsColorChanged } from 'features/controlLayers/store/canvasSettingsSlice';
 import type { RgbaColor } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,14 +30,13 @@ export const ToolColorPicker = memo(() => {
     },
     [dispatch]
   );
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'setFillToWhite',
     category: 'canvas',
     callback: () => dispatch(settingsColorChanged({ r: 255, g: 255, b: 255, a: 1 })),
-    options: { preventDefault: true, enabled: !imageViewer.isOpen },
-    dependencies: [dispatch, imageViewer.isOpen],
+    options: { preventDefault: true },
+    dependencies: [dispatch],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolMoveButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('move');
   const selectMove = useSelectTool('move');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectMoveTool',
     category: 'canvas',
     callback: selectMove,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [isSelected, selectMove, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [isSelected, selectMove],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolRectButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('rect');
   const selectRect = useSelectTool('rect');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectRectTool',
     category: 'canvas',
     callback: selectRect,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [isSelected, selectRect, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [isSelected, selectRect],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,14 +9,13 @@ export const ToolViewButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('view');
   const selectView = useSelectTool('view');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'selectViewTool',
     category: 'canvas',
     callback: selectView,
-    options: { enabled: !isSelected && !imageViewer.isOpen },
-    dependencies: [selectView, isSelected, imageViewer.isOpen],
+    options: { enabled: !isSelected },
+    dependencies: [selectView, isSelected],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import { Divider, Flex, Spacer } from '@invoke-ai/ui-library';
+import { Divider, Flex, Heading } from '@invoke-ai/ui-library';
 import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
@@ -29,11 +29,14 @@ export const CanvasToolbar = memo(() => {
   useCanvasFilterHotkey();
 
   return (
-    <Flex w="full" gap={2} alignItems="center">
+    <Flex w="full" gap={2} alignItems="center" px={2}>
+      <Heading size="sm" me={2}>
+        Canvas
+      </Heading>
+      <Divider orientation="vertical" />
       <ToolColorPicker />
       <ToolSettings />
-      <Spacer />
-      <Flex alignItems="center" h="full">
+      <Flex alignItems="center" h="full" flexGrow={1} justifyContent="flex-end">
         <CanvasToolbarScale />
         <CanvasToolbarResetViewButton />
         <CanvasToolbarFitBboxToLayersButton />
@@ -46,6 +49,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarNewSessionMenuButton />
         <CanvasSettingsPopover />
       </Flex>
+      <Divider orientation="vertical" />
     </Flex>
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx

@@ -1,7 +1,6 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useIsRegionFocused } from 'common/hooks/focus';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,49 +10,48 @@ export const CanvasToolbarResetViewButton = memo(() => {
   const { t } = useTranslation();
   const canvasManager = useCanvasManager();
   const isCanvasFocused = useIsRegionFocused('canvas');
-  const imageViewer = useImageViewer();
 
   useRegisteredHotkeys({
     id: 'fitLayersToCanvas',
     category: 'canvas',
     callback: canvasManager.stage.fitLayersToStage,
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
   useRegisteredHotkeys({
     id: 'fitBboxToCanvas',
     category: 'canvas',
     callback: canvasManager.stage.fitBboxToStage,
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
   useRegisteredHotkeys({
     id: 'setZoomTo100Percent',
     category: 'canvas',
     callback: () => canvasManager.stage.setScale(1),
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
   useRegisteredHotkeys({
     id: 'setZoomTo200Percent',
     category: 'canvas',
     callback: () => canvasManager.stage.setScale(2),
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
   useRegisteredHotkeys({
     id: 'setZoomTo400Percent',
     category: 'canvas',
     callback: () => canvasManager.stage.setScale(4),
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
   useRegisteredHotkeys({
     id: 'setZoomTo800Percent',
     category: 'canvas',
     callback: () => canvasManager.stage.setScale(8),
-    options: { enabled: isCanvasFocused && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [isCanvasFocused, imageViewer.isOpen],
+    options: { enabled: isCanvasFocused, preventDefault: true },
+    dependencies: [isCanvasFocused],
   });
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx

@@ -4,6 +4,7 @@ import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useEntityIsEnabled } from 'features/controlLayers/hooks/useEntityIsEnabled';
+import { selectMainModelConfig } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import {
@@ -18,7 +19,6 @@ import { upperFirst } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiWarningBold } from 'react-icons/pi';
-import { selectMainModelConfig } from 'services/api/endpoints/models';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 

invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts

@@ -15,7 +15,7 @@ import {
   rgNegativePromptChanged,
   rgPositivePromptChanged,
 } from 'features/controlLayers/store/canvasSlice';
-import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { selectBase, selectMainModelConfig } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
 import type {
   CanvasEntityIdentifier,
@@ -34,11 +34,7 @@ import {
 } from 'features/controlLayers/store/util';
 import { zModelIdentifierField } from 'features/nodes/types/common';
 import { useCallback } from 'react';
-import {
-  modelConfigsAdapterSelectors,
-  selectMainModelConfig,
-  selectModelConfigsQuery,
-} from 'services/api/endpoints/models';
+import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/api/endpoints/models';
 import type {
   ControlLoRAModelConfig,
   ControlNetModelConfig,

invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts

@@ -14,7 +14,12 @@ import {
   rgAdded,
   rgIPAdapterImageChanged,
 } from 'features/controlLayers/store/canvasSlice';
-import { selectNegativePrompt, selectPositivePrompt, selectSeed } from 'features/controlLayers/store/paramsSlice';
+import {
+  selectMainModelConfig,
+  selectNegativePrompt,
+  selectPositivePrompt,
+  selectSeed,
+} from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasMetadata } from 'features/controlLayers/store/selectors';
 import type {
   CanvasControlLayerState,
@@ -33,7 +38,6 @@ import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { serializeError } from 'serialize-error';
-import { selectMainModelConfig } from 'services/api/endpoints/models';
 import type { ImageDTO } from 'services/api/types';
 import type { JsonObject } from 'type-fest';
 

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts

@@ -3,7 +3,6 @@ import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { selectActiveTab, selectActiveTabCanvasRightPanel } from 'features/ui/store/uiSelectors';
 import { useCallback, useMemo } from 'react';
@@ -16,8 +15,6 @@ export function useCanvasDeleteLayerHotkey() {
   const canvasRightPanelTab = useAppSelector(selectActiveTabCanvasRightPanel);
   const appTab = useAppSelector(selectActiveTab);
 
-  const imageViewer = useImageViewer();
-
   const deleteSelectedLayer = useCallback(() => {
     if (selectedEntityIdentifier === null) {
       return;
@@ -34,7 +31,7 @@ export function useCanvasDeleteLayerHotkey() {
     id: 'deleteSelected',
     category: 'canvas',
     callback: deleteSelectedLayer,
-    options: { enabled: isDeleteEnabled && !imageViewer.isOpen },
-    dependencies: [isDeleteEnabled, deleteSelectedLayer, imageViewer.isOpen],
+    options: { enabled: isDeleteEnabled },
+    dependencies: [isDeleteEnabled, deleteSelectedLayer],
   });
 }

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey.ts

@@ -5,7 +5,6 @@ import {
   selectSelectedEntityIdentifier,
 } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -15,7 +14,6 @@ export const useCanvasEntityQuickSwitchHotkey = () => {
   const [current, setCurrent] = useState<CanvasEntityIdentifier | null>(null);
   const selected = useAppSelector(selectSelectedEntityIdentifier);
   const bookmarked = useAppSelector(selectBookmarkedEntityIdentifier);
-  const imageViewer = useImageViewer();
 
   // Update prev and current when selected entity changes
   useEffect(() => {
@@ -49,7 +47,6 @@ export const useCanvasEntityQuickSwitchHotkey = () => {
     id: 'quickSwitch',
     category: 'canvas',
     callback: onQuickSwitch,
-    options: { enabled: !imageViewer.isOpen },
-    dependencies: [onQuickSwitch, imageViewer.isOpen],
+    dependencies: [onQuickSwitch],
   });
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasResetLayerHotkey.ts

@@ -6,7 +6,6 @@ import { useEntityIsLocked } from 'features/controlLayers/hooks/useEntityIsLocke
 import { entityReset } from 'features/controlLayers/store/canvasSlice';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { isMaskEntityIdentifier } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useCallback, useMemo } from 'react';
 
@@ -17,7 +16,6 @@ export function useCanvasResetLayerHotkey() {
   const isBusy = useCanvasIsBusy();
   const adapter = useEntityAdapterSafe(entityIdentifier);
   const isLocked = useEntityIsLocked(entityIdentifier);
-  const imageViewer = useImageViewer();
 
   const resetSelectedLayer = useCallback(() => {
     if (entityIdentifier === null || adapter === null) {
@@ -36,7 +34,7 @@ export function useCanvasResetLayerHotkey() {
     id: 'resetSelected',
     category: 'canvas',
     callback: resetSelectedLayer,
-    options: { enabled: isResetAllowed && !isBusy && !isLocked && !imageViewer.isOpen },
-    dependencies: [isResetAllowed, isBusy, isLocked, resetSelectedLayer, imageViewer.isOpen],
+    options: { enabled: isResetAllowed && !isBusy && !isLocked },
+    dependencies: [isResetAllowed, isBusy, isLocked, resetSelectedLayer],
   });
 }

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasUndoRedoHotkeys.tsx

@@ -3,7 +3,6 @@ import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { canvasRedo, canvasUndo } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasMayRedo, selectCanvasMayUndo } from 'features/controlLayers/store/selectors';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
@@ -12,7 +11,6 @@ export const useCanvasUndoRedoHotkeys = () => {
   useAssertSingleton('useCanvasUndoRedo');
   const dispatch = useDispatch();
   const isBusy = useCanvasIsBusy();
-  const imageViewer = useImageViewer();
 
   const mayUndo = useAppSelector(selectCanvasMayUndo);
   const handleUndo = useCallback(() => {
@@ -22,8 +20,8 @@ export const useCanvasUndoRedoHotkeys = () => {
     id: 'undo',
     category: 'canvas',
     callback: handleUndo,
-    options: { enabled: mayUndo && !isBusy && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [mayUndo, isBusy, handleUndo, imageViewer.isOpen],
+    options: { enabled: mayUndo && !isBusy, preventDefault: true },
+    dependencies: [mayUndo, isBusy, handleUndo],
   });
 
   const mayRedo = useAppSelector(selectCanvasMayRedo);
@@ -34,7 +32,7 @@ export const useCanvasUndoRedoHotkeys = () => {
     id: 'redo',
     category: 'canvas',
     callback: handleRedo,
-    options: { enabled: mayRedo && !isBusy && !imageViewer.isOpen, preventDefault: true },
-    dependencies: [mayRedo, handleRedo, isBusy, imageViewer.isOpen],
+    options: { enabled: mayRedo && !isBusy, preventDefault: true },
+    dependencies: [mayRedo, handleRedo, isBusy],
   });
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage.ts

@@ -1,11 +1,11 @@
 import { useStore } from '@nanostores/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { $invocationProgressMessage } from 'services/events/stores';
+import { $lastProgressMessage } from 'services/events/stores';
 
 export const useDeferredModelLoadingInvocationProgressMessage = () => {
   const { t } = useTranslation();
-  const invocationProgressMessage = useStore($invocationProgressMessage);
+  const invocationProgressMessage = useStore($lastProgressMessage);
   const [delayedMessage, setDelayedMessage] = useState<string | null>(null);
 
   useEffect(() => {

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityFilter.ts

@@ -5,13 +5,11 @@ import { useEntityIsEmpty } from 'features/controlLayers/hooks/useEntityIsEmpty'
 import { useEntityIsLocked } from 'features/controlLayers/hooks/useEntityIsLocked';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCallback, useMemo } from 'react';
 
 export const useEntityFilter = (entityIdentifier: CanvasEntityIdentifier | null) => {
   const canvasManager = useCanvasManager();
   const adapter = useEntityAdapterSafe(entityIdentifier);
-  const imageViewer = useImageViewer();
   const isBusy = useCanvasIsBusy();
   const isLocked = useEntityIsLocked(entityIdentifier);
   const isEmpty = useEntityIsEmpty(entityIdentifier);
@@ -52,9 +50,8 @@ export const useEntityFilter = (entityIdentifier: CanvasEntityIdentifier | null)
     if (!adapter) {
       return;
     }
-    imageViewer.close();
     adapter.filterer.start();
-  }, [isDisabled, entityIdentifier, canvasManager, imageViewer]);
+  }, [isDisabled, entityIdentifier, canvasManager]);
 
   return { isDisabled, start } as const;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useEntitySegmentAnything.ts

@@ -5,13 +5,11 @@ import { useEntityIsEmpty } from 'features/controlLayers/hooks/useEntityIsEmpty'
 import { useEntityIsLocked } from 'features/controlLayers/hooks/useEntityIsLocked';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { isSegmentableEntityIdentifier } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCallback, useMemo } from 'react';
 
 export const useEntitySegmentAnything = (entityIdentifier: CanvasEntityIdentifier | null) => {
   const canvasManager = useCanvasManager();
   const adapter = useEntityAdapterSafe(entityIdentifier);
-  const imageViewer = useImageViewer();
   const isBusy = useCanvasIsBusy();
   const isLocked = useEntityIsLocked(entityIdentifier);
   const isEmpty = useEntityIsEmpty(entityIdentifier);
@@ -52,9 +50,8 @@ export const useEntitySegmentAnything = (entityIdentifier: CanvasEntityIdentifie
     if (!adapter) {
       return;
     }
-    imageViewer.close();
     adapter.segmentAnything.start();
-  }, [isDisabled, entityIdentifier, canvasManager, imageViewer]);
+  }, [isDisabled, entityIdentifier, canvasManager]);
 
   return { isDisabled, start } as const;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useEntityTransform.ts

@@ -5,13 +5,11 @@ import { useEntityIsEmpty } from 'features/controlLayers/hooks/useEntityIsEmpty'
 import { useEntityIsLocked } from 'features/controlLayers/hooks/useEntityIsLocked';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { isTransformableEntityIdentifier } from 'features/controlLayers/store/types';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCallback, useMemo } from 'react';
 
 export const useEntityTransform = (entityIdentifier: CanvasEntityIdentifier | null) => {
   const canvasManager = useCanvasManager();
   const adapter = useEntityAdapterSafe(entityIdentifier);
-  const imageViewer = useImageViewer();
   const isBusy = useCanvasIsBusy();
   const isLocked = useEntityIsLocked(entityIdentifier);
   const isEmpty = useEntityIsEmpty(entityIdentifier);
@@ -52,9 +50,8 @@ export const useEntityTransform = (entityIdentifier: CanvasEntityIdentifier | nu
     if (!adapter) {
       return;
     }
-    imageViewer.close();
     await adapter.transformer.startTransform();
-  }, [isDisabled, entityIdentifier, canvasManager, imageViewer]);
+  }, [isDisabled, entityIdentifier, canvasManager]);
 
   const fitToBbox = useCallback(async () => {
     if (isDisabled) {
@@ -70,11 +67,10 @@ export const useEntityTransform = (entityIdentifier: CanvasEntityIdentifier | nu
     if (!adapter) {
       return;
     }
-    imageViewer.close();
     await adapter.transformer.startTransform({ silent: true });
     adapter.transformer.fitToBboxContain();
     await adapter.transformer.applyTransform();
-  }, [canvasManager, entityIdentifier, imageViewer, isDisabled]);
+  }, [canvasManager, entityIdentifier, isDisabled]);
 
   return { isDisabled, start, fitToBbox } as const;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/useInvokeCanvas.ts

@@ -52,6 +52,11 @@ export const useInvokeCanvas = (): ((el: HTMLDivElement | null) => void) => {
 
     const manager = new CanvasManager(container, store, socket);
     manager.initialize();
+
+    return () => {
+      manager.destroy();
+      $canvasManager.set(null);
+    };
   }, [container, socket, store]);
 
   return containerRef;