From 7566d0d6c673fa26b5a7f130c876192378dd667e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 30 Jun 2025 16:39:25 +0000
Subject: [PATCH] Enhance workflow mode toggle with panel navigation and focus

Co-authored-by: kent <kent@invoke.ai>
---
 .../sidePanel/WorkflowViewEditToggleButton.tsx   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx
index d001c9d3a7..6c91d9d025 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx
@@ -1,6 +1,9 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { VIEWER_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { MouseEventHandler } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,21 +13,30 @@ export const WorkflowViewEditToggleButton = memo(() => {
   const dispatch = useAppDispatch();
   const mode = useAppSelector(selectWorkflowMode);
   const { t } = useTranslation();
+  const { focusPanel } = useAutoLayoutContext();
 
   const onClickEdit = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       e.stopPropagation();
+      // Navigate to workflows tab and focus the Workflow Editor panel
+      dispatch(setActiveTab('workflows'));
       dispatch(workflowModeChanged('edit'));
+      // Focus the Workflow Editor panel
+      focusPanel(WORKSPACE_PANEL_ID);
     },
-    [dispatch]
+    [dispatch, focusPanel]
   );
 
   const onClickView = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       e.stopPropagation();
+      // Navigate to workflows tab and focus the Image Viewer panel
+      dispatch(setActiveTab('workflows'));
       dispatch(workflowModeChanged('view'));
+      // Focus the Image Viewer panel
+      focusPanel(VIEWER_PANEL_ID);
     },
-    [dispatch]
+    [dispatch, focusPanel]
   );
 
   if (mode === 'view') {