Persist theme - Reload everything on a disconnect (#3250)

* Reload everything on a disconnect

* fix unit-integration tests

* Further improvements to connection manager; persist theme across reconnects

* Fix up artifactGraph.test

* Actually pass the callback

* Kurt hmmm (#3308)

* kurts attempts

* we're almost sane

* get tests working, praise be

---------

Co-authored-by: 49lf <ircsurfer33@gmail.com>

* typo

---------

Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

src/components/CamToggle.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { EngineCommandManagerEvents } from 'lang/std/engineConnection'
 import { engineCommandManager, sceneInfra } from 'lib/singletons'
 import { throttle, isReducedMotion } from 'lib/utils'
 
@@ -13,9 +14,12 @@ export const CamToggle = () => {
   const [enableRotate, setEnableRotate] = useState(true)
 
   useEffect(() => {
-    engineCommandManager.waitForReady.then(async () => {
-      sceneInfra.camControls.dollyZoom(fov)
-    })
+    engineCommandManager.addEventListener(
+      EngineCommandManagerEvents.SceneReady,
+      async () => {
+        sceneInfra.camControls.dollyZoom(fov)
+      }
+    )
   }, [])
 
   const toggleCamera = () => {

src/components/FileTree.tsx

@@ -176,6 +176,7 @@ const FileTreeItem = ({
       )
       codeManager.writeToFile()
 
+      // Prevent seeing the model built one piece at a time when changing files
       kclManager.isFirstRender = true
       kclManager.executeCode(true).then(() => {
         kclManager.isFirstRender = false

src/components/Loading.tsx

@@ -47,7 +47,7 @@ const Loading = ({ children }: React.PropsWithChildren) => {
         onConnectionStateChange as EventListener
       )
     }
-  }, [])
+  }, [engineCommandManager, engineCommandManager.engineConnection])
 
   useEffect(() => {
     // Don't set long loading time if there's a more severe error

src/components/ModelingMachineProvider.tsx

@@ -78,7 +78,12 @@ import { err, trap } from 'lib/trap'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { modelingMachineEvent } from 'editor/manager'
 import { hasValidFilletSelection } from 'lang/modifyAst/addFillet'
-import { ExportIntent } from 'lang/std/engineConnection'
+import {
+  ExportIntent,
+  EngineConnectionState,
+  EngineConnectionStateType,
+  EngineConnectionEvents,
+} from 'lang/std/engineConnection'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -154,7 +159,10 @@ export const ModelingMachineProvider = ({
             sceneInfra.camControls.syncDirection = 'engineToClient'
 
             store.videoElement?.pause()
+
+            kclManager.isFirstRender = true
             kclManager.executeCode().then(() => {
+              kclManager.isFirstRender = false
               if (engineCommandManager.engineConnection?.idleMode) return
 
               store.videoElement?.play().catch((e) => {
@@ -909,15 +917,19 @@ export const ModelingMachineProvider = ({
     }
   )
 
-  useSetupEngineManager(streamRef, token, {
-    pool: pool,
-    theme: theme.current,
-    highlightEdges: highlightEdges.current,
-    enableSSAO: enableSSAO.current,
+  useSetupEngineManager(
+    streamRef,
     modelingSend,
-    modelingContext: modelingState.context,
-    showScaleGrid: showScaleGrid.current,
-  })
+    modelingState.context,
+    {
+      pool: pool,
+      theme: theme.current,
+      highlightEdges: highlightEdges.current,
+      enableSSAO: enableSSAO.current,
+      showScaleGrid: showScaleGrid.current,
+    },
+    token
+  )
 
   useEffect(() => {
     kclManager.registerExecuteCallback(() => {
@@ -945,17 +957,25 @@ export const ModelingMachineProvider = ({
   }, [modelingState.context.selectionRanges])
 
   useEffect(() => {
-    const offlineCallback = () => {
+    const onConnectionStateChanged = ({ detail }: CustomEvent) => {
       // If we are in sketch mode we need to exit it.
       // TODO: how do i check if we are in a sketch mode, I only want to call
       // this then.
-      modelingSend({ type: 'Cancel' })
+      if (detail.type === EngineConnectionStateType.Disconnecting) {
+        modelingSend({ type: 'Cancel' })
+      }
     }
-    window.addEventListener('offline', offlineCallback)
+    engineCommandManager.engineConnection?.addEventListener(
+      EngineConnectionEvents.ConnectionStateChanged,
+      onConnectionStateChanged as EventListener
+    )
     return () => {
-      window.removeEventListener('offline', offlineCallback)
+      engineCommandManager.engineConnection?.removeEventListener(
+        EngineConnectionEvents.ConnectionStateChanged,
+        onConnectionStateChanged as EventListener
+      )
     }
-  }, [modelingSend])
+  }, [engineCommandManager.engineConnection, modelingSend])
 
   // Allow using the delete key to delete solids
   useHotkeys(['backspace', 'delete', 'del'], () => {

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -64,13 +64,6 @@ export const KclEditorPane = () => {
       : context.app.theme.current
   const { copilotLSP, kclLSP } = useLspContext()
 
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const onlineCallback = () => kclManager.executeCode(true)
-    window.addEventListener('online', onlineCallback)
-    return () => window.removeEventListener('online', onlineCallback)
-  }, [])
-
   // Since these already exist in the editor, we don't need to define them
   // with the wrapper.
   useHotkeys('mod+z', (e) => {

src/components/SettingsAuthProvider.tsx

@@ -191,6 +191,7 @@ export const SettingsAuthProviderBase = ({
               allSettingsIncludesUnitChange ||
               resetSettingsIncludesUnitChange
             ) {
+              // Unit changes requires a re-exec of code
               kclManager.isFirstRender = true
               kclManager.executeCode(true).then(() => {
                 kclManager.isFirstRender = false

src/components/Stream.tsx

@@ -11,21 +11,27 @@ import { sendSelectEventToEngine } from 'lib/selections'
 import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
 import { useAppStream } from 'AppState'
 import {
+  EngineCommandManagerEvents,
   EngineConnectionStateType,
   DisconnectingType,
 } from 'lang/std/engineConnection'
 
+enum StreamState {
+  Playing = 'playing',
+  Paused = 'paused',
+  Resuming = 'resuming',
+  Unset = 'unset',
+}
+
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
-  const [isFirstRender, setIsFirstRender] = useState(kclManager.isFirstRender)
   const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
   const { state, send, context } = useModelingContext()
   const { mediaStream } = useAppStream()
   const { overallState, immediateState } = useNetworkContext()
-  const [isFreezeFrame, setIsFreezeFrame] = useState(false)
-  const [isPaused, setIsPaused] = useState(false)
+  const [streamState, setStreamState] = useState(StreamState.Unset)
 
   const IDLE = settings.context.app.streamIdleMode.current
 
@@ -38,10 +44,7 @@ export const Stream = () => {
       immediateState.type === EngineConnectionStateType.Disconnecting &&
       immediateState.value.type === DisconnectingType.Pause
     ) {
-      setIsPaused(true)
-    }
-    if (immediateState.type === EngineConnectionStateType.Connecting) {
-      setIsPaused(false)
+      setStreamState(StreamState.Paused)
     }
   }, [immediateState])
 
@@ -76,8 +79,11 @@ export const Stream = () => {
     let timeoutIdIdleA: ReturnType<typeof setTimeout> | undefined = undefined
 
     const teardown = () => {
+      // Already paused
+      if (streamState === StreamState.Paused) return
+
       videoRef.current?.pause()
-      setIsFreezeFrame(true)
+      setStreamState(StreamState.Paused)
       sceneInfra.modelingSend({ type: 'Cancel' })
       // Give video time to pause
       window.requestAnimationFrame(() => {
@@ -91,7 +97,7 @@ export const Stream = () => {
         timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
       } else if (!engineCommandManager.engineConnection?.isReady()) {
         clearTimeout(timeoutIdIdleA)
-        engineCommandManager.engineConnection?.connect(true)
+        setStreamState(StreamState.Resuming)
       }
     }
 
@@ -106,10 +112,15 @@ export const Stream = () => {
     let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
 
     const onAnyInput = () => {
-      // Clear both timers
-      clearTimeout(timeoutIdIdleA)
-      clearTimeout(timeoutIdIdleB)
-      timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
+      if (streamState === StreamState.Playing) {
+        // Clear both timers
+        clearTimeout(timeoutIdIdleA)
+        clearTimeout(timeoutIdIdleB)
+        timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
+      }
+      if (streamState === StreamState.Paused) {
+        setStreamState(StreamState.Resuming)
+      }
     }
 
     if (IDLE) {
@@ -124,7 +135,27 @@ export const Stream = () => {
       timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
     }
 
+    const onSceneReady = () => {
+      kclManager.isFirstRender = true
+      setStreamState(StreamState.Playing)
+      kclManager.executeCode(true).then(() => {
+        videoRef.current?.play().catch((e) => {
+          console.warn('Video playing was prevented', e, videoRef.current)
+        })
+        kclManager.isFirstRender = false
+      })
+    }
+
+    engineCommandManager.addEventListener(
+      EngineCommandManagerEvents.SceneReady,
+      onSceneReady
+    )
+
     return () => {
+      engineCommandManager.removeEventListener(
+        EngineCommandManagerEvents.SceneReady,
+        onSceneReady
+      )
       globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
         capture: true,
       })
@@ -152,19 +183,7 @@ export const Stream = () => {
         )
       }
     }
-  }, [IDLE])
-
-  useEffect(() => {
-    setIsFirstRender(kclManager.isFirstRender)
-    if (!kclManager.isFirstRender)
-      setTimeout(() =>
-        // execute in the next event loop
-        videoRef.current?.play().catch((e) => {
-          console.warn('Video playing was prevented', e, videoRef.current)
-        })
-      )
-    setIsFreezeFrame(!kclManager.isFirstRender)
-  }, [kclManager.isFirstRender])
+  }, [IDLE, streamState])
 
   useEffect(() => {
     if (
@@ -288,7 +307,8 @@ export const Stream = () => {
       <ClientSideScene
         cameraControls={settings.context.modeling.mouseControls.current}
       />
-      {isPaused && (
+      {(streamState === StreamState.Paused ||
+        streamState === StreamState.Resuming) && (
         <div className="text-center absolute inset-0">
           <div
             className="flex flex-col items-center justify-center h-screen"
@@ -310,16 +330,19 @@ export const Stream = () => {
                 />
               </svg>
             </div>
-            <p className="text-base mt-2 text-primary bold">Paused</p>
+            <p className="text-base mt-2 text-primary bold">
+              {streamState === StreamState.Paused && 'Paused'}
+              {streamState === StreamState.Resuming && 'Resuming'}
+            </p>
           </div>
         </div>
       )}
-      {(!isNetworkOkay || isLoading || isFirstRender) && !isFreezeFrame && (
+      {(!isNetworkOkay || isLoading || kclManager.isFirstRender) && (
         <div className="text-center absolute inset-0">
           <Loading>
-            {!isNetworkOkay && !isLoading ? (
+            {!isNetworkOkay && !isLoading && !kclManager.isFirstRender ? (
               <span data-testid="loading-stream">Stream disconnected...</span>
-            ) : !isLoading && isFirstRender ? (
+            ) : !isLoading && kclManager.isFirstRender ? (
               <span data-testid="loading-stream">Building scene...</span>
             ) : (
               <span data-testid="loading-stream">Loading stream...</span>

src/hooks/useSetupEngineManager.ts

@@ -4,29 +4,30 @@ import { deferExecution } from 'lib/utils'
 import { Themes } from 'lib/theme'
 import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
 import { useModelingContext } from './useModelingContext'
+import { useNetworkContext } from 'hooks/useNetworkContext'
 import { useAppState, useAppStream } from 'AppState'
+import { SettingsViaQueryString } from 'lib/settings/settingsTypes'
+import {
+  EngineConnectionStateType,
+  EngineConnectionEvents,
+  DisconnectingType,
+} from 'lang/std/engineConnection'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
-  token?: string,
+  modelingSend: ReturnType<typeof useModelingContext>['send'],
+  modelingContext: ReturnType<typeof useModelingContext>['context'],
   settings = {
     pool: null,
     theme: Themes.System,
     highlightEdges: true,
     enableSSAO: true,
-    modelingSend: (() => {}) as any,
-    modelingContext: {} as any,
     showScaleGrid: false,
-  } as {
-    pool: string | null
-    theme: Themes
-    highlightEdges: boolean
-    enableSSAO: boolean
-    modelingSend: ReturnType<typeof useModelingContext>['send']
-    modelingContext: ReturnType<typeof useModelingContext>['context']
-    showScaleGrid: boolean
-  }
+  } as SettingsViaQueryString,
+  token?: string
 ) {
+  const networkContext = useNetworkContext()
+  const { pingPongHealth, immediateState } = networkContext
   const { setAppState } = useAppState()
   const { setMediaStream } = useAppStream()
 
@@ -35,10 +36,10 @@ export function useSetupEngineManager(
   if (settings.pool) {
     // override the pool param (?pool=) to request a specific engine instance
     // from a particular pool.
-    engineCommandManager.pool = settings.pool
+    engineCommandManager.settings.pool = settings.pool
   }
 
-  const startEngineInstance = (restart: boolean = false) => {
+  const startEngineInstance = () => {
     // Load the engine command manager once with the initial width and height,
     // then we do not want to reload it.
     const { width: quadWidth, height: quadHeight } = getDimensions(
@@ -50,14 +51,6 @@ export function useSetupEngineManager(
       setIsStreamReady: (isStreamReady) => setAppState({ isStreamReady }),
       width: quadWidth,
       height: quadHeight,
-      executeCode: () => {
-        // We only want to execute the code here that we already have set.
-        // Nothing else.
-        kclManager.isFirstRender = true
-        return kclManager.executeCode(true).then(() => {
-          kclManager.isFirstRender = false
-        })
-      },
       token,
       settings,
       makeDefaultPlanes: () => {
@@ -67,7 +60,7 @@ export function useSetupEngineManager(
         return modifyGrid(kclManager.engineCommandManager, hidden)
       },
     })
-    settings.modelingSend({
+    modelingSend({
       type: 'Set context',
       data: {
         streamDimensions: {
@@ -90,9 +83,27 @@ export function useSetupEngineManager(
   }, [
     streamRef?.current?.offsetWidth,
     streamRef?.current?.offsetHeight,
-    settings.modelingSend,
+    modelingSend,
   ])
 
+  useEffect(() => {
+    if (pingPongHealth === 'TIMEOUT') {
+      engineCommandManager.tearDown()
+    }
+  }, [pingPongHealth])
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (immediateState.type === EngineConnectionStateType.Disconnected) {
+        engineCommandManager.engineConnection = undefined
+        startEngineInstance()
+      }
+    }, 3000)
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [immediateState])
+
   useEffect(() => {
     const handleResize = deferExecution(() => {
       const { width, height } = getDimensions(
@@ -100,14 +111,14 @@ export function useSetupEngineManager(
         streamRef?.current?.offsetHeight ?? 0
       )
       if (
-        settings.modelingContext.store.streamDimensions.streamWidth !== width ||
-        settings.modelingContext.store.streamDimensions.streamHeight !== height
+        modelingContext.store.streamDimensions.streamWidth !== width ||
+        modelingContext.store.streamDimensions.streamHeight !== height
       ) {
         engineCommandManager.handleResize({
           streamWidth: width,
           streamHeight: height,
         })
-        settings.modelingSend({
+        modelingSend({
           type: 'Set context',
           data: {
             streamDimensions: {
@@ -120,7 +131,7 @@ export function useSetupEngineManager(
     }, 500)
 
     const onOnline = () => {
-      startEngineInstance(true)
+      startEngineInstance()
     }
 
     const onVisibilityChange = () => {
@@ -136,10 +147,18 @@ export function useSetupEngineManager(
     window.document.addEventListener('visibilitychange', onVisibilityChange)
 
     const onAnyInput = () => {
-      if (
+      const isEngineNotReadyOrConnecting =
         !engineCommandManager.engineConnection?.isReady() &&
         !engineCommandManager.engineConnection?.isConnecting()
-      ) {
+
+      const conn = engineCommandManager.engineConnection
+
+      const isStreamPaused =
+        conn?.state.type === EngineConnectionStateType.Disconnecting &&
+        conn?.state.value.type === DisconnectingType.Pause
+
+      if (isEngineNotReadyOrConnecting || isStreamPaused) {
+        engineCommandManager.engineConnection = undefined
         startEngineInstance()
       }
     }
@@ -150,7 +169,6 @@ export function useSetupEngineManager(
     window.document.addEventListener('touchstart', onAnyInput)
 
     const onOffline = () => {
-      kclManager.isFirstRender = true
       engineCommandManager.tearDown()
     }
 

src/lang/KclSingleton.ts

@@ -211,7 +211,6 @@ export class KclManager {
       type: string
     }
   ): Promise<void> {
-    await this?.engineCommandManager?.waitForReady
     const currentExecutionId = executionId || Date.now()
     this._cancelTokens.set(currentExecutionId, false)
 
@@ -301,7 +300,6 @@ export class KclManager {
     codeManager.updateCodeEditor(newCode)
     // Write the file to disk.
     await codeManager.writeToFile()
-    await this?.engineCommandManager?.waitForReady
     this._ast = { ...newAst }
 
     const { logs, errors, programMemory } = await executeAst({

src/lang/std/artifactGraph.test.ts

@@ -14,6 +14,10 @@ import {
 } from './artifactGraph'
 import { err } from 'lib/trap'
 import { engineCommandManager, kclManager } from 'lib/singletons'
+import {
+  EngineCommandManagerEvents,
+  EngineConnectionEvents,
+} from 'lang/std/engineConnection'
 import { CI, VITE_KC_DEV_TOKEN } from 'env'
 import fsp from 'fs/promises'
 import fs from 'fs'
@@ -113,42 +117,44 @@ beforeAll(async () => {
   }
 
   // THESE TEST WILL FAIL without VITE_KC_DEV_TOKEN set in .env.development.local
-  engineCommandManager.start({
-    disableWebRTC: true,
-    token: VITE_KC_DEV_TOKEN,
-    // there does seem to be a minimum resolution, not sure what it is but 256 works ok.
-    width: 256,
-    height: 256,
-    executeCode: () => {},
-    makeDefaultPlanes: () => makeDefaultPlanes(engineCommandManager),
-    setMediaStream: () => {},
-    setIsStreamReady: () => {},
-    modifyGrid: async () => {},
+  await new Promise((resolve) => {
+    engineCommandManager.start({
+      // disableWebRTC: true,
+      token: VITE_KC_DEV_TOKEN,
+      // there does seem to be a minimum resolution, not sure what it is but 256 works ok.
+      width: 256,
+      height: 256,
+      makeDefaultPlanes: () => makeDefaultPlanes(engineCommandManager),
+      setMediaStream: () => {},
+      setIsStreamReady: () => {},
+      modifyGrid: async () => {},
+      callbackOnEngineLiteConnect: async () => {
+        const cacheEntries = Object.entries(codeToWriteCacheFor) as [
+          CodeKey,
+          string
+        ][]
+        const cacheToWriteToFileTemp: Partial<CacheShape> = {}
+        for (const [codeKey, code] of cacheEntries) {
+          const ast = parse(code)
+          if (err(ast)) {
+            console.error(ast)
+            return Promise.reject(ast)
+          }
+          const result = await kclManager.executeAst(ast)
+
+          cacheToWriteToFileTemp[codeKey] = {
+            orderedCommands: engineCommandManager.orderedCommands,
+            responseMap: engineCommandManager.responseMap,
+          }
+        }
+        const cache = JSON.stringify(cacheToWriteToFileTemp)
+
+        await fsp.mkdir(pathStart, { recursive: true })
+        await fsp.writeFile(fullPath, cache)
+        resolve(true)
+      },
+    })
   })
-  await engineCommandManager.waitForReady
-
-  const cacheEntries = Object.entries(codeToWriteCacheFor) as [
-    CodeKey,
-    string
-  ][]
-  const cacheToWriteToFileTemp: Partial<CacheShape> = {}
-  for (const [codeKey, code] of cacheEntries) {
-    const ast = parse(code)
-    if (err(ast)) {
-      console.error(ast)
-      throw ast
-    }
-    await kclManager.executeAst(ast)
-
-    cacheToWriteToFileTemp[codeKey] = {
-      orderedCommands: engineCommandManager.orderedCommands,
-      responseMap: engineCommandManager.responseMap,
-    }
-  }
-  const cache = JSON.stringify(cacheToWriteToFileTemp)
-
-  await fsp.mkdir(pathStart, { recursive: true })
-  await fsp.writeFile(fullPath, cache)
 }, 20_000)
 
 afterAll(() => {

src/lib/coredump.ts

@@ -63,7 +63,7 @@ export class CoreDumpManager {
 
   // Get the backend pool we've requested.
   pool(): string {
-    return this.engineCommandManager.pool || ''
+    return this.engineCommandManager.settings.pool || ''
   }
 
   // Get the os information.

src/lib/routeLoaders.ts

@@ -104,8 +104,12 @@ export const fileLoader: LoaderFunction = async ({
     // the file system and not the editor.
     codeManager.updateCurrentFilePath(current_file_path)
     codeManager.updateCodeStateEditor(code)
+
     // We don't want to call await on execute code since we don't want to block the UI
-    kclManager.executeCode(true)
+    kclManager.isFirstRender = true
+    kclManager.executeCode(true).then(() => {
+      kclManager.isFirstRender = false
+    })
 
     // Set the file system manager to the project path
     // So that WASM gets an updated path for operations

src/lib/settings/settingsTypes.ts

@@ -2,6 +2,15 @@ import { type Models } from '@kittycad/lib'
 import { Setting, settings } from './initialSettings'
 import { AtLeast, PathValue, Paths } from 'lib/types'
 import { CommandArgumentConfig } from 'lib/commandTypes'
+import { Themes } from 'lib/theme'
+
+export interface SettingsViaQueryString {
+  pool: string | null
+  theme: Themes
+  highlightEdges: boolean
+  enableSSAO: boolean
+  showScaleGrid: boolean
+}
 
 export enum UnitSystem {
   Imperial = 'imperial',

src/lib/testHelpers.ts

@@ -1,5 +1,8 @@
 import { Program, ProgramMemory, _executor, SourceRange } from '../lang/wasm'
-import { EngineCommandManager } from 'lang/std/engineConnection'
+import {
+  EngineCommandManager,
+  EngineCommandManagerEvents,
+} from 'lang/std/engineConnection'
 import { EngineCommand } from 'lang/std/artifactGraph'
 import { Models } from '@kittycad/lib'
 import { v4 as uuidv4 } from 'uuid'
@@ -82,7 +85,6 @@ export async function enginelessExecutor(
     setIsStreamReady: () => {},
     setMediaStream: () => {},
   }) as any as EngineCommandManager
-  await mockEngineCommandManager.waitForReady
   mockEngineCommandManager.startNewSession()
   const programMemory = await _executor(ast, pm, mockEngineCommandManager, true)
   await mockEngineCommandManager.waitForAllCommands()
@@ -99,7 +101,6 @@ export async function executor(
     setMediaStream: () => {},
     width: 0,
     height: 0,
-    executeCode: () => {},
     makeDefaultPlanes: () => {
       return new Promise((resolve) => resolve(defaultPlanes))
     },
@@ -107,9 +108,21 @@ export async function executor(
       return new Promise((resolve) => resolve())
     },
   })
-  await engineCommandManager.waitForReady
-  engineCommandManager.startNewSession()
-  const programMemory = await _executor(ast, pm, engineCommandManager, false)
-  await engineCommandManager.waitForAllCommands()
-  return programMemory
+
+  return new Promise((resolve) => {
+    engineCommandManager.addEventListener(
+      EngineCommandManagerEvents.SceneReady,
+      async () => {
+        engineCommandManager.startNewSession()
+        const programMemory = await _executor(
+          ast,
+          pm,
+          engineCommandManager,
+          false
+        )
+        await engineCommandManager.waitForAllCommands()
+        Promise.resolve(programMemory)
+      }
+    )
+  })
 }