4 files changed, 9 insertions, 13 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index bdb8850d..3e1f3e16 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -279,13 +279,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
         )}
         {highlightedCodeSections.map((section, idx) => (
           <PillButton
-            title={
-              hoveringButton
-                ? `${section.filepath} (${section.range.start.line + 1}-${
-                    section.range.end.line + 1
-                  })`
-                : section.filepath
-            }
+            title={`${section.filepath} (${section.range.start.line + 1}-${
+              section.range.end.line + 1
+            })`}
             onDelete={() => {
               if (props.deleteContextItems) {
                 props.deleteContextItems([idx]);
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 55fe1ac6..2352c3ad 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -50,7 +50,6 @@ const PillButton = (props: PillButtonProps) => {
             borderRight: "1px solid black",
             paddingRight: "4px",
           }}
-          hidden={!isHovered}
           onClick={() => {
             props.onDelete?.();
             props.onHover?.(false);
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 59453169..44fdba38 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -6,10 +6,12 @@ import HeaderButtonWithText from "./HeaderButtonWithText";
 import { Play, XMark } from "@styled-icons/heroicons-outline";
 import { RootStore } from "../redux/store";
 import { useSelector } from "react-redux";
+import { HistoryNode } from "../../../schema/HistoryNode";
 
 interface UserInputContainerProps {
   onDelete: () => void;
   children: string;
+  historyNode: HistoryNode;
 }
 
 const StyledDiv = styled.div`
@@ -26,7 +28,7 @@ const StyledDiv = styled.div`
 
 const UserInputContainer = (props: UserInputContainerProps) => {
   return (
-    <StyledDiv>
+    <StyledDiv hidden={props.historyNode.step.hide as any}>
       {props.children}
       <div style={{ marginLeft: "auto" }}>
         <HeaderButtonWithText
@@ -36,7 +38,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
           }}
           text="Delete"
         >
-          <XMark size="1.6em" onClick={props.onDelete} />
+          <XMark size="1.6em" />
         </HeaderButtonWithText>
       </div>
     </StyledDiv>
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index c2ff101a..8bfadc05 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -70,9 +70,7 @@ function GUI(props: GUIProps) {
   const [usingFastModel, setUsingFastModel] = useState(false);
   const [waitingForSteps, setWaitingForSteps] = useState(false);
   const [userInputQueue, setUserInputQueue] = useState<string[]>([]);
-  const [highlightedRanges, setHighlightedRanges] = useState([
-    { filepath: "abc.txt", range: { start: { line: 2 }, end: { line: 4 } } },
-  ]);
+  const [highlightedRanges, setHighlightedRanges] = useState([]);
   const [availableSlashCommands, setAvailableSlashCommands] = useState<
     { name: string; description: string }[]
   >([]);
@@ -296,6 +294,7 @@ function GUI(props: GUIProps) {
               onDelete={() => {
                 client?.deleteAtIndex(index);
               }}
+              historyNode={node}
             >
               {node.step.description as string}
             </UserInputContainer>