internal: (studio) improvements to how studio can access the protocol database

Author: ryanthemanuel

.circleci/workflows.yml

@@ -38,7 +38,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'chore/fix_react_18_deprecation_warnings'
+        - 'ryanm/chore/full-snapshot-threaded'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -49,7 +49,7 @@ macWorkflowFilters: &darwin-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/full-snapshot-threaded', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -60,7 +60,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/full-snapshot-threaded', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -83,8 +83,7 @@ windowsWorkflowFilters: &windows-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/fix_react_18_deprecation_warnings', << pipeline.git.branch >> ]
-      - equal: [ 'cacie/fix-du', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/full-snapshot-threaded', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -158,7 +157,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/fix_react_18_deprecation_warnings" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "ryanm/chore/full-snapshot-threaded" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

packages/app/src/studio/studio-app-types.ts

@@ -1,5 +1,7 @@
 export interface StudioPanelProps {
   canAccessStudioAI: boolean
+  useStudioEventManager?: StudioEventManagerShape
+  useStudioAIStream?: StudioAIStreamShape
 }
 
 export type StudioPanelShape = (props: StudioPanelProps) => JSX.Element
@@ -9,3 +11,21 @@ export interface StudioAppDefaultShape {
   // transferred to the Cypress app
   StudioPanel: StudioPanelShape
 }
+
+export interface StudioEventManagerProps {
+  Cypress: Cypress.Cypress & CyEventEmitter
+}
+
+export type RunnerStatus = 'running' | 'finished'
+
+export type StudioEventManagerShape = (
+  props: StudioEventManagerProps
+) => RunnerStatus
+
+export interface StudioAIStreamProps {
+  canAccessStudioAI: boolean
+  AIOutputRef: React.RefObject<HTMLTextAreaElement>
+  runnerStatus: RunnerStatus
+}
+
+export type StudioAIStreamShape = (props: StudioAIStreamProps) => void

packages/server/lib/cloud/studio.ts

@@ -6,7 +6,7 @@ import os from 'os'
 import { agent } from '@packages/network'
 import Debug from 'debug'
 import { requireScript } from './require_script'
-import type Database from 'better-sqlite3'
+import path from 'path'
 
 interface StudioServer { default: StudioServerDefaultShape }
 
@@ -38,8 +38,8 @@ export class StudioManager implements StudioManagerShape {
     return manager
   }
 
-  setProtocolDb (db: Database.Database): void {
-    this.invokeSync('setProtocolDb', { isEssential: true }, db)
+  setProtocolDbPath (protocolDbPath: string): void {
+    this.invokeSync('setProtocolDbPath', { isEssential: true }, protocolDbPath)
   }
 
   async setup ({ script, studioPath, studioHash, projectSlug, cloudApi }: SetupOptions): Promise<void> {
@@ -49,6 +49,7 @@ export class StudioManager implements StudioManagerShape {
       studioPath,
       projectSlug,
       cloudApi,
+      betterSqlite3Path: path.dirname(require.resolve('better-sqlite3/package.json')),
     })
 
     this._studioHash = studioHash
@@ -65,6 +66,14 @@ export class StudioManager implements StudioManagerShape {
     return (await this.invokeAsync('canAccessStudioAI', { isEssential: true }, browser)) ?? false
   }
 
+  async initializeStudioAI (): Promise<void> {
+    await this.invokeAsync('initializeStudioAI', { isEssential: true })
+  }
+
+  async destroy (): Promise<void> {
+    await this.invokeAsync('destroy', { isEssential: true })
+  }
+
   private async reportError (error: Error): Promise<void> {
     try {
       const payload: StudioErrorReport = {

packages/server/lib/project-base.ts

@@ -432,12 +432,14 @@ export class ProjectBase extends EE {
 
       onStudioInit: async () => {
         if (this.spec && this.ctx.coreData.studio?.protocolManager) {
-          const canAccessStudioAI = await this.ctx.coreData.studio?.canAccessStudioAI(this.browser) ?? false
+          const canAccessStudioAI = await this.ctx.coreData.studio.canAccessStudioAI(this.browser) ?? false
 
           if (!canAccessStudioAI) {
             return { canAccessStudioAI }
           }
 
+          await this.ctx.coreData.studio.initializeStudioAI()
+
           this.protocolManager = this.ctx.coreData.studio?.protocolManager
           this.protocolManager?.setupProtocol()
           this.protocolManager?.beforeSpec({
@@ -447,8 +449,8 @@ export class ProjectBase extends EE {
 
           await browsers.connectProtocolToBrowser({ browser: this.browser, foundBrowsers: this.options.browsers, protocolManager: this.protocolManager })
 
-          if (this.protocolManager.db) {
-            this.ctx.coreData.studio?.setProtocolDb(this.protocolManager.db)
+          if (this.protocolManager.dbPath) {
+            this.ctx.coreData.studio?.setProtocolDbPath(this.protocolManager.dbPath)
           }
 
           return { canAccessStudioAI: true }
@@ -464,6 +466,7 @@ export class ProjectBase extends EE {
           await browsers.closeProtocolConnection({ browser: this.browser, foundBrowsers: this.options.browsers })
           this.protocolManager?.close()
           this.protocolManager = undefined
+          await this.ctx.coreData.studio.destroy()
         }
       },
 

packages/server/test/support/fixtures/cloud/studio/test-studio.ts

@@ -1,17 +1,24 @@
-import type { StudioServerShape, StudioServerDefaultShape, StudioBrowser } from '@packages/types'
-import type Database from 'better-sqlite3'
+import type { StudioServerShape, StudioServerDefaultShape } from '@packages/types'
 import type { Router } from 'express'
 
 class StudioServer implements StudioServerShape {
   initializeRoutes (router: Router): void {
 
   }
 
-  canAccessStudioAI (browser: StudioBrowser): Promise<boolean> {
+  canAccessStudioAI (browser: Cypress.Browser): Promise<boolean> {
     return Promise.resolve(true)
   }
 
-  setProtocolDb (db: Database.Database): void {
+  setProtocolDbPath (dbPath: string): void {
+  }
+
+  initializeStudioAI (): Promise<void> {
+    return Promise.resolve()
+  }
+
+  destroy (): Promise<void> {
+    return Promise.resolve()
   }
 }
 

packages/server/test/unit/cloud/studio_spec.ts

@@ -172,15 +172,35 @@ describe('lib/cloud/studio', () => {
     })
   })
 
-  describe('setProtocolDb', () => {
-    it('sets the protocol database on the studio server', () => {
-      const mockDb = { test: 'db' }
+  describe('setProtocolDbPath', () => {
+    it('sets the protocol database path on the studio server', () => {
+      const mockPath = '/path/to/db'
 
-      sinon.stub(studio, 'setProtocolDb')
+      sinon.stub(studio, 'setProtocolDbPath')
 
-      studioManager.setProtocolDb(mockDb as any)
+      studioManager.setProtocolDbPath(mockPath)
 
-      expect(studio.setProtocolDb).to.be.calledWith(mockDb)
+      expect(studio.setProtocolDbPath).to.be.calledWith(mockPath)
+    })
+  })
+
+  describe('initializeStudioAI', () => {
+    it('initializes Studio AI on the studio server', async () => {
+      sinon.stub(studio, 'initializeStudioAI').resolves()
+
+      await studioManager.initializeStudioAI()
+
+      expect(studio.initializeStudioAI).to.be.called
+    })
+  })
+
+  describe('destroy', () => {
+    it('destroys the studio server', async () => {
+      sinon.stub(studio, 'destroy').resolves()
+
+      await studioManager.destroy()
+
+      expect(studio.destroy).to.be.called
     })
   })
 })

packages/server/test/unit/project_spec.js

@@ -43,6 +43,7 @@ describe('lib/project-base', () => {
     this.testStudioManager = {
       initializeRoutes: () => {},
       status: 'INITIALIZED',
+      destroy: () => Promise.resolve(),
     }
 
     sinon.stub(studio, 'getAndInitializeStudioManager').resolves(this.testStudioManager)
@@ -736,18 +737,20 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
     it('passes onStudioInit callback with AI enabled and a protocol manager', async function () {
       const mockSetupProtocol = sinon.stub()
       const mockBeforeSpec = sinon.stub()
-      const mockAccessStudioLLM = sinon.stub().resolves(true)
-      const mockSetProtocolDb = sinon.stub()
+      const mockAccessStudioAI = sinon.stub().resolves(true)
+      const mockSetProtocolDbPath = sinon.stub()
+      const mockInitializeStudioAI = sinon.stub().resolves()
 
       this.project.spec = {}
       this.project.ctx.coreData.studio = {
-        canAccessStudioAI: mockAccessStudioLLM,
+        canAccessStudioAI: mockAccessStudioAI,
         protocolManager: {
           setupProtocol: mockSetupProtocol,
           beforeSpec: mockBeforeSpec,
-          db: { test: 'db' },
+          dbPath: 'test-db-path',
         },
-        setProtocolDb: mockSetProtocolDb,
+        setProtocolDbPath: mockSetProtocolDbPath,
+        initializeStudioAI: mockInitializeStudioAI,
       }
 
       sinon.stub(browsers, 'connectProtocolToBrowser').resolves()
@@ -783,7 +786,7 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
 
       expect(mockSetupProtocol).to.be.calledOnce
       expect(mockBeforeSpec).to.be.calledOnce
-      expect(mockAccessStudioLLM).to.be.calledWith({
+      expect(mockAccessStudioAI).to.be.calledWith({
         family: 'chromium',
         name: 'chrome',
         channel: 'stable',
@@ -796,17 +799,18 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
       })
 
       expect(this.project['_protocolManager']).to.eq(this.project.ctx.coreData.studio.protocolManager)
-      expect(mockSetProtocolDb).to.be.calledWith({ test: 'db' })
+      expect(mockSetProtocolDbPath).to.be.calledWith('test-db-path')
+      expect(mockInitializeStudioAI).to.be.called
     })
 
     it('passes onStudioInit callback with AI enabled but no protocol manager', async function () {
       const mockSetupProtocol = sinon.stub()
       const mockBeforeSpec = sinon.stub()
-      const mockAccessStudioLLM = sinon.stub().resolves(true)
+      const mockAccessStudioAI = sinon.stub().resolves(true)
 
       this.project.spec = {}
       this.project.ctx.coreData.studio = {
-        canAccessStudioAI: mockAccessStudioLLM,
+        canAccessStudioAI: mockAccessStudioAI,
       }
 
       this.project.browser = {
@@ -836,20 +840,20 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
 
       expect(mockSetupProtocol).not.to.be.called
       expect(mockBeforeSpec).not.to.be.called
-      expect(mockAccessStudioLLM).not.to.be.called
+      expect(mockAccessStudioAI).not.to.be.called
 
       expect(browsers.connectProtocolToBrowser).not.to.be.called
       expect(this.project['_protocolManager']).to.be.undefined
     })
 
-    it('passes onStudioInit callback with llm disabled', async function () {
+    it('passes onStudioInit callback with AI disabled', async function () {
       const mockSetupProtocol = sinon.stub()
       const mockBeforeSpec = sinon.stub()
-      const mockAccessStudioLLM = sinon.stub().resolves(false)
+      const mockAccessStudioAI = sinon.stub().resolves(false)
 
       this.project.spec = {}
       this.project.ctx.coreData.studio = {
-        canAccessStudioAI: mockAccessStudioLLM,
+        canAccessStudioAI: mockAccessStudioAI,
         protocolManager: {
           setupProtocol: mockSetupProtocol,
           beforeSpec: mockBeforeSpec,
@@ -887,9 +891,11 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
 
     it('passes onStudioDestroy callback', async function () {
       const mockClose = sinon.stub()
+      const mockDestroy = sinon.stub().resolves()
 
       this.project.ctx.coreData.studio = {
         protocolManager: {},
+        destroy: mockDestroy,
       }
 
       sinon.stub(browsers, 'closeProtocolConnection').resolves()
@@ -928,7 +934,7 @@ This option will not have an effect in Some-other-name. Tests that rely on web s
       })
 
       expect(mockClose).to.be.calledOnce
-
+      expect(mockDestroy).to.be.calledOnce
       expect(this.project['_protocolManager']).to.be.undefined
     })
   })

packages/types/src/protocol.ts

@@ -138,7 +138,7 @@ export interface ProtocolManagerShape extends AppCaptureProtocolCommon {
   uploadCaptureArtifact(artifact: CaptureArtifact): Promise<UploadCaptureArtifactResult | undefined>
   connectToBrowser (cdpClient: CDPClient): Promise<void>
   close (): void
-  db?: Database.Database
+  dbPath?: string
 }
 
 type Response = {

packages/types/src/studio/studio-server-types.ts

@@ -2,7 +2,6 @@
 
 import type { Router } from 'express'
 import type { AxiosInstance } from 'axios'
-import type Database from 'better-sqlite3'
 
 interface RetryOptions {
   maxAttempts: number
@@ -28,12 +27,15 @@ export interface StudioServerOptions {
   studioPath: string
   projectSlug?: string
   cloudApi: StudioCloudApi
+  betterSqlite3Path: string
 }
 
 export interface StudioServerShape {
   initializeRoutes(router: Router): void
   canAccessStudioAI(browser: Cypress.Browser): Promise<boolean>
-  setProtocolDb(database: Database.Database): void
+  setProtocolDbPath(path: string): void
+  initializeStudioAI(): Promise<void>
+  destroy(): Promise<void>
 }
 
 export interface StudioServerDefaultShape {

scripts/binary/binary-cleanup.js

@@ -59,6 +59,8 @@ const getDependencyPathsToKeep = async (buildAppDir) => {
     'node_modules/string-width/index.js',
     'node_modules/proxy-from-env/index.js',
     // end needed deps for geckodriver
+    // better-sqlite3 is needed to be loaded in dynamically in studio
+    'node_modules/better-sqlite3/lib/index.js',
   ]
 
   let entryPoints = new Set([