3 files changed, 35 insertions, 11 deletions
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 29f8a53b..e855ebe5 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -124,11 +124,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
             } else if (event.key === "Tab" && items.length > 0) {
               setInputValue(items[0].name);
               event.preventDefault();
-            } else if (event.key === "ArrowUp" && !isOpen) {
+            } else if (event.key === "ArrowUp") {
               if (positionInHistory == 0) return;
               setInputValue(history[positionInHistory - 1]);
               setPositionInHistory((prev) => prev - 1);
-            } else if (event.key === "ArrowDown" && !isOpen) {
+            } else if (event.key === "ArrowDown") {
               if (positionInHistory >= history.length - 1) {
                 setInputValue("");
               } else {
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 7adbd7c2..4c98b04d 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -31,7 +31,9 @@ interface StepContainerProps {
   onUserInput: (input: string) => void;
   onRetry: () => void;
   onDelete: () => void;
-  open?: boolean;
+  open: boolean;
+  onToggleAll: () => void;
+  onToggle: () => void;
 }
 
 const MainDiv = styled.div<{ stepDepth: number; inFuture: boolean }>`
@@ -81,9 +83,6 @@ const MarkdownPre = styled.pre`
 const MarkdownCode = styled.code``;
 
 function StepContainer(props: StepContainerProps) {
-  const [open, setOpen] = useState(
-    typeof props.open === "undefined" ? true : props.open
-  );
   const [isHovered, setIsHovered] = useState(false);
   const naturalLanguageInputRef = useRef<HTMLTextAreaElement>(null);
   const userInputRef = useRef<HTMLInputElement>(null);
@@ -119,19 +118,25 @@ function StepContainer(props: StepContainerProps) {
       }}
       hidden={props.historyNode.step.hide as any}
     >
-      <StepContainerDiv open={open}>
+      <StepContainerDiv open={props.open}>
         <GradientBorder
           borderColor={
             props.historyNode.observation?.error ? "#f00" : undefined
           }
           className="overflow-hidden cursor-pointer"
-          onClick={() => setOpen((prev) => !prev)}
+          onClick={(e) => {
+            if (props.open && e.metaKey) {
+              props.onToggleAll();
+            } else {
+              props.onToggle();
+            }
+          }}
         >
           <HeaderDiv
             error={props.historyNode.observation?.error ? true : false}
           >
             <h4 className="m-2">
-              {open ? (
+              {props.open ? (
                 <ChevronDown size="1.4em" />
               ) : (
                 <ChevronRight size="1.4em" />
@@ -174,8 +179,8 @@ function StepContainer(props: StepContainerProps) {
             </>
           </HeaderDiv>
         </GradientBorder>
-        <ContentDiv hidden={!open}>
-          {open && false && (
+        <ContentDiv hidden={!props.open}>
+          {props.open && false && (
             <>
               <pre className="overflow-x-scroll">
                 Step Details:
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index 63da595f..6aa20e0e 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -54,6 +54,7 @@ function GUI(props: GUIProps) {
   const [availableSlashCommands, setAvailableSlashCommands] = useState<
     { name: string; description: string }[]
   >([]);
+  const [stepsOpen, setStepsOpen] = useState<boolean[]>([]);
   const [history, setHistory] = useState<History | undefined>();
   // {
   //   timeline: [
@@ -212,6 +213,15 @@ function GUI(props: GUIProps) {
       setWaitingForSteps(state.active);
       setHistory(state.history);
       setUserInputQueue(state.user_input_queue);
+      const nextStepsOpen = [...stepsOpen];
+      for (
+        let i = nextStepsOpen.length;
+        i < state.history.timeline.length;
+        i++
+      ) {
+        nextStepsOpen.push(true);
+      }
+      setStepsOpen(nextStepsOpen);
 
       if (shouldScrollToBottom) {
         scrollToBottom();
@@ -321,6 +331,15 @@ function GUI(props: GUIProps) {
         {history?.timeline.map((node: HistoryNode, index: number) => {
           return (
             <StepContainer
+              open={stepsOpen[index]}
+              onToggle={() => {
+                const nextStepsOpen = [...stepsOpen];
+                nextStepsOpen[index] = !nextStepsOpen[index];
+                setStepsOpen(nextStepsOpen);
+              }}
+              onToggleAll={() => {
+                setStepsOpen((prev) => prev.map(() => !prev[index]));
+              }}
               key={index}
               onUserInput={(input: string) => {
                 onStepUserInput(input, index);