feat(ui): implement action router pattern for canvas workflow fields

Implements a Symbol-based action routing system to resolve field mutation conflicts between canvas workflows and nodes workflows. This allows both workflows to share the same field action creators while ensuring updates are routed to the correct slice.

## Changes

### Core Action Router System
- Add `actionRouter.ts` with Symbol-based metadata injection and checking utilities
- Add `workflowContext.ts` to provide workflow context and avoid circular dependencies
- Enhance `useAppDispatch` to automatically inject workflow routing metadata based on context

### Canvas Workflow Integration
- Add `CanvasWorkflowElementProvider` wrapping `WorkflowContext` for canvas tab
- Refactor `canvasWorkflowNodesSlice` to use `extraReducers` instead of local reducers
- Listen for `nodesSlice` field actions and filter by workflow routing metadata
- Update persistence config to persist nodes/edges while excluding workflow metadata
- Filter out input node fields from workflow form (populated by graph builder)

### Nodes Workflow Integration
- Add `NodesWorkflowProvider` to mark nodes/workflow editor context
- Wrap `NodeEditor` with provider in workflows tab layout
- Add workflow routing check in `nodesSlice` field reducers

### DND Image Drop Fixes
- Enhance `setNodeImageFieldImage` to check active tab when routing DND actions
- Pass `getState` through DND handler to enable routing logic
- Ensure drops are routed to correct slice based on active tab

### Validation Improvements
- Refactor canvas workflow validation to use existing `getInvocationNodeErrors` utility
- Skip validation for input node's image field (populated at runtime)
- Remove custom validation logic in favor of shared validator

### Cleanup
- Remove `canvasWorkflowFieldChanged` listener (replaced by action router)
- Remove unused metadata code from canvas workflow graph builder
- Fix TypeScript type assertions in workflow selection handlers

## Fixes
- Field inputs now work correctly in canvas workflow panel
- DND image drops now route to correct workflow based on active tab
- Canvas workflow validation properly handles runtime-populated fields
- Persistence config correctly saves field changes while excluding metadata

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: 2 people

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

@@ -57,7 +57,6 @@ import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
 import { addArchivedOrDeletedBoardListener } from './middleware/listenerMiddleware/listeners/addArchivedOrDeletedBoardListener';
-import { addCanvasWorkflowFieldChangedListener } from './middleware/listenerMiddleware/listeners/canvasWorkflowFieldChanged';
 import { addCanvasWorkflowRehydratedListener } from './middleware/listenerMiddleware/listeners/canvasWorkflowRehydrated';
 import { addImageUploadedFulfilledListener } from './middleware/listenerMiddleware/listeners/imageUploaded';
 
@@ -299,5 +298,4 @@ addAdHocPostProcessingRequestedListener(startAppListening);
 addSetDefaultSettingsListener(startAppListening);
 
 // Canvas workflow fields
-addCanvasWorkflowFieldChangedListener(startAppListening);
 addCanvasWorkflowRehydratedListener(startAppListening);

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

@@ -1,8 +1,31 @@
 import type { AppStore, AppThunkDispatch, RootState } from 'app/store/store';
+import { useIsCanvasWorkflow } from 'app/store/workflowContext';
+import { injectCanvasWorkflowKey, injectNodesWorkflowKey } from 'features/nodes/store/actionRouter';
+import { useCallback } from 'react';
 import type { TypedUseSelectorHook } from 'react-redux';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch = () => useDispatch<AppThunkDispatch>();
+export const useAppDispatch = (): AppThunkDispatch => {
+  const isCanvasWorkflow = useIsCanvasWorkflow();
+  const dispatch = useDispatch<AppThunkDispatch>();
+
+  return useCallback(
+    ((action: Parameters<AppThunkDispatch>[0]) => {
+      // Inject workflow routing metadata into actions
+      if (typeof action === 'object' && action !== null && 'type' in action) {
+        if (isCanvasWorkflow) {
+          injectCanvasWorkflowKey(action);
+        } else {
+          injectNodesWorkflowKey(action);
+        }
+      }
+
+      return dispatch(action);
+    }) as AppThunkDispatch,
+    [dispatch, isCanvasWorkflow]
+  );
+};
+
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 export const useAppStore = () => useStore.withTypes<AppStore>()();

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

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context to track whether we're in a canvas workflow or nodes workflow.
+ * This is used by the useAppDispatch hook to inject the appropriate action routing metadata.
+ */
+export const WorkflowContext = createContext<{ isCanvasWorkflow: boolean } | null>(null);
+
+/**
+ * Hook to check if we're in a canvas workflow context.
+ */
+export const useIsCanvasWorkflow = (): boolean => {
+  const context = useContext(WorkflowContext);
+  return context?.isCanvasWorkflow ?? false;
+};

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

@@ -1,4 +1,5 @@
 import { useAppSelector } from 'app/store/storeHooks';
+import { WorkflowContext } from 'app/store/workflowContext';
 import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
 import type { FormElement } from 'features/nodes/types/workflow';
 import type { PropsWithChildren } from 'react';
@@ -15,17 +16,23 @@ type CanvasWorkflowElementContextValue = {
 
 const CanvasWorkflowElementContext = createContext<CanvasWorkflowElementContextValue | null>(null);
 
-const CanvasWorkflowElementProvider = memo(({ children }: PropsWithChildren) => {
+export const CanvasWorkflowElementProvider = memo(({ children }: PropsWithChildren) => {
   const nodesState = useAppSelector(selectCanvasWorkflowNodesSlice);
 
-  const value = useMemo<CanvasWorkflowElementContextValue>(
+  const elementValue = useMemo<CanvasWorkflowElementContextValue>(
     () => ({
       getElement: (id: string) => nodesState.form.elements[id],
     }),
     [nodesState.form.elements]
   );
 
-  return <CanvasWorkflowElementContext.Provider value={value}>{children}</CanvasWorkflowElementContext.Provider>;
+  const workflowValue = useMemo(() => ({ isCanvasWorkflow: true }), []);
+
+  return (
+    <WorkflowContext.Provider value={workflowValue}>
+      <CanvasWorkflowElementContext.Provider value={elementValue}>{children}</CanvasWorkflowElementContext.Provider>
+    </WorkflowContext.Provider>
+  );
 });
 CanvasWorkflowElementProvider.displayName = 'CanvasWorkflowElementProvider';
 

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

@@ -1,5 +1,6 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasWorkflowElementProvider } from 'features/controlLayers/components/CanvasWorkflowElementContext';
 import { CanvasWorkflowModeProvider } from 'features/controlLayers/components/CanvasWorkflowModeContext';
 import { CanvasWorkflowRootContainer } from 'features/controlLayers/components/CanvasWorkflowRootContainer';
 import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
@@ -32,11 +33,13 @@ export const CanvasWorkflowFieldsPanel = memo(() => {
   }
 
   return (
-    <CanvasWorkflowModeProvider>
-      <Flex w="full" justifyContent="center" p={4}>
-        <CanvasWorkflowRootContainer />
-      </Flex>
-    </CanvasWorkflowModeProvider>
+    <CanvasWorkflowElementProvider>
+      <CanvasWorkflowModeProvider>
+        <Flex w="full" justifyContent="center" p={4}>
+          <CanvasWorkflowRootContainer />
+        </Flex>
+      </CanvasWorkflowModeProvider>
+    </CanvasWorkflowElementProvider>
   );
 });
 CanvasWorkflowFieldsPanel.displayName = 'CanvasWorkflowFieldsPanel';