feat: :lipstick: small ui tweaks, detached child process

5 files changed, 45 insertions, 25 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 982c42d1..5eada708 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -379,6 +379,14 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   Math.min(prev + 1, history.length)
                 );
                 setCurrentlyInContextQuery(false);
+              } else if (event.key === "Escape") {
+                setCurrentlyInContextQuery(false);
+                if (downshiftProps.isOpen) {
+                  downshiftProps.closeMenu();
+                } else {
+                  // Move cursor back over to the editor
+                  postVscMessage("focusEditor", {});
+                }
               }
             },
             onClick: () => {
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 586c49f0..edef808e 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -103,8 +103,8 @@ const PillButton = (props: PillButtonProps) => {
             <pre>
               <code
                 style={{
-                  fontSize: "11px",
-                  backgroundColor: vscBackground,
+                  fontSize: "12px",
+                  backgroundColor: "transparent",
                   color: vscForeground,
                   whiteSpace: "pre-wrap",
                   wordWrap: "break-word",
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index d9280c75..1f999892 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -63,6 +63,14 @@ const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
   padding-right: 8px;
 `;
 
+const LeftHeaderSubDiv = styled.div`
+  margin: 8px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-gap: 2px;
+`;
+
 const ContentDiv = styled.div<{ isUserInput: boolean }>`
   padding: 8px;
   background-color: ${(props) =>
@@ -167,7 +175,7 @@ function StepContainer(props: StepContainerProps) {
             loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
-            <div className="m-2 flex items-center">
+            <LeftHeaderSubDiv>
               {!isUserInput &&
                 (props.open ? (
                   <ChevronDownIcon width="1.4em" height="1.4em" />
@@ -176,7 +184,7 @@ function StepContainer(props: StepContainerProps) {
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
-            </div>
+            </LeftHeaderSubDiv>
             {/* <HeaderButton
               onClick={(e) => {
                 e.stopPropagation();
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index ae054947..7e964ad9 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -21,6 +21,8 @@ const StyledDiv = styled.div`
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
   padding: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 `;
 
 const DeleteButtonDiv = styled.div`
@@ -35,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
       <StyledMarkdownPreview
         light={true}
         source={props.children}
-        className="mr-5"
+        className="mr-6"
       />
       {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
       <DeleteButtonDiv>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index d3a8f566..54897944 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  vscBackground,
+  secondaryDark,
   vscForeground,
 } from "../components";
 import Loader from "../components/Loader";
@@ -37,6 +37,24 @@ const TopGUIDiv = styled.div`
   overflow: hidden;
 `;
 
+const BottomMessageDiv = styled.div<{ displayOnBottom: boolean }>`
+  position: fixed;
+  bottom: ${(props) => (props.displayOnBottom ? "50px" : undefined)};
+  top: ${(props) => (props.displayOnBottom ? undefined : "50px")};
+  left: 0;
+  right: 0;
+  margin: 8px;
+  margin-top: 0;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
+  border-radius: ${defaultBorderRadius};
+  padding: 12px;
+  z-index: 100;
+  box-shadow: 0px 0px 2px 0px ${vscForeground};
+  max-height: 50vh;
+  overflow: scroll;
+`;
+
 const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
@@ -463,7 +481,8 @@ function GUI(props: GUIProps) {
         />
         <ContinueButton onClick={onMainTextInput} />
       </TopGUIDiv>
-      <div
+      <BottomMessageDiv
+        displayOnBottom={displayBottomMessageOnBottom}
         onMouseEnter={() => {
           dispatch(setBottomMessageCloseTimeout(undefined));
         }}
@@ -472,27 +491,10 @@ function GUI(props: GUIProps) {
             dispatch(setBottomMessage(undefined));
           }
         }}
-        style={{
-          position: "fixed",
-          bottom: displayBottomMessageOnBottom ? "50px" : undefined,
-          top: displayBottomMessageOnBottom ? undefined : "50px",
-          left: "0",
-          right: "0",
-          margin: "8px",
-          marginTop: "0px",
-          backgroundColor: vscBackground,
-          color: vscForeground,
-          borderRadius: defaultBorderRadius,
-          padding: "12px",
-          zIndex: 100,
-          boxShadow: `0px 0px 4px 0px ${vscForeground}`,
-          maxHeight: "50vh",
-          overflow: "scroll",
-        }}
         hidden={!bottomMessage}
       >
         {bottomMessage}
-      </div>
+      </BottomMessageDiv>
       <Footer dataSwitchChecked={dataSwitchChecked}>
         {vscMediaUrl && (
           <a