Merge branch 'main' into ryanrosello-og/playwright-test-coverage

Also add a new no-visual test for performance testing.

.env.development

@@ -2,7 +2,9 @@ NODE_ENV=development
 DEV=true
 VITE_KC_API_WS_MODELING_URL=wss://api.dev.zoo.dev/ws/modeling/commands
 VITE_KC_API_BASE_URL=https://api.dev.zoo.dev
+BASE_URL=https://api.dev.zoo.dev
 VITE_KC_SITE_BASE_URL=https://dev.zoo.dev
 VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=5000
-VITE_KC_DEV_TOKEN="your token from dev.zoo.dev should go in .env.development.local"
+# ONLY add your token in .env.development.local if you want to skip auth, otherwise this token takes precedence!
+#VITE_KC_DEV_TOKEN="your token from dev.zoo.dev should go in .env.development.local"

.eslintrc

@@ -13,6 +13,8 @@
       "plugin:css-modules/recommended"
     ],
     "rules": {
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-misused-promises": "error",
       "semi": [
         "error",
         "never"
@@ -24,7 +26,6 @@
       {
         "files": ["e2e/**/*.ts"], // Update the pattern based on your file structure
         "rules": {
-          "@typescript-eslint/no-floating-promises": "warn",
           "suggest-no-throw/suggest-no-throw": "off",
           "testing-library/prefer-screen-queries": "off",
           "jest/valid-expect": "off"

.github/workflows/build-test-publish-apps.yml

@@ -44,7 +44,7 @@ jobs:
 
       # TODO: see if we can fetch from main instead if no diff at src/wasm-lib
       - name: Run build:wasm
-        run: "yarn build:wasm${{ env.BUILD_RELEASE == 'true' && '-dev' || ''}}"
+        run: "yarn build:wasm"
 
       - name: Set nightly version
         if: github.event_name == 'schedule'
@@ -52,7 +52,6 @@ jobs:
           VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
 
       # TODO: see if we need to inject updater nightly URL here https://dl.zoo.dev/releases/modeling-app/nightly/last_update.json
-      # TODO: see if we ned to add updater test URL here https://dl.zoo.dev/releases/modeling-app/updater-test/last_update.json
 
       - uses: actions/upload-artifact@v3
         with:
@@ -64,6 +63,17 @@ jobs:
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
+      - name: Prepare electron-builder.yml file for updater test
+        if: ${{ env.CUT_RELEASE_PR == 'true' }}
+        run: |
+          yq -i '.publish[0].url = "https://dl.zoo.dev/releases/modeling-app/updater-test"' electron-builder.yml
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: prepared-files-updater-test
+          path: |
+            electron-builder.yml
+
 
   build-apps:
     needs: [prepare-files]
@@ -81,8 +91,6 @@ jobs:
       CSC_KEY_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
       CSC_KEYCHAIN: ${{ secrets.APPLE_SIGNING_IDENTITY }}
       CSC_FOR_PULL_REQUEST: true
-      TAURI_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-      TAURI_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
       VERSION: ${{ github.event_name == 'schedule' && needs.prepare-files.outputs.version || format('v{0}', needs.prepare-files.outputs.version) }}
       VERSION_NO_V: ${{ needs.prepare-files.outputs.version }}
       WINDOWS_CERTIFICATE_THUMBPRINT: F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D
@@ -142,41 +150,36 @@ jobs:
       - name: List artifacts in out/
         run: ls -R out
 
-      - name: Prepare the tauri update bundles (macOS)
-        if: ${{ env.BUILD_RELEASE && matrix.os == 'macos-14' }}
-        run: |
-          for ARCH in arm64 x64; do
-            TAURI_DIR=out/tauri/$VERSION/macos
-            TEMP_DIR=temp/$ARCH
-            mkdir -p $TAURI_DIR
-            mkdir -p $TEMP_DIR
-            unzip out/*-$ARCH-mac.zip -d $TEMP_DIR
-            tar -czvf "$TAURI_DIR/Zoo Modeling App-$ARCH.app.tar.gz" -C $TEMP_DIR "Zoo Modeling App.app" 
-            yarn tauri signer sign "$TAURI_DIR/Zoo Modeling App-$ARCH.app.tar.gz"
-          done
-          ls -R out
-
-      - name: Prepare the tauri update bundles (Windows)
-        if: ${{ env.BUILD_RELEASE && matrix.os == 'windows-2022' }}
-        run: |
-          $env:TAURI_DIR="out/tauri/${env:VERSION}/nsis"
-          mkdir -p ${env:TAURI_DIR}
-          $env:OUT_FILE="${env:TAURI_DIR}/Zoo Modeling App_${env:VERSION_NO_V}_x64-setup.nsis.zip"
-          7z a -mm=Copy "${env:OUT_FILE}" ./out/*-x64-win.exe
-          yarn tauri signer sign "${env:OUT_FILE}"
-          ls -R out
-
       - uses: actions/upload-artifact@v3
         with:
           name: out-${{ matrix.os }}
           path: |
             out/Zoo*.*
             out/latest*.yml
-            out/tauri
 
       # TODO: add the 'Build for Mac TestFlight (nightly)' stage back
 
-      # TODO: add the updater tests back
+      - uses: actions/download-artifact@v3
+        if: ${{ env.CUT_RELEASE_PR == 'true' }}
+        name: prepared-files-updater-test
+
+      - name: Copy updated electron-builder.yml file for updater test
+        if: ${{ env.CUT_RELEASE_PR == 'true' }}
+        run: |
+          ls -R prepared-files-updater-test
+          cp prepared-files-updater-test/electron-builder.yml electron-builder.yml
+
+      - name: Build the app (updater-test)
+        if: ${{ env.CUT_RELEASE_PR == 'true' }}
+        run: yarn electron-builder --config ${{ env.BUILD_RELEASE && '--publish always' || '' }}
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ env.CUT_RELEASE_PR == 'true' }}
+        with:
+          name: updater-test-${{ matrix.os }}
+          path: |
+            out/Zoo*.*
+            out/latest*.yml
 
 
   publish-apps-release:
@@ -192,8 +195,6 @@ jobs:
       NOTES: ${{ github.event_name == 'release' && github.event.release.body || format('Non-release build, commit {0}', github.sha) }}
       BUCKET_DIR: ${{ github.event_name == 'schedule' && 'dl.kittycad.io/releases/modeling-app/nightly' || 'dl.kittycad.io/releases/modeling-app' }}
       WEBSITE_DIR: ${{ github.event_name == 'schedule' && 'dl.zoo.dev/releases/modeling-app/nightly' || 'dl.zoo.dev/releases/modeling-app' }}
-      BUCKET_DIR_TAURI: 'dl.kittycad.io/releases/modeling-app/tauri-compat'
-      WEBSITE_DIR_TAURI: 'dl.zoo.dev/releases/modeling-app/tauri-compat'
       URL_CODED_NAME: ${{ github.event_name == 'schedule' && 'Zoo%20Modeling%20App%20%28Nightly%29' || 'Zoo%20Modeling%20App' }}
     steps:
       - uses: actions/checkout@v4
@@ -212,7 +213,7 @@ jobs:
         with:
           name: out-ubuntu-22.04
           path: out
-      
+
       - name: Generate the download static endpoint
         run: |
           RELEASE_DIR=https://${WEBSITE_DIR}
@@ -222,8 +223,10 @@ jobs:
             --arg notes "${NOTES}" \
             --arg mac_arm64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-arm64-mac.dmg" \
             --arg mac_x64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-x64-mac.dmg" \
-            --arg windows_arm64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-arm64-win.msi" \
-            --arg windows_x64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-x64-win.msi" \
+            --arg windows_arm64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-arm64-win.exe" \
+            --arg windows_x64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-x64-win.exe" \
+            --arg linux_arm64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-arm64-linux.AppImage" \
+            --arg linux_x64_url "$RELEASE_DIR/${{ env.URL_CODED_NAME }}-${VERSION_NO_V}-x86_64-linux.AppImage" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -235,54 +238,22 @@ jobs:
                 "dmg-x64": {
                   "url": $mac_x64_url
                 },
-                "msi-arm64": {
+                "exe-arm64": {
                   "url": $windows_arm64_url
                 },
-                "msi-x64": {
+                "exe-x64": {
                   "url": $windows_x64_url
+                },
+                "appimage-arm64": {
+                  "url": $linux_arm64_url
+                },
+                "appimage-x64": {
+                  "url": $linux_x64_url
                 }
               }
             }' > last_download.json
             cat last_download.json
 
-      - name: Generate the update static endpoint for tauri
-        run: |
-          TAURI_DIR=out/tauri/$VERSION
-          MAC_ARM64_SIG=`cat $TAURI_DIR/macos/*-arm64.app.tar.gz.sig`
-          MAC_X64_SIG=`cat $TAURI_DIR/macos/*-x64.app.tar.gz.sig`
-          WINDOWS_SIG=`cat $TAURI_DIR/nsis/*.nsis.zip.sig`
-          RELEASE_DIR=https://${WEBSITE_DIR_TAURI}/${VERSION}
-          jq --null-input \
-            --arg version "${VERSION}" \
-            --arg pub_date "${PUB_DATE}" \
-            --arg notes "${NOTES}" \
-            --arg mac_arm64_sig "$MAC_ARM64_SIG" \
-            --arg mac_arm64_url "$RELEASE_DIR/macos/${{ env.URL_CODED_NAME }}-arm64.app.tar.gz" \
-            --arg mac_x64_sig "$MAC_X64_SIG" \
-            --arg mac_x64_url "$RELEASE_DIR/macos/${{ env.URL_CODED_NAME }}-x64.app.tar.gz" \
-            --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/nsis/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64-setup.nsis.zip" \
-            '{
-              "version": $version,
-              "pub_date": $pub_date,
-              "notes": $notes,
-              "platforms": {
-                "darwin-x86_64": {
-                  "signature": $mac_x64_sig,
-                  "url": $mac_x64_url
-                },
-                "darwin-aarch64": {
-                  "signature": $mac_arm64_sig,
-                  "url": $mac_arm64_url
-                },
-                "windows-x86_64": {
-                  "signature": $windows_sig,
-                  "url": $windows_url
-                }
-              }
-            }' > last_update.json
-            cat last_update.json
-
       - name: List artifacts
         run: "ls -R out"
 
@@ -297,7 +268,7 @@ jobs:
           project_id: ${{ env.GOOGLE_CLOUD_PROJECT_ID }}
 
       - name: Upload release files to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.1.3
+        uses: google-github-actions/upload-cloud-storage@v2.2.0
         with:
           path: out
           glob: 'Zoo*'
@@ -305,31 +276,17 @@ jobs:
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload update endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.1.3
+        uses: google-github-actions/upload-cloud-storage@v2.2.0
         with:
           path: out
           glob: 'latest*'
           parent: false
-          destination: ${{ env.BUCKET_DIR }} 
-
-      - name: Upload download endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.1.3
-        with:
-          path: last_download.json
           destination: ${{ env.BUCKET_DIR }}
 
-      - name: Upload release files to public bucket for tauri
-        uses: google-github-actions/upload-cloud-storage@v2.1.1
+      - name: Upload download endpoint to public bucket
+        uses: google-github-actions/upload-cloud-storage@v2.2.0
         with:
-          path: "out/tauri/${{ env.VERSION }}" 
-          glob: '*/Zoo*'
-          parent: false
-          destination: ${{ env.BUCKET_DIR_TAURI }}/${{ env.VERSION }}
-
-      - name: Upload update endpoint to public bucket for tauri
-        uses: google-github-actions/upload-cloud-storage@v2.1.1
-        with:
-          path: last_update.json
+          path: last_download.json
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload release files to Github

.github/workflows/build-test-web.yml

@@ -45,7 +45,7 @@ jobs:
       - run: yarn xstate:typegen
       - run: yarn tsc
       - name: Lint
-        run: yarn eslint --max-warnings 0 src e2e
+        run: yarn eslint --max-warnings 0 src e2e packages/codemirror-lsp-client
 
 
   check-typos:

.github/workflows/cargo-clippy.yml

@@ -28,6 +28,7 @@ jobs:
         dir: ['src/wasm-lib']
     steps:
       - uses: actions/checkout@v4
+      - uses: taiki-e/install-action@just
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:
@@ -41,7 +42,7 @@ jobs:
       - name: Run clippy
         run: |
           cd "${{ matrix.dir }}"
-          cargo clippy --all --tests --benches -- -D warnings
+          just lint
       # If this fails, run "cargo check" to update Cargo.lock,
       # then add Cargo.lock to the PR.
       - name: Check Cargo.lock doesn't need updating

.github/workflows/playwright.yml

@@ -34,7 +34,7 @@ jobs:
               - 'src/wasm-lib/**'
 
   playwright-chrome:
-    timeout-minutes: ${{ matrix.os == 'macos-14' && 60 || 40 }}
+    timeout-minutes: ${{ matrix.os == 'macos-14' && 60 || 50 }}
     strategy:
       fail-fast: false
       matrix:
@@ -232,10 +232,12 @@ jobs:
         exit 0
       env:
         CI: true
+        FAIL_ON_CONSOLE_ERRORS: true
         NODE_ENV: development
         VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
         VITE_KC_SKIP_AUTH: true
         token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
+        GENERATE_PLAYWRIGHT_COVERAGE: true
     - name: send to axiom
       if: always()
       shell: bash
@@ -255,6 +257,18 @@ jobs:
         path: playwright-report/
         retention-days: 30
         overwrite: true
+    - name: Debug artifact name
+      if: ${{ !cancelled() && (success() || failure()) }}
+      run: |
+        echo "Artifact name: playwright-coverage-${{ runner.os }}-${{ matrix.shardIndex }}-${{ github.sha }}"
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() && (success() || failure()) }}
+      with:
+        name: playwright-coverage-${{ runner.os }}-${{ matrix.shardIndex }}-${{ github.sha }}
+        path: "./.nyc_output/*.json"
+        retention-days: 30
+        overwrite: true
+        include-hidden-files: true
 
 
   playwright-electron:
@@ -262,7 +276,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-14]
-    timeout-minutes: 30
+    timeout-minutes: 40
     runs-on: ${{ matrix.os }}
     needs: check-rust-changes
     steps:
@@ -381,7 +395,7 @@ jobs:
                     echo "retried=true" >>$GITHUB_OUTPUT
                     echo "run playwright with last failed tests and retry $retry"
                     if [[ "$IS_UBUNTU" == "true" ]]; then
-                      xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn playwright test --config=playwright.electron.config.ts --grep=@electron || true
+                      xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn playwright test --config=playwright.electron.config.ts --last-failed --grep=@electron || true
                     else
                       yarn playwright test --config=playwright.electron.config.ts --grep=@electron || true
                     fi
@@ -410,10 +424,13 @@ jobs:
         exit 0
       env:
         CI: true
+        FAIL_ON_CONSOLE_ERRORS: true
         NODE_ENV: development
         VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
         VITE_KC_SKIP_AUTH: true
         IS_UBUNTU: ${{ startsWith(matrix.os, 'ubuntu') && 'true' || 'false' }}
+        # TODO set to true, see: https://github.com/KittyCAD/modeling-app/issues/3885
+        GENERATE_PLAYWRIGHT_COVERAGE: false
         #DEBUG: 'pw:browser*'
     - name: send to axiom
       if: ${{ !cancelled() && (success() || failure()) && !startsWith(matrix.os, 'windows') }}
@@ -434,3 +451,59 @@ jobs:
         path: playwright-report/
         retention-days: 30
         overwrite: true
+    # TODO uncomment the following, see: https://github.com/KittyCAD/modeling-app/issues/3885 
+    # - uses: actions/upload-artifact@v4
+    #   if: ${{ always() }}
+    #   with:
+    #     name: playwright-coverage-${{ runner.os }}-${{ github.sha }}
+    #     path: .nyc_output/
+    #     retention-days: 30
+    #     overwrite: true
+
+
+  # only run this job after all shards above have completed
+  # TBC: do we want to separate coverage reports by OS?
+  # the Job below combines both chrome and webkit coverage reports
+  merge-coverage-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [playwright-chrome]
+    # only report on ubuntu (Google chrome) for now
+    # needs: [playwright-ubuntu, playwright-macos]
+
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn
+    - name: Ensure .all_coverage_reports directory exists
+      run: mkdir -p .all_coverage_reports
+    - name: List all artifacts
+      run: |
+        echo "Available artifacts:"
+        gh api -H "Accept: application/vnd.github+json" /repos/${{ github.repository }}/actions/artifacts --jq '.artifacts[].name'
+      env:
+        GH_TOKEN: ${{ github.token }}
+    - name: Download coverage reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: .all_coverage_reports
+        pattern: playwright-coverage-*
+        merge-multiple: true
+
+    - name: Merge all coverage reports from all shards into a single json report
+      run: npx nyc merge .all_coverage_reports ./.nyc_output/coverage.json
+
+    - name: Generate HTML coverage report
+      run: npx nyc report --reporter=html || true
+
+    - name: Upload Convertage HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: coverage-report-${{ github.sha }}
+        path: coverage
+        retention-days: 14

.gitignore

@@ -62,7 +62,7 @@ Mac_App_Distribution.provisionprofile
 src/wasm-lib/pkg
 
 venv
-.vite/
+.nyc_output/*.vite/
 
 # electron
 out/

Makefile

@@ -7,6 +7,14 @@ XSTATE_TYPEGENS := $(wildcard src/machines/*.typegen.ts)
 dev: node_modules public/wasm_lib_bg.wasm $(XSTATE_TYPEGENS)
 	yarn start
 
+# I'm sorry this is so specific to my setup you may as well ignore this.
+# This is so you don't have to deal with electron windows popping up constantly.
+# It should work for you other Linux users.
+lee-electron-test:
+	Xephyr -br -ac -noreset -screen 1200x500 :2 &
+	DISPLAY=:2 NODE_ENV=development PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:4444/ yarn tron:test -g "when using the file tree"
+	killall Xephyr
+
 $(XSTATE_TYPEGENS): $(TS_SRC)
 	yarn xstate typegen 'src/**/*.ts?(x)'
 

README.md

@@ -351,25 +351,6 @@ PS: for the debug panel, the following JSON is useful for snapping the camera
 
 </details>
 
-### Tauri e2e tests
-
-#### Windows (local only until the CI edge version mismatch is fixed)
-
-```
-yarn install
-yarn build:wasm-dev
-cp src/wasm-lib/pkg/wasm_lib_bg.wasm public
-yarn vite build --mode development
-yarn tauri build --debug -b
-$env:KITTYCAD_API_TOKEN="<YOUR_KITTYCAD_API_TOKEN>"
-$env:VITE_KC_API_BASE_URL="https://api.dev.zoo.dev"
-$env:E2E_TAURI_ENABLED="true"
-$env:TS_NODE_COMPILER_OPTIONS='{"module": "commonjs"}'
-$env:E2E_APPLICATION=".\src-tauri\target\debug\Zoo Modeling App.exe"
-Stop-Process -Name msedgedriver
-yarn wdio run wdio.conf.ts
-```
-
 ## KCL
 
 For how to contribute to KCL, [see our KCL README](https://github.com/KittyCAD/modeling-app/tree/main/src/wasm-lib/kcl).

docs/kcl/KNOWN-ISSUES.md

@@ -22,8 +22,3 @@ once fixed in engine will just start working here with no language changes.
 
 - **Chamfers**: Chamfers cannot intersect, you will get an error. Only simple
     chamfer cases work currently.
-
-    Sketching on the chamfered face does not currently work.
-
-- **Shell**: Shell sometimes does not work when arcs or fillets are involved.
-    We are tracking the engine side bug on this.

docs/kcl/index.md

@@ -19,6 +19,7 @@ layout: manual
 * [`angledLineToX`](kcl/angledLineToX)
 * [`angledLineToY`](kcl/angledLineToY)
 * [`arc`](kcl/arc)
+* [`arrayReduce`](kcl/arrayReduce)
 * [`asin`](kcl/asin)
 * [`assert`](kcl/assert)
 * [`assertEqual`](kcl/assertEqual)
@@ -56,6 +57,7 @@ layout: manual
 * [`line`](kcl/line)
 * [`lineTo`](kcl/lineTo)
 * [`ln`](kcl/ln)
+* [`loft`](kcl/loft)
 * [`log`](kcl/log)
 * [`log10`](kcl/log10)
 * [`log2`](kcl/log2)
@@ -63,6 +65,7 @@ layout: manual
 * [`max`](kcl/max)
 * [`min`](kcl/min)
 * [`mm`](kcl/mm)
+* [`offsetPlane`](kcl/offsetPlane)
 * [`patternCircular2d`](kcl/patternCircular2d)
 * [`patternCircular3d`](kcl/patternCircular3d)
 * [`patternLinear2d`](kcl/patternLinear2d)

e2e/playwright/basic-sketch.spec.ts

@@ -8,8 +8,8 @@ import {
   PERSIST_MODELING_CONTEXT,
 } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts

@@ -3,8 +3,8 @@ import { getUtils, setup, tearDown } from './test-utils'
 import { EngineCommand } from 'lang/std/artifactGraph'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/code-pane-and-errors.spec.ts

@@ -12,8 +12,8 @@ import { bracket } from 'lib/exampleKcl'
 import { TEST_CODE_LONG_WITH_ERROR_OUT_OF_VIEW } from './storageStates'
 import fsp from 'fs/promises'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -27,9 +27,19 @@ test.describe('Code pane and errors', () => {
     const u = await getUtils(page)
 
     // Load the app with the working starter code
-    await page.addInitScript((code) => {
-      localStorage.setItem('persistCode', code)
-    }, bracket)
+    await page.addInitScript(() => {
+      localStorage.setItem(
+        'persistCode',
+        `// Extruded Triangle
+const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+  |> line([10, 0], %)
+  |> line([-5, 10], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+const extrude001 = extrude(5, sketch001)`
+      )
+    })
 
     await page.setViewportSize({ width: 1200, height: 500 })
     await u.waitForAuthSkipAppStart()
@@ -55,6 +65,8 @@ test.describe('Code pane and errors', () => {
   test('Opening and closing the code pane will consistently show error diagnostics', async ({
     page,
   }) => {
+    await page.goto('http://localhost:3000')
+
     const u = await getUtils(page)
 
     // Load the app with the working starter code
@@ -80,7 +92,7 @@ test.describe('Code pane and errors', () => {
 
     // Delete a character to break the KCL
     await u.openKclCodePanel()
-    await page.getByText('extrude(').click()
+    await page.getByText('thickness, bracketLeg1Sketch)').click()
     await page.keyboard.press('Backspace')
 
     // Ensure that a badge appears on the button
@@ -91,7 +103,7 @@ test.describe('Code pane and errors', () => {
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
+    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
 
     // Close the code pane
     await codePaneButton.click()
@@ -114,7 +126,7 @@ test.describe('Code pane and errors', () => {
 
     // error text on hover
     await page.hover('.cm-lint-marker-error')
-    await expect(page.getByText('Unexpected token: |').first()).toBeVisible()
+    await expect(page.locator('.cm-tooltip').first()).toBeVisible()
   })
 
   test('When error is not in view you can click the badge to scroll to it', async ({
@@ -261,10 +273,7 @@ test(
 
       await page.getByText('bracket').click()
 
-      await expect(page.getByTestId('loading')).toBeAttached()
-      await expect(page.getByTestId('loading')).not.toBeAttached({
-        timeout: 20_000,
-      })
+      await u.waitForPageLoad()
     })
 
     // If they're open by default, we're not actually testing anything.
@@ -292,16 +301,7 @@ test(
 
       await page.getByText('router-template-slate').click()
 
-      await expect(page.getByTestId('loading')).toBeAttached()
-      await expect(page.getByTestId('loading')).not.toBeAttached({
-        timeout: 20_000,
-      })
-
-      await expect(
-        page.getByRole('button', { name: 'Start Sketch' })
-      ).toBeEnabled({
-        timeout: 20_000,
-      })
+      await u.waitForPageLoad()
     })
 
     await test.step('All panes opened before should be visible', async () => {

e2e/playwright/command-bar-tests.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/copilot-ghost-test.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/desktop-export.spec.ts

@@ -43,12 +43,6 @@ test(
       // open the project
       await page.getByText(`bracket`).click()
 
-      // wait for the project to load
-      await expect(page.getByTestId('loading')).toBeAttached()
-      await expect(page.getByTestId('loading')).not.toBeAttached({
-        timeout: 20_000,
-      })
-
       // expect zero errors in guter
       await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
 
@@ -56,6 +50,12 @@ test(
       const exportButton = page.getByTestId('export-pane-button')
       await expect(exportButton).toBeVisible()
 
+      // Wait for the model to finish loading
+      const modelStateIndicator = page.getByTestId(
+        'model-state-indicator-execution-done'
+      )
+      await expect(modelStateIndicator).toBeVisible({ timeout: 60000 })
+
       const gltfOption = page.getByText('glTF')
       const submitButton = page.getByText('Confirm Export')
       const exportingToastMessage = page.getByText(`Exporting...`)
@@ -104,7 +104,7 @@ test(
             },
             { timeout: 15_000 }
           )
-          .toBe(477327)
+          .toBe(477481)
 
         // clean up output.gltf
         await fsp.rm('output.gltf')

e2e/playwright/editor-tests.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 import { uuidv4 } from 'lib/utils'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/file-tree.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 import * as fsp from 'fs/promises'
 import { getUtils, setup, setupElectron, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -108,11 +108,11 @@ test.describe('when using the file tree to', () => {
     async ({ browser: _ }, testInfo) => {
       const { electronApp, page } = await setupElectron({
         testInfo,
-        folderSetupFn: async () => {},
       })
 
       const {
-        panesOpen,
+        openKclCodePanel,
+        openFilePanel,
         createAndSelectProject,
         pasteCodeInEditor,
         createNewFileAndSelect,
@@ -124,9 +124,9 @@ test.describe('when using the file tree to', () => {
       await page.setViewportSize({ width: 1200, height: 500 })
       page.on('console', console.log)
 
-      await panesOpen(['files', 'code'])
-
       await createAndSelectProject('project-000')
+      await openKclCodePanel()
+      await openFilePanel()
       // File the main.kcl with contents
       const kclCube = await fsp.readFile(
         'src/wasm-lib/tests/executor/inputs/cube.kcl',
@@ -150,6 +150,7 @@ test.describe('when using the file tree to', () => {
         await selectFile(kcl1)
         await editorTextMatches(kclCube)
       })
+      await page.waitForTimeout(500)
 
       await test.step(`Postcondition: ${kcl2} still exists with the original content`, async () => {
         await selectFile(kcl2)
@@ -201,4 +202,78 @@ test.describe('when using the file tree to', () => {
       await electronApp.close()
     }
   )
+
+  test(
+    'loading small file, then large, then back to small',
+    {
+      tag: '@electron',
+    },
+    async ({ browser: _ }, testInfo) => {
+      const { page } = await setupElectron({
+        testInfo,
+      })
+
+      const {
+        panesOpen,
+        createAndSelectProject,
+        pasteCodeInEditor,
+        createNewFile,
+        openDebugPanel,
+        closeDebugPanel,
+        expectCmdLog,
+      } = await getUtils(page, test)
+
+      await page.setViewportSize({ width: 1200, height: 500 })
+      page.on('console', console.log)
+
+      await panesOpen(['files', 'code'])
+      await createAndSelectProject('project-000')
+
+      // Create a small file
+      const kclCube = await fsp.readFile(
+        'src/wasm-lib/tests/executor/inputs/cube.kcl',
+        'utf-8'
+      )
+      // pasted into main.kcl
+      await pasteCodeInEditor(kclCube)
+
+      // Create a large lego file
+      await createNewFile('lego')
+      const legoFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'lego.kcl' }),
+      })
+      await expect(legoFile).toBeVisible({ timeout: 60_000 })
+      await legoFile.click()
+      const kclLego = await fsp.readFile(
+        'src/wasm-lib/tests/executor/inputs/lego.kcl',
+        'utf-8'
+      )
+      await pasteCodeInEditor(kclLego)
+      const mainFile = page.getByRole('listitem').filter({
+        has: page.getByRole('button', { name: 'main.kcl' }),
+      })
+
+      // Open settings and enable the debug panel
+      await page
+        .getByRole('link', {
+          name: 'settings Settings',
+        })
+        .click()
+      await page.locator('#showDebugPanel').getByText('OffOn').click()
+      await page.getByTestId('settings-close-button').click()
+
+      await test.step('swap between small and large files', async () => {
+        await openDebugPanel()
+        // Previously created a file so we need to start back at main.kcl
+        await mainFile.click()
+        await expectCmdLog('[data-message-type="execution-done"]', 60_000)
+        // Click the large file
+        await legoFile.click()
+        // Once it is building, click back to the smaller file
+        await mainFile.click()
+        await expectCmdLog('[data-message-type="execution-done"]', 60_000)
+        await closeDebugPanel()
+      })
+    }
+  )
 })

e2e/playwright/lib/console-error-whitelist.ts

@@ -0,0 +1,270 @@
+export const isErrorWhitelisted = (exception: Error) => {
+  // due to the way webkit/Google Chrome report errors, it was necessary
+  // to whitelist similar errors separately for each project
+  let whitelist: {
+    name: string
+    message: string
+    stack: string
+    foundInSpec: string
+    project: 'webkit' | 'Google Chrome'
+  }[] = [
+    {
+      name: '',
+      message: 'undefined',
+      stack: '',
+      foundInSpec: `e2e/playwright/sketch-tests.spec.ts Existing sketch with bad code delete user's code`,
+      project: 'Google Chrome',
+    },
+    {
+      name: '"{"kind"',
+      message:
+        '"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}"',
+      stack: '',
+      foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
+      project: 'Google Chrome',
+    },
+    {
+      name: '',
+      message: 'false',
+      stack: '',
+      foundInSpec: 'e2e/playwright/testing-segment-overlays.spec.ts',
+      project: 'Google Chrome',
+    },
+    {
+      name: '{"kind"',
+      // eslint-disable-next-line no-useless-escape
+      message: 'no connection to send on',
+      stack: '',
+      foundInSpec: 'e2e/playwright/various.spec.ts',
+      project: 'Google Chrome',
+    },
+    {
+      name: '',
+      message: 'sketchGroup not found',
+      stack: '',
+      foundInSpec:
+        'e2e/playwright/testing-selections.spec.ts Deselecting line tool should mean nothing happens on click',
+      project: 'Google Chrome',
+    },
+    {
+      name: 'engine error',
+      message:
+        '[{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
+      stack: '',
+      foundInSpec:
+        'e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts XY',
+      project: 'Google Chrome',
+    },
+    {
+      name: '',
+      message: 'no connection to send on',
+      stack: '',
+      foundInSpec:
+        'e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts XY',
+      project: 'Google Chrome',
+    },
+    {
+      name: 'RangeError',
+      message: 'Position 160 is out of range for changeset of length 0',
+      stack: `RangeError: Position 160 is out of range for changeset of length 0
+    at _ChangeSet.mapPos (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:756:13)
+    at findSharedChunks (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:3045:49)
+    at _RangeSet.compare (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2840:24)
+    at findChangedDeco (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:3320:12)
+    at DocView.update (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:2774:20)
+    at _EditorView.update (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:7056:30)
+    at DOMObserver.flush (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6621:17)
+    at MutationObserver.<anonymous> (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6322:14)`,
+      foundInSpec: 'e2e/playwright/editor-tests.spec.ts fold gutters work',
+      project: 'Google Chrome',
+    },
+    {
+      name: 'RangeError',
+      message: 'Selection points outside of document',
+      stack: `RangeError: Selection points outside of document
+    +     at checkSelection (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:1453:13)
+    +     at new _Transaction (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2014:7)
+    +     at _Transaction.create (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2022:12)
+    +     at resolveTransaction (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2155:24)
+    +     at _EditorState.update (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2281:12)
+    +     at _EditorView.dispatch (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6988:148)
+    +     at EditorManager.selectRange (http://localhost:3000/src/editor/manager.ts:182:22)
+    +     at AST extrude (http://localhost:3000/src/machines/modelingMachine.ts:828:25)`,
+      foundInSpec: 'e2e/playwright/editor-tests.spec.ts',
+      project: 'Google Chrome',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: "TypeError: null is not an object (evaluating 'sg.value')",
+      stack: `Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'sg.value')
+    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:466:23)
+    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:454:32)
+    at set up draft line without teardown (http://localhost:3000/src/machines/modelingMachine.ts:983:47)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1877:24)
+    at handleAction (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1064:26)
+    at processBlock (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1087:36)
+    at map ([native code]:0:0)
+    at resolveActions (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1109:49)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:3639:37)
+    at provide (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1117:18)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:2452:30)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1831:43)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1659:17)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1643:19)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=0de2e74f:1829:33)
+    at unknown (http://localhost:3000/src/clientSideScene/sceneEntities.ts:263:19)`,
+      foundInSpec: `e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches`,
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: 'false',
+      stack: `Unhandled Promise Rejection: false
+    at unknown (http://localhost:3000/src/clientSideScene/ClientSideSceneComp.tsx:455:78)`,
+      foundInSpec: `e2e/playwright/testing-segment-overlays.spec.ts line-[tagOutsideSketch]`,
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: `TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')`,
+      stack: `    +  stack:Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')
+    +     at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
+      foundInSpec: `e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts`,
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: `null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')`,
+      stack: `Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'programMemory.get(variableDeclarationName).value')
+    at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
+      foundInSpec: `e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches`,
+      project: 'webkit',
+    },
+    {
+      name: 'TypeError',
+      message: `null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')`,
+      stack: `TypeError: null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')
+    at getMaxPrecision (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:9557:71)
+    at WebGLCapabilities (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:9570:39)
+    at initGLContext (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:16993:43)
+    at WebGLRenderer (http://localhost:3000/node_modules/.vite/deps/chunk-DEEFU7IG.js?v=d328572b:17024:18)
+    at SceneInfra (http://localhost:3000/src/clientSideScene/sceneInfra.ts:185:38)
+    at module code (http://localhost:3000/src/lib/singletons.ts:14:41)`,
+      foundInSpec: `e2e/playwright/testing-segment-overlays.spec.ts angledLineToX`,
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message:
+        '{"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}',
+      stack: `Unhandled Promise Rejection: {"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: \`JsValue(undefined)\`"}
+    at unknown (http://localhost:3000/src/lang/std/engineConnection.ts:1245:26)`,
+      foundInSpec:
+        'e2e/playwright/onboarding-tests.spec.ts Click through each onboarding step',
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: 'undefined',
+      stack: '',
+      foundInSpec: `e2e/playwright/sketch-tests.spec.ts Existing sketch with bad code delete user's code`,
+      project: 'webkit',
+    },
+    {
+      name: 'Fetch API cannot load https',
+      message: '/api.dev.zoo.dev/logout due to access control checks.',
+      stack: `Fetch API cannot load https://api.dev.zoo.dev/logout due to access control checks.
+    at goToSignInPage (http://localhost:3000/src/components/SettingsAuthProvider.tsx:229:15)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1877:24)
+    at handleAction (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1064:26)
+    at processBlock (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1087:36)
+    at map (:1:11)
+    at resolveActions (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1109:49)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:3639:37)
+    at provide (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1117:18)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:2452:30)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1831:43)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1659:17)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1643:19)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:1829:33)
+    at unknown (http://localhost:3000/node_modules/.vite/deps/chunk-6FRHHHSJ.js?v=d328572b:2601:23)`,
+      foundInSpec:
+        'e2e/playwright/testing-selections.spec.ts Solids should be select and deletable',
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: 'ReferenceError: Cannot access uninitialized variable.',
+      stack: `Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
+    at setDiagnosticsForCurrentErrors (http://localhost:3000/src/lang/KclSingleton.ts:90:18)
+    at kclErrors (http://localhost:3000/src/lang/KclSingleton.ts:82:40)
+    at safeParse (http://localhost:3000/src/lang/KclSingleton.ts:150:9)
+    at unknown (http://localhost:3000/src/lang/KclSingleton.ts:113:32)`,
+      foundInSpec:
+        'e2e/playwright/testing-segment-overlays.spec.ts angledLineToX',
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message: 'sketchGroup not found',
+      stack: `Unhandled Promise Rejection: sketchGroup not found
+    at unknown (http://localhost:3000/src/machines/modelingMachine.ts:911:49)`,
+      foundInSpec:
+        'e2e/playwright/testing-selections.spec.ts Deselecting line tool should mean nothing happens on click',
+      project: 'webkit',
+    },
+    {
+      name: 'Unhandled Promise Rejection',
+      message:
+        'engine error: [{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
+      stack:
+        'Unhandled Promise Rejection: engine error: [{"error_code":"bad_request","message":"Cannot set the camera position with these values"}]',
+      foundInSpec:
+        'e2e/playwright/testing-camera-movement.spec.ts Zoom should be consistent when exiting or entering sketches',
+      project: 'webkit',
+    },
+    {
+      name: 'SecurityError',
+      stack: `SecurityError:  Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
+     at <anonymous>:13:5
+     at <anonymous>:18:5
+     at <anonymous>:19:7`,
+      message: `Failed to read the 'localStorage' property from 'Window': Access is denied for this document.`,
+      project: 'Google Chrome',
+      foundInSpec: 'e2e/playwright/basic-sketch.spec.ts',
+    },
+    {
+      name: '  - internal_engine',
+      stack: `
+`,
+      message: `Nothing to export`,
+      project: 'Google Chrome',
+      foundInSpec: 'e2e/playwright/regression-tests.spec.ts',
+    },
+    {
+      name: 'SyntaxError',
+      stack: `SyntaxError: Unexpected end of JSON input
+    at crossPlatformFetch (http://localhost:3000/src/lib/crossPlatformFetch.ts:34:31)
+    at async sendTelemetry (http://localhost:3000/src/lib/textToCad.ts:179:3)`,
+      message: `Unexpected end of JSON input`,
+      project: 'Google Chrome',
+      foundInSpec: 'e2e/playwright/text-to-cad-tests.spec.ts',
+    },
+    {
+      name: '{"kind"',
+      stack: ``,
+      message: `engine","sourceRanges":[[0,0]],"msg":"Failed to wait for promise from engine: JsValue(\\"Force interrupt, executionIsStale, new AST requested\\")"}`,
+      project: 'Google Chrome',
+      foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
+    },
+  ]
+
+  const cleanString = (str: string) => str.replace(/[`"]/g, '')
+  const foundItem = whitelist.find(
+    (item) =>
+      cleanString(exception.name) === cleanString(item.name) &&
+      cleanString(exception.message).includes(cleanString(item.message))
+  )
+
+  return foundItem !== undefined
+}

e2e/playwright/projects.spec.ts

@@ -147,9 +147,6 @@ test.describe('Can export from electron app', () => {
         const u = await getUtils(page)
 
         page.on('console', console.log)
-        await electronApp.context().addInitScript(async () => {
-          ;(window as any).playwrightSkipFilePicker = true
-        })
 
         const pointOnModel = { x: 630, y: 280 }
 
@@ -173,10 +170,10 @@ test.describe('Can export from electron app', () => {
           // gray at this pixel means the stream has loaded in the most
           // user way we can verify it (pixel color)
           await expect
-            .poll(() => u.getGreatestPixDiff(pointOnModel, [75, 75, 75]), {
+            .poll(() => u.getGreatestPixDiff(pointOnModel, [85, 85, 85]), {
               timeout: 10_000,
             })
-            .toBeLessThan(10)
+            .toBeLessThan(15)
         })
 
         const exportLocations: Array<Paths> = []
@@ -207,7 +204,7 @@ test.describe('Can export from electron app', () => {
               },
               { timeout: 15_000 }
             )
-            .toBe(477327)
+            .toBe(477481)
 
           // clean up output.gltf
           await fsp.rm('output.gltf')
@@ -495,10 +492,6 @@ test(
 
     await file.click()
 
-    await expect(page.getByTestId('loading')).toBeAttached()
-    await expect(page.getByTestId('loading')).not.toBeAttached({
-      timeout: 20_000,
-    })
     await expect(u.codeLocator).toContainText(
       'A mounting bracket for the Focusrite Scarlett Solo audio interface'
     )
@@ -856,10 +849,10 @@ const extrude001 = extrude(200, sketch001)`)
     // gray at this pixel means the stream has loaded in the most
     // user way we can verify it (pixel color)
     await expect
-      .poll(() => u.getGreatestPixDiff(pointOnModel, [132, 132, 132]), {
+      .poll(() => u.getGreatestPixDiff(pointOnModel, [143, 143, 143]), {
         timeout: 10_000,
       })
-      .toBeLessThan(10)
+      .toBeLessThan(15)
 
     await expect(async () => {
       await page.mouse.move(0, 0, { steps: 5 })
@@ -867,8 +860,8 @@ const extrude001 = extrude(200, sketch001)`)
       await page.mouse.click(pointOnModel.x, pointOnModel.y)
       // check user can interact with model by checking it turns yellow
       await expect
-        .poll(() => u.getGreatestPixDiff(pointOnModel, [176, 180, 132]))
-        .toBeLessThan(10)
+        .poll(() => u.getGreatestPixDiff(pointOnModel, [180, 180, 137]))
+        .toBeLessThan(15)
     }).toPass({ timeout: 40_000, intervals: [1_000] })
 
     await page.getByTestId('app-logo').click()
@@ -942,24 +935,15 @@ test(
 
       await page.getByText('bracket').click()
 
-      await expect(page.getByTestId('loading')).toBeAttached()
-      await expect(page.getByTestId('loading')).not.toBeAttached({
-        timeout: 20_000,
-      })
-
-      await expect(
-        page.getByRole('button', { name: 'Start Sketch' })
-      ).toBeEnabled({
-        timeout: 20_000,
-      })
+      await u.waitForPageLoad()
 
       // gray at this pixel means the stream has loaded in the most
       // user way we can verify it (pixel color)
       await expect
-        .poll(() => u.getGreatestPixDiff(pointOnModel, [75, 75, 75]), {
+        .poll(() => u.getGreatestPixDiff(pointOnModel, [85, 85, 85]), {
           timeout: 10_000,
         })
-        .toBeLessThan(10)
+        .toBeLessThan(15)
     })
 
     await test.step('Clicking the logo takes us back to the projects page / home', async () => {
@@ -976,24 +960,15 @@ test(
 
       await page.getByText('router-template-slate').click()
 
-      await expect(page.getByTestId('loading')).toBeAttached()
-      await expect(page.getByTestId('loading')).not.toBeAttached({
-        timeout: 20_000,
-      })
-
-      await expect(
-        page.getByRole('button', { name: 'Start Sketch' })
-      ).toBeEnabled({
-        timeout: 20_000,
-      })
+      await u.waitForPageLoad()
 
       // gray at this pixel means the stream has loaded in the most
       // user way we can verify it (pixel color)
       await expect
-        .poll(() => u.getGreatestPixDiff(pointOnModel, [132, 132, 132]), {
+        .poll(() => u.getGreatestPixDiff(pointOnModel, [143, 143, 143]), {
           timeout: 10_000,
         })
-        .toBeLessThan(10)
+        .toBeLessThan(15)
     })
 
     await test.step('Opening the router-template project should load the stream', async () => {
@@ -1744,7 +1719,7 @@ test.describe('Renaming in the file tree', () => {
       })
 
       await test.step('Rename the folder', async () => {
-        await page.waitForTimeout(60000)
+        await page.waitForTimeout(2000)
         await folderToRename.click({ button: 'right' })
         await expect(renameMenuItem).toBeVisible()
         await renameMenuItem.click()

e2e/playwright/regression-tests.spec.ts

@@ -11,8 +11,8 @@ import {
 import { TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR } from './storageStates'
 import { bracket } from 'lib/exampleKcl'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -54,6 +54,67 @@ const sketch001 = startSketchAt([-0, -0])
     const crypticErrorText = `ApiError`
     await expect(page.getByText(crypticErrorText).first()).toBeVisible()
   })
+  test('user should not have to press down twice in cmdbar', async ({
+    page,
+  }) => {
+    // because the model has `line([0,0]..` it is valid code, but the model is invalid
+    // regression test for https://github.com/KittyCAD/modeling-app/issues/3251
+    // Since the bad model also found as issue with the artifact graph, which in tern blocked the editor diognostics
+    const u = await getUtils(page)
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch2 = startSketchOn("XY")
+const sketch001 = startSketchAt([-0, -0])
+  |> line([0, 0], %)
+  |> line([-4.84, -5.29], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)`
+      )
+    })
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await page.goto('/')
+    await u.waitForPageLoad()
+
+    await test.step('Check arrow down works', async () => {
+      await page.getByTestId('command-bar-open-button').click()
+
+      await page
+        .getByRole('option', { name: 'floppy disk arrow Export' })
+        .click()
+
+      // press arrow down key twice
+      await page.keyboard.press('ArrowDown')
+      await page.waitForTimeout(100)
+      await page.keyboard.press('ArrowDown')
+
+      // STL is the third option, which makes sense for two arrow downs
+      await expect(page.locator('[data-headlessui-state="active"]')).toHaveText(
+        'STL'
+      )
+
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(200)
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(200)
+    })
+
+    await test.step('Check arrow up works', async () => {
+      // theme in test is dark, which is the second option, which means we can test arrow up
+      await page.getByTestId('command-bar-open-button').click()
+
+      await page.getByText('The overall appearance of the').click()
+
+      await page.keyboard.press('ArrowUp')
+      await page.waitForTimeout(100)
+
+      await expect(page.locator('[data-headlessui-state="active"]')).toHaveText(
+        'light'
+      )
+    })
+  })
   test('executes on load', async ({ page }) => {
     const u = await getUtils(page)
     await page.addInitScript(async () => {
@@ -358,6 +419,7 @@ const sketch001 = startSketchAt([-0, -0])
       await page.addInitScript(
         async ({ code }) => {
           localStorage.setItem('persistCode', code)
+          ;(window as any).playwrightSkipFilePicker = true
         },
         {
           code: bracket,
@@ -393,20 +455,22 @@ const sketch001 = startSketchAt([-0, -0])
       await test.step('The second export is blocked', async () => {
         // Find the toast.
         // Look out for the toast message
-        await expect(exportingToastMessage).toBeVisible()
-        await expect(alreadyExportingToastMessage).toBeVisible()
-
-        await page.waitForTimeout(1000)
+        await Promise.all([
+          expect(exportingToastMessage.first()).toBeVisible(),
+          expect(alreadyExportingToastMessage).toBeVisible(),
+        ])
       })
 
       await test.step('The first export still succeeds', async () => {
-        await expect(exportingToastMessage).not.toBeVisible()
-        await expect(errorToastMessage).not.toBeVisible()
-        await expect(engineErrorToastMessage).not.toBeVisible()
-
-        await expect(successToastMessage).toBeVisible()
-
-        await expect(alreadyExportingToastMessage).not.toBeVisible()
+        await Promise.all([
+          expect(exportingToastMessage).not.toBeVisible({ timeout: 15_000 }),
+          expect(errorToastMessage).not.toBeVisible(),
+          expect(engineErrorToastMessage).not.toBeVisible(),
+          expect(successToastMessage).toBeVisible({ timeout: 15_000 }),
+          expect(alreadyExportingToastMessage).not.toBeVisible({
+            timeout: 15_000,
+          }),
+        ])
       })
     })
 
@@ -419,10 +483,12 @@ const sketch001 = startSketchAt([-0, -0])
       await expect(exportingToastMessage).toBeVisible()
 
       // Expect it to succeed.
-      await expect(exportingToastMessage).not.toBeVisible()
-      await expect(errorToastMessage).not.toBeVisible()
-      await expect(engineErrorToastMessage).not.toBeVisible()
-      await expect(alreadyExportingToastMessage).not.toBeVisible()
+      await Promise.all([
+        expect(exportingToastMessage).not.toBeVisible(),
+        expect(errorToastMessage).not.toBeVisible(),
+        expect(engineErrorToastMessage).not.toBeVisible(),
+        expect(alreadyExportingToastMessage).not.toBeVisible(),
+      ])
 
       await expect(successToastMessage).toBeVisible()
     })

e2e/playwright/sketch-tests.spec.ts

@@ -9,8 +9,8 @@ import {
 } from './test-utils'
 import { uuidv4, roundOff } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 
 import { commonPoints, getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/test-utils.ts

@@ -12,6 +12,7 @@ import { EngineCommand } from 'lang/std/artifactGraph'
 import fsp from 'fs/promises'
 import fsSync from 'fs'
 import { join } from 'path'
+import * as fs from 'fs'
 import pixelMatch from 'pixelmatch'
 import { PNG } from 'pngjs'
 import { Protocol } from 'playwright-core/types/protocol'
@@ -26,7 +27,10 @@ import {
 import * as TOML from '@iarna/toml'
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
 import { SETTINGS_FILE_NAME } from 'lib/constants'
+import { uuidv4 } from 'lib/utils'
+import { isErrorWhitelisted } from './lib/console-error-whitelist'
 import { isArray } from 'lib/utils'
+import { reportRejection } from 'lib/trap'
 
 type TestColor = [number, number, number]
 export const TEST_COLORS = {
@@ -439,46 +443,50 @@ export async function getUtils(page: Page, test_?: typeof test) {
       }
       return maxDiff
     },
-    doAndWaitForImageDiff: (fn: () => Promise<any>, diffCount = 200) =>
-      new Promise(async (resolve) => {
-        await page.screenshot({
-          path: './e2e/playwright/temp1.png',
-          fullPage: true,
-        })
-        await fn()
-        const isImageDiff = async () => {
+    doAndWaitForImageDiff: (fn: () => Promise<unknown>, diffCount = 200) =>
+      new Promise<boolean>((resolve) => {
+        ;(async () => {
           await page.screenshot({
-            path: './e2e/playwright/temp2.png',
+            path: './e2e/playwright/temp1.png',
             fullPage: true,
           })
-          const screenshot1 = PNG.sync.read(
-            await fsp.readFile('./e2e/playwright/temp1.png')
-          )
-          const screenshot2 = PNG.sync.read(
-            await fsp.readFile('./e2e/playwright/temp2.png')
-          )
-          const actualDiffCount = pixelMatch(
-            screenshot1.data,
-            screenshot2.data,
-            null,
-            screenshot1.width,
-            screenshot2.height
-          )
-          return actualDiffCount > diffCount
-        }
-
-        // run isImageDiff every 50ms until it returns true or 5 seconds have passed (100 times)
-        let count = 0
-        const interval = setInterval(async () => {
-          count++
-          if (await isImageDiff()) {
-            clearInterval(interval)
-            resolve(true)
-          } else if (count > 100) {
-            clearInterval(interval)
-            resolve(false)
+          await fn()
+          const isImageDiff = async () => {
+            await page.screenshot({
+              path: './e2e/playwright/temp2.png',
+              fullPage: true,
+            })
+            const screenshot1 = PNG.sync.read(
+              await fsp.readFile('./e2e/playwright/temp1.png')
+            )
+            const screenshot2 = PNG.sync.read(
+              await fsp.readFile('./e2e/playwright/temp2.png')
+            )
+            const actualDiffCount = pixelMatch(
+              screenshot1.data,
+              screenshot2.data,
+              null,
+              screenshot1.width,
+              screenshot2.height
+            )
+            return actualDiffCount > diffCount
           }
-        }, 50)
+
+          // run isImageDiff every 50ms until it returns true or 5 seconds have passed (100 times)
+          let count = 0
+          const interval = setInterval(() => {
+            ;(async () => {
+              count++
+              if (await isImageDiff()) {
+                clearInterval(interval)
+                resolve(true)
+              } else if (count > 100) {
+                clearInterval(interval)
+                resolve(false)
+              }
+            })().catch(reportRejection)
+          }, 50)
+        })().catch(reportRejection)
       }),
     emulateNetworkConditions: async (
       networkOptions: Protocol.Network.emulateNetworkConditionsParameters
@@ -548,13 +556,16 @@ export async function getUtils(page: Page, test_?: typeof test) {
 
     createNewFileAndSelect: async (name: string) => {
       return test?.step(`Create a file named ${name}, select it`, async () => {
+        await openFilePanel(page)
         await page.getByTestId('create-file-button').click()
         await page.getByTestId('file-rename-field').fill(name)
         await page.keyboard.press('Enter')
-        await page
+        const newFile = page
           .locator('[data-testid="file-pane-scroll-container"] button')
           .filter({ hasText: name })
-          .click()
+
+        await expect(newFile).toBeVisible()
+        await newFile.click()
       })
     },
 
@@ -585,6 +596,15 @@ export async function getUtils(page: Page, test_?: typeof test) {
       })
     },
 
+    /**
+     * @deprecated Sorry I don't have time to fix this right now, but runs like
+     * the one linked below show me that setting the open panes in this manner is not reliable.
+     * You can either set `openPanes` as a part of the same initScript we run in setupElectron/setup,
+     * or you can imperatively open the panes with functions like {openKclCodePanel}
+     * (or we can make a general openPane function that takes a paneId).,
+     * but having a separate initScript does not seem to work reliably.
+     * @link https://github.com/KittyCAD/modeling-app/actions/runs/10731890169/job/29762700806?pr=3807#step:20:19553
+     */
     panesOpen: async (paneIds: PaneId[]) => {
       return test?.step(`Setting ${paneIds} panes to be open`, async () => {
         await page.addInitScript(
@@ -798,6 +818,16 @@ export async function tearDown(page: Page, testInfo: TestInfo) {
     uploadThroughput: -1,
   })
 
+  if (process.env.GENERATE_PLAYWRIGHT_COVERAGE) {
+    for (const activePage of page.context().pages()) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await activePage.evaluate(() =>
+        (window as any)?.collectIstanbulCoverage?.(
+          JSON.stringify((window as any).__coverage__)
+        )
+      )
+    }
+  }
   // It seems it's best to give the browser about 3s to close things
   // It's not super reliable but we have no real other choice for now
   await page.waitForTimeout(3000)
@@ -805,7 +835,11 @@ export async function tearDown(page: Page, testInfo: TestInfo) {
 
 // settingsOverrides may need to be augmented to take more generic items,
 // but we'll be strict for now
-export async function setup(context: BrowserContext, page: Page) {
+export async function setup(
+  context: BrowserContext,
+  page: Page,
+  testInfo?: TestInfo
+) {
   await context.addInitScript(
     async ({ token, settingsKey, settings, IS_PLAYWRIGHT_KEY }) => {
       localStorage.clear()
@@ -841,6 +875,32 @@ export async function setup(context: BrowserContext, page: Page) {
       secure: true,
     },
   ])
+
+  if (process.env.GENERATE_PLAYWRIGHT_COVERAGE) {
+    await context.addInitScript(() =>
+      window.addEventListener('beforeunload', () =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any)?.collectIstanbulCoverage?.(
+          JSON.stringify((window as any).__coverage__)
+        )
+      )
+    )
+    const istanbulCLIOutput = join(process.cwd(), '.nyc_output')
+    await fsp.mkdir(istanbulCLIOutput, { recursive: true })
+    await context.exposeFunction(
+      'collectIstanbulCoverage',
+      (coverageJSON: string) => {
+        if (coverageJSON) {
+          fs.writeFileSync(
+            join(istanbulCLIOutput, `playwright_coverage_${uuidv4()}.json`),
+            coverageJSON
+          )
+        }
+      }
+    )
+  }
+
+  failOnConsoleErrors(page, testInfo)
   // kill animations, speeds up tests and reduced flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 
@@ -852,10 +912,12 @@ export async function setupElectron({
   testInfo,
   folderSetupFn,
   cleanProjectDir = true,
+  appSettings,
 }: {
   testInfo: TestInfo
   folderSetupFn?: (projectDirName: string) => Promise<void>
   cleanProjectDir?: boolean
+  appSettings?: Partial<SaveSettingsPayload>
 }) {
   // create or otherwise clear the folder
   const projectDirName = testInfo.outputPath('electron-test-projects-dir')
@@ -889,15 +951,19 @@ export async function setupElectron({
 
   if (cleanProjectDir) {
     const tempSettingsFilePath = join(projectDirName, SETTINGS_FILE_NAME)
-    const settingsOverrides = TOML.stringify({
-      ...TEST_SETTINGS,
-      settings: {
-        app: {
-          ...TEST_SETTINGS.app,
-          projectDirectory: projectDirName,
-        },
-      },
-    })
+    const settingsOverrides = TOML.stringify(
+      appSettings
+        ? { settings: appSettings }
+        : {
+            ...TEST_SETTINGS,
+            settings: {
+              app: {
+                ...TEST_SETTINGS.app,
+                projectDirectory: projectDirName,
+              },
+            },
+          }
+    )
     await fsp.writeFile(tempSettingsFilePath, settingsOverrides)
   }
 
@@ -908,6 +974,48 @@ export async function setupElectron({
   return { electronApp, page, dir: projectDirName }
 }
 
+function failOnConsoleErrors(page: Page, testInfo?: TestInfo) {
+  // enabled for chrome for now
+  if (page.context().browser()?.browserType().name() === 'chromium') {
+    page.on('pageerror', (exception) => {
+      if (isErrorWhitelisted(exception)) {
+        return
+      }
+
+      // only set this env var to false if you want to collect console errors
+      // This can be configured in the GH workflow.  This should be set to true by default (we want tests to fail when
+      // unwhitelisted console errors are detected).
+      if (process.env.FAIL_ON_CONSOLE_ERRORS === 'true') {
+        // Fail when running on CI and FAIL_ON_CONSOLE_ERRORS is set
+        // use expect to prevent page from closing and not cleaning up
+        expect(`An error was detected in the console: \r\n message:${exception.message} \r\n name:${exception.name} \r\n stack:${exception.stack}
+          
+          *Either fix the console error or add it to the whitelist defined in ./lib/console-error-whitelist.ts (if the error can be safely ignored)       
+          `).toEqual('Console error detected')
+      } else {
+        // the (test-results/exceptions.txt) file will be uploaded as part of an upload artifact in GH
+        fsp
+          .appendFile(
+            './test-results/exceptions.txt',
+            [
+              '~~~',
+              `triggered_by_test:${
+                testInfo?.file + ' ' + (testInfo?.title || ' ')
+              }`,
+              `name:${exception.name}`,
+              `message:${exception.message}`,
+              `stack:${exception.stack}`,
+              `project:${testInfo?.project.name}`,
+              '~~~',
+            ].join('\n')
+          )
+          .catch((err) => {
+            console.error(err)
+          })
+      }
+    })
+  }
+}
 export async function isOutOfViewInScrollContainer(
   element: Locator,
   container: Locator

e2e/playwright/testing-camera-movement.spec.ts

@@ -3,8 +3,8 @@ import { EngineCommand } from 'lang/std/artifactGraph'
 import { uuidv4 } from 'lib/utils'
 import { getUtils, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -12,8 +12,8 @@ test.afterEach(async ({ page }, testInfo) => {
 })
 
 test.describe('Testing Camera Movement', () => {
-  test('Can moving camera', async ({ page, context }) => {
-    test.skip(process.platform === 'darwin', 'Can moving camera')
+  test('Can move camera reliably', async ({ page, context }) => {
+    test.skip(process.platform === 'darwin', 'Can move camera reliably')
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
 
@@ -102,6 +102,13 @@ test.describe('Testing Camera Movement', () => {
     await bakeInRetries(async () => {
       await page.mouse.move(700, 200)
       await page.mouse.down({ button: 'right' })
+      const appLogoBBox = await page.getByTestId('app-logo').boundingBox()
+      expect(appLogoBBox).not.toBeNull()
+      if (!appLogoBBox) throw new Error('app logo not found')
+      await page.mouse.move(
+        appLogoBBox.x + appLogoBBox.width / 2,
+        appLogoBBox.y + appLogoBBox.height / 2
+      )
       await page.mouse.move(600, 303)
       await page.mouse.up({ button: 'right' })
     }, [4, -10.5, -120])
@@ -295,11 +302,11 @@ test.describe('Testing Camera Movement', () => {
     await expect(
       page.getByRole('button', { name: 'Edit Sketch' })
     ).toBeVisible()
+    await hoverOverNothing()
     await page.getByRole('button', { name: 'Edit Sketch' }).click()
 
     await page.waitForTimeout(400)
 
-    await hoverOverNothing()
     x = 975
     y = 468
 

e2e/playwright/testing-constraints.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 import { getUtils, setup, tearDown, TEST_COLORS } from './test-utils'
 import { XOR } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/testing-gizmo.spec.ts

@@ -4,8 +4,8 @@ import { getUtils, setup, tearDown } from './test-utils'
 import { uuidv4 } from 'lib/utils'
 import { TEST_CODE_GIZMO } from './storageStates'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/testing-segment-overlays.spec.ts

@@ -4,8 +4,8 @@ import { deg, getUtils, setup, tearDown, wiggleMove } from './test-utils'
 import { LineInputsType } from 'lang/std/sketchcombos'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

e2e/playwright/testing-selections.spec.ts

@@ -5,8 +5,8 @@ import { Coords2d } from 'lang/std/sketch'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
 import { uuidv4 } from 'lib/utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -31,8 +31,18 @@ test.describe('Testing selections', () => {
 
     const xAxisClick = () =>
       page.mouse.click(700, 253).then(() => page.waitForTimeout(100))
+    const emptySpaceHover = () =>
+      test.step('Hover over empty space', async () => {
+        await page.mouse.move(700, 143, { steps: 5 })
+        await expect(page.locator('.hover-highlight')).not.toBeVisible()
+      })
     const emptySpaceClick = () =>
-      page.mouse.click(700, 343).then(() => page.waitForTimeout(100))
+      test.step(`Click in empty space`, async () => {
+        await page.mouse.click(700, 143)
+        await expect(page.locator('.cm-line').last()).toHaveClass(
+          /cm-activeLine/
+        )
+      })
     const topHorzSegmentClick = () =>
       page.mouse.click(709, 290).then(() => page.waitForTimeout(100))
     const bottomHorzSegmentClick = () =>
@@ -171,7 +181,9 @@ test.describe('Testing selections', () => {
       await emptySpaceClick()
     }
 
-    await selectionSequence()
+    await test.step(`Test hovering and selecting on fresh sketch`, async () => {
+      await selectionSequence()
+    })
 
     // hovering in fresh sketch worked, lets try exiting and re-entering
     await u.openAndClearDebugPanel()
@@ -184,16 +196,15 @@ test.describe('Testing selections', () => {
 
     // select a line, this verifies that sketches in the scene can be selected outside of sketch mode
     await topHorzSegmentClick()
-    await page.waitForTimeout(100)
+    await emptySpaceHover()
 
     // enter sketch again
     await u.doAndWaitForCmd(
       () => page.getByRole('button', { name: 'Edit Sketch' }).click(),
       'default_camera_get_settings'
     )
-    await page.waitForTimeout(150)
 
-    await page.waitForTimeout(300) // wait for animation
+    await page.waitForTimeout(450) // wait for animation
 
     await u.openAndClearDebugPanel()
     await u.sendCustomCmd({
@@ -220,8 +231,9 @@ test.describe('Testing selections', () => {
 
     await u.closeDebugPanel()
 
-    // hover again and check it works
-    await selectionSequence()
+    await test.step(`Test hovering and selecting on edited sketch`, async () => {
+      await selectionSequence()
+    })
   })
 
   test('Solids should be select and deletable', async ({ page }) => {
@@ -773,9 +785,9 @@ const extrude001 = extrude(50, sketch001)
 
     await page.waitForTimeout(1000)
 
-    let noHoverColor: [number, number, number] = [82, 82, 82]
-    let hoverColor: [number, number, number] = [116, 116, 116]
-    let selectColor: [number, number, number] = [144, 148, 97]
+    let noHoverColor: [number, number, number] = [92, 92, 92]
+    let hoverColor: [number, number, number] = [127, 127, 127]
+    let selectColor: [number, number, number] = [155, 155, 105]
 
     const extrudeWall = { x: 670, y: 275 }
     const extrudeText = `line([170.36, -121.61], %, $seg01)`
@@ -787,7 +799,7 @@ const extrude001 = extrude(50, sketch001)
 
     await expect
       .poll(() => u.getGreatestPixDiff(extrudeWall, noHoverColor))
-      .toBeLessThan(5)
+      .toBeLessThan(15)
     await page.mouse.move(nothing.x, nothing.y)
     await page.waitForTimeout(100)
     await page.mouse.move(extrudeWall.x, extrudeWall.y)
@@ -798,43 +810,43 @@ const extrude001 = extrude(50, sketch001)
     await page.waitForTimeout(200)
     await expect(
       await u.getGreatestPixDiff(extrudeWall, hoverColor)
-    ).toBeLessThan(6)
+    ).toBeLessThan(15)
     await page.mouse.click(extrudeWall.x, extrudeWall.y)
     await expect(page.locator('.cm-activeLine')).toHaveText(`|> ${extrudeText}`)
     await page.waitForTimeout(200)
     await expect(
       await u.getGreatestPixDiff(extrudeWall, selectColor)
-    ).toBeLessThan(6)
+    ).toBeLessThan(15)
     await page.waitForTimeout(1000)
     // check color stays there, i.e. not overridden (this was a bug previously)
     await expect(
       await u.getGreatestPixDiff(extrudeWall, selectColor)
-    ).toBeLessThan(6)
+    ).toBeLessThan(15)
 
     await page.mouse.move(nothing.x, nothing.y)
     await page.waitForTimeout(300)
     await expect(page.getByTestId('hover-highlight')).not.toBeVisible()
 
     // because of shading, color is not exact everywhere on the face
-    noHoverColor = [104, 104, 104]
-    hoverColor = [134, 134, 134]
-    selectColor = [158, 162, 110]
+    noHoverColor = [115, 115, 115]
+    hoverColor = [145, 145, 145]
+    selectColor = [168, 168, 120]
 
-    await expect(await u.getGreatestPixDiff(cap, noHoverColor)).toBeLessThan(6)
+    await expect(await u.getGreatestPixDiff(cap, noHoverColor)).toBeLessThan(15)
     await page.mouse.move(cap.x, cap.y)
     await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
     await expect(page.getByTestId('hover-highlight').first()).toContainText(
       removeAfterFirstParenthesis(capText)
     )
     await page.waitForTimeout(200)
-    await expect(await u.getGreatestPixDiff(cap, hoverColor)).toBeLessThan(6)
+    await expect(await u.getGreatestPixDiff(cap, hoverColor)).toBeLessThan(15)
     await page.mouse.click(cap.x, cap.y)
     await expect(page.locator('.cm-activeLine')).toHaveText(`|> ${capText}`)
     await page.waitForTimeout(200)
-    await expect(await u.getGreatestPixDiff(cap, selectColor)).toBeLessThan(6)
+    await expect(await u.getGreatestPixDiff(cap, selectColor)).toBeLessThan(15)
     await page.waitForTimeout(1000)
     // check color stays there, i.e. not overridden (this was a bug previously)
-    await expect(await u.getGreatestPixDiff(cap, selectColor)).toBeLessThan(6)
+    await expect(await u.getGreatestPixDiff(cap, selectColor)).toBeLessThan(15)
   })
   test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
     page,

e2e/playwright/testing-settings.spec.ts

@@ -8,12 +8,16 @@ import {
   tearDown,
   executorInputPath,
 } from './test-utils'
-import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { TEST_SETTINGS_KEY, TEST_SETTINGS_CORRUPTED } from './storageStates'
+import { SaveSettingsPayload, SettingsLevel } from 'lib/settings/settingsTypes'
+import {
+  TEST_SETTINGS_KEY,
+  TEST_SETTINGS_CORRUPTED,
+  TEST_SETTINGS,
+} from './storageStates'
 import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {
@@ -154,29 +158,33 @@ test.describe('Testing settings', () => {
 
   test('Project and user settings can be reset', async ({ page }) => {
     const u = await getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await u.waitForAuthSkipAppStart()
-    await page
-      .getByRole('button', { name: 'Start Sketch' })
-      .waitFor({ state: 'visible' })
+    await test.step(`Setup`, async () => {
+      await page.setViewportSize({ width: 1200, height: 500 })
+      await u.waitForAuthSkipAppStart()
+    })
 
+    // Selectors and constants
     const projectSettingsTab = page.getByRole('radio', { name: 'Project' })
     const userSettingsTab = page.getByRole('radio', { name: 'User' })
-    const resetButton = page.getByRole('button', {
-      name: 'Restore default settings',
-    })
+    const resetButton = (level: SettingsLevel) =>
+      page.getByRole('button', {
+        name: `Reset ${level}-level settings`,
+      })
     const themeColorSetting = page.locator('#themeColor').getByRole('slider')
     const settingValues = {
       default: '259',
       user: '120',
       project: '50',
     }
+    const resetToast = (level: SettingsLevel) =>
+      page.getByText(`${level}-level settings were reset`)
 
-    // Open the settings modal with lower-right button
-    await page.getByRole('link', { name: 'Settings' }).last().click()
-    await expect(
-      page.getByRole('heading', { name: 'Settings', exact: true })
-    ).toBeVisible()
+    await test.step(`Open the settings modal`, async () => {
+      await page.getByRole('link', { name: 'Settings' }).last().click()
+      await expect(
+        page.getByRole('heading', { name: 'Settings', exact: true })
+      ).toBeVisible()
+    })
 
     await test.step('Set up theme color', async () => {
       // Verify we're looking at the project-level settings,
@@ -195,37 +203,40 @@ test.describe('Testing settings', () => {
 
     await test.step('Reset project settings', async () => {
       // Click the reset settings button.
-      await resetButton.click()
+      await resetButton('project').click()
 
-      await expect(page.getByText('Settings restored to default')).toBeVisible()
-      await expect(
-        page.getByText('Settings restored to default')
-      ).not.toBeVisible()
+      await expect(resetToast('project')).toBeVisible()
+      await expect(resetToast('project')).not.toBeVisible()
 
       // Verify it is now set to the inherited user value
-      await expect(themeColorSetting).toHaveValue(settingValues.default)
+      await expect(themeColorSetting).toHaveValue(settingValues.user)
 
-      // Check that the user setting also rolled back
-      await userSettingsTab.click()
-      await expect(themeColorSetting).toHaveValue(settingValues.default)
-      await projectSettingsTab.click()
+      await test.step(`Check that the user settings did not change`, async () => {
+        await userSettingsTab.click()
+        await expect(themeColorSetting).toHaveValue(settingValues.user)
+      })
 
-      // Set project-level value to 50 again to test the user-level reset
-      await themeColorSetting.fill(settingValues.project)
-      await userSettingsTab.click()
+      await test.step(`Set project-level again to test the user-level reset`, async () => {
+        await projectSettingsTab.click()
+        await themeColorSetting.fill(settingValues.project)
+        await userSettingsTab.click()
+      })
     })
 
     await test.step('Reset user settings', async () => {
-      // Change the setting and click the reset settings button.
-      await themeColorSetting.fill(settingValues.user)
-      await resetButton.click()
+      // Click the reset settings button.
+      await resetButton('user').click()
+
+      await expect(resetToast('user')).toBeVisible()
+      await expect(resetToast('user')).not.toBeVisible()
 
       // Verify it is now set to the default value
       await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-      // Check that the project setting also changed
-      await projectSettingsTab.click()
-      await expect(themeColorSetting).toHaveValue(settingValues.default)
+      await test.step(`Check that the project settings did not change`, async () => {
+        await projectSettingsTab.click()
+        await expect(themeColorSetting).toHaveValue(settingValues.project)
+      })
     })
   })
 
@@ -288,7 +299,7 @@ test.describe('Testing settings', () => {
       })
 
       await test.step('Refresh the application and see project setting applied', async () => {
-        await page.reload()
+        await page.reload({ waitUntil: 'domcontentloaded' })
 
         await expect(logoLink).toHaveCSS('--primary-hue', projectThemeColor)
         await settingsCloseButton.click()
@@ -303,53 +314,109 @@ test.describe('Testing settings', () => {
     }
   )
 
+  test(
+    `Load desktop app with no settings file`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        // This is what makes no settings file get created
+        cleanProjectDir: false,
+        testInfo,
+      })
+
+      await page.setViewportSize({ width: 1200, height: 500 })
+
+      // Selectors and constants
+      const errorHeading = page.getByRole('heading', {
+        name: 'An unextected error occurred',
+      })
+      const projectDirLink = page.getByText('Loaded from')
+
+      // If the app loads without exploding we're in the clear
+      await expect(errorHeading).not.toBeVisible()
+      await expect(projectDirLink).toBeVisible()
+
+      await electronApp.close()
+    }
+  )
+
+  test(
+    `Load desktop app with a settings file, but no project directory setting`,
+    { tag: '@electron' },
+    async ({ browser: _ }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        appSettings: {
+          app: {
+            themeColor: '259',
+          },
+        },
+      })
+
+      await page.setViewportSize({ width: 1200, height: 500 })
+
+      // Selectors and constants
+      const errorHeading = page.getByRole('heading', {
+        name: 'An unextected error occurred',
+      })
+      const projectDirLink = page.getByText('Loaded from')
+
+      // If the app loads without exploding we're in the clear
+      await expect(errorHeading).not.toBeVisible()
+      await expect(projectDirLink).toBeVisible()
+
+      await electronApp.close()
+    }
+  )
+
   test(
     `Closing settings modal should go back to the original file being viewed`,
     { tag: '@electron' },
     async ({ browser: _ }, testInfo) => {
       const { electronApp, page } = await setupElectron({
         testInfo,
-        folderSetupFn: async () => {},
+        folderSetupFn: async (dir) => {
+          const bracketDir = join(dir, 'project-000')
+          await fsp.mkdir(bracketDir, { recursive: true })
+          await fsp.copyFile(
+            executorInputPath('cube.kcl'),
+            join(bracketDir, 'main.kcl')
+          )
+          await fsp.copyFile(
+            executorInputPath('cylinder.kcl'),
+            join(bracketDir, '2.kcl')
+          )
+        },
       })
+      const kclCube = await fsp.readFile(executorInputPath('cube.kcl'), 'utf-8')
+      const kclCylinder = await fsp.readFile(
+        executorInputPath('cylinder.kcl'),
+        'utf8'
+      )
 
       const {
-        panesOpen,
-        createAndSelectProject,
-        pasteCodeInEditor,
-        clickPane,
-        createNewFileAndSelect,
+        openKclCodePanel,
+        openFilePanel,
+        waitForPageLoad,
+        selectFile,
         editorTextMatches,
       } = await getUtils(page, test)
 
       await page.setViewportSize({ width: 1200, height: 500 })
       page.on('console', console.log)
 
-      await panesOpen([])
-
-      await test.step('Precondition: No projects exist', async () => {
+      await test.step('Precondition: Open to second project file', async () => {
         await expect(page.getByTestId('home-section')).toBeVisible()
-        const projectLinksPre = page.getByTestId('project-link')
-        await expect(projectLinksPre).toHaveCount(0)
+        await page.getByText('project-000').click()
+        await waitForPageLoad()
+        await openKclCodePanel()
+        await openFilePanel()
+        await editorTextMatches(kclCube)
+
+        await selectFile('2.kcl')
+        await editorTextMatches(kclCylinder)
       })
 
-      await createAndSelectProject('project-000')
-
-      await clickPane('code')
-      const kclCube = await fsp.readFile(
-        'src/wasm-lib/tests/executor/inputs/cube.kcl',
-        'utf-8'
-      )
-      await pasteCodeInEditor(kclCube)
-
-      await clickPane('files')
-      await createNewFileAndSelect('2.kcl')
-
-      const kclCylinder = await fsp.readFile(
-        'src/wasm-lib/tests/executor/inputs/cylinder.kcl',
-        'utf-8'
-      )
-      await pasteCodeInEditor(kclCylinder)
-
       const settingsOpenButton = page.getByRole('link', {
         name: 'settings Settings',
       })
@@ -357,6 +424,9 @@ test.describe('Testing settings', () => {
 
       await test.step('Open and close settings', async () => {
         await settingsOpenButton.click()
+        await expect(
+          page.getByRole('heading', { name: 'Settings', exact: true })
+        ).toBeVisible()
         await settingsCloseButton.click()
       })
 
@@ -370,25 +440,37 @@ test.describe('Testing settings', () => {
 
   test('Changing modeling default unit', async ({ page }) => {
     const u = await getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await u.waitForAuthSkipAppStart()
-    await page
-      .getByRole('button', { name: 'Start Sketch' })
-      .waitFor({ state: 'visible' })
-
-    const userSettingsTab = page.getByRole('radio', { name: 'User' })
-
-    // Open the settings modal with lower-right button
-    await page.getByRole('link', { name: 'Settings' }).last().click()
-    await expect(
-      page.getByRole('heading', { name: 'Settings', exact: true })
-    ).toBeVisible()
-
-    const resetButton = page.getByRole('button', {
-      name: 'Restore default settings',
+    await test.step(`Test setup`, async () => {
+      await page.setViewportSize({ width: 1200, height: 500 })
+      await u.waitForAuthSkipAppStart()
+      await page
+        .getByRole('button', { name: 'Start Sketch' })
+        .waitFor({ state: 'visible' })
+    })
+
+    // Selectors and constants
+    const userSettingsTab = page.getByRole('radio', { name: 'User' })
+    const projectSettingsTab = page.getByRole('radio', { name: 'Project' })
+    const defaultUnitSection = page.getByText(
+      'default unitRoll back default unitRoll back to match'
+    )
+    const defaultUnitRollbackButton = page.getByRole('button', {
+      name: 'Roll back default unit',
+    })
+
+    await test.step(`Open the settings modal`, async () => {
+      await page.getByRole('link', { name: 'Settings' }).last().click()
+      await expect(
+        page.getByRole('heading', { name: 'Settings', exact: true })
+      ).toBeVisible()
+    })
+
+    await test.step(`Reset unit setting`, async () => {
+      await userSettingsTab.click()
+      await defaultUnitSection.hover()
+      await defaultUnitRollbackButton.click()
+      await projectSettingsTab.click()
     })
-    // Default unit should be mm
-    await resetButton.click()
 
     await test.step('Change modeling default unit within project tab', async () => {
       const changeUnitOfMeasureInProjectTab = async (unitOfMeasure: string) => {
@@ -493,4 +575,148 @@ test.describe('Testing settings', () => {
       await changeUnitOfMeasureInGizmo('m', 'Meters')
     })
   })
+
+  test('Changing theme in sketch mode', async ({ page }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(() => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0, 0], %)
+  |> line([5, 0], %)
+  |> line([0, 5], %)
+  |> line([-5, 0], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+const extrude001 = extrude(5, sketch001)
+`
+      )
+    })
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    // Selectors and constants
+    const editSketchButton = page.getByRole('button', { name: 'Edit Sketch' })
+    const lineToolButton = page.getByTestId('line')
+    const segmentOverlays = page.getByTestId('segment-overlay')
+    const sketchOriginLocation = { x: 600, y: 250 }
+    const darkThemeSegmentColor: [number, number, number] = [215, 215, 215]
+    const lightThemeSegmentColor: [number, number, number] = [90, 90, 90]
+
+    await test.step(`Get into sketch mode`, async () => {
+      await u.waitForAuthSkipAppStart()
+      await page.mouse.click(700, 200)
+      await expect(editSketchButton).toBeVisible()
+      await editSketchButton.click()
+
+      // We use the line tool as a proxy for sketch mode
+      await expect(lineToolButton).toBeVisible()
+      await expect(segmentOverlays).toHaveCount(4)
+      // but we allow more time to pass for animating to the sketch
+      await page.waitForTimeout(1000)
+    })
+
+    await test.step(`Check the sketch line color before`, async () => {
+      await expect
+        .poll(() =>
+          u.getGreatestPixDiff(sketchOriginLocation, darkThemeSegmentColor)
+        )
+        .toBeLessThan(15)
+    })
+
+    await test.step(`Change theme to light using command palette`, async () => {
+      await page.keyboard.press('ControlOrMeta+K')
+      await page.getByRole('option', { name: 'theme' }).click()
+      await page.getByRole('option', { name: 'light' }).click()
+      await expect(page.getByText('theme to "light"')).toBeVisible()
+
+      // Make sure we haven't left sketch mode
+      await expect(lineToolButton).toBeVisible()
+    })
+
+    await test.step(`Check the sketch line color after`, async () => {
+      await expect
+        .poll(() =>
+          u.getGreatestPixDiff(sketchOriginLocation, lightThemeSegmentColor)
+        )
+        .toBeLessThan(15)
+    })
+  })
+
+  test(`Turning off "Show debug panel" with debug panel open leaves no phantom panel`, async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+
+    // Override beforeEach test setup
+    // with debug panel open
+    // but "show debug panel" set to false
+    await page.addInitScript(
+      async ({ settingsKey, settings }) => {
+        localStorage.setItem(settingsKey, settings)
+        localStorage.setItem(
+          'persistModelingContext',
+          '{"openPanes":["debug"]}'
+        )
+      },
+      {
+        settingsKey: TEST_SETTINGS_KEY,
+        settings: TOML.stringify({
+          settings: {
+            ...TEST_SETTINGS,
+            modeling: { ...TEST_SETTINGS.modeling, showDebugPanel: false },
+          },
+        }),
+      }
+    )
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    // Constants and locators
+    const resizeHandle = page.locator('.sidebar-resize-handles > div.block')
+    const debugPaneButton = page.getByTestId('debug-pane-button')
+    const commandsButton = page.getByRole('button', { name: 'Commands' })
+    const debugPaneOption = page.getByRole('option', {
+      name: 'Settings · modeling · show debug panel',
+    })
+
+    async function setShowDebugPanelTo(value: 'On' | 'Off') {
+      await commandsButton.click()
+      await debugPaneOption.click()
+      await page.getByRole('option', { name: value }).click()
+      await expect(
+        page.getByText(
+          `Set show debug panel to "${value === 'On'}" for this project`
+        )
+      ).toBeVisible()
+    }
+
+    await test.step(`Initial load with corrupted settings`, async () => {
+      await u.waitForAuthSkipAppStart()
+      // Check that the debug panel is not visible
+      await expect(debugPaneButton).not.toBeVisible()
+      // Check the pane resize handle wrapper is not visible
+      await expect(resizeHandle).not.toBeVisible()
+    })
+
+    await test.step(`Open code pane to verify we see the resize handles`, async () => {
+      await u.openKclCodePanel()
+      await expect(resizeHandle).toBeVisible()
+      await u.closeKclCodePanel()
+    })
+
+    await test.step(`Turn on debug panel, open it`, async () => {
+      await setShowDebugPanelTo('On')
+      await expect(debugPaneButton).toBeVisible()
+      // We want the logic to clear the phantom panel, so we shouldn't see
+      // the real panel (and therefore the resize handle) yet
+      await expect(resizeHandle).not.toBeVisible()
+      await u.openDebugPanel()
+      await expect(resizeHandle).toBeVisible()
+    })
+
+    await test.step(`Turn off debug panel setting with it open`, async () => {
+      await setShowDebugPanelTo('Off')
+      await expect(debugPaneButton).not.toBeVisible()
+      await expect(resizeHandle).not.toBeVisible()
+    })
+  })
 })

e2e/playwright/text-to-cad-tests.spec.ts

@@ -534,7 +534,7 @@ test.describe('Text-to-CAD tests', () => {
 
     // Ensure the final toast remains.
     await expect(page.getByText(`a 2x10 lego`)).not.toBeVisible()
-    await expect(page.getByText(`a 2x8 lego`)).not.toBeVisible()
+    await expect(page.getByText(`Prompt: "a 2x8 lego`)).not.toBeVisible()
     await expect(page.getByText(`a 2x4 lego`)).toBeVisible()
 
     // Ensure you can copy the code for the final model.
@@ -690,40 +690,53 @@ test(
   'Text-to-CAD functionality',
   { tag: '@electron' },
   async ({ browserName }, testInfo) => {
+    const projectName = 'project-000'
+    const prompt = 'lego 2x4'
+    const textToCadFileName = 'lego-2x4.kcl'
+
     const { electronApp, page, dir } = await setupElectron({ testInfo })
     const fileExists = () =>
-      fs.existsSync(join(dir, 'project-000', 'lego-2x4.kcl'))
+      fs.existsSync(join(dir, projectName, textToCadFileName))
 
-    const { createAndSelectProject, panesOpen } = await getUtils(page, test)
+    const {
+      createAndSelectProject,
+      openFilePanel,
+      openKclCodePanel,
+      waitForPageLoad,
+    } = await getUtils(page, test)
 
     await page.setViewportSize({ width: 1200, height: 500 })
 
-    await panesOpen(['code', 'files'])
+    // Locators
+    const projectMenuButton = page.getByRole('button', { name: projectName })
+    const textToCadFileButton = page.getByRole('listitem').filter({
+      has: page.getByRole('button', { name: textToCadFileName }),
+    })
+    const textToCadComment = page.getByText(
+      `// Generated by Text-to-CAD: ${prompt}`
+    )
 
     // Create and navigate to the project
     await createAndSelectProject('project-000')
 
     // Wait for Start Sketch otherwise you will not have access Text-to-CAD command
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).toBeEnabled({
-      timeout: 20_000,
-    })
+    await waitForPageLoad()
+    await openFilePanel()
+    await openKclCodePanel()
 
     await test.step(`Test file creation`, async () => {
-      await sendPromptFromCommandBar(page, 'lego 2x4')
+      await sendPromptFromCommandBar(page, prompt)
       // File is considered created if it shows up in the Project Files pane
-      const file = page.getByRole('button', { name: 'lego-2x4.kcl' })
-      await expect(file).toBeVisible({ timeout: 20_000 })
+      await expect(textToCadFileButton).toBeVisible({ timeout: 20_000 })
       expect(fileExists()).toBeTruthy()
     })
 
     await test.step(`Test file navigation`, async () => {
-      const file = page.getByRole('button', { name: 'lego-2x4.kcl' })
-      await file.click()
-      const kclComment = page.getByText('Lego 2x4 Brick')
+      await expect(projectMenuButton).toContainText('main.kcl')
+      await textToCadFileButton.click()
       // File can be navigated and loaded assuming a specific KCL comment is loaded into the KCL code pane
-      await expect(kclComment).toBeVisible({ timeout: 20_000 })
+      await expect(textToCadComment).toBeVisible({ timeout: 20_000 })
+      await expect(projectMenuButton).toContainText(textToCadFileName)
     })
 
     await test.step(`Test file deletion on rejection`, async () => {
@@ -737,6 +750,8 @@ test(
       )
       await expect(submittingToastMessage).toBeVisible()
       expect(fileExists()).toBeFalsy()
+      // Confirm we've navigated back to the main.kcl file after deletion
+      await expect(projectMenuButton).toContainText('main.kcl')
     })
 
     await electronApp.close()

e2e/playwright/various.spec.ts

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 
 import { doExport, getUtils, makeTemplate, setup, tearDown } from './test-utils'
 
-test.beforeEach(async ({ context, page }) => {
-  await setup(context, page)
+test.beforeEach(async ({ context, page }, testInfo) => {
+  await setup(context, page, testInfo)
 })
 
 test.afterEach(async ({ page }, testInfo) => {

electron-builder.yml

@@ -1,27 +1,30 @@
 appId: dev.zoo.modeling-app
-
 directories:
   output: out
   buildResources: assets
-
 files:
   - .vite/**
-
 mac:
   category: public.app-category.developer-tools
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
   target:
-    - target: dmg 
+    - target: dmg
       arch:
         - x64
         - arm64
-    - target: zip 
+    - target: zip
       arch:
         - x64
         - arm64
   notarize:
     teamId: 92H8YB3B95
-
+  fileAssociations:
+    - ext: kcl
+      name: kcl
+      mimeType: text/vnd.zoo.kcl
+      description: Zoo KCL File
+      role: Editor
+      rank: Owner
 win:
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
   target:
@@ -36,21 +39,23 @@ win:
   signingHashAlgorithms:
     - sha256
   sign: "./sign-win.js"
-  publisherName: "KittyCAD Inc"  # needs to be exactly like on Digicert
+  publisherName: "KittyCAD Inc" # needs to be exactly like on Digicert
   icon: "assets/icon.ico"
-
+  fileAssociations:
+    - ext: kcl
+      name: kcl
+      mimeType: text/vnd.zoo.kcl
+      description: Zoo KCL File
+      role: Editor
 msi:
   oneClick: false
   perMachine: true
-
 nsis:
   oneClick: false
   perMachine: true
   allowElevation: true
-  license: "LICENSE"
   installerIcon: "assets/icon.ico"
   include: "./installer.nsh"
-
 linux:
   artifactName: "${productName}-${version}-${arch}-${os}.${ext}"
   target:
@@ -58,8 +63,13 @@ linux:
       arch:
         - x64
         - arm64
-
+  fileAssociations:
+    - ext: kcl
+      name: kcl
+      mimeType: text/vnd.zoo.kcl
+      description: Zoo KCL File
+      role: Editor
 publish:
   - provider: generic
-    url: https://dl.zoo.dev/releases/modeling-app/test/electron-builder
+    url: https://dl.zoo.dev/releases/modeling-app
     channel: latest

index.html

@@ -15,6 +15,7 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="./inter/inter.css" />
     <link rel="stylesheet" href="https://use.typekit.net/zzv8rvm.css" />
     <script
       defer

interface.d.ts

@@ -30,8 +30,6 @@ export interface IElectronAPI {
   join: typeof path.join
   sep: typeof path.sep
   rename: (prev: string, next: string) => typeof fs.rename
-  setBaseUrl: (value: string) => void
-  loadProjectAtStartup: () => Promise<ProjectState | null>
   packageJson: {
     name: string
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zoo-modeling-app",
-  "version": "0.24.12",
+  "version": "0.25.2",
   "private": true,
   "productName": "Zoo Modeling App",
   "author": {
@@ -34,12 +34,12 @@
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
     "@xstate/inspect": "^0.8.0",
-    "@xstate/react": "^3.2.2",
+    "@xstate/react": "^4.1.1",
     "bonjour-service": "^1.2.1",
     "codemirror": "^6.0.1",
     "decamelize": "^6.0.0",
     "electron-squirrel-startup": "^1.0.1",
-    "electron-updater": "^6.2.1",
+    "electron-updater": "^6.3.0",
     "fuse.js": "^7.0.0",
     "html2canvas-pro": "^1.5.8",
     "isomorphic-fetch": "^3.0.0",
@@ -51,7 +51,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-hotkeys-hook": "^4.5.0",
+    "react-hotkeys-hook": "^4.5.1",
     "react-json-view": "^1.21.3",
     "react-modal": "^3.16.1",
     "react-modal-promise": "^1.0.2",
@@ -64,10 +64,13 @@
     "vscode-languageserver-protocol": "^3.17.5",
     "vscode-uri": "^3.0.8",
     "web-vitals": "^3.5.2",
-    "xstate": "^4.38.2"
+    "xstate": "^5.17.4"
   },
   "scripts": {
     "start": "vite",
+    "start:playwright-ci:unix": "GENERATE_PLAYWRIGHT_COVERAGE=true yarn start",
+    "start:playwright-ci:win": "set GENERATE_PLAYWRIGHT_COVERAGE=true && yarn start",
+    "start:playwright-ci": "sh -c 'if [ \"$OS\" = \"Windows_NT\" ]; then yarn start:playwright-ci:unix; else yarn start:playwright-ci:win; fi'",
     "start:prod": "vite preview --port=3000",
     "serve": "vite serve --port=3000",
     "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm && vite build",
@@ -80,7 +83,7 @@
     "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests --benches)",
     "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
     "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
-    "fmt": "prettier --write ./src *.ts *.json *.js ./e2e ./packages",
+    "fmt": "prettier --write ./src *.ts *.mts *.json *.js ./e2e ./packages",
     "fmt-check": "prettier --check ./src *.ts *.json *.js ./e2e ./packages",
     "fetch:wasm": "./get-latest-wasm-bundle.sh",
     "isomorphic-copy-wasm": "(copy src/wasm-lib/pkg/wasm_lib_bg.wasm public || cp src/wasm-lib/pkg/wasm_lib_bg.wasm public)",
@@ -88,7 +91,7 @@
     "build:wasm": "yarn wasm-prep && cd src/wasm-lib && wasm-pack build --release --target web --out-dir pkg && cargo test -p kcl-lib export_bindings && cd ../.. && yarn isomorphic-copy-wasm && yarn fmt",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rimraf src/wasm-lib/pkg && mkdirp src/wasm-lib/pkg && rimraf src/wasm-lib/kcl/bindings",
-    "lint": "eslint --fix src e2e",
+    "lint": "eslint --fix src e2e packages/codemirror-lsp-client",
     "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json",
     "postinstall": "yarn xstate:typegen && ./node_modules/.bin/electron-rebuild",
     "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\"",
@@ -137,7 +140,6 @@
     "@iarna/toml": "^2.2.5",
     "@lezer/generator": "^1.7.1",
     "@playwright/test": "^1.46.1",
-    "@tauri-apps/cli": "^2.0.0-rc.9",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.2",
     "@types/d3-force": "^3.0.10",
@@ -169,7 +171,7 @@
     "eslint": "^8.0.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
-    "eslint-plugin-import": "^2.25.0",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-suggest-no-throw": "^1.0.0",
     "happy-dom": "^14.3.10",
     "http-server": "^14.1.1",
@@ -186,6 +188,7 @@
     "typescript": "^5.0.0",
     "vite": "^5.4.2",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-istanbul": "^6.0.2",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0",

packages/codemirror-lsp-client/src/client/index.ts

@@ -72,6 +72,7 @@ export class LanguageServerClient {
   async initialize() {
     // Start the client in the background.
     this.client.setNotifyFn(this.processNotifications.bind(this))
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.client.start()
 
     this.ready = true
@@ -195,6 +196,9 @@ export class LanguageServerClient {
   }
 
   private processNotifications(notification: LSP.NotificationMessage) {
-    for (const plugin of this.plugins) plugin.processNotification(notification)
+    for (const plugin of this.plugins) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      plugin.processNotification(notification)
+    }
   }
 }

packages/codemirror-lsp-client/src/plugin/format.ts

@@ -12,6 +12,7 @@ export default function lspFormatExt(
       run: (view: EditorView) => {
         let value = view.plugin(plugin)
         if (!value) return false
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         value.requestFormatting()
         return true
       },

packages/codemirror-lsp-client/src/plugin/lsp.ts

@@ -117,6 +117,7 @@ export class LanguageServerPlugin implements PluginValue {
 
     this.processLspNotification = options.processLspNotification
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.initialize({
       documentText: this.getDocText(),
     })
@@ -149,6 +150,7 @@ export class LanguageServerPlugin implements PluginValue {
   }
 
   async initialize({ documentText }: { documentText: string }) {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     if (this.client.initializePromise) {
       await this.client.initializePromise
     }
@@ -162,7 +164,9 @@ export class LanguageServerPlugin implements PluginValue {
       },
     })
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.requestSemanticTokens()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.updateFoldingRanges()
   }
 
@@ -225,7 +229,9 @@ export class LanguageServerPlugin implements PluginValue {
         contentChanges: [{ text: this.view.state.doc.toString() }],
       })
 
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.requestSemanticTokens()
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.updateFoldingRanges()
     } catch (e) {
       console.error(e)
@@ -526,7 +532,9 @@ export class LanguageServerPlugin implements PluginValue {
   processDiagnostics(params: PublishDiagnosticsParams) {
     if (params.uri !== this.getDocUri()) return
 
-    const diagnostics = params.diagnostics
+    // Commented to avoid the lint.  See TODO below.
+    // const diagnostics =
+    params.diagnostics
       .map(({ range, message, severity }) => ({
         from: posToOffset(this.view.state.doc, range.start)!,
         to: posToOffset(this.view.state.doc, range.end)!,

playwright.config.ts

@@ -57,10 +57,10 @@ export default defineConfig({
         },
       }, // or 'chrome-beta'
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
     // {
     //   name: 'firefox',
     //   use: { ...devices['Desktop Firefox'] },
@@ -93,7 +93,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn start',
+    command: 'yarn start:playwright-ci',
     // url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },

public/inter/inter.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("InterVariable-Italic.woff2") format("woff2");
+}

src/App.tsx

@@ -1,12 +1,8 @@
-import { MouseEventHandler, useEffect, useMemo, useRef } from 'react'
-import { uuidv4 } from 'lib/utils'
+import { useEffect, useMemo, useRef } from 'react'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
-import { EngineCommand } from 'lang/std/artifactGraph'
-import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { getNormalisedCoordinates } from './lib/utils'
 import { useLoaderData, useNavigate } from 'react-router-dom'
 import { type IndexLoaderData } from 'lib/types'
 import { PATHS } from 'lib/paths'
@@ -14,7 +10,6 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { codeManager, engineCommandManager } from 'lib/singletons'
-import { useModelingContext } from 'hooks/useModelingContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { isDesktop } from 'lib/isDesktop'
 import { useLspContext } from 'components/LspProvider'
@@ -44,7 +39,6 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
-  const { context, state } = useModelingContext()
 
   const { auth, settings } = useSettingsAuthContext()
   const token = auth?.context?.token
@@ -73,61 +67,14 @@ export function App() {
     (p) => p === onboardingStatus.current
   )
     ? 'opacity-20'
-    : context.store?.didDragInStream
-    ? 'opacity-40'
     : ''
 
   useEngineConnectionSubscriptions()
 
-  const debounceSocketSend = throttle<EngineCommand>((message) => {
-    engineCommandManager.sendSceneCommand(message)
-  }, 1000 / 15)
-  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
-    if (state.matches('Sketch')) {
-      return
-    }
-
-    const { x, y } = getNormalisedCoordinates({
-      clientX: e.clientX,
-      clientY: e.clientY,
-      el: e.currentTarget,
-      ...context.store?.streamDimensions,
-    })
-
-    const newCmdId = uuidv4()
-    if (state.matches('idle.showPlanes')) return
-    if (context.store?.buttonDownInStream !== undefined) return
-    debounceSocketSend({
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'highlight_set_entity',
-        selected_at_window: { x, y },
-      },
-      cmd_id: newCmdId,
-    })
-  }
-
   return (
-    <div
-      className="relative h-full flex flex-col"
-      onMouseMove={handleMouseMove}
-      ref={ref}
-    >
+    <div className="relative h-full flex flex-col" ref={ref}>
       <AppHeader
-        className={
-          'transition-opacity transition-duration-75 ' +
-          paneOpacity +
-          (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
-        }
-        // Override the electron window draggable region behavior as well
-        // when the button is down in the stream
-        style={
-          {
-            '-webkit-app-region': context.store?.buttonDownInStream
-              ? 'no-drag'
-              : '',
-          } as React.CSSProperties
-        }
+        className={'transition-opacity transition-duration-75 ' + paneOpacity}
         project={{ project, file }}
         enableMenu={true}
       />

src/Router.tsx

@@ -41,6 +41,7 @@ import toast from 'react-hot-toast'
 import { coreDump } from 'lang/wasm'
 import { useMemo } from 'react'
 import { AppStateProvider } from 'AppState'
+import { reportRejection } from 'lib/trap'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
 
@@ -69,19 +70,6 @@ const router = createRouter([
         path: PATHS.INDEX,
         loader: async () => {
           const onDesktop = isDesktop()
-          if (onDesktop) {
-            const projectStartupFile =
-              await window.electron.loadProjectAtStartup()
-            if (projectStartupFile !== null) {
-              // Redirect to the file if we have a file path.
-              if (projectStartupFile.length > 0) {
-                return redirect(
-                  PATHS.FILE + '/' + encodeURIComponent(projectStartupFile)
-                )
-              }
-            }
-          }
-
           return onDesktop
             ? redirect(PATHS.HOME)
             : redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
@@ -186,21 +174,23 @@ function CoreDump() {
     []
   )
   useHotkeyWrapper(['mod + shift + .'], () => {
-    toast.promise(
-      coreDump(coreDumpManager, true),
-      {
-        loading: 'Starting core dump...',
-        success: 'Core dump completed successfully',
-        error: 'Error while exporting core dump',
-      },
-      {
-        success: {
-          // Note: this extended duration is especially important for Playwright e2e testing
-          // default duration is 2000 - https://react-hot-toast.com/docs/toast#default-durations
-          duration: 6000,
+    toast
+      .promise(
+        coreDump(coreDumpManager, true),
+        {
+          loading: 'Starting core dump...',
+          success: 'Core dump completed successfully',
+          error: 'Error while exporting core dump',
         },
-      }
-    )
+        {
+          success: {
+            // Note: this extended duration is especially important for Playwright e2e testing
+            // default duration is 2000 - https://react-hot-toast.com/docs/toast#default-durations
+            duration: 6000,
+          },
+        }
+      )
+      .catch(reportRejection)
   })
   return null
 }

src/Toolbar.tsx

@@ -20,6 +20,8 @@ import {
   ToolbarItemResolved,
   ToolbarModeName,
 } from 'lib/toolbar'
+import { isDesktop } from 'lib/isDesktop'
+import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 
 export function Toolbar({
   className = '',
@@ -68,12 +70,12 @@ export function Toolbar({
    */
   const configCallbackProps: ToolbarItemCallbackProps = useMemo(
     () => ({
-      modelingStateMatches: state.matches,
+      modelingState: state,
       modelingSend: send,
       commandBarSend,
       sketchPathId,
     }),
-    [state.matches, send, commandBarSend, sketchPathId]
+    [state, send, commandBarSend, sketchPathId]
   )
 
   /**
@@ -288,6 +290,11 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
   return (
     <Tooltip
       inert={false}
+      wrapperStyle={
+        isDesktop()
+          ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
+          : {}
+      }
       position="bottom"
       wrapperClassName="!p-4 !pointer-events-auto"
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
@@ -337,6 +344,7 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
               <li key={link.label} className="contents">
                 <a
                   href={link.url}
+                  onClick={openExternalBrowserIfDesktop(link.url)}
                   target="_blank"
                   rel="noreferrer"
                   className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"

src/clientSideScene/CameraControls.ts

@@ -22,11 +22,12 @@ import {
   UnreliableSubscription,
 } from 'lang/std/engineConnection'
 import { EngineCommand } from 'lang/std/artifactGraph'
-import { uuidv4 } from 'lib/utils'
+import { toSync, uuidv4 } from 'lib/utils'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'
 import * as TWEEN from '@tweenjs/tween.js'
 import { isQuaternionVertical } from './helpers'
+import { reportRejection } from 'lib/trap'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
@@ -100,6 +101,7 @@ export class CameraControls {
       camProps.type === 'perspective' &&
       this.camera instanceof OrthographicCamera
     ) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.usePerspectiveCamera()
     } else if (
       camProps.type === 'orthographic' &&
@@ -127,6 +129,7 @@ export class CameraControls {
   }
 
   throttledEngCmd = throttle((cmd: EngineCommand) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.engineCommandManager.sendSceneCommand(cmd)
   }, 1000 / 30)
 
@@ -139,6 +142,7 @@ export class CameraControls {
         ...convertThreeCamValuesToEngineCam(threeValues),
       },
     }
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.engineCommandManager.sendSceneCommand(cmd)
   }, 1000 / 15)
 
@@ -151,6 +155,7 @@ export class CameraControls {
       this.lastPerspectiveCmd &&
       Date.now() - this.lastPerspectiveCmdTime >= lastCmdDelay
     ) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.engineCommandManager.sendSceneCommand(this.lastPerspectiveCmd, true)
       this.lastPerspectiveCmdTime = Date.now()
     }
@@ -218,6 +223,7 @@ export class CameraControls {
         this.useOrthographicCamera()
       }
       if (this.camera instanceof OrthographicCamera && !camSettings.ortho) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.usePerspectiveCamera()
       }
       if (this.camera instanceof PerspectiveCamera && camSettings.fov_y) {
@@ -249,6 +255,7 @@ export class CameraControls {
     const doZoom = () => {
       if (this.zoomDataFromLastFrame !== undefined) {
         this.handleStart()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.engineCommandManager.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd: {
@@ -266,6 +273,7 @@ export class CameraControls {
 
     const doMove = () => {
       if (this.moveDataFromLastFrame !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.engineCommandManager.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd: {
@@ -335,7 +343,8 @@ export class CameraControls {
     this.camera.updateProjectionMatrix()
   }
 
-  onMouseDown = (event: MouseEvent) => {
+  onMouseDown = (event: PointerEvent) => {
+    this.domElement.setPointerCapture(event.pointerId)
     this.isDragging = true
     this.mouseDownPosition.set(event.clientX, event.clientY)
     let interaction = this.getInteractionType(event)
@@ -355,7 +364,7 @@ export class CameraControls {
     }
   }
 
-  onMouseMove = (event: MouseEvent) => {
+  onMouseMove = (event: PointerEvent) => {
     if (this.isDragging) {
       this.mouseNewPosition.set(event.clientX, event.clientY)
       const deltaMove = this.mouseNewPosition
@@ -393,10 +402,29 @@ export class CameraControls {
         this.pendingPan.x += -deltaMove.x * panSpeed
         this.pendingPan.y += deltaMove.y * panSpeed
       }
+    } else {
+      /**
+       * If we're not in sketch mode and not dragging, we can highlight entities
+       * under the cursor. This recently moved from being handled in App.tsx.
+       * This might not be the right spot, but it is more consolidated.
+       */
+      if (this.syncDirection === 'engineToClient') {
+        const newCmdId = uuidv4()
+
+        this.throttledEngCmd({
+          type: 'modeling_cmd_req',
+          cmd: {
+            type: 'highlight_set_entity',
+            selected_at_window: { x: event.clientX, y: event.clientY },
+          },
+          cmd_id: newCmdId,
+        })
+      }
     }
   }
 
-  onMouseUp = (event: MouseEvent) => {
+  onMouseUp = (event: PointerEvent) => {
+    this.domElement.releasePointerCapture(event.pointerId)
     this.isDragging = false
     this.handleEnd()
     if (this.syncDirection === 'engineToClient') {
@@ -459,6 +487,7 @@ export class CameraControls {
 
     this.camera.quaternion.set(qx, qy, qz, qw)
     this.camera.updateProjectionMatrix()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.engineCommandManager.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd_id: uuidv4(),
@@ -541,7 +570,7 @@ export class CameraControls {
     const oldFov = this.camera.fov
 
     const viewHeightFactor = (fov: number) => {
-      /*       * 
+      /*       *
               /|
              / |
             /  |
@@ -929,6 +958,7 @@ export class CameraControls {
       }
 
       if (isReducedMotion()) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         onComplete()
         return
       }
@@ -937,7 +967,7 @@ export class CameraControls {
         .to({ t: tweenEnd }, duration)
         .easing(TWEEN.Easing.Quadratic.InOut)
         .onUpdate(({ t }) => cameraAtTime(t))
-        .onComplete(onComplete)
+        .onComplete(toSync(onComplete, reportRejection))
         .start()
     })
   }
@@ -962,6 +992,7 @@ export class CameraControls {
             // Decrease the FOV
             currentFov = Math.max(currentFov - fovAnimationStep, targetFov)
             this.camera.updateProjectionMatrix()
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             this.dollyZoom(currentFov)
             requestAnimationFrame(animateFovChange) // Continue the animation
           } else if (frameWaitOnFinish > 0) {
@@ -991,6 +1022,7 @@ export class CameraControls {
       this.lastPerspectiveFov = 4
       let currentFov = 4
       const initialCameraUp = this.camera.up.clone()
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.usePerspectiveCamera()
       const tempVec = new Vector3()
 
@@ -999,6 +1031,7 @@ export class CameraControls {
           this.lastPerspectiveFov + (targetFov - this.lastPerspectiveFov) * t
         const currentUp = tempVec.lerpVectors(initialCameraUp, targetCamUp, t)
         this.camera.up.copy(currentUp)
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.dollyZoom(currentFov)
       }
 
@@ -1027,6 +1060,7 @@ export class CameraControls {
     this.lastPerspectiveFov = 4
     let currentFov = 4
     const initialCameraUp = this.camera.up.clone()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.usePerspectiveCamera()
     const tempVec = new Vector3()
 
@@ -1175,7 +1209,7 @@ function convertThreeCamValuesToEngineCam({
   const lookAt = buildLookAt(64 / zoom, target, position)
   return {
     center: new Vector3(lookAt.center.x, lookAt.center.y, lookAt.center.z),
-    up: new Vector3(0, 0, 1),
+    up: new Vector3(upVector.x, upVector.y, upVector.z),
     vantage: new Vector3(lookAt.eye.x, lookAt.eye.y, lookAt.eye.z),
   }
 }

src/clientSideScene/ClientSideSceneComp.tsx

@@ -5,7 +5,7 @@ import { cameraMouseDragGuards } from 'lib/cameraControls'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ARROWHEAD, DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
 import { ReactCameraProperties } from './CameraControls'
-import { throttle } from 'lib/utils'
+import { throttle, toSync } from 'lib/utils'
 import {
   sceneInfra,
   kclManager,
@@ -34,17 +34,15 @@ import { CustomIcon, CustomIconName } from 'components/CustomIcon'
 import { ConstrainInfo } from 'lang/std/stdTypes'
 import { getConstraintInfo } from 'lang/std/sketch'
 import { Dialog, Popover, Transition } from '@headlessui/react'
-import { LineInputsType } from 'lang/std/sketchcombos'
 import toast from 'react-hot-toast'
 import { InstanceProps, create } from 'react-modal-promise'
 import { executeAst } from 'lang/langHelpers'
 import {
   deleteSegmentFromPipeExpression,
-  makeRemoveSingleConstraintInput,
   removeSingleConstraintInfo,
 } from 'lang/modifyAst'
 import { ActionButton } from 'components/ActionButton'
-import { err, trap } from 'lib/trap'
+import { err, reportRejection, trap } from 'lib/trap'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -124,9 +122,9 @@ export const ClientSideScene = ({
     } else if (context.mouseState.type === 'isDragging') {
       cursor = 'grabbing'
     } else if (
-      state.matches('Sketch.Line tool') ||
-      state.matches('Sketch.Tangential arc to') ||
-      state.matches('Sketch.Rectangle tool')
+      state.matches({ Sketch: 'Line tool' }) ||
+      state.matches({ Sketch: 'Tangential arc to' }) ||
+      state.matches({ Sketch: 'Rectangle tool' })
     ) {
       cursor = 'crosshair'
     } else {
@@ -214,9 +212,9 @@ const Overlay = ({
     overlay.visible &&
     typeof context?.segmentHoverMap?.[pathToNodeString] === 'number' &&
     !(
-      state.matches('Sketch.Line tool') ||
-      state.matches('Sketch.Tangential arc to') ||
-      state.matches('Sketch.Rectangle tool')
+      state.matches({ Sketch: 'Line tool' }) ||
+      state.matches({ Sketch: 'Tangential arc to' }) ||
+      state.matches({ Sketch: 'Rectangle tool' })
     )
 
   return (
@@ -542,12 +540,10 @@ const ConstraintSymbol = ({
       iconName: 'dimension',
     },
   }
-  const varName =
-    _type in varNameMap ? varNameMap[_type as LineInputsType].varName : 'var'
-  const name: CustomIconName = varNameMap[_type as LineInputsType].iconName
-  const displayName = varNameMap[_type as LineInputsType]?.displayName
-  const implicitDesc =
-    varNameMap[_type as LineInputsType]?.implicitConstraintDesc
+  const varName = varNameMap?.[_type]?.varName || 'var'
+  const name: CustomIconName = varNameMap[_type].iconName
+  const displayName = varNameMap[_type]?.displayName
+  const implicitDesc = varNameMap[_type]?.implicitConstraintDesc
 
   const _node = useMemo(
     () => getNodeFromPath<Expr>(kclManager.ast, pathToNode),
@@ -582,7 +578,7 @@ const ConstraintSymbol = ({
         }}
         // disabled={isConstrained || !convertToVarEnabled}
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?
-        onClick={async () => {
+        onClick={toSync(async () => {
           if (!isConstrained) {
             send({
               type: 'Convert to variable',
@@ -604,25 +600,23 @@ const ConstraintSymbol = ({
               if (trap(_node1)) return Promise.reject(_node1)
               const shallowPath = _node1.shallowPath
 
-              const input = makeRemoveSingleConstraintInput(
-                argPosition,
-                shallowPath
-              )
-              if (!input || !context.sketchDetails) return
+              if (!context.sketchDetails || !argPosition) return
               const transform = removeSingleConstraintInfo(
-                input,
+                shallowPath,
+                argPosition,
                 kclManager.ast,
                 kclManager.programMemory
               )
               if (!transform) return
               const { modifiedAst } = transform
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
               kclManager.updateAst(modifiedAst, true)
             } catch (e) {
               console.log('error', e)
             }
             toast.success('Constraint removed')
           }
-        }}
+        }, reportRejection)}
       >
         <CustomIcon name={name} />
       </button>
@@ -688,7 +682,7 @@ const ConstraintSymbol = ({
 
 const throttled = throttle((a: ReactCameraProperties) => {
   if (a.type === 'perspective' && a.fov) {
-    sceneInfra.camControls.dollyZoom(a.fov)
+    sceneInfra.camControls.dollyZoom(a.fov).catch(reportRejection)
   }
 }, 1000 / 15)
 
@@ -718,6 +712,7 @@ export const CamDebugSettings = () => {
           if (camSettings.type === 'perspective') {
             sceneInfra.camControls.useOrthographicCamera()
           } else {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             sceneInfra.camControls.usePerspectiveCamera(true)
           }
         }}
@@ -725,7 +720,7 @@ export const CamDebugSettings = () => {
       <div>
         <button
           onClick={() => {
-            sceneInfra.camControls.resetCameraPosition()
+            sceneInfra.camControls.resetCameraPosition().catch(reportRejection)
           }}
         >
           Reset Camera Position

src/clientSideScene/sceneEntities.ts

@@ -1,10 +1,8 @@
 import {
   BoxGeometry,
   DoubleSide,
-  ExtrudeGeometry,
   Group,
   Intersection,
-  LineCurve3,
   Mesh,
   MeshBasicMaterial,
   Object3D,
@@ -15,7 +13,6 @@ import {
   Points,
   Quaternion,
   Scene,
-  Shape,
   Vector2,
   Vector3,
 } from 'three'
@@ -27,9 +24,6 @@ import {
   OnClickCallbackArgs,
   OnMouseEnterLeaveArgs,
   RAYCASTABLE_PLANE,
-  SEGMENT_LENGTH_LABEL,
-  SEGMENT_LENGTH_LABEL_OFFSET_PX,
-  SEGMENT_LENGTH_LABEL_TEXT,
   SKETCH_GROUP_SEGMENTS,
   SKETCH_LAYER,
   X_AXIS,
@@ -38,7 +32,6 @@ import {
 import { isQuaternionVertical, quaternionFromUpNForward } from './helpers'
 import {
   CallExpression,
-  getTangentialArcToInfo,
   parse,
   Path,
   PathToNode,
@@ -62,11 +55,9 @@ import {
 import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
 import { executeAst } from 'lang/langHelpers'
 import {
-  createArcGeometry,
-  dashedStraight,
-  profileStart,
-  straightSegment,
-  tangentialArcToSegment,
+  createProfileStartHandle,
+  SegmentUtils,
+  segmentUtils,
 } from './segments'
 import {
   addCallExpressionsToPipe,
@@ -75,13 +66,7 @@ import {
   changeSketchArguments,
   updateStartProfileAtArgs,
 } from 'lang/std/sketch'
-import {
-  isArray,
-  isOverlap,
-  normaliseAngle,
-  roundOff,
-  throttle,
-} from 'lib/utils'
+import { isArray, isOverlap, roundOff } from 'lib/utils'
 import {
   addStartProfileAt,
   createArrayExpression,
@@ -92,7 +77,6 @@ import {
   findUniqueName,
 } from 'lang/modifyAst'
 import { Selections, getEventForSegmentSelection } from 'lib/selections'
-import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import { createGridHelper, orthoScale, perspScale } from './helpers'
 import { Models } from '@kittycad/lib'
 import { uuidv4 } from 'lib/utils'
@@ -102,8 +86,8 @@ import {
   getRectangleCallExpressions,
   updateRectangleSketch,
 } from 'lib/rectangleTool'
-import { getThemeColorForThreeJs } from 'lib/theme'
-import { err, trap } from 'lib/trap'
+import { getThemeColorForThreeJs, Themes } from 'lib/theme'
+import { err, reportRejection, trap } from 'lib/trap'
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
 import { Point3d } from 'wasm-lib/kcl/bindings/Point3d'
 
@@ -122,6 +106,11 @@ export const TANGENTIAL_ARC_TO_SEGMENT_BODY = 'tangential-arc-to-segment-body'
 export const SEGMENT_WIDTH_PX = 1.6
 export const HIDE_SEGMENT_LENGTH = 75 // in pixels
 export const HIDE_HOVER_SEGMENT_LENGTH = 60 // in pixels
+export const SEGMENT_BODIES = [STRAIGHT_SEGMENT, TANGENTIAL_ARC_TO_SEGMENT]
+export const SEGMENT_BODIES_PLUS_PROFILE_START = [
+  ...SEGMENT_BODIES,
+  PROFILE_START,
+]
 
 type Vec3Array = [number, number, number]
 
@@ -155,37 +144,35 @@ export class SceneEntities {
           ? orthoFactor
           : perspScale(sceneInfra.camControls.camera, segment)) /
         sceneInfra._baseUnitMultiplier
+      const input = {
+        type: 'straight-segment',
+        from: segment.userData.from,
+        to: segment.userData.to,
+      } as const
+      let update: SegmentUtils['update'] | null = null
       if (
         segment.userData.from &&
         segment.userData.to &&
         segment.userData.type === STRAIGHT_SEGMENT
       ) {
-        callbacks.push(
-          this.updateStraightSegment({
-            from: segment.userData.from,
-            to: segment.userData.to,
-            group: segment,
-            scale: factor,
-          })
-        )
+        update = segmentUtils.straight.update
       }
-
       if (
         segment.userData.from &&
         segment.userData.to &&
         segment.userData.prevSegment &&
         segment.userData.type === TANGENTIAL_ARC_TO_SEGMENT
       ) {
-        callbacks.push(
-          this.updateTangentialArcToSegment({
-            prevSegment: segment.userData.prevSegment,
-            from: segment.userData.from,
-            to: segment.userData.to,
-            group: segment,
-            scale: factor,
-          })
-        )
+        update = segmentUtils.tangentialArcTo.update
       }
+      const callBack = update?.({
+        prevSegment: segment.userData.prevSegment,
+        input,
+        group: segment,
+        scale: factor,
+        sceneInfra,
+      })
+      callBack && !err(callBack) && callbacks.push(callBack)
       if (segment.name === PROFILE_START) {
         segment.scale.set(factor, factor, factor)
       }
@@ -324,6 +311,7 @@ export class SceneEntities {
       )
     }
     sceneInfra.setCallbacks({
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onClick: async (args) => {
         if (!args) return
         if (args.mouseEvent.which !== 1) return
@@ -421,7 +409,7 @@ export class SceneEntities {
       maybeModdedAst,
       sketchGroup.start.__geoMeta.sourceRange
     )
-    const _profileStart = profileStart({
+    const _profileStart = createProfileStartHandle({
       from: sketchGroup.start.from,
       id: sketchGroup.start.__geoMeta.id,
       pathToNode: segPathToNode,
@@ -476,50 +464,31 @@ export class SceneEntities {
       if (err(_node1)) return
       const callExpName = _node1.node?.callee?.name
 
-      if (segment.type === 'TangentialArcTo') {
-        seg = tangentialArcToSegment({
-          prevSegment: sketchGroup.value[index - 1],
+      const initSegment =
+        segment.type === 'TangentialArcTo'
+          ? segmentUtils.tangentialArcTo.init
+          : segmentUtils.straight.init
+      const result = initSegment({
+        prevSegment: sketchGroup.value[index - 1],
+        callExpName,
+        input: {
+          type: 'straight-segment',
           from: segment.from,
           to: segment.to,
-          id: segment.__geoMeta.id,
-          pathToNode: segPathToNode,
-          isDraftSegment,
-          scale: factor,
-          texture: sceneInfra.extraSegmentTexture,
-          theme: sceneInfra._theme,
-          isSelected,
-        })
-        callbacks.push(
-          this.updateTangentialArcToSegment({
-            prevSegment: sketchGroup.value[index - 1],
-            from: segment.from,
-            to: segment.to,
-            group: seg,
-            scale: factor,
-          })
-        )
-      } else {
-        seg = straightSegment({
-          from: segment.from,
-          to: segment.to,
-          id: segment.__geoMeta.id,
-          pathToNode: segPathToNode,
-          isDraftSegment,
-          scale: factor,
-          callExpName,
-          texture: sceneInfra.extraSegmentTexture,
-          theme: sceneInfra._theme,
-          isSelected,
-        })
-        callbacks.push(
-          this.updateStraightSegment({
-            from: segment.from,
-            to: segment.to,
-            group: seg,
-            scale: factor,
-          })
-        )
-      }
+        },
+        id: segment.__geoMeta.id,
+        pathToNode: segPathToNode,
+        isDraftSegment,
+        scale: factor,
+        texture: sceneInfra.extraSegmentTexture,
+        theme: sceneInfra._theme,
+        isSelected,
+        sceneInfra,
+      })
+      if (err(result)) return
+      const { group: _group, updateOverlaysCallback } = result
+      seg = _group
+      callbacks.push(updateOverlaysCallback)
       seg.layers.set(SKETCH_LAYER)
       seg.traverse((child) => {
         child.layers.set(SKETCH_LAYER)
@@ -602,16 +571,19 @@ export class SceneEntities {
       kclManager.programMemory.get(variableDeclarationName),
       variableDeclarationName
     )
-    if (err(sg)) return sg
-    const lastSeg = sg.value?.slice(-1)[0] || sg.start
+    if (err(sg)) return Promise.reject(sg)
+    const lastSeg = sg?.value?.slice(-1)[0] || sg.start
 
     const index = sg.value.length // because we've added a new segment that's not in the memory yet, no need for `-1`
 
     const mod = addNewSketchLn({
       node: _ast,
       programMemory: kclManager.programMemory,
-      to: [lastSeg.to[0], lastSeg.to[1]],
-      from: [lastSeg.to[0], lastSeg.to[1]],
+      input: {
+        type: 'straight-segment',
+        to: lastSeg.to,
+        from: lastSeg.to,
+      },
       fnName: segmentName,
       pathToNode: sketchPathToNode,
     })
@@ -634,6 +606,7 @@ export class SceneEntities {
         draftExpressionsIndices,
       })
     sceneInfra.setCallbacks({
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onClick: async (args) => {
         if (!args) return
         if (args.mouseEvent.which !== 1) return
@@ -681,8 +654,11 @@ export class SceneEntities {
           const tmp = addNewSketchLn({
             node: kclManager.ast,
             programMemory: kclManager.programMemory,
-            to: [intersection2d.x, intersection2d.y],
-            from: [lastSegment.to[0], lastSegment.to[1]],
+            input: {
+              type: 'straight-segment',
+              from: [lastSegment.to[0], lastSegment.to[1]],
+              to: [intersection2d.x, intersection2d.y],
+            },
             fnName:
               lastSegment.type === 'TangentialArcTo'
                 ? 'tangentialArcTo'
@@ -701,7 +677,7 @@ export class SceneEntities {
         if (profileStart) {
           sceneInfra.modelingSend({ type: 'CancelSketch' })
         } else {
-          this.setUpDraftSegment(
+          await this.setUpDraftSegment(
             sketchPathToNode,
             forward,
             up,
@@ -771,6 +747,7 @@ export class SceneEntities {
     })
 
     sceneInfra.setCallbacks({
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onMove: async (args) => {
         // Update the width and height of the draft rectangle
         const pathToNodeTwo = structuredClone(sketchPathToNode)
@@ -818,6 +795,7 @@ export class SceneEntities {
           this.updateSegment(seg, index, 0, _ast, orthoFactor, sketchGroup)
         )
       },
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onClick: async (args) => {
         // Commit the rectangle to the full AST/code and return to sketch.idle
         const cornerPoint = args.intersectionPoint?.twoD
@@ -831,14 +809,14 @@ export class SceneEntities {
           sketchPathToNode || [],
           'VariableDeclaration'
         )
-        if (trap(_node)) return Promise.reject(_node)
+        if (trap(_node)) return
         const sketchInit = _node.node?.declarations?.[0]?.init
 
         if (sketchInit.type === 'PipeExpression') {
           updateRectangleSketch(sketchInit, x, y, tags[0])
 
           let _recastAst = parse(recast(_ast))
-          if (trap(_recastAst)) return Promise.reject(_recastAst)
+          if (trap(_recastAst)) return
           _ast = _recastAst
 
           // Update the primary AST and unequip the rectangle tool
@@ -858,7 +836,7 @@ export class SceneEntities {
             programMemory.get(variableDeclarationName),
             variableDeclarationName
           )
-          if (err(sketchGroup)) return sketchGroup
+          if (err(sketchGroup)) return
           const sgPaths = sketchGroup.value
           const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
@@ -892,9 +870,11 @@ export class SceneEntities {
   }) => {
     let addingNewSegmentStatus: 'nothing' | 'pending' | 'added' = 'nothing'
     sceneInfra.setCallbacks({
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onDragEnd: async () => {
         if (addingNewSegmentStatus !== 'nothing') {
           await this.tearDownSketch({ removeAxis: false })
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
           this.setupSketch({
             sketchPathToNode: pathToNode,
             maybeModdedAst: kclManager.ast,
@@ -911,6 +891,7 @@ export class SceneEntities {
           })
         }
       },
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onDrag: async ({
         selected,
         intersectionPoint,
@@ -944,8 +925,11 @@ export class SceneEntities {
             const mod = addNewSketchLn({
               node: kclManager.ast,
               programMemory: kclManager.programMemory,
-              to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
-              from: [prevSegment.from[0], prevSegment.from[1]],
+              input: {
+                type: 'straight-segment',
+                to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
+                from: prevSegment.from,
+              },
               // TODO assuming it's always a straight segments being added
               // as this is easiest, and we'll need to add "tabbing" behavior
               // to support other segment types
@@ -958,6 +942,7 @@ export class SceneEntities {
 
             await kclManager.executeAstMock(mod.modifiedAst)
             await this.tearDownSketch({ removeAxis: false })
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             this.setupSketch({
               sketchPathToNode: pathToNode,
               maybeModdedAst: kclManager.ast,
@@ -1065,7 +1050,7 @@ export class SceneEntities {
       group.userData.from[0],
       group.userData.from[1],
     ]
-    const to: [number, number] = [intersection2d.x, intersection2d.y]
+    const dragTo: [number, number] = [intersection2d.x, intersection2d.y]
     let modifiedAst = draftInfo ? draftInfo.truncatedAst : { ...kclManager.ast }
 
     const _node = getNodeFromPath<CallExpression>(
@@ -1088,8 +1073,11 @@ export class SceneEntities {
       modded = updateStartProfileAtArgs({
         node: modifiedAst,
         pathToNode,
-        to,
-        from,
+        input: {
+          type: 'straight-segment',
+          to: dragTo,
+          from,
+        },
         previousProgramMemory: kclManager.programMemory,
       })
     } else {
@@ -1097,8 +1085,11 @@ export class SceneEntities {
         modifiedAst,
         kclManager.programMemory,
         [node.start, node.end],
-        to,
-        from
+        {
+          type: 'straight-segment',
+          from,
+          to: dragTo,
+        }
       )
     }
     if (trap(modded)) return
@@ -1161,7 +1152,7 @@ export class SceneEntities {
         )
       )
       sceneInfra.overlayCallbacks(callBacks)
-    })()
+    })().catch(reportRejection)
   }
 
   /**
@@ -1201,269 +1192,54 @@ export class SceneEntities {
         ? orthoFactor
         : perspScale(sceneInfra.camControls.camera, group)) /
       sceneInfra._baseUnitMultiplier
+    const input = {
+      type: 'straight-segment',
+      from: segment.from,
+      to: segment.to,
+    } as const
+    let update: SegmentUtils['update'] | null = null
     if (type === TANGENTIAL_ARC_TO_SEGMENT) {
-      return this.updateTangentialArcToSegment({
-        prevSegment: sgPaths[index - 1],
-        from: segment.from,
-        to: segment.to,
-        group: group,
-        scale: factor,
-      })
+      update = segmentUtils.tangentialArcTo.update
     } else if (type === STRAIGHT_SEGMENT) {
-      return this.updateStraightSegment({
-        from: segment.from,
-        to: segment.to,
+      update = segmentUtils.straight.update
+    }
+    const callBack =
+      update &&
+      !err(update) &&
+      update({
+        input,
         group,
         scale: factor,
+        prevSegment: sgPaths[index - 1],
+        sceneInfra,
       })
-    } else if (type === PROFILE_START) {
+    if (callBack && !err(callBack)) return callBack
+
+    if (type === PROFILE_START) {
       group.position.set(segment.from[0], segment.from[1], 0)
       group.scale.set(factor, factor, factor)
     }
     return () => null
   }
 
-  updateTangentialArcToSegment({
-    prevSegment,
-    from,
-    to,
-    group,
-    scale = 1,
-  }: {
-    prevSegment: SketchGroup['value'][number]
-    from: [number, number]
-    to: [number, number]
-    group: Group
-    scale?: number
-  }): () => SegmentOverlayPayload | null {
-    group.userData.from = from
-    group.userData.to = to
-    group.userData.prevSegment = prevSegment
-    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
-
-    const previousPoint =
-      prevSegment?.type === 'TangentialArcTo'
-        ? getTangentPointFromPreviousArc(
-            prevSegment.center,
-            prevSegment.ccw,
-            prevSegment.to
-          )
-        : prevSegment.from
-
-    const arcInfo = getTangentialArcToInfo({
-      arcStartPoint: from,
-      arcEndPoint: to,
-      tanPreviousPoint: previousPoint,
-      obtuse: true,
+  /**
+   * Update the base color of each of the THREEjs meshes
+   * that represent each of the sketch segments, to get the
+   * latest value from `sceneInfra._theme`
+   */
+  updateSegmentBaseColor(newColor: Themes.Light | Themes.Dark) {
+    const newColorThreeJs = getThemeColorForThreeJs(newColor)
+    Object.values(this.activeSegments).forEach((group) => {
+      group.userData.baseColor = newColorThreeJs
+      group.traverse((child) => {
+        if (
+          child instanceof Mesh &&
+          child.material instanceof MeshBasicMaterial
+        ) {
+          child.material.color.set(newColorThreeJs)
+        }
+      })
     })
-
-    const pxLength = arcInfo.arcLength / scale
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
-
-    const hoveredParent =
-      sceneInfra.hoveredObject &&
-      getParentGroup(sceneInfra.hoveredObject, [TANGENTIAL_ARC_TO_SEGMENT])
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
-    if (arrowGroup) {
-      arrowGroup.position.set(to[0], to[1], 0)
-
-      const arrowheadAngle =
-        arcInfo.endAngle + (Math.PI / 2) * (arcInfo.ccw ? 1 : -1)
-      arrowGroup.quaternion.setFromUnitVectors(
-        new Vector3(0, 1, 0),
-        new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
-      )
-      arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    if (extraSegmentGroup) {
-      const circumferenceInPx = (2 * Math.PI * arcInfo.radius) / scale
-      const extraSegmentAngleDelta =
-        (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
-      const extraSegmentAngle =
-        arcInfo.startAngle + (arcInfo.ccw ? 1 : -1) * extraSegmentAngleDelta
-      const extraSegmentOffset = new Vector2(
-        Math.cos(extraSegmentAngle) * arcInfo.radius,
-        Math.sin(extraSegmentAngle) * arcInfo.radius
-      )
-      extraSegmentGroup.position.set(
-        arcInfo.center[0] + extraSegmentOffset.x,
-        arcInfo.center[1] + extraSegmentOffset.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
-    }
-
-    const tangentialArcToSegmentBody = group.children.find(
-      (child) => child.userData.type === TANGENTIAL_ARC_TO_SEGMENT_BODY
-    ) as Mesh
-
-    if (tangentialArcToSegmentBody) {
-      const newGeo = createArcGeometry({ ...arcInfo, scale })
-      tangentialArcToSegmentBody.geometry = newGeo
-    }
-    const tangentialArcToSegmentBodyDashed = group.children.find(
-      (child) => child.userData.type === TANGENTIAL_ARC_TO__SEGMENT_DASH
-    ) as Mesh
-    if (tangentialArcToSegmentBodyDashed) {
-      // consider throttling the whole updateTangentialArcToSegment
-      // if there are more perf considerations going forward
-      this.throttledUpdateDashedArcGeo({
-        ...arcInfo,
-        mesh: tangentialArcToSegmentBodyDashed,
-        isDashed: true,
-        scale,
-      })
-    }
-    const angle = normaliseAngle(
-      (arcInfo.endAngle * 180) / Math.PI + (arcInfo.ccw ? 90 : -90)
-    )
-    return () =>
-      sceneInfra.updateOverlayDetails({
-        arrowGroup,
-        group,
-        isHandlesVisible,
-        from,
-        to,
-        angle,
-      })
-  }
-  throttledUpdateDashedArcGeo = throttle(
-    (
-      args: Parameters<typeof createArcGeometry>[0] & {
-        mesh: Mesh
-        scale: number
-      }
-    ) => (args.mesh.geometry = createArcGeometry(args)),
-    1000 / 30
-  )
-  updateStraightSegment({
-    from,
-    to,
-    group,
-    scale = 1,
-  }: {
-    from: [number, number]
-    to: [number, number]
-    group: Group
-    scale?: number
-  }): () => SegmentOverlayPayload | null {
-    group.userData.from = from
-    group.userData.to = to
-    const shape = new Shape()
-    shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
-    shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
-    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const labelGroup = group.getObjectByName(SEGMENT_LENGTH_LABEL) as Group
-
-    const length = Math.sqrt(
-      Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
-    )
-
-    const pxLength = length / scale
-    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
-    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
-
-    const hoveredParent =
-      sceneInfra.hoveredObject &&
-      getParentGroup(sceneInfra.hoveredObject, [STRAIGHT_SEGMENT])
-    let isHandlesVisible = !shouldHideIdle
-    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
-      isHandlesVisible = !shouldHideHover
-    }
-
-    if (arrowGroup) {
-      arrowGroup.position.set(to[0], to[1], 0)
-
-      const dir = new Vector3()
-        .subVectors(
-          new Vector3(to[0], to[1], 0),
-          new Vector3(from[0], from[1], 0)
-        )
-        .normalize()
-      arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
-      arrowGroup.scale.set(scale, scale, scale)
-      arrowGroup.visible = isHandlesVisible
-    }
-
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
-    if (extraSegmentGroup) {
-      const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
-        .normalize()
-        .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
-      extraSegmentGroup.position.set(
-        from[0] + offsetFromBase.x,
-        from[1] + offsetFromBase.y,
-        0
-      )
-      extraSegmentGroup.scale.set(scale, scale, scale)
-      extraSegmentGroup.visible = isHandlesVisible
-    }
-
-    if (labelGroup) {
-      const labelWrapper = labelGroup.getObjectByName(
-        SEGMENT_LENGTH_LABEL_TEXT
-      ) as CSS2DObject
-      const labelWrapperElem = labelWrapper.element as HTMLDivElement
-      const label = labelWrapperElem.children[0] as HTMLParagraphElement
-      label.innerText = `${roundOff(length)}${sceneInfra._baseUnit}`
-      label.classList.add(SEGMENT_LENGTH_LABEL_TEXT)
-      const offsetFromMidpoint = new Vector2(to[0] - from[0], to[1] - from[1])
-        .normalize()
-        .rotateAround(new Vector2(0, 0), Math.PI / 2)
-        .multiplyScalar(SEGMENT_LENGTH_LABEL_OFFSET_PX * scale)
-      label.style.setProperty('--x', `${offsetFromMidpoint.x}px`)
-      label.style.setProperty('--y', `${offsetFromMidpoint.y}px`)
-      labelWrapper.position.set(
-        (from[0] + to[0]) / 2 + offsetFromMidpoint.x,
-        (from[1] + to[1]) / 2 + offsetFromMidpoint.y,
-        0
-      )
-
-      labelGroup.visible = isHandlesVisible
-    }
-
-    const straightSegmentBody = group.children.find(
-      (child) => child.userData.type === STRAIGHT_SEGMENT_BODY
-    ) as Mesh
-    if (straightSegmentBody) {
-      const line = new LineCurve3(
-        new Vector3(from[0], from[1], 0),
-        new Vector3(to[0], to[1], 0)
-      )
-      straightSegmentBody.geometry = new ExtrudeGeometry(shape, {
-        steps: 2,
-        bevelEnabled: false,
-        extrudePath: line,
-      })
-    }
-    const straightSegmentBodyDashed = group.children.find(
-      (child) => child.userData.type === STRAIGHT_SEGMENT_DASH
-    ) as Mesh
-    if (straightSegmentBodyDashed) {
-      straightSegmentBodyDashed.geometry = dashedStraight(
-        from,
-        to,
-        shape,
-        scale
-      )
-    }
-    return () =>
-      sceneInfra.updateOverlayDetails({
-        arrowGroup,
-        group,
-        isHandlesVisible,
-        from,
-        to,
-      })
   }
   removeSketchGrid() {
     if (this.axisGroup) this.scene.remove(this.axisGroup)
@@ -1558,27 +1334,30 @@ export class SceneEntities {
           }
           const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
+          const input = {
+            type: 'straight-segment',
+            from: parent.userData.from,
+            to: parent.userData.to,
+          } as const
           const factor =
             (sceneInfra.camControls.camera instanceof OrthographicCamera
               ? orthoFactor
               : perspScale(sceneInfra.camControls.camera, parent)) /
             sceneInfra._baseUnitMultiplier
+          let update: SegmentUtils['update'] | null = null
           if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
+            update = segmentUtils.straight.update
           } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
+            update = segmentUtils.tangentialArcTo.update
+          }
+          update &&
+            update({
               prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
+              input,
               group: parent,
               scale: factor,
+              sceneInfra,
             })
-          }
           return
         }
         editorManager.setHighlightRange([[0, 0]])
@@ -1593,27 +1372,30 @@ export class SceneEntities {
         if (parent) {
           const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
+          const input = {
+            type: 'straight-segment',
+            from: parent.userData.from,
+            to: parent.userData.to,
+          } as const
           const factor =
             (sceneInfra.camControls.camera instanceof OrthographicCamera
               ? orthoFactor
               : perspScale(sceneInfra.camControls.camera, parent)) /
             sceneInfra._baseUnitMultiplier
+          let update: SegmentUtils['update'] | null = null
           if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
+            update = segmentUtils.straight.update
           } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
+            update = segmentUtils.tangentialArcTo.update
+          }
+          update &&
+            update({
               prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
+              input,
               group: parent,
               scale: factor,
+              sceneInfra,
             })
-          }
         }
         const isSelected = parent?.userData?.isSelected
         colorSegment(

src/clientSideScene/sceneInfra.ts

@@ -105,10 +105,6 @@ export class SceneInfra {
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
   _theme: Themes = Themes.System
-  _streamDimensions: { streamWidth: number; streamHeight: number } = {
-    streamWidth: 1280,
-    streamHeight: 720,
-  }
   extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
   onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}

src/clientSideScene/segments.ts

@@ -26,6 +26,7 @@ import { PathToNode, SketchGroup, getTangentialArcToInfo } from 'lang/wasm'
 import {
   EXTRA_SEGMENT_HANDLE,
   EXTRA_SEGMENT_OFFSET_PX,
+  HIDE_HOVER_SEGMENT_LENGTH,
   HIDE_SEGMENT_LENGTH,
   PROFILE_START,
   SEGMENT_WIDTH_PX,
@@ -35,18 +36,448 @@ import {
   TANGENTIAL_ARC_TO_SEGMENT,
   TANGENTIAL_ARC_TO_SEGMENT_BODY,
   TANGENTIAL_ARC_TO__SEGMENT_DASH,
+  getParentGroup,
 } from './sceneEntities'
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import {
   ARROWHEAD,
+  SceneInfra,
   SEGMENT_LENGTH_LABEL,
   SEGMENT_LENGTH_LABEL_OFFSET_PX,
   SEGMENT_LENGTH_LABEL_TEXT,
 } from './sceneInfra'
 import { Themes, getThemeColorForThreeJs } from 'lib/theme'
-import { roundOff } from 'lib/utils'
+import { normaliseAngle, roundOff } from 'lib/utils'
+import { SegmentOverlayPayload } from 'machines/modelingMachine'
+import { SegmentInputs } from 'lang/std/stdTypes'
+import { err } from 'lib/trap'
 
-export function profileStart({
+interface CreateSegmentArgs {
+  input: SegmentInputs
+  prevSegment: SketchGroup['value'][number]
+  id: string
+  pathToNode: PathToNode
+  isDraftSegment?: boolean
+  scale?: number
+  callExpName: string
+  texture: Texture
+  theme: Themes
+  isSelected?: boolean
+  sceneInfra: SceneInfra
+}
+
+interface UpdateSegmentArgs {
+  input: SegmentInputs
+  prevSegment: SketchGroup['value'][number]
+  group: Group
+  sceneInfra: SceneInfra
+  scale?: number
+}
+
+interface CreateSegmentResult {
+  group: Group
+  updateOverlaysCallback: () => SegmentOverlayPayload | null
+}
+
+export interface SegmentUtils {
+  /**
+   * the init is responsible for adding all of the correct entities to the group with important details like `mesh.name = ...`
+   * as these act like handles later
+   *
+   * It's **Not** responsible for doing all calculations to size and position the entities as this would be duplicated in the update function
+   * Which should instead be called at the end of the init function
+   */
+  init: (args: CreateSegmentArgs) => CreateSegmentResult | Error
+  /**
+   * The update function is responsible for updating the group with the correct size and position of the entities
+   * It should be called at the end of the init function and return a callback that can be used to update the overlay
+   *
+   * It returns a callback for updating the overlays, this is so the overlays do not have to update at the same pace threeJs does
+   * This is useful for performance reasons
+   */
+  update: (
+    args: UpdateSegmentArgs
+  ) => CreateSegmentResult['updateOverlaysCallback'] | Error
+}
+
+class StraightSegment implements SegmentUtils {
+  init: SegmentUtils['init'] = ({
+    input,
+    id,
+    pathToNode,
+    isDraftSegment,
+    scale = 1,
+    callExpName,
+    texture,
+    theme,
+    isSelected = false,
+    sceneInfra,
+    prevSegment,
+  }) => {
+    if (input.type !== 'straight-segment')
+      return new Error('Invalid segment type')
+    const { from, to } = input
+    const baseColor =
+      callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
+    const color = isSelected ? 0x0000ff : baseColor
+    const meshType = isDraftSegment
+      ? STRAIGHT_SEGMENT_DASH
+      : STRAIGHT_SEGMENT_BODY
+
+    const segmentGroup = new Group()
+    const shape = new Shape()
+    const line = new LineCurve3(
+      new Vector3(from[0], from[1], 0),
+      new Vector3(to[0], to[1], 0)
+    )
+    const geometry = new ExtrudeGeometry(shape, {
+      steps: 2,
+      bevelEnabled: false,
+      extrudePath: line,
+    })
+    const body = new MeshBasicMaterial({ color })
+    const mesh = new Mesh(geometry, body)
+
+    mesh.userData.type = meshType
+    mesh.name = meshType
+    segmentGroup.name = STRAIGHT_SEGMENT
+    segmentGroup.userData = {
+      type: STRAIGHT_SEGMENT,
+      id,
+      from,
+      to,
+      pathToNode,
+      isSelected,
+      callExpName,
+      baseColor,
+    }
+
+    // All segment types get an extra segment handle,
+    // Which is a little plus sign that appears at the origin of the segment
+    // and can be dragged to insert a new segment
+    const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
+
+    // Segment decorators that only apply to non-close segments
+    if (callExpName !== 'close') {
+      // an arrowhead that appears at the end of the segment
+      const arrowGroup = createArrowhead(scale, theme, color)
+      // A length indicator that appears at the midpoint of the segment
+      const lengthIndicatorGroup = createLengthIndicator({
+        from,
+        to,
+        scale,
+      })
+      segmentGroup.add(arrowGroup)
+      segmentGroup.add(lengthIndicatorGroup)
+    }
+
+    segmentGroup.add(mesh, extraSegmentGroup)
+    let updateOverlaysCallback = this.update({
+      prevSegment,
+      input,
+      group: segmentGroup,
+      scale,
+      sceneInfra,
+    })
+    if (err(updateOverlaysCallback)) return updateOverlaysCallback
+
+    return {
+      group: segmentGroup,
+      updateOverlaysCallback,
+    }
+  }
+
+  update: SegmentUtils['update'] = ({
+    input,
+    group,
+    scale = 1,
+    sceneInfra,
+  }) => {
+    if (input.type !== 'straight-segment')
+      return new Error('Invalid segment type')
+    const { from, to } = input
+    group.userData.from = from
+    group.userData.to = to
+    const shape = new Shape()
+    shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
+    shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
+    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
+    const labelGroup = group.getObjectByName(SEGMENT_LENGTH_LABEL) as Group
+
+    const length = Math.sqrt(
+      Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
+    )
+
+    const pxLength = length / scale
+    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
+    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
+
+    const hoveredParent =
+      sceneInfra.hoveredObject &&
+      getParentGroup(sceneInfra.hoveredObject, [STRAIGHT_SEGMENT])
+    let isHandlesVisible = !shouldHideIdle
+    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
+      isHandlesVisible = !shouldHideHover
+    }
+
+    if (arrowGroup) {
+      arrowGroup.position.set(to[0], to[1], 0)
+
+      const dir = new Vector3()
+        .subVectors(
+          new Vector3(to[0], to[1], 0),
+          new Vector3(from[0], from[1], 0)
+        )
+        .normalize()
+      arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
+      arrowGroup.scale.set(scale, scale, scale)
+      arrowGroup.visible = isHandlesVisible
+    }
+
+    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
+    if (extraSegmentGroup) {
+      const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
+        .normalize()
+        .multiplyScalar(EXTRA_SEGMENT_OFFSET_PX * scale)
+      extraSegmentGroup.position.set(
+        from[0] + offsetFromBase.x,
+        from[1] + offsetFromBase.y,
+        0
+      )
+      extraSegmentGroup.scale.set(scale, scale, scale)
+      extraSegmentGroup.visible = isHandlesVisible
+    }
+
+    if (labelGroup) {
+      const labelWrapper = labelGroup.getObjectByName(
+        SEGMENT_LENGTH_LABEL_TEXT
+      ) as CSS2DObject
+      const labelWrapperElem = labelWrapper.element as HTMLDivElement
+      const label = labelWrapperElem.children[0] as HTMLParagraphElement
+      label.innerText = `${roundOff(length)}`
+      label.classList.add(SEGMENT_LENGTH_LABEL_TEXT)
+      const slope = (to[1] - from[1]) / (to[0] - from[0])
+      let slopeAngle = ((Math.atan(slope) * 180) / Math.PI) * -1
+      label.style.setProperty('--degree', `${slopeAngle}deg`)
+      label.style.setProperty('--x', `0px`)
+      label.style.setProperty('--y', `0px`)
+      labelWrapper.position.set((from[0] + to[0]) / 2, (from[1] + to[1]) / 2, 0)
+      labelGroup.visible = isHandlesVisible
+    }
+
+    const straightSegmentBody = group.children.find(
+      (child) => child.userData.type === STRAIGHT_SEGMENT_BODY
+    ) as Mesh
+    if (straightSegmentBody) {
+      const line = new LineCurve3(
+        new Vector3(from[0], from[1], 0),
+        new Vector3(to[0], to[1], 0)
+      )
+      straightSegmentBody.geometry = new ExtrudeGeometry(shape, {
+        steps: 2,
+        bevelEnabled: false,
+        extrudePath: line,
+      })
+    }
+    const straightSegmentBodyDashed = group.children.find(
+      (child) => child.userData.type === STRAIGHT_SEGMENT_DASH
+    ) as Mesh
+    if (straightSegmentBodyDashed) {
+      straightSegmentBodyDashed.geometry = dashedStraight(
+        from,
+        to,
+        shape,
+        scale
+      )
+    }
+    return () =>
+      sceneInfra.updateOverlayDetails({
+        arrowGroup,
+        group,
+        isHandlesVisible,
+        from,
+        to,
+      })
+  }
+}
+
+class TangentialArcToSegment implements SegmentUtils {
+  init: SegmentUtils['init'] = ({
+    prevSegment,
+    input,
+    id,
+    pathToNode,
+    isDraftSegment,
+    scale = 1,
+    texture,
+    theme,
+    isSelected,
+    sceneInfra,
+  }) => {
+    if (input.type !== 'straight-segment')
+      return new Error('Invalid segment type')
+    const { from, to } = input
+    const meshName = isDraftSegment
+      ? TANGENTIAL_ARC_TO__SEGMENT_DASH
+      : TANGENTIAL_ARC_TO_SEGMENT_BODY
+
+    const group = new Group()
+    const geometry = createArcGeometry({
+      center: [0, 0],
+      radius: 1,
+      startAngle: 0,
+      endAngle: 1,
+      ccw: true,
+      isDashed: isDraftSegment,
+      scale,
+    })
+    const baseColor = getThemeColorForThreeJs(theme)
+    const color = isSelected ? 0x0000ff : baseColor
+    const body = new MeshBasicMaterial({ color })
+    const mesh = new Mesh(geometry, body)
+    const arrowGroup = createArrowhead(scale, theme, color)
+    const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
+
+    group.name = TANGENTIAL_ARC_TO_SEGMENT
+    mesh.userData.type = meshName
+    mesh.name = meshName
+    group.userData = {
+      type: TANGENTIAL_ARC_TO_SEGMENT,
+      id,
+      from,
+      to,
+      prevSegment,
+      pathToNode,
+      isSelected,
+      baseColor,
+    }
+
+    group.add(mesh, arrowGroup, extraSegmentGroup)
+    const updateOverlaysCallback = this.update({
+      prevSegment,
+      input,
+      group,
+      scale,
+      sceneInfra,
+    })
+    if (err(updateOverlaysCallback)) return updateOverlaysCallback
+
+    return {
+      group,
+      updateOverlaysCallback,
+    }
+  }
+
+  update: SegmentUtils['update'] = ({
+    prevSegment,
+    input,
+    group,
+    scale = 1,
+    sceneInfra,
+  }) => {
+    if (input.type !== 'straight-segment')
+      return new Error('Invalid segment type')
+    const { from, to } = input
+    group.userData.from = from
+    group.userData.to = to
+    group.userData.prevSegment = prevSegment
+    const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
+    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
+
+    const previousPoint =
+      prevSegment?.type === 'TangentialArcTo'
+        ? getTangentPointFromPreviousArc(
+            prevSegment.center,
+            prevSegment.ccw,
+            prevSegment.to
+          )
+        : prevSegment.from
+
+    const arcInfo = getTangentialArcToInfo({
+      arcStartPoint: from,
+      arcEndPoint: to,
+      tanPreviousPoint: previousPoint,
+      obtuse: true,
+    })
+
+    const pxLength = arcInfo.arcLength / scale
+    const shouldHideIdle = pxLength < HIDE_SEGMENT_LENGTH
+    const shouldHideHover = pxLength < HIDE_HOVER_SEGMENT_LENGTH
+
+    const hoveredParent =
+      sceneInfra?.hoveredObject &&
+      getParentGroup(sceneInfra.hoveredObject, [TANGENTIAL_ARC_TO_SEGMENT])
+    let isHandlesVisible = !shouldHideIdle
+    if (hoveredParent && hoveredParent?.uuid === group?.uuid) {
+      isHandlesVisible = !shouldHideHover
+    }
+
+    if (arrowGroup) {
+      arrowGroup.position.set(to[0], to[1], 0)
+
+      const arrowheadAngle =
+        arcInfo.endAngle + (Math.PI / 2) * (arcInfo.ccw ? 1 : -1)
+      arrowGroup.quaternion.setFromUnitVectors(
+        new Vector3(0, 1, 0),
+        new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
+      )
+      arrowGroup.scale.set(scale, scale, scale)
+      arrowGroup.visible = isHandlesVisible
+    }
+
+    if (extraSegmentGroup) {
+      const circumferenceInPx = (2 * Math.PI * arcInfo.radius) / scale
+      const extraSegmentAngleDelta =
+        (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
+      const extraSegmentAngle =
+        arcInfo.startAngle + (arcInfo.ccw ? 1 : -1) * extraSegmentAngleDelta
+      const extraSegmentOffset = new Vector2(
+        Math.cos(extraSegmentAngle) * arcInfo.radius,
+        Math.sin(extraSegmentAngle) * arcInfo.radius
+      )
+      extraSegmentGroup.position.set(
+        arcInfo.center[0] + extraSegmentOffset.x,
+        arcInfo.center[1] + extraSegmentOffset.y,
+        0
+      )
+      extraSegmentGroup.scale.set(scale, scale, scale)
+      extraSegmentGroup.visible = isHandlesVisible
+    }
+
+    const tangentialArcToSegmentBody = group.children.find(
+      (child) => child.userData.type === TANGENTIAL_ARC_TO_SEGMENT_BODY
+    ) as Mesh
+
+    if (tangentialArcToSegmentBody) {
+      const newGeo = createArcGeometry({ ...arcInfo, scale })
+      tangentialArcToSegmentBody.geometry = newGeo
+    }
+    const tangentialArcToSegmentBodyDashed = group.getObjectByName(
+      TANGENTIAL_ARC_TO__SEGMENT_DASH
+    )
+    if (tangentialArcToSegmentBodyDashed instanceof Mesh) {
+      tangentialArcToSegmentBodyDashed.geometry = createArcGeometry({
+        ...arcInfo,
+        isDashed: true,
+        scale,
+      })
+    }
+    const angle = normaliseAngle(
+      (arcInfo.endAngle * 180) / Math.PI + (arcInfo.ccw ? 90 : -90)
+    )
+    return () =>
+      sceneInfra.updateOverlayDetails({
+        arrowGroup,
+        group,
+        isHandlesVisible,
+        from,
+        to,
+        angle,
+      })
+  }
+}
+
+export function createProfileStartHandle({
   from,
   id,
   pathToNode,
@@ -85,127 +516,6 @@ export function profileStart({
   return group
 }
 
-export function straightSegment({
-  from,
-  to,
-  id,
-  pathToNode,
-  isDraftSegment,
-  scale = 1,
-  callExpName,
-  texture,
-  theme,
-  isSelected = false,
-}: {
-  from: Coords2d
-  to: Coords2d
-  id: string
-  pathToNode: PathToNode
-  isDraftSegment?: boolean
-  scale?: number
-  callExpName: string
-  texture: Texture
-  theme: Themes
-  isSelected?: boolean
-}): Group {
-  const segmentGroup = new Group()
-
-  const shape = new Shape()
-  shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale)
-  shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
-
-  let geometry
-  if (isDraftSegment) {
-    geometry = dashedStraight(from, to, shape, scale)
-  } else {
-    const line = new LineCurve3(
-      new Vector3(from[0], from[1], 0),
-      new Vector3(to[0], to[1], 0)
-    )
-
-    geometry = new ExtrudeGeometry(shape, {
-      steps: 2,
-      bevelEnabled: false,
-      extrudePath: line,
-    })
-  }
-
-  const baseColor =
-    callExpName === 'close' ? 0x444444 : getThemeColorForThreeJs(theme)
-  const color = isSelected ? 0x0000ff : baseColor
-  const body = new MeshBasicMaterial({ color })
-  const mesh = new Mesh(geometry, body)
-  mesh.userData.type = isDraftSegment
-    ? STRAIGHT_SEGMENT_DASH
-    : STRAIGHT_SEGMENT_BODY
-  mesh.name = STRAIGHT_SEGMENT_BODY
-
-  segmentGroup.userData = {
-    type: STRAIGHT_SEGMENT,
-    id,
-    from,
-    to,
-    pathToNode,
-    isSelected,
-    callExpName,
-    baseColor,
-  }
-  segmentGroup.name = STRAIGHT_SEGMENT
-  segmentGroup.add(mesh)
-
-  const length = Math.sqrt(
-    Math.pow(to[0] - from[0], 2) + Math.pow(to[1] - from[1], 2)
-  )
-  const pxLength = length / scale
-  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
-
-  // All segment types get an extra segment handle,
-  // Which is a little plus sign that appears at the origin of the segment
-  // and can be dragged to insert a new segment
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
-  const directionVector = new Vector2(
-    to[0] - from[0],
-    to[1] - from[1]
-  ).normalize()
-  const offsetFromBase = directionVector.multiplyScalar(
-    EXTRA_SEGMENT_OFFSET_PX * scale
-  )
-  extraSegmentGroup.position.set(
-    from[0] + offsetFromBase.x,
-    from[1] + offsetFromBase.y,
-    0
-  )
-  extraSegmentGroup.visible = !shouldHide
-  segmentGroup.add(extraSegmentGroup)
-
-  // Segment decorators that only apply to non-close segments
-  if (callExpName !== 'close') {
-    // an arrowhead that appears at the end of the segment
-    const arrowGroup = createArrowhead(scale, theme, color)
-    arrowGroup.position.set(to[0], to[1], 0)
-    const dir = new Vector3()
-      .subVectors(
-        new Vector3(to[0], to[1], 0),
-        new Vector3(from[0], from[1], 0)
-      )
-      .normalize()
-    arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
-    arrowGroup.visible = !shouldHide
-    segmentGroup.add(arrowGroup)
-
-    // A length indicator that appears at the midpoint of the segment
-    const lengthIndicatorGroup = createLengthIndicator({
-      from,
-      to,
-      scale,
-      length,
-    })
-    segmentGroup.add(lengthIndicatorGroup)
-  }
-
-  return segmentGroup
-}
-
 function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
   const baseColor = getThemeColorForThreeJs(theme)
   const arrowMaterial = new MeshBasicMaterial({
@@ -267,12 +577,12 @@ function createLengthIndicator({
   from,
   to,
   scale,
-  length,
+  length = 0.1,
 }: {
   from: Coords2d
   to: Coords2d
   scale: number
-  length: number
+  length?: number
 }) {
   const lengthIndicatorGroup = new Group()
   lengthIndicatorGroup.name = SEGMENT_LENGTH_LABEL
@@ -300,111 +610,6 @@ function createLengthIndicator({
   return lengthIndicatorGroup
 }
 
-export function tangentialArcToSegment({
-  prevSegment,
-  from,
-  to,
-  id,
-  pathToNode,
-  isDraftSegment,
-  scale = 1,
-  texture,
-  theme,
-  isSelected,
-}: {
-  prevSegment: SketchGroup['value'][number]
-  from: Coords2d
-  to: Coords2d
-  id: string
-  pathToNode: PathToNode
-  isDraftSegment?: boolean
-  scale?: number
-  texture: Texture
-  theme: Themes
-  isSelected?: boolean
-}): Group {
-  const group = new Group()
-
-  const previousPoint =
-    prevSegment?.type === 'TangentialArcTo'
-      ? getTangentPointFromPreviousArc(
-          prevSegment.center,
-          prevSegment.ccw,
-          prevSegment.to
-        )
-      : prevSegment.from
-
-  const { center, radius, startAngle, endAngle, ccw, arcLength } =
-    getTangentialArcToInfo({
-      arcStartPoint: from,
-      arcEndPoint: to,
-      tanPreviousPoint: previousPoint,
-      obtuse: true,
-    })
-
-  const geometry = createArcGeometry({
-    center,
-    radius,
-    startAngle,
-    endAngle,
-    ccw,
-    isDashed: isDraftSegment,
-    scale,
-  })
-
-  const baseColor = getThemeColorForThreeJs(theme)
-  const color = isSelected ? 0x0000ff : baseColor
-  const body = new MeshBasicMaterial({ color })
-  const mesh = new Mesh(geometry, body)
-  mesh.userData.type = isDraftSegment
-    ? TANGENTIAL_ARC_TO__SEGMENT_DASH
-    : TANGENTIAL_ARC_TO_SEGMENT_BODY
-
-  group.userData = {
-    type: TANGENTIAL_ARC_TO_SEGMENT,
-    id,
-    from,
-    to,
-    prevSegment,
-    pathToNode,
-    isSelected,
-    baseColor,
-  }
-  group.name = TANGENTIAL_ARC_TO_SEGMENT
-
-  const arrowGroup = createArrowhead(scale, theme, color)
-  arrowGroup.position.set(to[0], to[1], 0)
-  const arrowheadAngle = endAngle + (Math.PI / 2) * (ccw ? 1 : -1)
-  arrowGroup.quaternion.setFromUnitVectors(
-    new Vector3(0, 1, 0),
-    new Vector3(Math.cos(arrowheadAngle), Math.sin(arrowheadAngle), 0)
-  )
-  const pxLength = arcLength / scale
-  const shouldHide = pxLength < HIDE_SEGMENT_LENGTH
-  arrowGroup.visible = !shouldHide
-
-  const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
-  const circumferenceInPx = (2 * Math.PI * radius) / scale
-  const extraSegmentAngleDelta =
-    (EXTRA_SEGMENT_OFFSET_PX / circumferenceInPx) * Math.PI * 2
-  const extraSegmentAngle = startAngle + (ccw ? 1 : -1) * extraSegmentAngleDelta
-  const extraSegmentOffset = new Vector2(
-    Math.cos(extraSegmentAngle) * radius,
-    Math.sin(extraSegmentAngle) * radius
-  )
-  extraSegmentGroup.position.set(
-    center[0] + extraSegmentOffset.x,
-    center[1] + extraSegmentOffset.y,
-    0
-  )
-
-  extraSegmentGroup.visible = !shouldHide
-
-  group.add(mesh, arrowGroup, extraSegmentGroup)
-
-  return group
-}
-
 export function createArcGeometry({
   center,
   radius,
@@ -579,3 +784,8 @@ export function dashedStraight(
   geo.userData.type = 'dashed'
   return geo
 }
+
+export const segmentUtils = {
+  straight: new StraightSegment(),
+  tangentialArcTo: new TangentialArcToSegment(),
+} as const

src/components/AppHeader.module.css

@@ -6,6 +6,9 @@
   grid-template-columns: 1fr auto 1fr;
   user-select: none;
   -webkit-user-select: none;
+}
+
+.header.desktopApp {
   /* Make the header act as a handle to drag the electron app window,
    * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
    * all interactive elements opt-out of this behavior by default in src/index.css

src/components/AppHeader.tsx

@@ -6,6 +6,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { RefreshButton } from 'components/RefreshButton'
 import { CommandBarOpenButton } from './CommandBarOpenButton'
+import { isDesktop } from 'lib/isDesktop'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -32,7 +33,9 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 px-2 items-start ' +
+        ` ${
+          isDesktop() ? styles.desktopApp + ' ' : ''
+        }overlaid-panes sticky top-0 z-20 px-2 items-start ` +
         className
       }
       style={style}

src/components/AvailableVarsHelpers.tsx

@@ -151,6 +151,7 @@ export function useCalc({
         })
         if (trap(error)) return
       }
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       executeAst({
         ast,
         engineCommandManager,

src/components/CamToggle.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { EngineCommandManagerEvents } from 'lang/std/engineConnection'
 import { engineCommandManager, sceneInfra } from 'lib/singletons'
 import { throttle, isReducedMotion } from 'lib/utils'
+import { reportRejection } from 'lib/trap'
 
 const updateDollyZoom = throttle(
   (newFov: number) => sceneInfra.camControls.dollyZoom(newFov),
@@ -16,8 +17,8 @@ export const CamToggle = () => {
   useEffect(() => {
     engineCommandManager.addEventListener(
       EngineCommandManagerEvents.SceneReady,
-      async () => {
-        sceneInfra.camControls.dollyZoom(fov)
+      () => {
+        sceneInfra.camControls.dollyZoom(fov).catch(reportRejection)
       }
     )
   }, [])
@@ -26,11 +27,11 @@ export const CamToggle = () => {
     if (isPerspective) {
       isReducedMotion()
         ? sceneInfra.camControls.useOrthographicCamera()
-        : sceneInfra.camControls.animateToOrthographic()
+        : sceneInfra.camControls.animateToOrthographic().catch(reportRejection)
     } else {
       isReducedMotion()
-        ? sceneInfra.camControls.usePerspectiveCamera()
-        : sceneInfra.camControls.animateToPerspective()
+        ? sceneInfra.camControls.usePerspectiveCamera().catch(reportRejection)
+        : sceneInfra.camControls.animateToPerspective().catch(reportRejection)
     }
     setIsPerspective(!isPerspective)
   }

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -71,6 +71,17 @@ function CommandArgOptionInput({
     inputRef.current?.focus()
     inputRef.current?.select()
   }, [inputRef])
+  useEffect(() => {
+    // work around to make sure the user doesn't have to press the down arrow key to focus the first option
+    // instead this makes it move from the first hit
+    const downArrowEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      keyCode: 40,
+      which: 40,
+      bubbles: true,
+    })
+    inputRef?.current?.dispatchEvent(downArrowEvent)
+  }, [])
 
   // Filter the options based on the query,
   // resetting the query when the options change

src/components/CommandBar/CommandBarProvider.tsx

@@ -1,53 +1,43 @@
-import { useMachine } from '@xstate/react'
+import { createActorContext } from '@xstate/react'
 import { editorManager } from 'lib/singletons'
 import { commandBarMachine } from 'machines/commandBarMachine'
-import { createContext, useEffect } from 'react'
-import { EventFrom, StateFrom } from 'xstate'
+import { useEffect } from 'react'
 
-type CommandsContextType = {
-  commandBarState: StateFrom<typeof commandBarMachine>
-  commandBarSend: (event: EventFrom<typeof commandBarMachine>) => void
-}
-
-export const CommandsContext = createContext<CommandsContextType>({
-  commandBarState: commandBarMachine.initialState,
-  commandBarSend: () => {},
-})
-
-export const CommandBarProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const [commandBarState, commandBarSend] = useMachine(commandBarMachine, {
-    devTools: true,
+export const CommandsContext = createActorContext(
+  commandBarMachine.provide({
     guards: {
-      'Command has no arguments': (context, _event) => {
+      'Command has no arguments': ({ context }) => {
         return (
           !context.selectedCommand?.args ||
           Object.keys(context.selectedCommand?.args).length === 0
         )
       },
-      'All arguments are skippable': (context, _event) => {
+      'All arguments are skippable': ({ context }) => {
         return Object.values(context.selectedCommand!.args!).every(
           (argConfig) => argConfig.skip
         )
       },
     },
   })
+)
 
-  useEffect(() => {
-    editorManager.setCommandBarSend(commandBarSend)
-  })
-
+export const CommandBarProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
   return (
-    <CommandsContext.Provider
-      value={{
-        commandBarState,
-        commandBarSend,
-      }}
-    >
-      {children}
+    <CommandsContext.Provider>
+      <CommandBarProviderInner>{children}</CommandBarProviderInner>
     </CommandsContext.Provider>
   )
 }
+function CommandBarProviderInner({ children }: { children: React.ReactNode }) {
+  const commandBarActor = CommandsContext.useActorRef()
+
+  useEffect(() => {
+    editorManager.setCommandBarSend(commandBarActor.send)
+  })
+
+  return children
+}