feat(ui): revise generation mode logic

- Canvas generation mode is replace with a boolean `sendToCanvas` flag. When off, images generated on the canvas go to the gallery. When on, they get added to the staging area.
- When an image result is received, if its destination is the canvas, staging is automatically started.
- Updated queue list to show the destination column.
- Added `IconSwitch` component to represent binary choices, used for the new `sendToCanvas` flag and image viewer toggle.
- Remove the queue actions menu in `QueueControls`. Move the queue count badge to the cancel button.
- Redo layout of `QueueControls` to prevent duplicate queue count badges.
- Fix issue where gallery and options panels could show thru transparent regions of queue tab.
- Disable panel hotkeys when on mm/queue tabs.

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

@@ -164,10 +164,10 @@
         "alpha": "Alpha",
         "selected": "Selected",
         "tab": "Tab",
-        "viewing": "Viewing",
+        "view": "View",
-        "viewingDesc": "Review images in a large gallery view",
+        "viewDesc": "Review images in a large gallery view",
-        "editing": "Editing",
+        "edit": "Edit",
-        "editingDesc": "Edit on the Control Layers canvas",
+        "editDesc": "Edit on the Canvas",
         "comparing": "Comparing",
         "comparingDesc": "Comparing two images",
         "enabled": "Enabled",
@@ -328,9 +328,13 @@
         "completedIn": "Completed in",
         "batch": "Batch",
         "origin": "Origin",
-        "originCanvas": "Canvas",
+        "destination": "Destination",
-        "originWorkflows": "Workflows",
+        "upscaling": "Upscaling",
-        "originOther": "Other",
+        "canvas": "Canvas",
+        "generation": "Generation",
+        "workflows": "Workflows",
+        "other": "Other",
+        "gallery": "Gallery",
         "batchFieldValues": "Batch Field Values",
         "item": "Item",
         "session": "Session",
@@ -1695,6 +1699,10 @@
         "inpaintMask": "Inpaint Mask",
         "regionalGuidance": "Regional Guidance",
         "ipAdapter": "IP Adapter",
+        "sendToGallery": "Send To Gallery",
+        "sendToGalleryDesc": "Generations will be sent to the gallery.",
+        "sendToCanvas": "Send To Canvas",
+        "sendToCanvasDesc": "Generations will be staged onto the canvas.",
         "rasterLayer_withCount_one": "$t(controlLayers.rasterLayer)",
         "controlLayer_withCount_one": "$t(controlLayers.controlLayer)",
         "inpaintMask_withCount_one": "$t(controlLayers.inpaintMask)",

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

@@ -31,7 +31,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
       let didStartStaging = false;
 
-      if (!state.canvasSession.isStaging && state.canvasSession.mode === 'compose') {
+      if (!state.canvasSession.isStaging && state.canvasSession.sendToCanvas) {
         dispatch(sessionStartedStaging());
         didStartStaging = true;
       }
@@ -70,7 +70,11 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
       const { g, noise, posCond } = buildGraphResult.value;
 
-      const prepareBatchResult = withResult(() => prepareLinearUIBatch(state, g, prepend, noise, posCond));
+      const destination = state.canvasSession.sendToCanvas ? 'canvas' : 'gallery';
+
+      const prepareBatchResult = withResult(() =>
+        prepareLinearUIBatch(state, g, prepend, noise, posCond, 'generation', destination)
+      );
 
       if (isErr(prepareBatchResult)) {
         log.error({ error: serializeError(prepareBatchResult.error) }, 'Failed to prepare batch');

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

@@ -32,6 +32,7 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
           workflow: builtWorkflow,
           runs: state.params.iterations,
           origin: 'workflows',
+          destination: 'gallery',
         },
         prepend: action.payload.prepend,
       };

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

@@ -16,7 +16,7 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
 
       const { g, noise, posCond } = await buildMultidiffusionUpscaleGraph(state);
 
-      const batchConfig = prepareLinearUIBatch(state, g, prepend, noise, posCond);
+      const batchConfig = prepareLinearUIBatch(state, g, prepend, noise, posCond, 'upscaling', 'gallery');
 
       const req = dispatch(
         queueApi.endpoints.enqueueBatch.initiate(batchConfig, {

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

@@ -0,0 +1,104 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton, Tooltip, useToken } from '@invoke-ai/ui-library';
+import type { ReactElement, ReactNode } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+
+type IconSwitchProps = {
+  isChecked: boolean;
+  onChange: (checked: boolean) => void;
+  iconChecked: ReactElement;
+  tooltipChecked?: ReactNode;
+  iconUnchecked: ReactElement;
+  tooltipUnchecked?: ReactNode;
+  ariaLabel: string;
+};
+
+const getSx = (padding: string | number): SystemStyleObject => ({
+  transition: 'left 0.1s ease-in-out, transform 0.1s ease-in-out',
+  '&[data-checked="true"]': {
+    left: `calc(100% - ${padding})`,
+    transform: 'translateX(-100%)',
+  },
+  '&[data-checked="false"]': {
+    left: padding,
+    transform: 'translateX(0)',
+  },
+});
+
+export const IconSwitch = memo(
+  ({
+    isChecked,
+    onChange,
+    iconChecked,
+    tooltipChecked,
+    iconUnchecked,
+    tooltipUnchecked,
+    ariaLabel,
+  }: IconSwitchProps) => {
+    const onUncheck = useCallback(() => {
+      onChange(false);
+    }, [onChange]);
+    const onCheck = useCallback(() => {
+      onChange(true);
+    }, [onChange]);
+
+    const gap = useToken('space', 1.5);
+    const sx = useMemo(() => getSx(gap), [gap]);
+
+    return (
+      <Flex
+        position="relative"
+        bg='base.800'
+        borderRadius="base"
+        alignItems="center"
+        justifyContent="center"
+        h="full"
+        p={gap}
+        gap={gap}
+      >
+        <Box
+          position="absolute"
+          borderRadius="base"
+          bg="invokeBlue.400"
+          w={12}
+          top={gap}
+          bottom={gap}
+          data-checked={isChecked}
+          sx={sx}
+        />
+        <Tooltip hasArrow label={tooltipUnchecked}>
+          <IconButton
+            size="sm"
+            fontSize={16}
+            icon={iconUnchecked}
+            onClick={onUncheck}
+            variant={!isChecked ? 'solid' : 'ghost'}
+            colorScheme={!isChecked ? 'invokeBlue' : 'base'}
+            aria-label={ariaLabel}
+            data-checked={!isChecked}
+            w={12}
+            alignSelf="stretch"
+            h="auto"
+          />
+        </Tooltip>
+        <Tooltip hasArrow label={tooltipChecked}>
+          <IconButton
+            size="sm"
+            fontSize={16}
+            icon={iconChecked}
+            onClick={onCheck}
+            variant={isChecked ? 'solid' : 'ghost'}
+            colorScheme={isChecked ? 'invokeBlue' : 'base'}
+            aria-label={ariaLabel}
+            data-checked={isChecked}
+            w={12}
+            alignSelf="stretch"
+            h="auto"
+          />
+        </Tooltip>
+      </Flex>
+    );
+  }
+);
+
+IconSwitch.displayName = 'IconSwitch';

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

@@ -1,29 +0,0 @@
-import { Button, ButtonGroup } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectCanvasSessionSlice, sessionModeChanged } from 'features/controlLayers/store/canvasSessionSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const selectCanvasMode = createSelector(selectCanvasSessionSlice, (canvasSession) => canvasSession.mode);
-
-export const CanvasModeSwitcher = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const mode = useAppSelector(selectCanvasMode);
-  const onClickGenerate = useCallback(() => dispatch(sessionModeChanged({ mode: 'generate' })), [dispatch]);
-  const onClickCompose = useCallback(() => dispatch(sessionModeChanged({ mode: 'compose' })), [dispatch]);
-
-  return (
-    <ButtonGroup variant="outline">
-      <Button onClick={onClickGenerate} colorScheme={mode === 'generate' ? 'invokeBlue' : 'base'}>
-        {t('controlLayers.generateMode')}
-      </Button>
-      <Button onClick={onClickCompose} colorScheme={mode === 'compose' ? 'invokeBlue' : 'base'}>
-        {t('controlLayers.composeMode')}
-      </Button>
-    </ButtonGroup>
-  );
-});
-
-CanvasModeSwitcher.displayName = 'CanvasModeSwitcher';

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

@@ -0,0 +1,59 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { IconSwitch } from 'common/components/IconSwitch';
+import { selectIsComposing, sessionSendToCanvasChanged } from 'features/controlLayers/store/canvasSessionSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiImageBold, PiPaintBrushBold } from 'react-icons/pi';
+
+const TooltipSendToGallery = memo(() => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{t('controlLayers.sendToGallery')}</Text>
+      <Text fontWeight="normal">{t('controlLayers.sendToGalleryDesc')}</Text>
+    </Flex>
+  );
+});
+
+TooltipSendToGallery.displayName = 'TooltipSendToGallery';
+
+const TooltipSendToCanvas = memo(() => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{t('controlLayers.sendToCanvas')}</Text>
+      <Text fontWeight="normal">{t('controlLayers.sendToCanvasDesc')}</Text>
+    </Flex>
+  );
+});
+
+TooltipSendToCanvas.displayName = 'TooltipSendToCanvas';
+
+export const CanvasSendToToggle = memo(() => {
+  const dispatch = useAppDispatch();
+  const isComposing = useAppSelector(selectIsComposing);
+
+  const onChange = useCallback(
+    (isChecked: boolean) => {
+      dispatch(sessionSendToCanvasChanged(isChecked));
+    },
+    [dispatch]
+  );
+
+  return (
+    <IconSwitch
+      isChecked={isComposing}
+      onChange={onChange}
+      iconUnchecked={<PiImageBold />}
+      tooltipUnchecked={<TooltipSendToGallery />}
+      iconChecked={<PiPaintBrushBold />}
+      tooltipChecked={<TooltipSendToCanvas />}
+      ariaLabel="Toggle canvas mode"
+    />
+  );
+});
+
+CanvasSendToToggle.displayName = 'CanvasSendToToggle';

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

@@ -1,6 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex, Spacer } from '@invoke-ai/ui-library';
-import { CanvasModeSwitcher } from 'features/controlLayers/components/CanvasModeSwitcher';
 import { CanvasResetViewButton } from 'features/controlLayers/components/CanvasResetViewButton';
 import { CanvasScale } from 'features/controlLayers/components/CanvasScale';
 import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
@@ -28,7 +27,6 @@ export const ControlLayersToolbar = memo(() => {
         <CanvasResetViewButton />
         <Spacer />
         <ToolFillColorPicker />
-        <CanvasModeSwitcher />
         <CanvasSettingsPopover />
         <ViewerToggle />
       </Flex>

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

@@ -1,17 +1,17 @@
 import { createAction, createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { canvasSlice } from 'features/controlLayers/store/canvasSlice';
-import type { SessionMode, StagingAreaImage } from 'features/controlLayers/store/types';
+import type { StagingAreaImage } from 'features/controlLayers/store/types';
 
 export type CanvasSessionState = {
-  mode: SessionMode;
+  sendToCanvas: boolean;
   isStaging: boolean;
   stagedImages: StagingAreaImage[];
   selectedStagedImageIndex: number;
 };
 
 const initialState: CanvasSessionState = {
-  mode: 'generate',
+  sendToCanvas: false,
   isStaging: false,
   stagedImages: [],
   selectedStagedImageIndex: 0,
@@ -27,6 +27,7 @@ export const canvasSessionSlice = createSlice({
     },
     sessionImageStaged: (state, action: PayloadAction<{ stagingAreaImage: StagingAreaImage }>) => {
       const { stagingAreaImage } = action.payload;
+      state.isStaging = true;
       state.stagedImages.push(stagingAreaImage);
       state.selectedStagedImageIndex = state.stagedImages.length - 1;
     },
@@ -50,9 +51,8 @@ export const canvasSessionSlice = createSlice({
       state.stagedImages = [];
       state.selectedStagedImageIndex = 0;
     },
-    sessionModeChanged: (state, action: PayloadAction<{ mode: SessionMode }>) => {
+    sessionSendToCanvasChanged: (state, action: PayloadAction<boolean>) => {
-      const { mode } = action.payload;
+      state.sendToCanvas = action.payload;
-      state.mode = mode;
     },
   },
 });
@@ -64,7 +64,7 @@ export const {
   sessionStagingAreaReset,
   sessionNextStagedImageSelected,
   sessionPrevStagedImageSelected,
-  sessionModeChanged,
+  sessionSendToCanvasChanged,
 } = canvasSessionSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -85,3 +85,7 @@ export const sessionStagingAreaImageAccepted = createAction<{ index: number }>(
 export const selectCanvasSessionSlice = (s: RootState) => s.canvasSession;
 
 export const selectIsStaging = createSelector(selectCanvasSessionSlice, (canvasSession) => canvasSession.isStaging);
+export const selectIsComposing = createSelector(
+  selectCanvasSessionSlice,
+  (canvasSession) => canvasSession.sendToCanvas
+);

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

@@ -1,57 +1,60 @@
-import { ButtonGroup, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { IconSwitch } from 'common/components/IconSwitch';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold, PiPencilBold } from 'react-icons/pi';
 
-export const ViewerToggle = memo(() => {
+const TooltipEdit = memo(() => {
   const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{t('common.edit')}</Text>
+      <Text fontWeight="normal">{t('common.editDesc')}</Text>
+    </Flex>
+  );
+});
+TooltipEdit.displayName = 'TooltipEdit';
+
+const TooltipView = memo(() => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight="semibold">{t('common.view')}</Text>
+      <Text fontWeight="normal">{t('common.viewDesc')}</Text>
+    </Flex>
+  );
+});
+TooltipView.displayName = 'TooltipView';
+
+export const ViewerToggle = memo(() => {
   const imageViewer = useImageViewer();
   useHotkeys('z', imageViewer.onToggle, [imageViewer]);
   useHotkeys('esc', imageViewer.onClose, [imageViewer]);
+  const onChange = useCallback(
+    (isChecked: boolean) => {
+      if (isChecked) {
+        imageViewer.onClose();
+      } else {
+        imageViewer.onOpen();
+      }
+    },
+    [imageViewer]
+  );
 
   return (
-    <Flex gap={4} alignItems="center" justifyContent="center">
+    <IconSwitch
-      <ButtonGroup size="md">
+      isChecked={!imageViewer.isOpen}
-        <Tooltip
+      onChange={onChange}
-          hasArrow
+      iconUnchecked={<PiEyeBold />}
-          label={
+      tooltipUnchecked={<TooltipView />}
-            <Flex flexDir="column">
+      iconChecked={<PiPencilBold />}
-              <Text fontWeight="semibold">{t('common.viewing')}</Text>
+      tooltipChecked={<TooltipEdit />}
-              <Text fontWeight="normal">{t('common.viewingDesc')}</Text>
+      ariaLabel="Toggle viewer"
-            </Flex>
+    />
-          }
-        >
-          <IconButton
-            icon={<PiEyeBold />}
-            onClick={imageViewer.onOpen}
-            variant={imageViewer.isOpen ? 'solid' : 'outline'}
-            colorScheme={imageViewer.isOpen ? 'invokeBlue' : 'base'}
-            aria-label={t('common.viewing')}
-            w={12}
-          />
-        </Tooltip>
-        <Tooltip
-          hasArrow
-          label={
-            <Flex flexDir="column">
-              <Text fontWeight="semibold">{t('common.editing')}</Text>
-              <Text fontWeight="normal">{t('common.editingDesc')}</Text>
-            </Flex>
-          }
-        >
-          <IconButton
-            icon={<PiPencilBold />}
-            onClick={imageViewer.onClose}
-            variant={!imageViewer.isOpen ? 'solid' : 'outline'}
-            colorScheme={!imageViewer.isOpen ? 'invokeBlue' : 'base'}
-            aria-label={t('common.editing')}
-            w={12}
-          />
-        </Tooltip>
-      </ButtonGroup>
-    </Flex>
   );
 });
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx

@@ -3,7 +3,6 @@ import 'reactflow/dist/style.css';
 import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
-import QueueControls from 'features/queue/components/QueueControls';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
@@ -34,7 +33,6 @@ const NodeEditorPanelGroup = () => {
 
   return (
     <Flex w="full" h="full" gap={2} flexDir="column">
-      <QueueControls />
       <Flex w="full" justifyContent="space-between" alignItems="center" gap="4" padding={1}>
         <Flex justifyContent="space-between" alignItems="center" gap="4">
           <WorkflowLibraryButton />

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

@@ -10,7 +10,9 @@ export const prepareLinearUIBatch = (
   g: Graph,
   prepend: boolean,
   noise: Invocation<'noise'>,
-  posCond: Invocation<'compel' | 'sdxl_compel_prompt'>
+  posCond: Invocation<'compel' | 'sdxl_compel_prompt'>,
+  origin: 'generation' | 'workflows' | 'upscaling',
+  destination: 'canvas' | 'gallery'
 ): BatchConfig => {
   const { iterations, model, shouldRandomizeSeed, seed, shouldConcatPrompts } = state.params;
   const { prompts, seedBehaviour } = state.dynamicPrompts;
@@ -103,7 +105,8 @@ export const prepareLinearUIBatch = (
       graph: g.getGraph(),
       runs: 1,
       data,
-      origin: 'canvas',
+      origin,
+      destination,
     },
   };
 

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

@@ -29,7 +29,7 @@ export const addInpaint = async (
   const canvas = selectCanvasSlice(state);
 
   const { bbox } = canvas;
-  const { mode } = canvasSession;
+  const { sendToCanvas: isComposing } = canvasSession;
 
   const initialImage = await manager.compositor.getCompositeRasterLayerImageDTO(bbox.rect);
   const maskImage = await manager.compositor.getCompositeInpaintMaskImageDTO(bbox.rect);
@@ -99,7 +99,7 @@ export const addInpaint = async (
     g.addEdge(resizeImageToOriginalSize, 'image', canvasPasteBack, 'generated_image');
     g.addEdge(resizeMaskToOriginalSize, 'image', canvasPasteBack, 'mask');
 
-    if (mode === 'generate') {
+    if (!isComposing) {
       canvasPasteBack.source_image = { image_name: initialImage.image_name };
     }
 
@@ -143,7 +143,7 @@ export const addInpaint = async (
 
     g.addEdge(l2i, 'image', canvasPasteBack, 'generated_image');
 
-    if (mode === 'generate') {
+    if (!isComposing) {
       canvasPasteBack.source_image = { image_name: initialImage.image_name };
     }
 

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

@@ -30,7 +30,7 @@ export const addOutpaint = async (
   const canvas = selectCanvasSlice(state);
 
   const { bbox } = canvas;
-  const { mode } = canvasSession;
+  const { sendToCanvas: isComposing } = canvasSession;
 
   const initialImage = await manager.compositor.getCompositeRasterLayerImageDTO(bbox.rect);
   const maskImage = await manager.compositor.getCompositeInpaintMaskImageDTO(bbox.rect);
@@ -123,7 +123,7 @@ export const addOutpaint = async (
     g.addEdge(resizeOutputImageToOriginalSize, 'image', canvasPasteBack, 'generated_image');
     g.addEdge(resizeOutputMaskToOriginalSize, 'image', canvasPasteBack, 'mask');
 
-    if (mode === 'generate') {
+    if (!isComposing) {
       canvasPasteBack.source_image = { image_name: initialImage.image_name };
     }
 
@@ -173,7 +173,7 @@ export const addOutpaint = async (
     g.addEdge(createGradientMask, 'expanded_mask_area', canvasPasteBack, 'mask');
     g.addEdge(l2i, 'image', canvasPasteBack, 'generated_image');
 
-    if (mode === 'generate') {
+    if (!isComposing) {
       canvasPasteBack.source_image = { image_name: initialImage.image_name };
     }
 

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

@@ -282,7 +282,7 @@ export const buildSD1Graph = async (
     canvasOutput = addWatermarker(g, canvasOutput);
   }
 
-  const shouldSaveToGallery = canvasSession.mode === 'generate' || canvasSettings.autoSave;
+  const shouldSaveToGallery = !canvasSession.sendToCanvas || canvasSettings.autoSave;
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId('canvas_output'),

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

@@ -285,7 +285,7 @@ export const buildSDXLGraph = async (
     canvasOutput = addWatermarker(g, canvasOutput);
   }
 
-  const shouldSaveToGallery = canvasSession.mode === 'generate' || canvasSettings.autoSave;
+  const shouldSaveToGallery = !canvasSession.sendToCanvas || canvasSettings.autoSave;
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId('canvas_output'),

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

@@ -1,67 +1,39 @@
-import type { IconButtonProps } from '@invoke-ai/ui-library';
 import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
-import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
+import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
-type ClearQueueButtonProps = Omit<IconButtonProps, 'aria-label'>;
+export const ClearQueueIconButton = memo((_) => {
-
+  const ref = useRef<HTMLDivElement>(null);
-export const ClearAllQueueIconButton = memo((props: ClearQueueButtonProps) => {
   const { t } = useTranslation();
-  const dialogState = useClearQueueConfirmationAlertDialog();
+  const clearQueue = useClearQueue();
-  const { isLoading, isDisabled } = useClearQueue();
+  const cancelCurrentQueueItem = useCancelCurrentQueueItem();
 
-  return (
-    <IconButton
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      aria-label={t('queue.clear')}
-      tooltip={t('queue.clearTooltip')}
-      icon={<PiTrashSimpleBold size="16px" />}
-      colorScheme="error"
-      onClick={dialogState.setTrue}
-      data-testid={t('queue.clear')}
-      {...props}
-    />
-  );
-});
-
-ClearAllQueueIconButton.displayName = 'ClearAllQueueIconButton';
-
-const ClearSingleQueueItemIconButton = memo((props: ClearQueueButtonProps) => {
-  const { t } = useTranslation();
-  const { cancelQueueItem, isLoading, isDisabled } = useCancelCurrentQueueItem();
-
-  return (
-    <IconButton
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      aria-label={t('queue.cancel')}
-      tooltip={t('queue.cancelTooltip')}
-      icon={<PiXBold size="16px" />}
-      colorScheme="error"
-      onClick={cancelQueueItem}
-      data-testid={t('queue.cancel')}
-      {...props}
-    />
-  );
-});
-
-ClearSingleQueueItemIconButton.displayName = 'ClearSingleQueueItemIconButton';
-
-export const ClearQueueIconButton = memo((props: ClearQueueButtonProps) => {
   // Show the single item clear button when shift is pressed
   // Otherwise show the clear queue button
   const shift = useShiftModifier();
 
-  if (shift) {
+  return (
-    return <ClearAllQueueIconButton {...props} />;
+    <>
-  }
+      <IconButton
-
+        ref={ref}
-  return <ClearSingleQueueItemIconButton {...props} />;
+        size="lg"
+        isDisabled={shift ? clearQueue.isDisabled : cancelCurrentQueueItem.isDisabled}
+        isLoading={shift ? clearQueue.isLoading : cancelCurrentQueueItem.isLoading}
+        aria-label={shift ? t('queue.clear') : t('queue.cancel')}
+        tooltip={shift ? t('queue.clearTooltip') : t('queue.cancelTooltip')}
+        icon={shift ? <PiTrashSimpleBold /> : <PiXBold />}
+        colorScheme="error"
+        onClick={shift ? clearQueue.openDialog : cancelCurrentQueueItem.cancelQueueItem}
+        data-testid={shift ? t('queue.clear') : t('queue.cancel')}
+      />
+      {/* The badge is dynamically positioned, needs a ref to the target element */}
+      <QueueCountBadge targetRef={ref} />
+    </>
+  );
 });
 
 ClearQueueIconButton.displayName = 'ClearQueueIconButton';

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

@@ -15,7 +15,7 @@ export const InvokeQueueBackButton = memo(() => {
   const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
 
   return (
-    <Flex pos="relative" flexGrow={1} minW="240px">
+    <Flex pos="relative" w="192px">
       <QueueIterationsNumberInput />
       <QueueButtonTooltip>
         <Button

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

@@ -1,25 +1,27 @@
-import { ButtonGroup, Flex, Spacer } from '@invoke-ai/ui-library';
+import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
 import { ClearQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
 import QueueFrontButton from 'features/queue/components/QueueFrontButton';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { memo, useRef } from 'react';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { memo } from 'react';
 
 import { InvokeQueueBackButton } from './InvokeQueueBackButton';
-import { QueueActionsMenuButton } from './QueueActionsMenuButton';
 
 const QueueControls = () => {
   const isPrependEnabled = useFeatureStatus('prependQueue');
-  const containerRef = useRef<HTMLDivElement>(null);
+  const tab = useAppSelector(selectActiveTab);
   return (
-    <Flex ref={containerRef} w="full" position="relative" borderRadius="base" gap={2} flexDir="column">
+    <Flex w="full" position="relative" borderRadius="base" gap={2} flexDir="column">
-      <ButtonGroup size="lg" isAttached={false}>
+      <Flex gap={2}>
         {isPrependEnabled && <QueueFrontButton />}
         <InvokeQueueBackButton />
         <Spacer />
-        <QueueActionsMenuButton containerRef={containerRef} />
+        {tab === 'generation' && <CanvasSendToToggle />}
         <ClearQueueIconButton />
-      </ButtonGroup>
+      </Flex>
       <ProgressBar />
     </Flex>
   );

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

@@ -0,0 +1,77 @@
+import { Badge, Portal } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { $isParametersPanelOpen } from 'features/ui/store/uiSlice';
+import type { RefObject } from 'react';
+import { memo, useEffect, useState } from 'react';
+import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+
+type Props = {
+  targetRef: RefObject<HTMLDivElement>;
+};
+
+export const QueueCountBadge = memo(({ targetRef }: Props) => {
+  const [badgePos, setBadgePos] = useState<{ x: string; y: string } | null>(null);
+  const isParametersPanelOpen = useStore($isParametersPanelOpen);
+  const { queueSize } = useGetQueueStatusQuery(undefined, {
+    selectFromResult: (res) => ({
+      queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
+    }),
+  });
+
+  useEffect(() => {
+    if (!targetRef.current) {
+      return;
+    }
+
+    const target = targetRef.current;
+    const parent = target.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    const cb = () => {
+      if (!$isParametersPanelOpen.get()) {
+        return;
+      }
+      const { x, y } = target.getBoundingClientRect();
+      setBadgePos({ x: `${x - 7}px`, y: `${y - 5}px` });
+    };
+
+    const resizeObserver = new ResizeObserver(cb);
+    resizeObserver.observe(parent);
+    cb();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [targetRef]);
+
+  if (queueSize === 0) {
+    return null;
+  }
+  if (!badgePos) {
+    return null;
+  }
+  if (!isParametersPanelOpen) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <Badge
+        pos="absolute"
+        insetInlineStart={badgePos.x}
+        insetBlockStart={badgePos.y}
+        colorScheme="invokeYellow"
+        zIndex="docked"
+        shadow="dark-lg"
+        userSelect="none"
+      >
+        {queueSize}
+      </Badge>
+    </Portal>
+  );
+});
+
+QueueCountBadge.displayName = 'QueueCountBadge';

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

@@ -1,6 +1,7 @@
 import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library';
 import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge';
+import { useDestinationText } from 'features/queue/components/QueueList/useDestinationText';
 import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
@@ -52,6 +53,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
 
   const isCanceled = useMemo(() => ['canceled', 'completed', 'failed'].includes(item.status), [item.status]);
   const originText = useOriginText(item.origin);
+  const destinationText = useDestinationText(item.destination);
 
   const icon = useMemo(() => <PiXBold />, []);
   return (
@@ -76,6 +78,11 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
             {originText}
           </Text>
         </Flex>
+        <Flex w={COLUMN_WIDTHS.destination} flexShrink={0}>
+          <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" alignItems="center">
+            {destinationText}
+          </Text>
+        </Flex>
         <Flex w={COLUMN_WIDTHS.time} alignItems="center" flexShrink={0}>
           {executionTime || '-'}
         </Flex>

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

@@ -1,5 +1,6 @@
 import { Button, ButtonGroup, Flex, Heading, Spinner, Text } from '@invoke-ai/ui-library';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
+import { useDestinationText } from 'features/queue/components/QueueList/useDestinationText';
 import { useOriginText } from 'features/queue/components/QueueList/useOriginText';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
@@ -17,7 +18,7 @@ type Props = {
 };
 
 const QueueItemComponent = ({ queueItemDTO }: Props) => {
-  const { session_id, batch_id, item_id, origin } = queueItemDTO;
+  const { session_id, batch_id, item_id, origin, destination } = queueItemDTO;
   const { t } = useTranslation();
   const { cancelBatch, isLoading: isLoadingCancelBatch, isCanceled } = useCancelBatch(batch_id);
 
@@ -26,6 +27,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
   const { data: queueItem } = useGetQueueItemQuery(item_id);
 
   const originText = useOriginText(origin);
+  const destinationText = useDestinationText(destination);
 
   const statusAndTiming = useMemo(() => {
     if (!queueItem) {
@@ -54,6 +56,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
       >
         <QueueItemData label={t('queue.status')} data={statusAndTiming} />
         <QueueItemData label={t('queue.origin')} data={originText} />
+        <QueueItemData label={t('queue.destination')} data={destinationText} />
         <QueueItemData label={t('queue.item')} data={item_id} />
         <QueueItemData label={t('queue.batch')} data={batch_id} />
         <QueueItemData label={t('queue.session')} data={session_id} />

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

@@ -25,6 +25,9 @@ const QueueListHeader = () => {
       <Flex ps={0.5} w={COLUMN_WIDTHS.origin} alignItems="center">
         <Text variant="subtext">{t('queue.origin')}</Text>
       </Flex>
+      <Flex ps={0.5} w={COLUMN_WIDTHS.destination} alignItems="center">
+        <Text variant="subtext">{t('queue.destination')}</Text>
+      </Flex>
       <Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
         <Text variant="subtext">{t('queue.time')}</Text>
       </Flex>

invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts

@@ -4,7 +4,8 @@ export const COLUMN_WIDTHS = {
   statusDot: 2,
   time: '4rem',
   origin: '5rem',
+  destination: '6rem',
   batchId: '5rem',
   fieldValues: 'auto',
   actions: 'auto',
-};
+} as const;

invokeai/frontend/web/src/features/queue/components/QueueList/useDestinationText.ts

@@ -0,0 +1,16 @@
+import { useTranslation } from 'react-i18next';
+import type { SessionQueueItemDTO } from 'services/api/types';
+
+export const useDestinationText = (destination: SessionQueueItemDTO['destination']) => {
+  const { t } = useTranslation();
+
+  if (destination === 'canvas') {
+    return t('queue.canvas');
+  }
+
+  if (destination === 'gallery') {
+    return t('queue.gallery');
+  }
+
+  return t('queue.other');
+};

invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts

@@ -4,13 +4,13 @@ import type { SessionQueueItemDTO } from 'services/api/types';
 export const useOriginText = (origin: SessionQueueItemDTO['origin']) => {
   const { t } = useTranslation();
 
-  if (origin === 'canvas') {
+  if (origin === 'generation') {
-    return t('queue.originCanvas');
+    return t('queue.generation');
   }
 
   if (origin === 'workflows') {
-    return t('queue.originWorkflows');
+    return t('queue.workflows');
   }
 
-  return t('queue.originOther');
+  return t('queue.other');
 };

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

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { $isConnected } from 'app/hooks/useSocketIO';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice';
 import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
@@ -10,6 +11,7 @@ import { useClearQueueMutation, useGetQueueStatusQuery } from 'services/api/endp
 export const useClearQueue = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const dialog = useClearQueueConfirmationAlertDialog();
   const { data: queueStatus } = useGetQueueStatusQuery();
   const isConnected = useStore($isConnected);
   const [trigger, { isLoading }] = useClearQueueMutation({
@@ -41,5 +43,5 @@ export const useClearQueue = () => {
 
   const isDisabled = useMemo(() => !isConnected || !queueStatus?.queue.total, [isConnected, queueStatus?.queue.total]);
 
-  return { clearQueue, isLoading, queueStatus, isDisabled };
+  return { clearQueue, openDialog: dialog.setTrue, isLoading, queueStatus, isDisabled };
 };

invokeai/frontend/web/src/features/ui/components/AppContent.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
@@ -7,6 +7,7 @@ import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { useIsImageViewerOpen } from 'features/gallery/components/ImageViewer/useImageViewer';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
+import QueueControls from 'features/queue/components/QueueControls';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
 import ParametersPanelTextToImage from 'features/ui/components/ParametersPanels/ParametersPanelTextToImage';
@@ -89,8 +90,14 @@ export const AppContent = memo(() => {
 
   const galleryPanel = usePanel(galleryPanelUsePanelOptions);
 
-  useHotkeys('g', galleryPanel.toggle, [galleryPanel.toggle]);
+  useHotkeys('g', galleryPanel.toggle, { enabled: shouldShowGalleryPanel }, [
-  useHotkeys(['t', 'o'], optionsPanel.toggle, [optionsPanel.toggle]);
+    galleryPanel.toggle,
+    shouldShowGalleryPanel,
+  ]);
+  useHotkeys(['t', 'o'], optionsPanel.toggle, { enabled: shouldShowOptionsPanel }, [
+    optionsPanel.toggle,
+    shouldShowOptionsPanel,
+  ]);
   useHotkeys(
     'shift+r',
     () => {
@@ -133,21 +140,26 @@ export const AppContent = memo(() => {
           storage={panelStorage}
         >
           <Panel order={0} collapsible style={panelStyles} {...optionsPanel.panelProps}>
-            <TabMountGate tab="generation">
+            <Flex flexDir="column" w="full" h="full" gap={2}>
-              <TabVisibilityGate tab="generation">
+              <QueueControls />
-                <ParametersPanelTextToImage />
+              <Box position="relative" w="full" h="full">
-              </TabVisibilityGate>
+                <TabMountGate tab="generation">
-            </TabMountGate>
+                  <TabVisibilityGate tab="generation">
-            <TabMountGate tab="upscaling">
+                    <ParametersPanelTextToImage />
-              <TabVisibilityGate tab="upscaling">
+                  </TabVisibilityGate>
-                <ParametersPanelUpscale />
+                </TabMountGate>
-              </TabVisibilityGate>
+                <TabMountGate tab="upscaling">
-            </TabMountGate>
+                  <TabVisibilityGate tab="upscaling">
-            <TabMountGate tab="workflows">
+                    <ParametersPanelUpscale />
-              <TabVisibilityGate tab="workflows">
+                  </TabVisibilityGate>
-                <NodeEditorPanelGroup />
+                </TabMountGate>
-              </TabVisibilityGate>
+                <TabMountGate tab="workflows">
-            </TabMountGate>
+                  <TabVisibilityGate tab="workflows">
+                    <NodeEditorPanelGroup />
+                  </TabVisibilityGate>
+                </TabMountGate>
+              </Box>
+            </Flex>
           </Panel>
           <ResizeHandle id="options-main-handle" orientation="vertical" {...optionsPanel.resizeHandleProps} />
           <Panel id="main-panel" order={1} minSize={20} style={panelStyles}>

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -1,13 +1,13 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { ButtonGroup, Flex, Icon, IconButton, Portal, spinAnimation } from '@invoke-ai/ui-library';
 import CancelCurrentQueueItemIconButton from 'features/queue/components/CancelCurrentQueueItemIconButton';
-import { ClearAllQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
 import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
+import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCircleNotchBold, PiSlidersHorizontalBold } from 'react-icons/pi';
+import { PiCircleNotchBold, PiSlidersHorizontalBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { RiSparklingFill } from 'react-icons/ri';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
@@ -23,6 +23,7 @@ type Props = {
 const FloatingSidePanelButtons = (props: Props) => {
   const { t } = useTranslation();
   const { queueBack, isLoading, isDisabled } = useQueueBack();
+  const clearQueue = useClearQueue();
   const { data: queueStatus } = useGetQueueStatusQuery();
 
   const queueButtonIcon = useMemo(() => {
@@ -71,7 +72,17 @@ const FloatingSidePanelButtons = (props: Props) => {
           </QueueButtonTooltip>
           <CancelCurrentQueueItemIconButton sx={floatingButtonStyles} />
         </ButtonGroup>
-        <ClearAllQueueIconButton sx={floatingButtonStyles} />
+        <IconButton
+          isDisabled={clearQueue.isDisabled}
+          isLoading={clearQueue.isLoading}
+          aria-label={t('queue.clear')}
+          tooltip={t('queue.clearTooltip')}
+          icon={<PiTrashSimpleBold />}
+          colorScheme="error"
+          onClick={clearQueue.openDialog}
+          data-testid={t('queue.clear')}
+          sx={floatingButtonStyles}
+        />
       </Flex>
     </Portal>
   );

invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx

@@ -8,7 +8,6 @@ import { selectIsSDXL } from 'features/controlLayers/store/paramsSlice';
 import { selectEntityCount } from 'features/controlLayers/store/selectors';
 import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
-import QueueControls from 'features/queue/components/QueueControls';
 import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
 import { CompositingSettingsAccordion } from 'features/settingsAccordions/components/CompositingSettingsAccordion/CompositingSettingsAccordion';
 import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion';
@@ -64,7 +63,6 @@ const ParametersPanelTextToImage = () => {
 
   return (
     <Flex w="full" h="full" flexDir="column" gap={2}>
-      <QueueControls />
       <StylePresetMenuTrigger />
       <Flex w="full" h="full" position="relative">
         <Box position="absolute" top={0} left={0} right={0} bottom={0} ref={ref}>

invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelUpscale.tsx

@@ -2,7 +2,6 @@ import { Box, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
-import QueueControls from 'features/queue/components/QueueControls';
 import { AdvancedSettingsAccordion } from 'features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion';
 import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion';
 import { UpscaleSettingsAccordion } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleSettingsAccordion';
@@ -23,7 +22,6 @@ const ParametersPanelUpscale = () => {
 
   return (
     <Flex w="full" h="full" flexDir="column" gap={2}>
-      <QueueControls />
       <StylePresetMenuTrigger />
       <Flex w="full" h="full" position="relative">
         <Box position="absolute" top={0} left={0} right={0} bottom={0}>

invokeai/frontend/web/src/features/ui/components/TabButton.tsx

@@ -3,30 +3,33 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { TabName } from 'features/ui/store/uiTypes';
-import { memo, type ReactElement, useCallback } from 'react';
+import { forwardRef, memo, type ReactElement, useCallback } from 'react';
 
-export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }) => {
+export const TabButton = memo(
-  const dispatch = useAppDispatch();
+  forwardRef(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }, ref) => {
-  const activeTabName = useAppSelector(selectActiveTab);
+    const dispatch = useAppDispatch();
-  const onClick = useCallback(() => {
+    const activeTabName = useAppSelector(selectActiveTab);
-    dispatch(setActiveTab(tab));
+    const onClick = useCallback(() => {
-  }, [dispatch, tab]);
+      dispatch(setActiveTab(tab));
+    }, [dispatch, tab]);
 
-  return (
+    return (
-    <Tooltip label={label} placement="end">
+      <Tooltip label={label} placement="end">
-      <IconButton
+        <IconButton
-        p={0}
+          ref={ref}
-        onClick={onClick}
+          p={0}
-        icon={icon}
+          onClick={onClick}
-        size="md"
+          icon={icon}
-        fontSize="24px"
+          size="md"
-        variant="appTab"
+          fontSize="24px"
-        data-selected={activeTabName === tab}
+          variant="appTab"
-        aria-label={label}
+          data-selected={activeTabName === tab}
-        data-testid={label}
+          aria-label={label}
-      />
+          data-testid={label}
-    </Tooltip>
+        />
-  );
+      </Tooltip>
-});
+    );
+  })
+);
 
 TabButton.displayName = 'TabButton';

invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx

@@ -5,7 +5,7 @@ import { memo } from 'react';
 
 const ModelManagerTab = () => {
   return (
-    <Flex w="full" h="full" gap="2">
+    <Flex layerStyle="body" w="full" h="full" gap="2">
       <ModelManager />
       <ModelPane />
     </Flex>

invokeai/frontend/web/src/features/ui/components/tabs/QueueTab.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 const QueueTab = () => {
   return (
-    <Flex w="full" h="full">
+    <Flex layerStyle="body" w="full" h="full">
       <QueueTabContent />
     </Flex>
   );

invokeai/frontend/web/src/services/events/onInvocationComplete.ts

@@ -13,7 +13,7 @@ import { getCategories, getListImagesUrl } from 'services/api/util';
 
 const log = logger('events');
 
-const isCanvasOutput = (data: S['InvocationCompleteEvent']) => {
+const isCanvasOutputNode = (data: S['InvocationCompleteEvent']) => {
   return data.invocation_source_id.split(':')[0] === 'canvas_output';
 };
 
@@ -114,25 +114,19 @@ export const buildOnInvocationComplete = (
   };
 
   const handleOriginCanvas = async (data: S['InvocationCompleteEvent']) => {
-    const session = getState().canvasSession;
-
     const imageDTO = await getResultImageDTO(data);
 
     if (!imageDTO) {
       return;
     }
 
-    if (session.mode === 'compose') {
+    if (data.destination === 'canvas') {
-      if (session.isStaging && isCanvasOutput(data)) {
+      if (isCanvasOutputNode(data)) {
         if (data.result.type === 'canvas_v2_mask_and_crop_output') {
           const { offset_x, offset_y } = data.result;
-          if (session.isStaging) {
+          dispatch(sessionImageStaged({ stagingAreaImage: { imageDTO, offsetX: offset_x, offsetY: offset_y } }));
-            dispatch(sessionImageStaged({ stagingAreaImage: { imageDTO, offsetX: offset_x, offsetY: offset_y } }));
-          }
         } else if (data.result.type === 'image_output') {
-          if (session.isStaging) {
+          dispatch(sessionImageStaged({ stagingAreaImage: { imageDTO, offsetX: 0, offsetY: 0 } }));
-            dispatch(sessionImageStaged({ stagingAreaImage: { imageDTO, offsetX: 0, offsetY: 0 } }));
-          }
         }
       }
     } else {

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

@@ -96,7 +96,7 @@ export const setEventListeners = ({ socket, dispatch, getState, setIsConnected }
   });
 
   socket.on('invocation_denoise_progress', (data) => {
-    const { invocation_source_id, invocation, step, total_steps, progress_image, origin, percentage, session_id } =
+    const { invocation_source_id, invocation, step, total_steps, progress_image, origin, destination, percentage, session_id } =
       data;
 
     if (cancellations.has(session_id)) {
@@ -122,7 +122,7 @@ export const setEventListeners = ({ socket, dispatch, getState, setIsConnected }
       }
     }
 
-    if (origin === 'canvas') {
+    if (origin === 'canvas' && destination === 'canvas') {
       $lastCanvasProgressEvent.set(data);
     }
   });