diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 2826c4fcd71e..a9c7e65d5b92 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -2867,10 +2867,15 @@ declare namespace Cypress {
      */
     experimentalModifyObstructiveThirdPartyCode: boolean
     /**
-     * Generate and save commands directly to your test suite by interacting with your app as an end user would.
+     * Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.
      * @default false
      */
     experimentalSourceRewriting: boolean
+    /**
+     * Generate and save commands directly to your test suite by interacting with your app as an end user would.
+     * @default false
+     */
+    experimentalStudio: boolean
     /**
      * Number of times to retry a failed test.
      * If a number is set, tests will retry in both runMode and openMode.
@@ -3073,7 +3078,7 @@ declare namespace Cypress {
     }
   }
 
-  interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin'> {
+  interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin' | 'experimentalStudio'> {
     devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigOptions
     devServerConfig?: ComponentDevServerOpts
     /**
diff --git a/packages/app/cypress.config.ts b/packages/app/cypress.config.ts
index 7c42687ab789..4c12cd5dfffb 100644
--- a/packages/app/cypress.config.ts
+++ b/packages/app/cypress.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
     },
   },
   'e2e': {
+    experimentalStudio: true,
     baseUrl: 'http://localhost:5555',
     supportFile: 'cypress/e2e/support/e2eSupport.ts',
     async setupNodeEvents (on, config) {
diff --git a/packages/app/cypress/component/support/ctSupport.ts b/packages/app/cypress/component/support/ctSupport.ts
index 8cc2a4393a75..afcb5e02a8f7 100644
--- a/packages/app/cypress/component/support/ctSupport.ts
+++ b/packages/app/cypress/component/support/ctSupport.ts
@@ -2,8 +2,6 @@ import { AutIframe } from '../../../src/runner/aut-iframe'
 import { EventManager } from '../../../src/runner/event-manager'
 import type { Socket } from '@packages/socket/lib/browser'
 
-class StudioRecorderMock {}
-
 export const StubWebsocket = new Proxy<Socket>(Object.create(null), {
   get: (obj, prop) => {
     throw Error(`Cannot access ${String(prop)} on StubWebsocket!`)
@@ -29,7 +27,6 @@ export const createEventManager = () => {
     // @ts-ignore
     null, // MobX, also not needed in Vue CT tests,
     null, // selectorPlaygroundModel,
-    StudioRecorderMock, // needs to be a valid class
     StubWebsocket,
   )
 }
@@ -53,6 +50,5 @@ export const createTestAutIframe = (eventManager = createEventManager()) => {
     // dom - imports driver which causes problems
     // so just stubbing it out for now
     mockDom,
-    eventManager.studioRecorder,
   )
 }
diff --git a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
index c4a1da589e05..c8605e3b20a3 100644
--- a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
@@ -148,7 +148,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
   })
 
   it('shows a compilation error with a malformed spec', { viewportHeight: 596, viewportWidth: 1000 }, () => {
-    const expectedAutHeight = 500 // based on explicitly setting viewport in this test to 596
+    const expectedAutHeight = 456 // based on explicitly setting viewport in this test to 596
 
     cy.visitApp()
 
diff --git a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
index 1c3cb50838e4..1aa3a064a65f 100644
--- a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
@@ -247,7 +247,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.visitApp()
       cy.contains('dom-content.spec').click()
 
-      cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
+      cy.findByTestId('aut-url-input').invoke('val').should('contain', 'http://localhost:4455/cypress/e2e/dom-content.html')
       cy.findByLabelText('Stats').should('not.exist')
       cy.findByTestId('specs-list-panel').should('not.be.visible')
       cy.findByTestId('reporter-panel').should('not.be.visible')
diff --git a/packages/app/cypress/e2e/reporter_header.cy.ts b/packages/app/cypress/e2e/reporter_header.cy.ts
index 3f5186584463..679c9e29b6d7 100644
--- a/packages/app/cypress/e2e/reporter_header.cy.ts
+++ b/packages/app/cypress/e2e/reporter_header.cy.ts
@@ -19,18 +19,20 @@ describe('Reporter Header', () => {
     it('filters the list of specs when searching for specs', () => {
       cy.get('body').type('f')
 
-      cy.get('input').type('dom', { force: true })
+      cy.findByTestId('specs-list-panel').within(() => {
+        cy.get('input').as('searchInput').type('dom', { force: true })
+      })
 
       cy.get('[data-cy="spec-file-item"]').should('have.length', 3)
       .should('contain', 'dom-content.spec')
 
-      cy.get('input').clear()
+      cy.get('@searchInput').clear()
 
       cy.get('[data-cy="spec-file-item"]').should('have.length', 3)
 
-      cy.get('input').type('asdf', { force: true })
+      cy.get('@searchInput').type('asdf', { force: true })
 
-      cy.get('[data-cy="spec-file-item"]').should('have.length', 0)
+      cy.findByTestId('spec-file-item').should('have.length', 0)
     })
   })
 
diff --git a/packages/app/cypress/e2e/studio/README.md b/packages/app/cypress/e2e/studio/README.md
new file mode 100644
index 000000000000..f27e48a18c12
--- /dev/null
+++ b/packages/app/cypress/e2e/studio/README.md
@@ -0,0 +1,3 @@
+## Cypress Studio Tests
+
+These are the tests for the Cypress Studio feature. [Learn more here](https://docs.cypress.io/guides/references/cypress-studio).
\ No newline at end of file
diff --git a/packages/app/cypress/e2e/studio/helper.ts b/packages/app/cypress/e2e/studio/helper.ts
new file mode 100644
index 000000000000..59a98e57f520
--- /dev/null
+++ b/packages/app/cypress/e2e/studio/helper.ts
@@ -0,0 +1,24 @@
+export function launchStudio () {
+  cy.scaffoldProject('experimental-studio')
+  cy.openProject('experimental-studio')
+  cy.startAppServer('e2e')
+  cy.visitApp()
+  cy.get(`[data-cy-row="spec.cy.js"]`).click()
+
+  cy.waitForSpecToFinish()
+
+  // Should not show "Studio Commands" until we've started a new Studio session.
+  cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+  cy
+  .contains('visits a basic html page')
+  .closest('.runnable-wrapper')
+  .realHover()
+  .findByTestId('launch-studio')
+  .click()
+
+  // Studio re-executes spec before waiting for commands - wait for the spec to finish executing.
+  cy.waitForSpecToFinish()
+
+  cy.get('[data-cy="hook-name-studio commands"]').should('exist')
+}
diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts
new file mode 100644
index 000000000000..5e9df380b3a0
--- /dev/null
+++ b/packages/app/cypress/e2e/studio/studio.cy.ts
@@ -0,0 +1,258 @@
+import { launchStudio } from './helper'
+
+describe('Cypress Studio', () => {
+  it('updates an existing test with a click action', () => {
+    function addStudioClick (initialCount: number) {
+      cy.getAutIframe().within(() => {
+        cy.get('p').contains(`Count is ${initialCount}`)
+
+        // (1) First Studio action - get
+        cy.get('#increment')
+
+        // (2) Second Studio action - click
+        .realClick().then(() => {
+          cy.get('p').contains(`Count is ${initialCount + 1}`)
+        })
+      })
+    }
+
+    launchStudio()
+
+    cy.get('button').contains('Save Commands').should('be.disabled')
+
+    addStudioClick(0)
+
+    cy.get('button').contains('Save Commands').should('not.be.disabled')
+
+    cy.get('.studio-command-remove').click()
+
+    cy.get('button').contains('Save Commands').should('be.disabled')
+
+    addStudioClick(1)
+
+    cy.get('button').contains('Save Commands').should('not.be.disabled')
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+it('visits a basic html page', () => {
+  cy.visit('cypress/e2e/index.html')
+  /* ==== Generated with Cypress Studio ==== */
+  cy.get('#increment').click();
+  /* ==== End Cypress Studio ==== */
+})`.trim())
+    })
+
+    // Studio re-executes the test after writing it file.
+    // It should pass
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    // Assert the commands we input via Studio are executed.
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('.command-name-get').within(() => {
+      cy.contains('get')
+      cy.contains('#increment')
+    })
+
+    cy.get('.command-name-click').within(() => {
+      cy.contains('click')
+    })
+  })
+
+  it('writes a test with all kinds of assertions', () => {
+    function assertStudioHookCount (num: number) {
+      cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+        cy.get('.command').should('have.length', num)
+      })
+    }
+
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').rightclick().then(() => {
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('be enabled').realClick()
+      })
+    })
+
+    assertStudioHookCount(2)
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').rightclick().then(() => {
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('be visible').realClick()
+      })
+    })
+
+    assertStudioHookCount(4)
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').rightclick().then(() => {
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('have text').realHover()
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('Increment').realClick()
+      })
+    })
+
+    assertStudioHookCount(6)
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').rightclick().then(() => {
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('have id').realHover()
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('increment').realClick()
+      })
+    })
+
+    assertStudioHookCount(8)
+
+    cy.getAutIframe().within(() => {
+      cy.get('#increment').rightclick().then(() => {
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('have attr').realHover()
+        cy.get('.__cypress-studio-assertions-menu').shadow().contains('onclick').realClick()
+      })
+    })
+
+    assertStudioHookCount(10)
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      // 10 Commands - 5 assertions, each is a child of the subject's `cy.get`
+      cy.get('.command').should('have.length', 10)
+
+      // 5x cy.get Commands
+      cy.get('.command-name-get').should('have.length', 5)
+
+      // 5x Assertion Commands
+      cy.get('.command-name-assert').should('have.length', 5)
+
+      // (1) Assert Enabled
+      cy.get('.command-name-assert').should('contain.text', 'expect <button#increment> to be enabled')
+
+      // (2) Assert Visible
+      cy.get('.command-name-assert').should('contain.text', 'expect <button#increment> to be visible')
+
+      // (3) Assert Text
+      cy.get('.command-name-assert').should('contain.text', 'expect <button#increment> to have text Increment')
+
+      // (4) Assert Id
+      cy.get('.command-name-assert').should('contain.text', 'expect <button#increment> to have id increment')
+
+      // (5) Assert Attr
+      cy.get('.command-name-assert').should('contain.text', 'expect <button#increment> to have attr onclick with the value increment()')
+    })
+
+    cy.get('button').contains('Save Commands').click()
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+it('visits a basic html page', () => {
+  cy.visit('cypress/e2e/index.html')
+  /* ==== Generated with Cypress Studio ==== */
+  cy.get('#increment').should('be.enabled');
+  cy.get('#increment').should('be.visible');
+  cy.get('#increment').should('have.text', 'Increment');
+  cy.get('#increment').should('have.id', 'increment');
+  cy.get('#increment').should('have.attr', 'onclick', 'increment()');
+  /* ==== End Cypress Studio ==== */
+})`
+      .trim())
+    })
+  })
+
+  it('creates a test using Studio, but cancels and does not write to file', () => {
+    launchStudio()
+
+    cy.getAutIframe().within(() => {
+      cy.get('p').contains('Count is 0')
+
+      // (1) First Studio action - get
+      cy.get('#increment')
+
+      // (2) Second Studio action - click
+      .realClick().then(() => {
+        cy.get('p').contains('Count is 1')
+      })
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').closest('.hook-studio').within(() => {
+      cy.get('.command').should('have.length', 2)
+      // (1) Get Command
+      cy.get('.command-name-get').should('contain.text', '#increment')
+
+      // (2) Click Command
+      cy.get('.command-name-click').should('contain.text', 'click')
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('exist')
+
+    cy.get('a').contains('Cancel').click()
+
+    // Cyprss re-runs after you cancel Studio.
+    // Original spec should pass
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.get('.command').should('have.length', 1)
+
+    // Assert the spec was executed without any new commands.
+    cy.get('.command-name-visit').within(() => {
+      cy.contains('visit')
+      cy.contains('cypress/e2e/index.html')
+    })
+
+    cy.get('[data-cy="hook-name-studio commands"]').should('not.exist')
+
+    cy.withCtx(async (ctx) => {
+      const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec.cy.js')
+
+      // No change, since we cancelled.
+      expect(spec.trim().replace(/\r/g, '')).to.eq(`
+it('visits a basic html page', () => {
+  cy.visit('cypress/e2e/index.html')
+})`.trim())
+    })
+  })
+
+  // TODO: Can we somehow do the "Create Test" workflow within Cypress in Cypress?
+  it('creates a brand new test', () => {
+    cy.scaffoldProject('experimental-studio')
+    cy.openProject('experimental-studio')
+    cy.startAppServer('e2e')
+    cy.visitApp()
+    cy.get(`[title="empty.cy.js"]`).should('be.visible').click()
+
+    cy.waitForSpecToFinish()
+
+    cy.contains('Create test with Cypress Studio').click()
+    cy.get('[data-cy="aut-url"]').as('urlPrompt')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').should('be.disabled')
+    })
+
+    cy.get('@urlPrompt').type('http://localhost:4455/cypress/e2e/index.html')
+
+    cy.get('@urlPrompt').within(() => {
+      cy.contains('Continue ➜').should('not.be.disabled')
+      cy.contains('Cancel').click()
+    })
+
+    // TODO: Can we somehow do the "Create Test" workflow within Cypress in Cypress?
+    // If we hit "Continue" here, it updates the domain (as expected) but since we are
+    // Cypress in Cypress, it redirects us the the spec page, which is not what normally
+    // would happen in production.
+  })
+})
diff --git a/packages/app/src/main.ts b/packages/app/src/main.ts
index 4404c76e8474..823e76761253 100644
--- a/packages/app/src/main.ts
+++ b/packages/app/src/main.ts
@@ -4,14 +4,13 @@ import 'virtual:windi.css'
 import urql from '@urql/vue'
 import App from './App.vue'
 import { makeUrqlClient } from '@packages/frontend-shared/src/graphql/urqlClient'
-import { decodeBase64Unicode } from '@packages/frontend-shared/src/utils/base64'
 import { createI18n } from '@cy/i18n'
 import { createRouter } from './router/router'
 import { injectBundle } from './runner/injectBundle'
 import { createPinia } from './store'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
-import { createWebsocket } from './runner'
+import { createWebsocket, getRunnerConfigFromWindow } from './runner'
 
 // set a global so we can run
 // conditional code in the vite branch
@@ -21,7 +20,7 @@ window.__vite__ = true
 
 const app = createApp(App)
 
-const config = JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__.base64Config)) as Cypress.Config
+const config = getRunnerConfigFromWindow()
 
 const ws = createWebsocket(config.socketIoRoute)
 
diff --git a/packages/app/src/navigation/KeyboardBindingsModal.vue b/packages/app/src/navigation/KeyboardBindingsModal.vue
index fb1457dc70eb..7df4956b3193 100644
--- a/packages/app/src/navigation/KeyboardBindingsModal.vue
+++ b/packages/app/src/navigation/KeyboardBindingsModal.vue
@@ -5,7 +5,7 @@
     :title="t('sidebar.keyboardShortcuts.title')"
     :model-value="show"
     data-cy="keyboard-modal"
-    help-link=""
+    :no-help="true"
     @update:model-value="emits('close')"
   >
     <ul class="m-24px w-384px">
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
index a7bd4efc18fa..8682511b6546 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -125,7 +125,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       },
     })
 
-    cy.contains(url).should('exist').should('have.attr', 'href', url)
+    cy.findByTestId('aut-url-input').invoke('val').should('contain', url)
     cy.percySnapshot()
   })
 
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
index 3482e870da5c..c02baf0b4b15 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -23,14 +23,25 @@
         >
           <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
-        <a
+        <input
+          ref="autUrlInputRef"
           target="_blank"
-          :href="autStore.url"
-          class="mr-12px leading-normal max-w-100% text-indigo-500 self-center hocus-link-default truncate"
+          :value="studioStore.needsUrl ? urlInProgress : autUrl"
+          data-cy="aut-url-input"
+          class="flex flex-grow mr-12px leading-normal max-w-100% text-indigo-500 z-51 self-center hocus-link-default truncate"
+          @input="setStudioUrl"
+          @click="openInNewTab"
+          @keyup.enter="visitUrl"
         >
-          {{ autStore.url }}
-        </a>
+        <StudioUrlPrompt
+          v-if="studioStore.needsUrl"
+          :aut-url-input-ref="autUrlInputRef"
+          :url-in-progress="urlInProgress"
+          @submit="visitUrl"
+          @cancel="() => eventManager.emit('studio:cancel', undefined)"
+        />
       </div>
+
       <div
         v-else
         class="flex-grow"
@@ -129,6 +140,8 @@
       :event-manager="eventManager"
     />
 
+    <StudioControls v-if="studioStore.isActive" />
+
     <Alert
       v-model="showAlert"
       status="success"
@@ -160,11 +173,14 @@ import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
+import StudioControls from './studio/StudioControls.vue'
+import StudioUrlPrompt from './studio/StudioUrlPrompt.vue'
 import VerticalBrowserListItems from '@packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue'
 import InlineCodeFragment from '@packages/frontend-shared/src/components/InlineCodeFragment.vue'
 import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import BookIcon from '~icons/cy/book_x16'
+import { useStudioStore } from '../store/studio-store'
 
 gql`
 fragment SpecRunnerHeader on CurrentProject {
@@ -189,6 +205,12 @@ const specStore = useSpecStore()
 
 const route = useRoute()
 
+const studioStore = useStudioStore()
+
+const urlInProgress = ref('')
+
+const autUrlInputRef = ref<HTMLInputElement>()
+
 const props = defineProps<{
   gql: SpecRunnerHeaderFragment
   eventManager: EventManager
@@ -209,6 +231,14 @@ const displayScale = computed(() => {
   return autStore.scale < 1 ? `${Math.round(autStore.scale * 100) }%` : 0
 })
 
+const autUrl = computed(() => {
+  if (studioStore.isActive && studioStore.url) {
+    return studioStore.url
+  }
+
+  return autStore.url
+})
+
 const selectorPlaygroundStore = useSelectorPlaygroundStore()
 
 const togglePlayground = () => _togglePlayground(autIframe)
@@ -220,4 +250,21 @@ const activeSpecPath = specStore.activeSpec?.absolute
 
 const isDisabled = computed(() => autStore.isRunning || autStore.isLoading)
 
+function setStudioUrl (event: Event) {
+  const url = (event.currentTarget as HTMLInputElement).value
+
+  urlInProgress.value = url
+}
+
+function visitUrl () {
+  studioStore.visitUrl(urlInProgress.value)
+}
+
+function openInNewTab () {
+  if (!autStore.url || studioStore.isActive) {
+    return
+  }
+
+  window.open(autStore.url, '_blank')?.focus()
+}
 </script>
diff --git a/packages/app/src/runner/SpecRunnerOpenMode.vue b/packages/app/src/runner/SpecRunnerOpenMode.vue
index efa65c8d5298..4bfa040d18cd 100644
--- a/packages/app/src/runner/SpecRunnerOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerOpenMode.vue
@@ -1,4 +1,12 @@
 <template>
+  <StudioInstructionsModal
+    :open="studioStore.instructionModalIsOpen"
+    @close="studioStore.closeInstructionModal"
+  />
+  <StudioSaveModal
+    :open="studioStore.saveModalIsOpen"
+    @close="studioStore.closeSaveModal"
+  />
   <AdjustRunnerStyleDuringScreenshot
     id="main-pane"
     class="flex border-gray-900"
@@ -120,6 +128,9 @@ import { useEventManager } from './useEventManager'
 import AutomationDisconnected from './automation/AutomationDisconnected.vue'
 import AutomationMissing from './automation/AutomationMissing.vue'
 import { runnerConstants } from './runner-constants'
+import StudioInstructionsModal from './studio/StudioInstructionsModal.vue'
+import StudioSaveModal from './studio/StudioSaveModal.vue'
+import { useStudioStore } from '../store/studio-store'
 
 const {
   preferredMinimumPanelWidth,
@@ -191,6 +202,8 @@ const {
   cleanupRunner,
 } = useEventManager()
 
+const studioStore = useStudioStore()
+
 const specsListWidthPreferences = computed(() => {
   return props.gql.localSettings.preferences.specListWidth ?? runnerUiStore.specListWidth
 })
diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
index d54d4f6bf13d..8f82ab4e2644 100644
--- a/packages/app/src/runner/aut-iframe.ts
+++ b/packages/app/src/runner/aut-iframe.ts
@@ -4,6 +4,7 @@ import { logger } from './logger'
 import _ from 'lodash'
 /* eslint-disable no-duplicate-imports */
 import type { DebouncedFunc } from 'lodash'
+import { useStudioStore } from '../store/studio-store'
 
 // JQuery bundled w/ Cypress
 type $CypressJQuery = any
@@ -18,7 +19,6 @@ export class AutIframe {
     private eventManager: any,
     private $: $CypressJQuery,
     private dom: any,
-    private studioRecorder: any,
   ) {
     this.debouncedToggleSelectorPlayground = _.debounce(this.toggleSelectorPlayground, 300)
   }
@@ -76,7 +76,7 @@ export class AutIframe {
   }
 
   _body () {
-    return this._contents()?.find('body')
+    return this._contents()?.find('body') as unknown as JQuery<HTMLBodyElement>
   }
 
   detachDom = () => {
@@ -481,15 +481,25 @@ export class AutIframe {
     })
   }
 
-  startStudio = () => {
-    if (this.studioRecorder.isLoading) {
-      this.studioRecorder.start(this._body()?.[0])
+  startStudio () {
+    const studioStore = useStudioStore()
+
+    if (studioStore.isLoading) {
+      studioStore.start(this._body()?.[0])
     }
   }
 
-  reattachStudio = () => {
-    if (this.studioRecorder.isActive) {
-      this.studioRecorder.attachListeners(this._body()?.[0])
+  reattachStudio () {
+    const studioStore = useStudioStore()
+
+    if (studioStore.isActive) {
+      const body = this._body()?.[0]
+
+      if (!body) {
+        throw Error(`Cannot reattach Studio without the HTMLBodyElement for the app`)
+      }
+
+      studioStore.attachListeners(body)
     }
   }
 }
diff --git a/packages/app/src/runner/event-manager-types.ts b/packages/app/src/runner/event-manager-types.ts
index 5d77d2a1bfe8..3ea8efdadb94 100644
--- a/packages/app/src/runner/event-manager-types.ts
+++ b/packages/app/src/runner/event-manager-types.ts
@@ -1,5 +1,6 @@
 import type { FileDetails } from '@packages/types'
 import type { ScriptError } from '../store'
+import type { CommandLog, StudioLog } from '../store/studio-store'
 import type { CypressInCypressMochaEvent } from './event-manager'
 
 interface BeforeScreenshot {
@@ -20,9 +21,31 @@ export type LocalBusEventMap = {
   'open:file': FileDetails
 }
 
+export interface StudioSavePayload {
+  fileDetails?: FileDetails
+  absoluteFile: string
+  runnableTitle?: string
+  commands: StudioLog[]
+  isSuite: boolean
+  isRoot: boolean
+  testName?: string
+}
+
 export type LocalBusEmitsMap = {
+  // Local Bus
+  'restart': undefined
   'open:file': FileDetails
   'cypress:in:cypress:run:complete': CypressInCypressMochaEvent[]
+
+  // Studio Events
+  'studio:save': StudioSavePayload
+  'studio:cancel': undefined
+  'studio:copy:to:clipboard': () => void
+
+  // Reporter Events
+  'reporter:log:add': CommandLog
+  'reporter:log:remove': CommandLog
+  'reporter:log:state:changed': CommandLog
 }
 
 export type SocketToDriverMap = {
@@ -32,4 +55,5 @@ export type SocketToDriverMap = {
 export type DriverToLocalBus = {
   'visit:blank': { type?: 'session' | 'session-lifecycle' }
   'visit:failed': { status?: string, statusText: string, contentType?: () => string }
+  'page:loading': boolean
 }
diff --git a/packages/app/src/runner/event-manager.ts b/packages/app/src/runner/event-manager.ts
index f8170a65df74..8a907ba023b3 100644
--- a/packages/app/src/runner/event-manager.ts
+++ b/packages/app/src/runner/event-manager.ts
@@ -11,6 +11,7 @@ import type { Socket } from '@packages/socket/lib/browser'
 import * as cors from '@packages/network/lib/cors'
 import { automation, useRunnerUiStore } from '../store'
 import { useScreenshotStore } from '../store/screenshot-store'
+import { useStudioStore } from '../store/studio-store'
 import { getAutIframeModel } from '.'
 
 export type CypressInCypressMochaEvent = Array<Array<string | Record<string, any>>>
@@ -52,11 +53,11 @@ export class EventManager {
   reporterBus: EventEmitter = new EventEmitter()
   localBus: EventEmitter = new EventEmitter()
   Cypress?: $Cypress
-  studioRecorder: any
   selectorPlaygroundModel: any
   cypressInCypressMochaEvents: CypressInCypressMochaEvent[] = []
   // Used for testing the experimentalSingleTabRunMode experiment. Ensures AUT is correctly destroyed between specs.
   ws: Socket
+  studioStore: ReturnType<typeof useStudioStore>
 
   constructor (
     // import '@packages/driver'
@@ -65,13 +66,11 @@ export class EventManager {
     private Mobx: typeof MobX,
     // selectorPlaygroundModel singleton
     selectorPlaygroundModel: any,
-    // StudioRecorder constructor
-    StudioRecorderCtor: any,
     ws: Socket,
   ) {
-    this.studioRecorder = new StudioRecorderCtor(this)
     this.selectorPlaygroundModel = selectorPlaygroundModel
     this.ws = ws
+    this.studioStore = useStudioStore()
   }
 
   getCypress () {
@@ -150,7 +149,7 @@ export class EventManager {
     })
 
     this.ws.on('watched:file:changed', () => {
-      this.studioRecorder.cancel()
+      this.studioStore.cancel()
       rerun()
     })
 
@@ -281,38 +280,32 @@ export class EventManager {
     })
 
     const studioInit = () => {
-      this.ws.emit('studio:init', (showedStudioModal) => {
-        if (!showedStudioModal) {
-          this.studioRecorder.showInitModal()
-        } else {
-          rerun()
-        }
-      })
+      rerun()
     }
 
     this.reporterBus.on('studio:init:test', (testId) => {
-      this.studioRecorder.setTestId(testId)
+      this.studioStore.setTestId(testId)
 
       studioInit()
     })
 
     this.reporterBus.on('studio:init:suite', (suiteId) => {
-      this.studioRecorder.setSuiteId(suiteId)
+      this.studioStore.setSuiteId(suiteId)
 
       studioInit()
     })
 
     this.reporterBus.on('studio:cancel', () => {
-      this.studioRecorder.cancel()
+      this.studioStore.cancel()
       rerun()
     })
 
     this.reporterBus.on('studio:remove:command', (commandId) => {
-      this.studioRecorder.removeLog(commandId)
+      this.studioStore.removeLog(commandId)
     })
 
     this.reporterBus.on('studio:save', () => {
-      this.studioRecorder.startSave()
+      this.studioStore.startSave()
     })
 
     this.reporterBus.on('studio:copy:to:clipboard', (cb) => {
@@ -320,7 +313,6 @@ export class EventManager {
     })
 
     this.localBus.on('studio:start', () => {
-      this.studioRecorder.closeInitModal()
       rerun()
     })
 
@@ -331,13 +323,13 @@ export class EventManager {
     this.localBus.on('studio:save', (saveInfo) => {
       this.ws.emit('studio:save', saveInfo, (err) => {
         if (err) {
-          this.reporterBus.emit('test:set:state', this.studioRecorder.saveError(err), noop)
+          this.reporterBus.emit('test:set:state', this.studioStore.saveError(err), noop)
         }
       })
     })
 
     this.localBus.on('studio:cancel', () => {
-      this.studioRecorder.cancel()
+      this.studioStore.cancel()
       rerun()
     })
 
@@ -414,7 +406,7 @@ export class EventManager {
             return
           }
 
-          this.studioRecorder.initialize(config, state)
+          this.studioStore.initialize(config, state)
 
           const runnables = Cypress.runner.normalizeAll(state.tests)
 
@@ -474,7 +466,11 @@ export class EventManager {
         this.reporterBus.emit('reporter:collect:run:state', (reporterState) => {
           resolve({
             ...reporterState,
-            studio: this.studioRecorder.state,
+            studio: {
+              testId: this.studioStore.testId,
+              suiteId: this.studioStore.suiteId,
+              url: this.studioStore.url,
+            },
           })
         })
       })
@@ -592,12 +588,12 @@ export class EventManager {
     })
 
     Cypress.on('test:before:run:async', (_attr, test) => {
-      this.studioRecorder.interceptTest(test)
+      this.studioStore.interceptTest(test)
     })
 
     Cypress.on('test:after:run', (test) => {
-      if (this.studioRecorder.isOpen && test.state !== 'passed') {
-        this.studioRecorder.testFailed()
+      if (this.studioStore.isOpen && test.state !== 'passed') {
+        this.studioStore.testFailed()
       }
     })
 
@@ -734,6 +730,8 @@ export class EventManager {
       performance.measure('run', 'run-s', 'run-e')
     })
 
+    const hasRunnableId = !!this.studioStore.testId || !!this.studioStore.suiteId
+
     this.reporterBus.emit('reporter:start', {
       startTime: Cypress.runner.getStartTime(),
       numPassed: state.passed,
@@ -742,7 +740,7 @@ export class EventManager {
       autoScrollingEnabled: state.autoScrollingEnabled,
       isSpecsListOpen: state.isSpecsListOpen,
       scrollTop: state.scrollTop,
-      studioActive: this.studioRecorder.hasRunnableId,
+      studioActive: hasRunnableId,
     })
   }
 
@@ -770,7 +768,7 @@ export class EventManager {
     // clean up the cross origin logs in memory to prevent dangling references as the log objects themselves at this point will no longer be needed.
     crossOriginLogs = {}
 
-    this.studioRecorder.setInactive()
+    this.studioStore.setInactive()
   }
 
   resetReporter () {
@@ -796,12 +794,12 @@ export class EventManager {
   }
 
   _interceptStudio (displayProps) {
-    if (this.studioRecorder.isActive) {
-      displayProps.hookId = this.studioRecorder.hookId
+    if (this.studioStore.isActive) {
+      displayProps.hookId = this.studioStore.hookId
 
       if (displayProps.name === 'visit' && displayProps.state === 'failed') {
-        this.studioRecorder.testFailed()
-        this.reporterBus.emit('test:set:state', this.studioRecorder.testError, noop)
+        this.studioStore.testFailed()
+        this.reporterBus.emit('test:set:state', this.studioStore.testError, noop)
       }
     }
 
@@ -809,8 +807,8 @@ export class EventManager {
   }
 
   _studioCopyToClipboard (cb) {
-    this.ws.emit('studio:get:commands:text', this.studioRecorder.logs, (commandsText) => {
-      this.studioRecorder.copyToClipboard(commandsText)
+    this.ws.emit('studio:get:commands:text', this.studioStore.logs, (commandsText) => {
+      this.studioStore.copyToClipboard(commandsText)
       .then(cb)
     })
   }
diff --git a/packages/app/src/runner/iframe-model.ts b/packages/app/src/runner/iframe-model.ts
index a8cdbfabf41c..bba35665919f 100644
--- a/packages/app/src/runner/iframe-model.ts
+++ b/packages/app/src/runner/iframe-model.ts
@@ -2,6 +2,7 @@ import { useSnapshotStore } from './snapshot-store'
 import { useAutStore } from '../store'
 import type { EventManager } from './event-manager'
 import { defaultMessages } from '@cy/i18n'
+import { useStudioStore } from '../store/studio-store'
 
 export interface AutSnapshot {
   id?: number
@@ -38,7 +39,6 @@ export class IframeModel {
     private eventManager: EventManager,
     private studio: {
       selectorPlaygroundModel: any
-      recorder: any
     },
   ) {
     this._reset()
@@ -109,6 +109,7 @@ export class IframeModel {
   setSnapshots = (snapshotProps: AutSnapshot) => {
     const snapshotStore = useSnapshotStore()
     const autStore = useAutStore()
+    const studioStore = useStudioStore()
 
     if (snapshotStore.isSnapshotPinned) {
       return
@@ -118,7 +119,7 @@ export class IframeModel {
       return snapshotStore.setTestsRunningError()
     }
 
-    if (this.studio.recorder.isOpen) {
+    if (studioStore.isOpen) {
       return this._studioOpenError()
     }
 
diff --git a/packages/app/src/runner/index.ts b/packages/app/src/runner/index.ts
index ab00b048c82d..feccc70a4bf9 100644
--- a/packages/app/src/runner/index.ts
+++ b/packages/app/src/runner/index.ts
@@ -26,6 +26,7 @@ import { client } from '@packages/socket/lib/browser'
 import { decodeBase64Unicode } from '@packages/frontend-shared/src/utils/base64'
 import type { AutomationElementId } from '@packages/types/src'
 import { useSnapshotStore } from './snapshot-store'
+import { useStudioStore } from '../store/studio-store'
 
 let _eventManager: EventManager | undefined
 
@@ -59,8 +60,6 @@ export function initializeEventManager (UnifiedRunner: any) {
     UnifiedRunner.CypressDriver,
     UnifiedRunner.MobX,
     UnifiedRunner.selectorPlaygroundModel,
-    UnifiedRunner.StudioRecorder,
-    // created once when opening runner at the very top level in main.ts
     window.ws,
   )
 }
@@ -109,7 +108,6 @@ function createIframeModel () {
     autIframe.doesAUTMatchTopOriginPolicy,
     getEventManager(),
     {
-      recorder: getEventManager().studioRecorder,
       selectorPlaygroundModel: getEventManager().selectorPlaygroundModel,
     },
   )
@@ -140,17 +138,23 @@ function setupRunner () {
   getEventManager().start(config)
 
   const autStore = useAutStore()
+  const studioStore = useStudioStore()
 
   watchEffect(() => {
     autStore.viewportUpdateCallback?.()
   }, { flush: 'post' })
 
+  watchEffect(() => {
+    window.UnifiedRunner.MobX.runInAction(() => {
+      mobxRunnerStore.setCanSaveStudioLogs(studioStore.logs.length > 0)
+    })
+  })
+
   _autIframeModel = new AutIframe(
     'Test Project',
     getEventManager(),
     window.UnifiedRunner.CypressJQuery,
     window.UnifiedRunner.dom,
-    getEventManager().studioRecorder,
   )
 
   createIframeModel()
@@ -345,7 +349,7 @@ function runSpecE2E (spec: SpecFile) {
 }
 
 export function getRunnerConfigFromWindow () {
-  return JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__.base64Config))
+  return JSON.parse(decodeBase64Unicode(window.__CYPRESS_CONFIG__.base64Config)) as Cypress.Config
 }
 
 /**
@@ -366,8 +370,15 @@ async function initialize () {
     return
   }
 
+  // Reset stores
   const autStore = useAutStore()
 
+  autStore.$reset()
+
+  const studioStore = useStudioStore()
+
+  studioStore.cancel()
+
   // TODO(lachlan): UNIFY-1318 - use GraphQL to get the viewport dimensions
   // once it is more practical to do so
   // find out if we need to continue managing viewportWidth/viewportHeight in MobX at all.
diff --git a/packages/app/src/runner/reporter.ts b/packages/app/src/runner/reporter.ts
index af35de815fef..9bd76525c84f 100644
--- a/packages/app/src/runner/reporter.ts
+++ b/packages/app/src/runner/reporter.ts
@@ -1,6 +1,6 @@
 import { getMobxRunnerStore, MobxRunnerStore } from '../store'
 import { getReporterElement } from './utils'
-import { getEventManager } from '.'
+import { getEventManager, getRunnerConfigFromWindow } from '.'
 import type { EventManager } from './event-manager'
 import { useRunnerUiStore } from '../store/runner-ui-store'
 
@@ -39,14 +39,17 @@ function renderReporter (
 ) {
   const runnerUiStore = useRunnerUiStore()
 
+  const config = getRunnerConfigFromWindow()
+
   const reporter = window.UnifiedRunner.React.createElement(window.UnifiedRunner.Reporter, {
     runMode: 'single' as const,
     runner: eventManager.reporterBus,
     autoScrollingEnabled: runnerUiStore.autoScrollingEnabled,
     isSpecsListOpen: runnerUiStore.isSpecsListOpen,
-    error: null, // errorMessages.reporterError(props.state.scriptError, props.state.spec.relative),
+    error: null,
     resetStatsOnSpecChange: true,
-    experimentalStudioEnabled: false,
+    // Studio can only be enabled for e2e testing
+    studioEnabled: window.__CYPRESS_TESTING_TYPE__ === 'e2e' && config.experimentalStudio,
     runnerStore: store,
   })
 
diff --git a/packages/app/src/runner/studio/StudioControls.vue b/packages/app/src/runner/studio/StudioControls.vue
new file mode 100644
index 000000000000..311f7efaeb5c
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioControls.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="border-y flex border-gray-50 w-full justify-between">
+    <div class="flex">
+      <div class="flex pr-5 pl-5 items-center">
+        <span
+          v-if="studioStore.url && studioStore.isActive && !studioStore.isFailed"
+          class="mr-2"
+        ><i-cy-action-record_x16 class="animate-pulse icon-dark-red-500 icon-light-red-500" /></span>
+        <span
+          v-else
+          class="px-2"
+        ><i-cy-object-magic-wand-dark-mode_x16 class="fill-purple-300 stroke-purple-300" /></span>
+        <div class="font-semibold text-base text-gray-800">
+          <span>{{ t('runner.studio.studio').toUpperCase() }}</span>
+          <span class="ml-1"> {{ t('versions.beta').toUpperCase() }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center">
+        <a
+          class="cursor-pointer font-medium text-base text-indigo-500 hocus-link hover:underline"
+          @click="studioStore.openInstructionModal"
+        >
+          {{ t('runner.studio.availableCommands') }}
+        </a>
+      </div>
+    </div>
+
+    <div class="flex">
+      <div class="border rounded-md flex border-gray-100 m-1">
+        <Tooltip
+          placement="top"
+        >
+          <button
+            :class="`border-r ${controlsClassName}`"
+            :disabled="studioStore.isLoading"
+            @click="handleClose"
+          >
+            <i-cy-delete_x16 />
+          </button>
+          <template #popper>
+            {{ t('runner.studio.closeStudio') }}
+          </template>
+        </Tooltip>
+
+        <Tooltip
+          placement="top"
+        >
+          <button
+            :class="`border-r ${controlsClassName}`"
+            :disabled="studioStore.isLoading"
+            @click="handleRestart"
+          >
+            <i-cy-action-restart_x16 />
+          </button>
+          <template #popper>
+            {{ t('runner.studio.restartStudio') }}
+          </template>
+        </Tooltip>
+
+        <Tooltip
+          placement="top"
+        >
+          <button
+            :class="controlsClassName"
+            :disabled="studioStore.isLoading || studioStore.isEmpty"
+            @click="handleCopyCommands"
+            @mouseleave="() => commandsCopied = false"
+          >
+            <span
+              v-if="commandsCopied"
+            ><i-cy-checkmark_x16 class="icon-dark-green-400 icon-light-green-400" /></span>
+            <span v-else> <i-cy-general-clipboard_x16 /></span>
+          </button>
+          <template #popper>
+            {{ t(commandsCopied ? 'runner.studio.commandsCopied' : 'runner.studio.copyCommands') }}
+          </template>
+        </Tooltip>
+      </div>
+
+      <div class="flex items-center">
+        <button
+          class="rounded-md bg-indigo-500 mx-3 text-white py-2 px-3 hover:bg-indigo-400 disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="studioStore.isLoading || studioStore.isEmpty || studioStore.isFailed"
+          @click="handleSaveCommands"
+        >
+          {{ t('runner.studio.saveTestButton') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from '@cy/i18n'
+import { getEventManager } from '../'
+import { useStudioStore } from '../../store/studio-store'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+
+const controlsClassName = 'border-gray-100 py-2 px-3 disabled:stroke-gray-400 disabled:pointer-events-none disabled:opacity-50'
+
+const { t } = useI18n()
+
+const studioStore = useStudioStore()
+
+const eventManager = getEventManager()
+
+const commandsCopied = ref(false)
+
+function handleClose () {
+  eventManager.emit('studio:cancel', undefined)
+}
+
+function handleRestart () {
+  studioStore.reset()
+  eventManager.emit('restart', undefined)
+}
+
+function handleCopyCommands () {
+  eventManager.emit('studio:copy:to:clipboard', () => {
+    commandsCopied.value = true
+  })
+}
+
+function handleSaveCommands () {
+  studioStore.startSave()
+}
+</script>
diff --git a/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx b/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx
new file mode 100644
index 000000000000..cf9170caf161
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx
@@ -0,0 +1,14 @@
+import StudioInstructionsModal from './StudioInstructionsModal.vue'
+
+describe('StudioInstructionsModal', () => {
+  it('renders hidden by default', () => {
+    cy.mount(<StudioInstructionsModal open={false} />)
+    cy.findByTestId('studio-instructions-modal').should('not.exist')
+  })
+
+  it('renders open with props', () => {
+    cy.mount(<StudioInstructionsModal open />)
+    cy.findByTestId('studio-instructions-modal').should('be.visible')
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioInstructionsModal.vue b/packages/app/src/runner/studio/StudioInstructionsModal.vue
new file mode 100644
index 000000000000..388f86bd47cf
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInstructionsModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <StandardModal
+    :model-value="props.open"
+    help-link="https://on.cypress.io/guides/references/cypress-studio"
+    :help-text="t('links.learnMoreButton')"
+    variant="bare"
+    data-cy="studio-instructions-modal"
+    @update:model-value="emit('close')"
+  >
+    <template #title>
+      {{ t('runner.studio.studio') }} {{ t('versions.beta') }}
+    </template>
+
+    <div class="max-w-2xl py-7 px-15 text-gray-900">
+      <div class="text-center">
+        {{ t('runner.studio.studioDetailedDescription') }}
+      </div>
+
+      <div class="flex mt-3 justify-center">
+        <ul>
+          <li>
+            <pre>.check()</pre>
+          </li>
+          <li>
+            <pre>.click()</pre>
+          </li>
+          <li>
+            <pre>.select()</pre>
+          </li>
+          <li>
+            <pre>.type()</pre>
+          </li>
+          <li>
+            <pre>.uncheck()</pre>
+          </li>
+        </ul>
+      </div>
+      <div class="my-3 text-center">
+        {{ t('runner.studio.experimentalMessage') }}
+        <i18n-t
+          scope="global"
+          keypath="runner.studio.feedbackPrompt"
+        >
+          <a
+            class="text-indigo-500"
+            href="https://on.cypress.io/studio-beta"
+            target="_blank"
+          >{{ t('runner.studio.feedbackLink') }}</a>
+        </i18n-t>
+      </div>
+    </div>
+  </StandardModal>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import StandardModal from '@packages/frontend-shared/src/components/StandardModal.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+</script>
diff --git a/packages/app/src/runner/studio/StudioSaveModal.cy.tsx b/packages/app/src/runner/studio/StudioSaveModal.cy.tsx
new file mode 100644
index 000000000000..8c96ff6d8e93
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioSaveModal.cy.tsx
@@ -0,0 +1,28 @@
+import StudioSaveModal from './StudioSaveModal.vue'
+import { useStudioStore } from '../../store/studio-store'
+
+describe('StudioSaveModal', () => {
+  it('renders hidden by default', () => {
+    cy.mount(<StudioSaveModal open={false} />)
+    cy.findByTestId('studio-save-modal').should('not.exist')
+  })
+
+  it('renders open with props', () => {
+    cy.mount(<StudioSaveModal open />)
+    cy.findByTestId('studio-save-modal').should('be.visible')
+    cy.percySnapshot()
+  })
+
+  it('submits the form', () => {
+    const studioStore = useStudioStore()
+
+    const saveStub = cy.stub(studioStore, 'save')
+
+    cy.mount(<StudioSaveModal open />)
+    cy.get('#testName').focus().type('my test')
+
+    cy.findByRole('button', { name: 'Save' }).click().then(() => {
+      expect(saveStub).to.be.calledOnceWith('my test')
+    })
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioSaveModal.vue b/packages/app/src/runner/studio/StudioSaveModal.vue
new file mode 100644
index 000000000000..d1e9776a9488
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioSaveModal.vue
@@ -0,0 +1,75 @@
+<template>
+  <StandardModal
+    :model-value="props.open"
+    :no-help="true"
+    variant="bare"
+    data-cy="studio-save-modal"
+    @update:model-value="emit('close')"
+  >
+    <template #title>
+      {{ t('runner.studio.saveTest') }}
+    </template>
+
+    <div class="max-w-sm w-sm py-5 px-5">
+      <form
+        class="flex items-center justify-evenly"
+        @submit="submit"
+      >
+        <div class="w-full">
+          <Input
+            id="testName"
+            v-model="testName"
+            class="rounded-md"
+            :placeholder="t('runner.studio.testName')"
+            type="text"
+            :required="true"
+          />
+        </div>
+        <div class="ml-3">
+          <button
+            class="disabled:opacity-50 disabled:pointer-events-none"
+            type="submit"
+            :disabled="!testName"
+          >
+            <div class="rounded-md flex bg-indigo-500 py-1.5 px-1 align-center hover:bg-indigo-400">
+              <div class="ml-2 pt-1">
+                <i-cy-circle-check_x16 class="fill-gray-200 stroke-gray-1000" />
+              </div>
+              <div class="font-medium mx-2 text-white">
+                {{ t('runner.studio.saveTestButton') }}
+              </div>
+            </div>
+          </button>
+        </div>
+      </form>
+    </div>
+  </StandardModal>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import StandardModal from '@packages/frontend-shared/src/components/StandardModal.vue'
+import { ref } from 'vue'
+import Input from '../../../../frontend-shared/src/components/Input.vue'
+import { useStudioStore } from '../../store/studio-store'
+
+const { t } = useI18n()
+const studioStore = useStudioStore()
+
+const testName = ref('')
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+function submit (e) {
+  e.preventDefault()
+
+  studioStore.save(testName.value)
+}
+
+</script>
diff --git a/packages/app/src/runner/studio/StudioUrlPrompt.cy.tsx b/packages/app/src/runner/studio/StudioUrlPrompt.cy.tsx
new file mode 100644
index 000000000000..0a5b607e13e8
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioUrlPrompt.cy.tsx
@@ -0,0 +1,38 @@
+import StudioUrlPrompt from './StudioUrlPrompt.vue'
+
+describe('<StudioUrlPrompt />', () => {
+  it('renders', () => {
+    cy.mount(<StudioUrlPrompt urlInProgress="" />)
+    cy.percySnapshot()
+  })
+
+  it('emits cancel when button is clicked', () => {
+    const cancelStub = cy.stub()
+
+    cy.mount(<StudioUrlPrompt urlInProgress="" onCancel={cancelStub}/>)
+
+    cy.findByText('Cancel').click().then(() => {
+      expect(cancelStub).to.be.called
+    })
+  })
+
+  it('disables submit button when url field is empty', () => {
+    const continueStub = cy.stub()
+
+    cy.mount(<StudioUrlPrompt urlInProgress="" onSubmit={continueStub}/>)
+
+    cy.findByText('Continue ➜').should('be.disabled')
+  })
+
+  it('emits submit when continue button is clicked', () => {
+    const continueStub = cy.stub()
+
+    const url = 'http://localhost:8080'
+
+    cy.mount(<StudioUrlPrompt urlInProgress={url} onSubmit={continueStub}/>)
+
+    cy.findByText('Continue ➜').click().then(() => {
+      expect(continueStub).to.be.called
+    })
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioUrlPrompt.vue b/packages/app/src/runner/studio/StudioUrlPrompt.vue
new file mode 100644
index 000000000000..ee4294f005d7
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioUrlPrompt.vue
@@ -0,0 +1,83 @@
+<template>
+  <div
+    cy-data="studio-url-prompt"
+    class="border rounded-md flex flex-col h-fit bg-gray-1000 border-gray-200 w-fit py-4 px-3 top-16 left-15 text-gray-200 z-51 studio-url-container absolute"
+  >
+    <div class="text-center">
+      <span>{{ t('runner.studio.enterValidUrl') }}</span>
+    </div>
+
+    <form @submit.prevent="emit('submit')">
+      <div class="flex mt-4 mb-1 justify-between">
+        <button
+          class="rounded bg-gray-800 mx-1 text-white py-1 px-3"
+          type="button"
+          @click="emit('cancel')"
+        >
+          {{ t('runner.studio.actionCancel') }}
+        </button>
+        <button
+          class="rounded bg-gray-800 mx-1 text-white py-1 px-3 disabled:opacity-50 disabled:pointer-events-none"
+          :disabled="!urlInProgress"
+          type="submit"
+        >
+          {{ t('runner.studio.continue') }} ➜
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    cy-data="studio-url-overlay"
+    class="bg-black h-full w-full opacity-35 top-0 right-0 bottom-0 left-0 z-50 fixed"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  autUrlInputRef?: HTMLInputElement
+  urlInProgress: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'submit'): void
+  (event: 'cancel'): void
+}>()
+
+onMounted(() => {
+  if (props.autUrlInputRef) {
+    props.autUrlInputRef.focus()
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+  .studio-url-container {
+    &::before {
+      content: " ";
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      margin-left: -10px;
+      border-width: 10px;
+      border-style: solid;
+      border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
+    }
+
+    &::after {
+      content: " ";
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      margin-left: -9px;
+      border-width: 9px;
+      border-style: solid;
+      border-color: transparent transparent #1B1E2E transparent;
+    }
+  }
+</style>
diff --git a/packages/app/src/runner/useEventManager.ts b/packages/app/src/runner/useEventManager.ts
index 131560488c2c..91c75397b585 100644
--- a/packages/app/src/runner/useEventManager.ts
+++ b/packages/app/src/runner/useEventManager.ts
@@ -1,6 +1,7 @@
 import { watch } from 'vue'
 import { addCrossOriginIframe, getAutIframeModel, getEventManager, UnifiedRunnerAPI } from '.'
 import { useAutStore, useSpecStore } from '../store'
+import { useStudioStore } from '../store/studio-store'
 import { empty, getReporterElement, getRunnerElement } from './utils'
 
 export function useEventManager () {
@@ -8,6 +9,7 @@ export function useEventManager () {
 
   const autStore = useAutStore()
   const specStore = useSpecStore()
+  const studioStore = useStudioStore()
 
   function runSpec (isRerun: boolean = false) {
     if (!specStore.activeSpec) {
@@ -37,10 +39,24 @@ export function useEventManager () {
       getAutIframeModel().showVisitFailure(payload)
     })
 
+    eventManager.on('page:loading', (isLoading) => {
+      if (isLoading) {
+        return
+      }
+
+      getAutIframeModel().reattachStudio()
+    })
+
     eventManager.on('visit:blank', ({ type }) => {
       getAutIframeModel().visitBlank({ type })
     })
 
+    eventManager.on('run:end', () => {
+      if (studioStore.isLoading) {
+        getAutIframeModel().startStudio()
+      }
+    })
+
     eventManager.on('expect:origin', addCrossOriginIframe)
   }
 
diff --git a/packages/app/src/specs/CreateSpecModal.vue b/packages/app/src/specs/CreateSpecModal.vue
index a7abc4146365..5517b49c3352 100644
--- a/packages/app/src/specs/CreateSpecModal.vue
+++ b/packages/app/src/specs/CreateSpecModal.vue
@@ -5,6 +5,7 @@
     :title="title"
     :model-value="show"
     :help-link="helpLink"
+    :no-help="!helpLink"
     data-cy="create-spec-modal"
     @update:model-value="close"
   >
diff --git a/packages/app/src/specs/InlineSpecListTree.vue b/packages/app/src/specs/InlineSpecListTree.vue
index 4eac1f8ea923..35d2d9b9ed82 100644
--- a/packages/app/src/specs/InlineSpecListTree.vue
+++ b/packages/app/src/specs/InlineSpecListTree.vue
@@ -71,6 +71,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useSpecStore } from '../store'
 import { useVirtualList } from '@packages/frontend-shared/src/composables/useVirtualList'
 import { useVirtualListNavigation } from '@packages/frontend-shared/src/composables/useVirtualListNavigation'
+import { useStudioStore } from '../store/studio-store'
 
 const props = defineProps<{
   specs: FuzzyFoundSpec[]
@@ -115,6 +116,11 @@ const toggle = (row: UseCollapsibleTreeNode<SpecTreeNode<FuzzyFoundSpec>>, idx:
 }
 
 const submit = (row: UseCollapsibleTreeNode<SpecTreeNode<FuzzyFoundSpec>>, idx: number) => {
+  // If the user selects a new spec while in studio mode, turn studio mode off
+  const studioStore = useStudioStore()
+
+  studioStore.cancel()
+
   activeItem.value = idx
 
   if (row.isLeaf) {
diff --git a/packages/app/src/store/aut-store.ts b/packages/app/src/store/aut-store.ts
index 64c5b743e7fa..ce82a825de24 100644
--- a/packages/app/src/store/aut-store.ts
+++ b/packages/app/src/store/aut-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 export type ScriptError = { type: string, error: string } | null
 
 interface AutStoreState {
-  url?: string
+  url: string | undefined
   highlightUrl: boolean
   viewportWidth: number
   viewportHeight: number
@@ -77,12 +77,15 @@ export const useAutStore = defineStore({
       this.highlightUrl = false
       this.isLoadingUrl = false
     },
+
     setScriptError (err: ScriptError) {
       this.scriptError = err
     },
+
     setScale (scale: number) {
       this.scale = scale
     },
+
     setSpecRunnerHeaderHeight (height: number) {
       this.specRunnerHeaderHeight = height
     },
diff --git a/packages/app/src/store/mobx-runner-store.ts b/packages/app/src/store/mobx-runner-store.ts
index a2f55fdc5b9b..8011273c47b6 100644
--- a/packages/app/src/store/mobx-runner-store.ts
+++ b/packages/app/src/store/mobx-runner-store.ts
@@ -22,12 +22,17 @@ export class MobxRunnerStore {
   @observable width: number
   @observable height: number
   @observable automation?: AutomationStatus
+  @observable canSaveStudioLogs = false
 
   constructor (testingType: Cypress.TestingType) {
     this.width = defaults[testingType].width
     this.height = defaults[testingType].height
   }
 
+  @action setCanSaveStudioLogs (canSave: boolean) {
+    this.canSaveStudioLogs = canSave
+  }
+
   @action setSpec (spec: Cypress.Spec | undefined) {
     this.spec = spec
     this.specRunId = nanoid()
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
new file mode 100644
index 000000000000..4fba056c28f7
--- /dev/null
+++ b/packages/app/src/store/studio-store.ts
@@ -0,0 +1,925 @@
+import type { FileDetails, Instrument, TestState } from '@packages/types/src'
+import { defineStore } from 'pinia'
+
+import { getEventManager } from '../runner'
+import type { StudioSavePayload } from '../runner/event-manager-types'
+import { useAutStore } from './aut-store'
+
+function getCypress () {
+  const eventManager = getEventManager()
+
+  return eventManager.getCypress()
+}
+
+function stringifyActual (val: any) {
+  // @ts-expect-error - this exists, but not in TypeScript.
+  return Cypress.utils.stringifyActual(val)
+}
+
+const saveErrorMessage = (message) => {
+  return `\
+${message}\n\n\
+Cypress was unable to save these commands to your spec file. \
+You can use the copy button below to copy the commands to your clipboard. \
+\n
+Cypress Studio is still in beta and the team is working hard to \
+resolve issues like this. To help us fix this issue more quickly, \
+you can provide us with more information by clicking 'Learn more' below.`
+}
+
+function assertNonNullish<TValue> (
+  value: TValue,
+  message: string,
+): asserts value is NonNullable<TValue> {
+  if (value === null || value === undefined) {
+    throw Error(message)
+  }
+}
+
+export interface CommandLog {
+  id: `s${string}`
+  testId?: string
+  hookId?: string
+  state: TestState
+  name: string
+  message: string
+  type: 'parent' | 'child'
+  number?: number
+  instrument: Instrument
+  numElements: number
+  isStudio: boolean
+}
+
+const eventTypes = [
+  'click',
+  // 'dblclick',
+  'change',
+  'keydown',
+  'keyup',
+]
+
+const eventsWithValue = [
+  'change',
+  'keydown',
+  'keyup',
+]
+
+const internalMouseEvents = [
+  'mousedown',
+  'mouseover',
+  'mouseout',
+]
+
+const tagNamesWithoutText = [
+  'SELECT',
+  'INPUT',
+  'TEXTAREA',
+]
+
+const tagNamesWithValue = [
+  'BUTTON',
+  'INPUT',
+  'METER',
+  'LI',
+  'OPTION',
+  'PROGRESS',
+  'TEXTAREA',
+]
+
+// Single argument assertion: ['be.visible']
+type AssertionArgs_1 = [string]
+// Two argument assertion: ['have.text', '<some text>']
+type AssertionArgs_2 = [string, string]
+// Three argument assertion: ['have.attr', 'href', '<some value>']
+type AssertionArgs_3 = [string, string, string]
+
+type AssertionArgs = AssertionArgs_1 | AssertionArgs_2 | AssertionArgs_3
+
+export interface StudioLog {
+  id?: number
+  name: string
+  selector?: string
+  message?: unknown // todo: what is the type
+  isAssertion?: boolean
+}
+
+interface StudioRecorderState {
+  saveModalIsOpen: boolean
+  instructionModalIsOpen: boolean
+  logs: StudioLog[]
+  isLoading: boolean
+  isActive: boolean
+  isFailed: boolean
+  _hasStarted: boolean
+
+  testId?: string
+  suiteId?: string
+  url?: string
+
+  fileDetails?: FileDetails
+  absoluteFile?: string
+  runnableTitle?: string
+  _previousMouseEvent?: {
+    element: Element
+    selector: string
+  }
+  _body?: Element
+  _currentId: number
+}
+
+export const useStudioStore = defineStore('studioRecorder', {
+  state: (): StudioRecorderState => {
+    return {
+      saveModalIsOpen: false,
+      instructionModalIsOpen: false,
+      logs: [],
+      url: '',
+      isLoading: false,
+      isActive: false,
+      isFailed: false,
+      _hasStarted: false,
+      _currentId: 1,
+    }
+  },
+
+  actions: {
+    setTestId (testId: string) {
+      this.testId = testId
+    },
+
+    setSuiteId (suiteId: string) {
+      this.suiteId = suiteId
+      this.testId = undefined
+    },
+
+    clearRunnableIds () {
+      this.testId = undefined
+      this.suiteId = undefined
+    },
+
+    openInstructionModal () {
+      this.instructionModalIsOpen = true
+    },
+
+    closeInstructionModal () {
+      this.instructionModalIsOpen = false
+    },
+
+    showSaveModal () {
+      this.saveModalIsOpen = true
+    },
+
+    closeSaveModal () {
+      this.saveModalIsOpen = false
+    },
+
+    startLoading () {
+      this.isLoading = true
+    },
+
+    setInactive () {
+      this.isActive = false
+    },
+
+    setUrl (url?: string) {
+      this.url = url
+    },
+
+    testFailed () {
+      this.isFailed = true
+    },
+
+    initialize (config, state) {
+      const { studio } = state
+
+      if (studio) {
+        if (studio.testId) {
+          this.setTestId(studio.testId)
+        }
+
+        if (studio.suiteId) {
+          this.setSuiteId(studio.suiteId)
+        }
+
+        if (studio.url) {
+          this.setUrl(studio.url)
+        }
+      }
+
+      if (this.testId || this.suiteId) {
+        this.setAbsoluteFile(config.spec.absolute)
+        this.startLoading()
+
+        if (this.suiteId) {
+          getCypress().runner.setOnlySuiteId(this.suiteId)
+        } else if (this.testId) {
+          getCypress().runner.setOnlyTestId(this.testId)
+        }
+      }
+    },
+
+    interceptTest (test) {
+      if (this.suiteId) {
+        this.setTestId(test.id)
+      }
+
+      if (this.testId || this.suiteId) {
+        if (test.invocationDetails) {
+          this.setFileDetails(test.invocationDetails)
+        }
+
+        if (this.suiteId) {
+          if (test.parent && test.parent.id !== 'r1') {
+            this.setRunnableTitle(test.parent.title)
+          }
+        } else {
+          this.setRunnableTitle(test.title)
+        }
+      }
+    },
+
+    start (body: HTMLBodyElement) {
+      this.isActive = true
+      this.isLoading = false
+      this.logs = []
+      this._currentId = 1
+      this._hasStarted = true
+
+      const autStore = useAutStore()
+
+      if (this.url) {
+        this.visitUrl()
+      }
+
+      if (!this.url && autStore.url) {
+        this.setUrl(autStore.url)
+      }
+
+      this.attachListeners(body)
+    },
+
+    stop () {
+      this.removeListeners()
+
+      this.isActive = false
+      this.isLoading = false
+    },
+
+    reset () {
+      this.stop()
+
+      this.logs = []
+      this.url = undefined
+      this._hasStarted = false
+      this._currentId = 1
+      this.isFailed = false
+    },
+
+    cancel () {
+      this.reset()
+      this.clearRunnableIds()
+    },
+
+    startSave () {
+      if (this.suiteId) {
+        this.showSaveModal()
+      } else {
+        this.save()
+      }
+    },
+
+    save (testName?: string) {
+      this.closeSaveModal()
+      this.stop()
+
+      assertNonNullish(this.absoluteFile, `absoluteFile should exist`)
+
+      const payload: StudioSavePayload = {
+        fileDetails: this.fileDetails,
+        absoluteFile: this.absoluteFile,
+        runnableTitle: this.runnableTitle,
+        commands: this.logs,
+        isSuite: !!this.suiteId,
+        isRoot: this.suiteId === 'r1',
+        testName,
+      }
+
+      getEventManager().emit('studio:save', payload)
+    },
+
+    visitUrl (url?: string) {
+      this.setUrl(url ?? this.url)
+
+      getCypress().cy.visit(this.url)
+
+      this.logs.push({
+        id: this._getId(),
+        selector: undefined,
+        name: 'visit',
+        message: this.url,
+      })
+    },
+
+    _recordEvent (event) {
+      if (this.isFailed || !this._trustEvent(event)) return
+
+      const $el = window.UnifiedRunner.CypressJQuery(event.target)
+
+      if (this._isAssertionsMenu($el)) {
+        return
+      }
+
+      this._closeAssertionsMenu()
+
+      if (!this._shouldRecordEvent(event, $el)) {
+        return
+      }
+
+      const name = this._getName(event, $el)
+      const message = this._getMessage(event, $el)
+
+      if (name === 'change') {
+        return
+      }
+
+      let selector: string | undefined = ''
+
+      if (name === 'click' && this._matchPreviousMouseEvent($el)) {
+        selector = this._previousMouseEvent?.selector
+      } else {
+        selector = getCypress().SelectorPlayground.getSelector($el)
+      }
+
+      this._clearPreviousMouseEvent()
+
+      if (name === 'type' && !message) {
+        return this._removeLastLogIfType(selector)
+      }
+
+      const updateOnly = this._updateLastLog(selector, name, message)
+
+      if (updateOnly) {
+        return
+      }
+
+      if (name === 'type') {
+        this._addClearLog(selector)
+      }
+
+      this._addLog({
+        selector,
+        name,
+        message,
+      })
+    },
+
+    _removeLastLogIfType (selector?: string) {
+      const lastLog = this.logs[this.logs.length - 1]
+
+      if (lastLog.selector === selector && lastLog.name === 'type') {
+        return this.removeLog(lastLog.id)
+      }
+    },
+
+    removeLog (commandId?: number) {
+      const index = this.logs.findIndex((command) => command.id === commandId)
+      const log = this.logs[index]
+
+      this.logs.splice(index, 1)
+
+      this._generateBothLogs(log).forEach((commandLog) => {
+        getEventManager().emit('reporter:log:remove', commandLog)
+      })
+    },
+
+    _addLog (log: StudioLog) {
+      log.id = this._getId()
+
+      this.logs.push(log)
+
+      this._generateBothLogs(log).forEach((commandLog) => {
+        getEventManager().emit('reporter:log:add', commandLog)
+      })
+    },
+
+    _addAssertion ($el: HTMLElement, ...args: AssertionArgs) {
+      const id = this._getId()
+      const selector = getCypress().SelectorPlayground.getSelector($el)
+
+      const log: StudioLog = {
+        id,
+        selector,
+        name: 'should',
+        message: args,
+        isAssertion: true,
+      }
+
+      this.logs.push(log)
+
+      const reporterLog = {
+        id,
+        selector,
+        name: 'assert',
+        message: this._generateAssertionMessage($el, ...args),
+      }
+
+      this._generateBothLogs(reporterLog).forEach((commandLog) => {
+        getEventManager().emit('reporter:log:add', commandLog)
+      })
+
+      this._closeAssertionsMenu()
+    },
+
+    saveError (err: Error) {
+      return {
+        id: this.testId,
+        err: {
+          ...err,
+          message: saveErrorMessage(err.message),
+          docsUrl: 'https://on.cypress.io/studio-beta',
+        },
+      }
+    },
+
+    setFileDetails (fileDetails) {
+      this.fileDetails = fileDetails
+    },
+
+    setAbsoluteFile (absoluteFile: string) {
+      this.absoluteFile = absoluteFile
+    },
+
+    setRunnableTitle (runnableTitle) {
+      this.runnableTitle = runnableTitle
+    },
+
+    _clearPreviousMouseEvent () {
+      this._previousMouseEvent = undefined
+    },
+
+    _matchPreviousMouseEvent (el) {
+      return this._previousMouseEvent && window.UnifiedRunner.CypressJQuery(el).is(this._previousMouseEvent.element)
+    },
+
+    attachListeners (body: HTMLBodyElement) {
+      if (this.isFailed) {
+        return
+      }
+
+      this._body = body
+
+      for (const event of eventTypes) {
+        this._body.addEventListener(event, this._recordEvent, {
+          capture: true,
+          passive: true,
+        })
+      }
+
+      for (const event of internalMouseEvents) {
+        this._body.addEventListener(event, this._recordMouseEvent, {
+          capture: true,
+          passive: true,
+        })
+      }
+
+      this._body.addEventListener('contextmenu', this._openAssertionsMenu, {
+        capture: true,
+      })
+
+      this._clearPreviousMouseEvent()
+    },
+
+    removeListeners () {
+      if (!this._body) return
+
+      for (const event of eventTypes) {
+        this._body.removeEventListener(event, this._recordEvent, {
+          capture: true,
+        })
+      }
+
+      for (const event of internalMouseEvents) {
+        this._body.removeEventListener(event, this._recordMouseEvent, {
+          capture: true,
+        })
+      }
+
+      this._body.removeEventListener('contextmenu', this._openAssertionsMenu, {
+        capture: true,
+      })
+
+      this._clearPreviousMouseEvent()
+    },
+
+    copyToClipboard (commandsText) {
+      // clipboard API is not supported without secure context
+      if (window.isSecureContext && navigator.clipboard) {
+        return navigator.clipboard.writeText(commandsText)
+      }
+
+      // fallback to creating invisible textarea
+      // create the textarea in our document rather than this._body
+      // as to not interfere with the app in the aut
+      const textArea = document.createElement('textarea')
+
+      textArea.value = commandsText
+      textArea.style.position = 'fixed'
+      textArea.style.opacity = '0'
+
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand('copy')
+      textArea.remove()
+
+      return Promise.resolve()
+    },
+
+    _trustEvent (event) {
+      // only capture events sent by the actual user
+      // but disable the check if we're in a test
+      return event.isTrusted || getCypress().env('INTERNAL_E2E_TESTS') === 1
+    },
+
+    _recordMouseEvent (event) {
+      if (!this._trustEvent(event)) return
+
+      const { type, target } = event
+
+      if (type === 'mouseout') {
+        return this._clearPreviousMouseEvent()
+      }
+
+      // we only replace the previous mouse event if the element is different
+      // since we want to use the oldest possible selector
+      if (!this._matchPreviousMouseEvent(target)) {
+        this._previousMouseEvent = {
+          element: target,
+          selector: getCypress().SelectorPlayground.getSelector(window.UnifiedRunner.CypressJQuery(target)),
+        }
+      }
+    },
+
+    _getId () {
+      return this._currentId++
+    },
+
+    _getName (event, $el) {
+      const tagName = $el.prop('tagName')
+      const { type } = event
+
+      if (tagName === 'SELECT' && type === 'change') {
+        return 'select'
+      }
+
+      if (type === 'keydown' || type === 'keyup') {
+        return 'type'
+      }
+
+      if (type === 'click' && tagName === 'INPUT') {
+        const inputType = $el.prop('type')
+        const checked = $el.prop('checked')
+
+        if (inputType === 'radio' || (inputType === 'checkbox' && checked)) {
+          return 'check'
+        }
+
+        if (inputType === 'checkbox') {
+          return 'uncheck'
+        }
+      }
+
+      return type
+    },
+
+    _getMessage (event, $el) {
+      if (!eventsWithValue.includes(event.type)) {
+        return undefined
+      }
+
+      let val = $el.val()
+
+      if (event.type === 'keydown' || event.type === 'keyup') {
+        val = val.replace(/{/g, '{{}')
+
+        if (event.key === 'Enter') {
+          val = `${val}{enter}`
+        }
+      }
+
+      return val
+    },
+
+    _shouldRecordEvent (event, $el) {
+      const tagName = $el.prop('tagName')
+
+      // only want to record keystrokes within input elements
+      if ((event.type === 'keydown' || event.type === 'keyup') && tagName !== 'INPUT') {
+        return false
+      }
+
+      // we record all normal keys on keyup (rather than keydown) since the input value will be updated
+      // we do not record enter on keyup since a form submission will have already been triggered
+      if (event.type === 'keyup' && event.key === 'Enter') {
+        return false
+      }
+
+      // we record enter on keydown since this happens before a form submission is triggered
+      // all other keys are recorded on keyup
+      if (event.type === 'keydown' && event.key !== 'Enter') {
+        return false
+      }
+
+      // cy cannot click on a select
+      if (tagName === 'SELECT' && event.type === 'click') {
+        return false
+      }
+
+      // do not record clicks on option elements since this is handled with cy.select()
+      if (tagName === 'OPTION') {
+        return false
+      }
+
+      return true
+    },
+
+    _generateLog ({ id, name, message, type, number }: { id: `s${string}`, name: string, message: unknown, type: 'parent' | 'child', number?: number }): CommandLog {
+      return {
+        id,
+        testId: this.testId,
+        hookId: this.hookId,
+        name,
+        message: message ? stringifyActual(message) : undefined,
+        type,
+        state: 'passed',
+        instrument: 'command',
+        number,
+        numElements: 1,
+        isStudio: true,
+      }
+    },
+
+    _generateBothLogs (log): [CommandLog, CommandLog] {
+      return [
+        this._generateLog({
+          id: `s${log.id}-get`,
+          name: 'get',
+          message: log.selector,
+          type: 'parent',
+          number: log.id,
+        }),
+        this._generateLog({
+          id: `s${log.id}`,
+          name: log.name,
+          message: log.message,
+          type: 'child',
+        }),
+      ]
+    },
+
+    _addClearLog (selector) {
+      const lastLog = this.logs[this.logs.length - 1]
+
+      if (lastLog && lastLog.name === 'clear' && lastLog.selector === selector) {
+        return
+      }
+
+      this._addLog({
+        selector,
+        name: 'clear',
+        message: undefined,
+      })
+    },
+
+    _updateLog (log: StudioLog) {
+      const { id, name, message } = log
+
+      getEventManager().emit('reporter:log:state:changed', this._generateLog({
+        id: `s${id}`,
+        name,
+        message,
+        type: 'child',
+      }))
+    },
+
+    _updateLastLog (selector: string | undefined, name: string, message: unknown) {
+      const { length } = this.logs
+
+      if (!length) {
+        return false
+      }
+
+      const lastLog = this.logs[length - 1]
+
+      const updateLog = (newName = name, newMessage = message) => {
+        lastLog.message = newMessage
+        lastLog.name = newName
+
+        this._updateLog(lastLog)
+      }
+
+      if (selector === lastLog.selector) {
+        if (name === 'type' && lastLog.name === 'type') {
+          updateLog()
+
+          return true
+        }
+
+        // Cypress automatically issues a .click before every type
+        // so we can turn the extra click event into the .clear that comes before every type
+        if (name === 'type' && lastLog.name === 'click') {
+          updateLog('clear', undefined)
+
+          // we return false since we still need to add the type log
+          return false
+        }
+      }
+
+      return false
+    },
+
+    _generateAssertionMessage ($el: HTMLElement, ...args: AssertionArgs) {
+      const elementString = stringifyActual($el)
+      const assertionString = args[0].replace(/\./g, ' ')
+
+      let message = `expect **${elementString}** to ${assertionString}`
+
+      if (args[1]) {
+        message = `${message} **${args[1]}**`
+      }
+
+      if (args[2]) {
+        message = `${message} with the value **${args[2]}**`
+      }
+
+      return message
+    },
+
+    _isAssertionsMenu ($el) {
+      return $el.hasClass('__cypress-studio-assertions-menu')
+    },
+
+    _openAssertionsMenu (event) {
+      if (!this._body) {
+        throw Error('this._body was not defined')
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const $el = window.UnifiedRunner.CypressJQuery(event.target)
+
+      if (this._isAssertionsMenu($el)) {
+        return
+      }
+
+      this._closeAssertionsMenu()
+
+      window.UnifiedRunner.dom.openStudioAssertionsMenu({
+        $el,
+        $body: window.UnifiedRunner.CypressJQuery(this._body),
+        props: {
+          possibleAssertions: this._generatePossibleAssertions($el),
+          addAssertion: this._addAssertion,
+          closeMenu: this._closeAssertionsMenu,
+        },
+      })
+    },
+
+    _closeAssertionsMenu () {
+      if (!this._body) {
+        throw Error('this._body was not defined')
+      }
+
+      window.UnifiedRunner.dom.closeStudioAssertionsMenu(window.UnifiedRunner.CypressJQuery(this._body))
+    },
+
+    _generatePossibleAssertions ($el: JQuery<Element>) {
+      const tagName = $el.prop('tagName')
+
+      const possibleAssertions: Array<{ type: string, options?: unknown[] }> = []
+
+      if (!tagNamesWithoutText.includes(tagName)) {
+        const text = $el.text()
+
+        if (text) {
+          possibleAssertions.push({
+            type: 'have.text',
+            options: [{
+              value: text,
+            }],
+          })
+        }
+      }
+
+      if (tagNamesWithValue.includes(tagName)) {
+        const val = $el.val()
+
+        if (val !== undefined && val !== '') {
+          possibleAssertions.push({
+            type: 'have.value',
+            options: [{
+              value: val,
+            }],
+          })
+        }
+      }
+
+      const attributes = Array.from($el[0].attributes).reduce<Array<{ name: string, value: string }>>((acc, { name, value }) => {
+        if (name === 'value' || name === 'disabled') {
+          return acc
+        }
+
+        if (name === 'class') {
+          possibleAssertions.push({
+            type: 'have.class',
+            options: value.split(' ').map((value) => ({ value })),
+          })
+
+          return acc
+        }
+
+        if (name === 'id') {
+          possibleAssertions.push({
+            type: 'have.id',
+            options: [{
+              value,
+            }],
+          })
+
+          return acc
+        }
+
+        if (name !== undefined && name !== '' && value !== undefined && value !== '') {
+          return acc.concat({
+            name,
+            value,
+          })
+        }
+
+        return acc
+      }, [])
+
+      if (attributes.length > 0) {
+        possibleAssertions.push({
+          type: 'have.attr',
+          options: attributes,
+        })
+      }
+
+      possibleAssertions.push({
+        type: 'be.visible',
+      })
+
+      const isDisabled = $el.prop('disabled')
+
+      if (isDisabled !== undefined) {
+        possibleAssertions.push({
+          type: isDisabled ? 'be.disabled' : 'be.enabled',
+        })
+      }
+
+      const isChecked = $el.prop('checked')
+
+      if (isChecked !== undefined) {
+        possibleAssertions.push({
+          type: isChecked ? 'be.checked' : 'not.be.checked',
+        })
+      }
+
+      return possibleAssertions
+    },
+  },
+
+  getters: {
+    hasRunnableId (state) {
+      return !!state.testId || !!state.suiteId
+    },
+
+    isOpen: (state) => {
+      return state.isActive || state.isLoading || state._hasStarted
+    },
+
+    isEmpty: (state): boolean => {
+      return state.logs.length === 0
+    },
+
+    isReady (state): boolean {
+      return this.isOpen && this.isEmpty && !state.isLoading && !state.isFailed
+    },
+
+    hookId: (state) => {
+      return `${state.testId}-studio`
+    },
+
+    needsUrl: (state) => {
+      return state.isActive && !state.url && !state.isFailed
+    },
+
+    testError: (state) => {
+      return {
+        id: state.testId,
+        state: 'failed',
+      }
+    },
+  },
+})
diff --git a/packages/config/__snapshots__/index.spec.ts.js b/packages/config/__snapshots__/index.spec.ts.js
index f8433dda93a2..260e9ba18c67 100644
--- a/packages/config/__snapshots__/index.spec.ts.js
+++ b/packages/config/__snapshots__/index.spec.ts.js
@@ -7,7 +7,6 @@ exports['config/src/index .getBreakingKeys returns list of breaking config keys
   "experimentalRunEvents",
   "experimentalSessionSupport",
   "experimentalShadowDomSupport",
-  "experimentalStudio",
   "firefoxGcInterval",
   "ignoreTestFiles",
   "integrationFolder",
@@ -40,6 +39,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   "experimentalModifyObstructiveThirdPartyCode": false,
   "experimentalSourceRewriting": false,
   "experimentalSingleTabRunMode": false,
+  "experimentalStudio": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -122,6 +122,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   "experimentalModifyObstructiveThirdPartyCode": false,
   "experimentalSourceRewriting": false,
   "experimentalSingleTabRunMode": false,
+  "experimentalStudio": false,
   "fileServerFolder": "",
   "fixturesFolder": "cypress/fixtures",
   "excludeSpecPattern": "*.hot-update.js",
@@ -200,6 +201,7 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   "experimentalModifyObstructiveThirdPartyCode",
   "experimentalSourceRewriting",
   "experimentalSingleTabRunMode",
+  "experimentalStudio",
   "fileServerFolder",
   "fixturesFolder",
   "excludeSpecPattern",
diff --git a/packages/config/src/options.ts b/packages/config/src/options.ts
index 31b629ea08cb..843fb6e4ac71 100644
--- a/packages/config/src/options.ts
+++ b/packages/config/src/options.ts
@@ -23,8 +23,6 @@ const BREAKING_OPTION_ERROR_KEY: Readonly<AllCypressErrorNames[]> = [
   'EXPERIMENTAL_SESSION_SUPPORT_REMOVED',
   'EXPERIMENTAL_SINGLE_TAB_RUN_MODE',
   'EXPERIMENTAL_SHADOW_DOM_REMOVED',
-  'EXPERIMENTAL_STUDIO_REMOVED',
-  'EXPERIMENTAL_STUDIO_REMOVED',
   'FIREFOX_GC_INTERVAL_REMOVED',
   'NODE_VERSION_DEPRECATION_SYSTEM',
   'NODE_VERSION_DEPRECATION_BUNDLED',
@@ -223,6 +221,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'server',
+  }, {
+    name: 'experimentalStudio',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    requireRestartOnChange: 'browser',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',
@@ -566,11 +570,6 @@ export const breakingOptions: Readonly<BreakingOption[]> = [
     name: 'experimentalShadowDomSupport',
     errorKey: 'EXPERIMENTAL_SHADOW_DOM_REMOVED',
     isWarning: true,
-  }, {
-    name: 'experimentalStudio',
-    errorKey: 'EXPERIMENTAL_STUDIO_REMOVED',
-    isWarning: true,
-    showInLaunchpad: true,
   }, {
     name: 'firefoxGcInterval',
     errorKey: 'FIREFOX_GC_INTERVAL_REMOVED',
@@ -622,11 +621,6 @@ export const breakingRootOptions: Array<BreakingOption> = [
     errorKey: 'CONFIG_FILE_INVALID_ROOT_CONFIG',
     isWarning: false,
     testingTypes: ['component', 'e2e'],
-  }, {
-    name: 'experimentalStudio',
-    errorKey: 'EXPERIMENTAL_STUDIO_REMOVED',
-    isWarning: true,
-    testingTypes: ['component', 'e2e'],
   }, {
     name: 'indexHtmlFile',
     errorKey: 'CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT',
@@ -680,6 +674,12 @@ export const testingTypeBreakingOptions: { e2e: Array<BreakingOption>, component
       errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',
       isWarning: false,
     },
+    {
+      name: 'experimentalStudio',
+      errorKey: 'EXPERIMENTAL_STUDIO_E2E_ONLY',
+      isWarning: false,
+      testingTypes: ['component'],
+    },
     {
       name: 'testIsolation',
       errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',
diff --git a/packages/config/test/index.spec.ts b/packages/config/test/index.spec.ts
index 4007a4bdeb88..0a6ded9fda8b 100644
--- a/packages/config/test/index.spec.ts
+++ b/packages/config/test/index.spec.ts
@@ -176,28 +176,6 @@ describe('config/src/index', () => {
     })
   })
 
-  describe('.validateNoBreakingConfigLaunchpad', () => {
-    it('calls warning callback if config contains breaking option that should be shown in launchpad', () => {
-      const warningFn = sinon.spy()
-      const errorFn = sinon.spy()
-
-      configUtil.validateNoBreakingConfigLaunchpad({
-        'experimentalStudio': 'should break',
-        configFile: 'config.js',
-      }, warningFn, errorFn)
-
-      expect(warningFn).to.have.been.calledOnceWith('EXPERIMENTAL_STUDIO_REMOVED', {
-        name: 'experimentalStudio',
-        newName: undefined,
-        value: undefined,
-        testingType: undefined,
-        configFile: 'config.js',
-      })
-
-      expect(errorFn).to.have.callCount(0)
-    })
-  })
-
   describe('.validateOverridableAtRunTime', () => {
     it('calls onError handler if configuration override level=never', () => {
       const errorFn = sinon.spy()
diff --git a/packages/config/test/project/utils.spec.ts b/packages/config/test/project/utils.spec.ts
index 3b8fab921591..2af4ff0b36be 100644
--- a/packages/config/test/project/utils.spec.ts
+++ b/packages/config/test/project/utils.spec.ts
@@ -988,16 +988,6 @@ describe('config/src/project/utils', () => {
       expect(warning).to.be.calledWith('EXPERIMENTAL_RUN_EVENTS_REMOVED')
     })
 
-    it('warns if experimentalStudio is passed', async function () {
-      const warning = sinon.spy(errors, 'warning')
-
-      await this.defaults('experimentalStudio', true, {
-        experimentalStudio: true,
-      })
-
-      expect(warning).to.be.calledWith('EXPERIMENTAL_STUDIO_REMOVED')
-    })
-
     // @see https://github.com/cypress-io/cypress/pull/9185
     it('warns if experimentalNetworkStubbing is passed', async function () {
       const warning = sinon.spy(errors, 'warning')
@@ -1052,6 +1042,7 @@ describe('config/src/project/utils', () => {
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalSessionAndOrigin: { value: false, from: 'default' },
             experimentalSingleTabRunMode: { value: false, from: 'default' },
+            experimentalStudio: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
             fileServerFolder: { value: '', from: 'default' },
             fixturesFolder: { value: 'cypress/fixtures', from: 'default' },
@@ -1144,6 +1135,7 @@ describe('config/src/project/utils', () => {
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalSessionAndOrigin: { value: false, from: 'default' },
             experimentalSingleTabRunMode: { value: false, from: 'default' },
+            experimentalStudio: { value: false, from: 'default' },
             experimentalSourceRewriting: { value: false, from: 'default' },
             env: {
               foo: {
diff --git a/packages/driver/cypress.config.ts b/packages/driver/cypress.config.ts
index ffacf3c4d442..f555c0fd7527 100644
--- a/packages/driver/cypress.config.ts
+++ b/packages/driver/cypress.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   'projectId': 'ypt4pf',
+  'experimentalStudio': true,
   'hosts': {
     '*.foobar.com': '127.0.0.1',
     '*.idp.com': '127.0.0.1',
diff --git a/packages/errors/__snapshot-html__/EXPERIMENTAL_STUDIO_E2E_ONLY.html b/packages/errors/__snapshot-html__/EXPERIMENTAL_STUDIO_E2E_ONLY.html
new file mode 100644
index 000000000000..597643b3e343
--- /dev/null
+++ b/packages/errors/__snapshot-html__/EXPERIMENTAL_STUDIO_E2E_ONLY.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalStudio<span style="color:#e05561"> experiment is currently only supported for End to End Testing.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">If you have feedback about the experiment, please join the discussion here: http://on.cypress.io/studio-beta<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span>
+</pre></body></html>
\ No newline at end of file
diff --git a/packages/errors/src/errors.ts b/packages/errors/src/errors.ts
index 0ed3d43d4ea8..2426db69c7c6 100644
--- a/packages/errors/src/errors.ts
+++ b/packages/errors/src/errors.ts
@@ -1091,6 +1091,12 @@ export const AllCypressErrors = {
 
         If you have feedback about the experiment, please join the discussion here: http://on.cypress.io/single-tab-run-mode`
   },
+  EXPERIMENTAL_STUDIO_E2E_ONLY: () => {
+    return errTemplate`\
+        The ${fmt.highlight(`experimentalStudio`)} experiment is currently only supported for End to End Testing.
+
+        If you have feedback about the experiment, please join the discussion here: http://on.cypress.io/studio-beta`
+  },
   FIREFOX_GC_INTERVAL_REMOVED: () => {
     return errTemplate`\
         The ${fmt.highlight(`firefoxGcInterval`)} configuration option was removed in ${fmt.cypressVersion(`8.0.0`)}. It was introduced to work around a bug in Firefox 79 and below.
diff --git a/packages/errors/test/unit/visualSnapshotErrors_spec.ts b/packages/errors/test/unit/visualSnapshotErrors_spec.ts
index fb0e71e70963..a81dacf282ca 100644
--- a/packages/errors/test/unit/visualSnapshotErrors_spec.ts
+++ b/packages/errors/test/unit/visualSnapshotErrors_spec.ts
@@ -1200,5 +1200,11 @@ describe('visual error templates', () => {
         default: [],
       }
     },
+
+    EXPERIMENTAL_STUDIO_E2E_ONLY: () => {
+      return {
+        default: [],
+      }
+    },
   })
 })
diff --git a/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts b/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
index 719b60e498ae..fadd876d1f67 100644
--- a/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
+++ b/packages/frontend-shared/cypress/e2e/support/e2eSupport.ts
@@ -157,7 +157,12 @@ declare global {
        * Tabs until the result of fn is true
        */
       tabUntil(fn: ($el: JQuery) => boolean, limit?: number): Chainable<any>
+      /**
+       * Get the AUT <iframe>. Useful for Cypress in Cypress tests.
+       */
+      getAutIframe(): Chainable<JQuery<HTMLIFrameElement>>
     }
+
   }
 }
 
@@ -526,9 +531,15 @@ function tabUntil (fn: (el: JQuery<HTMLElement>) => boolean, limit: number = 10)
   })
 }
 
+function getAutIframe () {
+  return cy.get('iframe.aut-iframe').its('0.contentDocument.documentElement').then(cy.wrap) as Cypress.Chainable<JQuery<HTMLIFrameElement>>
+}
+
 Cypress.on('uncaught:exception', (err) => !err.message.includes('ResizeObserver loop limit exceeded'))
 
 Cypress.Commands.add('scaffoldProject', scaffoldProject)
+
+Cypress.Commands.add('getAutIframe', getAutIframe)
 Cypress.Commands.add('addProject', addProject)
 Cypress.Commands.add('openGlobalMode', openGlobalMode)
 Cypress.Commands.add('visitApp', visitApp)
diff --git a/packages/frontend-shared/src/components/StandardModal.cy.tsx b/packages/frontend-shared/src/components/StandardModal.cy.tsx
index 3ef38becd302..c30dc86e5368 100644
--- a/packages/frontend-shared/src/components/StandardModal.cy.tsx
+++ b/packages/frontend-shared/src/components/StandardModal.cy.tsx
@@ -35,6 +35,32 @@ describe('<StandardModal />', { viewportWidth: 800, viewportHeight: 400 }, () =>
       cy.percySnapshot()
     })
 
+    it('does not render helpLink when noHelp is true', () => {
+      cy.mount(
+        <StandardModal
+          class="w-400px"
+          modelValue={true}
+          noHelp={true}
+          title={title}
+        >
+          {body}
+        </StandardModal>,
+      )
+
+      cy.contains('a', defaultMessages.links.needHelp).should('not.exist')
+
+      cy.findByLabelText(defaultMessages.actions.close, {
+        selector: 'button',
+      })
+      .should('be.visible')
+      .and('not.be.disabled')
+
+      cy.contains('h2', title).should('be.visible')
+      cy.contains(body).should('be.visible')
+
+      cy.percySnapshot()
+    })
+
     it('bare variant renders without padding in body', () => {
       cy.mount(<StandardModal
         class="w-400px"
diff --git a/packages/frontend-shared/src/components/StandardModal.vue b/packages/frontend-shared/src/components/StandardModal.vue
index 7a0ad83fcff9..167743fd9549 100644
--- a/packages/frontend-shared/src/components/StandardModal.vue
+++ b/packages/frontend-shared/src/components/StandardModal.vue
@@ -17,6 +17,7 @@
         :class="props.class || ''"
       >
         <StandardModalHeader
+          :no-help="noHelp"
           :help-link="helpLink"
           :help-text="helpText"
           @close="closeModal"
@@ -72,11 +73,13 @@ const props = withDefaults(defineProps<{
   helpLink?: string
   helpText?: string
   variant?: 'bare'
+  noHelp?: boolean
   title?: string
   class?: string | string[] | Record<string, any>
 }>(), {
   modelValue: false,
   helpText: `${defaultMessages.links.needHelp}`,
+  noHelp: false,
   helpLink: 'https://on.cypress.io',
   class: undefined,
   variant: undefined,
diff --git a/packages/frontend-shared/src/components/StandardModalHeader.vue b/packages/frontend-shared/src/components/StandardModalHeader.vue
index 9ba25e54427f..4cc35acc3fb2 100644
--- a/packages/frontend-shared/src/components/StandardModalHeader.vue
+++ b/packages/frontend-shared/src/components/StandardModalHeader.vue
@@ -6,18 +6,20 @@
       <DialogTitle class="text-gray-900 text-18px inline-block">
         <slot />
       </DialogTitle>
-      <span
-        v-if="helpLink.length"
-        class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block"
-      /> <ExternalLink
-        v-if="helpLink.length"
-        :href="helpLink"
-        class="outline-transparent text-indigo-500 text-16px group"
-      >
-        <span class="group-hocus:underline">{{ helpText }}</span>
+
+      <template v-if="!noHelp">
+        <span class="border-t border-t-gray-100 h-6px mx-8px w-32px inline-block" />
+        <ExternalLink
+          :href="helpLink"
+          class="outline-transparent text-indigo-500 text-16px group"
+        >
+          <span class="group-hocus:underline">{{ helpText }}</span>
+        </ExternalLink>
+
         <i-cy-circle-bg-question-mark_x16 class="ml-8px -top-2px relative inline-block icon-dark-indigo-500 icon-light-indigo-100" />
-      </ExternalLink>
+      </template>
     </div>
+
     <button
       :aria-label="t(`actions.close`)"
       class="border-transparent rounded-full outline-none border-1 group"
@@ -35,10 +37,13 @@ import { useI18n } from '@cy/i18n'
 
 const { t } = useI18n()
 
-defineProps<{
+withDefaults(defineProps<{
   helpLink: string
   helpText: string
-}>()
+  noHelp?: boolean
+}>(), {
+  noHelp: false,
+})
 
 defineEmits<{
   (eventName: 'close'): void
diff --git a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
index 0c90463d3c22..d03c32138c05 100644
--- a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
@@ -4,7 +4,7 @@
     variant="bare"
     :title="title"
     :model-value="show"
-    help-link=""
+    :no-help="true"
     @update:model-value="emits('close')"
   >
     <div class="p-24px text-gray-700">
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index ed9255c00565..f7e056891142 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -494,6 +494,10 @@
       "experimentalSourceRewriting": {
         "name": "Source Rewriting",
         "description": "Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm. See [#5273](https://github.com/cypress-io/cypress/issues/5273) for details."
+      },
+      "experimentalStudio": {
+        "name": "Studio",
+        "description": "Generate and save commands directly to your test suite by interacting with your app as an end user would."
       }
     },
     "device": {
@@ -798,6 +802,27 @@
       "buttonHref": "https://on.cypress.io/viewport",
       "infoText": "The viewport determines the width and height of your application under test. By default the viewport will be {0} by {1} for {2} testing.",
       "configText": "Additionally, you can override this value in your {2} or via the {4} command."
+    },
+    "studio": {
+      "studio": "Studio",
+      "studioDescription": "Generate Cypress commands by interacting with your site as an end user would. Then, save these commands directly to your test file.",
+      "studioDetailedDescription": "Generate and save commands directly to your test suite by interacting with your app as an end user would. Right click on an element to add an assertion. Studio will track events that generate the following commands:",
+      "getStartedButton": "Get Started",
+      "feedbackPrompt": "Your {0} will be highly influential to our team.",
+      "experimentalMessage": "This feature is currently experimental and we will be adding more commands and abilities in the future.",
+      "feedbackLink": "feedback",
+      "saveTest": "Save Test",
+      "testName": "Test Name",
+      "saveTestButton": "Save",
+      "closeStudio": "Close Studio",
+      "restartStudio": "Restart Studio",
+      "copyCommands": "Copy Commands to Clipboard",
+      "commandsCopied": "Commands Copied!",
+      "availableCommands": "Available commands",
+      "giveFeedback": "Give Feedback",
+      "enterValidUrl": "Enter a valid URL to visit",
+      "continue": "Continue",
+      "actionCancel": "Cancel"
     }
   },
   "warnings": {
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 516ab59aa2bf..2ade51763c55 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -668,10 +668,14 @@ type Mutation {
   Create a project in the dashboard and return its object
   """
   cloudProjectCreate(
+    campaign: String
     ciProviders: [String!]
+    cohort: String
+    medium: String
     name: String!
     orgId: ID!
     public: Boolean!
+    source: String
   ): CloudProject
 
   """
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 9ebea3ae4fe6..b9e9a35644f7 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -765,6 +765,7 @@ enum ErrorTypeEnum {
   EXPERIMENTAL_SESSION_SUPPORT_REMOVED
   EXPERIMENTAL_SHADOW_DOM_REMOVED
   EXPERIMENTAL_SINGLE_TAB_RUN_MODE
+  EXPERIMENTAL_STUDIO_E2E_ONLY
   EXPERIMENTAL_STUDIO_REMOVED
   EXTENSION_NOT_LOADED
   FIREFOX_COULD_NOT_CONNECT
@@ -1188,7 +1189,7 @@ type Mutation {
   closeBrowser: Boolean
 
   """Create a project in the dashboard and return its object"""
-  cloudProjectCreate(ciProviders: [String!], name: String!, orgId: ID!, public: Boolean!): CloudProject
+  cloudProjectCreate(campaign: String, ciProviders: [String!], cohort: String, medium: String, name: String!, orgId: ID!, public: Boolean!, source: String): CloudProject
 
   """Request access to an organization from a projectId"""
   cloudProjectRequestAccess(projectSlug: String!): CloudProjectResult
diff --git a/packages/launchpad/cypress/e2e/config-warning.cy.ts b/packages/launchpad/cypress/e2e/config-warning.cy.ts
index 8e5ec9be09a1..4e9c03348ef7 100644
--- a/packages/launchpad/cypress/e2e/config-warning.cy.ts
+++ b/packages/launchpad/cypress/e2e/config-warning.cy.ts
@@ -1,3 +1,5 @@
+const THIRTY_SECONDS = 1000 * 30
+
 describe('baseUrl', () => {
   it('should show baseUrl warning if Cypress cannot connect to provided baseUrl', () => {
     cy.scaffoldProject('config-with-base-url-warning')
@@ -89,47 +91,48 @@ describe('experimentalSingleTabRunMode', () => {
 })
 
 describe('experimentalStudio', () => {
-  it('should show experimentalStudio warning if Cypress detects experimentalStudio config has been set', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.openProject('experimental-studio')
+  it('is not a valid config for component testing', () => {
+    cy.scaffoldProject('experimentalSingleTabRunMode')
+    cy.openProject('experimentalSingleTabRunMode')
     cy.visitLaunchpad()
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress.config.js', `
+        const { defineConfig } = require('cypress')
+
+        module.exports = defineConfig({
+          component: {
+            experimentalStudio: true,
+            devServer: {
+              bundler: 'webpack',
+            },
+          },
+        })`)
+    })
 
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.get('[data-cy-testingtype="e2e"]').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
+    cy.get('[data-cy-testingtype="component"]').click()
+    cy.findByTestId('alert-body').contains('The experimentalStudio experiment is currently only supported for End to End Testing.')
   })
 
-  it('should not continually show experimentalStudio warning in the same project', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.openProject('experimental-studio')
-    cy.visitLaunchpad()
-
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.findAllByLabelText(cy.i18n.components.modal.dismiss).first().click()
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
+  it('is a valid config for e2e testing', { defaultCommandTimeout: THIRTY_SECONDS }, () => {
+    cy.scaffoldProject('e2e')
+    cy.openProject('e2e')
     cy.withCtx(async (ctx) => {
-      await ctx.actions.file.writeFileInProject('cypress.config.js', await ctx.actions.file.readFileInProject('cypress.config.js'))
-    })
+      await ctx.actions.file.writeFileInProject('cypress.config.js', `
+        const { defineConfig } = require('cypress')
 
-    cy.get('[data-cy="loading-spinner"]')
-    cy.get('h1').should('contain', 'Welcome to Cypress!')
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
-  })
+        module.exports = defineConfig({
+          experimentalStudio: true,
+          e2e: {
+            experimentalStudio: true
+          },
+        })
+      `)
+    })
 
-  it('should show experimentalStudio warning when opening project and going back', () => {
-    cy.scaffoldProject('experimental-studio')
-    cy.addProject('experimental-studio')
-    cy.openGlobalMode()
     cy.visitLaunchpad()
-    cy.contains('experimental-studio').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
-    cy.findAllByLabelText(cy.i18n.components.modal.dismiss).first().click()
-    cy.get('[data-cy="warning-alert"]').should('not.exist')
-    cy.get('a').contains('Projects').click()
-    cy.contains('[data-cy="project-card"]', 'experimental-studio').click()
-
     cy.get('[data-cy-testingtype="e2e"]').click()
-    cy.get('[data-cy="warning-alert"]').contains('Warning: Experimental Studio Removed')
+    cy.get('h1').contains('Initializing Config').should('not.exist')
+    cy.get('h1').contains('Choose a Browser')
   })
 })
 
diff --git a/packages/reporter/cypress.config.ts b/packages/reporter/cypress.config.ts
index 906514665707..d11b95aa2f57 100644
--- a/packages/reporter/cypress.config.ts
+++ b/packages/reporter/cypress.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
   },
 
   e2e: {
+    experimentalStudio: true,
     baseUrl: 'http://localhost:5006',
     setupNodeEvents (_on, config) {
       const express = require('express')
diff --git a/packages/reporter/cypress/e2e/commands.cy.ts b/packages/reporter/cypress/e2e/commands.cy.ts
index f9caae2c3f81..18923cfd4c4b 100644
--- a/packages/reporter/cypress/e2e/commands.cy.ts
+++ b/packages/reporter/cypress/e2e/commands.cy.ts
@@ -957,8 +957,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
     })
   })
 
-  // FIXME: When studio support is re-introduced we can enable these tests.
-  context.skip('studio commands', () => {
+  context('studio commands', () => {
     beforeEach(() => {
       addCommand(runner, {
         id: 10,
@@ -990,10 +989,10 @@ describe('commands', { viewportHeight: 1000 }, () => {
 
     it('only parent studio commands display remove button', () => {
       cy.contains('#studio-command-parent').closest('.command')
-      .find('.studio-command-remove').should('be.visible')
+      .find('.studio-command-remove').should('exist')
 
       cy.contains('#studio-command-child').closest('.command')
-      .find('.studio-command-remove').should('not.be.visible')
+      .find('.studio-command-remove').should('not.exist')
     })
 
     it('emits studio:remove:command with number when delete button is clicked', () => {
diff --git a/packages/reporter/cypress/e2e/runnables.cy.ts b/packages/reporter/cypress/e2e/runnables.cy.ts
index 7f16699c71b0..2f86da8ec6e6 100644
--- a/packages/reporter/cypress/e2e/runnables.cy.ts
+++ b/packages/reporter/cypress/e2e/runnables.cy.ts
@@ -1,17 +1,23 @@
 import { EventEmitter } from 'events'
-import { RunnablesErrorModel } from '../../src/runnables/runnable-error'
 import { RootRunnable } from '../../src/runnables/runnables-store'
 import { itHandlesFileOpening } from '../support/utils'
+import type { BaseReporterProps } from '../../src/main'
+import type { RunnablesErrorModel } from '../../src/runnables/runnable-error'
+import { MobxRunnerStore } from '@packages/app/src/store'
 
-interface RenderProps {
-  error?: RunnablesErrorModel
-}
+const runnerStore = new MobxRunnerStore('e2e')
+
+runnerStore.setSpec({
+  name: 'foo.js',
+  relative: 'relative/path/to/foo.js',
+  absolute: '/absolute/path/to/foo.js',
+})
 
 describe('runnables', () => {
   let runner: EventEmitter
   let runnables: RootRunnable
-  let render: Function
-  let start: Function
+  let render: (renderProps?: Partial<BaseReporterProps>) => void
+  let start: (renderProps?: Partial<BaseReporterProps>) => Cypress.Chainable
 
   beforeEach(() => {
     cy.fixture('runnables').then((_runnables) => {
@@ -20,22 +26,18 @@ describe('runnables', () => {
 
     runner = new EventEmitter()
 
-    render = (renderProps: RenderProps = {}) => {
-      cy.visit('/').then((win) => {
-        win.render(Object.assign({
+    render = (renderProps: Partial<BaseReporterProps> = {}) => {
+      cy.visit('/').then((win: Cypress.AUTWindow) => {
+        win.render({
           runner,
-          runnerStore: {
-            spec: {
-              name: 'foo',
-              absolute: '/foo/bar',
-              relative: 'foo/bar',
-            },
-          },
-        }, renderProps))
+          studioEnabled: renderProps.studioEnabled || false,
+          runnerStore,
+          ...renderProps,
+        })
       })
     }
 
-    start = (renderProps?: RenderProps) => {
+    start = (renderProps?: Partial<BaseReporterProps>) => {
       render(renderProps)
 
       return cy.get('.reporter').then(() => {
@@ -61,7 +63,7 @@ describe('runnables', () => {
   })
 
   it('displays bundle error if specified', () => {
-    const error = {
+    const error: RunnablesErrorModel = {
       title: 'Oops...we found an error preparing this test file:',
       link: 'https://on.cypress.io/we-found-an-error-preparing-your-test-file',
       callout: '/path/to/spec',
@@ -130,7 +132,7 @@ describe('runnables', () => {
 
   it('does not display time if no time taken', () => {
     start()
-    cy.get('.runnable-header span:first').should('have.text', 'foo')
+    cy.get('.runnable-header span:first').should('have.text', 'foo.js')
     cy.get('.runnable-header span:last').should('not.have.text', '--')
   })
 
@@ -151,28 +153,8 @@ describe('runnables', () => {
       cy.percySnapshot()
     })
 
-    it('does not display links to work with file if running all specs', () => {
-      start({
-        runnerStore: {
-          spec: {
-            name: 'All Integration Specs',
-            absolute: '__all',
-            relative: '__all',
-          },
-        },
-      })
-
-      cy.contains('No tests found.').should('be.visible')
-      cy.contains('Cypress could not detect tests in this file.').should('be.visible')
-      cy.contains('Open file in IDE').should('not.exist')
-      cy.contains('Create test with Cypress Studio').should('not.exist')
-      cy.get('.help-link').should('have.attr', 'href', 'https://on.cypress.io/intro')
-      cy.get('.help-link').should('have.attr', 'target', '_blank')
-    })
-
-    // FIXME: When studio support is re-introduced we can enable these tests.
-    it.skip('can launch studio', () => {
-      start().then(() => {
+    it('can launch studio', () => {
+      start({ studioEnabled: true }).then(() => {
         cy.stub(runner, 'emit')
 
         cy.contains('Cypress Studio').click()
@@ -184,13 +166,7 @@ describe('runnables', () => {
     describe('open in ide', () => {
       beforeEach(() => {
         start({
-          runnerStore: {
-            spec: {
-              name: 'foo.js',
-              relative: 'relative/path/to/foo.js',
-              absolute: '/absolute/path/to/foo.js',
-            },
-          },
+          runnerStore,
         })
       })
 
@@ -211,13 +187,7 @@ describe('runnables', () => {
       cy.window().then((win) => win.__vite__ = true)
 
       start({
-        runnerStore: {
-          spec: {
-            name: 'foo.js',
-            relative: 'relative/path/to/foo.js',
-            absolute: '/absolute/path/to/foo.js',
-          },
-        },
+        runnerStore,
       })
     })
 
diff --git a/packages/reporter/cypress/e2e/suites.cy.ts b/packages/reporter/cypress/e2e/suites.cy.ts
index 663172d1d335..d8f972adc50d 100644
--- a/packages/reporter/cypress/e2e/suites.cy.ts
+++ b/packages/reporter/cypress/e2e/suites.cy.ts
@@ -1,11 +1,20 @@
+import { MobxRunnerStore } from '@packages/app/src/store'
 import { EventEmitter } from 'events'
 import { RootRunnable } from '../../src/runnables/runnables-store'
 
+const runnerStore = new MobxRunnerStore('e2e')
+
+runnerStore.setSpec({
+  name: 'foo.js',
+  relative: 'relative/path/to/foo.js',
+  absolute: '/absolute/path/to/foo.js',
+})
+
 describe('suites', () => {
   let runner: EventEmitter
   let runnables: RootRunnable
 
-  beforeEach(() => {
+  function renderReporter ({ studioEnabled }: { studioEnabled?: boolean } = {}) {
     cy.fixture('runnables').then((_runnables) => {
       runnables = _runnables
     })
@@ -15,13 +24,8 @@ describe('suites', () => {
     cy.visit('/').then((win) => {
       win.render({
         runner,
-        runnerStore: {
-          spec: {
-            name: 'foo.js',
-            relative: 'relative/path/to/foo.js',
-            absolute: '/absolute/path/to/foo.js',
-          },
-        },
+        studioEnabled: studioEnabled || false,
+        runnerStore,
       })
     })
 
@@ -29,6 +33,10 @@ describe('suites', () => {
       runner.emit('runnables:ready', runnables)
       runner.emit('reporter:start', {})
     })
+  }
+
+  beforeEach(() => {
+    renderReporter()
   })
 
   it('includes the class "suite"', () => {
@@ -129,8 +137,11 @@ describe('suites', () => {
     })
   })
 
-  // FIXME: When studio support is re-introduced we can enable these tests.
-  describe.skip('studio button', () => {
+  describe('studio button', () => {
+    beforeEach(() => {
+      renderReporter({ studioEnabled: true })
+    })
+
     it('displays studio icon with half transparency when hovering over test title', () => {
       cy.contains('nested suite 1')
       .closest('.runnable-wrapper')
diff --git a/packages/reporter/cypress/e2e/tests.cy.ts b/packages/reporter/cypress/e2e/tests.cy.ts
index 98a95b8d4e1e..e1c72d47dce1 100644
--- a/packages/reporter/cypress/e2e/tests.cy.ts
+++ b/packages/reporter/cypress/e2e/tests.cy.ts
@@ -1,47 +1,44 @@
 import { EventEmitter } from 'events'
 import { RootRunnable } from '../../src/runnables/runnables-store'
-import { addCommand } from '../support/utils'
+import { MobxRunnerStore } from '@packages/app/src/store/mobx-runner-store'
 
-describe('tests', () => {
-  let runner: EventEmitter
-  let runnables: RootRunnable
-
-  const addStudioCommand = () => {
-    addCommand(runner, {
-      hookId: 'r3-studio',
-      name: 'get',
-      message: '#studio-command',
-      state: 'success',
-      isStudio: true,
-    })
-  }
+let runner: EventEmitter
+let runnables: RootRunnable
 
-  beforeEach(() => {
-    cy.fixture('runnables').then((_runnables) => {
-      runnables = _runnables
-    })
+function visitAndRenderReporter (runnerStore: MobxRunnerStore = new MobxRunnerStore('e2e')) {
+  cy.fixture('runnables').then((_runnables) => {
+    runnables = _runnables
+  })
 
-    runner = new EventEmitter()
-
-    cy.visit('/').then((win) => {
-      win.render({
-        runner,
-        runnerStore: {
-          spec: {
-            name: 'foo.js',
-            relative: 'relative/path/to/foo.js',
-            absolute: '/absolute/path/to/foo.js',
-          },
-        },
-      })
-    })
+  runner = new EventEmitter()
+
+  runnerStore ??= new MobxRunnerStore('e2e')
 
-    cy.get('.reporter').then(() => {
-      runner.emit('runnables:ready', runnables)
-      runner.emit('reporter:start', {})
+  runnerStore.setSpec({
+    name: 'foo.js',
+    relative: 'relative/path/to/foo.js',
+    absolute: '/absolute/path/to/foo.js',
+  })
+
+  cy.visit('/').then((win) => {
+    win.render({
+      studioEnabled: true,
+      runner,
+      runnerStore,
     })
   })
 
+  cy.get('.reporter').then(() => {
+    runner.emit('runnables:ready', runnables)
+    runner.emit('reporter:start', { studioActive: true })
+  })
+}
+
+describe('tests', () => {
+  beforeEach(() => {
+    visitAndRenderReporter()
+  })
+
   it('includes the class "test"', () => {
     cy.contains('test 1')
     .closest('.runnable')
@@ -132,10 +129,92 @@ describe('tests', () => {
       .find('.collapsible-content').should('not.exist')
     })
   })
+})
+
+describe('studio controls', () => {
+  describe('canCopyStudioCommands is true', () => {
+    beforeEach(() => {
+      const runnerStore = new MobxRunnerStore('e2e')
+
+      runnerStore.setCanSaveStudioLogs(true)
+
+      visitAndRenderReporter(runnerStore)
+      cy.contains('test 1').click()
+      .parents('.collapsible').first()
+      .find('.studio-controls').as('studioControls')
+    })
+
+    it('is enabled with tooltip when there are commands', () => {
+      cy.get('@studioControls')
+      .find('.studio-copy')
+      .should('not.be.disabled')
+      .trigger('mouseover')
+
+      cy.get('.cy-tooltip').should('have.text', 'Copy Commands to Clipboard')
+    })
+
+    it('is enabled when there are commands', () => {
+      cy.get('@studioControls').find('.studio-save').should('not.be.disabled')
+    })
+
+    it('is emits studio:save when clicked', () => {
+      cy.stub(runner, 'emit')
+
+      cy.get('@studioControls').find('.studio-save').click()
+
+      cy.wrap(runner.emit).should('be.calledWith', 'studio:save')
+    })
+
+    it('is emits studio:copy:to:clipboard when clicked', () => {
+      cy.stub(runner, 'emit')
+
+      cy.get('@studioControls').find('.studio-copy').click()
+
+      cy.wrap(runner.emit).should('be.calledWith', 'studio:copy:to:clipboard')
+    })
+
+    it('displays success state after commands are copied', () => {
+      cy.stub(runner, 'emit').callsFake((event, callback) => {
+        if (event === 'studio:copy:to:clipboard') {
+          callback('')
+        }
+      })
+
+      cy.get('@studioControls')
+      .find('.studio-copy')
+      .click()
+      .should('have.class', 'studio-copy-success')
+      .trigger('mouseover')
+
+      cy.get('.cy-tooltip').should('have.text', 'Commands Copied!')
+    })
+  })
+
+  describe('canCopyStudioCommands is false', () => {
+    beforeEach(() => {
+      visitAndRenderReporter()
+      cy.contains('test 1').click()
+      .parents('.collapsible').first()
+      .find('.studio-controls').as('studioControls')
+    })
+
+    describe('copy button', () => {
+      it('is disabled without tooltip when there are no commands', () => {
+        cy.get('@studioControls')
+        .find('.studio-copy')
+        .should('be.disabled')
+        .parent('span')
+        .trigger('mouseover')
+
+        cy.get('.cy-tooltip').should('not.exist')
+      })
+    })
 
-  // FIXME: When studio support is re-introduced we can enable these tests.
-  describe.skip('studio', () => {
     describe('button', () => {
+      beforeEach(() => {
+        runner.emit('reporter:start', { studioActive: false })
+      })
+
       it('displays studio icon with half transparency when hovering over test title', { scrollBehavior: false }, () => {
         cy.contains('test 1')
         .closest('.runnable-wrapper')
@@ -174,14 +253,6 @@ describe('tests', () => {
       })
 
       describe('with studio active', () => {
-        beforeEach(() => {
-          runner.emit('reporter:start', { studioActive: true })
-
-          cy.contains('test 1').click()
-          .parents('.collapsible').first()
-          .find('.studio-controls').as('studioControls')
-        })
-
         it('is visible with save and copy button when test passed', () => {
           cy.get('@studioControls').should('be.visible')
           cy.get('@studioControls').find('.studio-save').should('be.visible')
@@ -232,77 +303,10 @@ describe('tests', () => {
           cy.wrap(runner.emit).should('be.calledWith', 'studio:cancel')
         })
 
-        describe('copy button', () => {
-          it('is disabled without tooltip when there are no commands', () => {
-            cy.get('@studioControls')
-            .find('.studio-copy')
-            .should('be.disabled')
-            .parent('span')
-            .trigger('mouseover')
-
-            cy.get('.cy-tooltip').should('not.exist')
-          })
-
-          it('is enabled with tooltip when there are commands', () => {
-            addStudioCommand()
-
-            cy.get('@studioControls')
-            .find('.studio-copy')
-            .should('not.be.disabled')
-            .trigger('mouseover')
-
-            cy.get('.cy-tooltip').should('have.text', 'Copy Commands to Clipboard')
-          })
-
-          it('is emits studio:copy:to:clipboard when clicked', () => {
-            addStudioCommand()
-
-            cy.stub(runner, 'emit')
-
-            cy.get('@studioControls').find('.studio-copy').click()
-
-            cy.wrap(runner.emit).should('be.calledWith', 'studio:copy:to:clipboard')
-          })
-
-          it('displays success state after commands are copied', () => {
-            addStudioCommand()
-
-            cy.stub(runner, 'emit').callsFake((event, callback) => {
-              if (event === 'studio:copy:to:clipboard') {
-                callback('')
-              }
-            })
-
-            cy.get('@studioControls')
-            .find('.studio-copy')
-            .click()
-            .should('have.class', 'studio-copy-success')
-            .trigger('mouseover')
-
-            cy.get('.cy-tooltip').should('have.text', 'Commands Copied!')
-          })
-        })
-
         describe('save button', () => {
-          it('is disabled without commands', () => {
+          it('save button is disabled', () => {
             cy.get('@studioControls').find('.studio-save').should('be.disabled')
           })
-
-          it('is enabled when there are commands', () => {
-            addStudioCommand()
-
-            cy.get('@studioControls').find('.studio-save').should('not.be.disabled')
-          })
-
-          it('is emits studio:save when clicked', () => {
-            addStudioCommand()
-
-            cy.stub(runner, 'emit')
-
-            cy.get('@studioControls').find('.studio-save').click()
-
-            cy.wrap(runner.emit).should('be.calledWith', 'studio:save')
-          })
         })
       })
     })
diff --git a/packages/reporter/cypress/e2e/unit/test_model.cy.ts b/packages/reporter/cypress/e2e/unit/test_model.cy.ts
index a1b872b90031..2d6f0f03c4d6 100644
--- a/packages/reporter/cypress/e2e/unit/test_model.cy.ts
+++ b/packages/reporter/cypress/e2e/unit/test_model.cy.ts
@@ -27,6 +27,7 @@ const createCommand = (props: Partial<CommandProps> = {}) => {
     numElements: 1,
     testCurrentRetry: 0,
     testId: 'r3',
+    state: 'active',
     timeout: 4000,
     wallClockStartedAt: new Date().toString(),
   } as CommandProps
@@ -105,28 +106,6 @@ describe('Test model', () => {
     })
   })
 
-  context('#studioIsNotEmpty', () => {
-    it('is empty when there are no studio commands', () => {
-      const test = createTest()
-
-      expect(test.studioIsNotEmpty).to.be.false
-
-      test.addLog(createCommand())
-
-      expect(test.studioIsNotEmpty).to.be.false
-    })
-
-    it('is is not empty when there are studio commands', () => {
-      const test = createTest()
-
-      expect(test.studioIsNotEmpty).to.be.false
-
-      test.addLog(createCommand({ hookId: 'r3-studio' }))
-
-      expect(test.studioIsNotEmpty).to.be.true
-    })
-  })
-
   context('#addAgent', () => {
     it('adds the agent to the agents collection', () => {
       const test = createTest()
diff --git a/packages/reporter/package.json b/packages/reporter/package.json
index 7c25a0e9386b..9f990b666ca6 100644
--- a/packages/reporter/package.json
+++ b/packages/reporter/package.json
@@ -17,6 +17,7 @@
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@packages/driver": "0.0.0-development",
+    "@packages/types": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
     "@reach/dialog": "0.10.5",
     "classnames": "2.3.1",
diff --git a/packages/reporter/src/attempts/attempt-model.ts b/packages/reporter/src/attempts/attempt-model.ts
index 27fe8b8227a6..0e5fc4c65ec7 100644
--- a/packages/reporter/src/attempts/attempt-model.ts
+++ b/packages/reporter/src/attempts/attempt-model.ts
@@ -5,7 +5,8 @@ import Agent, { AgentProps } from '../agents/agent-model'
 import Command, { CommandProps } from '../commands/command-model'
 import Err from '../errors/err-model'
 import Route, { RouteProps } from '../routes/route-model'
-import Test, { UpdatableTestProps, TestProps, TestState } from '../test/test-model'
+import Test, { UpdatableTestProps, TestProps } from '../test/test-model'
+import type { TestState } from '@packages/types'
 import Hook, { HookName } from '../hooks/hook-model'
 import { FileDetails } from '@packages/types'
 import { LogProps } from '../runnables/runnables-store'
@@ -90,10 +91,6 @@ export default class Attempt {
     return this.test.isActive || this.isLast
   }
 
-  @computed get studioIsNotEmpty () {
-    return _.some(this.hooks, (hook) => hook.isStudio && hook.commands.length)
-  }
-
   addLog = (props: LogProps) => {
     switch (props.instrument) {
       case 'command': {
diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx
index 1bd765ec6398..47237f58d150 100644
--- a/packages/reporter/src/attempts/attempts.tsx
+++ b/packages/reporter/src/attempts/attempts.tsx
@@ -2,12 +2,13 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
 
+import { TestState } from '@packages/types'
 import Agents from '../agents/agents'
 import Collapsible from '../collapsible/collapsible'
 import Hooks from '../hooks/hooks'
 import Routes from '../routes/routes'
 import TestError from '../errors/test-error'
-import TestModel, { TestState } from '../test/test-model'
+import TestModel from '../test/test-model'
 import AttemptModel from './attempt-model'
 import Sessions from '../sessions/sessions'
 
@@ -56,7 +57,7 @@ function renderAttemptContent (model: AttemptModel, studioActive: boolean) {
       </div>
       <div className='attempt-error-region'>
         <TestError model={model} />
-        {studioActive && <StudioError />}
+        {studioActive && model.state === 'failed' && <StudioError />}
       </div>
     </div>
   )
@@ -83,9 +84,7 @@ class Attempt extends Component<AttemptProps> {
     return (
       <li
         key={model.id}
-        className={cs('attempt-item', `attempt-state-${model.state}`, {
-          'attempt-failed': model.state === 'failed',
-        })}
+        className={cs('attempt-item', `attempt-state-${model.state}`)}
         ref="container"
       >
         <Collapsible
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 6366eb2bdb74..29a95a38c66e 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -299,7 +299,11 @@ class Command extends Component<Props> {
     }
 
     return (
-      <li className={cs('command', `command-name-${commandName}`)}>
+      <li className={
+        cs('command', `command-name-${commandName}`, {
+          'command-is-studio': model.isStudio,
+        })
+      }>
         <div
           className={
             cs(
@@ -339,6 +343,12 @@ class Command extends Component<Props> {
                 }
               </span>
               <span className='command-controls'>
+                {model.type === 'parent' && model.isStudio && (
+                  <i
+                    className='far fa-times-circle studio-command-remove'
+                    onClick={this._removeStudioCommand}
+                  />
+                )}
                 {isSessionCommand && (
                   <Tag
                     content={model.renderProps.status}
@@ -471,6 +481,15 @@ class Command extends Component<Props> {
       }, 50)
     }
   }
+
+  _removeStudioCommand = (e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const { model, events } = this.props
+
+    events.emit('studio:remove:command', model.number)
+  }
 }
 
 export { Aliases, AliasesReferences, Message, Progress }
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 8860244692e0..1da5f6e9a8d7 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -21,6 +21,19 @@
     font-family: $monospace;
   }
 
+  .command-is-studio {
+    cursor: auto;
+    
+    &.command-type-parent .commands-controls .studio-command-remove {
+      display: block;
+      padding-left: 5px;
+
+      &:hover {
+        color: #565554;
+      }
+    }
+  }
+
   // System Command Styles
   .command-type-system {
     user-select: none;
diff --git a/packages/reporter/src/components/LaunchStudioIcon.tsx b/packages/reporter/src/components/LaunchStudioIcon.tsx
new file mode 100644
index 000000000000..f6e0e1d1e13d
--- /dev/null
+++ b/packages/reporter/src/components/LaunchStudioIcon.tsx
@@ -0,0 +1,28 @@
+import React, { MouseEvent } from 'react'
+
+// @ts-ignore
+import Tooltip from '@cypress/react-tooltip'
+import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+
+interface LaunchStudioIconProps {
+  title: string
+  onClick: (e: MouseEvent) => void
+}
+
+export const LaunchStudioIcon: React.FC<LaunchStudioIconProps> = ({ title, onClick }) => {
+  return (
+    <Tooltip
+      title={title}
+      placement='right'
+      className='cy-tooltip'
+    >
+      <a
+        onClick={onClick}
+        className='runnable-controls-studio'
+        data-cy='launch-studio'
+      >
+        <WandIcon />
+      </a>
+    </Tooltip>
+  )
+}
diff --git a/packages/reporter/src/hooks/hooks.tsx b/packages/reporter/src/hooks/hooks.tsx
index 715a8491a8f8..f28fe4ec5edf 100644
--- a/packages/reporter/src/hooks/hooks.tsx
+++ b/packages/reporter/src/hooks/hooks.tsx
@@ -19,7 +19,7 @@ export interface HookHeaderProps {
 }
 
 const HookHeader = ({ model, number }: HookHeaderProps) => (
-  <span className='hook-name'>
+  <span className='hook-name' data-cy={`hook-name-${model.hookName}`}>
     {model.hookName} {number && `(${number})`}
     {model.failed && <span className='hook-failed-message'> (failed)</span>}
   </span>
diff --git a/packages/reporter/src/instruments/instrument-model.ts b/packages/reporter/src/instruments/instrument-model.ts
index b21858909c99..4431dd0f6f2c 100644
--- a/packages/reporter/src/instruments/instrument-model.ts
+++ b/packages/reporter/src/instruments/instrument-model.ts
@@ -1,5 +1,5 @@
 import { observable } from 'mobx'
-import { TestState } from '../test/test-model'
+import { Instrument, TestState } from '@packages/types'
 
 export interface AliasObject {
   name: string
@@ -22,7 +22,7 @@ export interface InstrumentProps {
   testCurrentRetry?: number
   state: TestState
   referencesAlias?: Alias
-  instrument?: 'agent' | 'command' | 'route'
+  instrument?: Instrument
   testId: string
 }
 
diff --git a/packages/reporter/src/lib/state-icon.tsx b/packages/reporter/src/lib/state-icon.tsx
index eb21c497039f..915226f10898 100644
--- a/packages/reporter/src/lib/state-icon.tsx
+++ b/packages/reporter/src/lib/state-icon.tsx
@@ -2,8 +2,7 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { TestState } from '../test/test-model'
-
+import { TestState } from '@packages/types'
 import FailedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
 import PendingIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
diff --git a/packages/reporter/src/main.tsx b/packages/reporter/src/main.tsx
index 22756a2d2d07..e47aa43ead0b 100644
--- a/packages/reporter/src/main.tsx
+++ b/packages/reporter/src/main.tsx
@@ -20,7 +20,7 @@ import Runnables from './runnables/runnables'
 import TestingPreferences from './preferences/testing-preferences'
 import type { MobxRunnerStore } from '@packages/app/src/store/mobx-runner-store'
 
-interface BaseReporterProps {
+export interface BaseReporterProps {
   appState: AppState
   className?: string
   runnablesStore: RunnablesStore
@@ -33,7 +33,7 @@ interface BaseReporterProps {
   error?: RunnablesErrorModel
   resetStatsOnSpecChange?: boolean
   renderReporterHeader?: (props: ReporterHeaderProps) => JSX.Element
-  experimentalStudioEnabled: boolean
+  studioEnabled: boolean
   runnerStore: MobxRunnerStore
 }
 
@@ -60,13 +60,12 @@ class Reporter extends Component<SingleReporterProps> {
       scroller,
       error,
       statsStore,
-      experimentalStudioEnabled,
+      studioEnabled,
       renderReporterHeader = (props: ReporterHeaderProps) => <Header {...props}/>,
     } = this.props
 
     return (
       <div className={cs(className, 'reporter', {
-        'experimental-studio-enabled': experimentalStudioEnabled,
         'studio-active': appState.studioActive,
       })}>
         {renderReporterHeader({ appState, statsStore })}
@@ -80,6 +79,8 @@ class Reporter extends Component<SingleReporterProps> {
             scroller={scroller}
             spec={this.props.runnerStore.spec}
             statsStore={this.props.statsStore}
+            studioEnabled={studioEnabled}
+            canSaveStudioLogs={this.props.runnerStore.canSaveStudioLogs}
           />
         )}
       </div>
@@ -151,7 +152,7 @@ if (window.Cypress) {
   window.state = appState
   window.render = (props) => {
     // @ts-ignore
-    render(<Reporter {...props as Required<ReporterProps>} />, document.getElementById('app'))
+    render(<Reporter {...props as Required<BaseReporterProps>} />, document.getElementById('app'))
   }
 }
 
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 9646f6da9aaf..c5321b7f9655 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -2,8 +2,6 @@ import cs from 'classnames'
 import _ from 'lodash'
 import { observer } from 'mobx-react'
 import React, { Component, MouseEvent } from 'react'
-// @ts-ignore
-import Tooltip from '@cypress/react-tooltip'
 
 import { indent } from '../lib/util'
 
@@ -15,14 +13,16 @@ import Collapsible from '../collapsible/collapsible'
 import SuiteModel from './suite-model'
 import TestModel from '../test/test-model'
 
-import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+import { LaunchStudioIcon } from '../components/LaunchStudioIcon'
 
 interface SuiteProps {
   eventManager?: Events
   model: SuiteModel
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
-const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
+const Suite = observer(({ eventManager = events, model, studioEnabled, canSaveStudioLogs }: SuiteProps) => {
   const _launchStudio = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -33,13 +33,12 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
   const _header = () => (
     <>
       <span className='runnable-title'>{model.title}</span>
-      {appState.studioActive && (
+      {(studioEnabled && !appState.studioActive) && (
         <span className='runnable-controls'>
-          <Tooltip placement='right' title='Add New Test' className='cy-tooltip'>
-            <a onClick={_launchStudio} className='runnable-controls-studio'>
-              <WandIcon />
-            </a>
-          </Tooltip>
+          <LaunchStudioIcon
+            title='Add New Test'
+            onClick={_launchStudio}
+          />
         </span>
       )}
     </>
@@ -54,7 +53,13 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
       isOpen
     >
       <ul className='runnables'>
-        {_.map(model.children, (runnable) => <Runnable key={runnable.id} model={runnable} />)}
+        {_.map(model.children, (runnable) =>
+          (<Runnable
+            key={runnable.id}
+            model={runnable}
+            studioEnabled={studioEnabled}
+            canSaveStudioLogs={canSaveStudioLogs}
+          />))}
       </ul>
     </Collapsible>
   )
@@ -63,6 +68,8 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
 export interface RunnableProps {
   model: TestModel | SuiteModel
   appState: AppState
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
 // NOTE: some of the driver tests dig into the React instance for this component
@@ -76,7 +83,7 @@ class Runnable extends Component<RunnableProps> {
   }
 
   render () {
-    const { appState, model } = this.props
+    const { appState, model, studioEnabled, canSaveStudioLogs } = this.props
 
     return (
       <li
@@ -86,7 +93,9 @@ class Runnable extends Component<RunnableProps> {
         })}
         data-model-state={model.state}
       >
-        {model.type === 'test' ? <Test model={model as TestModel} /> : <Suite model={model as SuiteModel} />}
+        {model.type === 'test'
+          ? <Test model={model as TestModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} />
+          : <Suite model={model as SuiteModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} />}
       </li>
     )
   }
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
index a9173aa83bf6..09564917b901 100644
--- a/packages/reporter/src/runnables/runnables.scss
+++ b/packages/reporter/src/runnables/runnables.scss
@@ -64,11 +64,6 @@
       background-color: $gray-900;
     }
 
-    .open-studio,
-    .open-studio-desc {
-      display: none;
-    }
-
     svg {
       margin-right: 5px;
       vertical-align: text-top;
@@ -83,8 +78,8 @@
     }
   }
 
-  &.experimental-studio-enabled .no-tests .open-studio,
-  &.experimental-studio-enabled .no-tests .open-studio-desc {
+  .open-studio,
+  .open-studio-desc {
     display: inline;
   }
 
@@ -184,7 +179,7 @@
 
     &.runnable-studio.runnable-passed > div > .runnable-wrapper,
     &.runnable-studio.runnable-passed > div > .runnable-instruments {
-      border-left: 4px solid $indigo-700;
+      border-left: 4px solid $purple-400;
     }
 
     &.runnable-skipped > .runnable-wrapper {
@@ -248,7 +243,8 @@
 
       &.wand-icon {
         .icon-light {
-          fill: $indigo-700;
+          fill: $purple-300;
+          stroke: $purple-300;
         }
       }
     }
@@ -305,9 +301,8 @@
     }
 
     .runnable-controls-studio {
-      color: $indigo-300;
+      color: $purple-300;
       opacity: 0;
-      display: none;
     }
   }
 
@@ -315,14 +310,6 @@
     visibility: visible;
   }
 
-  &.experimental-studio-enabled .runnable-controls .runnable-controls-studio {
-    display: inline;
-  }
-
-  &.studio-active .runnable-controls .runnable-controls-studio {
-    display: none;
-  }
-
   .test .collapsible {
     display: flex;
     flex-direction: column;
@@ -393,11 +380,12 @@
     }
 
     .studio-cancel {
-      background-color: $gray-900;
-      color: $gray-400;
+      color: rgba($white, 0.75);
+      cursor: pointer;
+      margin: 7px 0 0 5px;
 
       &:hover {
-        background-color: $gray-800;
+        text-decoration: underline;
       }
     }
 
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index 8a3e0825edc5..47064a7084ca 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -10,7 +10,7 @@ import RunnableHeader from './runnable-header'
 import { RunnablesStore, RunnableArray } from './runnables-store'
 import statsStore, { StatsStore } from '../header/stats-store'
 import { Scroller } from '../lib/scroller'
-import appState, { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 import OpenFileInIDE from '../lib/open-file-in-ide'
 
 import OpenIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-code-editor_x16.svg'
@@ -29,9 +29,10 @@ const Loading = () => (
 interface RunnablesEmptyStateProps {
   spec: Cypress.Cypress['spec']
   eventManager?: Events
+  studioEnabled: boolean
 }
 
-const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStateProps) => {
+const RunnablesEmptyState = ({ spec, studioEnabled, eventManager = events }: RunnablesEmptyStateProps) => {
   const _launchStudio = (e: MouseEvent) => {
     e.preventDefault()
 
@@ -63,10 +64,17 @@ const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStat
             </a>
           </OpenFileInIDE>
           <p className='text-muted'>Write a test using your preferred text editor.</p>
-          {appState.studioActive && (
+          {studioEnabled && (
             <>
-              <a className='open-studio' onClick={_launchStudio}><h3><StudioIcon /> Create test with Cypress Studio</h3></a>
-              <p className='open-studio-desc text-muted'>Use an interactive tool to author a test right here.</p>
+              <a
+                data-cy="studio-create-test"
+                className='open-studio'
+                onClick={_launchStudio}>
+                <h3>
+                  <StudioIcon /> Create test with Cypress Studio
+                </h3>
+              </a>
+              <p className='text-muted open-studio-desc'>Use an interactive tool to author a test right here.</p>
             </>
           )}
         </>
@@ -79,12 +87,20 @@ const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStat
 
 interface RunnablesListProps {
   runnables: RunnableArray
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
-const RunnablesList = observer(({ runnables }: RunnablesListProps) => (
+const RunnablesList = observer(({ runnables, studioEnabled, canSaveStudioLogs }: RunnablesListProps) => (
   <div className='wrap'>
     <ul className='runnables'>
-      {_.map(runnables, (runnable) => <Runnable key={runnable.id} model={runnable} />)}
+      {_.map(runnables, (runnable) =>
+        (<Runnable
+          key={runnable.id}
+          model={runnable}
+          canSaveStudioLogs={canSaveStudioLogs}
+          studioEnabled={studioEnabled}
+        />))}
     </ul>
   </div>
 ))
@@ -93,9 +109,11 @@ export interface RunnablesContentProps {
   runnablesStore: RunnablesStore
   spec: Cypress.Cypress['spec']
   error?: RunnablesErrorModel
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
-const RunnablesContent = observer(({ runnablesStore, spec, error }: RunnablesContentProps) => {
+const RunnablesContent = observer(({ runnablesStore, spec, error, studioEnabled, canSaveStudioLogs }: RunnablesContentProps) => {
   const { isReady, runnables, runnablesHistory } = runnablesStore
 
   if (!isReady) {
@@ -105,7 +123,7 @@ const RunnablesContent = observer(({ runnablesStore, spec, error }: RunnablesCon
   // show error if there are no tests, but only if there
   // there isn't an error passed down that supercedes it
   if (!error && !runnablesStore.runnables.length) {
-    return <RunnablesEmptyState spec={spec} />
+    return <RunnablesEmptyState spec={spec} studioEnabled={studioEnabled} />
   }
 
   if (error) {
@@ -116,7 +134,13 @@ const RunnablesContent = observer(({ runnablesStore, spec, error }: RunnablesCon
 
   const isRunning = specPath === runnablesStore.runningSpec
 
-  return <RunnablesList runnables={isRunning ? runnables : runnablesHistory[specPath]} />
+  return (
+    <RunnablesList
+      runnables={isRunning ? runnables : runnablesHistory[specPath]}
+      studioEnabled={studioEnabled}
+      canSaveStudioLogs={canSaveStudioLogs}
+    />
+  )
 })
 
 export interface RunnablesProps {
@@ -126,18 +150,22 @@ export interface RunnablesProps {
   spec: Cypress.Cypress['spec']
   scroller: Scroller
   appState?: AppState
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
 @observer
 class Runnables extends Component<RunnablesProps> {
   render () {
-    const { error, runnablesStore, spec } = this.props
+    const { error, runnablesStore, spec, studioEnabled, canSaveStudioLogs } = this.props
 
     return (
       <div ref='container' className='container'>
         <RunnableHeader spec={spec} statsStore={statsStore} />
         <RunnablesContent
           runnablesStore={runnablesStore}
+          studioEnabled={studioEnabled}
+          canSaveStudioLogs={canSaveStudioLogs}
           spec={spec}
           error={error}
         />
diff --git a/packages/reporter/src/runnables/suite-model.ts b/packages/reporter/src/runnables/suite-model.ts
index f227115071b7..19d81c4a91b7 100644
--- a/packages/reporter/src/runnables/suite-model.ts
+++ b/packages/reporter/src/runnables/suite-model.ts
@@ -1,7 +1,8 @@
 import _ from 'lodash'
 import { computed, observable } from 'mobx'
 import Runnable, { RunnableProps } from './runnable-model'
-import TestModel, { TestProps, TestState } from '../test/test-model'
+import TestModel, { TestProps } from '../test/test-model'
+import { TestState } from '@packages/types'
 
 export interface SuiteProps extends RunnableProps {
   suites: Array<SuiteProps>
diff --git a/packages/reporter/src/test/test-model.ts b/packages/reporter/src/test/test-model.ts
index fecc4302c4b6..4a52c2928910 100644
--- a/packages/reporter/src/test/test-model.ts
+++ b/packages/reporter/src/test/test-model.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import { action, computed, observable } from 'mobx'
-import { FileDetails } from '@packages/types'
 
+import { FileDetails, TestState } from '@packages/types'
 import Attempt from '../attempts/attempt-model'
 import Err, { ErrProps } from '../errors/err-model'
 import { HookProps } from '../hooks/hook-model'
@@ -12,8 +12,6 @@ import { RouteProps } from '../routes/route-model'
 import { RunnablesStore, LogProps } from '../runnables/runnables-store'
 import { SessionProps } from '../sessions/sessions-model'
 
-export type TestState = 'active' | 'failed' | 'pending' | 'passed' | 'processing'
-
 export type UpdateTestCallback = () => void
 
 export interface TestProps extends RunnableProps {
@@ -120,12 +118,6 @@ export default class Test extends Runnable {
     return this.attempts.length - 1
   }
 
-  @computed get studioIsNotEmpty () {
-    return this._withAttempt(this.currentRetry, (attempt: Attempt) => {
-      return attempt.studioIsNotEmpty
-    })
-  }
-
   isLastAttempt (attemptModel: Attempt) {
     return this.lastAttempt === attemptModel
   }
diff --git a/packages/reporter/src/test/test.cy.tsx b/packages/reporter/src/test/test.cy.tsx
index 9d33be83dc63..ea44776d7b1b 100644
--- a/packages/reporter/src/test/test.cy.tsx
+++ b/packages/reporter/src/test/test.cy.tsx
@@ -16,12 +16,47 @@ describe('test/test.tsx', () => {
     }
 
     cy.mount(<div className="runnable suite">
-      <Test model={model} appState={appState} />
+      <Test
+        model={model}
+        appState={appState}
+        studioEnabled={false}
+      />
     </div>)
 
     cy.percySnapshot()
 
     cy.contains('foobar').click().realHover()
+    cy.get('[data-cy="launch-studio"]').should('not.exist')
+    cy.percySnapshot()
+  })
+
+  it('should mount with studio enabled', () => {
+    const model = {
+      isOpen: false,
+      level: 0,
+      state: 'passed',
+      title: 'foobar',
+      attempts: [],
+    }
+
+    const appState = {
+      studioActive: false,
+    }
+
+    cy.mount(<div className="runnable suite">
+      <Test
+        model={model}
+        appState={appState}
+        studioEnabled
+      />
+    </div>)
+
+    cy.percySnapshot()
+
+    cy.contains('foobar').click().realHover()
+
+    cy.get('[data-cy="launch-studio"]').should('exist')
+
     cy.percySnapshot()
   })
 })
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
index 5db23ad94cc8..43db60213660 100644
--- a/packages/reporter/src/test/test.tsx
+++ b/packages/reporter/src/test/test.tsx
@@ -14,15 +14,16 @@ import TestModel from './test-model'
 import scroller, { Scroller } from '../lib/scroller'
 import Attempts from '../attempts/attempts'
 import StateIcon from '../lib/state-icon'
+import { LaunchStudioIcon } from '../components/LaunchStudioIcon'
 
 import CheckIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/checkmark_x16.svg'
 import ClipboardIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/general-clipboard_x16.svg'
-import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
 import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x16.svg'
 
 interface StudioControlsProps {
   events: Events
   model: TestModel
+  canSaveStudioLogs: boolean
 }
 
 interface StudioControlsState {
@@ -66,24 +67,24 @@ class StudioControls extends Component<StudioControlsProps, StudioControlsState>
   }
 
   render () {
-    const { studioIsNotEmpty } = this.props.model
+    const { canSaveStudioLogs } = this.props
     const { copySuccess } = this.state
 
     return (
       <div className='studio-controls'>
-        <button className='studio-cancel' onClick={this._cancel}>Cancel</button>
+        <a className='studio-cancel' onClick={this._cancel}>Cancel</a>
         <Tooltip
           title={copySuccess ? 'Commands Copied!' : 'Copy Commands to Clipboard'}
           className='cy-tooltip'
           wrapperClassName='studio-copy-wrapper'
-          visible={!studioIsNotEmpty ? false : null}
+          visible={!canSaveStudioLogs ? false : null}
           updateCue={copySuccess}
         >
           <button
             className={cs('studio-copy', {
               'studio-copy-success': copySuccess,
             })}
-            disabled={!studioIsNotEmpty}
+            disabled={!canSaveStudioLogs}
             onClick={this._copy}
             onMouseLeave={this._endCopySuccess}
           >
@@ -94,7 +95,7 @@ class StudioControls extends Component<StudioControlsProps, StudioControlsState>
             )}
           </button>
         </Tooltip>
-        <button className='studio-save' disabled={!studioIsNotEmpty} onClick={this._save}>Save Commands</button>
+        <button className='studio-save' disabled={!canSaveStudioLogs} onClick={this._save}>Save Commands</button>
       </div>
     )
   }
@@ -106,6 +107,8 @@ interface TestProps {
   runnablesStore: RunnablesStore
   scroller: Scroller
   model: TestModel
+  studioEnabled: boolean
+  canSaveStudioLogs: boolean
 }
 
 @observer
@@ -182,7 +185,7 @@ class Test extends Component<TestProps> {
   _controls () {
     let controls: Array<JSX.Element> = []
 
-    if (this.props.model.state) {
+    if (this.props.model.state === 'failed') {
       controls.push(
         <Tooltip key={`test-failed-${this.props.model}`} placement='top' title='One or more commands failed' className='cy-tooltip'>
           <span>
@@ -192,13 +195,13 @@ class Test extends Component<TestProps> {
       )
     }
 
-    if (appState.studioActive) {
+    if (this.props.studioEnabled && !appState.studioActive) {
       controls.push(
-        <Tooltip key={`studio-command-${this.props.model}`} placement='right' title='Add Commands to Test' className='cy-tooltip'>
-          <a onClick={this._launchStudio} className='runnable-controls-studio'>
-            <WandIcon />
-          </a>
-        </Tooltip>,
+        <LaunchStudioIcon
+          key={`studio-command-${this.props.model}`}
+          title='Add Commands to Test'
+          onClick={this._launchStudio}
+        />,
       )
     }
 
@@ -219,7 +222,7 @@ class Test extends Component<TestProps> {
     return (
       <div style={{ paddingLeft: indent(model.level) }}>
         <Attempts studioActive={appState.studioActive} test={model} scrollIntoView={() => this._scrollIntoView()} />
-        {appState.studioActive && <StudioControls model={model} />}
+        {appState.studioActive && <StudioControls model={model} canSaveStudioLogs={this.props.canSaveStudioLogs}/>}
       </div>
     )
   }
diff --git a/packages/runner/src/studio/studio-recorder.js b/packages/runner/src/studio/studio-recorder.js
deleted file mode 100644
index 7da29359f017..000000000000
--- a/packages/runner/src/studio/studio-recorder.js
+++ /dev/null
@@ -1,840 +0,0 @@
-import { action, computed, observable } from 'mobx'
-import $ from 'jquery'
-import $driverUtils from '@packages/driver/src/cypress/utils'
-import { dom } from '../dom'
-
-const saveErrorMessage = (message) => {
-  return `\
-${message}\n\n\
-Cypress was unable to save these commands to your spec file. \
-You can use the copy button below to copy the commands to your clipboard. \
-\n
-Cypress Studio is still in beta and the team is working hard to \
-resolve issues like this. To help us fix this issue more quickly, \
-you can provide us with more information by clicking 'Learn more' below.`
-}
-
-const eventTypes = [
-  'click',
-  // 'dblclick',
-  'change',
-  'keydown',
-  'keyup',
-]
-
-const eventsWithValue = [
-  'change',
-  'keydown',
-  'keyup',
-]
-
-const internalMouseEvents = [
-  'mousedown',
-  'mouseover',
-  'mouseout',
-]
-
-const tagNamesWithoutText = [
-  'SELECT',
-  'INPUT',
-  'TEXTAREA',
-]
-
-const tagNamesWithValue = [
-  'BUTTON',
-  'INPUT',
-  'METER',
-  'LI',
-  'OPTION',
-  'PROGESS',
-  'PARAM',
-  'TEXTAREA',
-]
-
-export class StudioRecorder {
-  @observable testId = null
-  @observable suiteId = null
-  @observable initModalIsOpen = false
-  @observable saveModalIsOpen = false
-  @observable logs = []
-  @observable isLoading = false
-  @observable isActive = false
-  @observable url = null
-  @observable isFailed = false
-  @observable _hasStarted = false
-
-  fileDetails = null
-  absoluteFile = null
-  runnableTitle = null
-  _currentId = 1
-  _previousMouseEvent = null
-
-  constructor (eventManager) {
-    this.eventManager = eventManager
-  }
-
-  @computed get hasRunnableId () {
-    return !!this.testId || !!this.suiteId
-  }
-
-  @computed get isOpen () {
-    return this.isActive || this.isLoading || this._hasStarted
-  }
-
-  @computed get isEmpty () {
-    return this.logs.length === 0
-  }
-
-  @computed get isReady () {
-    return this.isOpen && this.isEmpty && !this.isLoading && !this.isFailed
-  }
-
-  @computed get hookId () {
-    return `${this.testId}-studio`
-  }
-
-  @computed get needsUrl () {
-    return this.isActive && !this.url && !this.isFailed
-  }
-
-  @computed get testError () {
-    return {
-      id: this.testId,
-      state: 'failed',
-    }
-  }
-
-  @computed get state () {
-    return {
-      testId: this.testId,
-      suiteId: this.suiteId,
-      url: this.url,
-    }
-  }
-
-  get Cypress () {
-    return this.eventManager.getCypress()
-  }
-
-  saveError (err) {
-    return {
-      id: this.testId,
-      err: {
-        ...err,
-        message: saveErrorMessage(err.message),
-        docsUrl: 'https://on.cypress.io/studio-beta',
-      },
-    }
-  }
-
-  @action setTestId = (testId) => {
-    this.testId = testId
-  }
-
-  @action setSuiteId = (suiteId) => {
-    this.suiteId = suiteId
-    this.testId = null
-  }
-
-  @action clearRunnableIds = () => {
-    this.testId = null
-    this.suiteId = null
-  }
-
-  @action showInitModal = () => {
-    this.initModalIsOpen = true
-  }
-
-  @action closeInitModal = () => {
-    this.initModalIsOpen = false
-  }
-
-  @action showSaveModal = () => {
-    this.saveModalIsOpen = true
-  }
-
-  @action closeSaveModal = () => {
-    this.saveModalIsOpen = false
-  }
-
-  @action startLoading = () => {
-    this.isLoading = true
-  }
-
-  @action setInactive = () => {
-    this.isActive = false
-  }
-
-  @action setUrl = (url) => {
-    this.url = url
-  }
-
-  @action testFailed = () => {
-    this.isFailed = true
-  }
-
-  setFileDetails = (fileDetails) => {
-    this.fileDetails = fileDetails
-  }
-
-  setAbsoluteFile = (absoluteFile) => {
-    this.absoluteFile = absoluteFile
-  }
-
-  setRunnableTitle = (runnableTitle) => {
-    this.runnableTitle = runnableTitle
-  }
-
-  _clearPreviousMouseEvent = () => {
-    this._previousMouseEvent = null
-  }
-
-  _matchPreviousMouseEvent = (el) => {
-    return this._previousMouseEvent && $(el).is(this._previousMouseEvent.element)
-  }
-
-  @action initialize = (config, state) => {
-    const { studio } = state
-
-    if (studio) {
-      if (studio.testId) {
-        this.setTestId(studio.testId)
-      }
-
-      if (studio.suiteId) {
-        this.setSuiteId(studio.suiteId)
-      }
-
-      if (studio.url) {
-        this.setUrl(studio.url)
-      }
-    }
-
-    if (this.hasRunnableId) {
-      this.setAbsoluteFile(config.spec.absolute)
-      this.startLoading()
-
-      if (this.suiteId) {
-        this.Cypress.runner.setOnlySuiteId(this.suiteId)
-      } else if (this.testId) {
-        this.Cypress.runner.setOnlyTestId(this.testId)
-      }
-    }
-  }
-
-  @action interceptTest = (test) => {
-    if (this.suiteId) {
-      this.setTestId(test.id)
-    }
-
-    if (this.hasRunnableId) {
-      if (test.invocationDetails) {
-        this.setFileDetails(test.invocationDetails)
-      }
-
-      if (this.suiteId) {
-        if (test.parent && test.parent.id !== 'r1') {
-          this.setRunnableTitle(test.parent.title)
-        }
-      } else {
-        this.setRunnableTitle(test.title)
-      }
-    }
-  }
-
-  @action start = (body) => {
-    this.isActive = true
-    this.isLoading = false
-    this.logs = []
-    this._currentId = 1
-    this._hasStarted = true
-
-    if (this.url) {
-      this.visitUrl()
-    }
-
-    this.attachListeners(body)
-  }
-
-  @action stop = () => {
-    this.removeListeners()
-
-    this.isActive = false
-    this.isLoading = false
-  }
-
-  @action reset = () => {
-    this.stop()
-
-    this.logs = []
-    this.url = null
-    this._hasStarted = false
-    this._currentId = 1
-    this.isFailed = false
-  }
-
-  @action cancel = () => {
-    this.reset()
-    this.clearRunnableIds()
-  }
-
-  @action startSave = () => {
-    if (this.suiteId) {
-      this.showSaveModal()
-    } else {
-      this.save()
-    }
-  }
-
-  @action save = (testName = null) => {
-    this.closeSaveModal()
-    this.stop()
-
-    this.eventManager.emit('studio:save', {
-      fileDetails: this.fileDetails,
-      absoluteFile: this.absoluteFile,
-      runnableTitle: this.runnableTitle,
-      commands: this.logs,
-      isSuite: !!this.suiteId,
-      isRoot: this.suiteId === 'r1',
-      testName,
-    })
-  }
-
-  @action visitUrl = (url = this.url) => {
-    this.setUrl(url)
-
-    this.Cypress.cy.visit(this.url)
-
-    this.logs.push({
-      id: this._getId(),
-      selector: null,
-      name: 'visit',
-      message: this.url,
-    })
-  }
-
-  attachListeners = (body) => {
-    if (this.isFailed) return
-
-    this._body = body
-
-    eventTypes.forEach((event) => {
-      this._body.addEventListener(event, this._recordEvent, {
-        capture: true,
-        passive: true,
-      })
-    })
-
-    internalMouseEvents.forEach((event) => {
-      this._body.addEventListener(event, this._recordMouseEvent, {
-        capture: true,
-        passive: true,
-      })
-    })
-
-    this._body.addEventListener('contextmenu', this._openAssertionsMenu, {
-      capture: true,
-    })
-
-    this._clearPreviousMouseEvent()
-  }
-
-  removeListeners = () => {
-    if (!this._body) return
-
-    eventTypes.forEach((event) => {
-      this._body.removeEventListener(event, this._recordEvent, {
-        capture: true,
-      })
-    })
-
-    internalMouseEvents.forEach((event) => {
-      this._body.removeEventListener(event, this._recordMouseEvent, {
-        capture: true,
-      })
-    })
-
-    this._body.removeEventListener('contextmenu', this._openAssertionsMenu, {
-      capture: true,
-    })
-
-    this._clearPreviousMouseEvent()
-  }
-
-  copyToClipboard = (commandsText) => {
-    // clipboard API is not supported without secure context
-    if (window.isSecureContext && navigator.clipboard) {
-      return navigator.clipboard.writeText(commandsText)
-    }
-
-    // fallback to creating invisible textarea
-    // create the textarea in our document rather than this._body
-    // as to not interfere with the app in the aut
-    const textArea = document.createElement('textarea')
-
-    textArea.value = commandsText
-    textArea.style.position = 'fixed'
-    textArea.style.opacity = 0
-
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    textArea.remove()
-
-    return Promise.resolve()
-  }
-
-  _trustEvent = (event) => {
-    // only capture events sent by the actual user
-    // but disable the check if we're in a test
-    return event.isTrusted || this.Cypress.env('INTERNAL_E2E_TESTS') === 1
-  }
-
-  _recordMouseEvent = (event) => {
-    if (!this._trustEvent(event)) return
-
-    const { type, target } = event
-
-    if (type === 'mouseout') {
-      return this._clearPreviousMouseEvent()
-    }
-
-    // we only replace the previous mouse event if the element is different
-    // since we want to use the oldest possible selector
-    if (!this._matchPreviousMouseEvent(target)) {
-      this._previousMouseEvent = {
-        element: target,
-        selector: this.Cypress.SelectorPlayground.getSelector($(target)),
-      }
-    }
-  }
-
-  _getId = () => {
-    return this._currentId++
-  }
-
-  _getName = (event, $el) => {
-    const tagName = $el.prop('tagName')
-    const { type } = event
-
-    if (tagName === 'SELECT' && type === 'change') {
-      return 'select'
-    }
-
-    if (type === 'keydown' || type === 'keyup') {
-      return 'type'
-    }
-
-    if (type === 'click' && tagName === 'INPUT') {
-      const inputType = $el.prop('type')
-      const checked = $el.prop('checked')
-
-      if (inputType === 'radio' || (inputType === 'checkbox' && checked)) {
-        return 'check'
-      }
-
-      if (inputType === 'checkbox') {
-        return 'uncheck'
-      }
-    }
-
-    return type
-  }
-
-  _getMessage = (event, $el) => {
-    if (!eventsWithValue.includes(event.type)) {
-      return null
-    }
-
-    let val = $el.val()
-
-    if (event.type === 'keydown' || event.type === 'keyup') {
-      val = val.replace(/{/g, '{{}')
-
-      if (event.key === 'Enter') {
-        val = `${val}{enter}`
-      }
-    }
-
-    return val
-  }
-
-  _shouldRecordEvent = (event, $el) => {
-    const tagName = $el.prop('tagName')
-
-    // only want to record keystrokes within input elements
-    if ((event.type === 'keydown' || event.type === 'keyup') && tagName !== 'INPUT') {
-      return false
-    }
-
-    // we record all normal keys on keyup (rather than keydown) since the input value will be updated
-    // we do not record enter on keyup since a form submission will have already been triggered
-    if (event.type === 'keyup' && event.key === 'Enter') {
-      return false
-    }
-
-    // we record enter on keydown since this happens before a form submission is triggered
-    // all other keys are recorded on keyup
-    if (event.type === 'keydown' && event.key !== 'Enter') {
-      return false
-    }
-
-    // cy cannot click on a select
-    if (tagName === 'SELECT' && event.type === 'click') {
-      return false
-    }
-
-    // do not record clicks on option elements since this is handled with cy.select()
-    if (tagName === 'OPTION') {
-      return false
-    }
-
-    return true
-  }
-
-  @action _recordEvent = (event) => {
-    if (this.isFailed || !this._trustEvent(event)) return
-
-    const $el = $(event.target)
-
-    if (this._isAssertionsMenu($el)) {
-      return
-    }
-
-    this._closeAssertionsMenu()
-
-    if (!this._shouldRecordEvent(event, $el)) {
-      return
-    }
-
-    const name = this._getName(event, $el)
-    const message = this._getMessage(event, $el)
-
-    if (name === 'change') {
-      return
-    }
-
-    let selector = ''
-
-    if (name === 'click' && this._matchPreviousMouseEvent($el)) {
-      selector = this._previousMouseEvent.selector
-    } else {
-      selector = this.Cypress.SelectorPlayground.getSelector($el)
-    }
-
-    this._clearPreviousMouseEvent()
-
-    if (name === 'type' && !message) {
-      return this._removeLastLogIfType(selector)
-    }
-
-    const updateOnly = this._updateLastLog(selector, name, message)
-
-    if (updateOnly) {
-      return
-    }
-
-    if (name === 'type') {
-      this._addClearLog(selector)
-    }
-
-    this._addLog({
-      selector,
-      name,
-      message,
-    })
-  }
-
-  @action _removeLastLogIfType = (selector) => {
-    const lastLog = this.logs[this.logs.length - 1]
-
-    if (lastLog.selector === selector && lastLog.name === 'type') {
-      return this.removeLog(lastLog.id)
-    }
-  }
-
-  @action removeLog = (commandId) => {
-    const index = this.logs.findIndex((command) => command.id === commandId)
-    const log = this.logs[index]
-
-    this.logs.splice(index, 1)
-
-    this._generateBothLogs(log).forEach((commandLog) => {
-      this.eventManager.emit('reporter:log:remove', commandLog)
-    })
-  }
-
-  _generateLog = ({ id, name, message, type, number }) => {
-    return {
-      id,
-      testId: this.testId,
-      hookId: this.hookId,
-      name,
-      message: message ? $driverUtils.stringifyActual(message) : null,
-      type,
-      state: 'passed',
-      instrument: 'command',
-      number,
-      numElements: 1,
-      isStudio: true,
-    }
-  }
-
-  _generateBothLogs = (log) => {
-    return [
-      this._generateLog({
-        id: `s${log.id}-get`,
-        name: 'get',
-        message: log.selector,
-        type: 'parent',
-        number: log.id,
-      }),
-      this._generateLog({
-        id: `s${log.id}`,
-        name: log.name,
-        message: log.message,
-        type: 'child',
-      }),
-    ]
-  }
-
-  @action _addLog = (log) => {
-    log.id = this._getId()
-
-    this.logs.push(log)
-
-    this._generateBothLogs(log).forEach((commandLog) => {
-      this.eventManager.emit('reporter:log:add', commandLog)
-    })
-  }
-
-  _addClearLog = (selector) => {
-    const lastLog = this.logs[this.logs.length - 1]
-
-    if (lastLog && lastLog.name === 'clear' && lastLog.selector === selector) {
-      return
-    }
-
-    this._addLog({
-      selector,
-      name: 'clear',
-      message: null,
-    })
-  }
-
-  _updateLog = (log) => {
-    const { id, name, message } = log
-
-    this.eventManager.emit('reporter:log:state:changed', this._generateLog({
-      id: `s${id}`,
-      name,
-      message,
-      type: 'child',
-    }))
-  }
-
-  _updateLastLog = (selector, name, message) => {
-    const { length } = this.logs
-
-    if (!length) {
-      return false
-    }
-
-    const lastLog = this.logs[length - 1]
-
-    const updateLog = (newName = name, newMessage = message) => {
-      lastLog.message = newMessage
-      lastLog.name = newName
-
-      this._updateLog(lastLog)
-    }
-
-    if (selector === lastLog.selector) {
-      if (name === 'type' && lastLog.name === 'type') {
-        updateLog()
-
-        return true
-      }
-
-      // Cypress automatically issues a .click before every type
-      // so we can turn the extra click event into the .clear that comes before every type
-      if (name === 'type' && lastLog.name === 'click') {
-        updateLog('clear', null)
-
-        // we return false since we still need to add the type log
-        return false
-      }
-    }
-
-    return false
-  }
-
-  @action _addAssertion = ($el, ...args) => {
-    const id = this._getId()
-    const selector = this.Cypress.SelectorPlayground.getSelector($el)
-
-    const log = {
-      id,
-      selector,
-      name: 'should',
-      message: args,
-      isAssertion: true,
-    }
-
-    this.logs.push(log)
-
-    const reporterLog = {
-      id,
-      selector,
-      name: 'assert',
-      message: this._generateAssertionMessage($el, args),
-    }
-
-    this._generateBothLogs(reporterLog).forEach((commandLog) => {
-      this.eventManager.emit('reporter:log:add', commandLog)
-    })
-
-    this._closeAssertionsMenu()
-  }
-
-  _generateAssertionMessage = ($el, args) => {
-    const elementString = $driverUtils.stringifyActual($el)
-    const assertionString = args[0].replace(/\./g, ' ')
-
-    let message = `expect **${elementString}** to ${assertionString}`
-
-    if (args[1]) {
-      message = `${message} **${args[1]}**`
-    }
-
-    if (args[2]) {
-      message = `${message} with the value **${args[2]}**`
-    }
-
-    return message
-  }
-
-  _isAssertionsMenu = ($el) => {
-    return $el.hasClass('__cypress-studio-assertions-menu')
-  }
-
-  _openAssertionsMenu = (event) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const $el = $(event.target)
-
-    if (this._isAssertionsMenu($el)) {
-      return
-    }
-
-    this._closeAssertionsMenu()
-
-    dom.openStudioAssertionsMenu({
-      $el,
-      $body: $(this._body),
-      props: {
-        possibleAssertions: this._generatePossibleAssertions($el),
-        addAssertion: this._addAssertion,
-        closeMenu: this._closeAssertionsMenu,
-      },
-    })
-  }
-
-  _closeAssertionsMenu = () => {
-    dom.closeStudioAssertionsMenu($(this._body))
-  }
-
-  _generatePossibleAssertions = ($el) => {
-    const tagName = $el.prop('tagName')
-
-    const possibleAssertions = []
-
-    if (!tagNamesWithoutText.includes(tagName)) {
-      const text = $el.text()
-
-      if (text) {
-        possibleAssertions.push({
-          type: 'have.text',
-          options: [{
-            value: text,
-          }],
-        })
-      }
-    }
-
-    if (tagNamesWithValue.includes(tagName)) {
-      const val = $el.val()
-
-      if (val !== undefined && val !== '') {
-        possibleAssertions.push({
-          type: 'have.value',
-          options: [{
-            value: val,
-          }],
-        })
-      }
-    }
-
-    const attributes = $.map($el[0].attributes, ({ name, value }) => {
-      if (name === 'value' || name === 'disabled') return
-
-      if (name === 'class') {
-        possibleAssertions.push({
-          type: 'have.class',
-          options: value.split(' ').map((value) => ({ value })),
-        })
-
-        return
-      }
-
-      if (name === 'id') {
-        possibleAssertions.push({
-          type: 'have.id',
-          options: [{
-            value,
-          }],
-        })
-
-        return
-      }
-
-      if (value !== undefined && value !== '') {
-        return {
-          name,
-          value,
-        }
-      }
-    })
-
-    if (attributes.length > 0) {
-      possibleAssertions.push({
-        type: 'have.attr',
-        options: attributes,
-      })
-    }
-
-    possibleAssertions.push({
-      type: 'be.visible',
-    })
-
-    const isDisabled = $el.prop('disabled')
-
-    if (isDisabled !== undefined) {
-      possibleAssertions.push({
-        type: isDisabled ? 'be.disabled' : 'be.enabled',
-      })
-    }
-
-    const isChecked = $el.prop('checked')
-
-    if (isChecked !== undefined) {
-      possibleAssertions.push({
-        type: isChecked ? 'be.checked' : 'not.be.checked',
-      })
-    }
-
-    return possibleAssertions
-  }
-}
diff --git a/packages/runner/src/studio/studio-recorder.spec.js b/packages/runner/src/studio/studio-recorder.spec.js
deleted file mode 100644
index f451e105b3ee..000000000000
--- a/packages/runner/src/studio/studio-recorder.spec.js
+++ /dev/null
@@ -1,1421 +0,0 @@
-import sinon from 'sinon'
-import $ from 'jquery'
-import driver from '@packages/driver'
-import { dom } from '../dom'
-import { createEventManager } from '../../test/utils'
-
-import { StudioRecorder } from './studio-recorder'
-
-const createEvent = (props) => {
-  return {
-    isTrusted: true,
-    type: 'click',
-    preventDefault: sinon.stub(),
-    stopPropagation: sinon.stub(),
-    ...props,
-  }
-}
-
-describe('StudioRecorder', () => {
-  let eventManager
-  const cyVisitStub = sinon.stub()
-  const getSelectorStub = sinon.stub().returns('.selector')
-  const setOnlyTestIdStub = sinon.stub()
-  const setOnlySuiteIdStub = sinon.stub()
-
-  let instance
-
-  beforeEach(() => {
-    eventManager = createEventManager()
-    instance = new StudioRecorder(eventManager)
-
-    sinon.stub(instance, 'attachListeners')
-    sinon.stub(instance, 'removeListeners')
-
-    sinon.stub(dom, 'closeStudioAssertionsMenu')
-    sinon.stub(dom, 'openStudioAssertionsMenu')
-
-    driver.$ = $
-
-    sinon.stub(eventManager, 'emit')
-    sinon.stub(eventManager, 'getCypress').returns({
-      cy: {
-        visit: cyVisitStub,
-      },
-      SelectorPlayground: {
-        getSelector: getSelectorStub,
-      },
-      runner: {
-        setOnlyTestId: setOnlyTestIdStub,
-        setOnlySuiteId: setOnlySuiteIdStub,
-      },
-      env: () => null,
-    })
-  })
-
-  afterEach(() => {
-    sinon.restore()
-  })
-
-  context('#startLoading', () => {
-    it('sets isLoading, isOpen to true', () => {
-      instance.startLoading()
-
-      expect(instance.isLoading).to.be.true
-      expect(instance.isOpen).to.be.true
-    })
-  })
-
-  context('#setTestId', () => {
-    it('sets testId to id and hasRunnableId to true', () => {
-      instance.setTestId('r2')
-
-      expect(instance.testId).to.equal('r2')
-      expect(instance.hasRunnableId).to.be.true
-      expect(instance.state.testId).to.equal('r2')
-    })
-
-    it('does not clear suite id', () => {
-      instance.suiteId = 'r1'
-      instance.setTestId('r2')
-
-      expect(instance.suiteId).to.equal('r1')
-    })
-  })
-
-  context('#setSuiteId', () => {
-    it('sets suiteId to id and hasRunnableId to true', () => {
-      instance.setSuiteId('r1')
-
-      expect(instance.suiteId).to.equal('r1')
-      expect(instance.hasRunnableId).to.be.true
-      expect(instance.state.suiteId).to.equal('r1')
-    })
-
-    it('clears test id', () => {
-      instance.testId = 'r2'
-      instance.setSuiteId('r1')
-
-      expect(instance.testId).to.be.null
-    })
-  })
-
-  context('#initialize', () => {
-    const config = {
-      spec: {
-        absolute: '/path/to/spec.js',
-      },
-    }
-
-    it('restores state, grabs config info, and initializes driver when extending test', () => {
-      const state = {
-        studio: {
-          testId: 'r2',
-          suiteId: null,
-          url: null,
-        },
-      }
-
-      instance.initialize(config, state)
-
-      expect(instance.testId).to.equal('r2')
-      expect(instance.absoluteFile).to.equal('/path/to/spec.js')
-      expect(instance.isLoading).to.be.true
-      expect(setOnlyTestIdStub).to.be.calledWith('r2')
-    })
-
-    it('restores state, grabs config info, and initializes driver when adding to suite', () => {
-      const state = {
-        studio: {
-          testId: null,
-          suiteId: 'r1',
-          url: 'https://example.com',
-        },
-      }
-
-      instance.initialize(config, state)
-
-      expect(instance.suiteId).to.equal('r1')
-      expect(instance.url).to.equal('https://example.com')
-      expect(instance.absoluteFile).to.equal('/path/to/spec.js')
-      expect(instance.isLoading).to.be.true
-      expect(setOnlySuiteIdStub).to.be.calledWith('r1')
-    })
-
-    it('grabs config info and initializes driver when state already exists while extending test', () => {
-      instance.setTestId('r2')
-
-      instance.initialize(config, {})
-
-      expect(instance.absoluteFile).to.equal('/path/to/spec.js')
-      expect(instance.isLoading).to.be.true
-      expect(setOnlyTestIdStub).to.be.calledWith('r2')
-    })
-
-    it('grabs config info and initializes driver when state already exists while adding to suite', () => {
-      instance.setSuiteId('r1')
-
-      instance.initialize(config, {})
-
-      expect(instance.absoluteFile).to.equal('/path/to/spec.js')
-      expect(instance.isLoading).to.be.true
-      expect(setOnlySuiteIdStub).to.be.calledWith('r1')
-    })
-  })
-
-  context('#interceptTest', () => {
-    it('grabs test data when extending test', () => {
-      const invocationDetails = {
-        absoluteFile: '/path/to/spec',
-        line: 20,
-        column: 5,
-      }
-
-      const test = {
-        id: 'r2',
-        title: 'my test',
-        invocationDetails,
-      }
-
-      instance.setTestId('r2')
-
-      instance.interceptTest(test)
-
-      expect(instance.fileDetails).to.equal(invocationDetails)
-      expect(instance.runnableTitle).to.equal('my test')
-    })
-
-    it('grabs test and suite data when adding to suite', () => {
-      const invocationDetails = {
-        absoluteFile: '/path/to/spec',
-        line: 20,
-        column: 5,
-      }
-
-      const suite = {
-        id: 'r2',
-        title: 'my suite',
-      }
-
-      const test = {
-        id: 'r3',
-        title: 'my test',
-        invocationDetails,
-        parent: suite,
-      }
-
-      instance.setSuiteId('r2')
-
-      instance.interceptTest(test)
-
-      expect(instance.testId).to.equal('r3')
-      expect(instance.fileDetails).to.equal(invocationDetails)
-      expect(instance.runnableTitle).to.equal('my suite')
-    })
-
-    it('does not grab parent title when adding to root', () => {
-      const root = {
-        id: 'r1',
-        title: '',
-      }
-
-      const test = {
-        id: 'r2',
-        title: 'my test',
-        parent: root,
-      }
-
-      instance.setSuiteId('r1')
-
-      instance.interceptTest(test)
-
-      expect(instance.testId).to.equal('r2')
-      expect(instance.fileDetails).to.be.null
-      expect(instance.runnableTitle).to.be.null
-    })
-  })
-
-  context('#start', () => {
-    beforeEach(() => {
-      sinon.stub(instance, 'visitUrl')
-    })
-
-    it('sets isActive, isOpen to true and isLoading to false', () => {
-      instance.start(null)
-
-      expect(instance.isActive).to.be.true
-      expect(instance.isLoading).to.be.false
-      expect(instance.isOpen).to.be.true
-    })
-
-    it('clears any existing logs', () => {
-      instance.logs = ['log 1', 'log 2']
-      instance.start(null)
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('visits url if url has been set', () => {
-      instance.url = 'cypress.io'
-      instance.start(null)
-
-      expect(instance.visitUrl).to.be.called
-    })
-
-    it('attaches listeners to the body', () => {
-      instance.start('body')
-
-      expect(instance.attachListeners).to.be.calledWith('body')
-    })
-  })
-
-  context('#stop', () => {
-    beforeEach(() => {
-      instance.start()
-    })
-
-    it('removes listeners', () => {
-      instance.stop()
-
-      expect(instance.removeListeners).to.be.called
-    })
-
-    it('sets isActive, isLoading to false and isOpen is true', () => {
-      instance.stop()
-
-      expect(instance.isActive).to.be.false
-      expect(instance.isOpen).to.be.true
-    })
-  })
-
-  context('#reset', () => {
-    beforeEach(() => {
-      instance.start()
-    })
-
-    it('removes listeners', () => {
-      instance.reset()
-
-      expect(instance.removeListeners).to.be.called
-    })
-
-    it('sets isActive, isOpen to false', () => {
-      instance.reset()
-
-      expect(instance.isActive).to.be.false
-      expect(instance.isOpen).to.be.false
-    })
-
-    it('clears logs and url', () => {
-      instance.reset()
-
-      expect(instance.logs).to.be.empty
-      expect(instance.url).to.be.null
-    })
-
-    it('does not remove runnable ids', () => {
-      instance.testId = 'r2'
-      instance.suiteId = 'r1'
-      instance.reset()
-
-      expect(instance.hasRunnableId).to.be.true
-    })
-  })
-
-  context('#cancel', () => {
-    beforeEach(() => {
-      instance.start()
-    })
-
-    it('removes listeners', () => {
-      instance.cancel()
-
-      expect(instance.removeListeners).to.be.called
-    })
-
-    it('sets isActive, isOpen to false', () => {
-      instance.cancel()
-
-      expect(instance.isActive).to.be.false
-      expect(instance.isOpen).to.be.false
-    })
-
-    it('clears logs and url', () => {
-      instance.logs = ['log 1', 'log 2']
-      instance.cancel()
-
-      expect(instance.logs).to.be.empty
-      expect(instance.url).to.be.null
-    })
-
-    it('removes runnable ids', () => {
-      instance.testId = 'r2'
-      instance.suiteId = 'r1'
-      instance.cancel()
-
-      expect(instance.hasRunnableId).to.be.false
-    })
-  })
-
-  context('#startSave', () => {
-    beforeEach(() => {
-      instance.start()
-    })
-
-    it('shows save modal if suite', () => {
-      instance.suiteId = 'r1'
-      instance.startSave()
-
-      expect(instance.saveModalIsOpen).to.be.true
-    })
-
-    it('skips modal and goes directly to save if test', () => {
-      sinon.stub(instance, 'save')
-
-      instance.testId = 'r2'
-      instance.startSave()
-
-      expect(instance.save).to.be.called
-    })
-  })
-
-  context('#save', () => {
-    beforeEach(() => {
-      instance.start()
-    })
-
-    it('closes save modal', () => {
-      instance.showSaveModal()
-      instance.save()
-
-      expect(instance.saveModalIsOpen).to.be.false
-    })
-
-    it('removes listeners', () => {
-      instance.save()
-
-      expect(instance.removeListeners).to.be.called
-    })
-
-    it('sets isActive to false and isOpen is true', () => {
-      instance.save()
-
-      expect(instance.isActive).to.be.false
-      expect(instance.isOpen).to.be.true
-    })
-
-    it('emits studio:save with relevant test information', () => {
-      const fileDetails = {
-        absoluteFile: '/path/to/spec.js',
-        line: 10,
-        column: 4,
-      }
-      const absoluteFile = '/path/to/spec.js'
-      const runnableTitle = 'my test'
-      const logs = ['log 1', 'log 2']
-
-      instance.setFileDetails(fileDetails)
-      instance.setAbsoluteFile(absoluteFile)
-      instance.setRunnableTitle(runnableTitle)
-      instance.logs = logs
-      instance.testId = 'r2'
-
-      instance.save()
-
-      expect(eventManager.emit).to.be.calledWith('studio:save', {
-        fileDetails,
-        absoluteFile,
-        runnableTitle,
-        commands: logs,
-        isSuite: false,
-        isRoot: false,
-        testName: null,
-      })
-    })
-
-    it('emits studio:save with relevant suite information', () => {
-      const fileDetails = {
-        absoluteFile: '/path/to/spec.js',
-        line: 10,
-        column: 4,
-      }
-      const absoluteFile = '/path/to/spec.js'
-      const runnableTitle = 'my suite'
-      const logs = ['log 1', 'log 2']
-
-      instance.setFileDetails(fileDetails)
-      instance.setAbsoluteFile(absoluteFile)
-      instance.setRunnableTitle(runnableTitle)
-      instance.logs = logs
-      instance.suiteId = 'r2'
-
-      instance.save('new test name')
-
-      expect(eventManager.emit).to.be.calledWith('studio:save', {
-        fileDetails,
-        absoluteFile,
-        runnableTitle,
-        commands: logs,
-        isSuite: true,
-        isRoot: false,
-        testName: 'new test name',
-      })
-    })
-
-    it('emits studio:save with relevant suite information for root suite', () => {
-      const absoluteFile = '/path/to/spec.js'
-      const logs = ['log 1', 'log 2']
-
-      instance.setAbsoluteFile(absoluteFile)
-      instance.logs = logs
-      instance.suiteId = 'r1'
-
-      instance.save('new test name')
-
-      expect(eventManager.emit).to.be.calledWith('studio:save', {
-        fileDetails: null,
-        absoluteFile,
-        runnableTitle: null,
-        commands: logs,
-        isSuite: true,
-        isRoot: true,
-        testName: 'new test name',
-      })
-    })
-  })
-
-  context('#visitUrl', () => {
-    it('visits existing url by default', () => {
-      instance.url = 'cypress.io'
-      instance.visitUrl()
-
-      expect(cyVisitStub).to.be.calledWith('cypress.io')
-    })
-
-    it('visits and sets new url', () => {
-      instance.visitUrl('example.com')
-
-      expect(instance.url).to.equal('example.com')
-      expect(instance.state.url).to.equal('example.com')
-      expect(cyVisitStub).to.be.calledWith('example.com')
-    })
-
-    it('adds a log for the visited url', () => {
-      instance.visitUrl('cypress.io')
-
-      expect(instance.logs[0].selector).to.be.null
-      expect(instance.logs[0].name).to.equal('visit')
-      expect(instance.logs[0].message).to.equal('cypress.io')
-    })
-  })
-
-  context('#copyToClipboard', () => {
-    const textToBeCopied = 'cy.get(\'.btn\').click()'
-
-    afterEach(() => {
-      delete window.isSecureContext
-      delete navigator.clipboard
-      delete document.execCommand
-    })
-
-    it('uses clipboard api when available', () => {
-      const writeText = sinon.stub().resolves()
-
-      window.isSecureContext = true
-      navigator.clipboard = {
-        writeText,
-      }
-
-      return instance.copyToClipboard(textToBeCopied).then(() => {
-        expect(writeText).to.be.calledWith(textToBeCopied)
-      })
-    })
-
-    it('falls back to execCommand when clipboard api not available', () => {
-      const execCommand = sinon.stub()
-
-      document.execCommand = execCommand
-
-      instance.copyToClipboard(textToBeCopied).then(() => {
-        expect(execCommand).to.be.calledWith('copy')
-      })
-    })
-  })
-
-  // https://github.com/cypress-io/cypress/issues/14658
-  context('#recordMouseEvent', () => {
-    beforeEach(() => {
-      instance.testId = 'r2'
-    })
-
-    it('does not record events not sent by the user', () => {
-      instance._recordMouseEvent(createEvent({ isTrusted: false }))
-
-      expect(instance._previousMouseEvent).to.be.null
-    })
-
-    it('records the selector and element for an event', () => {
-      const el = $('<div />')[0]
-
-      instance._recordMouseEvent(createEvent({ target: el, type: 'mouseover' }))
-
-      expect(instance._previousMouseEvent.selector).to.equal('.selector')
-      expect(instance._previousMouseEvent.element).to.equal(el)
-    })
-
-    it('clears previous event on mouseout', () => {
-      const el = $('<div />')[0]
-
-      instance._previousMouseEvent = {
-        selector: '.selector',
-        element: el,
-      }
-
-      instance._recordMouseEvent(createEvent({ target: el, type: 'mouseout' }))
-
-      expect(instance._previousMouseEvent).to.be.null
-    })
-
-    it('replaces previous mouse event if element is different', () => {
-      const el1 = $('<div />')[0]
-      const el2 = $('<p />')[0]
-
-      instance._previousMouseEvent = {
-        selector: '.previous-selector',
-        element: el1,
-      }
-
-      instance._recordMouseEvent(createEvent({ target: el2, type: 'mouseover' }))
-
-      expect(instance._previousMouseEvent.selector).to.equal('.selector')
-      expect(instance._previousMouseEvent.element).to.equal(el2)
-    })
-
-    it('does not replace previous mouse event if element is the same', () => {
-      const el = $('<div />')[0]
-
-      instance._previousMouseEvent = {
-        selector: '.previous-selector',
-        element: el,
-      }
-
-      instance._recordMouseEvent(createEvent({ target: el, type: 'mousedown' }))
-
-      expect(instance._previousMouseEvent.selector).to.equal('.previous-selector')
-      expect(instance._previousMouseEvent.element).to.equal(el)
-    })
-  })
-
-  context('#getName', () => {
-    it('returns the event type by default', () => {
-      const $el = $('<div />')
-      const name = instance._getName(createEvent({ type: 'click' }), $el)
-
-      expect(name).to.equal('click')
-    })
-
-    it('returns select when a select changes', () => {
-      const $el = $('<select />')
-      const name = instance._getName(createEvent({ type: 'change' }), $el)
-
-      expect(name).to.equal('select')
-    })
-
-    it('returns type on keydown', () => {
-      const $el = $('<input />')
-      const name = instance._getName(createEvent({ type: 'keydown' }), $el)
-
-      expect(name).to.equal('type')
-    })
-
-    it('returns check on radio button click', () => {
-      const $el = $('<input type="radio" />')
-      const name = instance._getName(createEvent({ type: 'click' }), $el)
-
-      expect(name).to.equal('check')
-    })
-
-    it('returns check when checkbox is checked', () => {
-      const $el = $('<input type="checkbox" checked />')
-      const name = instance._getName(createEvent({ type: 'click' }), $el)
-
-      expect(name).to.equal('check')
-    })
-
-    it('returns uncheck when checkbox is unchecked', () => {
-      const $el = $('<input type="checkbox" />')
-      const name = instance._getName(createEvent({ type: 'click' }), $el)
-
-      expect(name).to.equal('uncheck')
-    })
-  })
-
-  context('#getMessage', () => {
-    it('returns null if the event has no value', () => {
-      const $el = $('<div />')
-      const message = instance._getMessage(createEvent({ type: 'click' }), $el)
-
-      expect(message).to.be.null
-    })
-
-    it('returns target value if the event has a value', () => {
-      const $el = $('<input value="blue" />')
-      const message = instance._getMessage(createEvent({ type: 'change' }), $el)
-
-      expect(message).to.equal('blue')
-    })
-
-    it('returns input value on keyup', () => {
-      const $el = $('<input value="value" />')
-      const message = instance._getMessage(createEvent({ type: 'keyup', key: 'e' }), $el)
-
-      expect(message).to.equal('value')
-    })
-
-    it('returns input value on keyup for special keys', () => {
-      const $el = $('<input value="value" />')
-      const message = instance._getMessage(createEvent({ type: 'keydown', key: 'Backspace' }), $el)
-
-      expect(message).to.equal('value')
-    })
-
-    it('returns input value with { escaped', () => {
-      const $el = $('<input value="my{value}" />')
-      const message = instance._getMessage(createEvent({ type: 'keydown', key: '}' }), $el)
-
-      expect(message).to.equal('my{{}value}')
-    })
-
-    it('returns input value with {enter} on enter keydown', () => {
-      const $el = $('<input value="value" />')
-      const message = instance._getMessage(createEvent({ type: 'keydown', key: 'Enter' }), $el)
-
-      expect(message).to.equal('value{enter}')
-    })
-
-    it('returns array if value is an array', () => {
-      const $el = $('<select multiple><option value="0">0</option><option value="1">1</option></select>')
-
-      $el.val(['0', '1'])
-
-      const message = instance._getMessage(createEvent({ type: 'change' }), $el)
-
-      expect(message).to.eql(['0', '1'])
-    })
-  })
-
-  context('#recordEvent', () => {
-    beforeEach(() => {
-      instance.testId = 'r2'
-    })
-
-    it('does not record events not sent by the user', () => {
-      instance._recordEvent(createEvent({ isTrusted: false }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('does not prevent the action from reaching other event listeners', () => {
-      const $el = $('<div />')
-
-      const preventDefault = sinon.stub()
-      const stopPropagation = sinon.stub()
-
-      instance._recordEvent(createEvent({ target: $el, preventDefault, stopPropagation }))
-
-      expect(preventDefault).not.to.be.called
-      expect(stopPropagation).not.to.be.called
-    })
-
-    it('does not record events if the test has failed', () => {
-      instance.testFailed()
-
-      const $el = $('<div />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('does not record events inside the assertions menu', () => {
-      const $el = $('<div class="__cypress-studio-assertions-menu" />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('closes the assertions menu when recording an event', () => {
-      const $el = $('<div />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(dom.closeStudioAssertionsMenu).to.be.called
-    })
-
-    it('does not close the assertions menu on events inside the assertions menu', () => {
-      const $el = $('<div class="__cypress-studio-assertions-menu" />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(dom.closeStudioAssertionsMenu).not.to.be.called
-    })
-
-    it('uses the selector playground to get a selector for the element', () => {
-      const $el = $('<div />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(getSelectorStub).to.be.calledWith($el)
-    })
-
-    it('uses the selector from a previously recorded mouse event on click', () => {
-      const el = $('<div />')[0]
-
-      instance._previousMouseEvent = {
-        selector: '.previous-selector',
-        element: el,
-      }
-
-      instance._recordEvent(createEvent({ type: 'click', target: el }))
-
-      expect(instance.logs[0].name).to.equal('click')
-      expect(instance.logs[0].selector).to.equal('.previous-selector')
-    })
-
-    it('clears previous mouse event after recording any event', () => {
-      const el = $('<div />')[0]
-
-      instance._previousMouseEvent = {
-        selector: '.previous-selector',
-        element: $('<input />')[0],
-      }
-
-      instance._recordEvent(createEvent({ type: 'click', target: el }))
-
-      expect(instance._previousMouseEvent).to.be.null
-    })
-
-    it('records a clear event before recording a type event', () => {
-      const $el = $('<input value="val" />')
-
-      instance._recordEvent(createEvent({ type: 'keyup', key: 'l', target: $el }))
-
-      expect(instance.logs.length).to.equal(2)
-      expect(instance.logs[0].name).to.equal('clear')
-      expect(instance.logs[0].message).to.equal(null)
-      expect(instance.logs[1].name).to.equal('type')
-      expect(instance.logs[1].message).to.equal('val')
-    })
-
-    it('removes an existing type if additional typing causes element to become empty', () => {
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'clear',
-        message: null,
-      }, {
-        id: 2,
-        selector: '.selector',
-        name: 'type',
-        message: 'a',
-      }]
-
-      const $el = $('<input value="" />')
-
-      instance._recordEvent(createEvent({ type: 'keyup', key: 'Backspace', target: $el }))
-
-      expect(instance.logs.length).to.equal(1)
-      expect(instance.logs[0].name).to.equal('clear')
-      expect(instance.logs[0].message).to.equal(null)
-    })
-
-    it('does not record a duplicate clear event if one already exists when typing', () => {
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'clear',
-        message: null,
-      }]
-
-      const $el = $('<input value="val" />')
-
-      instance._recordEvent(createEvent({ type: 'keyup', key: 'l', target: $el }))
-
-      expect(instance.logs.length).to.equal(2)
-      expect(instance.logs[0].name).to.equal('clear')
-      expect(instance.logs[0].message).to.equal(null)
-      expect(instance.logs[1].name).to.equal('type')
-      expect(instance.logs[1].message).to.equal('val')
-    })
-
-    it('does not record keyup outside of input', () => {
-      const $el = $('<div />')
-
-      instance._recordEvent(createEvent({ type: 'keyup', key: 'a', target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('does not record unneeded change events', () => {
-      const $el = $('<input />')
-
-      instance._recordEvent(createEvent({ type: 'change', target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('does not record keyup for enter key', () => {
-      const $el = $('<input value="val" />')
-
-      instance._recordEvent(createEvent({ type: 'keyup', key: 'Enter', target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('only records keydown for enter key', () => {
-      const $el = $('<input value="" />')
-
-      instance._recordEvent(createEvent({ type: 'keydown', key: 'a', target: $el }))
-
-      expect(instance.logs).to.be.empty
-
-      $el.val('a')
-      instance._recordEvent(createEvent({ type: 'keydown', key: 'b', target: $el }))
-
-      expect(instance.logs).to.be.empty
-
-      $el.val('ab')
-      instance._recordEvent(createEvent({ type: 'keydown', key: 'Enter', target: $el }))
-
-      expect(instance.logs[1].name).to.equal('type')
-      expect(instance.logs[1].message).to.equal('ab{enter}')
-    })
-
-    it('records multi select changes', () => {
-      const $el = $('<select multiple><option value="0">0</option><option value="1">1</option></select>')
-
-      $el.val(['0', '1'])
-
-      instance._recordEvent(createEvent({ type: 'change', target: $el }))
-
-      expect(instance.logs[0].name).to.eql('select')
-      expect(instance.logs[0].message).to.eql(['0', '1'])
-    })
-
-    it('does not record events on <option>', () => {
-      const $el = $('<option />')
-
-      instance._recordEvent(createEvent({ target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('does not record click events on <select>', () => {
-      const $el = $('<select />')
-
-      instance._recordEvent(createEvent({ type: 'click', target: $el }))
-
-      expect(instance.logs).to.be.empty
-    })
-
-    it('adds events to the command log with incrementing ids', () => {
-      const $el = $('<div />')
-
-      instance._recordEvent(createEvent({ type: 'click', target: $el }))
-      instance._recordEvent(createEvent({ type: 'click', target: $el }))
-
-      expect(instance.logs.length).to.equal(2)
-
-      expect(instance.logs[0].id).to.equal(1)
-      expect(instance.logs[0].selector).to.equal('.selector')
-      expect(instance.logs[0].name).to.equal('click')
-      expect(instance.logs[0].message).to.equal(null)
-
-      expect(instance.logs[1].id).to.equal(2)
-      expect(instance.logs[1].selector).to.equal('.selector')
-      expect(instance.logs[1].name).to.equal('click')
-      expect(instance.logs[1].message).to.equal(null)
-    })
-
-    it('emits two reporter:log:add events for each log', () => {
-      const $el = $('<button />')
-
-      instance._recordEvent(createEvent({ type: 'click', target: $el }))
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1-get',
-        instrument: 'command',
-        isStudio: true,
-        message: '.selector',
-        name: 'get',
-        numElements: 1,
-        number: 1,
-        state: 'passed',
-        testId: 'r2',
-        type: 'parent',
-      })
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1',
-        instrument: 'command',
-        isStudio: true,
-        message: null,
-        name: 'click',
-        numElements: 1,
-        number: undefined,
-        state: 'passed',
-        testId: 'r2',
-        type: 'child',
-      })
-    })
-
-    it('emits stringified message for arrays', () => {
-      const $el = $('<select multiple><option value="0">0</option><option value="1">1</option></select>')
-
-      $el.val(['0', '1'])
-
-      instance._recordEvent(createEvent({ type: 'change', target: $el }))
-
-      expect(eventManager.emit).to.be.calledWithMatch('reporter:log:add', {
-        message: '[0, 1]',
-      })
-    })
-  })
-
-  context('#updateLastLog', () => {
-    it('does not filter if there are no existing logs', () => {
-      const result = instance._updateLastLog('.selector', 'click', null)
-
-      expect(result).to.be.false
-    })
-
-    it('does not filter if selectors do not match', () => {
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'type',
-        message: 'a',
-      }]
-
-      const result = instance._updateLastLog('.different-selector', 'type', 'b')
-
-      expect(result).to.be.false
-    })
-
-    it('modifies original log in place with updated value for typing events with same selector', () => {
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'type',
-        message: 'a',
-      }]
-
-      const result = instance._updateLastLog('.selector', 'type', 'ab')
-
-      expect(result).to.be.true
-      expect(instance.logs[0].name).to.equal('type')
-      expect(instance.logs[0].message).to.equal('ab')
-    })
-
-    it('converts clicks into clears on type and returns false', () => {
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'click',
-        message: null,
-      }]
-
-      const result = instance._updateLastLog('.selector', 'type', 'a')
-
-      expect(result).to.be.false
-      expect(instance.logs[0].name).to.equal('clear')
-      expect(instance.logs[0].message).to.be.null
-    })
-
-    it('emits reporter:log:state:changed with the child log when a log is updated', () => {
-      instance.testId = 'r2'
-      instance.logs = [{
-        id: 1,
-        selector: '.selector',
-        name: 'type',
-        message: 'a',
-      }]
-
-      instance._updateLastLog('.selector', 'type', 'ab')
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:state:changed', {
-        hookId: 'r2-studio',
-        id: 's1',
-        instrument: 'command',
-        isStudio: true,
-        message: 'ab',
-        name: 'type',
-        numElements: 1,
-        number: undefined,
-        state: 'passed',
-        testId: 'r2',
-        type: 'child',
-      })
-    })
-  })
-
-  context('#addAssertion', () => {
-    beforeEach(() => {
-      instance.testId = 'r2'
-    })
-
-    it('uses the selector playground to get a selector for the element', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'be.visible')
-
-      expect(getSelectorStub).to.be.calledWith($el)
-    })
-
-    it('closes the assertions menu', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'be.visible')
-
-      expect(dom.closeStudioAssertionsMenu).to.be.called
-    })
-
-    it('records assertions with one parameter', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'be.visible')
-
-      expect(instance.logs.length).to.equal(1)
-      expect(instance.logs[0].selector).to.equal('.selector')
-      expect(instance.logs[0].name).to.equal('should')
-      expect(instance.logs[0].message).to.have.ordered.members(['be.visible'])
-      expect(instance.logs[0].isAssertion).to.be.true
-    })
-
-    it('records assertions with two parameters', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'have.text', 'my message')
-
-      expect(instance.logs.length).to.equal(1)
-      expect(instance.logs[0].selector).to.equal('.selector')
-      expect(instance.logs[0].name).to.equal('should')
-      expect(instance.logs[0].message).to.have.ordered.members(['have.text', 'my message'])
-      expect(instance.logs[0].isAssertion).to.be.true
-    })
-
-    it('records assertions with three parameters', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'have.attr', 'data-target', '#my-div')
-
-      expect(instance.logs.length).to.equal(1)
-      expect(instance.logs[0].selector).to.equal('.selector')
-      expect(instance.logs[0].name).to.equal('should')
-      expect(instance.logs[0].message).to.have.ordered.members(['have.attr', 'data-target', '#my-div'])
-      expect(instance.logs[0].isAssertion).to.be.true
-    })
-
-    it('adds assertions to the command log with incrementing ids', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'be.visible')
-      instance._addAssertion($el, 'have.text', 'my message')
-
-      expect(instance.logs.length).to.equal(2)
-
-      expect(instance.logs[0].selector).to.equal('.selector')
-      expect(instance.logs[0].name).to.equal('should')
-      expect(instance.logs[0].message).to.have.ordered.members(['be.visible'])
-      expect(instance.logs[0].isAssertion).to.be.true
-
-      expect(instance.logs[1].selector).to.equal('.selector')
-      expect(instance.logs[1].name).to.equal('should')
-      expect(instance.logs[1].message).to.have.ordered.members(['have.text', 'my message'])
-      expect(instance.logs[1].isAssertion).to.be.true
-    })
-
-    it('emits the first reporter:log:add event with get and the selector', () => {
-      const $el = $('<div />')
-
-      instance._addAssertion($el, 'be.visible')
-
-      expect(eventManager.emit).to.be.calledTwice
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1-get',
-        instrument: 'command',
-        isStudio: true,
-        message: '.selector',
-        name: 'get',
-        numElements: 1,
-        number: 1,
-        state: 'passed',
-        testId: 'r2',
-        type: 'parent',
-      })
-    })
-
-    it('emits the second reporter:log:add for an assertion with one parameter', () => {
-      const $el = $('<input type="radio" id="my-input" />')
-      const message = 'expect **<input#my-input>** to not be checked'
-
-      instance._addAssertion($el, 'not.be.checked')
-
-      expect(eventManager.emit).to.be.calledTwice
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1',
-        instrument: 'command',
-        isStudio: true,
-        message,
-        name: 'assert',
-        numElements: 1,
-        number: undefined,
-        state: 'passed',
-        testId: 'r2',
-        type: 'child',
-      })
-    })
-
-    it('emits the second reporter:log:add for an assertion with two parameters', () => {
-      const $el = $('<div class="container" />')
-      const message = 'expect **<div.container>** to have text **my message**'
-
-      instance._addAssertion($el, 'have.text', 'my message')
-
-      expect(eventManager.emit).to.be.calledTwice
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1',
-        instrument: 'command',
-        isStudio: true,
-        message,
-        name: 'assert',
-        numElements: 1,
-        number: undefined,
-        state: 'passed',
-        testId: 'r2',
-        type: 'child',
-      })
-    })
-
-    it('emits the second reporter:log:add for an assertion with three parameters', () => {
-      const $el = $('<button data-target="#my-div" />')
-      const message = 'expect **<button>** to have attr **data-target** with the value **#my-div**'
-
-      instance._addAssertion($el, 'have.attr', 'data-target', '#my-div')
-
-      expect(eventManager.emit).to.be.calledTwice
-
-      expect(eventManager.emit).to.be.calledWith('reporter:log:add', {
-        hookId: 'r2-studio',
-        id: 's1',
-        instrument: 'command',
-        isStudio: true,
-        message,
-        name: 'assert',
-        numElements: 1,
-        number: undefined,
-        state: 'passed',
-        testId: 'r2',
-        type: 'child',
-      })
-    })
-  })
-
-  context('#openAssertionsMenu', () => {
-    it('prevents the default right click event and propagation', () => {
-      const $el = $('<div />')
-
-      const preventDefault = sinon.stub()
-      const stopPropagation = sinon.stub()
-
-      instance._openAssertionsMenu(createEvent({ target: $el, preventDefault, stopPropagation }))
-
-      expect(preventDefault).to.be.called
-      expect(stopPropagation).to.be.called
-    })
-
-    it('closes existing assertions menu', () => {
-      const $el = $('<div />')
-
-      instance._openAssertionsMenu(createEvent({ target: $el }))
-
-      expect(dom.closeStudioAssertionsMenu).to.be.called
-    })
-
-    it('opens the assertions menu', () => {
-      const $el = $('<div />')
-
-      instance._openAssertionsMenu(createEvent({ target: $el }))
-
-      expect(dom.openStudioAssertionsMenu).to.be.called
-    })
-
-    it('does not close existing assertions menu or open another one if right click within menu', () => {
-      const $el = $('<div class="__cypress-studio-assertions-menu" />')
-
-      instance._openAssertionsMenu(createEvent({ target: $el }))
-
-      expect(dom.closeStudioAssertionsMenu).not.to.be.called
-      expect(dom.openStudioAssertionsMenu).not.to.be.called
-    })
-  })
-
-  context('#generatePossibleAssertions', () => {
-    it('generates assertions for an element with many attributes', () => {
-      const $el = $('<div id="wrapper" class="container container-wide" data-channel="a1" data-content="pg-container">page content</div>')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(5)
-
-      expect(possibleAssertions[0].type).to.equal('have.text')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('page content')
-
-      expect(possibleAssertions[1].type).to.equal('have.id')
-      expect(possibleAssertions[1].options.length).to.equal(1)
-      expect(possibleAssertions[1].options[0].value).to.equal('wrapper')
-
-      expect(possibleAssertions[2].type).to.equal('have.class')
-      expect(possibleAssertions[2].options.length).to.equal(2)
-      expect(possibleAssertions[2].options[0].value).to.equal('container')
-      expect(possibleAssertions[2].options[1].value).to.equal('container-wide')
-
-      expect(possibleAssertions[3].type).to.equal('have.attr')
-      expect(possibleAssertions[3].options.length).to.equal(2)
-      expect(possibleAssertions[3].options[0].name).to.equal('data-channel')
-      expect(possibleAssertions[3].options[0].value).to.equal('a1')
-      expect(possibleAssertions[3].options[1].name).to.equal('data-content')
-      expect(possibleAssertions[3].options[1].value).to.equal('pg-container')
-
-      expect(possibleAssertions[4].type).to.equal('be.visible')
-      expect(possibleAssertions[4].options).to.be.undefined
-    })
-
-    it('always generates be.visible but not have.text or have.value for elements without them', () => {
-      const $el = $('<span />')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(1)
-
-      expect(possibleAssertions[0].type).to.equal('be.visible')
-      expect(possibleAssertions[0].options).to.be.undefined
-    })
-
-    it('does not generate have.text for elements that cannot have text', () => {
-      const $el = $('<textarea>placeholder</textarea>')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(3)
-
-      expect(possibleAssertions[0].type).to.equal('have.value')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('placeholder')
-
-      expect(possibleAssertions[1].type).to.equal('be.visible')
-      expect(possibleAssertions[1].options).to.be.undefined
-
-      expect(possibleAssertions[2].type).to.equal('be.enabled')
-      expect(possibleAssertions[2].options).to.be.undefined
-    })
-
-    it('generates be.enabled for enabled elements', () => {
-      const $el = $('<button>button</button>')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(3)
-
-      expect(possibleAssertions[0].type).to.equal('have.text')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('button')
-
-      expect(possibleAssertions[1].type).to.equal('be.visible')
-      expect(possibleAssertions[1].options).to.be.undefined
-
-      expect(possibleAssertions[2].type).to.equal('be.enabled')
-      expect(possibleAssertions[2].options).to.be.undefined
-    })
-
-    it('generates be.disabled for disabled elements', () => {
-      const $el = $('<button disabled>button</button>')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(3)
-
-      expect(possibleAssertions[0].type).to.equal('have.text')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('button')
-
-      expect(possibleAssertions[1].type).to.equal('be.visible')
-      expect(possibleAssertions[1].options).to.be.undefined
-
-      expect(possibleAssertions[2].type).to.equal('be.disabled')
-      expect(possibleAssertions[2].options).to.be.undefined
-    })
-
-    it('generates not.be.checked for unchecked elements', () => {
-      const $el = $('<input type="radio" value="option1">')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(5)
-
-      expect(possibleAssertions[0].type).to.equal('have.value')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('option1')
-
-      expect(possibleAssertions[1].type).to.equal('have.attr')
-      expect(possibleAssertions[1].options.length).to.equal(1)
-      expect(possibleAssertions[1].options[0].name).to.equal('type')
-      expect(possibleAssertions[1].options[0].value).to.equal('radio')
-
-      expect(possibleAssertions[2].type).to.equal('be.visible')
-      expect(possibleAssertions[2].options).to.be.undefined
-
-      expect(possibleAssertions[3].type).to.equal('be.enabled')
-      expect(possibleAssertions[3].options).to.be.undefined
-
-      expect(possibleAssertions[4].type).to.equal('not.be.checked')
-      expect(possibleAssertions[4].options).to.be.undefined
-    })
-
-    it('generates be.checked for checked elements', () => {
-      const $el = $('<input type="checkbox" value="option1" checked>')
-
-      const possibleAssertions = instance._generatePossibleAssertions($el)
-
-      expect(possibleAssertions.length).to.equal(5)
-
-      expect(possibleAssertions[0].type).to.equal('have.value')
-      expect(possibleAssertions[0].options.length).to.equal(1)
-      expect(possibleAssertions[0].options[0].value).to.equal('option1')
-
-      expect(possibleAssertions[1].type).to.equal('have.attr')
-      expect(possibleAssertions[1].options.length).to.equal(1)
-      expect(possibleAssertions[1].options[0].name).to.equal('type')
-      expect(possibleAssertions[1].options[0].value).to.equal('checkbox')
-
-      expect(possibleAssertions[2].type).to.equal('be.visible')
-      expect(possibleAssertions[2].options).to.be.undefined
-
-      expect(possibleAssertions[3].type).to.equal('be.enabled')
-      expect(possibleAssertions[3].options).to.be.undefined
-
-      expect(possibleAssertions[4].type).to.equal('be.checked')
-      expect(possibleAssertions[4].options).to.be.undefined
-    })
-  })
-})
diff --git a/packages/runner/unified-runner.tsx b/packages/runner/unified-runner.tsx
index 0b1da15c9f92..dfff25ad12d8 100644
--- a/packages/runner/unified-runner.tsx
+++ b/packages/runner/unified-runner.tsx
@@ -5,7 +5,6 @@ import { Reporter } from '@packages/reporter/src/main'
 import shortcuts from '@packages/reporter/src/lib/shortcuts'
 import * as MobX from 'mobx'
 
-import { StudioRecorder } from './src/studio'
 import { dom } from './src/dom'
 
 export const UnifiedRunner = {
@@ -15,8 +14,6 @@ export const UnifiedRunner = {
 
   dom,
 
-  StudioRecorder,
-
   shortcuts,
 
   React,
diff --git a/packages/server/lib/socket-e2e.ts b/packages/server/lib/socket-e2e.ts
index 8a41483f21f8..af1dec4ea351 100644
--- a/packages/server/lib/socket-e2e.ts
+++ b/packages/server/lib/socket-e2e.ts
@@ -101,11 +101,6 @@ export class SocketE2E extends SocketBase {
           return cb()
         })
 
-        socket.on('studio:init', (cb) => {
-          studio.getStudioModalShown()
-          .then(cb)
-        })
-
         socket.on('studio:save', (saveInfo, cb) => {
           // even if the user has turned off file watching
           // we want to force a reload on save
diff --git a/packages/server/lib/studio.ts b/packages/server/lib/studio.ts
index db45682df3bf..f25820a5ab8c 100644
--- a/packages/server/lib/studio.ts
+++ b/packages/server/lib/studio.ts
@@ -15,13 +15,6 @@ class StudioSaveError extends Error {
   }
 }
 
-export const setStudioModalShown = () => {
-  return savedState.create()
-  .then((state) => {
-    state.set({ showedStudioModal: true })
-  })
-}
-
 export const getStudioModalShown = () => {
   return savedState.create()
   .then((state) => state.get())
@@ -45,14 +38,11 @@ export const save = (saveInfo: SaveInfo) => {
 
   return saveToFile()
   .then((success) => {
-    return setStudioModalShown()
-    .then(() => {
-      if (!success) {
-        throw new StudioSaveError(isSuite)
-      }
+    if (!success) {
+      throw new StudioSaveError(isSuite)
+    }
 
-      return null
-    })
+    return null
   })
   .catch((err) => {
     return {
diff --git a/packages/types/src/driver.ts b/packages/types/src/driver.ts
index 8b12c4adf614..f2c20cd7a7ae 100644
--- a/packages/types/src/driver.ts
+++ b/packages/types/src/driver.ts
@@ -13,3 +13,7 @@ export interface Emissions {
   started: Record<string, boolean>
   ended: Record<string, boolean>
 }
+
+export type Instrument = 'agent' | 'command' | 'route'
+
+export type TestState = 'active' | 'failed' | 'pending' | 'passed' | 'processing'
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/empty.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/empty.cy.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/index.html b/system-tests/projects/experimental-studio/cypress/e2e/index.html
new file mode 100644
index 000000000000..c62dc4cd65af
--- /dev/null
+++ b/system-tests/projects/experimental-studio/cypress/e2e/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello Studio</title>
+</head>
+<body>
+  <script>
+    let count = 0
+
+    function increment () {
+      count++
+      document.querySelector('p').innerText = `Count is ${count}`
+    }
+  </script>
+
+  <h1>Hello, Studio!</h1> 
+  <hr />
+
+  <p>Count is 0</p>
+  <button onclick="increment()" id="increment">Increment</button>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
new file mode 100644
index 000000000000..14398fef3b5c
--- /dev/null
+++ b/system-tests/projects/experimental-studio/cypress/e2e/spec.cy.js
@@ -0,0 +1,3 @@
+it('visits a basic html page', () => {
+  cy.visit('cypress/e2e/index.html')
+})