diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index c04a8184d7..69b2756f96 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -15,6 +15,7 @@ import { PartialAppConfig } from 'app/types/invokeai';
 
 import '../../i18n';
 import { socketMiddleware } from 'services/events/middleware';
+import { Middleware } from '@reduxjs/toolkit';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -25,6 +26,7 @@ interface Props extends PropsWithChildren {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
   setIsReady?: (isReady: boolean) => void;
+  middleware?: Middleware[];
 }
 
 const InvokeAIUI = ({
@@ -33,6 +35,7 @@ const InvokeAIUI = ({
   config,
   headerComponent,
   setIsReady,
+  middleware,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -54,8 +57,12 @@ const InvokeAIUI = ({
     // the `apiUrl`/`token` dynamically.
 
     // rebuild socket middleware with token and apiUrl
-    addMiddleware(socketMiddleware());
-  }, [apiUrl, token]);
+    if (middleware && middleware.length > 0) {
+      addMiddleware(socketMiddleware(), ...middleware);
+    } else {
+      addMiddleware(socketMiddleware());
+    }
+  }, [apiUrl, token, middleware]);
 
   return (
     <React.StrictMode>
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
index b0f1401c35..8193dbe1ce 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
@@ -55,7 +55,11 @@ import { useGetUrl } from 'common/util/getUrl';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useParameters } from 'features/parameters/hooks/useParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
-import { requestedImageDeletion } from '../store/actions';
+import {
+  requestedImageDeletion,
+  sentImageToCanvas,
+  sentImageToImg2Img,
+} from '../store/actions';
 import FaceRestoreSettings from 'features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings';
 import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/UpscaleSettings';
 import { allParametersSet } from 'features/parameters/store/generationSlice';
@@ -252,6 +256,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   useHotkeys('p', handleUsePrompt, [image]);
 
   const handleSendToImageToImage = useCallback(() => {
+    dispatch(sentImageToImg2Img());
     dispatch(initialImageSelected(image));
   }, [dispatch, image]);
 
@@ -327,6 +332,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
 
   const handleSendToCanvas = useCallback(() => {
     if (!image) return;
+    dispatch(sentImageToCanvas());
     if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
 
     // dispatch(setInitialCanvasImage(selectedImage));
diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
index a82f199a2b..8f3fff4ff3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
@@ -33,7 +33,11 @@ import { isEqual } from 'lodash-es';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useParameters } from 'features/parameters/hooks/useParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
-import { requestedImageDeletion } from '../store/actions';
+import {
+  requestedImageDeletion,
+  sentImageToCanvas,
+  sentImageToImg2Img,
+} from '../store/actions';
 import { useAppToaster } from 'app/components/Toaster';
 
 export const selector = createSelector(
@@ -157,6 +161,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   }, [image, recallSeed]);
 
   const handleSendToImageToImage = useCallback(() => {
+    dispatch(sentImageToImg2Img());
     dispatch(initialImageSelected(image));
   }, [dispatch, image]);
 
@@ -168,6 +173,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
    * TODO: the rest of these
    */
   const handleSendToCanvas = () => {
+    dispatch(sentImageToCanvas());
     dispatch(setInitialCanvasImage(image));
 
     dispatch(resizeAndScaleCanvas());
diff --git a/invokeai/frontend/web/src/features/gallery/store/actions.ts b/invokeai/frontend/web/src/features/gallery/store/actions.ts
index 55c974b169..a7454047b1 100644
--- a/invokeai/frontend/web/src/features/gallery/store/actions.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/actions.ts
@@ -5,3 +5,7 @@ import { SelectedImage } from 'features/parameters/store/actions';
 export const requestedImageDeletion = createAction<
   Image | SelectedImage | undefined
 >('gallery/requestedImageDeletion');
+
+export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
+
+export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');