foo.diff

diff --git a/src/devtools/client/webconsole/actions/input.js b/src/devtools/client/webconsole/actions/input.js
index ea4b7e1e..78866b00 100644
--- a/src/devtools/client/webconsole/actions/input.js
+++ b/src/devtools/client/webconsole/actions/input.js
@@ -27,6 +27,8 @@ async function getPause(toolbox) {
 }
 
 async function dispatchExpression(dispatch, pause, expression) {
+  // This is where we start handling new evaluations
+
   // We use the messages action as it's doing additional transformation on the message.
   let evalId = nextEvalId++;
   dispatch(
diff --git a/src/devtools/client/webconsole/components/Input/JSTerm.js b/src/devtools/client/webconsole/components/Input/JSTerm.js
index d8f27aeb..0bc7e06d 100644
--- a/src/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/src/devtools/client/webconsole/components/Input/JSTerm.js
@@ -12,7 +12,7 @@ import actions from "devtools/client/webconsole/actions/index";
 import { getRecordingId } from "ui/utils/environment";
 import { getRecording } from "ui/hooks/recordings";
 
-async function createEditor({ execute }) {
+async function createEditor({ execute, onKeyPress }) {
   const Editor = (await import("devtools/client/debugger/src/utils/editor/source-editor")).default;
   const editor = new Editor({
     autofocus: true,
@@ -30,12 +30,14 @@ async function createEditor({ execute }) {
     viewportMargin: Infinity,
     disableSearchAddon: true,
     extraKeys: {
+      // this is where we would add up and down arrows i think
       Enter: execute,
       "Cmd-Enter": execute,
       "Ctrl-Enter": execute,
       Esc: false,
       "Cmd-F": false,
       "Ctrl-F": false,
+      arrow: onKeyPress,
     },
   });
   return editor;
@@ -146,8 +148,11 @@ class JSTerm extends React.Component {
   }
 }
 
-function mapStateToProps() {
-  return {};
+function mapStateToProps(state) {
+  return {
+    // once we have the message history, looping over them is easy
+    messageHistory: selectors.getMessagesHistory(state),
+  };
 }
 
 const mapDispatchToProp = {
diff --git a/src/devtools/client/webconsole/reducers/messages.js b/src/devtools/client/webconsole/reducers/messages.js
index 97efd793..26b3dcca 100644
--- a/src/devtools/client/webconsole/reducers/messages.js
+++ b/src/devtools/client/webconsole/reducers/messages.js
@@ -33,6 +33,10 @@ const MessageState = overrides =>
         filteredMessagesCount: getDefaultFiltersCounter(),
         // List of the message ids which are opened.
         messagesUiById: [],
+
+        // Tangent -- We should delete all of the message group code and redo it
+        // our groups are much simpler because we have all the messages UP FRONT
+        // the normal console has to stream...
         // Map of the form {groupMessageId : groupArray},
         // where groupArray is the list of of all the parent groups' ids of the groupMessageId.
         // This handles console API groups.
@@ -51,6 +55,8 @@ const MessageState = overrides =>
         hasExecutionPoints: false,
         // Id of the last messages that was added.
         lastMessageId: null,
+
+        messageHistory: [],
       },
       overrides
     )
@@ -84,7 +90,9 @@ function cloneState(state) {
  */
 // eslint-disable-next-line complexity
 function addMessage(newMessage, state, filtersState) {
-  const { messagesById, groupsById, currentGroup } = state;
+  const { messagesById, groupsById, currentGroup, messsageHistory } = state;
+
+  // This thing is a mess, but we can probably do it here :)
 
   if (newMessage.type === constants.MESSAGE_TYPE.NULL_MESSAGE) {
     // When the message has a NULL type, we don't add it.
@@ -101,6 +109,7 @@ function addMessage(newMessage, state, filtersState) {
     return state;
   }
 
+  // i bet we cn jst delete all this code
   if (newMessage.type === constants.MESSAGE_TYPE.END_GROUP) {
     // Compute the new current group.
     state.currentGroup = getNewCurrentGroup(currentGroup, groupsById);
@@ -110,6 +119,7 @@ function addMessage(newMessage, state, filtersState) {
   // Store the id of the message as being the last one being added.
   state.lastMessageId = newMessage.id;
 
+  // i bet we cn jst delete all this code
   // Add the new message with a reference to the parent group.
   const parentGroups = getParentGroups(currentGroup, groupsById);
   newMessage.groupId = currentGroup;
@@ -140,6 +150,8 @@ function addMessage(newMessage, state, filtersState) {
   const addedMessage = Object.freeze(newMessage);
   state.messagesById.set(newMessage.id, addedMessage);
 
+  // i bet we cn jst delete all this code
+  //  we dont support traces :)
   if (newMessage.type === "trace") {
     // We want the stacktrace to be open by default.
     state.messagesUiById.push(newMessage.id);
@@ -281,6 +293,7 @@ function messages(state = MessageState(), action) {
       if (currMessage && isGroupType(currMessage.type)) {
         // We want to make its children visible
         const messagesToShow = [...messagesById].reduce((res, [id, message]) => {
+          // i see this stuff and think we can delete it too...
           if (
             !visibleMessages.includes(message.id) &&
             isGroupType(currMessage.type) &&
diff --git a/src/ui/setup/dynamic/devtools.ts b/src/ui/setup/dynamic/devtools.ts
index 1a2abd42..622a20b5 100644
--- a/src/ui/setup/dynamic/devtools.ts
+++ b/src/ui/setup/dynamic/devtools.ts
@@ -74,7 +74,11 @@ const dispatch = url.searchParams.get("dispatch") || undefined;
   if (eventListenerBreakpoints) {
     eventListenerBreakpoints.eventTypePoints ||= {};
   }
+
   const initialDebuggerState = await dbgClient.loadInitialState();
+  // This is a good reference for how we'll want to persist
+  // the message history between refreshes
+  // typically we store the state in localstorage and then populate the initial redux state here
   const initialConsoleState = getConsoleInitialState();
 
   const initialState = {