diff --git a/common/constants.ts b/common/constants.ts
index 6e7ef1c0..1e850d90 100644
--- a/common/constants.ts
+++ b/common/constants.ts
@@ -886,23 +886,31 @@ export const INSPECTOR_TABS = [
     disabled: false,
   },
   {
-    id: INSPECTOR_TAB_ID.INGEST,
-    name: 'Ingest response',
+    id: INSPECTOR_TAB_ID.RESOURCES,
+    name: 'Resources',
     disabled: false,
   },
   {
-    id: INSPECTOR_TAB_ID.ERRORS,
-    name: 'Errors',
+    id: INSPECTOR_TAB_ID.PREVIEW,
+    name: 'Preview',
     disabled: false,
   },
+];
+
+export enum CONSOLE_TAB_ID {
+  ERRORS = 'errors',
+  INGEST_RESPONSE = 'ingest_response',
+}
+
+export const CONSOLE_TABS = [
   {
-    id: INSPECTOR_TAB_ID.RESOURCES,
-    name: 'Resources',
+    id: CONSOLE_TAB_ID.ERRORS,
+    name: 'Errors',
     disabled: false,
   },
   {
-    id: INSPECTOR_TAB_ID.PREVIEW,
-    name: 'Preview',
+    id: CONSOLE_TAB_ID.INGEST_RESPONSE,
+    name: 'Ingest Response',
     disabled: false,
   },
 ];
diff --git a/output.txt b/output.txt
new file mode 100644
index 00000000..7482a84c
--- /dev/null
+++ b/output.txt
@@ -0,0 +1,1161 @@
+warning package.json: License should be a valid SPDX license expression
+ PASS  public/utils/config_to_template_utils.test.tsx (16.325 s)
+ PASS  public/pages/workflows/import_workflow/import_workflow_modal.test.tsx (18.198 s)
+ FAIL  public/pages/workflows/workflows.test.tsx (19.291 s)
+  ● Console
+
+    console.error
+      Warning: React has detected a change in the order of Hooks called by WorkflowList. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks
+      
+         Previous render            Next render
+         ------------------------------------------------------
+      1. useContext                 useContext
+      2. useReducer                 useReducer
+      3. useMemo                    useMemo
+      4. useRef                     useRef
+      5. useRef                     useRef
+      6. useRef                     useRef
+      7. useRef                     useRef
+      8. useLayoutEffect            useLayoutEffect
+      9. useLayoutEffect            useLayoutEffect
+      10. useDebugValue             useDebugValue
+      11. useState                  useState
+      12. useState                  useState
+      13. useState                  useState
+      14. useState                  useState
+      15. useState                  useState
+      16. useState                  useState
+      17. useEffect                 useEffect
+      18. undefined                 useContext
+         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      
+          in WorkflowList (created by Workflows)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiPageContent)
+          in EuiPageContent (created by Workflows)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by Workflows)
+          in div (created by EuiPage)
+          in EuiPage (created by Workflows)
+          in Workflows (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router (created by BrowserRouter)
+          in BrowserRouter
+          in Provider
+
+      579 |
+      580 | export const getDataSourceId = () => {
+    > 581 |   const location = useLocation();
+          |                               ^
+      582 |   const mdsQueryParams = getDataSourceFromURL(location);
+      583 |   return mdsQueryParams.dataSourceId;
+      584 | };
+
+      at console.apply (../../node_modules/@testing-library/react/dist/act-compat.js:55:34)
+      at console.call [as error] (../../node_modules/@testing-library/react/dist/act-compat.js:55:34)
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnOnHookMismatchInDev (../../node_modules/react-dom/cjs/react-dom.development.js:14715:9)
+      at updateHookTypesDev (../../node_modules/react-dom/cjs/react-dom.development.js:14674:9)
+      at Object.useContext (../../node_modules/react-dom/cjs/react-dom.development.js:15895:7)
+      at useContext (../../node_modules/react/cjs/react.development.js:1493:21)
+      at useLocation (../../node_modules/react-router/modules/hooks.js:29:10)
+      at getDataSourceId (public/utils/utils.tsx:581:31)
+      at columns (public/pages/workflows/workflow_list/columns.tsx:21:39)
+      at Component (public/pages/workflows/workflow_list/workflow_list.tsx:217:31)
+      at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:14803:18)
+      at updateFunctionComponent (../../node_modules/react-dom/cjs/react-dom.development.js:17034:20)
+      at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:18610:16)
+      at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:23179:14)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22157:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batch (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at Object.notify (../../node_modules/react-redux/lib/utils/Subscription.js:21:7)
+      at Object.onStateChange [as notifyNestedSubs] (../../node_modules/react-redux/lib/utils/Subscription.js:92:15)
+      at listener (../../node_modules/react-redux/lib/utils/Subscription.js:97:20)
+      at next (../../node_modules/redux/lib/redux.js:305:7)
+      at next (../../node_modules/@reduxjs/toolkit/src/serializableStateInvariantMiddleware.ts:172:20)
+      at next (../../node_modules/redux-thunk/lib/index.js:27:16)
+      at apply (../../node_modules/@reduxjs/toolkit/src/immutableStateInvariantMiddleware.ts:258:32)
+      at dispatch (../../node_modules/redux/lib/redux.js:699:28)
+      at ../../node_modules/@reduxjs/toolkit/src/createAsyncThunk.ts:651:11
+      at step (../../node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:99:17)
+      at Object.throw (../../node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:48:14)
+      at rejected (../../node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:196:32)
+
+  ● Workflows › renders the page
+
+    Unable to find an element with the text: Select or drag and drop a file. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+    Ignored nodes: comments, <script />, <style />
+    <body>
+      <div>
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderContent"
+              >
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+                >
+                  <div
+                    class="euiFlexItem"
+                  >
+                    <h1
+                      class="euiTitle euiTitle--large"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        style="margin: 0px;"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <h1>
+                                AI Search Flows
+                              </h1>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Design, prototype, and experiment with solutions using OpenSearch Flow. Use the visual interface to build
+      ingest and search flows, test different configurations, and deploy them to your environment.
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiAccordion"
+                          style="margin-bottom: -16px;"
+                        >
+                          <div
+                            class="euiAccordion__triggerWrapper"
+                          >
+                            <button
+                              aria-controls="accordionGetStarted"
+                              aria-expanded="false"
+                              class="euiAccordion__button"
+                              id="ic8738733-5d3d-48d2-8519-d8760d7f6a05"
+                              type="button"
+                            >
+                              <span
+                                class="euiAccordion__iconWrapper"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="euiIcon euiIcon--medium euiIcon-isLoaded euiAccordion__icon"
+                                  focusable="false"
+                                  height="16"
+                                  role="img"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
+                                    fill-rule="nonzero"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                class="euiIEFlexWrapFix"
+                              >
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                >
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  >
+                                    <div
+                                      class="euiText euiText--medium"
+                                    >
+                                      Get started
+                                    </div>
+                                  </div>
+                                </div>
+                              </span>
+                            </button>
+                          </div>
+                          <div
+                            aria-labelledby="ic8738733-5d3d-48d2-8519-d8760d7f6a05"
+                            class="euiAccordion__childWrapper"
+                            id="accordionGetStarted"
+                            role="region"
+                            style="height: 0px"
+                            tabindex="-1"
+                          >
+                            <div>
+                              <div
+                                class=""
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--s"
+                                />
+                                <div
+                                  class="euiFlexItem"
+                                >
+       ...
+
+      56 |     const importWorkflowButton = getByTestId('importWorkflowButton');
+      57 |     userEvent.click(importWorkflowButton);
+    > 58 |     await waitFor(() => {
+         |                  ^
+      59 |       expect(
+      60 |         getAllByText('Select or drag and drop a file').length
+      61 |       ).toBeGreaterThan(0);
+
+      at waitForWrapper (../../node_modules/@testing-library/dom/dist/wait-for.js:187:27)
+      at call (public/pages/workflows/workflows.test.tsx:58:18)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+ PASS  public/pages/workflows/new_workflow/new_workflow.test.tsx (20.045 s)
+  ● Console
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+ PASS  public/pages/workflows/workflow_list/workflow_list.test.tsx (21.58 s)
+  ● Console
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at console.call [as error] (../../node_modules/@testing-library/react/dist/act-compat.js:55:34)
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+ PASS  public/pages/workflow_detail/workflow_detail.test.tsx (22.83 s)
+  ● Console
+
+    console.error
+      Warning: Cannot update a component (`ResizableWorkspace`) while rendering a different component (`LeftNav`). To locate the bad setState() call inside `LeftNav`, follow the stack trace as described in https://fb.me/setstate-in-render
+          in LeftNav (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in EuiResizableContainerContextProvider (created by EuiResizableContainer)
+          in EuiResizableContainer (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in ResizableWorkspace (created by WorkflowDetail)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by WorkflowDetail)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by WorkflowDetail)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by WorkflowDetail)
+          in div (created by EuiPage)
+          in EuiPage (created by WorkflowDetail)
+          in ReactFlowProvider (created by WorkflowDetail)
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      322 |   const ingestUpdateRequired =
+      323 |     ingestEnabled && ingestProvisioned && ingestTemplatesDifferent;
+    > 324 |   props.setIngestUpdateRequired(ingestUpdateRequired);
+          |         ^
+      325 |   const onIngestAndUpdateRequired = onIngest && ingestUpdateRequired;
+      326 |
+      327 |   const searchRequestUpdated =
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnAboutRenderPhaseUpdatesInDEV (../../node_modules/react-dom/cjs/react-dom.development.js:23241:15)
+      at scheduleWork (../../node_modules/react-dom/cjs/react-dom.development.js:21165:3)
+      at setIngestUpdateRequired (../../node_modules/react-dom/cjs/react-dom.development.js:15660:5)
+      at Component (public/pages/workflow_detail/left_nav/left_nav.tsx:324:9)
+      at renderWithHooks (../../node_modules/react-dom/cjs/react-dom.development.js:14803:18)
+      at updateFunctionComponent (../../node_modules/react-dom/cjs/react-dom.development.js:17034:20)
+      at beginWork (../../node_modules/react-dom/cjs/react-dom.development.js:18610:16)
+      at beginWork$1 (../../node_modules/react-dom/cjs/react-dom.development.js:23179:14)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22157:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
+      at render (../../node_modules/@testing-library/react/dist/pure.js:97:25)
+      at renderWithRouter (public/pages/workflow_detail/workflow_detail.test.tsx:56:14)
+      at call (public/pages/workflow_detail/workflow_detail.test.tsx:81:54)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+    console.error
+      Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
+          in button (created by EuiButtonIcon)
+          in EuiButtonIcon (created by EuiSmallButtonIcon)
+          in EuiSmallButtonIcon (created by ProcessorList)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in button (created by EuiCard)
+          in span (created by EuiCard)
+          in EuiTitle (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by ProcessorList)
+          in div (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in ProcessorList (created by ProcessorsComponent)
+          in div (created by ProcessorsComponent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorsComponent)
+          in div (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by NavComponent)
+          in NavComponent (created by ProcessorsComponent)
+          in ProcessorsComponent (created by IngestContent)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by IngestContent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by IngestContent)
+          in div (created by EuiResizeObserver)
+          in div (created by EuiResizeObserver)
+          in EuiResizeObserver (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in EuiAccordion (created by IngestContent)
+          in IngestContent (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiPanel)
+          in EuiPanel (created by LeftNav)
+          in LeftNav (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in EuiResizableContainerContextProvider (created by EuiResizableContainer)
+          in EuiResizableContainer (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in ResizableWorkspace (created by WorkflowDetail)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by WorkflowDetail)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by WorkflowDetail)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by WorkflowDetail)
+          in div (created by EuiPage)
+          in EuiPage (created by WorkflowDetail)
+          in ReactFlowProvider (created by WorkflowDetail)
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      54 |
+      55 |   return {
+    > 56 |     ...render(
+         |              ^
+      57 |       <Provider store={mockStore(mockInput)}>
+      58 |         <Router history={history}>
+      59 |           <Switch>
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at validateDOMNesting (../../node_modules/react-dom/cjs/react-dom.development.js:7383:7)
+      at createInstance (../../node_modules/react-dom/cjs/react-dom.development.js:7479:5)
+      at completeWork (../../node_modules/react-dom/cjs/react-dom.development.js:18970:28)
+      at completeUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22189:16)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22165:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
+      at render (../../node_modules/@testing-library/react/dist/pure.js:97:25)
+      at renderWithRouter (public/pages/workflow_detail/workflow_detail.test.tsx:56:14)
+      at call (public/pages/workflow_detail/workflow_detail.test.tsx:81:54)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+    console.error
+      Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
+          in button (created by EuiButtonIcon)
+          in EuiButtonIcon (created by EuiSmallButtonIcon)
+          in EuiSmallButtonIcon (created by ProcessorList)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in button (created by EuiCard)
+          in span (created by EuiCard)
+          in EuiTitle (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by ProcessorList)
+          in div (created by ProcessorList)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorList)
+          in ProcessorList (created by ProcessorsComponent)
+          in div (created by ProcessorsComponent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by ProcessorsComponent)
+          in div (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by NavComponent)
+          in NavComponent (created by ProcessorsComponent)
+          in ProcessorsComponent (created by SearchContent)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by SearchContent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by SearchContent)
+          in div (created by EuiResizeObserver)
+          in div (created by EuiResizeObserver)
+          in EuiResizeObserver (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in EuiAccordion (created by SearchContent)
+          in SearchContent (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiPanel)
+          in EuiPanel (created by LeftNav)
+          in LeftNav (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in EuiResizableContainerContextProvider (created by EuiResizableContainer)
+          in EuiResizableContainer (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in ResizableWorkspace (created by WorkflowDetail)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by WorkflowDetail)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by WorkflowDetail)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by WorkflowDetail)
+          in div (created by EuiPage)
+          in EuiPage (created by WorkflowDetail)
+          in ReactFlowProvider (created by WorkflowDetail)
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      54 |
+      55 |   return {
+    > 56 |     ...render(
+         |              ^
+      57 |       <Provider store={mockStore(mockInput)}>
+      58 |         <Router history={history}>
+      59 |           <Switch>
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at validateDOMNesting (../../node_modules/react-dom/cjs/react-dom.development.js:7383:7)
+      at createInstance (../../node_modules/react-dom/cjs/react-dom.development.js:7479:5)
+      at completeWork (../../node_modules/react-dom/cjs/react-dom.development.js:18970:28)
+      at completeUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22189:16)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22165:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
+      at render (../../node_modules/@testing-library/react/dist/pure.js:97:25)
+      at renderWithRouter (public/pages/workflow_detail/workflow_detail.test.tsx:56:14)
+      at call (public/pages/workflow_detail/workflow_detail.test.tsx:81:54)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+    console.error
+      Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
+          in div (created by EuiTextColor)
+          in EuiTextColor (created by EuiText)
+          in div (created by EuiText)
+          in EuiText (created by NavComponent)
+          in p (created by EuiCard)
+          in div (created by EuiText)
+          in EuiText (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by NavComponent)
+          in NavComponent (created by IngestContent)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by IngestContent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by IngestContent)
+          in div (created by EuiResizeObserver)
+          in div (created by EuiResizeObserver)
+          in EuiResizeObserver (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in EuiAccordion (created by IngestContent)
+          in IngestContent (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiPanel)
+          in EuiPanel (created by LeftNav)
+          in LeftNav (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in EuiResizableContainerContextProvider (created by EuiResizableContainer)
+          in EuiResizableContainer (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in ResizableWorkspace (created by WorkflowDetail)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by WorkflowDetail)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by WorkflowDetail)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by WorkflowDetail)
+          in div (created by EuiPage)
+          in EuiPage (created by WorkflowDetail)
+          in ReactFlowProvider (created by WorkflowDetail)
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      54 |
+      55 |   return {
+    > 56 |     ...render(
+         |              ^
+      57 |       <Provider store={mockStore(mockInput)}>
+      58 |         <Router history={history}>
+      59 |           <Switch>
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at validateDOMNesting (../../node_modules/react-dom/cjs/react-dom.development.js:7383:7)
+      at createInstance (../../node_modules/react-dom/cjs/react-dom.development.js:7479:5)
+      at completeWork (../../node_modules/react-dom/cjs/react-dom.development.js:18970:28)
+      at completeUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22189:16)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22165:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
+      at render (../../node_modules/@testing-library/react/dist/pure.js:97:25)
+      at renderWithRouter (public/pages/workflow_detail/workflow_detail.test.tsx:56:14)
+      at call (public/pages/workflow_detail/workflow_detail.test.tsx:81:54)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+    console.error
+      Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
+          in div (created by EuiText)
+          in EuiText (created by NavComponent)
+          in p (created by EuiCard)
+          in div (created by EuiText)
+          in EuiText (created by EuiCard)
+          in div (created by EuiCard)
+          in div (created by EuiPanel)
+          in EuiPanel (created by EuiCard)
+          in EuiCard (created by NavComponent)
+          in NavComponent (created by IngestContent)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by IngestContent)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by IngestContent)
+          in div (created by EuiResizeObserver)
+          in div (created by EuiResizeObserver)
+          in EuiResizeObserver (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in div (created by EuiAccordion)
+          in EuiAccordion (created by IngestContent)
+          in IngestContent (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by LeftNav)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by LeftNav)
+          in div (created by EuiPanel)
+          in EuiPanel (created by LeftNav)
+          in LeftNav (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in div (created by EuiResizableContainer)
+          in EuiResizableContainerContextProvider (created by EuiResizableContainer)
+          in EuiResizableContainer (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in div (created by ResizableWorkspace)
+          in ResizableWorkspace (created by WorkflowDetail)
+          in div (created by EuiFlexItem)
+          in EuiFlexItem (created by WorkflowDetail)
+          in div (created by EuiFlexGroup)
+          in EuiFlexGroup (created by WorkflowDetail)
+          in div (created by EuiPageBody)
+          in EuiPageBody (created by WorkflowDetail)
+          in div (created by EuiPage)
+          in EuiPage (created by WorkflowDetail)
+          in ReactFlowProvider (created by WorkflowDetail)
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      54 |
+      55 |   return {
+    > 56 |     ...render(
+         |              ^
+      57 |       <Provider store={mockStore(mockInput)}>
+      58 |         <Router history={history}>
+      59 |           <Switch>
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at validateDOMNesting (../../node_modules/react-dom/cjs/react-dom.development.js:7383:7)
+      at createInstance (../../node_modules/react-dom/cjs/react-dom.development.js:7479:5)
+      at completeWork (../../node_modules/react-dom/cjs/react-dom.development.js:18970:28)
+      at completeUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22189:16)
+      at performUnitOfWork (../../node_modules/react-dom/cjs/react-dom.development.js:22165:12)
+      at workLoopSync (../../node_modules/react-dom/cjs/react-dom.development.js:22130:22)
+      at callback (../../node_modules/react-dom/cjs/react-dom.development.js:21756:9)
+      at eventHandler (../../node_modules/react-dom/cjs/react-dom.development.js:11089:24)
+      at Scheduler_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
+      at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11039:10)
+      at flushSyncCallbackQueueImpl (../../node_modules/react-dom/cjs/react-dom.development.js:11084:7)
+      at flushSyncCallbackQueue (../../node_modules/react-dom/cjs/react-dom.development.js:11072:3)
+      at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:21862:7)
+      at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
+      at render (../../node_modules/@testing-library/react/dist/pure.js:97:25)
+      at renderWithRouter (public/pages/workflow_detail/workflow_detail.test.tsx:56:14)
+      at call (public/pages/workflow_detail/workflow_detail.test.tsx:81:54)
+      at tryCatch (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
+      at Generator._invoke (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
+      at Generator.next (../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
+      at asyncGeneratorStep (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
+      at _next (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
+      at ../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
+      at Object.<anonymous> (../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:338:11
+
+    console.error
+      Warning: An update to Formik inside a test was not wrapped in act(...).
+      
+      When testing, code that causes React state updates should be wrapped into act(...):
+      
+      act(() => {
+        /* fire events that update state */
+      });
+      /* assert on the output */
+      
+      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+          in Formik (created by WorkflowDetail)
+          in WorkflowDetail (created by Context.Consumer)
+          in Route
+          in Switch
+          in Router
+          in Provider
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:88:30)
+      at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:5)
+      at warnIfNotCurrentlyActingUpdatesInDev (../../node_modules/react-dom/cjs/react-dom.development.js:23284:7)
+      at setIteration (../../node_modules/react-dom/cjs/react-dom.development.js:15656:9)
+      at dispatch (node_modules/formik/src/Formik.tsx:193:36)
+      at node_modules/formik/src/Formik.tsx:339:11
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at console.call [as error] (../../node_modules/@testing-library/react/dist/act-compat.js:55:34)
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+    console.error
+      Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. 
+
+      at printWarning (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:87:30)
+      at error (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:59:5)
+      at onDone (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:921:9)
+      at ../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:960:13
+
+
+Test Suites: 1 failed, 5 passed, 6 total
+Tests:       1 failed, 29 passed, 30 total
+Snapshots:   0 total
+Time:        27.078 s
+Ran all test suites.
+error Command failed with exit code 1.
diff --git a/public/pages/workflow_detail/left_nav/left_nav.tsx b/public/pages/workflow_detail/left_nav/left_nav.tsx
index 337759b5..20cb3106 100644
--- a/public/pages/workflow_detail/left_nav/left_nav.tsx
+++ b/public/pages/workflow_detail/left_nav/left_nav.tsx
@@ -58,7 +58,6 @@ import {
   reduceToTemplate,
   sleep,
   uiConfigToFormik,
-  USE_NEW_HOME_PAGE,
   useDataSourceVersion,
   useMissingDataSourceVersion,
 } from '../../../utils';
@@ -86,6 +85,7 @@ interface LeftNavProps {
   setSearchReadonly: (readonly: boolean) => void;
   setIsProvisioning: (isProvisioning: boolean) => void;
   onClose: () => void;
+  isConsolePanelOpen: boolean;
 }
 
 const SUCCESS_TOAST_ID = 'success_toast_id';
@@ -704,6 +704,7 @@ export function LeftNav(props: LeftNavProps) {
               .unwrap()
               .then((resp: SimulateIngestPipelineResponseVerbose) => {
                 const ingestPipelineErrors = getIngestPipelineErrors(resp);
+
                 // The errors map may be empty; in which case, this dispatch will clear
                 // any older errors.
                 dispatch(
@@ -797,10 +798,7 @@ export function LeftNav(props: LeftNavProps) {
         grow={false}
         className="workspace-panel left-nav-static-width"
         borderRadius="l"
-        style={{
-          paddingBottom: '48px',
-          marginRight: '0px',
-        }}
+        style={{ paddingBottom: '12px' }}
       >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup direction="row" justifyContent="spaceBetween">
@@ -831,7 +829,6 @@ export function LeftNav(props: LeftNavProps) {
           style={{
             height: '100%',
             gap: '16px',
-            //marginLeft: '12px', TODO: change this value to adjust global margin of left nav.
           }}
         >
           <EuiFlexItem
@@ -895,11 +892,13 @@ export function LeftNav(props: LeftNavProps) {
               )}
             </>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+
+          <EuiFlexItem grow={true}>
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem>
                 <EuiHorizontalRule margin="m" />
               </EuiFlexItem>
+
               {onIngestAndSearchUpdateRequired && (
                 <EuiFlexItem grow={false} style={{ marginTop: '-8px' }}>
                   <EuiCallOut
@@ -920,13 +919,27 @@ export function LeftNav(props: LeftNavProps) {
                   />
                 </EuiFlexItem>
               )}
-              <EuiFlexItem grow={false}>
+              <EuiFlexItem
+                grow={false}
+                style={{
+                  height: '60px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginBottom: '20px',
+                }}
+              >
                 <EuiFlexGroup
                   direction="row"
                   gutterSize="s"
                   style={{
                     padding: '0px',
-                    marginBottom: USE_NEW_HOME_PAGE ? '0px' : '54px',
+                    margin: '0px',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
                   {onIngestAndUnprovisioned &&
diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index ceb6e3bd..04b2d7ee 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -2,15 +2,27 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { isEmpty } from 'lodash';
 import {
   EuiCodeBlock,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
   EuiResizableContainer,
+  EuiSmallButtonIcon,
   EuiText,
 } from '@elastic/eui';
 import {
@@ -21,14 +33,21 @@ import {
   WorkflowConfig,
   customStringify,
 } from '../../../common';
-import { isValidUiWorkflow, reduceToTemplate } from '../../utils';
+import {
+  aggregateConsoleErrors,
+  isValidUiWorkflow,
+  reduceToTemplate,
+} from '../../utils';
 import { ComponentInput } from './component_input';
 import { Tools } from './tools';
 import { LeftNav } from './left_nav';
+import { AppState } from '../../store';
+import { Console } from './tools/console';
 
 // styling
 import './workspace/workspace-styles.scss';
 import '../../global-styles.scss';
+import { useSelector } from 'react-redux';
 
 interface ResizableWorkspaceProps {
   workflow: Workflow | undefined;
@@ -60,6 +79,13 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     }
   }, [props.uiConfig?.ingest?.enabled]);
 
+  // Always start with console closed when workflow changes
+  const [isConsolePanelOpen, setIsConsolePanelOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsConsolePanelOpen(false);
+  }, [props.workflow?.id]);
+
   const [leftNavOpen, setLeftNavOpen] = useState<boolean>(true);
 
   // misc ingest-related state required to be shared across the left nav
@@ -78,13 +104,24 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   const onIngest = selectedComponentId.startsWith('ingest');
   const onSearch = selectedComponentId.startsWith('search');
 
-  const collapseFnHorizontal = useRef(
-    (id: string, options: { direction: 'left' | 'right' }) => {}
-  );
-  const onToggleToolsChange = () => {
-    collapseFnHorizontal.current(TOOLS_PANEL_ID, { direction: 'right' });
+  // Panel refs
+  const toolsPanelRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const collapseFnHorizontal = useRef<
+    (id: string, options: { direction: 'left' | 'right' }) => void
+  >(() => {});
+
+  const onToggleToolsChange = useCallback(() => {
+    if (typeof collapseFnHorizontal.current === 'function') {
+      collapseFnHorizontal.current(TOOLS_PANEL_ID, { direction: 'right' });
+    }
     setIsToolsPanelOpen(!isToolsPanelOpen);
-  };
+  }, [isToolsPanelOpen]);
+
+  const onToggleConsoleChange = useCallback(() => {
+    setIsConsolePanelOpen(!isConsolePanelOpen);
+  }, [isConsolePanelOpen]);
 
   // Inspector panel state vars. Actions taken in the form can update the Inspector panel,
   // hence we keep top-level vars here to pass to both form and inspector components.
@@ -93,6 +130,38 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     INSPECTOR_TAB_ID
   >(INSPECTOR_TAB_ID.TEST);
 
+  const { opensearch, workflows } = useSelector((state: AppState) => state);
+  const opensearchError = opensearch.errorMessage;
+  const workflowsError = workflows.errorMessage;
+  const {
+    ingestPipeline: ingestPipelineErrors,
+    searchPipeline: searchPipelineErrors,
+  } = useSelector((state: AppState) => state.errors);
+  // Error display messages and actual error count
+  const [consoleErrorMessages, setConsoleErrorMessages] = useState<
+    (string | ReactNode)[]
+  >([]);
+  const [actualErrorCount, setActualErrorCount] = useState<number>(0);
+
+  useEffect(() => {
+    const { errorMessages, errorCount } = aggregateConsoleErrors(
+      opensearchError,
+      workflowsError,
+      ingestPipelineErrors,
+      searchPipelineErrors,
+      props.workflow?.error
+    );
+
+    setConsoleErrorMessages(errorMessages);
+    setActualErrorCount(errorCount);
+  }, [
+    opensearchError,
+    workflowsError,
+    ingestPipelineErrors,
+    searchPipelineErrors,
+    props.workflow?.error,
+  ]);
+
   // is valid workflow state, + associated hook to set it as such
   const [isValidWorkflow, setIsValidWorkflow] = useState<boolean>(true);
   useEffect(() => {
@@ -109,94 +178,287 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     setSelectedInspectorTabId(INSPECTOR_TAB_ID.TEST);
   }
 
+  // Force no page overflow
+  useEffect(() => {
+    // Store original styles
+    const originalBodyOverflow = document.body.style.overflow;
+    const originalHtmlOverflow = document.documentElement.style.overflow;
+
+    // Force no scrollbars
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+
+    // Also fix any EUI containers that might be causing overflow
+    const euiPage = document.querySelector('.euiPage') as HTMLElement;
+    const euiPageBody = document.querySelector('.euiPageBody') as HTMLElement;
+
+    let originalEuiPageOverflow = '';
+    let originalEuiPageBodyOverflow = '';
+
+    if (euiPage) {
+      originalEuiPageOverflow = euiPage.style.overflow;
+      euiPage.style.overflow = 'hidden';
+      euiPage.style.maxHeight = '100vh';
+    }
+
+    if (euiPageBody) {
+      originalEuiPageBodyOverflow = euiPageBody.style.overflow;
+      euiPageBody.style.overflow = 'hidden';
+      euiPageBody.style.maxHeight = '100%';
+    }
+
+    return () => {
+      // Restore original styles on cleanup
+      document.body.style.overflow = originalBodyOverflow;
+      document.documentElement.style.overflow = originalHtmlOverflow;
+
+      if (euiPage) {
+        euiPage.style.overflow = originalEuiPageOverflow;
+        euiPage.style.maxHeight = '';
+      }
+
+      if (euiPageBody) {
+        euiPageBody.style.overflow = originalEuiPageBodyOverflow;
+        euiPageBody.style.maxHeight = '';
+      }
+    };
+  }, []);
+
   return isValidWorkflow ? (
-    <EuiResizableContainer
-      key={`${leftNavOpen}`} // re-render when the left nav is toggled, to re-generate the correct width
-      direction="horizontal"
-      className="stretch-absolute"
+    <div
+      data-test-subj="resizable-workspace"
       style={{
-        width: '100%',
-        gap: '4px',
+        // Keep our component properly sized
+        // do not change this value since the header cost 148px
+        height: 'calc(100vh - 148px)',
+        maxHeight: 'calc(100vh - 148px)',
+        width: 'calc(100vw - 16px)',
+        maxWidth: 'calc(100vw - 16px)',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        //avoid console panel scroll bar when first render
+        overflowX: 'hidden',
+        overflowY: 'hidden',
       }}
     >
-      {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
-        if (togglePanel) {
-          collapseFnHorizontal.current = (panelId: string, { direction }) =>
-            togglePanel(panelId, { direction });
-        }
-        return (
-          <>
-            <div className={leftNavOpen ? 'left-nav-static-width' : undefined}>
-              {leftNavOpen ? (
-                <LeftNav
-                  workflow={props.workflow}
-                  uiConfig={props.uiConfig}
-                  setUiConfig={props.setUiConfig}
-                  setIngestResponse={setIngestResponse}
-                  ingestDocs={props.ingestDocs}
-                  setIngestDocs={props.setIngestDocs}
-                  setIngestUpdateRequired={setIngestUpdateRequired}
-                  setBlockNavigation={props.setBlockNavigation}
-                  displaySearchPanel={displaySearchPanel}
-                  setCachedFormikState={props.setCachedFormikState}
-                  setLastIngested={setLastIngested}
-                  selectedComponentId={selectedComponentId}
-                  setSelectedComponentId={setSelectedComponentId}
-                  setIngestReadonly={setIngestReadonly}
-                  setSearchReadonly={setSearchReadonly}
-                  setIsProvisioning={setIsProvisioning}
-                  onClose={() => setLeftNavOpen(false)}
-                />
-              ) : undefined}
-            </div>
-            <EuiResizablePanel
-              id={WORKFLOW_INPUTS_PANEL_ID}
-              mode="main"
-              initialSize={50}
-              minSize="25%"
-              paddingSize="none"
-              scrollable={false}
-            >
-              <ComponentInput
-                selectedComponentId={selectedComponentId}
-                workflow={props.workflow}
-                uiConfig={props.uiConfig as WorkflowConfig}
-                setUiConfig={props.setUiConfig}
-                setIngestDocs={props.setIngestDocs}
-                lastIngested={lastIngested}
-                ingestUpdateRequired={ingestUpdateRequired}
-                readonly={
-                  (onIngest && ingestReadonly) ||
-                  (onSearch && searchReadonly) ||
-                  isProvisioning
-                }
-                leftNavOpen={leftNavOpen}
-                openLeftNav={() => setLeftNavOpen(true)}
-                displaySearchPanel={displaySearchPanel}
-              />
-            </EuiResizablePanel>
-            <EuiResizableButton />
-            <EuiResizablePanel
-              id={TOOLS_PANEL_ID}
-              mode="collapsible"
-              initialSize={50}
-              minSize="25%"
-              paddingSize="none"
-              borderRadius="l"
-              onToggleCollapsedInternal={() => onToggleToolsChange()}
-            >
-              <Tools
-                workflow={props.workflow}
-                ingestResponse={ingestResponse}
-                selectedTabId={selectedInspectorTabId}
-                setSelectedTabId={setSelectedInspectorTabId}
-                uiConfig={props.uiConfig}
+      <div
+        ref={containerRef}
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }}
+      >
+        <EuiResizableContainer
+          key="debug-static-key"
+          direction="horizontal"
+          style={{
+            width: '100%',
+            flex: 1,
+            gap: '2px',
+            maxWidth: '100vw',
+            overflow: 'hidden',
+            minHeight: 0,
+          }}
+        >
+          {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
+            if (togglePanel) {
+              collapseFnHorizontal.current = togglePanel;
+            }
+
+            return (
+              <>
+                <div
+                  className={leftNavOpen ? 'left-nav-static-width' : undefined}
+                >
+                  {leftNavOpen ? (
+                    <LeftNav
+                      workflow={props.workflow}
+                      uiConfig={props.uiConfig}
+                      setUiConfig={props.setUiConfig}
+                      setIngestResponse={setIngestResponse}
+                      ingestDocs={props.ingestDocs}
+                      setIngestDocs={props.setIngestDocs}
+                      setIngestUpdateRequired={setIngestUpdateRequired}
+                      setBlockNavigation={props.setBlockNavigation}
+                      displaySearchPanel={displaySearchPanel}
+                      setCachedFormikState={props.setCachedFormikState}
+                      setLastIngested={setLastIngested}
+                      selectedComponentId={selectedComponentId}
+                      setSelectedComponentId={setSelectedComponentId}
+                      setIngestReadonly={setIngestReadonly}
+                      setSearchReadonly={setSearchReadonly}
+                      setIsProvisioning={setIsProvisioning}
+                      onClose={() => setLeftNavOpen(false)}
+                      isConsolePanelOpen={isConsolePanelOpen}
+                    />
+                  ) : undefined}
+                </div>
+
+                <EuiResizablePanel
+                  id={WORKFLOW_INPUTS_PANEL_ID}
+                  mode="main"
+                  initialSize={60}
+                  minSize="30%"
+                  paddingSize="none"
+                  scrollable={false}
+                  style={{
+                    maxWidth: 'calc(100vw - 350px)',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <div
+                    style={{
+                      height: '100%',
+                      width: '100%',
+                      overflow: 'auto',
+                      maxWidth: '100%',
+                    }}
+                  >
+                    <ComponentInput
+                      selectedComponentId={selectedComponentId}
+                      workflow={props.workflow}
+                      uiConfig={props.uiConfig as WorkflowConfig}
+                      setUiConfig={props.setUiConfig}
+                      setIngestDocs={props.setIngestDocs}
+                      lastIngested={lastIngested}
+                      ingestUpdateRequired={ingestUpdateRequired}
+                      readonly={
+                        (onIngest && ingestReadonly) ||
+                        (onSearch && searchReadonly) ||
+                        isProvisioning
+                      }
+                      leftNavOpen={leftNavOpen}
+                      openLeftNav={() => setLeftNavOpen(true)}
+                      displaySearchPanel={displaySearchPanel}
+                    />
+                  </div>
+                </EuiResizablePanel>
+
+                <EuiResizableButton />
+
+                <EuiResizablePanel
+                  id={TOOLS_PANEL_ID}
+                  mode="collapsible"
+                  initialSize={40}
+                  minSize="300px"
+                  paddingSize="none"
+                  borderRadius="l"
+                  onToggleCollapsedInternal={() => {
+                    onToggleToolsChange();
+                  }}
+                  style={{
+                    minWidth: '300px',
+                    flexShrink: 0,
+                    flexGrow: 0,
+                    flexBasis: 'auto',
+                  }}
+                >
+                  <div
+                    ref={toolsPanelRef}
+                    style={{
+                      height: '100%',
+                      overflow: 'auto',
+                      minWidth: '300px',
+                    }}
+                  >
+                    <Tools
+                      workflow={props.workflow}
+                      selectedTabId={selectedInspectorTabId}
+                      setSelectedTabId={setSelectedInspectorTabId}
+                      uiConfig={props.uiConfig}
+                    />
+                  </div>
+                </EuiResizablePanel>
+              </>
+            );
+          }}
+        </EuiResizableContainer>
+      </div>
+
+      <div
+        style={{
+          height: isConsolePanelOpen ? '30vh' : '35px',
+          minHeight: isConsolePanelOpen ? '200px' : '35px',
+          maxHeight: isConsolePanelOpen ? '30vh' : '35px',
+          flexShrink: 0,
+          borderTop: '1px solid #D3DAE6',
+          transition: 'height 0.2s ease',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%',
+          maxWidth: '100%',
+          marginBottom: '8px',
+          paddingBottom: '0px',
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+        }}
+      >
+        <EuiPanel
+          paddingSize="s"
+          style={{
+            height: '100%',
+            maxHeight: '100%',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: 0,
+            borderTop: 'none',
+            overflowX: 'hidden',
+            overflowY:
+              consoleErrorMessages.length > 0 || !isEmpty(ingestResponse)
+                ? 'auto'
+                : 'hidden',
+            width: '100%',
+            maxWidth: '100%',
+            minWidth: 0,
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+          className="console-panel-no-scroll"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceBetween"
+            gutterSize="s"
+            responsive={false}
+            style={{
+              marginBottom: isConsolePanelOpen ? '8px' : '0px',
+              maxHeight: '28px',
+              flexShrink: 0,
+            }}
+          >
+            <EuiFlexItem grow={false}>
+              <EuiText size="s">
+                <strong>Console</strong>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSmallButtonIcon
+                aria-label="Toggle console"
+                iconType={isConsolePanelOpen ? 'fold' : 'unfold'}
+                onClick={onToggleConsoleChange}
               />
-            </EuiResizablePanel>
-          </>
-        );
-      }}
-    </EuiResizableContainer>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          {isConsolePanelOpen && (
+            <EuiFlexItem grow={true} style={{ overflow: 'hidden' }}>
+              <div style={{ height: '100%', overflow: 'hidden' }}>
+                <Console
+                  errorMessages={consoleErrorMessages}
+                  errorCount={actualErrorCount}
+                  ingestResponse={ingestResponse}
+                />
+              </div>
+            </EuiFlexItem>
+          )}
+        </EuiPanel>
+      </div>
+    </div>
   ) : (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={3}>
diff --git a/public/pages/workflow_detail/tools/console/console.tsx b/public/pages/workflow_detail/tools/console/console.tsx
new file mode 100644
index 00000000..1241c55a
--- /dev/null
+++ b/public/pages/workflow_detail/tools/console/console.tsx
@@ -0,0 +1,412 @@
+import React, { ReactNode, useState } from 'react';
+import { isEmpty } from 'lodash';
+import {
+  EuiCodeBlock,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiAccordion,
+  EuiBadge,
+  EuiButtonIcon,
+} from '@elastic/eui';
+
+interface ConsoleProps {
+  errorMessages: (string | ReactNode)[];
+  errorCount: number;
+  ingestResponse: string;
+}
+
+export function Console(props: ConsoleProps) {
+  const hasErrors = props.errorMessages?.length > 0;
+  const hasIngestResponse = !isEmpty(props.ingestResponse);
+  const hasAnyContent = hasErrors || hasIngestResponse;
+
+  // State for fullscreen modes
+  const [fullscreenMode, setFullscreenMode] = useState<
+    'errors' | 'responses' | null
+  >(null);
+
+  // Get theme-aware colors (moved to function to detect at runtime)
+  const getThemeColors = () => {
+    const bodyColor = window.getComputedStyle(document.body).color;
+    const colorValues = bodyColor.match(/\d+/g);
+    const isDarkMode = colorValues && parseInt(colorValues[0]) > 150;
+
+    return {
+      backgroundColor: isDarkMode ? '#1a1a1a' : '#ffffff',
+      textColor: isDarkMode ? '#ffffff' : '#000000',
+      isDarkMode,
+    };
+  };
+
+  // Get current theme colors for use in component
+  const themeColors = getThemeColors();
+
+  // Utility functions for header hiding
+  const hideHeader = () => {
+    const style = document.createElement('style');
+    style.id = 'console-fullscreen-hide-header';
+    style.textContent = `
+      header, nav, .euiHeader {
+        display: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+  };
+
+  const showHeader = () => {
+    const injectedStyle = document.getElementById(
+      'console-fullscreen-hide-header'
+    );
+    if (injectedStyle) {
+      injectedStyle.remove();
+    }
+  };
+
+  const openErrorsFullscreen = () => {
+    setFullscreenMode('errors');
+    hideHeader();
+  };
+
+  const openResponsesFullscreen = () => {
+    setFullscreenMode('responses');
+    hideHeader();
+  };
+
+  const closeFullscreen = () => {
+    setFullscreenMode(null);
+    showHeader();
+  };
+
+  if (!hasAnyContent) {
+    return (
+      <EuiEmptyPrompt
+        title={<h3>No console output</h3>}
+        titleSize="s"
+        body={
+          <EuiText size="s" color="subdued">
+            Errors and responses will appear here when you test your workflow.
+          </EuiText>
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          width: '100%',
+          maxWidth: '100%',
+          minWidth: 0,
+        }}
+      >
+        <EuiFlexGroup
+          direction="column"
+          gutterSize="s"
+          style={{
+            height: '100%',
+            overflow: 'hidden',
+            width: '100%',
+            maxWidth: '100%',
+            minWidth: 0,
+          }}
+        >
+          {hasErrors && (
+            <EuiFlexItem grow={false}>
+              <EuiAccordion
+                id="console-errors"
+                buttonContent={
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="s"
+                    responsive={false}
+                  >
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s">
+                        <strong>Errors</strong>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiBadge color="danger">{props.errorCount}</EuiBadge>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                }
+                extraAction={
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="none"
+                    responsive={false}
+                    style={{ height: '32px' }}
+                  >
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonIcon
+                        iconType="fullScreen"
+                        onClick={openErrorsFullscreen}
+                        aria-label="View errors in fullscreen"
+                        size="s"
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                }
+                initialIsOpen={true}
+                paddingSize="s"
+              >
+                <div
+                  style={{
+                    maxHeight: hasIngestResponse ? '15vh' : '25vh',
+                    minHeight: '100px',
+                    overflow: hasErrors ? 'auto' : 'hidden',
+                    width: '100%',
+                    maxWidth: '100%',
+                    minWidth: 0,
+                  }}
+                >
+                  <EuiFlexGroup
+                    direction="column"
+                    gutterSize="s"
+                    style={{ width: '100%', maxWidth: '100%', minWidth: 0 }}
+                  >
+                    {props.errorMessages.map((errorMessage, idx) => (
+                      <EuiFlexItem grow={false} key={idx}>
+                        <EuiCodeBlock
+                          fontSize="s"
+                          isCopyable={false}
+                          paddingSize="s"
+                          color="danger"
+                          style={{
+                            wordWrap: 'break-word',
+                            overflowWrap: 'break-word',
+                            margin: 0,
+                            maxHeight: 'none',
+                            height: 'auto',
+                            width: '100%',
+                            maxWidth: '100%',
+                            minWidth: 0,
+                            overflowX: 'hidden',
+                          }}
+                          whiteSpace="pre-wrap"
+                        >
+                          {errorMessage}
+                        </EuiCodeBlock>
+                      </EuiFlexItem>
+                    ))}
+                  </EuiFlexGroup>
+                </div>
+              </EuiAccordion>
+            </EuiFlexItem>
+          )}
+
+          {hasIngestResponse && (
+            <EuiFlexItem grow={true} style={{ minHeight: 0 }}>
+              <EuiAccordion
+                id="console-responses"
+                buttonContent={
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="s"
+                    responsive={false}
+                  >
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s">
+                        <strong>Responses</strong>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiBadge color="success">Success</EuiBadge>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                }
+                extraAction={
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="none"
+                    responsive={false}
+                    style={{ height: '32px' }}
+                  >
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonIcon
+                        iconType="fullScreen"
+                        onClick={openResponsesFullscreen}
+                        aria-label="View responses in fullscreen"
+                        size="s"
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                }
+                initialIsOpen={true}
+                paddingSize="s"
+              >
+                <div
+                  style={{
+                    height: hasErrors ? '12vh' : '22vh',
+                    minHeight: '100px',
+                    overflow: hasIngestResponse ? 'auto' : 'hidden',
+                    width: '100%',
+                    maxWidth: '100%',
+                    minWidth: 0,
+                  }}
+                >
+                  <EuiCodeBlock
+                    language="json"
+                    fontSize="s"
+                    isCopyable={false}
+                    paddingSize="s"
+                    style={{
+                      height: '100%',
+                      wordWrap: 'break-word',
+                      overflowWrap: 'break-word',
+                      margin: 0,
+                      width: '100%',
+                      maxWidth: '100%',
+                      minWidth: 0,
+                      overflowX: 'hidden',
+                    }}
+                    whiteSpace="pre-wrap"
+                  >
+                    {props.ingestResponse}
+                  </EuiCodeBlock>
+                </div>
+              </EuiAccordion>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </div>
+
+      {fullscreenMode === 'responses' && (
+        <>
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              width: '100vw',
+              height: '100vh',
+              backgroundColor: themeColors.backgroundColor,
+              color: themeColors.textColor,
+              zIndex: 999999,
+              padding: '20px',
+              overflow: 'auto',
+              boxSizing: 'border-box',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <pre
+              style={{
+                marginTop: '0px',
+                fontFamily: 'monospace',
+                fontSize: '14px',
+                lineHeight: '1.4',
+                whiteSpace: 'pre-wrap',
+                wordWrap: 'break-word',
+                color: 'inherit',
+                backgroundColor: 'transparent',
+                border: 'none',
+                padding: '0',
+                margin: '0',
+                outline: 'none',
+              }}
+            >
+              {props.ingestResponse}
+            </pre>
+          </div>
+
+          <div
+            style={{
+              position: 'fixed',
+              top: '20px',
+              right: '20px',
+              zIndex: 2147483647,
+            }}
+          >
+            <span
+              onClick={closeFullscreen}
+              style={{
+                color: themeColors.textColor,
+                fontSize: '24px',
+                cursor: 'pointer',
+                userSelect: 'none',
+                display: 'block',
+              }}
+              title="Close fullscreen"
+            >
+              ✕
+            </span>
+          </div>
+        </>
+      )}
+
+      {fullscreenMode === 'errors' && (
+        <>
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              width: '100vw',
+              height: '100vh',
+              backgroundColor: themeColors.backgroundColor,
+              color: themeColors.textColor,
+              zIndex: 999999,
+              padding: '20px',
+              overflow: 'auto',
+              boxSizing: 'border-box',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ marginTop: '0px' }}>
+              {props.errorMessages.map((errorMessage, idx) => (
+                <pre
+                  key={idx}
+                  style={{
+                    fontFamily: 'monospace',
+                    fontSize: '14px',
+                    lineHeight: '1.4',
+                    whiteSpace: 'pre-wrap',
+                    wordWrap: 'break-word',
+                    color: 'inherit',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    padding: '0',
+                    margin: '0 0 16px 0',
+                    outline: 'none',
+                  }}
+                >
+                  {errorMessage}
+                </pre>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              position: 'fixed',
+              top: '20px',
+              right: '20px',
+              zIndex: 2147483647,
+            }}
+          >
+            <span
+              onClick={closeFullscreen}
+              style={{
+                color: themeColors.textColor,
+                fontSize: '24px',
+                cursor: 'pointer',
+                userSelect: 'none',
+                display: 'block',
+              }}
+              title="Close fullscreen"
+            >
+              ✕
+            </span>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/public/pages/workflow_detail/tools/console/index.ts b/public/pages/workflow_detail/tools/console/index.ts
new file mode 100644
index 00000000..abe9dc8a
--- /dev/null
+++ b/public/pages/workflow_detail/tools/console/index.ts
@@ -0,0 +1 @@
+export { Console } from './console';
diff --git a/public/pages/workflow_detail/tools/errors/errors.tsx b/public/pages/workflow_detail/tools/errors/errors.tsx
deleted file mode 100644
index ff9f461c..00000000
--- a/public/pages/workflow_detail/tools/errors/errors.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { ReactNode } from 'react';
-import {
-  EuiCodeBlock,
-  EuiEmptyPrompt,
-  EuiFlexItem,
-  EuiSpacer,
-} from '@elastic/eui';
-
-interface ErrorsProps {
-  errorMessages: (string | ReactNode)[];
-}
-
-/**
- * The basic errors component for the Tools panel.
- * Displays any errors found while users configure and test their workflow.
- */
-export function Errors(props: ErrorsProps) {
-  return (
-    <>
-      {props.errorMessages?.length === 0 ? (
-        <EuiEmptyPrompt title={<h2>No errors</h2>} titleSize="s" />
-      ) : (
-        <>
-          {props.errorMessages.map((errorMessage, idx) => {
-            return (
-              <EuiFlexItem grow={false} key={idx}>
-                <EuiSpacer size="m" />
-                <EuiCodeBlock
-                  fontSize="m"
-                  isCopyable={false}
-                  paddingSize="s"
-                  style={{
-                    flexGrow: 'false',
-                    wordWrap: 'break-word',
-                    overflowWrap: 'break-word',
-                  }}
-                  whiteSpace="pre-wrap"
-                >
-                  {errorMessage}
-                </EuiCodeBlock>
-              </EuiFlexItem>
-            );
-          })}
-        </>
-      )}
-    </>
-  );
-}
diff --git a/public/pages/workflow_detail/tools/errors/index.ts b/public/pages/workflow_detail/tools/errors/index.ts
deleted file mode 100644
index 28db1186..00000000
--- a/public/pages/workflow_detail/tools/errors/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { Errors } from './errors';
diff --git a/public/pages/workflow_detail/tools/ingest/index.ts b/public/pages/workflow_detail/tools/ingest/index.ts
deleted file mode 100644
index cef6b0f4..00000000
--- a/public/pages/workflow_detail/tools/ingest/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export { Ingest } from './ingest';
diff --git a/public/pages/workflow_detail/tools/ingest/ingest.tsx b/public/pages/workflow_detail/tools/ingest/ingest.tsx
deleted file mode 100644
index f2b3c8ec..00000000
--- a/public/pages/workflow_detail/tools/ingest/ingest.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { isEmpty } from 'lodash';
-import { EuiCodeEditor, EuiEmptyPrompt, EuiText } from '@elastic/eui';
-
-interface IngestProps {
-  ingestResponse: string;
-}
-
-/**
- * The basic ingest component for the Tools panel.
- * Displays a read-only view of the ingest response after users perform ingest.
- */
-export function Ingest(props: IngestProps) {
-  return (
-    // TODO: known issue with the editor where resizing the resizablecontainer does not
-    // trigger vertical scroll updates. Updating the window, or reloading the component
-    // by switching tabs etc. will refresh it correctly
-    <>
-      {isEmpty(props.ingestResponse) ? (
-        <EuiEmptyPrompt
-          title={<h2>No data</h2>}
-          titleSize="s"
-          body={
-            <>
-              <EuiText size="s">Run ingest and view the response here.</EuiText>
-            </>
-          }
-        />
-      ) : (
-        <EuiCodeEditor
-          mode="json"
-          theme="textmate"
-          width="100%"
-          height="100%"
-          value={props.ingestResponse}
-          readOnly={true}
-          setOptions={{
-            fontSize: '12px',
-            autoScrollEditorIntoView: true,
-            wrap: true,
-          }}
-          tabSize={2}
-        />
-      )}
-    </>
-  );
-}
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index 9e16e174..bbc1cecc 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactNode, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect, useState } from 'react';
 import { useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
 import {
@@ -15,7 +14,6 @@ import {
   EuiTabs,
   EuiText,
 } from '@elastic/eui';
-import { AppState } from '../../../store';
 import {
   customStringify,
   FETCH_ALL_QUERY,
@@ -29,10 +27,7 @@ import {
 } from '../../../../common';
 import { Resources } from './resources';
 import { Query } from './query';
-import { Ingest } from './ingest';
-import { Errors } from './errors';
 import {
-  formatProcessorError,
   hasProvisionedIngestResources,
   hasProvisionedSearchResources,
 } from '../../../utils';
@@ -40,7 +35,6 @@ import { Workspace } from '../workspace';
 
 interface ToolsProps {
   workflow?: Workflow;
-  ingestResponse: string;
   selectedTabId: INSPECTOR_TAB_ID;
   setSelectedTabId: (tabId: INSPECTOR_TAB_ID) => void;
   uiConfig?: WorkflowConfig;
@@ -53,17 +47,6 @@ const PANEL_TITLE = 'Inspect';
  */
 export function Tools(props: ToolsProps) {
   const [workspaceKey, setWorkspaceKey] = useState<number>(0);
-  // error message states. Error may come from several different sources.
-  const { opensearch, workflows } = useSelector((state: AppState) => state);
-  const opensearchError = opensearch.errorMessage;
-  const workflowsError = workflows.errorMessage;
-  const {
-    ingestPipeline: ingestPipelineErrors,
-    searchPipeline: searchPipelineErrors,
-  } = useSelector((state: AppState) => state.errors);
-  const [curErrorMessages, setCurErrorMessages] = useState<
-    (string | ReactNode)[]
-  >([]);
   const { values } = useFormikContext<WorkflowFormValues>();
 
   // Standalone / sandboxed search request state. Users can test things out
@@ -86,57 +69,6 @@ export function Tools(props: ToolsProps) {
   // query params state
   const [queryParams, setQueryParams] = useState<QueryParam[]>([]);
 
-  // Propagate any errors coming from opensearch API calls, including ingest/search pipeline verbose calls.
-  useEffect(() => {
-    if (
-      !isEmpty(opensearchError) ||
-      !isEmpty(ingestPipelineErrors) ||
-      !isEmpty(searchPipelineErrors)
-    ) {
-      if (!isEmpty(opensearchError)) {
-        setCurErrorMessages([opensearchError]);
-      } else if (!isEmpty(ingestPipelineErrors)) {
-        setCurErrorMessages([
-          'Data not ingested. Errors found with the following ingest processor(s):',
-          ...Object.values(ingestPipelineErrors).map((ingestPipelineError) =>
-            formatProcessorError(ingestPipelineError)
-          ),
-        ]);
-      } else if (!isEmpty(searchPipelineErrors)) {
-        setCurErrorMessages([
-          'Errors found with the following search processor(s)',
-          ...Object.values(searchPipelineErrors).map((searchPipelineError) =>
-            formatProcessorError(searchPipelineError)
-          ),
-        ]);
-      }
-    } else {
-      setCurErrorMessages([]);
-    }
-  }, [opensearchError, ingestPipelineErrors, searchPipelineErrors]);
-
-  // Propagate any errors coming from the workflow, either runtime from API call, or persisted in the indexed workflow itself.
-  useEffect(() => {
-    setCurErrorMessages(!isEmpty(workflowsError) ? [workflowsError] : []);
-  }, [workflowsError]);
-  useEffect(() => {
-    setCurErrorMessages(props.workflow?.error ? [props.workflow.error] : []);
-  }, [props.workflow?.error]);
-
-  // auto-navigate to errors tab if new errors have been found
-  useEffect(() => {
-    if (curErrorMessages.length > 0) {
-      props.setSelectedTabId(INSPECTOR_TAB_ID.ERRORS);
-    }
-  }, [curErrorMessages]);
-
-  // auto-navigate to ingest tab if a populated value has been set, indicating ingest has been ran
-  // useEffect(() => {
-  //   if (!isEmpty(props.ingestResponse)) {
-  //     props.setSelectedTabId(INSPECTOR_TAB_ID.INGEST);
-  //   }
-  // }, [props.ingestResponse]);
-
   // Force the workspace component to remount when the preview tab becomes active.
   // The graph cannot be rendered correctly in ReactFlow when initialized in a hidden container/inactive tab
   // See: https://reactflow.dev/learn/troubleshooting
@@ -203,9 +135,7 @@ export function Tools(props: ToolsProps) {
                     />
                   </div>
                 )}
-                {props.selectedTabId === INSPECTOR_TAB_ID.INGEST && (
-                  <Ingest ingestResponse={props.ingestResponse} />
-                )}
+
                 {props.selectedTabId === INSPECTOR_TAB_ID.TEST && (
                   <Query
                     uiConfig={props.uiConfig}
@@ -223,9 +153,7 @@ export function Tools(props: ToolsProps) {
                     setQueryParams={setQueryParams}
                   />
                 )}
-                {props.selectedTabId === INSPECTOR_TAB_ID.ERRORS && (
-                  <Errors errorMessages={curErrorMessages} />
-                )}
+
                 {props.selectedTabId === INSPECTOR_TAB_ID.RESOURCES && (
                   <Resources workflow={props.workflow} />
                 )}
diff --git a/public/pages/workflow_detail/workflow-detail-styles.scss b/public/pages/workflow_detail/workflow-detail-styles.scss
index dbf63165..823fbafb 100644
--- a/public/pages/workflow_detail/workflow-detail-styles.scss
+++ b/public/pages/workflow_detail/workflow-detail-styles.scss
@@ -8,3 +8,17 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.console-panel-no-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.console-panel-no-scroll::-webkit-scrollbar-track {
+  display: none;
+}
+
+.console-panel-no-scroll::-webkit-scrollbar-thumb {
+  display: none;
+}
diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx
index 884fd37f..a67eeac1 100644
--- a/public/pages/workflow_detail/workflow_detail.test.tsx
+++ b/public/pages/workflow_detail/workflow_detail.test.tsx
@@ -97,10 +97,9 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       expect(getByText('Close')).toBeInTheDocument();
       expect(getByText('Export')).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Test flow' })).toBeInTheDocument();
-      expect(getByRole('tab', { name: 'Ingest response' })).toBeInTheDocument();
-      expect(getByRole('tab', { name: 'Errors' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Preview' })).toBeInTheDocument();
+      expect(getAllByText('Console').length).toBeGreaterThan(0);
     });
   });
 });
@@ -150,7 +149,6 @@ describe('WorkflowDetail Page with skip ingestion option (Hybrid Search Workflow
   beforeEach(() => {
     jest.clearAllMocks();
   });
-
   test(`renders the WorkflowDetail page with skip ingestion option`, async () => {
     const { getByTestId } = renderWithRouter(
       workflowId,
diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
index 8a3b686c..1ee5299a 100644
--- a/public/pages/workflow_detail/workflow_detail.tsx
+++ b/public/pages/workflow_detail/workflow_detail.tsx
@@ -281,7 +281,15 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
         >
           <ReactFlowProvider>
             <EuiPage paddingSize="s">
-              <EuiPageBody className="workflow-detail stretch-relative">
+              {' '}
+              <EuiPageBody
+                className="workflow-detail stretch-relative"
+                style={{
+                  height: 'calc(100vh - 100px)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
                 <WorkflowDetailHeader
                   workflow={workflow}
                   uiConfig={uiConfig}
@@ -291,9 +299,10 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
                   direction="row"
                   gutterSize="xs"
                   style={{
-                    marginTop: USE_NEW_HOME_PAGE ? '0' : '-12px',
-                    height: '100%',
+                    marginTop: USE_NEW_HOME_PAGE ? '0' : '-24px',
+                    flex: 1,
                     gap: '4px',
+                    minHeight: 0,
                   }}
                 >
                   <EuiFlexItem>
diff --git a/public/utils/utils.tsx b/public/utils/utils.tsx
index f131ce0a..e6eeeaaf 100644
--- a/public/utils/utils.tsx
+++ b/public/utils/utils.tsx
@@ -1059,3 +1059,83 @@ export function getTransformedQuery(
   });
   return transformedQuery;
 }
+
+// Add this interface to your common/interfaces file or at the top of utils
+export interface ErrorAggregationResult {
+  errorMessages: (string | ReactNode)[];
+  errorCount: number;
+}
+
+export function aggregateConsoleErrors(
+  opensearchError: string | undefined,
+  workflowsError: string | undefined,
+  ingestPipelineErrors: IngestPipelineErrors,
+  searchPipelineErrors: SearchPipelineErrors,
+  workflowError: string | undefined
+): ErrorAggregationResult {
+  const errorMessages: (string | ReactNode)[] = [];
+  let errorCount = 0;
+
+  if (
+    !isEmpty(opensearchError) ||
+    !isEmpty(ingestPipelineErrors) ||
+    !isEmpty(searchPipelineErrors) ||
+    !isEmpty(workflowsError) ||
+    workflowError
+  ) {
+    if (!isEmpty(opensearchError)) {
+      errorMessages.push(opensearchError);
+      errorCount += 1;
+    }
+
+    if (!isEmpty(workflowsError)) {
+      errorMessages.push(workflowsError);
+      errorCount += 1;
+    }
+
+    if (workflowError) {
+      errorMessages.push(workflowError);
+      errorCount += 1;
+    }
+
+    if (!isEmpty(ingestPipelineErrors)) {
+      // Add header message (doesn't count as an error)
+      errorMessages.push(
+        'Data not ingested. Errors found with the following ingest processor(s):'
+      );
+      // Add actual errors (these count)
+      const ingestErrors = Object.values(ingestPipelineErrors).map((error) => {
+        const processorType = error.processorType
+          ? error.processorType.charAt(0).toUpperCase() +
+            error.processorType.slice(1)
+          : 'Unknown';
+        return `Processor type: ${processorType}\nError: ${
+          error.errorMsg || error.toString()
+        }`;
+      });
+      errorMessages.push(...ingestErrors);
+      errorCount += ingestErrors.length;
+    }
+
+    if (!isEmpty(searchPipelineErrors)) {
+      // Add header message (doesn't count as an error)
+      errorMessages.push(
+        'Errors found with the following search processor(s):'
+      );
+      // Add actual errors (these count)
+      const searchErrors = Object.values(searchPipelineErrors).map((error) => {
+        const processorType = error.processorType
+          ? error.processorType.charAt(0).toUpperCase() +
+            error.processorType.slice(1)
+          : 'Unknown';
+        return `Processor type: ${processorType}\nError: ${
+          error.errorMsg || error.toString()
+        }`;
+      });
+      errorMessages.push(...searchErrors);
+      errorCount += searchErrors.length;
+    }
+  }
+
+  return { errorMessages, errorCount };
+}