restore the old code to be able to record

src/common/App.tsx

@@ -35,6 +35,7 @@ const App = () => {
             <OptionsDropdown />
           </HStack>
         </HStack>
+        {openAIKey ? <TaskUI /> : <SetAPIKey />}
       </Box>
     </ChakraProvider>
   );

src/common/CTFlowAI.tsx

@@ -28,6 +28,7 @@ const CTFlowAI = () => {
             <OptionsDropdown />
           </HStack>
         </HStack>
+        {openAIKey ? <TaskUI /> : <SetAPIKey />}
       </Box>
     </ChakraProvider>
   );

src/common/RunTaskButton.tsx

@@ -0,0 +1,79 @@
+import { Button, HStack, Icon } from '@chakra-ui/react';
+import React, { useCallback } from 'react';
+import { useAppState } from '../state/store';
+import { BsPlayFill, BsStopFill } from 'react-icons/bs';
+
+export default function RunTaskButton(props: { runTask: () => void }) {
+  const state = useAppState((state) => ({
+    taskState: state.currentTask.status,
+    instructions: state.ui.instructions,
+    interruptTask: state.currentTask.actions.interrupt,
+  }));
+
+  const [lastTriggerAITaskAt, setLastTriggerAITaskAt] =
+    React.useState<number>();
+  const onRunTask = props.runTask;
+
+  console.log('HEY FROM RUN TASK BUTTON');
+
+  if (chrome.debugger !== undefined) {
+    console.log('add listener to RUNT TASK BUTTON only');
+    chrome.runtime.onMessage.addListener(async function (
+      request,
+      sender,
+      sendResponse
+    ) {
+      console.log(
+        'RUN TASK BTN:Message received from RUNT TASK BUTTON index.ts',
+        request
+      );
+      onRunTask();
+      // const [lastTriggerAITaskAt, setLastTriggerAITaskAt] = React.useState<number>();
+    });
+  }
+
+  React.useEffect(() => {
+    if (lastTriggerAITaskAt === undefined) {
+      return;
+    }
+
+    console.log(lastTriggerAITaskAt, 'RUN TASK BUTTON - CHANGE AND TRIGGER');
+    console.log('chrome.debugger', chrome.debugger);
+
+    if (chrome.debugger === undefined) {
+      console.log('trigger chrome runtime message');
+      chrome.runtime.sendMessage({
+        source: 'control-bar',
+        type: 'run-task',
+      });
+    } else if (lastTriggerAITaskAt) {
+      onRunTask();
+    }
+  }, [lastTriggerAITaskAt]);
+
+  let button = (
+    <Button
+      rightIcon={<Icon as={BsPlayFill} boxSize={6} />}
+      //onClick={props.runTask}
+      onClick={() => setLastTriggerAITaskAt(Date.now())}
+      colorScheme="green"
+      disabled={state.taskState === 'running' || !state.instructions}
+    >
+      Start Task
+    </Button>
+  );
+
+  if (state.taskState === 'running') {
+    button = (
+      <Button
+        rightIcon={<Icon as={BsStopFill} boxSize={6} />}
+        onClick={state.interruptTask}
+        colorScheme="red"
+      >
+        Stop
+      </Button>
+    );
+  }
+
+  return <HStack alignItems="center">{button}</HStack>;
+}

src/pages/Common/styles.css

@@ -125,9 +125,6 @@
 .px-4 {
   padding: 0 1em;
 }
-.pl-4 {
-  padding-left: 1em;
-}
 
 /* Margin Utils */
 .m-4 {
@@ -149,9 +146,6 @@
 .mt-12 {
   margin-top: 3em;
 }
-.ml-4 {
-  margin-left: 1em;
-}
 .mr-1 {
   margin-right: 0.25em;
 }
@@ -161,9 +155,6 @@
 .mr-4 {
   margin-right: 1em;
 }
-.mr-4-i {
-  margin-right: 1em !important;
-}
 .mr-5 {
   margin-right: 1.5em;
 }
@@ -219,62 +210,3 @@
 .cypress-trigger:hover {
   background: #e9e9e9;
 }
-
-.flex {
-  display: flex;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.block {
-  display: block;
-}
-
-.static {
-  position: static;
-}
-
-.fixed {
-  position: fixed;
-}
-
-.bottom-1 {
-  bottom: 1rem;
-}
-
-.right-1 {
-  right: 1rem;
-}
-
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
-button.no-default {
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  outline: none;
-}
-
-button.bg-common {
-  background-color: #080a0b;
-}
-
-button.px-4 {
-  padding-right: 1em;
-  padding-left: 1em;
-}
-
-button.py-2 {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}