feat(ui): implement exposed fields for canvas workflows

Add support for displaying workflow exposed fields in the canvas parameters panel. Uses a shadow slice pattern to maintain complete state isolation between canvas and workflow tabs.

Key features:
- Shadow nodes slice mirrors workflow nodes structure for canvas workflows
- Context providers redirect field component selectors to canvas workflow data
- Middleware intercepts field mutations and routes to appropriate slice
- Filters out canvas input nodes from exposed fields
- Always displays fields in view mode
- Each field wrapped with correct node context for proper data access

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

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

Author: 2 people

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

@@ -0,0 +1,57 @@
+import type { AppStartListening } from 'app/store/store';
+import * as canvasWorkflowNodesActions from 'features/controlLayers/store/canvasWorkflowNodesSlice';
+import * as nodesActions from 'features/nodes/store/nodesSlice';
+
+/**
+ * Listens for field value changes on nodes and redirects them to the canvas workflow nodes slice
+ * if the node belongs to a canvas workflow (exists in canvasWorkflowNodes but not in nodes).
+ */
+export const addCanvasWorkflowFieldChangedListener = (startListening: AppStartListening) => {
+  // List of all field mutation actions from nodesSlice
+  const fieldMutationActions = [
+    nodesActions.fieldStringValueChanged,
+    nodesActions.fieldIntegerValueChanged,
+    nodesActions.fieldFloatValueChanged,
+    nodesActions.fieldBooleanValueChanged,
+    nodesActions.fieldModelIdentifierValueChanged,
+    nodesActions.fieldEnumModelValueChanged,
+    nodesActions.fieldSchedulerValueChanged,
+    nodesActions.fieldBoardValueChanged,
+    nodesActions.fieldImageValueChanged,
+    nodesActions.fieldColorValueChanged,
+    nodesActions.fieldImageCollectionValueChanged,
+    nodesActions.fieldStringCollectionValueChanged,
+    nodesActions.fieldIntegerCollectionValueChanged,
+    nodesActions.fieldFloatCollectionValueChanged,
+    nodesActions.fieldFloatGeneratorValueChanged,
+    nodesActions.fieldIntegerGeneratorValueChanged,
+    nodesActions.fieldStringGeneratorValueChanged,
+    nodesActions.fieldImageGeneratorValueChanged,
+    nodesActions.fieldValueReset,
+  ];
+
+  for (const actionCreator of fieldMutationActions) {
+    startListening({
+      actionCreator,
+      effect: (action: any, { dispatch, getState }: any) => {
+        const state = getState();
+        const { nodeId } = action.payload;
+
+        // Check if this node exists in canvas workflow nodes
+        const canvasWorkflowNode = state.canvasWorkflowNodes.nodes.find((n: any) => n.id === nodeId);
+        const regularNode = state.nodes.present.nodes.find((n: any) => n.id === nodeId);
+
+        // If the node exists in canvas workflow but NOT in regular nodes, redirect the action
+        if (canvasWorkflowNode && !regularNode) {
+          // Get the corresponding action from canvasWorkflowNodesSlice
+          const actionName = actionCreator.type.split('/').pop() as keyof typeof canvasWorkflowNodesActions;
+          const canvasWorkflowAction = canvasWorkflowNodesActions[actionName];
+
+          if (canvasWorkflowAction && typeof canvasWorkflowAction === 'function') {
+            dispatch(canvasWorkflowAction(action.payload as any));
+          }
+        }
+      },
+    });
+  }
+};

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

@@ -0,0 +1,39 @@
+import type { AppStartListening } from 'app/store/store';
+import { deepClone } from 'common/util/deepClone';
+import { selectCanvasWorkflow } from 'features/controlLayers/store/canvasWorkflowSlice';
+import { getFormFieldInitialValues } from 'features/nodes/store/nodesSlice';
+import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
+import type { AnyNode } from 'features/nodes/types/invocation';
+import { REMEMBER_REHYDRATED } from 'redux-remember';
+
+/**
+ * When the app rehydrates from storage, we need to populate the canvasWorkflowNodes
+ * shadow slice if a canvas workflow was previously selected.
+ *
+ * This ensures that exposed fields are visible when the page loads with a workflow already selected.
+ */
+export const addCanvasWorkflowRehydratedListener = (startListening: AppStartListening) => {
+  startListening({
+    type: REMEMBER_REHYDRATED,
+    effect: async (_action, { dispatch, getState }) => {
+      const state = getState();
+      const { workflow, inputNodeId } = state.canvasWorkflow;
+
+      // If there's a canvas workflow already selected, we need to load it into shadow nodes
+      if (workflow && inputNodeId) {
+        // Manually dispatch the fulfilled action to populate shadow nodes
+        // We can't use the thunk because the workflow is already loaded
+        dispatch({
+          type: selectCanvasWorkflow.fulfilled.type,
+          payload: {
+            workflow,
+            inputNodeId,
+            outputNodeId: state.canvasWorkflow.outputNodeId,
+            workflowId: state.canvasWorkflow.selectedWorkflowId,
+            fieldValues: state.canvasWorkflow.fieldValues,
+          },
+        });
+      }
+    },
+  });
+};

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

@@ -25,6 +25,7 @@ import { canvasSettingsSliceConfig } from 'features/controlLayers/store/canvasSe
 import { canvasSliceConfig } from 'features/controlLayers/store/canvasSlice';
 import { canvasSessionSliceConfig } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { canvasWorkflowSliceConfig } from 'features/controlLayers/store/canvasWorkflowSlice';
+import { canvasWorkflowNodesSliceConfig } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
 import { lorasSliceConfig } from 'features/controlLayers/store/lorasSlice';
 import { paramsSliceConfig } from 'features/controlLayers/store/paramsSlice';
 import { refImagesSliceConfig } from 'features/controlLayers/store/refImagesSlice';
@@ -57,6 +58,8 @@ import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
 import { addArchivedOrDeletedBoardListener } from './middleware/listenerMiddleware/listeners/addArchivedOrDeletedBoardListener';
 import { addImageUploadedFulfilledListener } from './middleware/listenerMiddleware/listeners/imageUploaded';
+import { addCanvasWorkflowFieldChangedListener } from './middleware/listenerMiddleware/listeners/canvasWorkflowFieldChanged';
+import { addCanvasWorkflowRehydratedListener } from './middleware/listenerMiddleware/listeners/canvasWorkflowRehydrated';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -67,6 +70,7 @@ const SLICE_CONFIGS = {
   [canvasSessionSliceConfig.slice.reducerPath]: canvasSessionSliceConfig,
   [canvasSettingsSliceConfig.slice.reducerPath]: canvasSettingsSliceConfig,
   [canvasWorkflowSliceConfig.slice.reducerPath]: canvasWorkflowSliceConfig,
+  [canvasWorkflowNodesSliceConfig.slice.reducerPath]: canvasWorkflowNodesSliceConfig,
   [canvasSliceConfig.slice.reducerPath]: canvasSliceConfig,
   [changeBoardModalSliceConfig.slice.reducerPath]: changeBoardModalSliceConfig,
   [configSliceConfig.slice.reducerPath]: configSliceConfig,
@@ -94,6 +98,7 @@ const ALL_REDUCERS = {
   [canvasSessionSliceConfig.slice.reducerPath]: canvasSessionSliceConfig.slice.reducer,
   [canvasSettingsSliceConfig.slice.reducerPath]: canvasSettingsSliceConfig.slice.reducer,
   [canvasWorkflowSliceConfig.slice.reducerPath]: canvasWorkflowSliceConfig.slice.reducer,
+  [canvasWorkflowNodesSliceConfig.slice.reducerPath]: canvasWorkflowNodesSliceConfig.slice.reducer,
   // Undoable!
   [canvasSliceConfig.slice.reducerPath]: undoable(
     canvasSliceConfig.slice.reducer,
@@ -292,3 +297,7 @@ addAppConfigReceivedListener(startAppListening);
 addAdHocPostProcessingRequestedListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
+
+// Canvas workflow fields
+addCanvasWorkflowFieldChangedListener(startAppListening);
+addCanvasWorkflowRehydratedListener(startAppListening);

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

@@ -0,0 +1,77 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
+import {
+  ContainerContextProvider,
+  DepthContextProvider,
+  useContainerContext,
+  useDepthContext,
+} from 'features/nodes/components/sidePanel/builder/contexts';
+import { isContainerElement } from 'features/nodes/types/workflow';
+import { CONTAINER_CLASS_NAME } from 'features/nodes/types/workflow';
+import { memo } from 'react';
+
+import { CanvasWorkflowFormElementComponent } from './CanvasWorkflowFormElementComponent';
+
+const containerViewModeSx: SystemStyleObject = {
+  gap: 2,
+  '&[data-self-layout="column"]': {
+    flexDir: 'column',
+    alignItems: 'stretch',
+  },
+  '&[data-self-layout="row"]': {
+    flexDir: 'row',
+    alignItems: 'flex-start',
+    overflowX: 'auto',
+    overflowY: 'visible',
+    h: 'min-content',
+    flexShrink: 0,
+  },
+  '&[data-parent-layout="column"]': {
+    w: 'full',
+    h: 'min-content',
+  },
+  '&[data-parent-layout="row"]': {
+    flex: '1 1 0',
+    minW: 32,
+  },
+};
+
+/**
+ * Container element for canvas workflow fields.
+ * This reads from the canvas workflow nodes slice.
+ */
+export const CanvasWorkflowContainerElement = memo(({ id }: { id: string }) => {
+  const nodesState = useAppSelector(selectCanvasWorkflowNodesSlice);
+  const el = nodesState.form.elements[id];
+  const depth = useDepthContext();
+  const containerCtx = useContainerContext();
+
+  if (!el || !isContainerElement(el)) {
+    return null;
+  }
+
+  const { data } = el;
+  const { children, layout } = data;
+
+  return (
+    <DepthContextProvider depth={depth + 1}>
+      <ContainerContextProvider id={id} layout={layout}>
+        <Flex
+          id={id}
+          className={CONTAINER_CLASS_NAME}
+          sx={containerViewModeSx}
+          data-self-layout={layout}
+          data-depth={depth}
+          data-parent-layout={containerCtx.layout}
+        >
+          {children.map((childId) => (
+            <CanvasWorkflowFormElementComponent key={childId} id={childId} />
+          ))}
+        </Flex>
+      </ContainerContextProvider>
+    </DepthContextProvider>
+  );
+});
+CanvasWorkflowContainerElement.displayName = 'CanvasWorkflowContainerElement';

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

@@ -0,0 +1,38 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
+import type { FormElement } from 'features/nodes/types/workflow';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
+
+/**
+ * Context that provides element lookup from canvas workflow nodes instead of regular nodes.
+ * This ensures that when viewing canvas workflow fields, we read from the shadow slice.
+ */
+
+type CanvasWorkflowElementContextValue = {
+  getElement: (id: string) => FormElement | undefined;
+};
+
+const CanvasWorkflowElementContext = createContext<CanvasWorkflowElementContextValue | null>(null);
+
+export const CanvasWorkflowElementProvider = memo(({ children }: PropsWithChildren) => {
+  const nodesState = useAppSelector(selectCanvasWorkflowNodesSlice);
+
+  const value = useMemo<CanvasWorkflowElementContextValue>(
+    () => ({
+      getElement: (id: string) => nodesState.form.elements[id],
+    }),
+    [nodesState.form.elements]
+  );
+
+  return <CanvasWorkflowElementContext.Provider value={value}>{children}</CanvasWorkflowElementContext.Provider>;
+});
+CanvasWorkflowElementProvider.displayName = 'CanvasWorkflowElementProvider';
+
+/**
+ * Hook to get an element, using canvas workflow context if available,
+ * otherwise falls back to regular nodes.
+ */
+export const useCanvasWorkflowElement = (): ((id: string) => FormElement | undefined) | null => {
+  return useContext(CanvasWorkflowElementContext)?.getElement ?? null;
+};

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

@@ -0,0 +1,36 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasWorkflowModeProvider } from 'features/controlLayers/components/CanvasWorkflowModeContext';
+import { CanvasWorkflowRootContainer } from 'features/controlLayers/components/CanvasWorkflowRootContainer';
+import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
+import { memo } from 'react';
+
+/**
+ * Renders the exposed fields for a canvas workflow.
+ *
+ * This component renders the workflow's form in view mode.
+ * Each field element is wrapped with the appropriate InvocationNodeContext
+ * in CanvasWorkflowFormElementComponent.
+ */
+export const CanvasWorkflowFieldsPanel = memo(() => {
+  const nodesState = useAppSelector(selectCanvasWorkflowNodesSlice);
+
+  // Check if form is empty
+  const rootElement = nodesState.form.elements[nodesState.form.rootElementId];
+  if (!rootElement || !('data' in rootElement) || !rootElement.data || !('children' in rootElement.data) || rootElement.data.children.length === 0) {
+    return (
+      <Flex w="full" p={4} justifyContent="center">
+        <Text variant="subtext">No fields exposed in this workflow</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <CanvasWorkflowModeProvider>
+      <Flex w="full" justifyContent="center" p={4}>
+        <CanvasWorkflowRootContainer />
+      </Flex>
+    </CanvasWorkflowModeProvider>
+  );
+});
+CanvasWorkflowFieldsPanel.displayName = 'CanvasWorkflowFieldsPanel';

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

@@ -0,0 +1,59 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasWorkflowNodesSlice } from 'features/controlLayers/store/canvasWorkflowNodesSlice';
+import { DividerElement } from 'features/nodes/components/sidePanel/builder/DividerElement';
+import { HeadingElement } from 'features/nodes/components/sidePanel/builder/HeadingElement';
+import { NodeFieldElementViewMode } from 'features/nodes/components/sidePanel/builder/NodeFieldElementViewMode';
+import { TextElement } from 'features/nodes/components/sidePanel/builder/TextElement';
+import {
+  isContainerElement,
+  isDividerElement,
+  isHeadingElement,
+  isNodeFieldElement,
+  isTextElement,
+} from 'features/nodes/types/workflow';
+import { memo } from 'react';
+import type { Equals } from 'tsafe';
+import { assert } from 'tsafe';
+
+import { CanvasWorkflowContainerElement } from './CanvasWorkflowContainerElement';
+import { CanvasWorkflowInvocationNodeContextProvider } from './CanvasWorkflowInvocationContext';
+
+/**
+ * Renders a form element from canvas workflow nodes.
+ * Recursively handles all element types.
+ */
+export const CanvasWorkflowFormElementComponent = memo(({ id }: { id: string }) => {
+  const nodesState = useAppSelector(selectCanvasWorkflowNodesSlice);
+  const el = nodesState.form.elements[id];
+
+  if (!el) {
+    return null;
+  }
+
+  if (isContainerElement(el)) {
+    return <CanvasWorkflowContainerElement key={id} id={id} />;
+  }
+
+  if (isNodeFieldElement(el)) {
+    return (
+      <CanvasWorkflowInvocationNodeContextProvider key={id} nodeId={el.data.fieldIdentifier.nodeId}>
+        <NodeFieldElementViewMode el={el} />
+      </CanvasWorkflowInvocationNodeContextProvider>
+    );
+  }
+
+  if (isDividerElement(el)) {
+    return <DividerElement key={id} id={id} />;
+  }
+
+  if (isHeadingElement(el)) {
+    return <HeadingElement key={id} id={id} />;
+  }
+
+  if (isTextElement(el)) {
+    return <TextElement key={id} id={id} />;
+  }
+
+  assert<Equals<typeof el, never>>(false, `Unhandled type for element with id ${id}`);
+});
+CanvasWorkflowFormElementComponent.displayName = 'CanvasWorkflowFormElementComponent';