diff --git a/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx b/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
index 1fb23ffbc8897..f4b292280056d 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
@@ -26,7 +26,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 interface Props {
   getCurl: (cb: (text: string) => void) => void;
   getDocumentation: () => Promise<string | null>;
-  autoIndent: (ev: React.MouseEvent) => void;
+  autoIndent: (ev?: React.MouseEvent) => void;
 }
 
 interface State {
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/components/settings_modal.tsx b/src/legacy/core_plugins/console/np_ready/public/application/components/settings_modal.tsx
index 9ecfc1bc4d446..05afdc9b79e0f 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/components/settings_modal.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/components/settings_modal.tsx
@@ -41,7 +41,7 @@ import { DevToolsSettings } from '../../services';
 export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
 
 interface Props {
-  onSaveSettings: (newSettings: DevToolsSettings) => Promise<void>;
+  onSaveSettings: (newSettings: DevToolsSettings) => void;
   onClose: () => void;
   refreshAutocompleteSettings: (selectedSettings: any) => void;
   settings: DevToolsSettings;
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_context.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_context.tsx
new file mode 100644
index 0000000000000..aa04a5ff3dd96
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_context.tsx
@@ -0,0 +1,68 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { createContext, Dispatch, useContext, useReducer } from 'react';
+import { Action, reducer } from './reducer';
+import { DevToolsSettings } from '../../../../services';
+
+export interface ContextValue {
+  editorsReady: boolean;
+  settings: DevToolsSettings;
+}
+
+const EditorReadContext = createContext<ContextValue>(null as any);
+const EditorActionContext = createContext<Dispatch<Action>>(null as any);
+
+export interface EditorContextArgs {
+  children: any;
+  settings: DevToolsSettings;
+}
+
+const initialValue: ContextValue = {
+  editorsReady: false,
+  settings: null as any,
+};
+
+export function EditorContextProvider({ children, settings }: EditorContextArgs) {
+  const [state, dispatch] = useReducer(reducer, initialValue, value => ({
+    ...value,
+    settings,
+  }));
+  return (
+    <EditorReadContext.Provider value={state}>
+      <EditorActionContext.Provider value={dispatch}>{children}</EditorActionContext.Provider>
+    </EditorReadContext.Provider>
+  );
+}
+
+export const useEditorActionContext = () => {
+  const context = useContext(EditorActionContext);
+  if (context === undefined) {
+    throw new Error('useEditorActionContext must be used inside EditorActionContext');
+  }
+  return context;
+};
+
+export const useEditorReadContext = () => {
+  const context = useContext(EditorReadContext);
+  if (context === undefined) {
+    throw new Error('useEditorReadContext must be used inside EditorContextProvider');
+  }
+  return context;
+};
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_registry.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_registry.ts
new file mode 100644
index 0000000000000..6f14c6fc84150
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/editor_registry.ts
@@ -0,0 +1,42 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export class EditorRegistry {
+  inputEditor: any;
+  outputEditor: any;
+
+  setInputEditor(inputEditor: any) {
+    this.inputEditor = inputEditor;
+  }
+
+  setOutputEditor(outputEditor: any) {
+    this.outputEditor = outputEditor;
+  }
+
+  getInputEditor() {
+    return this.inputEditor;
+  }
+
+  getOutputEditor() {
+    return this.outputEditor;
+  }
+}
+
+// Create a single instance of this and use as private state.
+export const instance = new EditorRegistry();
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/index.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/index.ts
new file mode 100644
index 0000000000000..c6e059731332a
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {
+  EditorContextProvider,
+  useEditorReadContext,
+  useEditorActionContext,
+} from './editor_context';
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/reducer.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/reducer.ts
new file mode 100644
index 0000000000000..caed6b24c3c11
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/context/reducer.ts
@@ -0,0 +1,77 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Reducer } from 'react';
+
+import { instance as registry } from './editor_registry';
+import { ContextValue } from './editor_context';
+
+import { restoreRequestFromHistory } from '../legacy/console_history/restore_request_from_history';
+import {
+  sendCurrentRequestToES,
+  EsRequestArgs,
+} from '../legacy/console_editor/send_current_request_to_es';
+import { DevToolsSettings } from '../../../../services';
+
+export type Action =
+  | { type: 'setInputEditor'; value: any }
+  | { type: 'setOutputEditor'; value: any }
+  | { type: 'restoreRequest'; value: any }
+  | { type: 'updateSettings'; value: DevToolsSettings }
+  | { type: 'sendRequestToEs'; value: EsRequestArgs }
+  | { type: 'updateRequestHistory'; value: any };
+
+export const reducer: Reducer<ContextValue, Action> = (state, action) => {
+  const nextState = { ...state };
+
+  if (action.type === 'setInputEditor') {
+    registry.setInputEditor(action.value);
+    if (registry.getOutputEditor()) {
+      nextState.editorsReady = true;
+    }
+  }
+
+  if (action.type === 'setOutputEditor') {
+    registry.setOutputEditor(action.value);
+    if (registry.getInputEditor()) {
+      nextState.editorsReady = true;
+    }
+  }
+
+  if (action.type === 'restoreRequest') {
+    restoreRequestFromHistory(registry.getInputEditor(), action.value);
+  }
+
+  if (action.type === 'updateSettings') {
+    nextState.settings = action.value;
+  }
+
+  if (action.type === 'sendRequestToEs') {
+    const { callback, isPolling, isUsingTripleQuotes } = action.value;
+    sendCurrentRequestToES({
+      input: registry.getInputEditor(),
+      output: registry.getOutputEditor(),
+      callback,
+      isUsingTripleQuotes,
+      isPolling,
+    });
+  }
+
+  return nextState;
+};
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/index.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/index.ts
index 346b748e1be91..b3cab3d13b3a3 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/index.ts
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/index.ts
@@ -18,3 +18,4 @@
  */
 
 export { Editor, EditorOutput, ConsoleHistory, autoIndent, getDocumentation } from './legacy';
+export { useEditorActionContext, useEditorReadContext, EditorContextProvider } from './context';
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts
new file mode 100644
index 0000000000000..8445863b6dfc3
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DevToolsSettings } from '../../../../../services';
+
+export function applyCurrentSettings(editor: any, settings: DevToolsSettings) {
+  editor.getSession().setUseWrapMode(settings.wrapMode);
+  editor.$el.css('font-size', settings.fontSize + 'px');
+}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
index 0ce3d44caccd9..4dacaa739592e 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
@@ -27,16 +27,22 @@ import { EuiIcon } from '@elastic/eui';
 import { useAppContext } from '../../../../context';
 import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode';
 import { ConsoleMenu } from '../../../../components';
+
 import { autoIndent, getDocumentation } from '../console_menu_actions';
 import { registerCommands } from './keyboard_shortcuts';
+import { applyCurrentSettings } from './apply_editor_settings';
 
 // @ts-ignore
 import { initializeInput } from '../../../../../../../public/quarantined/src/input';
+// @ts-ignore
+import mappings from '../../../../../../../public/quarantined/src/mappings';
+
+import { useEditorActionContext, useEditorReadContext } from '../../context';
+import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
+import { loadRemoteState } from './load_remote_editor_state';
 
 export interface EditorProps {
-  onEditorReady?: (editor: any) => void;
-  sendCurrentRequest?: () => void;
-  docLinkVersion: string;
+  previousStateLocation?: 'stored' | string;
 }
 
 const abs: CSSProperties = {
@@ -47,11 +53,23 @@ const abs: CSSProperties = {
   right: '0',
 };
 
-function Component({ onEditorReady, docLinkVersion, sendCurrentRequest = () => {} }: EditorProps) {
+const DEFAULT_INPUT_VALUE = `GET _search
+{
+  "query": {
+    "match_all": {}
+  }
+}`;
+
+function _Editor({ previousStateLocation = 'stored' }: EditorProps) {
   const {
-    services: { history, settings },
+    services: { history },
+    ResizeChecker,
+    docLinkVersion,
   } = useAppContext();
 
+  const { settings } = useEditorReadContext();
+  const dispatch = useEditorActionContext();
+
   const editorRef = useRef<HTMLDivElement | null>(null);
   const actionsRef = useRef<HTMLDivElement | null>(null);
   const editorInstanceRef = useRef<any | null>(null);
@@ -70,21 +88,86 @@ function Component({ onEditorReady, docLinkVersion, sendCurrentRequest = () => {
   useEffect(() => {
     const $editor = $(editorRef.current!);
     const $actions = $(actionsRef.current!);
-    editorInstanceRef.current = initializeInput($editor, $actions, history, settings);
-    if (onEditorReady) {
-      onEditorReady({ editor: editorInstanceRef.current, element: editorRef.current! });
+    editorInstanceRef.current = initializeInput($editor, $actions);
+
+    if (previousStateLocation === 'stored') {
+      const { content } = history.getSavedEditorState() || {
+        content: DEFAULT_INPUT_VALUE,
+      };
+      editorInstanceRef.current.update(content);
+    } else {
+      loadRemoteState({ url: previousStateLocation, input: editorInstanceRef.current });
+    }
+
+    function setupAutosave() {
+      let timer: number;
+      const saveDelay = 500;
+
+      return editorInstanceRef.current.getSession().on('change', function onChange() {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = window.setTimeout(saveCurrentState, saveDelay);
+      });
+    }
+
+    function saveCurrentState() {
+      try {
+        const content = editorInstanceRef.current.getValue();
+        history.updateCurrentState(content);
+      } catch (e) {
+        // Ignoring saving error
+      }
     }
 
+    dispatch({
+      type: 'setInputEditor',
+      value: editorInstanceRef.current,
+    });
+
     setTextArea(editorRef.current!.querySelector('textarea'));
+
+    mappings.retrieveAutoCompleteInfo();
+
+    const unsubscribeResizer = subscribeResizeChecker(
+      ResizeChecker,
+      editorRef.current!,
+      editorInstanceRef.current
+    );
+    const unsubscribeAutoSave = setupAutosave();
+
+    return () => {
+      unsubscribeResizer();
+      unsubscribeAutoSave();
+      mappings.clearSubscriptions();
+    };
   }, []);
 
+  const sendCurrentRequestToES = () => {
+    dispatch({
+      type: 'sendRequestToEs',
+      value: {
+        isUsingTripleQuotes: settings.tripleQuotes,
+        isPolling: settings.polling,
+        callback: (esPath: any, esMethod: any, esData: any) =>
+          history.addToHistory(esPath, esMethod, esData),
+      },
+    });
+  };
+
+  useEffect(() => {
+    applyCurrentSettings(editorInstanceRef.current!, settings);
+    // Preserve legacy focus behavior after settings have updated.
+    editorInstanceRef.current!.focus();
+  }, [settings]);
+
   useEffect(() => {
     registerCommands({
       input: editorInstanceRef.current,
-      sendCurrentRequestToES: sendCurrentRequest,
+      sendCurrentRequestToES,
       openDocumentation,
     });
-  }, [sendCurrentRequest]);
+  }, []);
 
   return (
     <div style={abs} className="conApp">
@@ -97,7 +180,7 @@ function Component({ onEditorReady, docLinkVersion, sendCurrentRequest = () => {
             })}
           >
             <button
-              onClick={sendCurrentRequest}
+              onClick={sendCurrentRequestToES}
               data-test-subj="send-request-button"
               className="conApp__editorActionButton conApp__editorActionButton--success"
             >
@@ -127,4 +210,4 @@ function Component({ onEditorReady, docLinkVersion, sendCurrentRequest = () => {
   );
 }
 
-export const Editor = React.memo(Component);
+export const Editor = React.memo(_Editor);
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx
index 94e9162d46b03..fcf9f17e3ebd7 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor_output.tsx
@@ -22,24 +22,42 @@ import $ from 'jquery';
 // @ts-ignore
 import { initializeOutput } from '../../../../../../../public/quarantined/src/output';
 import { useAppContext } from '../../../../context';
+import { useEditorActionContext, useEditorReadContext } from '../../context';
+import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
+import { applyCurrentSettings } from './apply_editor_settings';
 
-export interface EditorOutputProps {
-  onReady?: (ref: any) => void;
-}
-
-function Component({ onReady }: EditorOutputProps) {
+function _EditorOuput() {
   const editorRef = useRef<null | HTMLDivElement>(null);
+  const editorInstanceRef = useRef<null | any>(null);
   const {
     services: { settings },
+    ResizeChecker,
   } = useAppContext();
 
+  const dispatch = useEditorActionContext();
+
+  const { settings: readOnlySettings } = useEditorReadContext();
+
   useEffect(() => {
     const editor$ = $(editorRef.current!);
-    const outputEditor = initializeOutput(editor$, settings);
-    if (onReady) {
-      onReady({ editor: outputEditor, element: editorRef.current! });
-    }
-  });
+    editorInstanceRef.current = initializeOutput(editor$, settings);
+    editorInstanceRef.current.update('');
+    const unsubscribe = subscribeResizeChecker(
+      ResizeChecker,
+      editorRef.current!,
+      editorInstanceRef.current
+    );
+
+    dispatch({ type: 'setOutputEditor', value: editorInstanceRef.current });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  useEffect(() => {
+    applyCurrentSettings(editorInstanceRef.current, readOnlySettings);
+  }, [readOnlySettings]);
 
   return (
     <div ref={editorRef} className="conApp__output" data-test-subj="response-editor">
@@ -48,4 +66,4 @@ function Component({ onReady }: EditorOutputProps) {
   );
 }
 
-export const EditorOutput = React.memo(Component);
+export const EditorOutput = React.memo(_EditorOuput);
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/__tests__/app.js b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.test.ts
similarity index 74%
rename from src/legacy/core_plugins/console/public/quarantined/src/__tests__/app.js
rename to src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.test.ts
index a1984bca3ab02..0eb6a8fec4f86 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/__tests__/app.js
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.test.ts
@@ -20,21 +20,16 @@
 import sinon from 'sinon';
 import $ from 'jquery';
 
-import mappings from '../mappings';
-import init from '../app';
+import { loadRemoteState } from './load_remote_editor_state';
 
-const history = { getSavedEditorState() {}, };
-
-describe('console app initialization', () => {
+describe('[Legacy Console] loading remote editor state', () => {
   const sandbox = sinon.createSandbox();
 
-  let inputMock;
-  let outputMock;
-  let ajaxDoneStub;
+  let inputMock: any;
+  let ajaxDoneStub: any;
   beforeEach(() => {
     ajaxDoneStub = sinon.stub();
-    sandbox.stub($, 'ajax').returns({ done: ajaxDoneStub });
-    sandbox.stub(mappings, 'retrieveAutoCompleteInfo');
+    sandbox.stub($, 'ajax').returns({ done: ajaxDoneStub } as any);
 
     inputMock = {
       update: sinon.stub(),
@@ -43,10 +38,6 @@ describe('console app initialization', () => {
       updateActionsBar: sinon.stub(),
       getSession: sinon.stub().returns({ on() {} }),
     };
-
-    outputMock = {
-      update: sinon.stub(),
-    };
   });
 
   afterEach(() => {
@@ -57,13 +48,17 @@ describe('console app initialization', () => {
     const mockContent = {};
     ajaxDoneStub.yields(mockContent);
 
-    init(inputMock, outputMock, history, 'https://state.link.com/content');
+    loadRemoteState({
+      input: inputMock,
+      url: 'https://state.link.com/content',
+    });
 
-    sinon.assert.calledOnce($.ajax);
-    sinon.assert.calledWithExactly($.ajax, {
+    sinon.assert.calledOnce($.ajax as any);
+    sinon.assert.calledWithExactly($.ajax as any, {
       url: 'https://state.link.com/content',
       dataType: 'text',
       kbnXsrfToken: false,
+      headers: {},
     });
 
     sinon.assert.calledTwice(inputMock.moveToNextRequestEdge);
@@ -72,19 +67,19 @@ describe('console app initialization', () => {
     sinon.assert.calledOnce(inputMock.updateActionsBar);
     sinon.assert.calledOnce(inputMock.update);
     sinon.assert.calledWithExactly(inputMock.update, sinon.match.same(mockContent));
-
-    sinon.assert.calledOnce(outputMock.update);
-    sinon.assert.calledWithExactly(outputMock.update, '');
   });
 
   it('correctly loads state from GitHub API HTTPS links.', () => {
     const mockContent = {};
     ajaxDoneStub.yields(mockContent);
 
-    init(inputMock, outputMock, history, 'https://api.github.com/content');
+    loadRemoteState({
+      input: inputMock,
+      url: 'https://api.github.com/content',
+    });
 
-    sinon.assert.calledOnce($.ajax);
-    sinon.assert.calledWithExactly($.ajax, {
+    sinon.assert.calledOnce($.ajax as any);
+    sinon.assert.calledWithExactly($.ajax as any, {
       url: 'https://api.github.com/content',
       dataType: 'text',
       kbnXsrfToken: false,
@@ -97,8 +92,5 @@ describe('console app initialization', () => {
     sinon.assert.calledOnce(inputMock.updateActionsBar);
     sinon.assert.calledOnce(inputMock.update);
     sinon.assert.calledWithExactly(inputMock.update, sinon.match.same(mockContent));
-
-    sinon.assert.calledOnce(outputMock.update);
-    sinon.assert.calledWithExactly(outputMock.update, '');
   });
 });
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.ts
new file mode 100644
index 0000000000000..b2f475036c5da
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/load_remote_editor_state.ts
@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import $ from 'jquery';
+
+// @ts-ignore
+// import mappings from '../../../../../../public/quarantined/src/mappings';
+
+/* eslint-disable no-console */
+
+export interface InitializationArgs {
+  url: string;
+  input: any;
+}
+
+export function loadRemoteState({ url, input }: InitializationArgs) {
+  const loadFrom = {
+    url,
+    // Having dataType here is required as it doesn't allow jQuery to `eval` content
+    // coming from the external source thereby preventing XSS attack.
+    dataType: 'text',
+    kbnXsrfToken: false,
+    headers: {},
+  };
+
+  if (/https?:\/\/api.github.com/.test(url)) {
+    loadFrom.headers = { Accept: 'application/vnd.github.v3.raw' };
+  }
+
+  $.ajax(loadFrom).done(data => {
+    input.update(data);
+    input.moveToNextRequestEdge(true);
+    input.highlightCurrentRequestsAndUpdateActionBar();
+    input.updateActionsBar();
+  });
+  input.moveToNextRequestEdge(true);
+}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/send_current_request_to_es.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/send_current_request_to_es.ts
new file mode 100644
index 0000000000000..d3abf9c92f48e
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/send_current_request_to_es.ts
@@ -0,0 +1,182 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// @ts-ignore
+import mappings from '../../../../../../../public/quarantined/src/mappings';
+// @ts-ignore
+import utils from '../../../../../../../public/quarantined/src/utils';
+// @ts-ignore
+import * as es from '../../../../../../../public/quarantined/src/es';
+
+export interface EsRequestArgs {
+  callback: (esPath: any, esMethod: any, esData: any) => void;
+  input?: any;
+  output?: any;
+  isPolling: boolean;
+  isUsingTripleQuotes: boolean;
+}
+
+let CURRENT_REQ_ID = 0;
+export function sendCurrentRequestToES({
+  callback,
+  input,
+  output,
+  isPolling,
+  isUsingTripleQuotes,
+}: EsRequestArgs) {
+  const reqId = ++CURRENT_REQ_ID;
+
+  input.getRequestsInRange((requests: any) => {
+    if (reqId !== CURRENT_REQ_ID) {
+      return;
+    }
+    if (output) {
+      output.update('');
+    }
+
+    if (requests.length === 0) {
+      return;
+    }
+
+    const isMultiRequest = requests.length > 1;
+    const finishChain = () => {
+      /* noop */
+    };
+
+    let isFirstRequest = true;
+
+    const sendNextRequest = () => {
+      if (reqId !== CURRENT_REQ_ID) {
+        return;
+      }
+      if (requests.length === 0) {
+        finishChain();
+        return;
+      }
+      const req = requests.shift();
+      const esPath = req.url;
+      const esMethod = req.method;
+      let esData = utils.collapseLiteralStrings(req.data.join('\n'));
+      if (esData) {
+        esData += '\n';
+      } // append a new line for bulk requests.
+
+      es.send(esMethod, esPath, esData).always(
+        (dataOrjqXHR: any, textStatus: string, jqXhrORerrorThrown: any) => {
+          if (reqId !== CURRENT_REQ_ID) {
+            return;
+          }
+
+          const xhr = dataOrjqXHR.promise ? dataOrjqXHR : jqXhrORerrorThrown;
+
+          function modeForContentType(contentType: string) {
+            if (contentType.indexOf('text/plain') >= 0) {
+              return 'ace/mode/text';
+            } else if (contentType.indexOf('application/yaml') >= 0) {
+              return 'ace/mode/yaml';
+            }
+            return null;
+          }
+
+          const isSuccess =
+            typeof xhr.status === 'number' &&
+            // Things like DELETE index where the index is not there are OK.
+            ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 404);
+
+          if (isSuccess) {
+            if (xhr.status !== 404 && isPolling) {
+              // If the user has submitted a request against ES, something in the fields, indices, aliases,
+              // or templates may have changed, so we'll need to update this data. Assume that if
+              // the user disables polling they're trying to optimize performance or otherwise
+              // preserve resources, so they won't want this request sent either.
+              mappings.retrieveAutoCompleteInfo();
+            }
+
+            let value = xhr.responseText;
+            const mode = modeForContentType(xhr.getAllResponseHeaders('Content-Type') || '');
+
+            // Apply triple quotes to output.
+            if (isUsingTripleQuotes && mode === null) {
+              // assume json - auto pretty
+              try {
+                value = utils.expandLiteralStrings(value);
+              } catch (e) {
+                // nothing to do here
+              }
+            }
+
+            const warnings = xhr.getResponseHeader('warning');
+            if (warnings) {
+              const deprecationMessages = utils.extractDeprecationMessages(warnings);
+              value = deprecationMessages.join('\n') + '\n' + value;
+            }
+
+            if (isMultiRequest) {
+              value = '# ' + req.method + ' ' + req.url + '\n' + value;
+            }
+
+            if (output) {
+              if (isFirstRequest) {
+                output.update(value, mode);
+              } else {
+                output.append('\n' + value);
+              }
+            }
+
+            isFirstRequest = false;
+            // single request terminate via sendNextRequest as well
+
+            callback(esPath, esMethod, esData);
+            sendNextRequest();
+          } else {
+            let value;
+            let mode;
+            if (xhr.responseText) {
+              value = xhr.responseText; // ES error should be shown
+              mode = modeForContentType(xhr.getAllResponseHeaders('Content-Type') || '');
+              if (value[0] === '{') {
+                try {
+                  value = JSON.stringify(JSON.parse(value), null, 2);
+                } catch (e) {
+                  // nothing to do here
+                }
+              }
+            } else {
+              value = 'Request failed to get to the server (status code: ' + xhr.status + ')';
+              mode = 'ace/mode/text';
+            }
+            if (isMultiRequest) {
+              value = '# ' + req.method + ' ' + req.url + '\n' + value;
+            }
+            if (output) {
+              if (isFirstRequest) {
+                output.update(value, mode);
+              } else {
+                output.append('\n' + value);
+              }
+            }
+            finishChain();
+          }
+        }
+      );
+    };
+
+    sendNextRequest();
+  });
+}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx
index b23ec67422c98..881b59e6b3a1c 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/console_history.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { memoize } from 'lodash';
 import moment from 'moment';
@@ -34,22 +34,30 @@ import {
 
 import { useAppContext } from '../../../../context';
 import { HistoryViewer } from './history_viewer';
+import { useEditorActionContext, useEditorReadContext } from '../../context';
 
 interface Props {
   close: () => void;
-  clearHistory: () => void;
-  restoreFromHistory: (req: any) => void;
-  requests: any[];
 }
 
 const CHILD_ELEMENT_PREFIX = 'historyReq';
 
-export function ConsoleHistory({ close, requests, clearHistory, restoreFromHistory }: Props) {
+export function ConsoleHistory({ close }: Props) {
   const {
-    services: { settings },
+    services: { history },
     ResizeChecker,
   } = useAppContext();
 
+  const dispatch = useEditorActionContext();
+  const { settings: readOnlySettings } = useEditorReadContext();
+
+  const [requests, setPastRequests] = useState<any[]>(history.getHistory());
+
+  const clearHistory = useCallback(() => {
+    history.clearHistory();
+    setPastRequests(history.getHistory());
+  }, []);
+
   const listRef = useRef<HTMLUListElement | null>(null);
 
   const [viewingReq, setViewingReq] = useState<any>(null);
@@ -96,13 +104,18 @@ export function ConsoleHistory({ close, requests, clearHistory, restoreFromHisto
   };
 
   const restore = (req: any = selectedReq.current) => {
-    restoreFromHistory(req);
+    dispatch({ type: 'restoreRequest', value: req });
   };
 
   useEffect(() => {
     initialize();
   }, [requests]);
 
+  useEffect(() => {
+    const done = history.change(setPastRequests);
+    return () => done();
+  }, []);
+
   /* eslint-disable */
   return (
     <>
@@ -184,7 +197,11 @@ export function ConsoleHistory({ close, requests, clearHistory, restoreFromHisto
 
           <div className="conHistory__body__spacer" />
 
-          <HistoryViewer settings={settings} req={viewingReq} ResizeChecker={ResizeChecker} />
+          <HistoryViewer
+            settings={readOnlySettings}
+            req={viewingReq}
+            ResizeChecker={ResizeChecker}
+          />
         </div>
 
         <EuiSpacer size="s" />
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx
index b8f857299a219..d531e143a79d0 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/history_viewer.tsx
@@ -21,14 +21,15 @@ import React, { useEffect, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import $ from 'jquery';
 
-import { Settings } from '../../../../../services';
+import { DevToolsSettings } from '../../../../../services';
 import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
 
 // @ts-ignore
 import SenseEditor from '../../../../../../../public/quarantined/src/sense_editor/editor';
+import { applyCurrentSettings } from '../console_editor/apply_editor_settings';
 
 interface Props {
-  settings: Settings;
+  settings: DevToolsSettings;
   req: any | null;
   ResizeChecker: any;
 }
@@ -43,10 +44,13 @@ export function HistoryViewer({ settings, ResizeChecker, req }: Props) {
     viewer.renderer.setShowPrintMargin(false);
     viewer.$blockScrolling = Infinity;
     const unsubscribe = subscribeResizeChecker(ResizeChecker, divRef.current!, viewer);
-    settings.applyCurrentSettings(viewer);
     return () => unsubscribe();
   }, []);
 
+  useEffect(() => {
+    applyCurrentSettings(viewerRef.current!, settings);
+  }, [settings]);
+
   if (viewerRef.current) {
     const { current: viewer } = viewerRef;
     if (req) {
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/restore_request_from_history.ts b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/restore_request_from_history.ts
new file mode 100644
index 0000000000000..f7f691e083ca2
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_history/restore_request_from_history.ts
@@ -0,0 +1,50 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function restoreRequestFromHistory(input: any, req: any) {
+  const session = input.getSession();
+  let pos = input.getCursorPosition();
+  let prefix = '';
+  let suffix = '\n';
+  if (input.parser.isStartRequestRow(pos.row)) {
+    pos.column = 0;
+    suffix += '\n';
+  } else if (input.parser.isEndRequestRow(pos.row)) {
+    const line = session.getLine(pos.row);
+    pos.column = line.length;
+    prefix = '\n\n';
+  } else if (input.parser.isInBetweenRequestsRow(pos.row)) {
+    pos.column = 0;
+  } else {
+    pos = input.nextRequestEnd(pos);
+    prefix = '\n\n';
+  }
+
+  let s = prefix + req.method + ' ' + req.endpoint;
+  if (req.data) {
+    s += '\n' + req.data;
+  }
+
+  s += suffix;
+
+  session.insert(pos, s);
+  input.clearSelection();
+  input.moveCursorTo(pos.row + prefix.length, 0);
+  input.focus();
+}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
index c29a19df3772a..d7b369cc26481 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
@@ -17,53 +17,33 @@
  * under the License.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { debounce } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-
-// @ts-ignore
-import mappings from '../../../../../public/quarantined/src/mappings';
-// @ts-ignore
-import init from '../../../../../public/quarantined/src/app';
 
 import { EditorOutput, Editor, ConsoleHistory } from '../editor';
-import { subscribeResizeChecker } from '../editor/legacy/subscribe_console_resize_checker';
+import { Settings } from '../settings';
+
+// TODO: find out what this is: $(document.body).removeClass('fouc');
 
-import {
-  AutocompleteOptions,
-  TopNavMenu,
-  WelcomePanel,
-  DevToolsSettingsModal,
-  HelpPanel,
-  PanelsContainer,
-  Panel,
-} from '../../components';
+import { TopNavMenu, WelcomePanel, HelpPanel, PanelsContainer, Panel } from '../../components';
 
 import { useAppContext } from '../../context';
-import { StorageKeys, DevToolsSettings } from '../../../services';
+import { StorageKeys } from '../../../services';
 
 import { getTopNavConfig } from './get_top_nav';
+import { useEditorReadContext } from '../editor';
 
 const INITIAL_PANEL_WIDTH = 50;
 const PANEL_MIN_WIDTH = '100px';
 
-// We only run certain initialization after we know all our editors have
-// been instantiated -- which is what we use the below streams for.
-const inputReadySubject$ = new BehaviorSubject<any>(null);
-const outputReadySubject$ = new BehaviorSubject<any>(null);
-const editorsReady$ = combineLatest(inputReadySubject$, outputReadySubject$);
-
 export function Main() {
   const {
-    services: { storage, settings, history },
-    docLinkVersion,
-    ResizeChecker,
+    services: { storage },
   } = useAppContext();
 
-  const [editorReady, setEditorReady] = useState<boolean>(false);
-  const [inputEditor, setInputEditor] = useState<any>(null);
-  const [outputEditor, setOutputEditor] = useState<any>(null);
+  const { editorsReady } = useEditorReadContext();
+
   const [showWelcome, setShowWelcomePanel] = useState(
     () => storage.get('version_welcome_shown') !== '@@SENSE_REVISION'
   );
@@ -74,14 +54,6 @@ export function Main() {
 
   const containerRef = useRef<null | HTMLDivElement>(null);
 
-  const onInputEditorReady = useCallback((value: any) => {
-    inputReadySubject$.next(value);
-  }, []);
-
-  const onOutputEditorReady = useCallback((value: any) => {
-    outputReadySubject$.next(value);
-  }, []);
-
   const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
     INITIAL_PANEL_WIDTH,
     INITIAL_PANEL_WIDTH,
@@ -94,117 +66,10 @@ export function Main() {
     []
   );
 
-  const [pastRequests, setPastRequests] = useState<any[]>(() => history.getHistory());
-
-  const sendCurrentRequest = useCallback(() => {
-    inputEditor.focus();
-    inputEditor.sendCurrentRequestToES(() => {
-      setPastRequests(history.getHistory());
-    }, outputEditor);
-  }, [inputEditor, outputEditor]);
-
-  const clearHistory = useCallback(() => {
-    history.clearHistory();
-    setPastRequests(history.getHistory());
-  }, []);
-
-  const restoreFromHistory = useCallback((req: any) => {
-    history.restoreFromHistory(req);
-  }, []);
-
   const renderConsoleHistory = () => {
-    return editorReady ? (
-      <ConsoleHistory
-        restoreFromHistory={restoreFromHistory}
-        clearHistory={clearHistory}
-        requests={pastRequests}
-        close={() => setShowHistory(false)}
-      />
-    ) : null;
-  };
-
-  const refreshAutocompleteSettings = (selectedSettings: any) => {
-    mappings.retrieveAutoCompleteInfo(selectedSettings);
-  };
-
-  const getAutocompleteDiff = (newSettings: DevToolsSettings, prevSettings: DevToolsSettings) => {
-    return Object.keys(newSettings.autocomplete).filter(key => {
-      // @ts-ignore
-      return prevSettings.autocomplete[key] !== newSettings.autocomplete[key];
-    });
+    return editorsReady ? <ConsoleHistory close={() => setShowHistory(false)} /> : null;
   };
 
-  const fetchAutocompleteSettingsIfNeeded = (
-    newSettings: DevToolsSettings,
-    prevSettings: DevToolsSettings
-  ) => {
-    // We'll only retrieve settings if polling is on. The expectation here is that if the user
-    // disables polling it's because they want manual control over the fetch request (possibly
-    // because it's a very expensive request given their cluster and bandwidth). In that case,
-    // they would be unhappy with any request that's sent automatically.
-    if (newSettings.polling) {
-      const autocompleteDiff = getAutocompleteDiff(newSettings, prevSettings);
-
-      const isSettingsChanged = autocompleteDiff.length > 0;
-      const isPollingChanged = prevSettings.polling !== newSettings.polling;
-
-      if (isSettingsChanged) {
-        // If the user has changed one of the autocomplete settings, then we'll fetch just the
-        // ones which have changed.
-        const changedSettings: any = autocompleteDiff.reduce(
-          (changedSettingsAccum: any, setting: string): any => {
-            changedSettingsAccum[setting] =
-              newSettings.autocomplete[setting as AutocompleteOptions];
-            return changedSettingsAccum;
-          },
-          {}
-        );
-        mappings.retrieveAutoCompleteInfo(changedSettings.autocomplete);
-      } else if (isPollingChanged) {
-        // If the user has turned polling on, then we'll fetch all selected autocomplete settings.
-        mappings.retrieveAutoCompleteInfo();
-      }
-    }
-  };
-
-  const onSaveSettings = async (newSettings: DevToolsSettings) => {
-    const prevSettings = settings.getCurrentSettings();
-    settings.updateSettings(newSettings);
-    fetchAutocompleteSettingsIfNeeded(newSettings, prevSettings);
-    setShowSettings(false);
-  };
-
-  useEffect(() => {
-    let resizerSubscriptions: Array<() => void> = [];
-    const readySubscription = editorsReady$.subscribe(([input, output]) => {
-      settings.registerOutput(output.editor);
-      settings.registerInput(input.editor);
-      history.setEditor(input.editor);
-
-      init(input.editor, output.editor, history);
-
-      // This may kick of a polling mechanic, needs to be refactored to more
-      // standard subscription pattern.
-      mappings.retrieveAutoCompleteInfo();
-
-      resizerSubscriptions = resizerSubscriptions.concat([
-        subscribeResizeChecker(ResizeChecker, containerRef.current!, input.editor, output.editor),
-        subscribeResizeChecker(ResizeChecker, input.element, input.editor),
-        subscribeResizeChecker(ResizeChecker, output.element, output.editor),
-      ]);
-
-      setInputEditor(input.editor);
-      setOutputEditor(output.editor);
-      setEditorReady(true);
-    });
-
-    return () => {
-      resizerSubscriptions.map(done => done());
-      readySubscription.unsubscribe();
-      mappings.clearSubscriptions();
-    };
-  }, []);
-
   return (
     <div className="consoleContainer" style={{ height: '100%', width: '100%' }} ref={containerRef}>
       <EuiFlexGroup
@@ -229,17 +94,13 @@ export function Main() {
               style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
               initialWidth={firstPanelWidth + '%'}
             >
-              <Editor
-                sendCurrentRequest={sendCurrentRequest}
-                onEditorReady={onInputEditorReady}
-                docLinkVersion={docLinkVersion}
-              />
+              <Editor />
             </Panel>
             <Panel
               style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
               initialWidth={secondPanelWidth + '%'}
             >
-              <EditorOutput onReady={onOutputEditorReady} />
+              <EditorOutput />
             </Panel>
           </PanelsContainer>
         </EuiFlexItem>
@@ -254,14 +115,7 @@ export function Main() {
         />
       ) : null}
 
-      {showSettings ? (
-        <DevToolsSettingsModal
-          onSaveSettings={onSaveSettings}
-          onClose={() => setShowSettings(false)}
-          refreshAutocompleteSettings={refreshAutocompleteSettings}
-          settings={settings.getCurrentSettings()}
-        />
-      ) : null}
+      {showSettings ? <Settings onClose={() => setShowSettings(false)} /> : null}
 
       {showHelp ? <HelpPanel onClose={() => setShowHelp(false)} /> : null}
     </div>
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/settings.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/settings.tsx
new file mode 100644
index 0000000000000..d794dc9302c25
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/settings.tsx
@@ -0,0 +1,106 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+import { AutocompleteOptions, DevToolsSettingsModal } from '../components';
+
+// @ts-ignore
+import mappings from '../../../../public/quarantined/src/mappings';
+import { useAppContext } from '../context';
+import { DevToolsSettings } from '../../services';
+import { useEditorActionContext } from './editor/context';
+
+const getAutocompleteDiff = (newSettings: DevToolsSettings, prevSettings: DevToolsSettings) => {
+  return Object.keys(newSettings.autocomplete).filter(key => {
+    // @ts-ignore
+    return prevSettings.autocomplete[key] !== newSettings.autocomplete[key];
+  });
+};
+
+const refreshAutocompleteSettings = (selectedSettings: any) => {
+  mappings.retrieveAutoCompleteInfo(selectedSettings);
+};
+
+const fetchAutocompleteSettingsIfNeeded = (
+  newSettings: DevToolsSettings,
+  prevSettings: DevToolsSettings
+) => {
+  // We'll only retrieve settings if polling is on. The expectation here is that if the user
+  // disables polling it's because they want manual control over the fetch request (possibly
+  // because it's a very expensive request given their cluster and bandwidth). In that case,
+  // they would be unhappy with any request that's sent automatically.
+  if (newSettings.polling) {
+    const autocompleteDiff = getAutocompleteDiff(newSettings, prevSettings);
+
+    const isSettingsChanged = autocompleteDiff.length > 0;
+    const isPollingChanged = prevSettings.polling !== newSettings.polling;
+
+    if (isSettingsChanged) {
+      // If the user has changed one of the autocomplete settings, then we'll fetch just the
+      // ones which have changed.
+      const changedSettings: any = autocompleteDiff.reduce(
+        (changedSettingsAccum: any, setting: string): any => {
+          changedSettingsAccum[setting] = newSettings.autocomplete[setting as AutocompleteOptions];
+          return changedSettingsAccum;
+        },
+        {}
+      );
+      mappings.retrieveAutoCompleteInfo(changedSettings.autocomplete);
+    } else if (isPollingChanged) {
+      // If the user has turned polling on, then we'll fetch all selected autocomplete settings.
+      mappings.retrieveAutoCompleteInfo();
+    }
+  }
+};
+
+export interface Props {
+  onClose: () => void;
+}
+
+export function Settings({ onClose }: Props) {
+  const {
+    services: { settings },
+  } = useAppContext();
+
+  const dispatch = useEditorActionContext();
+
+  const onSaveSettings = (newSettings: DevToolsSettings) => {
+    const prevSettings = settings.toJSON();
+    fetchAutocompleteSettingsIfNeeded(newSettings, prevSettings);
+
+    // Update the new settings in localStorage
+    settings.updateSettings(newSettings);
+
+    // Let the rest of the application know settings have updated.
+    dispatch({
+      type: 'updateSettings',
+      value: newSettings,
+    });
+    onClose();
+  };
+
+  return (
+    <DevToolsSettingsModal
+      onClose={onClose}
+      onSaveSettings={onSaveSettings}
+      refreshAutocompleteSettings={refreshAutocompleteSettings}
+      settings={settings.toJSON()}
+    />
+  );
+}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/index.tsx b/src/legacy/core_plugins/console/np_ready/public/application/index.tsx
index 5fb6e05aa9234..fe8a1e4b94131 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/index.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/index.tsx
@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { AppContextProvider } from './context';
+import { EditorContextProvider } from './containers/editor/context';
 import { Main } from './containers';
 import { createStorage, createHistory, createSettings, Settings } from '../services';
 
@@ -43,7 +44,9 @@ export function boot(deps: { docLinkVersion: string; I18nContext: any; ResizeChe
       <AppContextProvider
         value={{ ...deps, services: { storage, history, settings }, ResizeChecker }}
       >
-        <Main />
+        <EditorContextProvider settings={settings.toJSON()}>
+          <Main />
+        </EditorContextProvider>
       </AppContextProvider>
     </I18nContext>
   );
diff --git a/src/legacy/core_plugins/console/np_ready/public/services/history.ts b/src/legacy/core_plugins/console/np_ready/public/services/history.ts
index fba33feb101b1..6cb6f7ba35cd4 100644
--- a/src/legacy/core_plugins/console/np_ready/public/services/history.ts
+++ b/src/legacy/core_plugins/console/np_ready/public/services/history.ts
@@ -17,51 +17,13 @@
  * under the License.
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { Storage } from './index';
 
 export class History {
-  private editor: any;
-
   constructor(private readonly storage: Storage) {}
 
-  setEditor(editor: any) {
-    this.editor = editor;
-  }
-
-  // stupid simple restore function, called when the user
-  // chooses to restore a request from the history
-  // PREVENTS history from needing to know about the input
-  restoreFromHistory(req: any) {
-    const session = this.editor.getSession();
-    let pos = this.editor.getCursorPosition();
-    let prefix = '';
-    let suffix = '\n';
-    if (this.editor.parser.isStartRequestRow(pos.row)) {
-      pos.column = 0;
-      suffix += '\n';
-    } else if (this.editor.parser.isEndRequestRow(pos.row)) {
-      const line = session.getLine(pos.row);
-      pos.column = line.length;
-      prefix = '\n\n';
-    } else if (this.editor.parser.isInBetweenRequestsRow(pos.row)) {
-      pos.column = 0;
-    } else {
-      pos = this.editor.nextRequestEnd(pos);
-      prefix = '\n\n';
-    }
-
-    let s = prefix + req.method + ' ' + req.endpoint;
-    if (req.data) {
-      s += '\n' + req.data;
-    }
-
-    s += suffix;
-
-    session.insert(pos, s);
-    this.editor.clearSelection();
-    this.editor.moveCursorTo(pos.row + prefix.length, 0);
-    this.editor.focus();
-  }
+  private changeEmitter = new BehaviorSubject<any[]>(this.getHistory() || []);
 
   getHistoryKeys() {
     return this.storage
@@ -75,11 +37,21 @@ export class History {
     return this.getHistoryKeys().map(key => this.storage.get(key));
   }
 
+  // This is used as an optimization mechanism so that different components
+  // can listen for changes to history and update because changes to history can
+  // be triggered from different places in the app. The alternative would be to store
+  // this in state so that we hook into the React model, but it would require loading history
+  // every time the application starts even if a user is not going to view history.
+  change(listener: (reqs: any[]) => void) {
+    const subscription = this.changeEmitter.subscribe(listener);
+    return () => subscription.unsubscribe();
+  }
+
   addToHistory(endpoint: string, method: string, data: any) {
     const keys = this.getHistoryKeys();
     keys.splice(0, 500); // only maintain most recent X;
-    $.each(keys, (i, k) => {
-      this.storage.delete(k);
+    keys.forEach(key => {
+      this.storage.delete(key);
     });
 
     const timestamp = new Date().getTime();
@@ -90,6 +62,8 @@ export class History {
       method,
       data,
     });
+
+    this.changeEmitter.next(this.getHistory());
   }
 
   updateCurrentState(content: any) {
diff --git a/src/legacy/core_plugins/console/np_ready/public/services/settings.ts b/src/legacy/core_plugins/console/np_ready/public/services/settings.ts
index 5986a8e0eddde..e7974cc226730 100644
--- a/src/legacy/core_plugins/console/np_ready/public/services/settings.ts
+++ b/src/legacy/core_plugins/console/np_ready/public/services/settings.ts
@@ -32,31 +32,14 @@ export interface DevToolsSettings {
 }
 
 export class Settings {
-  private input: any | null = null;
-  private output: any | null = null;
-
   constructor(private readonly storage: Storage) {}
 
-  /**
-   * TODO: Slight hackiness going on here - late registration of dependencies should be refactored
-   */
-  registerInput(input: any) {
-    this.input = input;
-  }
-  /**
-   * TODO: Slight hackiness going on here - late registration of dependencies should be refactored
-   */
-  registerOutput(output: any) {
-    this.output = output;
-  }
-
   getFontSize() {
     return this.storage.get('font_size', 14);
   }
 
   setFontSize(size: any) {
     this.storage.set('font_size', size);
-    this.applyCurrentSettings();
     return true;
   }
 
@@ -66,7 +49,6 @@ export class Settings {
 
   setWrapMode(mode: any) {
     this.storage.set('wrap_mode', mode);
-    this.applyCurrentSettings();
     return true;
   }
 
@@ -98,21 +80,10 @@ export class Settings {
 
   setPolling(polling: any) {
     this.storage.set('console_polling', polling);
-    this.applyCurrentSettings();
     return true;
   }
 
-  applyCurrentSettings(editor?: any) {
-    if (typeof editor === 'undefined') {
-      if (this.input) this.applyCurrentSettings(this.input);
-      if (this.output) this.applyCurrentSettings(this.output);
-    } else if (editor) {
-      editor.getSession().setUseWrapMode(this.getWrapMode());
-      editor.$el.css('font-size', this.getFontSize() + 'px');
-    }
-  }
-
-  getCurrentSettings(): DevToolsSettings {
+  toJSON(): DevToolsSettings {
     return {
       autocomplete: this.getAutocomplete(),
       wrapMode: this.getWrapMode(),
@@ -122,14 +93,12 @@ export class Settings {
     };
   }
 
-  updateSettings({ fontSize, wrapMode, tripleQuotes, autocomplete, polling }: any) {
+  updateSettings({ fontSize, wrapMode, tripleQuotes, autocomplete, polling }: DevToolsSettings) {
     this.setFontSize(fontSize);
     this.setWrapMode(wrapMode);
     this.setTripleQuotes(tripleQuotes);
     this.setAutocomplete(autocomplete);
     this.setPolling(polling);
-    this.input.focus();
-    return this.getCurrentSettings();
   }
 }
 
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/input.js b/src/legacy/core_plugins/console/public/quarantined/src/input.js
index 89672a5823ad5..12db9100230ba 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/input.js
+++ b/src/legacy/core_plugins/console/public/quarantined/src/input.js
@@ -18,180 +18,21 @@
  */
 
 import Autocomplete from './autocomplete';
-import mappings from './mappings';
 const SenseEditor = require('./sense_editor/editor');
-const utils = require('./utils');
-const es = require('./es');
 
 let input;
-export function initializeInput($el, $actionsEl, history, settings) {
+export function initializeInput($el, $actionsEl) {
   input = new SenseEditor($el);
 
   input.autocomplete = new Autocomplete(input);
-
   input.$actions = $actionsEl;
 
-  /**
-   * Setup the "send" shortcut
-   */
-
-  let CURRENT_REQ_ID = 0;
-
-  function sendCurrentRequestToES(addedToHistoryCb, output) {
-    const reqId = ++CURRENT_REQ_ID;
-
-    input.getRequestsInRange(requests => {
-      if (reqId !== CURRENT_REQ_ID) {
-        return;
-      }
-      if (output) {
-        output.update('');
-      }
-
-      if (requests.length === 0) {
-        return;
-      }
-
-      const isMultiRequest = requests.length > 1;
-      const finishChain = () => {
-        /* noop */
-      };
-
-      let isFirstRequest = true;
-
-      const sendNextRequest = () => {
-        if (reqId !== CURRENT_REQ_ID) {
-          return;
-        }
-        if (requests.length === 0) {
-          finishChain();
-          return;
-        }
-        const req = requests.shift();
-        const esPath = req.url;
-        const esMethod = req.method;
-        let esData = utils.collapseLiteralStrings(req.data.join('\n'));
-        if (esData) {
-          esData += '\n';
-        } //append a new line for bulk requests.
-
-        es.send(esMethod, esPath, esData).always((dataOrjqXHR, textStatus, jqXhrORerrorThrown) => {
-          if (reqId !== CURRENT_REQ_ID) {
-            return;
-          }
-
-          const xhr = dataOrjqXHR.promise ? dataOrjqXHR : jqXhrORerrorThrown;
-
-          function modeForContentType(contentType) {
-            if (contentType.indexOf('text/plain') >= 0) {
-              return 'ace/mode/text';
-            } else if (contentType.indexOf('application/yaml') >= 0) {
-              return 'ace/mode/yaml';
-            }
-            return null;
-          }
-
-          const isSuccess =
-            typeof xhr.status === 'number' &&
-            // Things like DELETE index where the index is not there are OK.
-            ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 404);
-
-          if (isSuccess) {
-            if (xhr.status !== 404 && settings.getPolling()) {
-              // If the user has submitted a request against ES, something in the fields, indices, aliases,
-              // or templates may have changed, so we'll need to update this data. Assume that if
-              // the user disables polling they're trying to optimize performance or otherwise
-              // preserve resources, so they won't want this request sent either.
-              mappings.retrieveAutoCompleteInfo();
-            }
-
-            // we have someone on the other side. Add to history
-            history.addToHistory(esPath, esMethod, esData);
-            if (addedToHistoryCb) {
-              addedToHistoryCb();
-            }
-
-            let value = xhr.responseText;
-            const mode = modeForContentType(xhr.getAllResponseHeaders('Content-Type') || '');
-
-            // Apply triple quotes to output.
-            if (settings.getTripleQuotes() && (mode === null || mode === 'application/json')) {
-              // assume json - auto pretty
-              try {
-                value = utils.expandLiteralStrings(value);
-              } catch (e) {
-                // nothing to do here
-              }
-            }
-
-            const warnings = xhr.getResponseHeader('warning');
-            if (warnings) {
-              const deprecationMessages = utils.extractDeprecationMessages(warnings);
-              value = deprecationMessages.join('\n') + '\n' + value;
-            }
-
-            if (isMultiRequest) {
-              value = '# ' + req.method + ' ' + req.url + '\n' + value;
-            }
-
-            if (output) {
-              if (isFirstRequest) {
-                output.update(value, mode);
-              } else {
-                output.append('\n' + value);
-              }
-            }
-
-            isFirstRequest = false;
-            // single request terminate via sendNextRequest as well
-            sendNextRequest();
-          } else {
-            let value;
-            let mode;
-            if (xhr.responseText) {
-              value = xhr.responseText; // ES error should be shown
-              mode = modeForContentType(xhr.getAllResponseHeaders('Content-Type') || '');
-              if (value[0] === '{') {
-                try {
-                  value = JSON.stringify(JSON.parse(value), null, 2);
-                } catch (e) {
-                  // nothing to do here
-                }
-              }
-            } else {
-              value = 'Request failed to get to the server (status code: ' + xhr.status + ')';
-              mode = 'ace/mode/text';
-            }
-            if (isMultiRequest) {
-              value = '# ' + req.method + ' ' + req.url + '\n' + value;
-            }
-            if (output) {
-              if (isFirstRequest) {
-                output.update(value, mode);
-              } else {
-                output.append('\n' + value);
-              }
-            }
-            finishChain();
-          }
-        });
-      };
-
-      sendNextRequest();
-    });
-  }
-
   /**
    * Init the editor
    */
-  if (settings) {
-    settings.applyCurrentSettings(input);
-  }
   input.focus();
   input.highlightCurrentRequestsAndUpdateActionBar();
 
-  input.sendCurrentRequestToES = sendCurrentRequestToES;
-
   return input;
 }
 
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/output.js b/src/legacy/core_plugins/console/public/quarantined/src/output.js
index d5ffe736e2dbe..42555f17f19c1 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/output.js
+++ b/src/legacy/core_plugins/console/public/quarantined/src/output.js
@@ -23,7 +23,7 @@ const OutputMode = require('./sense_editor/mode/output');
 const smartResize = require('./smart_resize');
 
 let output;
-export function initializeOutput($el, settings) {
+export function initializeOutput($el) {
   output = ace.acequire('ace/ace').edit($el[0]);
 
   const outputMode = new OutputMode.Mode();
@@ -78,10 +78,6 @@ export function initializeOutput($el, settings) {
   output.setShowPrintMargin(false);
   output.setReadOnly(true);
 
-  if (settings) {
-    settings.applyCurrentSettings(output);
-  }
-
   return output;
 }