diff --git a/TaxyAI-round-trip.md b/TaxyAI-round-trip.md
new file mode 100644
index 0000000..90437f1
--- /dev/null
+++ b/TaxyAI-round-trip.md
@@ -0,0 +1,46 @@
+```
+The user requests the following task:
+
+what is the phone number of coderpush?
+
+You have already taken the following actions:
+<Thought>I need to search for the phone number of CoderPush</Thought>
+<Action>setValue(208, "CoderPush phone number")</Action>
+
+<Thought>I should click on the search button to find the phone number of CoderPush</Thought>
+<Action>click(397)</Action>
+
+<Thought>I should click on the first search result to find the phone number of CoderPush</Thought>
+<Action>click(712)</Action>
+
+
+
+Current time: 11/19/2023, 5:59:25 PM
+
+Current page contents:
+T1: <span id=$1><svg id=$2><path id=$3/></svg></span>
+
+<html><head/><body><div role="dialog" id="2611"><div><div aria-label="Các tùy chọn khác" role="heading" id="2614">Các tùy chọn khác </div><div id="2615"><span aria-label="Đóng thông tin về kết quả này" role="button" id="2616"><svg id="2617"><path id="2618"/></svg></span></div></div><div><g-inline-toggler role="button" id="2623"><div id="2624"><span id="2625"><div id="2626"><div id="2627"><div id="2628"><div id="2629">Xem thêm </div></div>{T1(2630,2631,2632)}</div></div></span></div></g-inline-toggler><div role="list" id="2645"><div id="2646"><div aria-label="Chia sẻ" role="listitem" id="2647"><span id="2648"><div id="2649"><div id="2650"><div id="2651">{T1(2652,2653,2654)}<span id="2655">Chia sẻ </span></div></div></div></span><div id="2656"/><div id="2657"/></div></div><div id="2708"><div id="2709"><div role="listitem" id="2710"><div aria-label="Lưu" role="button" id="2711"><div id="2712"><div id="2713"><div id="2714">{T1(2715,2716,2717)}<span id="2718">Lưu </span></div></div></div></div></div></div></div><div role="listitem" id="2727"><div role="button" id="2728"><div id="2729"><div id="2730"><span id="2731">Phản hồi </span></div></div></div></div></div></div><div><div aria-label="Thông tin về kết quả này" role="heading" id="2744">Thông tin về kết quả này </div>Beta </div></div></body></html>
+```
+
+thought
+
+```
+<Thought>I should check if the phone number is displayed on the page</Thought>
+<Action>click(1)</Action>
+```
+
+actions
+
+```
+{
+"thought": "I should check if the phone number is displayed on the page",
+"action": "click(1)",
+"parsedAction": {
+"name": "click",
+"args": {
+"elementId": 1
+}
+}
+}
+```
diff --git a/src/common/App.tsx b/src/common/App.tsx
index 04f308b..bceb9db 100644
--- a/src/common/App.tsx
+++ b/src/common/App.tsx
@@ -35,6 +35,7 @@ const App = () => {
             <OptionsDropdown />
           </HStack>
         </HStack>
+        {openAIKey ? <TaskUI /> : <SetAPIKey />}
       </Box>
     </ChakraProvider>
   );
diff --git a/src/common/CTFlowAI.tsx b/src/common/CTFlowAI.tsx
index 5d41fdb..34dd31d 100644
--- a/src/common/CTFlowAI.tsx
+++ b/src/common/CTFlowAI.tsx
@@ -28,6 +28,7 @@ const CTFlowAI = () => {
             <OptionsDropdown />
           </HStack>
         </HStack>
+        {openAIKey ? <TaskUI /> : <SetAPIKey />}
       </Box>
     </ChakraProvider>
   );
diff --git a/src/common/RunTaskButton.tsx b/src/common/RunTaskButton.tsx
new file mode 100644
index 0000000..e1d5bf7
--- /dev/null
+++ b/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>;
+}
diff --git a/src/helpers/firestore.ts b/src/helpers/firestore.ts
index 85e452c..55db607 100644
--- a/src/helpers/firestore.ts
+++ b/src/helpers/firestore.ts
@@ -161,3 +161,21 @@ export async function setRecordingAction(
 
   await setDoc(doc(firestoreDB, 'recorders', id), newDoc);
 }
+
+export async function setAIRecord(
+  id: string,
+  currentHtml: string,
+  simplifiedHtml: string
+) {
+  await setDoc(doc(firestoreDB, 'ai_records', id), {
+    currentHtml,
+    simplifiedHtml,
+    thoughts_actions: [],
+    current_thought: '',
+    current_actions: [{}],
+    ip: '127.0.0.1',
+    userId: 'test',
+    created_at: new Date(),
+    updated_at: new Date(),
+  });
+}
diff --git a/src/manifest2.json b/src/manifest2.json
index 93f5248..9036f39 100644
--- a/src/manifest2.json
+++ b/src/manifest2.json
@@ -17,6 +17,7 @@
     "activeTab",
     "storage",
     "contextMenus",
+    "desktopCapture",
     "webNavigation",
     "<all_urls>"
   ],
diff --git a/src/manifest3.json b/src/manifest3.json
index f47274e..df421dd 100755
--- a/src/manifest3.json
+++ b/src/manifest3.json
@@ -20,6 +20,7 @@
     "contextMenus",
     "webNavigation",
     "tabs",
+    "desktopCapture",
     "clipboardWrite",
     "debugger",
     "management",
diff --git a/src/pages/Common/styles.css b/src/pages/Common/styles.css
index a0daa38..6ff0fb1 100644
--- a/src/pages/Common/styles.css
+++ b/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;
-}
diff --git a/src/pages/Content/ControlBar.backup.tsx b/src/pages/Content/ControlBar.backup.tsx
new file mode 100644
index 0000000..af86377
--- /dev/null
+++ b/src/pages/Content/ControlBar.backup.tsx
@@ -0,0 +1,397 @@
+import React, { useState, useEffect, useRef } from 'react';
+import throttle from 'lodash.throttle';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCamera,
+  faCopy,
+  faCheck,
+  faCheckCircle,
+  faTimes,
+  faChevronUp,
+  faChevronDown,
+} from '@fortawesome/free-solid-svg-icons';
+
+import Recorder from './recorder';
+import Highlighter from './Highlighter';
+import ActionList from './ActionList';
+import CodeGen from './CodeGen';
+import genSelectors, { getBestSelectorForAction } from '../builders/selector';
+import { genCode } from '../builders';
+import ScriptTypeSelect from '../Common/ScriptTypeSelect';
+import { usePreferredLibrary, usePreferredBarPosition } from '../Common/hooks';
+
+import type { Action } from '../types';
+import {
+  ActionType,
+  ActionsMode,
+  ScriptType,
+  TagName,
+  BarPosition,
+} from '../types';
+
+import ControlBarStyle from './ControlBar.css';
+import { endRecording } from '../Common/endRecording';
+import CTFlowAI from '../../common/CTFlowAI';
+import { set } from 'lodash';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+
+// import ReactTabStyle from 'react-tabs/style/react-tabs.css';
+import CustomReactTabStyle from './CustomReactTabs.css';
+
+const ActionButton = ({
+  onClick,
+  children,
+  label,
+  testId,
+}: {
+  onClick: () => void;
+  children: JSX.Element;
+  label: String;
+  testId?: String;
+}) => (
+  <div className="ActionButton" onClick={onClick} data-testid={testId}>
+    <div>
+      <div
+        style={{
+          height: 32,
+          width: 32,
+          position: 'relative',
+          margin: '0 auto',
+          marginBottom: '0.5em',
+        }}
+      >
+        {children}
+      </div>
+      <div style={{ fontSize: 12, marginTop: 4 }}>{label}</div>
+    </div>
+  </div>
+);
+
+const AIPanel = () => (
+  <div className="AIPanel">
+    <h1> AI PANEL </h1>
+    <div>
+      <div
+        style={{
+          width: '100%',
+          position: 'relative',
+          margin: '0 auto',
+          marginBottom: '0.5em',
+        }}
+      >
+        <CTFlowAI />
+      </div>
+    </div>
+  </div>
+);
+
+function RenderActionText({ action }: { action: Action }) {
+  return (
+    <>
+      {action.type === ActionType.Click
+        ? `Click on ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Hover
+        ? `Hover over ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Input
+        ? `Fill "${
+            action.isPassword
+              ? '*'.repeat(action?.value?.length ?? 0)
+              : action.value
+          }" on ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Keydown
+        ? `Press ${action.key} on ${action.tagName.toLowerCase()}`
+        : action.type === ActionType.Load
+        ? `Load "${action.url}"`
+        : action.type === ActionType.Resize
+        ? `Resize window to ${action.width} x ${action.height}`
+        : action.type === ActionType.Wheel
+        ? `Scroll wheel by X:${action.deltaX}, Y:${action.deltaY}`
+        : action.type === ActionType.FullScreenshot
+        ? `Take full page screenshot`
+        : action.type === ActionType.AwaitText
+        ? `Wait for text "${action.text}"`
+        : action.type === ActionType.DragAndDrop
+        ? `Drag n Drop from (${action.sourceX}, ${action.sourceY}) to (${action.targetX}, ${action.targetY})`
+        : ''}
+    </>
+  );
+}
+
+function isElementFromOverlay(element: HTMLElement) {
+  if (element == null) return false;
+  return element.closest('#overlay-controls') != null;
+}
+
+export default function ControlBar({ onExit }: { onExit: () => void }) {
+  const [barPosition, setBarPosition] = usePreferredBarPosition(
+    BarPosition.Bottom
+  );
+
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null
+  );
+  const [hoveredElementSelectors, setHoveredElementSelectors] = useState<any>(
+    {}
+  );
+
+  const [lastAction, setLastAction] = useState<Action | null>(null);
+  const [actions, setActions] = useState<Action[]>([]);
+
+  const [showAllActions, setShowAllActions] = useState<boolean>(false);
+
+  const [showCTFlowAI, setShowCTFlowAI] = useState<boolean>(true);
+
+  const [showActionsMode, setShowActionsMode] = useState<ActionsMode>(
+    ActionsMode.Code
+  );
+  const [preferredLibrary, setPreferredLibrary] = usePreferredLibrary();
+
+  const [copyCodeConfirm, setCopyCodeConfirm] = useState<boolean>(false);
+  const [screenshotConfirm, setScreenshotConfirm] = useState<boolean>(false);
+
+  const [isFinished, setIsFinished] = useState<boolean>(false);
+
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  const handleMouseMoveRef = useRef((_: MouseEvent) => {});
+  const recorderRef = useRef<Recorder | null>(null);
+
+  const onEndRecording = () => {
+    setIsFinished(true);
+
+    // Show Code
+    setShowAllActions(true);
+
+    // show AI Panel
+    setShowCTFlowAI(false);
+
+    // Clear out highlighter
+    document.removeEventListener('mousemove', handleMouseMoveRef.current, true);
+    setHoveredElement(null);
+
+    // Turn off recorder
+    recorderRef.current?.deregister();
+
+    endRecording();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onExit();
+  };
+
+  useEffect(() => {
+    handleMouseMoveRef.current = throttle((event: MouseEvent) => {
+      const x = event.clientX,
+        y = event.clientY,
+        elementMouseIsOver = document.elementFromPoint(x, y) as HTMLElement;
+
+      if (
+        !isElementFromOverlay(elementMouseIsOver) &&
+        elementMouseIsOver != null
+      ) {
+        const { parentElement } = elementMouseIsOver;
+        // Match the logic in recorder.ts for link clicks
+        const element =
+          parentElement?.tagName === 'A' ? parentElement : elementMouseIsOver;
+        setHoveredElement(element || null);
+        setHoveredElementSelectors(genSelectors(element));
+      }
+    }, 100);
+
+    document.addEventListener('mousemove', handleMouseMoveRef.current, true);
+
+    recorderRef.current = new Recorder({
+      onAction: (action: Action, actions: Action[]) => {
+        setLastAction(action);
+        setActions(actions);
+      },
+      onInitialized: (lastAction: Action, recording: Action[]) => {
+        setLastAction(
+          recording.reduceRight<Action | null>(
+            (p, v) => (p == null && v.type != 'navigate' ? v : p),
+            null
+          )
+        );
+        setActions(recording);
+      },
+    });
+
+    // Set recording to be finished if somewhere else (ex. popup) the state has been set to be finished
+    chrome.storage.onChanged.addListener((changes) => {
+      if (
+        changes.recordingState != null &&
+        changes.recordingState.newValue === 'finished' &&
+        // Firefox will fire change events even if the values are not changed
+        changes.recordingState.newValue !== changes.recordingState.oldValue
+      ) {
+        if (!isFinished) {
+          onEndRecording();
+        }
+      }
+    });
+  }, []);
+
+  const displayedScriptType = preferredLibrary ?? ScriptType.Cypress;
+
+  const rect = hoveredElement?.getBoundingClientRect();
+  const displayedSelector = getBestSelectorForAction(
+    {
+      type: ActionType.Click,
+      tagName: (hoveredElement?.tagName ?? '') as TagName,
+      inputType: undefined,
+      value: undefined,
+      selectors: hoveredElementSelectors || {},
+      timestamp: 0,
+      isPassword: false,
+      hasOnlyText:
+        hoveredElement?.children?.length === 0 &&
+        hoveredElement?.innerText?.length > 0,
+    },
+    displayedScriptType
+  );
+
+  if (isOpen === false) {
+    return <> </>;
+  }
+
+  const onTestMessageClick = () => {
+    console.log('trigger: On test message click: click me');
+    chrome.runtime.sendMessage({ from: 'control bar' });
+  };
+
+  return (
+    <>
+      <style>{ControlBarStyle}</style>
+      <style>{CustomReactTabStyle}</style>
+
+      <div
+        className="ControlBar rr-ignore"
+        id="overlay-controls"
+        style={{
+          ...(barPosition === BarPosition.Bottom
+            ? { bottom: 35 }
+            : { top: 35 }),
+          // height: (showAllActions || showCTFlowAI) ? 330 : 100,
+          height: 330,
+        }}
+      >
+        <Tabs>
+          <TabPanel>
+            <h3> Recorder Tab </h3>
+            <div className="actions-wrapper p-4" style={{}}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div className="mb-4">
+                  <span
+                    className="text-sm link-button mr-2"
+                    data-testid={`show-${
+                      showActionsMode === ActionsMode.Actions
+                        ? ActionsMode.Code
+                        : ActionsMode.Actions
+                    }`}
+                    onClick={() => {
+                      setShowActionsMode(
+                        showActionsMode === ActionsMode.Actions
+                          ? ActionsMode.Code
+                          : ActionsMode.Actions
+                      );
+                    }}
+                  >
+                    Show{' '}
+                    {showActionsMode === ActionsMode.Actions
+                      ? 'Code'
+                      : 'Actions'}
+                  </span>
+                  {!isFinished && (
+                    <span
+                      className={`text-sm link-button mr-2 ${
+                        screenshotConfirm ? 'text-green' : ''
+                      }`}
+                      data-testid="record-screenshot"
+                      onClick={() => {
+                        recorderRef.current?.onFullScreenshot();
+                        setScreenshotConfirm(true);
+                        setTimeout(() => {
+                          setScreenshotConfirm(false);
+                        }, 2000);
+                      }}
+                    >
+                      <FontAwesomeIcon
+                        icon={screenshotConfirm ? faCheck : faCamera}
+                        size="sm"
+                      />{' '}
+                      Record Screenshot
+                    </span>
+                  )}
+                </div>
+                <div>
+                  {showActionsMode === ActionsMode.Code && (
+                    <>
+                      <ScriptTypeSelect
+                        value={displayedScriptType}
+                        onChange={setPreferredLibrary}
+                      />
+                      <CopyToClipboard
+                        text={genCode(actions, true, displayedScriptType)}
+                        onCopy={() => {
+                          setCopyCodeConfirm(true);
+                          setTimeout(() => {
+                            setCopyCodeConfirm(false);
+                          }, 2000);
+                        }}
+                      >
+                        <span
+                          className={`text-sm link-button ${
+                            copyCodeConfirm ? 'text-green' : ''
+                          }`}
+                        >
+                          <FontAwesomeIcon
+                            icon={copyCodeConfirm ? faCheck : faCopy}
+                            size="sm"
+                          />{' '}
+                          Copy Code
+                        </span>
+                      </CopyToClipboard>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {showActionsMode === ActionsMode.Code && (
+                <CodeGen actions={actions} library={displayedScriptType} />
+              )}
+              {showActionsMode === ActionsMode.Actions && (
+                <ActionList actions={actions} />
+              )}
+            </div>
+          </TabPanel>
+          <TabPanel>
+            <h3> AI TAB </h3>
+            {showCTFlowAI && (
+              <div className="actions-wrapper p-4" style={{}}>
+                <h1> PUCK ME HARD </h1>
+                <AIPanel />
+              </div>
+            )}
+          </TabPanel>
+
+          <TabList>
+            <Tab id="ctflow-recorder-tab-list-btn"> 🎥 Recorder</Tab>
+            <Tab> 🤖 CTFlow AI</Tab>
+          </TabList>
+        </Tabs>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/Content/ControlBar.tsx b/src/pages/Content/ControlBar.tsx
index da51aa4..af86377 100644
--- a/src/pages/Content/ControlBar.tsx
+++ b/src/pages/Content/ControlBar.tsx
@@ -1,73 +1,397 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import throttle from 'lodash.throttle';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCamera,
+  faCopy,
+  faCheck,
+  faCheckCircle,
+  faTimes,
+  faChevronUp,
+  faChevronDown,
+} from '@fortawesome/free-solid-svg-icons';
+
+import Recorder from './recorder';
+import Highlighter from './Highlighter';
+import ActionList from './ActionList';
+import CodeGen from './CodeGen';
+import genSelectors, { getBestSelectorForAction } from '../builders/selector';
+import { genCode } from '../builders';
+import ScriptTypeSelect from '../Common/ScriptTypeSelect';
+import { usePreferredLibrary, usePreferredBarPosition } from '../Common/hooks';
+
+import type { Action } from '../types';
+import {
+  ActionType,
+  ActionsMode,
+  ScriptType,
+  TagName,
+  BarPosition,
+} from '../types';
 
 import ControlBarStyle from './ControlBar.css';
+import { endRecording } from '../Common/endRecording';
+import CTFlowAI from '../../common/CTFlowAI';
+import { set } from 'lodash';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
+// import ReactTabStyle from 'react-tabs/style/react-tabs.css';
 import CustomReactTabStyle from './CustomReactTabs.css';
-import { useAppState } from '../../state/store';
-import { useToast } from '@chakra-ui/react';
+
+const ActionButton = ({
+  onClick,
+  children,
+  label,
+  testId,
+}: {
+  onClick: () => void;
+  children: JSX.Element;
+  label: String;
+  testId?: String;
+}) => (
+  <div className="ActionButton" onClick={onClick} data-testid={testId}>
+    <div>
+      <div
+        style={{
+          height: 32,
+          width: 32,
+          position: 'relative',
+          margin: '0 auto',
+          marginBottom: '0.5em',
+        }}
+      >
+        {children}
+      </div>
+      <div style={{ fontSize: 12, marginTop: 4 }}>{label}</div>
+    </div>
+  </div>
+);
+
+const AIPanel = () => (
+  <div className="AIPanel">
+    <h1> AI PANEL </h1>
+    <div>
+      <div
+        style={{
+          width: '100%',
+          position: 'relative',
+          margin: '0 auto',
+          marginBottom: '0.5em',
+        }}
+      >
+        <CTFlowAI />
+      </div>
+    </div>
+  </div>
+);
+
+function RenderActionText({ action }: { action: Action }) {
+  return (
+    <>
+      {action.type === ActionType.Click
+        ? `Click on ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Hover
+        ? `Hover over ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Input
+        ? `Fill "${
+            action.isPassword
+              ? '*'.repeat(action?.value?.length ?? 0)
+              : action.value
+          }" on ${action.tagName.toLowerCase()} ${getBestSelectorForAction(
+            action,
+            ScriptType.Playwright
+          )}`
+        : action.type === ActionType.Keydown
+        ? `Press ${action.key} on ${action.tagName.toLowerCase()}`
+        : action.type === ActionType.Load
+        ? `Load "${action.url}"`
+        : action.type === ActionType.Resize
+        ? `Resize window to ${action.width} x ${action.height}`
+        : action.type === ActionType.Wheel
+        ? `Scroll wheel by X:${action.deltaX}, Y:${action.deltaY}`
+        : action.type === ActionType.FullScreenshot
+        ? `Take full page screenshot`
+        : action.type === ActionType.AwaitText
+        ? `Wait for text "${action.text}"`
+        : action.type === ActionType.DragAndDrop
+        ? `Drag n Drop from (${action.sourceX}, ${action.sourceY}) to (${action.targetX}, ${action.targetY})`
+        : ''}
+    </>
+  );
+}
+
+function isElementFromOverlay(element: HTMLElement) {
+  if (element == null) return false;
+  return element.closest('#overlay-controls') != null;
+}
 
 export default function ControlBar({ onExit }: { onExit: () => void }) {
-  const state = useAppState((state) => ({
-    taskHistory: state.currentTask.history,
-    taskStatus: state.currentTask.status,
-    runTask: state.currentTask.actions.runTask,
-    instructions: state.ui.instructions,
-    setInstructions: state.ui.actions.setInstructions,
-  }));
-  const [lastTriggerAITaskAt, setLastTriggerAITaskAt] = useState<number>();
-
-  const toast = useToast();
-
-  const toastError = useCallback(
-    (message: string) => {
-      toast({
-        title: 'Error',
-        description: message,
-        status: 'error',
-        duration: 5000,
-        isClosable: true,
-      });
-    },
-    [toast]
+  const [barPosition, setBarPosition] = usePreferredBarPosition(
+    BarPosition.Bottom
+  );
+
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null
+  );
+  const [hoveredElementSelectors, setHoveredElementSelectors] = useState<any>(
+    {}
   );
 
-  const onRunTask = () => {
-    console.log('instructions', state.instructions);
-    state.instructions && state.runTask(toastError);
+  const [lastAction, setLastAction] = useState<Action | null>(null);
+  const [actions, setActions] = useState<Action[]>([]);
+
+  const [showAllActions, setShowAllActions] = useState<boolean>(false);
+
+  const [showCTFlowAI, setShowCTFlowAI] = useState<boolean>(true);
+
+  const [showActionsMode, setShowActionsMode] = useState<ActionsMode>(
+    ActionsMode.Code
+  );
+  const [preferredLibrary, setPreferredLibrary] = usePreferredLibrary();
+
+  const [copyCodeConfirm, setCopyCodeConfirm] = useState<boolean>(false);
+  const [screenshotConfirm, setScreenshotConfirm] = useState<boolean>(false);
+
+  const [isFinished, setIsFinished] = useState<boolean>(false);
+
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  const handleMouseMoveRef = useRef((_: MouseEvent) => {});
+  const recorderRef = useRef<Recorder | null>(null);
+
+  const onEndRecording = () => {
+    setIsFinished(true);
+
+    // Show Code
+    setShowAllActions(true);
+
+    // show AI Panel
+    setShowCTFlowAI(false);
+
+    // Clear out highlighter
+    document.removeEventListener('mousemove', handleMouseMoveRef.current, true);
+    setHoveredElement(null);
+
+    // Turn off recorder
+    recorderRef.current?.deregister();
+
+    endRecording();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onExit();
   };
 
   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',
-      });
-      console.log('onRunTask', onRunTask);
-      onRunTask();
-    } else if (lastTriggerAITaskAt) {
-      onRunTask();
-    }
-  }, [lastTriggerAITaskAt]);
+    handleMouseMoveRef.current = throttle((event: MouseEvent) => {
+      const x = event.clientX,
+        y = event.clientY,
+        elementMouseIsOver = document.elementFromPoint(x, y) as HTMLElement;
+
+      if (
+        !isElementFromOverlay(elementMouseIsOver) &&
+        elementMouseIsOver != null
+      ) {
+        const { parentElement } = elementMouseIsOver;
+        // Match the logic in recorder.ts for link clicks
+        const element =
+          parentElement?.tagName === 'A' ? parentElement : elementMouseIsOver;
+        setHoveredElement(element || null);
+        setHoveredElementSelectors(genSelectors(element));
+      }
+    }, 100);
+
+    document.addEventListener('mousemove', handleMouseMoveRef.current, true);
+
+    recorderRef.current = new Recorder({
+      onAction: (action: Action, actions: Action[]) => {
+        setLastAction(action);
+        setActions(actions);
+      },
+      onInitialized: (lastAction: Action, recording: Action[]) => {
+        setLastAction(
+          recording.reduceRight<Action | null>(
+            (p, v) => (p == null && v.type != 'navigate' ? v : p),
+            null
+          )
+        );
+        setActions(recording);
+      },
+    });
+
+    // Set recording to be finished if somewhere else (ex. popup) the state has been set to be finished
+    chrome.storage.onChanged.addListener((changes) => {
+      if (
+        changes.recordingState != null &&
+        changes.recordingState.newValue === 'finished' &&
+        // Firefox will fire change events even if the values are not changed
+        changes.recordingState.newValue !== changes.recordingState.oldValue
+      ) {
+        if (!isFinished) {
+          onEndRecording();
+        }
+      }
+    });
+  }, []);
+
+  const displayedScriptType = preferredLibrary ?? ScriptType.Cypress;
+
+  const rect = hoveredElement?.getBoundingClientRect();
+  const displayedSelector = getBestSelectorForAction(
+    {
+      type: ActionType.Click,
+      tagName: (hoveredElement?.tagName ?? '') as TagName,
+      inputType: undefined,
+      value: undefined,
+      selectors: hoveredElementSelectors || {},
+      timestamp: 0,
+      isPassword: false,
+      hasOnlyText:
+        hoveredElement?.children?.length === 0 &&
+        hoveredElement?.innerText?.length > 0,
+    },
+    displayedScriptType
+  );
+
+  if (isOpen === false) {
+    return <> </>;
+  }
+
+  const onTestMessageClick = () => {
+    console.log('trigger: On test message click: click me');
+    chrome.runtime.sendMessage({ from: 'control bar' });
+  };
 
   return (
-    <div>
+    <>
       <style>{ControlBarStyle}</style>
       <style>{CustomReactTabStyle}</style>
-      <button
-        // onClick={() => setShowBar(true)}
-        onClick={() => setLastTriggerAITaskAt(Date.now())}
-        className="px-4 py-2 no-default rounded-md bg-common text-lg font-bold fixed bottom-1 right-1 "
+
+      <div
+        className="ControlBar rr-ignore"
+        id="overlay-controls"
+        style={{
+          ...(barPosition === BarPosition.Bottom
+            ? { bottom: 35 }
+            : { top: 35 }),
+          // height: (showAllActions || showCTFlowAI) ? 330 : 100,
+          height: 330,
+        }}
       >
-        🤖 CTFlow
-      </button>
-    </div>
+        <Tabs>
+          <TabPanel>
+            <h3> Recorder Tab </h3>
+            <div className="actions-wrapper p-4" style={{}}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div className="mb-4">
+                  <span
+                    className="text-sm link-button mr-2"
+                    data-testid={`show-${
+                      showActionsMode === ActionsMode.Actions
+                        ? ActionsMode.Code
+                        : ActionsMode.Actions
+                    }`}
+                    onClick={() => {
+                      setShowActionsMode(
+                        showActionsMode === ActionsMode.Actions
+                          ? ActionsMode.Code
+                          : ActionsMode.Actions
+                      );
+                    }}
+                  >
+                    Show{' '}
+                    {showActionsMode === ActionsMode.Actions
+                      ? 'Code'
+                      : 'Actions'}
+                  </span>
+                  {!isFinished && (
+                    <span
+                      className={`text-sm link-button mr-2 ${
+                        screenshotConfirm ? 'text-green' : ''
+                      }`}
+                      data-testid="record-screenshot"
+                      onClick={() => {
+                        recorderRef.current?.onFullScreenshot();
+                        setScreenshotConfirm(true);
+                        setTimeout(() => {
+                          setScreenshotConfirm(false);
+                        }, 2000);
+                      }}
+                    >
+                      <FontAwesomeIcon
+                        icon={screenshotConfirm ? faCheck : faCamera}
+                        size="sm"
+                      />{' '}
+                      Record Screenshot
+                    </span>
+                  )}
+                </div>
+                <div>
+                  {showActionsMode === ActionsMode.Code && (
+                    <>
+                      <ScriptTypeSelect
+                        value={displayedScriptType}
+                        onChange={setPreferredLibrary}
+                      />
+                      <CopyToClipboard
+                        text={genCode(actions, true, displayedScriptType)}
+                        onCopy={() => {
+                          setCopyCodeConfirm(true);
+                          setTimeout(() => {
+                            setCopyCodeConfirm(false);
+                          }, 2000);
+                        }}
+                      >
+                        <span
+                          className={`text-sm link-button ${
+                            copyCodeConfirm ? 'text-green' : ''
+                          }`}
+                        >
+                          <FontAwesomeIcon
+                            icon={copyCodeConfirm ? faCheck : faCopy}
+                            size="sm"
+                          />{' '}
+                          Copy Code
+                        </span>
+                      </CopyToClipboard>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {showActionsMode === ActionsMode.Code && (
+                <CodeGen actions={actions} library={displayedScriptType} />
+              )}
+              {showActionsMode === ActionsMode.Actions && (
+                <ActionList actions={actions} />
+              )}
+            </div>
+          </TabPanel>
+          <TabPanel>
+            <h3> AI TAB </h3>
+            {showCTFlowAI && (
+              <div className="actions-wrapper p-4" style={{}}>
+                <h1> PUCK ME HARD </h1>
+                <AIPanel />
+              </div>
+            )}
+          </TabPanel>
+
+          <TabList>
+            <Tab id="ctflow-recorder-tab-list-btn"> 🎥 Recorder</Tab>
+            <Tab> 🤖 CTFlow AI</Tab>
+          </TabList>
+        </Tabs>
+      </div>
+    </>
   );
 }
diff --git a/src/pages/Popup/AIPanel.tsx b/src/pages/Popup/AIPanel.tsx
new file mode 100644
index 0000000..6a0378c
--- /dev/null
+++ b/src/pages/Popup/AIPanel.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { setRecordingAction } from '../../helpers/firestore';
+import { callRPC } from '../../helpers/pageRPC';
+import { getSimplifiedDom } from '../../helpers/simplifyDom';
+import { callDOMAction } from '../../helpers/domActions';
+import { setAIRecord } from '../../helpers/firestore';
+import { v4 as uuidv4 } from 'uuid';
+
+const AIPanel = () => {
+  const [currentHTML, setCurrentHTML] = useState('');
+  const [simplifiedDom, setSimplifiedDom] = useState('');
+  const [aIRecordId, setAIRecordId] = useState(uuidv4());
+
+  const updateCurrentHTML = async () => {
+    const fullDom = await callRPC('getAnnotatedDOM', [], 3);
+    setCurrentHTML(String(fullDom));
+  };
+
+  const updateSimplifiedDom = async () => {
+    const simplifiedDom = await getSimplifiedDom();
+    setSimplifiedDom(String(simplifiedDom?.innerHTML));
+  };
+
+  useEffect(() => {
+    updateCurrentHTML();
+    updateSimplifiedDom();
+  }, []);
+
+  useEffect(() => {
+    console.log('update AI Record on Firebase');
+    setAIRecord(aIRecordId, 'currentHTML', simplifiedDom);
+  }, [aIRecordId, currentHTML, simplifiedDom]);
+
+  // after the action is determined, perform the action on the browser.
+  const sampleCodeToCallActions = async (action: any) => {
+    if (
+      action === null ||
+      action.parsedAction.name === 'finish' ||
+      action.parsedAction.name === 'fail'
+    ) {
+      return;
+    }
+
+    if (action.parsedAction.name === 'click') {
+      await callDOMAction('click', action.parsedAction.args);
+    } else if (action.parsedAction.name === 'setValue') {
+      await callDOMAction(action?.parsedAction.name, action?.parsedAction.args);
+    }
+  };
+
+  return (
+    <div>
+      <p> {aIRecordId} </p>
+      <h1> FULL DOM </h1>
+      <pre>
+        <code>{currentHTML}</code>
+      </pre>
+
+      <hr />
+
+      <h1> Simplified DOM </h1>
+
+      <pre>{simplifiedDom}</pre>
+    </div>
+  );
+};
+
+export default AIPanel;
diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
index 02dbc86..0232644 100644
--- a/src/pages/Popup/Popup.tsx
+++ b/src/pages/Popup/Popup.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { onPageView, onNewRecording } from './analytics';
 import CTFlowAI from '../../common/CTFlowAI';
+import { callRPC } from '../../helpers/pageRPC';
 
 import { Heading, Text, Box, Badge } from '@chakra-ui/react';
 
@@ -16,6 +17,7 @@ onPageView('/popup');
 
 import RecordingPanel from './RecordingPanel';
 import ConnectionPanel from './ConnectionPanel';
+import AIPanel from './AIPanel';
 
 const Popup = () => {
   return (
@@ -30,6 +32,7 @@ const Popup = () => {
       </Box>
 
       <Accordion allowMultiple>
+        {/* AI PANEL */}
         <AccordionItem>
           <h2>
             <AccordionButton
@@ -57,14 +60,13 @@ const Popup = () => {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            This is the way you work with it
+            <AIPanel></AIPanel>
             <CTFlowAI />
           </AccordionPanel>
         </AccordionItem>
 
+        {/* RECORDING PANEL */}
         <AccordionItem>
           <h2>
             <AccordionButton
@@ -95,7 +97,9 @@ const Popup = () => {
             <RecordingPanel />
           </AccordionPanel>
         </AccordionItem>
+        {/* END OF RECORDING PANEL */}
 
+        {/* SETTINGS PANEL */}
         <AccordionItem>
           <h2>
             <AccordionButton
@@ -118,10 +122,10 @@ const Popup = () => {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi, sit
+            nemo est nulla ex esse quia reiciendis dolorem doloribus. Soluta
+            aperiam modi nobis voluptates facere corrupti? Atque, quam eaque?
+            Laboriosam?
             <ConnectionPanel />
           </AccordionPanel>
         </AccordionItem>
diff --git a/src/pages/builders/index.ts b/src/pages/builders/index.ts
index f22edd5..c2ee9b0 100644
--- a/src/pages/builders/index.ts
+++ b/src/pages/builders/index.ts
@@ -1,4 +1,4 @@
-import { getBestSelectorForAction } from './selector';
+import { getBestSelectorForAction, getSelectorsForAction } from './selector';
 
 import type { Action } from '../types';
 import {
@@ -90,6 +90,7 @@ export class ActionContext extends BaseAction {
 
     switch (type) {
       case ActionType.Click:
+        console.log('description for click action');
         return `Click on <${tagName.toLowerCase()}> ${
           selectors.text != null && selectors.text.length > 0
             ? `"${truncateText(selectors.text.replace(/\s/g, ' '), 25)}"`
@@ -139,6 +140,14 @@ export class ActionContext extends BaseAction {
   getBestSelector(): string | null {
     return getBestSelectorForAction(this.action, this.scriptType);
   }
+
+  getAlternativeSelectors(): string[] {
+    return [];
+  }
+
+  getSelectors(): (null | string)[] {
+    return getSelectorsForAction(this.action, this.scriptType);
+  }
 }
 
 export abstract class ScriptBuilder {
@@ -157,50 +166,64 @@ export abstract class ScriptBuilder {
     this.showComments = showComments;
   }
 
-  abstract click: (selector: string, causesNavigation: boolean) => this;
+  abstract click: (
+    selectors: (null | string)[],
+    causesNavigation: boolean,
+    description: string
+  ) => this;
 
-  abstract hover: (selector: string, causesNavigation: boolean) => this;
+  abstract hover: (
+    selectors: (null | string)[],
+    causesNavigation: boolean,
+    description: string
+  ) => this;
 
-  abstract load: (url: string) => this;
+  abstract load: (url: string, description: string) => this;
 
-  abstract resize: (width: number, height: number) => this;
+  abstract resize: (width: number, height: number, description: string) => this;
 
   abstract fill: (
-    selector: string,
+    selectors: (null | string)[],
     value: string,
-    causesNavigation: boolean
+    causesNavigation: boolean,
+    description: string
   ) => this;
 
   abstract type: (
-    selector: string,
+    selectors: (null | string)[],
     value: string,
-    causesNavigation: boolean
+    causesNavigation: boolean,
+    description: string
   ) => this;
 
   abstract keydown: (
-    selector: string,
+    selectors: (null | string)[],
     key: string,
-    causesNavigation: boolean
+    causesNavigation: boolean,
+    description: string
   ) => this;
 
   abstract select: (
-    selector: string,
+    selectors: (null | string)[],
     key: string,
-    causesNavigation: boolean
+    causesNavigation: boolean,
+    description: string
   ) => this;
 
   abstract wheel: (
     deltaX: number,
     deltaY: number,
     pageXOffset?: number,
-    pageYOffset?: number
+    pageYOffset?: number,
+    description?: string
   ) => this;
 
   abstract dragAndDrop: (
     sourceX: number,
     sourceY: number,
     targetX: number,
-    targetY: number
+    targetY: number,
+    description: string
   ) => this;
 
   abstract fullScreenshot: () => this;
@@ -210,15 +233,18 @@ export abstract class ScriptBuilder {
   abstract buildScript: () => string;
 
   private transformActionIntoCodes = (actionContext: ActionContext) => {
-    if (this.showComments) {
-      const actionDescription = actionContext.getDescription();
-      // this.pushComments(`// ${actionDescription}`);
-      // Don't push description
-    }
+    // if (this.showComments) {
+    //   const actionDescription = actionContext.getDescription();
+    //   // this.pushComments(`// ${actionDescription}`);
+    //   // Don't push description
+    // }
+
+    const actionDescription = actionContext.getDescription();
 
     console.log('build code: Action Context', actionContext);
 
-    const bestSelector = actionContext.getBestSelector();
+    // const bestSelector = actionContext.getBestSelector();
+    const selectors = actionContext.getSelectors();
     const tagName = actionContext.getTagName();
     const value = actionContext.getValue();
     const inputType = actionContext.getInputType();
@@ -228,22 +254,28 @@ export abstract class ScriptBuilder {
 
     switch (actionContext.getType()) {
       case ActionType.Click:
-        this.click(bestSelector as string, causesNavigation);
+        // this.click(bestSelector as string, causesNavigation);
+        this.click(selectors, causesNavigation, actionDescription);
         break;
       case ActionType.Hover:
-        this.hover(bestSelector as string, causesNavigation);
+        this.hover(selectors, causesNavigation, actionDescription);
         break;
       case ActionType.Keydown:
         this.keydown(
-          bestSelector as string,
+          selectors,
           action.key ?? '',
-          causesNavigation
+          causesNavigation,
+          actionDescription
         );
         break;
       case ActionType.Input: {
-        console.log('PUCKING IN PUT HERE', action);
         if (tagName === TagName.Select) {
-          this.select(bestSelector as string, value ?? '', causesNavigation);
+          this.select(
+            selectors,
+            value ?? '',
+            causesNavigation,
+            actionDescription
+          );
         } else if (
           // If the input is "fillable" or a text area
           tagName === TagName.Input &&
@@ -251,26 +283,42 @@ export abstract class ScriptBuilder {
           FILLABLE_INPUT_TYPES.includes(inputType)
         ) {
           // Do more actionability checks
-          this.fill(bestSelector as string, value ?? '', causesNavigation);
+          this.fill(
+            selectors,
+            value ?? '',
+            causesNavigation,
+            actionDescription
+          );
         } else if (tagName === TagName.TextArea) {
-          this.fill(bestSelector as string, value ?? '', causesNavigation);
+          this.fill(
+            selectors,
+            value ?? '',
+            causesNavigation,
+            actionDescription
+          );
         } else {
-          this.type(bestSelector as string, value ?? '', causesNavigation);
+          this.type(
+            selectors,
+            value ?? '',
+            causesNavigation,
+            actionDescription
+          );
         }
         break;
       }
       case ActionType.Load:
-        this.load(action.url);
+        this.load(action.url, actionDescription);
         break;
       case ActionType.Resize:
-        this.resize(action.width, action.height);
+        this.resize(action.width, action.height, actionDescription);
         break;
       case ActionType.Wheel:
         this.wheel(
           action.deltaX,
           action.deltaY,
           action.pageXOffset,
-          action.pageYOffset
+          action.pageYOffset,
+          actionDescription
         );
         break;
       case ActionType.FullScreenshot:
@@ -284,7 +332,8 @@ export abstract class ScriptBuilder {
           action.sourceX,
           action.sourceY,
           action.targetX,
-          action.targetY
+          action.targetY,
+          actionDescription
         );
         break;
       default:
@@ -340,286 +389,6 @@ export abstract class ScriptBuilder {
   getLatestCode = () => this.codes[this.codes.length - 1];
 }
 
-export class PlaywrightScriptBuilder extends ScriptBuilder {
-  private waitForNavigation() {
-    return `page.waitForNavigation()`;
-  }
-
-  private waitForActionAndNavigation(action: string) {
-    return `await Promise.all([\n    ${action},\n    ${this.waitForNavigation()}\n  ]);`;
-  }
-
-  click = (selector: string, causesNavigation: boolean) => {
-    const actionStr = `page.click('${selector}')`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  hover = (selector: string, causesNavigation: boolean) => {
-    const actionStr = `page.hover('${selector}')`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  load = (url: string) => {
-    this.pushCodes(`await page.goto('${url}');`);
-    return this;
-  };
-
-  resize = (width: number, height: number) => {
-    this.pushCodes(
-      `await page.setViewportSize({ width: ${width}, height: ${height} });`
-    );
-    return this;
-  };
-
-  fill = (selector: string, value: string, causesNavigation: boolean) => {
-    const actionStr = `page.fill('${selector}', ${JSON.stringify(value)})`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  type = (selector: string, value: string, causesNavigation: boolean) => {
-    const actionStr = `page.type('${selector}', ${JSON.stringify(value)})`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  select = (selector: string, option: string, causesNavigation: boolean) => {
-    const actionStr = `page.selectOption('${selector}', '${option}')`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  keydown = (selector: string, key: string, causesNavigation: boolean) => {
-    const actionStr = `page.press('${selector}', '${key}')`;
-    const action = causesNavigation
-      ? this.waitForActionAndNavigation(actionStr)
-      : `await ${actionStr};`;
-    this.pushCodes(action);
-    return this;
-  };
-
-  wheel = (deltaX: number, deltaY: number) => {
-    this.pushCodes(
-      `await page.mouse.wheel(${Math.floor(deltaX)}, ${Math.floor(deltaY)});`
-    );
-    return this;
-  };
-
-  fullScreenshot = () => {
-    this.pushCodes(
-      `await page.screenshot({ path: 'screenshot.png', fullPage: true });`
-    );
-    return this;
-  };
-
-  awaitText = (text: string) => {
-    this.pushCodes(`await page.waitForSelector('text=${text}');`);
-    return this;
-  };
-
-  dragAndDrop = (
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-  ) => {
-    this.pushCodes(
-      [
-        `await page.mouse.move(${sourceX}, ${sourceY});`,
-        '  await page.mouse.down();',
-        `  await page.mouse.move(${targetX}, ${targetY});`,
-        '  await page.mouse.up();',
-      ].join('\n')
-    );
-    return this;
-  };
-
-  buildScript = () => {
-    return `import { test, expect } from '@playwright/test';
-
-test('Written with CTFlow Recorder', async ({ page }) => {${this.codes.join(
-      ''
-    )}});`;
-  };
-}
-
-export class PuppeteerScriptBuilder extends ScriptBuilder {
-  private waitForSelector(selector: string) {
-    return `page.waitForSelector('${selector}')`;
-  }
-  private waitForNavigation() {
-    return `page.waitForNavigation()`;
-  }
-  private waitForSelectorAndNavigation(selector: string, action: string) {
-    return `await ${this.waitForSelector(
-      selector
-    )};\n  await Promise.all([\n    ${action},\n    ${this.waitForNavigation()}\n  ]);`;
-  }
-
-  click = (selector: string, causesNavigation: boolean) => {
-    const pageClick = `page.click('${selector}')`;
-    if (causesNavigation) {
-      this.pushCodes(this.waitForSelectorAndNavigation(selector, pageClick));
-    } else {
-      this.pushCodes(
-        `await ${this.waitForSelector(selector)};\n  await ${pageClick};`
-      );
-    }
-    return this;
-  };
-
-  hover = (selector: string, causesNavigation: boolean) => {
-    const pageHover = `page.hover('${selector}')`;
-    if (causesNavigation) {
-      this.pushCodes(this.waitForSelectorAndNavigation(selector, pageHover));
-    } else {
-      this.pushCodes(
-        `await ${this.waitForSelector(selector)};\n  await ${pageHover};`
-      );
-    }
-    return this;
-  };
-
-  load = (url: string) => {
-    this.pushCodes(`await page.goto('${url}');`);
-    return this;
-  };
-
-  resize = (width: number, height: number) => {
-    this.pushCodes(
-      `await page.setViewport({ width: ${width}, height: ${height} });`
-    );
-    return this;
-  };
-
-  type = (selector: string, value: string, causesNavigation: boolean) => {
-    const pageType = `page.type('${selector}', ${JSON.stringify(value)})`;
-    if (causesNavigation) {
-      this.pushCodes(this.waitForSelectorAndNavigation(selector, pageType));
-    } else {
-      this.pushCodes(
-        `await ${this.waitForSelector(selector)};\n  await ${pageType};`
-      );
-    }
-    return this;
-  };
-
-  // Puppeteer doesn't support `fill` so we'll do our own actionability checks
-  // but still type
-  fill = (selector: string, value: string, causesNavigation: boolean) => {
-    const pageType = `page.type('${selector}', ${JSON.stringify(value)})`;
-    if (causesNavigation) {
-      this.pushCodes(
-        this.waitForSelectorAndNavigation(
-          `${selector}:not([disabled])`,
-          pageType
-        )
-      );
-    } else {
-      // Do more actionability checks
-      this.pushCodes(
-        `await ${this.waitForSelector(
-          `${selector}:not([disabled])`
-        )};\n  await ${pageType};`
-      );
-    }
-    return this;
-  };
-
-  select = (selector: string, option: string, causesNavigation: boolean) => {
-    const pageSelectOption = `page.select('${selector}', '${option}')`;
-    if (causesNavigation) {
-      this.pushCodes(
-        this.waitForSelectorAndNavigation(selector, pageSelectOption)
-      );
-    } else {
-      this.pushCodes(
-        `await ${this.waitForSelector(selector)};\n  await ${pageSelectOption};`
-      );
-    }
-    return this;
-  };
-
-  keydown = (selector: string, key: string, causesNavigation: boolean) => {
-    const pagePress = `page.keyboard.press('${key}')`;
-    if (causesNavigation) {
-      this.pushCodes(this.waitForSelectorAndNavigation(selector, pagePress));
-    } else {
-      this.pushCodes(
-        `await page.waitForSelector('${selector}');\n  await page.keyboard.press('${key}');`
-      );
-    }
-    return this;
-  };
-
-  wheel = (deltaX: number, deltaY: number) => {
-    this.pushCodes(
-      `await page.evaluate(() => window.scrollBy(${deltaX}, ${deltaY}));`
-    );
-    return this;
-  };
-
-  fullScreenshot = () => {
-    this.pushCodes(
-      `await page.screenshot({ path: 'screenshot.png', fullPage: true });`
-    );
-    return this;
-  };
-
-  awaitText = (text: string) => {
-    this.pushCodes(
-      `await page.waitForFunction("document.body.innerText.includes('${text}')");`
-    );
-    return this;
-  };
-
-  dragAndDrop = (
-    sourceX: number,
-    sourceY: number,
-    targetX: number,
-    targetY: number
-  ) => {
-    this.pushCodes(
-      [
-        `await page.mouse.move(${sourceX}, ${sourceY});`,
-        '  await page.mouse.down();',
-        `  await page.mouse.move(${targetX}, ${targetY});`,
-        '  await page.mouse.up();',
-      ].join('\n')
-    );
-    return this;
-  };
-
-  buildScript = () => {
-    return `const puppeteer = require('puppeteer');
-(async () => {
-  const browser = await puppeteer.launch({
-    // headless: false, slowMo: 100, // Uncomment to visualize test
-  });
-  const page = await browser.newPage();
-${this.codes.join('')}
-  await browser.close();
-})();`;
-  };
-}
-
 export class CypressScriptBuilder extends ScriptBuilder {
   // constructor = (showComments: boolean) {
 
@@ -648,9 +417,12 @@ export class CypressScriptBuilder extends ScriptBuilder {
   }
 
   // Cypress automatically detects and waits for the page to finish loading
-  click = (selector: string, causesNavigation: boolean) => {
+  click = (
+    selectors: (null | string)[],
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').click();`);
-
     const id = this.findOrCreateId();
     this.pushCodes(`
   ${id}:
@@ -659,24 +431,32 @@ export class CypressScriptBuilder extends ScriptBuilder {
       x: 0
       y: 0
     type: buttonNode
-    description: description
+    description: ${description}
     componentName: compName
     outputQ:
       - outputQ
     inPorts:
-      field: '${selector}'
+      field: '${selectors[0] as string}'
+      alternative_selectors: ${selectors
+        .slice(1)
+        .map((x) => `\n        - '${x}'`)
+        .join('')}
     outPorts: {}
     data: {}`);
 
     return this;
   };
 
-  hover = (selector: string, causesNavigation: boolean) => {
+  hover = (
+    selectors: (null | string)[],
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').trigger('mouseover');`);
     return this;
   };
 
-  load = (url: string) => {
+  load = (url: string, description: string) => {
     // this.pushCodes(`cy.visit('${url}');`);
 
     const id = this.findOrCreateId();
@@ -687,7 +467,7 @@ export class CypressScriptBuilder extends ScriptBuilder {
       x: 0
       y: 0
     type: visitNode
-    description: description
+    description: ${description}
     componentName: compName
     outputQ:
       - outputQ
@@ -698,12 +478,17 @@ export class CypressScriptBuilder extends ScriptBuilder {
     return this;
   };
 
-  resize = (width: number, height: number) => {
+  resize = (width: number, height: number, description: string) => {
     // this.pushCodes(`cy.viewport(${width}, ${height});`);
     return this;
   };
 
-  fill = (selector: string, value: string, causesNavigation: boolean) => {
+  fill = (
+    selectors: (null | string)[],
+    value: string,
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)});`);
 
     const id = this.findOrCreateId();
@@ -714,29 +499,48 @@ export class CypressScriptBuilder extends ScriptBuilder {
       x: 0
       y: 0
     type: textInputType
-    description: description
+    description: ${description}
     componentName: compName
     outputQ:
       - outputQ
     inPorts:
-      field: '${selector}'
+      field: '${selectors[0] as string}'
+      alternative_selectors: ${selectors
+        .slice(1)
+        .map((x) => `\n        - '${x}'`)
+        .join('')}
       value: ${JSON.stringify(value)}
     outPorts: {}
     data: {}`);
     return this;
   };
 
-  type = (selector: string, value: string, causesNavigation: boolean) => {
+  type = (
+    selectors: (null | string)[],
+    value: string,
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').type(${JSON.stringify(value)});`);
     return this;
   };
 
-  select = (selector: string, option: string, causesNavigation: boolean) => {
+  select = (
+    selectors: (null | string)[],
+    option: string,
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').select('${option}');`);
     return this;
   };
 
-  keydown = (selector: string, key: string, causesNavigation: boolean) => {
+  keydown = (
+    selectors: (null | string)[],
+    key: string,
+    causesNavigation: boolean,
+    description: string
+  ) => {
     // this.pushCodes(`cy.get('${selector}').type('{${key}}');`);
     return this;
   };
@@ -815,12 +619,6 @@ export const genCode = (
   let scriptBuilder: ScriptBuilder;
 
   switch (scriptType) {
-    case ScriptType.Playwright:
-      scriptBuilder = new PlaywrightScriptBuilder(showComments);
-      break;
-    case ScriptType.Puppeteer:
-      scriptBuilder = new PuppeteerScriptBuilder(showComments);
-      break;
     case ScriptType.Cypress:
       scriptBuilder = new CypressScriptBuilder(showComments);
       break;
diff --git a/src/pages/builders/selector.ts b/src/pages/builders/selector.ts
index 6892e41..0727dc7 100644
--- a/src/pages/builders/selector.ts
+++ b/src/pages/builders/selector.ts
@@ -108,6 +108,7 @@ export default function genSelectors(element: HTMLElement | null) {
 }
 
 export function getBestSelectorForAction(action: Action, library: ScriptType) {
+  console.log('Choose the best selector');
   switch (action.type) {
     case ActionType.Click:
     case ActionType.Hover:
@@ -192,3 +193,89 @@ export function getBestSelectorForAction(action: Action, library: ScriptType) {
   }
   return null;
 }
+
+// This function will get all selectors based on the priority instead of the best.
+export function getSelectorsForAction(
+  action: Action,
+  library: ScriptType
+): (string | null)[] {
+  switch (action.type) {
+    case ActionType.Click:
+    case ActionType.Hover:
+    case ActionType.DragAndDrop: {
+      const selectors = action.selectors;
+      console.log('Choose the best selector,', selectors);
+      // Only supported for playwright, less than 25 characters, and element only has text inside
+      const textSelector =
+        library === ScriptType.Playwright &&
+        selectors?.text?.length != null &&
+        selectors?.text?.length < 25 &&
+        action.hasOnlyText
+          ? `text=${selectors.text}`
+          : null;
+
+      if (action.tagName === TagName.Input) {
+        return [
+          selectors.testIdSelector,
+          selectors?.id,
+          selectors?.formSelector,
+          selectors?.accessibilitySelector,
+          selectors?.generalSelector,
+          selectors?.attrSelector,
+        ].filter((x) => x != null);
+      }
+      if (action.tagName === TagName.A) {
+        return [
+          selectors.testIdSelector,
+          selectors?.id,
+          selectors?.hrefSelector,
+          selectors?.accessibilitySelector,
+          selectors?.generalSelector,
+          selectors?.attrSelector,
+        ].filter((x) => x != null);
+      }
+
+      // Prefer text selectors for spans, ems over general selectors
+      if (
+        action.tagName === TagName.Span ||
+        action.tagName === TagName.EM ||
+        action.tagName === TagName.Cite ||
+        action.tagName === TagName.B ||
+        action.tagName === TagName.Strong
+      ) {
+        return [
+          selectors.testIdSelector,
+          selectors?.id,
+          selectors?.accessibilitySelector,
+          selectors?.hrefSelector,
+          textSelector,
+          selectors?.generalSelector,
+          selectors?.attrSelector,
+        ].filter((x) => x != null);
+      }
+      return [
+        selectors.testIdSelector,
+        selectors?.id,
+        selectors?.accessibilitySelector,
+        selectors?.hrefSelector,
+        selectors?.generalSelector,
+        selectors?.attrSelector,
+      ].filter((x) => x != null);
+    }
+    case ActionType.Input:
+    case ActionType.Keydown: {
+      const selectors = action.selectors;
+      return [
+        selectors.testIdSelector,
+        selectors?.id,
+        selectors?.formSelector,
+        selectors?.accessibilitySelector,
+        selectors?.generalSelector,
+        selectors?.attrSelector,
+      ].filter((x) => x != null);
+    }
+    default:
+      break;
+  }
+  return [];
+}
