Test a parser bug

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
-ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey,atleast
-skip: **/target,node_modules,build,**/Cargo.lock,./docs/kcl/*.md,./src-tauri/gen/schemas
+ignore-words-list: crate,everytime,inout,co-ordinate,ot,nwo,absolutey
+skip: **/target,node_modules,build,**/Cargo.lock,./docs/kcl/*.md

.github/dependabot.yml

@@ -9,27 +9,15 @@ updates:
       directory: '/' # Location of package manifests
       schedule:
           interval: 'daily'
-      reviewers:
-          - franknoirot 
-          - irev-dev
     - package-ecosystem: 'github-actions' # See documentation for possible values
       directory: '/' # Location of package manifests
       schedule:
           interval: 'daily'
-      reviewers:
-          - adamchalmers
-          - jessfraz
     - package-ecosystem: 'cargo' # See documentation for possible values
       directory: '/src/wasm-lib/' # Location of package manifests
       schedule:
           interval: 'daily'
-      reviewers:
-          - adamchalmers
-          - jessfraz
     - package-ecosystem: 'cargo' # See documentation for possible values
       directory: '/src-tauri/' # Location of package manifests
       schedule:
           interval: 'daily'
-      reviewers:
-          - adamchalmers
-          - jessfraz

.github/workflows/cargo-criterion.yml

@@ -7,23 +7,23 @@ on:
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
+      - .github/workflows/cargo-criterion.yml
   pull_request:
     paths:
       - '**.rs'
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
+      - .github/workflows/cargo-criterion.yml
   workflow_dispatch:
 permissions: read-all
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
-name: cargo bench
+name: cargo criterion
 jobs:
-  cargo-bench:
-    name: Benchmark with iai
+  cargocriterion:
+    name: cargo criterion
     runs-on: ubuntu-latest-8-cores
     steps:
       - uses: actions/checkout@v4
@@ -31,12 +31,10 @@ jobs:
       - name: Install dependencies
         run: |
           cargo install cargo-criterion
-          sudo apt update
-          sudo apt install -y valgrind
       - name: Rust Cache
         uses: Swatinem/rust-cache@v2.6.1
       - name: Benchmark kcl library
         shell: bash
         run: |-
-          cd src/wasm-lib/kcl; cargo bench -- iai
+          cd src/wasm-lib/kcl; cargo criterion
 

.github/workflows/ci.yml

@@ -104,11 +104,7 @@ jobs:
         run: |
           VERSION=$(date +'%-y.%-m.%-d') yarn bump-jsons
           echo "$(jq --arg url 'https://dl.zoo.dev/releases/modeling-app/nightly/last_update.json' \
-            '.plugins.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
-          echo "$(jq --arg id 'dev.zoo.modeling-app-nightly' \
-            '.identifier=$id' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
-          echo "$(jq --arg name 'Zoo Modeling App (Nightly)' \
-            '.productName=$name' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
+            '.tauri.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.json
 
       - uses: actions/upload-artifact@v3
         if: github.event_name == 'schedule'
@@ -129,9 +125,6 @@ jobs:
       fail-fast: false
       matrix:
         os: [macos-14, ubuntu-latest, windows-latest]
-    env:
-      TAURI_ARGS_MACOS: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
-      TAURI_ARGS_UBUNTU: ${{ matrix.os == 'ubuntu-latest' && '--bundles' || '' }}
     steps:
       - uses: actions/checkout@v4
 
@@ -151,12 +144,10 @@ jobs:
           sudo apt-get update &&
           sudo apt-get install -y
           libgtk-3-dev
-          libayatana-appindicator3-dev
+          libgtksourceview-3.0-dev
+          webkit2gtk-4.0
+          libappindicator3-dev
           webkit2gtk-driver
-          libsoup-3.0-dev
-          libjavascriptcoregtk-4.1-dev
-          libwebkit2gtk-4.1-dev
-          at-spi2-core
           xvfb
 
       - name: Sync node version and setup cache
@@ -170,9 +161,7 @@ jobs:
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
 
-      # TODO: re-enable for Windows builds, see https://github.com/tauri-apps/tauri/issues/9045
       - name: Setup Rust cache
-        if: matrix.os != 'windows-latest'
         uses: swatinem/rust-cache@v2
         with:
           workspaces: './src-tauri -> target'
@@ -235,14 +224,14 @@ jobs:
         with:
           includeRelease: false
           includeDebug: true
-          args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
+          args: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
 
       - name: Build the app (release) and sign
         uses: tauri-apps/tauri-action@v0
         if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
@@ -251,7 +240,7 @@ jobs:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           TAURI_CONF_ARGS: "--config ${{ matrix.os == 'windows-latest' && 'src-tauri\\tauri.release.conf.json' || 'src-tauri/tauri.release.conf.json' }}"
         with:
-          args: "${{ env.TAURI_CONF_ARGS }} ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
+          args: "${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
 
       - uses: actions/upload-artifact@v3
         if: matrix.os != 'ubuntu-latest'
@@ -261,11 +250,10 @@ jobs:
         with:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
-      # TODO: re-enable linux e2e tests when possible
       - name: Run e2e tests (linux only)
-        if: false
+        if: matrix.os == 'ubuntu-latest'
         run: |
-          cargo install tauri-driver
+          cargo install tauri-driver@0.1.3
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
           export VITE_KC_API_BASE_URL
           xvfb-run yarn test:e2e:tauri
@@ -285,7 +273,6 @@ jobs:
       NOTES: ${{ github.event_name == 'release' && github.event.release.body || format('Nightly build, commit {0}', github.sha) }}
       BUCKET_DIR: ${{ github.event_name == 'release' && 'dl.kittycad.io/releases/modeling-app' || 'dl.kittycad.io/releases/modeling-app/nightly' }}
       WEBSITE_DIR: ${{ github.event_name == 'release' && 'dl.zoo.dev/releases/modeling-app' || 'dl.zoo.dev/releases/modeling-app/nightly' }}
-      URL_CODED_NAME: ${{ github.event_name == 'schedule' && 'Zoo%20Modeling%20App%20%28Nightly%29' || 'Zoo%20Modeling%20App' }}
     steps:
       - uses: actions/download-artifact@v3
 
@@ -300,9 +287,9 @@ jobs:
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/${{ env.URL_CODED_NAME }}.app.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/Zoo%20Modeling%20App.app.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/msi/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64_en-US.msi.zip" \
+            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi.zip" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -331,8 +318,8 @@ jobs:
             --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
-            --arg darwin_url "$RELEASE_DIR/dmg/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_universal.dmg" \
-            --arg windows_url "$RELEASE_DIR/msi/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64_en-US.msi" \
+            --arg darwin_url "$RELEASE_DIR/dmg/Zoo%20Modeling%20App_${VERSION_NO_V}_universal.dmg" \
+            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi" \
             '{
               "version": $version,
               "pub_date": $pub_date,

.github/workflows/generate-website-docs.yml

@@ -56,9 +56,6 @@ jobs:
           gh pr create --title "Update KCL docs" \
               --body "Updating the generated kcl docs cc @jessfraz @franknoirot merge this" \
               --head "$NEW_BRANCH" \
-              --reviewer jessfraz \
-              --reviewer irev-dev \
-              --reviewer franknoirot \
               --base main || true
         env:
           GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}

.gitignore

@@ -51,6 +51,5 @@ e2e/playwright/export-snapshots/*
 
 ## generated files
 src/**/*.typegen.ts
-src-tauri/gen
 
 src/wasm-lib/grackle/stdlib_cube_partial.json

README.md

@@ -281,7 +281,7 @@ https://github.com/KittyCAD/modeling-app/assets/29681384/6f5e8e85-1003-4fd9-be7f
 <details>
 
 <summary>
-PS: for the debug panel, the following JSON is useful for snapping the camera
+Ps for the debug panel, the following JSON is useful for snapping the camera
 </summary>
 
 ```JSON

docs/kcl/std.json

@@ -26564,7 +26564,7 @@
     "unpublished": false,
     "deprecated": false,
     "examples": [
-      "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 10], %)\n  |> line([10, 0], %)\n  |> line([0, -10], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(10, %)\n\nconst sketch001 = startSketchOn('XY')\n  |> startProfileAt([0, -10], %)\n  |> line([0, -10], %)\n  |> line([2, 0], %)\n  |> line([0, 10], %)\n  |> close(%)\n  |> revolve({\n       axis: getEdge('revolveAxis', box),\n       angle: 90\n     }, %)"
+      "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 10], %)\n  |> line([10, 0], %)\n  |> line([0, -10], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(10, %)\n\nconst sketch001 = startSketchOn(box, \"revolveAxis\")\n  |> startProfileAt([5, 10], %)\n  |> line([0, -10], %)\n  |> line([2, 0], %)\n  |> line([0, 10], %)\n  |> close(%)\n  |> revolve({\n       axis: getEdge('revolveAxis', box),\n       angle: 90\n     }, %)"
     ]
   },
   {
@@ -42165,7 +42165,7 @@
               "format": "double"
             },
             "center": {
-              "description": "The center about which to make the pattern. This is a 2D vector.",
+              "description": "The center about which to make th pattern. This is a 2D vector.",
               "type": "array",
               "items": {
                 "type": "number",
@@ -44168,7 +44168,7 @@
               "minItems": 3
             },
             "center": {
-              "description": "The center about which to make the pattern. This is a 3D vector.",
+              "description": "The center about which to make th pattern. This is a 3D vector.",
               "type": "array",
               "items": {
                 "type": "number",
@@ -49363,21 +49363,21 @@
                       "description": "X-axis.",
                       "type": "string",
                       "enum": [
-                        "X"
+                        "x"
                       ]
                     },
                     {
                       "description": "Y-axis.",
                       "type": "string",
                       "enum": [
-                        "Y"
+                        "y"
                       ]
                     },
                     {
                       "description": "Z-axis.",
                       "type": "string",
                       "enum": [
-                        "Z"
+                        "z"
                       ]
                     },
                     {
@@ -51191,7 +51191,6 @@
       "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y' }, %) // default angle is 360",
       "// A donut shape.\nconst sketch001 = startSketchOn('XY')\n  |> circle([15, 0], 5, %)\n  |> revolve({ angle: 360, axis: 'y' }, %)",
       "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y', angle: 180 }, %)",
-      "const part001 = startSketchOn('XY')\n  |> startProfileAt([4, 12], %)\n  |> line([2, 0], %)\n  |> line([0, -6], %)\n  |> line([4, -6], %)\n  |> line([0, -6], %)\n  |> line([-3.75, -4.5], %)\n  |> line([0, -5.5], %)\n  |> line([-2, 0], %)\n  |> close(%)\n  |> revolve({ axis: 'y', angle: 180 }, %)\nconst part002 = startSketchOn(part001, 'end')\n  |> startProfileAt([4.5, -5], %)\n  |> line([0, 5], %)\n  |> line([5, 0], %)\n  |> line([0, -5], %)\n  |> close(%)\n  |> extrude(5, %)",
       "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 20], %)\n  |> line([20, 0], %)\n  |> line([0, -20], %)\n  |> close(%)\n  |> extrude(20, %)\n\nconst sketch001 = startSketchOn(box, \"END\")\n  |> circle([10, 10], 4, %)\n  |> revolve({ angle: -90, axis: 'y' }, %)",
       "const box = startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([0, 20], %)\n  |> line([20, 0], %)\n  |> line([0, -20], %, 'revolveAxis')\n  |> close(%)\n  |> extrude(20, %)\n\nconst sketch001 = startSketchOn(box, \"END\")\n  |> circle([10, 10], 4, %)\n  |> revolve({\n       angle: 90,\n       axis: getOppositeEdge('revolveAxis', box)\n     }, %)"
     ]

e2e/playwright/flow-tests.spec.ts

@@ -1,16 +1,10 @@
 import { test, expect } from '@playwright/test'
+import { secrets } from './secrets'
 import { getUtils } from './test-utils'
 import waitOn from 'wait-on'
+import { Themes } from '../../src/lib/theme'
+import { initialSettings } from '../../src/lib/settings/initialSettings'
 import { roundOff } from 'lib/utils'
-import * as TOML from '@iarna/toml'
-import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { secrets } from './secrets'
-import {
-  TEST_SETTINGS,
-  TEST_SETTINGS_KEY,
-  TEST_SETTINGS_CORRUPTED,
-  TEST_SETTINGS_ONBOARDING,
-} from './storageStates'
 
 /*
 debug helper: unfortunately we do rely on exact coord mouse clicks in a few places
@@ -36,19 +30,24 @@ test.beforeEach(async ({ context, page }) => {
     resources: ['tcp:3000'],
     timeout: 5000,
   })
-
-  await context.addInitScript(
-    async ({ token, settingsKey, settings }) => {
+  await context.addInitScript(async (token) => {
     localStorage.setItem('TOKEN_PERSIST_KEY', token)
     localStorage.setItem('persistCode', ``)
-      localStorage.setItem(settingsKey, settings)
-    },
-    {
-      token: secrets.token,
-      settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS }),
-    }
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'system',
+        unitSystem: 'imperial',
+      })
     )
+  }, secrets.token)
   // kill animations, speeds up tests and reduced flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
@@ -145,7 +144,6 @@ test('Can moving camera', async ({ page, context }) => {
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
   await u.openAndClearDebugPanel()
-  await u.closeKclCodePanel()
 
   const camPos: [number, number, number] = [0, 85, 85]
   const bakeInRetries = async (
@@ -179,8 +177,6 @@ test('Can moving camera', async ({ page, context }) => {
     }, 300)
 
     await u.openAndClearDebugPanel()
-    await page.getByTestId('cam-x-position').isVisible()
-
     const vals = await Promise.all([
       page.getByTestId('cam-x-position').inputValue(),
       page.getByTestId('cam-y-position').inputValue(),
@@ -328,9 +324,9 @@ test('if you write invalid kcl you get inlined errors', async ({ page }) => {
   await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
 })
 
-test('executes on load', async ({ page }) => {
+test('executes on load', async ({ page, context }) => {
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -345,11 +341,7 @@ test('executes on load', async ({ page }) => {
   await u.waitForAuthSkipAppStart()
 
   // expand variables section
-  const variablesTabButton = page.getByRole('tab', {
-    name: 'Variables',
-    exact: false,
-  })
-  await variablesTabButton.click()
+  await page.getByText('Variables').click()
 
   // can find part001 in the variables summary (pretty-json-container, makes sure we're not looking in the code editor)
   // part001 only shows up in the variables summary if it's been executed
@@ -364,20 +356,16 @@ test('executes on load', async ({ page }) => {
   ).toBeVisible()
 })
 
-test('re-executes', async ({ page }) => {
+test('re-executes', async ({ page, context }) => {
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async (token) => {
     localStorage.setItem('persistCode', `const myVar = 5`)
   })
   await page.setViewportSize({ width: 1000, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
-  const variablesTabButton = page.getByRole('tab', {
-    name: 'Variables',
-    exact: false,
-  })
-  await variablesTabButton.click()
+  await page.getByText('Variables').click()
   // expect to see "myVar:5"
   await expect(
     page.locator('.pretty-json-container >> text=myVar:5')
@@ -510,8 +498,7 @@ test('Auto complete works', async ({ page }) => {
   // expect there to be three auto complete options
   await expect(page.locator('.cm-completionLabel')).toHaveCount(3)
   await page.getByText('startSketchOn').click()
-  await page.keyboard.type("'XY'")
-  await page.keyboard.press('Tab')
+  await page.keyboard.type("('XY')")
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> startProfi')
   // expect there be a single auto complete option that we can just hit enter on
@@ -519,10 +506,7 @@ test('Auto complete works', async ({ page }) => {
   await page.waitForTimeout(100)
   await page.keyboard.press('Enter') // accepting the auto complete, not a new line
 
-  await page.keyboard.press('Tab')
-  await page.keyboard.press('Tab')
-  await page.keyboard.press('Tab')
-  await page.keyboard.press('Tab')
+  await page.keyboard.type('([0,0], %)')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> lin')
 
@@ -533,122 +517,81 @@ test('Auto complete works', async ({ page }) => {
   await page.keyboard.press('ArrowDown')
   await page.keyboard.press('Enter')
   // finish line with comment
-  await page.keyboard.type('5')
-  await page.keyboard.press('Tab')
-  await page.keyboard.press('Tab')
-  await page.keyboard.type(' // lin')
+  await page.keyboard.type('(5, %) // lin')
   await page.waitForTimeout(100)
   // there shouldn't be any auto complete options for 'lin' in the comment
   await expect(page.locator('.cm-completionLabel')).not.toBeVisible()
 
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('XY')
-  |> startProfileAt([3.14, 3.14], %)
+  |> startProfileAt([0,0], %)
   |> xLine(5, %) // lin`)
 })
 
+// Stored settings validation test
 test('Stored settings are validated and fall back to defaults', async ({
   page,
   context,
 }) => {
-  const u = getUtils(page)
-
   // Override beforeEach test setup
   // with corrupted settings
-  await context.addInitScript(
-    async ({ settingsKey, settings }) => {
-      localStorage.setItem(settingsKey, settings)
-    },
-    {
-      settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS_CORRUPTED }),
-    }
+  await context.addInitScript(async () => {
+    const storedSettings = JSON.parse(
+      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
     )
 
-  await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
-  await u.waitForAuthSkipAppStart()
+    // Corrupt the settings
+    storedSettings.baseUnit = 'invalid'
+    storedSettings.cameraControls = `() => alert('hack the planet')`
+    storedSettings.defaultDirectory = 123
+    storedSettings.defaultProjectName = false
 
-  // Check the settings were reset
-  const storedSettings = TOML.parse(
-    await page.evaluate(
-      ({ settingsKey }) => localStorage.getItem(settingsKey) || '{}',
-      { settingsKey: TEST_SETTINGS_KEY }
-    )
-  ) as { settings: SaveSettingsPayload }
+    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
+  })
 
-  expect(storedSettings.settings.app?.theme).toBe('dark')
-
-  // Check that the invalid settings were removed
-  expect(storedSettings.settings.modeling?.defaultUnit).toBe(undefined)
-  expect(storedSettings.settings.modeling?.mouseControls).toBe(undefined)
-  expect(storedSettings.settings.app?.projectDirectory).toBe(undefined)
-  expect(storedSettings.settings.projects?.defaultProjectName).toBe(undefined)
-})
-
-test('Project settings can be set and override user settings', async ({
-  page,
-}) => {
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/', { waitUntil: 'domcontentloaded' })
-  await page
-    .getByRole('button', { name: 'Start Sketch' })
-    .waitFor({ state: 'visible' })
-
-  // Open the settings modal with the browser keyboard shortcut
-  await page.keyboard.press('Meta+Shift+,')
 
+  // Check the toast appeared
   await expect(
-    page.getByRole('heading', { name: 'Settings', exact: true })
-  ).toBeVisible()
-  await page
-    .locator('select[name="app-theme"]')
-    .selectOption({ value: 'light' })
-
-  // Verify the toast appeared
-  await expect(
-    page.getByText(`Set theme to "light" for this project`)
-  ).toBeVisible()
-  // Check that the theme changed
-  await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
-
-  // Check that the user setting was not changed
-  await page.getByRole('radio', { name: 'User' }).click()
-  await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
-
-  // Roll back to default "system" theme
-  await page
-    .getByText(
-      'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
-    )
-    .hover()
-  await page
-    .getByRole('button', {
-      name: 'Roll back theme ; Has tooltip: Roll back to match default',
+    page.getByText(`Error validating persisted settings:`, {
+      exact: false,
     })
-    .click()
-  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+  ).toBeVisible()
 
-  // Check that the project setting did not change
-  await page.getByRole('radio', { name: 'Project' }).click()
-  await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+  // Check the settings were reset
+  const storedSettings = JSON.parse(
+    await page.evaluate(
+      () => localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
+    )
+  )
+  await expect(storedSettings.baseUnit).toBe(initialSettings.baseUnit)
+  await expect(storedSettings.cameraControls).toBe(
+    initialSettings.cameraControls
+  )
+  await expect(storedSettings.defaultDirectory).toBe(
+    initialSettings.defaultDirectory
+  )
+  await expect(storedSettings.defaultProjectName).toBe(
+    initialSettings.defaultProjectName
+  )
 })
 
-test('Onboarding redirects and code updating', async ({ page }) => {
+// Onboarding tests
+test('Onboarding redirects and code updating', async ({ page, context }) => {
   const u = getUtils(page)
 
   // Override beforeEach test setup
-  await page.addInitScript(
-    async ({ settingsKey, settings }) => {
+  await context.addInitScript(async () => {
     // Give some initial code, so we can test that it's cleared
     localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
-      localStorage.setItem(settingsKey, settings)
-    },
-    {
-      settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING }),
-    }
+
+    const storedSettings = JSON.parse(
+      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
     )
+    storedSettings.onboardingStatus = '/export'
+    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
+  })
 
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
@@ -656,13 +599,13 @@ test('Onboarding redirects and code updating', async ({ page }) => {
 
   // Test that the redirect happened
   await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-    `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
+    `/file/new/onboarding/export`
   )
 
   // Test that you come back to this page when you refresh
   await page.reload()
   await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-    `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
+    `/file/new/onboarding/export`
   )
 
   // Test that the onboarding pane loaded
@@ -836,11 +779,12 @@ test('Selections work on fresh and edited sketch', async ({ page }) => {
   await selectionSequence()
 })
 
-test.describe('Command bar tests', () => {
-  test('Command bar works and can change a setting', async ({ page }) => {
+test('Command bar works and can change a setting', async ({ page }) => {
   // Brief boilerplate
+  const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/', { waitUntil: 'domcontentloaded' })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
 
   let cmdSearchBar = page.getByPlaceholder('Search commands')
 
@@ -861,37 +805,33 @@ test.describe('Command bar tests', () => {
 
   // Try typing in the command bar
   await page.keyboard.type('theme')
-    const themeOption = page.getByRole('option', {
-      name: 'Settings · app · theme',
-    })
+  const themeOption = page.getByRole('option', { name: 'Set Theme' })
   await expect(themeOption).toBeVisible()
   await themeOption.click()
-    const themeInput = page.getByPlaceholder('Select an option')
+  const themeInput = page.getByPlaceholder('system')
   await expect(themeInput).toBeVisible()
   await expect(themeInput).toBeFocused()
   // Select dark theme
   await page.keyboard.press('ArrowDown')
-    await page.keyboard.press('ArrowDown')
-    await page.keyboard.press('ArrowDown')
-    await expect(page.getByRole('option', { name: 'system' })).toHaveAttribute(
+  await page.keyboard.press('ArrowUp')
+  await expect(page.getByRole('option', { name: Themes.Dark })).toHaveAttribute(
     'data-headlessui-state',
     'active'
   )
   await page.keyboard.press('Enter')
 
   // Check the toast appeared
-    await expect(
-      page.getByText(`Set theme to "system" for this project`)
-    ).toBeVisible()
+  await expect(page.getByText(`Set Theme to "${Themes.Dark}"`)).toBeVisible()
   // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
-  })
+  await expect(page.locator('body')).toHaveClass(`body-bg ${Themes.Dark}`)
+})
 
-  test('Can extrude from the command bar', async ({ page }) => {
-    await page.addInitScript(async () => {
+test('Can extrude from the command bar', async ({ page, context }) => {
+  await context.addInitScript(async (token) => {
     localStorage.setItem(
       'persistCode',
-        `const distance = sqrt(20)
+      `
+      const distance = sqrt(20)
       const part001 = startSketchOn('-XZ')
         |> startProfileAt([-6.95, 4.98], %)
         |> line([25.1, 0.41], %)
@@ -906,24 +846,23 @@ test.describe('Command bar tests', () => {
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
-
-    // Make sure the stream is up
   await u.openDebugPanel()
   await u.expectCmdLog('[data-message-type="execution-done"]')
 
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).not.toBeDisabled()
-    await u.clearCommandLogs()
-    await page.getByText('|> line([0.73, -14.93], %)').click()
-    await page.getByRole('button', { name: 'Extrude' }).isEnabled()
-
   let cmdSearchBar = page.getByPlaceholder('Search commands')
   await page.keyboard.press('Meta+K')
   await expect(cmdSearchBar).toBeVisible()
 
   // Search for extrude command and choose it
   await page.getByRole('option', { name: 'Extrude' }).click()
+  await expect(page.locator('#arg-form > label')).toContainText(
+    'Please select one face'
+  )
+  await expect(page.getByRole('button', { name: 'selection' })).toBeDisabled()
+
+  // Click to select face and set distance
+  await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
+  await page.getByRole('button', { name: 'Continue' }).click()
 
   // Assert that we're on the distance step
   await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
@@ -934,25 +873,23 @@ test.describe('Command bar tests', () => {
   await expect(page.getByPlaceholder('Variable name')).toHaveValue(
     'distance001'
   )
-
-    const continueButton = page.getByRole('button', { name: 'Continue' })
-    const submitButton = page.getByRole('button', { name: 'Submit command' })
-    await continueButton.click()
+  await expect(page.getByRole('button', { name: 'Continue' })).toBeEnabled()
+  await page.getByRole('button', { name: 'Continue' }).click()
 
   // Review step and argument hotkeys
-    await expect(submitButton).toBeEnabled()
+  await expect(
+    page.getByRole('button', { name: 'Submit command' })
+  ).toBeEnabled()
   await page.keyboard.press('Backspace')
-
-    // Assert we're back on the distance step
   await expect(
     page.getByRole('button', { name: 'Distance 12', exact: false })
   ).toBeDisabled()
+  await page.keyboard.press('Enter')
 
-    await continueButton.click()
-    await submitButton.click()
+  await expect(page.getByText('Confirm Extrude')).toBeVisible()
 
   // Check that the code was updated
-    await u.waitForCmdReceive('extrude')
+  await page.keyboard.press('Enter')
   // Unfortunately this indentation seems to matter for the test
   await expect(page.locator('.cm-content')).toHaveText(
     `const distance = sqrt(20)
@@ -965,7 +902,6 @@ const part001 = startSketchOn('-XZ')
   |> close(%)
   |> extrude(distance001, %)`.replace(/(\r\n|\n|\r)/gm, '') // remove newlines
   )
-  })
 })
 
 test('Can add multiple sketches', async ({ page }) => {
@@ -1093,9 +1029,9 @@ const part002 = startSketchOn('XY')
   )
 })
 
-test('ProgramMemory can be serialised', async ({ page }) => {
+test('ProgramMemory can be serialised', async ({ page, context }) => {
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part = startSketchOn('XY')
@@ -1105,7 +1041,7 @@ test('ProgramMemory can be serialised', async ({ page }) => {
   |> line([0, -1], %)
   |> close(%)
   |> extrude(1, %)
-  |> patternLinear3d({
+  |> patternLinear({
         axis: [1, 0, 1],
         repetitions: 3,
         distance: 6
@@ -1134,6 +1070,7 @@ test('ProgramMemory can be serialised', async ({ page }) => {
 
 test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
   page,
+  context,
 }) => {
   const u = getUtils(page)
   const selectionsSnippets = {
@@ -1142,7 +1079,7 @@ test("Various pipe expressions should and shouldn't allow edit and or extrude",
     extrudeAndEditAllowed: '|> startProfileAt([15.72, 4.7], %)',
     editOnly: '|> startProfileAt([15.79, -14.6], %)',
   }
-  await page.addInitScript(
+  await context.addInitScript(
     async ({
       extrudeAndEditBlocked,
       extrudeAndEditBlockedInFunction,
@@ -1189,7 +1126,7 @@ fn yohey = (pos) => {
     },
     selectionsSnippets
   )
-  await page.setViewportSize({ width: 1200, height: 1000 })
+  await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
@@ -1302,9 +1239,12 @@ test('Deselecting line tool should mean nothing happens on click', async ({
   previousCodeContent = await page.locator('.cm-content').innerText()
 })
 
-test('Can edit segments by dragging their handles', async ({ page }) => {
+test('Can edit segments by dragging their handles', async ({
+  page,
+  context,
+}) => {
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -1456,9 +1396,9 @@ test('Snap to close works (at any scale)', async ({ page }) => {
   await doSnapAtDifferentScales([0, 10000, 10000], codeTemplate())
 })
 
-test('Sketch on face', async ({ page }) => {
+test('Sketch on face', async ({ page, context }) => {
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -1530,13 +1470,9 @@ test('Sketch on face', async ({ page }) => {
   await page.getByText('startProfileAt([1.03, 1.03], %)').click()
   await expect(page.getByRole('button', { name: 'Edit Sketch' })).toBeVisible()
   await page.getByRole('button', { name: 'Edit Sketch' }).click()
-  await page.setViewportSize({ width: 1200, height: 1200 })
-  await u.openAndClearDebugPanel()
-  await u.updateCamPosition([452, -152, 1166])
-  await u.closeDebugPanel()
   await page.waitForTimeout(200)
 
-  const pointToDragFirst = [787, 565]
+  const pointToDragFirst = [691, 237]
   await page.mouse.move(pointToDragFirst[0], pointToDragFirst[1])
   await page.mouse.down()
   await page.mouse.move(pointToDragFirst[0] - 20, pointToDragFirst[1], {
@@ -1550,9 +1486,7 @@ test('Sketch on face', async ({ page }) => {
   await expect(page.locator('.cm-content'))
     .toContainText(`const part002 = startSketchOn(part001, 'seg01')
 |> startProfileAt([1.03, 1.03], %)
-|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
-    process?.env?.CI ? 0.24 : 0.2
-  }], %)
+|> line([2.81, -0.33], %)
 |> line([-4.44, -2.13], %)
 |> close(%)`)
 
@@ -1567,7 +1501,6 @@ test('Sketch on face', async ({ page }) => {
   await page.getByRole('button', { name: 'Extrude' }).click()
 
   await expect(page.getByTestId('command-bar')).toBeVisible()
-  await page.waitForTimeout(100)
 
   await page.keyboard.press('Enter')
   await expect(page.getByText('Confirm Extrude')).toBeVisible()
@@ -1576,9 +1509,7 @@ test('Sketch on face', async ({ page }) => {
   await expect(page.locator('.cm-content'))
     .toContainText(`const part002 = startSketchOn(part001, 'seg01')
 |> startProfileAt([1.03, 1.03], %)
-|> line([${process?.env?.CI ? 2.74 : 2.93}, -${
-    process?.env?.CI ? 0.24 : 0.2
-  }], %)
+|> line([2.81, -0.33], %)
 |> line([-4.44, -2.13], %)
 |> close(%)
 |> extrude(5 + 7, %)`)

e2e/playwright/snapshot-tests.spec.ts

@@ -7,26 +7,28 @@ import { spawn } from 'child_process'
 import { APP_NAME } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
-import { TEST_SETTINGS, TEST_SETTINGS_KEY } from './storageStates'
-import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ page }) => {
-  // reducedMotion kills animations, which speeds up tests and reduces flakiness
-  await page.emulateMedia({ reducedMotion: 'reduce' })
-
-  // set the default settings
-  await page.addInitScript(
-    async ({ token, settingsKey, settings }) => {
+test.beforeEach(async ({ context, page }) => {
+  await context.addInitScript(async (token) => {
     localStorage.setItem('TOKEN_PERSIST_KEY', token)
     localStorage.setItem('persistCode', ``)
-      localStorage.setItem(settingsKey, settings)
-    },
-    {
-      token: secrets.token,
-      settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS }),
-    }
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
     )
+  }, secrets.token)
+  // reducedMotion kills animations, which speeds up tests and reduces flakiness
+  await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
 test.setTimeout(60_000)
@@ -35,7 +37,7 @@ test('exports of each format should work', async ({ page, context }) => {
   // FYI this test doesn't work with only engine running locally
   // And you will need to have the KittyCAD CLI installed
   const u = getUtils(page)
-  await page.addInitScript(async () => {
+  await context.addInitScript(async () => {
     ;(window as any).playwrightSkipFilePicker = true
     localStorage.setItem(
       'persistCode',
@@ -79,7 +81,6 @@ const part001 = startSketchOn('-XZ')
   |> extrude(4, %)`
     )
   })
-
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
@@ -331,22 +332,6 @@ test('extrude on each default plane should be stable', async ({
   page,
   context,
 }) => {
-  await context.addInitScript(async () => {
-    localStorage.setItem(
-      'SETTINGS_PERSIST_KEY',
-      JSON.stringify({
-        baseUnit: 'in',
-        cameraControls: 'KittyCAD',
-        defaultDirectory: '',
-        defaultProjectName: 'project-$nnn',
-        onboardingStatus: 'dismissed',
-        showDebugPanel: true,
-        textWrapping: 'On',
-        theme: 'dark',
-        unitSystem: 'imperial',
-      })
-    )
-  })
   const u = getUtils(page)
   const makeCode = (plane = 'XY') => `const part001 = startSketchOn('${plane}')
   |> startProfileAt([7.00, 4.40], %)
@@ -368,28 +353,29 @@ test('extrude on each default plane should be stable', async ({
   await u.openDebugPanel()
   await u.expectCmdLog('[data-message-type="execution-done"]')
   await u.clearAndCloseDebugPanel()
-  await page.waitForTimeout(200)
+
+  await page.getByText('Code').click()
+  await expect(page).toHaveScreenshot({
+    maxDiffPixels: 100,
+  })
+  await page.getByText('Code').click()
 
   const runSnapshotsForOtherPlanes = async (plane = 'XY') => {
     // clear code
     await u.removeCurrentCode()
     // add makeCode('XZ')
-    await u.openAndClearDebugPanel()
-    await u.doAndWaitForImageDiff(
-      () => page.locator('.cm-content').fill(makeCode(plane)),
-      200
-    )
+    await page.locator('.cm-content').fill(makeCode(plane))
     // wait for execution done
+    await u.openDebugPanel()
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
 
-    await u.closeKclCodePanel()
+    await page.getByText('Code').click()
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
     })
-    await u.openKclCodePanel()
+    await page.getByText('Code').click()
   }
-  await runSnapshotsForOtherPlanes('XY')
   await runSnapshotsForOtherPlanes('-XY')
 
   await runSnapshotsForOtherPlanes('XZ')
@@ -400,6 +386,22 @@ test('extrude on each default plane should be stable', async ({
 })
 
 test('Draft segments should look right', async ({ page, context }) => {
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
+    )
+  })
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -458,8 +460,26 @@ test('Draft segments should look right', async ({ page, context }) => {
   })
 })
 
-test.describe('Client side scene scale should match engine scale', () => {
-  test('Inch scale', async ({ page }) => {
+test('Client side scene scale should match engine scale inch', async ({
+  page,
+  context,
+}) => {
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'in',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'imperial',
+      })
+    )
+  })
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -470,9 +490,7 @@ test.describe('Client side scene scale should match engine scale', () => {
   await expect(
     page.getByRole('button', { name: 'Start Sketch' })
   ).not.toBeDisabled()
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
 
   // click on "Start Sketch" button
   await u.clearCommandLogs()
@@ -494,7 +512,7 @@ test.describe('Client side scene scale should match engine scale', () => {
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-    |> startProfileAt([9.06, -12.22], %)`)
+|> startProfileAt([9.06, -12.22], %)`)
   await page.waitForTimeout(100)
 
   await u.closeDebugPanel()
@@ -504,8 +522,8 @@ test.describe('Client side scene scale should match engine scale', () => {
 
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-    |> startProfileAt([9.06, -12.22], %)
-    |> line([9.14, 0], %)`)
+|> startProfileAt([9.06, -12.22], %)
+|> line([9.14, 0], %)`)
 
   await page.getByRole('button', { name: 'Tangential Arc' }).click()
   await page.waitForTimeout(100)
@@ -514,9 +532,9 @@ test.describe('Client side scene scale should match engine scale', () => {
 
   await expect(page.locator('.cm-content'))
     .toHaveText(`const part001 = startSketchOn('-XZ')
-    |> startProfileAt([9.06, -12.22], %)
-    |> line([9.14, 0], %)
-    |> tangentialArcTo([27.34, -3.08], %)`)
+|> startProfileAt([9.06, -12.22], %)
+|> line([9.14, 0], %)
+|> tangentialArcTo([27.34, -3.08], %)`)
 
   // click tangential arc tool again to unequip it
   await page.getByRole('button', { name: 'Tangential Arc' }).click()
@@ -540,26 +558,28 @@ test.describe('Client side scene scale should match engine scale', () => {
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })
-  })
+})
 
-  test('Millimeter scale', async ({ page }) => {
-    await page.addInitScript(
-      async ({ settingsKey, settings }) => {
-        localStorage.setItem(settingsKey, settings)
-      },
-      {
-        settingsKey: TEST_SETTINGS_KEY,
-        settings: TOML.stringify({
-          settings: {
-            ...TEST_SETTINGS,
-            modeling: {
-              ...TEST_SETTINGS.modeling,
-              defaultUnit: 'mm',
-            },
-          },
-        }),
-      }
+test('Client side scene scale should match engine scale mm', async ({
+  page,
+  context,
+}) => {
+  await context.addInitScript(async () => {
+    localStorage.setItem(
+      'SETTINGS_PERSIST_KEY',
+      JSON.stringify({
+        baseUnit: 'mm',
+        cameraControls: 'KittyCAD',
+        defaultDirectory: '',
+        defaultProjectName: 'project-$nnn',
+        onboardingStatus: 'dismissed',
+        showDebugPanel: true,
+        textWrapping: 'On',
+        theme: 'dark',
+        unitSystem: 'metric',
+      })
     )
+  })
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -570,9 +590,7 @@ test.describe('Client side scene scale should match engine scale', () => {
   await expect(
     page.getByRole('button', { name: 'Start Sketch' })
   ).not.toBeDisabled()
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeVisible()
 
   // click on "Start Sketch" button
   await u.clearCommandLogs()
@@ -639,7 +657,6 @@ test.describe('Client side scene scale should match engine scale', () => {
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })
-  })
 })
 
 test('Sketch on face with none z-up', async ({ page, context }) => {
@@ -649,14 +666,14 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
       'persistCode',
       `const part001 = startSketchOn('-XZ')
   |> startProfileAt([1.4, 2.47], %)
-  |> line([9.31, 10.55], %, 'seg01')
+  |> line({ to: [9.31, 10.55], tag: 'seg01' }, %)
   |> line([11.91, -10.42], %)
   |> close(%)
   |> extrude(5 + 7, %)
 const part002 = startSketchOn(part001, 'seg01')
-  |> startProfileAt([8, 8], %)
+  |> startProfileAt([-2.89, 1.82], %)
   |> line([4.68, 3.05], %)
-  |> line([0, -7.79], %, 'seg02')
+  |> line({ to: [0, -7.79], tag: 'seg02' }, %)
   |> close(%)
   |> extrude(5 + 7, %)
 `
@@ -666,19 +683,6 @@ const part002 = startSketchOn(part001, 'seg01')
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
-
-  await u.openDebugPanel()
-  // wait for execution done
-  await expect(
-    page.locator('[data-message-type="execution-done"]')
-  ).toHaveCount(2)
-  await u.closeDebugPanel()
-
-  // Wait for the second extrusion to appear
-  // TODO: Find a way to truly know that the objects have finished
-  // rendering, because an execution-done message is not sufficient.
-  await page.waitForTimeout(1000)
-
   await expect(
     page.getByRole('button', { name: 'Start Sketch' })
   ).not.toBeDisabled()
@@ -696,4 +700,6 @@ const part002 = startSketchOn(part001, 'seg01')
   await expect(page).toHaveScreenshot({
     maxDiffPixels: 100,
   })
+
+  await page.waitForTimeout(200)
 })

e2e/playwright/storageStates.ts

@@ -1,46 +0,0 @@
-import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { Themes } from 'lib/theme'
-
-export const TEST_SETTINGS_KEY = '/user.toml'
-export const TEST_SETTINGS = {
-  app: {
-    theme: Themes.Dark,
-    onboardingStatus: 'dismissed',
-    projectDirectory: '',
-  },
-  modeling: {
-    defaultUnit: 'in',
-    mouseControls: 'KittyCAD',
-    showDebugPanel: true,
-  },
-  projects: {
-    defaultProjectName: 'project-$nnn',
-  },
-  textEditor: {
-    textWrapping: true,
-  },
-} satisfies Partial<SaveSettingsPayload>
-
-export const TEST_SETTINGS_ONBOARDING = {
-  ...TEST_SETTINGS,
-  app: { ...TEST_SETTINGS.app, onboardingStatus: '/export ' },
-} satisfies Partial<SaveSettingsPayload>
-
-export const TEST_SETTINGS_CORRUPTED = {
-  app: {
-    theme: Themes.Dark,
-    onboardingStatus: 'dismissed',
-    projectDirectory: 123 as any,
-  },
-  modeling: {
-    defaultUnit: 'invalid' as any,
-    mouseControls: `() => alert('hack the planet')` as any,
-    showDebugPanel: true,
-  },
-  projects: {
-    defaultProjectName: false as any,
-  },
-  textEditor: {
-    textWrapping: true,
-  },
-} satisfies Partial<SaveSettingsPayload>

e2e/playwright/test-utils.ts

@@ -33,7 +33,7 @@ async function clearCommandLogs(page: Page) {
 }
 
 async function expectCmdLog(page: Page, locatorStr: string) {
-  await expect(page.locator(locatorStr).last()).toBeVisible()
+  await expect(page.locator(locatorStr)).toBeVisible()
 }
 
 async function waitForDefaultPlanesToBeVisible(page: Page) {
@@ -44,44 +44,26 @@ async function waitForDefaultPlanesToBeVisible(page: Page) {
   )
 }
 
-async function openKclCodePanel(page: Page) {
-  const paneLocator = page.getByRole('tab', { name: 'KCL Code', exact: false })
-  const isOpen = (await paneLocator?.getAttribute('aria-selected')) === 'true'
-
-  if (!isOpen) {
-    await paneLocator.click()
-    await paneLocator.and(page.locator('[aria-selected="true"]')).waitFor()
-  }
-}
-
-async function closeKclCodePanel(page: Page) {
-  const paneLocator = page.getByRole('tab', { name: 'KCL Code', exact: false })
-  const isOpen = (await paneLocator?.getAttribute('aria-selected')) === 'true'
-  if (isOpen) {
-    await paneLocator.click()
-    await paneLocator
-      .and(page.locator(':not([aria-selected="true"])'))
-      .waitFor()
-  }
-}
-
 async function openDebugPanel(page: Page) {
-  const debugLocator = page.getByRole('tab', { name: 'Debug', exact: false })
-  const isOpen = (await debugLocator?.getAttribute('aria-selected')) === 'true'
+  const isOpen =
+    (await page
+      .locator('[data-testid="debug-panel"]')
+      ?.getAttribute('open')) === ''
 
   if (!isOpen) {
-    await debugLocator.click()
-    await debugLocator.and(page.locator('[aria-selected="true"]')).waitFor()
+    await page.getByText('Debug').click()
+    await page.getByTestId('debug-panel').and(page.locator('[open]')).waitFor()
   }
 }
 
 async function closeDebugPanel(page: Page) {
-  const debugLocator = page.getByRole('tab', { name: 'Debug', exact: false })
-  const isOpen = (await debugLocator?.getAttribute('aria-selected')) === 'true'
+  const isOpen =
+    (await page.getByTestId('debug-panel')?.getAttribute('open')) === ''
   if (isOpen) {
-    await debugLocator.click()
-    await debugLocator
-      .and(page.locator(':not([aria-selected="true"])'))
+    await page.getByText('Debug').click()
+    await page
+      .getByTestId('debug-panel')
+      .and(page.locator(':not([open])'))
       .waitFor()
   }
 }
@@ -99,19 +81,20 @@ export function getUtils(page: Page) {
     removeCurrentCode: () => removeCurrentCode(page),
     sendCustomCmd: (cmd: EngineCommand) => sendCustomCmd(page, cmd),
     updateCamPosition: async (xyz: [number, number, number]) => {
-      const fillInput = async (axis: 'x' | 'y' | 'z', value: number) => {
-        await page.fill(`[data-testid="cam-${axis}-position"]`, String(value))
-        await page.waitForTimeout(100)
+      const fillInput = async () => {
+        await page.fill('[data-testid="cam-x-position"]', String(xyz[0]))
+        await page.fill('[data-testid="cam-y-position"]', String(xyz[1]))
+        await page.fill('[data-testid="cam-z-position"]', String(xyz[2]))
       }
-
-      await fillInput('x', xyz[0])
-      await fillInput('y', xyz[1])
-      await fillInput('z', xyz[2])
+      await fillInput()
+      await page.waitForTimeout(100)
+      await fillInput()
+      await page.waitForTimeout(100)
+      await fillInput()
+      await page.waitForTimeout(100)
     },
     clearCommandLogs: () => clearCommandLogs(page),
     expectCmdLog: (locatorStr: string) => expectCmdLog(page, locatorStr),
-    openKclCodePanel: () => openKclCodePanel(page),
-    closeKclCodePanel: () => closeKclCodePanel(page),
     openDebugPanel: () => openDebugPanel(page),
     closeDebugPanel: () => closeDebugPanel(page),
     openAndClearDebugPanel: async () => {

e2e/tauri/specs/auth.e2e.ts

@@ -1,10 +1,7 @@
 import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 
-const documentsDir = `${process.env.HOME}/Documents`
-const userSettingsFile = `${process.env.HOME}/.config/dev.zoo.modeling-app/user.toml`
-const defaultProjectDir = `${documentsDir}/zoo-modeling-app-projects`
-const newProjectDir = `${documentsDir}/a-different-directory`
+const defaultDir = `${process.env.HOME}/Documents/zoo-modeling-app-projects`
 const userCodeDir = '/tmp/kittycad_user_code'
 
 async function click(element: WebdriverIO.Element): Promise<void> {
@@ -13,25 +10,12 @@ async function click(element: WebdriverIO.Element): Promise<void> {
   await browser.execute('arguments[0].click();', element)
 }
 
-/* Shoutout to @Sheap on Github for a great workaround utility:
- * https://github.com/tauri-apps/tauri/issues/6541#issue-1638944060
- */
-async function setDatasetValue(
-  field: WebdriverIO.Element,
-  property: string,
-  value: string
-) {
-  await browser.execute(`arguments[0].dataset.${property} = "${value}"`, field)
-}
-
 describe('ZMA (Tauri, Linux)', () => {
   it('opens the auth page and signs in', async () => {
     // Clean up filesystem from previous tests
     await new Promise((resolve) => setTimeout(resolve, 100))
-    await fs.rm(defaultProjectDir, { force: true, recursive: true })
+    await fs.rm(defaultDir, { force: true, recursive: true })
     await fs.rm(userCodeDir, { force: true })
-    await fs.rm(userSettingsFile, { force: true })
-    await fs.mkdir(newProjectDir, { recursive: true })
 
     const signInButton = await $('[data-testid="sign-in-button"]')
     expect(await signInButton.getText()).toEqual('Sign in')
@@ -81,25 +65,13 @@ describe('ZMA (Tauri, Linux)', () => {
     const settingsButton = await $('[data-testid="settings-button"]')
     await click(settingsButton)
 
-    const projectDirInput = await $('[data-testid="project-directory-input"]')
-    expect(await projectDirInput.getValue()).toEqual(defaultProjectDir)
+    const defaultDirInput = await $('[data-testid="default-directory-input"]')
+    expect(await defaultDirInput.getValue()).toEqual(defaultDir)
 
-    /*
-     * We've set up the project directory input (in initialSettings.tsx)
-     * to be able to skip the folder selection dialog if data-testValue
-     * has a value, allowing us to test the input otherwise works.
-     */
-    await setDatasetValue(projectDirInput, 'testValue', newProjectDir)
-    const projectDirButton = await $('[data-testid="project-directory-button"]')
-    await click(projectDirButton)
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    // This line is broken. I need a different way to grab the toast
-    await expect(await $('div*=Set project directory to')).toBeDisplayed()
-
-    const nameInput = await $('[data-testid="projects-defaultProjectName"]')
+    const nameInput = await $('[data-testid="name-input"]')
     expect(await nameInput.getValue()).toEqual('project-$nnn')
 
-    const closeButton = await $('[data-testid="settings-close-button"]')
+    const closeButton = await $('[data-testid="close-button"]')
     await click(closeButton)
   })
 

package.json

@@ -1,44 +1,36 @@
 {
   "name": "untitled-app",
-  "version": "0.17.3",
+  "version": "0.17.0",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.15.0",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.18",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@iarna/toml": "^2.2.5",
     "@kittycad/lib": "^0.0.56",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
-    "@replit/codemirror-interact": "^6.3.1",
-    "@tauri-apps/api": "2.0.0-beta.7",
-    "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-fs": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-http": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-os": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
+    "@replit/codemirror-interact": "^6.3.0",
+    "@tauri-apps/api": "^1.5.3",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^15.0.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@types/node": "^18.19.31",
-    "@types/react": "^18.2.77",
-    "@types/react-dom": "^18.2.25",
-    "@uiw/react-codemirror": "^4.21.25",
+    "@types/node": "^18.19.26",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@uiw/react-codemirror": "^4.21.24",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.2.0",
     "debounce-promise": "^3.1.2",
-    "decamelize": "^6.0.0",
-    "formik": "^2.4.5",
+    "formik": "^2.4.3",
     "fuse.js": "^7.0.0",
-    "html2canvas-pro": "^1.4.3",
     "http-server": "^14.1.1",
     "json-rpc-2.0": "^1.6.0",
     "jszip": "^3.10.1",
@@ -53,19 +45,19 @@
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.22.3",
     "sketch-helpers": "^0.0.4",
-    "swr": "^2.2.5",
-    "three": "^0.163.0",
+    "swr": "^2.2.2",
+    "tauri-plugin-fs-extra-api": "https://github.com/tauri-apps/tauri-plugin-fs-extra#v1",
+    "three": "^0.160.0",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "ua-parser-js": "^1.0.37",
+    "typescript": "^5.4.3",
     "uuid": "^9.0.1",
-    "vitest": "^1.5.0",
+    "vitest": "^1.4.0",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.5",
     "wasm-pack": "^0.12.1",
     "web-vitals": "^3.5.2",
-    "ws": "^8.16.0",
+    "ws": "^8.13.0",
     "xstate": "^4.38.2",
     "zustand": "^4.5.2"
   },
@@ -92,7 +84,7 @@
     "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": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
     "lint": "eslint --fix src",
-    "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
+    "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.package.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
     "postinstall": "yarn xstate:typegen",
     "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\""
   },
@@ -116,32 +108,31 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.24.3",
-    "@playwright/test": "^1.43.0",
-    "@tauri-apps/cli": "^2.0.0-beta.13",
+    "@babel/preset-env": "^7.23.3",
+    "@playwright/test": "^1.39.0",
+    "@tauri-apps/cli": "^1.5.11",
     "@types/crypto-js": "^4.2.2",
     "@types/debounce-promise": "^3.1.9",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@types/react-modal": "^3.16.3",
-    "@types/three": "^0.163.0",
-    "@types/ua-parser-js": "^0.7.39",
+    "@types/three": "^0.160.0",
     "@types/uuid": "^9.0.8",
     "@types/wait-on": "^5.3.4",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@types/ws": "^8.5.10",
+    "@types/ws": "^8.5.5",
     "@vitejs/plugin-react": "^4.2.1",
     "@wdio/cli": "^8.24.3",
-    "@wdio/globals": "^8.36.0",
+    "@wdio/globals": "^8.24.3",
     "@wdio/local-runner": "^8.35.1",
-    "@wdio/mocha-framework": "^8.36.0",
+    "@wdio/mocha-framework": "^8.35.0",
     "@wdio/spec-reporter": "^8.32.4",
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
-    "happy-dom": "^14.3.10",
+    "happy-dom": "^14.3.1",
     "husky": "^9.0.11",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
@@ -150,12 +141,12 @@
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.2.6",
+    "vite": "^5.2.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest-webgl-canvas-mock": "^1.1.0",
     "wait-on": "^7.2.0",
-    "yarn": "^1.22.22"
+    "yarn": "^1.22.19"
   }
 }

src-tauri/Cargo.toml

@@ -7,27 +7,22 @@ license = ""
 repository = "https://github.com/KittyCAD/modeling-app"
 default-run = "app"
 edition = "2021"
-rust-version = "1.70"
+rust-version = "1.60"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-beta.12", features = [] }
+tauri-build = { version = "1.5.1", features = [] }
 
 [dependencies]
 anyhow = "1"
-kittycad = "0.2.67"
+kittycad = "0.2.63"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "2.0.0-beta.15", features = [ "devtools", "unstable"] }
-tauri-plugin-dialog = { version = "2.0.0-beta.0" }
-tauri-plugin-fs = { version = "2.0.0-beta.0" }
-tauri-plugin-http = { version = "2.0.0-beta.0" }
-tauri-plugin-os = { version = "2.0.0-beta.0" }
-tauri-plugin-shell = { version = "2.0.0-beta.0" }
-tauri-plugin-updater = { version = "2.0.0-beta.0" }
-tokio = { version = "1.37.0", features = ["time"] }
+tauri = { version = "1.6.1", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "devtools"] }
+tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+tokio = { version = "1.36.0", features = ["time"] }
 toml = "0.8.2"
 
 [features]

src-tauri/capabilities/desktop.json

@@ -1,87 +0,0 @@
-{
-  "$schema": "../gen/schemas/desktop-schema.json",
-  "identifier": "main-capability",
-  "description": "Capability for the main window",
-  "context": "local",
-  "windows": [
-    "main"
-  ],
-  "permissions": [
-    "path:default",
-    "event:default",
-    "window:default",
-    "app:default",
-    "resources:default",
-    "menu:default",
-    "tray:default",
-    "fs:allow-create",
-    "fs:allow-read-file",
-    "fs:allow-read-text-file",
-    "fs:allow-write-file",
-    "fs:allow-write-text-file",
-    "fs:allow-read-dir",
-    "fs:allow-copy-file",
-    "fs:allow-mkdir",
-    "fs:allow-remove",
-    "fs:allow-remove",
-    "fs:allow-rename",
-    "fs:allow-exists",
-    "fs:allow-stat",
-    {
-      "identifier": "fs:scope",
-      "allow": [
-        {
-          "path": "$HOME/**/*"
-        },
-        {
-          "path": "$HOME/.config"
-        },
-        {
-          "path": "$HOME/.config/**/*"
-        },
-        {
-          "path": "$APPCONFIG"
-        },
-        {
-          "path": "$APPCONFIG/**/*"
-        },
-        {
-          "path": "$DOCUMENT"
-        },
-        {
-          "path": "$DOCUMENT/**/*"
-        }
-      ]
-    },
-    "shell:allow-open",
-    "dialog:allow-open",
-    "dialog:allow-save",
-    "dialog:allow-message",
-    "dialog:allow-ask",
-    "dialog:allow-confirm",
-    {
-      "identifier": "http:default",
-      "allow": [
-        "https://dev.kittycad.io/*",
-        "https://dev.zoo.dev/*",
-        "https://kittycad.io/*",
-        "https://zoo.dev/*",
-        "https://api.dev.kittycad.io/*",
-        "https://api.dev.zoo.dev/*"
-      ]
-    },
-    "os:allow-platform",
-    "os:allow-version",
-    "os:allow-os-type",
-    "os:allow-family",
-    "os:allow-arch",
-    "os:allow-exe-extension",
-    "os:allow-locale",
-    "os:allow-hostname"
-  ],
-  "platforms": [
-    "linux",
-    "macOS",
-    "windows"
-  ]
-}

src-tauri/src/main.rs

@@ -4,15 +4,11 @@
 use std::env;
 use std::fs;
 use std::io::Read;
-use std::path::Path;
-use std::path::PathBuf;
 
 use anyhow::Result;
 use oauth2::TokenResponse;
-use serde::Serialize;
 use std::process::Command;
-use tauri::ipc::InvokeError;
-use tauri_plugin_shell::ShellExt;
+use tauri::{InvokeError, Manager};
 const DEFAULT_HOST: &str = "https://api.kittycad.io";
 
 /// This command returns the a json string parse from a toml file at the path.
@@ -28,56 +24,6 @@ fn read_toml(path: &str) -> Result<String, InvokeError> {
     Ok(value)
 }
 
-/// From https://github.com/tauri-apps/tauri/blob/1.x/core/tauri/src/api/dir.rs#L51
-/// Removed from tauri v2
-#[derive(Debug, Serialize)]
-pub struct DiskEntry {
-    /// The path to the entry.
-    pub path: PathBuf,
-    /// The name of the entry (file name with extension or directory name).
-    pub name: Option<String>,
-    /// The children of this entry if it's a directory.
-    #[serde(skip_serializing_if = "Option::is_none")]
-    pub children: Option<Vec<DiskEntry>>,
-}
-
-/// From https://github.com/tauri-apps/tauri/blob/1.x/core/tauri/src/api/dir.rs#L51
-/// Removed from tauri v2
-fn is_dir<P: AsRef<Path>>(path: P) -> Result<bool> {
-    std::fs::metadata(path)
-        .map(|md| md.is_dir())
-        .map_err(Into::into)
-}
-
-/// From https://github.com/tauri-apps/tauri/blob/1.x/core/tauri/src/api/dir.rs#L51
-/// Removed from tauri v2
-#[tauri::command]
-fn read_dir_recursive(path: &str) -> Result<Vec<DiskEntry>, InvokeError> {
-    let mut files_and_dirs: Vec<DiskEntry> = vec![];
-    // let path = path.as_ref();
-    for entry in fs::read_dir(path).map_err(|e| InvokeError::from_anyhow(e.into()))? {
-        let path = entry
-            .map_err(|e| InvokeError::from_anyhow(e.into()))?
-            .path();
-
-        if let Ok(flag) = is_dir(&path) {
-            files_and_dirs.push(DiskEntry {
-                path: path.clone(),
-                children: if flag {
-                    Some(read_dir_recursive(path.to_str().expect("No path"))?)
-                } else {
-                    None
-                },
-                name: path
-                    .file_name()
-                    .map(|name| name.to_string_lossy())
-                    .map(|name| name.to_string()),
-            });
-        }
-    }
-    Ok(files_and_dirs)
-}
-
 /// This command returns a string that is the contents of a file at the path.
 #[tauri::command]
 fn read_txt_file(path: &str) -> Result<String, InvokeError> {
@@ -139,8 +85,7 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
         fs::write("/tmp/kittycad_user_code", details.user_code().secret())
             .expect("Unable to write /tmp/kittycad_user_code file");
     } else {
-        app.shell()
-            .open(auth_uri.secret(), None)
+        tauri::api::shell::open(&app.shell_scope(), auth_uri.secret(), None)
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
     }
 
@@ -220,15 +165,12 @@ fn show_in_folder(path: String) {
 fn main() {
     tauri::Builder::default()
         .setup(|_app| {
-            #[cfg(debug_assertions)]
+            #[cfg(debug_assertions)] // only include this code on debug builds
             {
-                use tauri::Manager;
-                _app.get_webview("main").unwrap().open_devtools();
-            }
-            #[cfg(not(debug_assertions))]
-            {
-                _app.handle()
-                    .plugin(tauri_plugin_updater::Builder::new().build())?;
+                let window = _app.get_window("main").unwrap();
+                // comment out the below if you don't devtools to open everytime.
+                // it's useful because otherwise devtools shuts everytime rust code changes.
+                window.open_devtools();
             }
             Ok(())
         })
@@ -237,14 +179,9 @@ fn main() {
             login,
             read_toml,
             read_txt_file,
-            read_dir_recursive,
             show_in_folder,
         ])
-        .plugin(tauri_plugin_dialog::init())
-        .plugin(tauri_plugin_fs::init())
-        .plugin(tauri_plugin_http::init())
-        .plugin(tauri_plugin_os::init())
-        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_fs_extra::init())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -1,28 +1,63 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "app": {
-    "security": {
-      "csp": null
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "height": 1200,
-        "resizable": true,
-        "title": "Zoo Modeling App",
-        "width": 1800
-      }
-    ]
-  },
   "build": {
     "beforeDevCommand": "yarn start",
-    "devUrl": "http://localhost:3000",
-    "frontendDist": "../build"
+    "devPath": "http://localhost:3000",
+    "distDir": "../build"
+  },
+  "package": {
+    "productName": "zoo-modeling-app",
+    "version": "0.17.0"
+  },
+  "tauri": {
+    "allowlist": {
+      "all": false,
+      "dialog": {
+        "all": true,
+        "ask": true,
+        "confirm": true,
+        "message": true,
+        "open": true,
+        "save": true
+      },
+      "fs": {
+        "scope": [
+          "$HOME/**/*",
+          "$APPCONFIG",
+          "$APPCONFIG/**/*",
+          "$DOCUMENT",
+          "$DOCUMENT/**/*"
+        ],
+        "all": true
+      },
+      "http": {
+        "request": true,
+        "scope": [
+          "https://dev.kittycad.io/*",
+          "https://dev.zoo.dev/*",
+          "https://kittycad.io/*",
+          "https://zoo.dev/*",
+          "https://api.dev.kittycad.io/*",
+          "https://api.dev.zoo.dev/*"
+        ]
+      },
+      "os": {
+        "all": true
+      },
+      "shell": {
+        "open": true
+      },
+      "path": {
+        "all": true
+      }
     },
     "bundle": {
       "active": true,
       "category": "DeveloperTool",
       "copyright": "",
+      "deb": {
+        "depends": []
+      },
       "externalBin": [],
       "icon": [
         "icons/32x32.png",
@@ -31,11 +66,7 @@
         "icons/icon.icns",
         "icons/icon.ico"
       ],
-    "linux": {
-      "deb": {
-        "depends": []
-      }
-    },
+      "identifier": "dev.zoo.modeling-app",
       "longDescription": "",
       "macOS": {
         "entitlements": null,
@@ -48,12 +79,20 @@
       "shortDescription": "",
       "targets": "all"
     },
-  "identifier": "dev.zoo.modeling-app",
-  "plugins": {
-    "shell": {
-      "open": true
-    }
+    "security": {
+      "csp": null
     },
-  "productName": "Zoo Modeling App",
-  "version": "0.17.3"
+    "updater": {
+      "active": false
+    },
+    "windows": [
+      {
+        "fullscreen": false,
+        "height": 1200,
+        "resizable": true,
+        "title": "Zoo Modeling App",
+        "width": 1800
+      }
+    ]
+  }
 }

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "package": {
+    "productName": "Zoo Modeling App"
+  }
+}

src-tauri/tauri.release.conf.json

@@ -1,13 +1,6 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "bundle": {
-    "windows": {
-      "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
-      "digestAlgorithm": "sha256",
-      "timestampUrl": "http://timestamp.digicert.com"
-    }
-  },
-  "plugins": {
+  "tauri": {
     "updater": {
       "active": true,
       "endpoints": [
@@ -15,6 +8,14 @@
       ],
       "dialog": true,
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEUzNzA4MjBEQjFBRTY4NzYKUldSMmFLNnhEWUp3NCtsT21Jd05wQktOaGVkOVp6MUFma0hNTDRDSnI2RkJJTEZOWG1ncFhqcU8K"
+    },
+    "bundle": {
+      "identifier": "io.kittycad.modeling-app",
+      "windows": {
+        "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
+        "digestAlgorithm": "sha256",
+        "timestampUrl": "http://timestamp.digicert.com"
+      }
     }
   }
 }

src-tauri/tauri.windows.conf.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "package": {
+    "productName": "Zoo Modeling App"
+  }
+}

src/App.tsx

@@ -1,12 +1,22 @@
-import { MouseEventHandler, useEffect, useRef } from 'react'
-import { uuidv4 } from 'lib/utils'
-import { useStore } from './useStore'
+import { useCallback, MouseEventHandler, useEffect } from 'react'
+import { DebugPanel } from './components/DebugPanel'
+import { v4 as uuidv4 } from 'uuid'
+import { PaneType, useStore } from './useStore'
+import { Logs, KCLErrors } from './components/Logs'
+import { CollapsiblePanel } from './components/CollapsiblePanel'
+import { MemoryPanel } from './components/MemoryPanel'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
 import { EngineCommand } from './lang/std/engineConnection'
 import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
+import { Resizable } from 're-resizable'
+import {
+  faCode,
+  faCodeCommit,
+  faSquareRootVariable,
+} from '@fortawesome/free-solid-svg-icons'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { getNormalisedCoordinates } from './lib/utils'
 import { useLoaderData, useNavigate } from 'react-router-dom'
@@ -14,24 +24,23 @@ import { type IndexLoaderData } from 'lib/types'
 import { paths } from 'lib/paths'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { onboardingPaths } from 'routes/Onboarding/paths'
+import { CodeMenu } from 'components/CodeMenu'
+import { TextEditor } from 'components/TextEditor'
+import { Themes, getSystemTheme } from 'lib/theme'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { engineCommandManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { isTauri } from 'lib/isTauri'
 import { useLspContext } from 'components/LspProvider'
-import { useRefreshSettings } from 'hooks/useRefreshSettings'
-import { ModelingSidebar } from 'components/ModelingSidebar/ModelingSidebar'
+import { useValidateSettings } from 'hooks/useValidateSettings'
 
 export function App() {
-  useRefreshSettings(paths.FILE + 'SETTINGS')
+  useValidateSettings()
   const { project, file } = useLoaderData() as IndexLoaderData
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
   const { onProjectOpen } = useLspContext()
-  // We need the ref for the outermost div so we can screenshot the app for
-  // the coredump.
-  const ref = useRef<HTMLDivElement>(null)
 
   const projectName = project?.name || null
   const projectPath = project?.path || null
@@ -40,24 +49,39 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
-  const { buttonDownInStream, didDragInStream, streamDimensions, setHtmlRef } =
-    useStore((s) => ({
+  const {
+    buttonDownInStream,
+    openPanes,
+    setOpenPanes,
+    didDragInStream,
+    streamDimensions,
+  } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
+    openPanes: s.openPanes,
+    setOpenPanes: s.setOpenPanes,
     didDragInStream: s.didDragInStream,
     streamDimensions: s.streamDimensions,
-      setHtmlRef: s.setHtmlRef,
   }))
 
-  useEffect(() => {
-    setHtmlRef(ref)
-  }, [ref])
-
   const { settings } = useSettingsAuthContext()
-  const {
-    app: { onboardingStatus },
-  } = settings.context
+  const { showDebugPanel, onboardingStatus, theme } = settings?.context || {}
   const { state, send } = useModelingContext()
 
+  const editorTheme = theme === Themes.System ? getSystemTheme() : theme
+
+  // Pane toggling keyboard shortcuts
+  const togglePane = useCallback(
+    (newPane: PaneType) =>
+      openPanes.includes(newPane)
+        ? setOpenPanes(openPanes.filter((p) => p !== newPane))
+        : setOpenPanes([...openPanes, newPane]),
+    [openPanes, setOpenPanes]
+  )
+  useHotkeys('shift + c', () => togglePane('code'))
+  useHotkeys('shift + v', () => togglePane('variables'))
+  useHotkeys('shift + l', () => togglePane('logs'))
+  useHotkeys('shift + e', () => togglePane('kclErrors'))
+  useHotkeys('shift + d', () => togglePane('debug'))
   useHotkeys('esc', () => send('Cancel'))
   useHotkeys('backspace', (e) => {
     e.preventDefault()
@@ -71,7 +95,7 @@ export function App() {
   )
 
   const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
-    (p) => p === onboardingStatus.current
+    (p) => p === onboardingStatus
   )
     ? 'opacity-20'
     : didDragInStream
@@ -112,7 +136,6 @@ export function App() {
     <div
       className="relative h-full flex flex-col"
       onMouseMove={handleMouseMove}
-      ref={ref}
     >
       <AppHeader
         className={
@@ -124,8 +147,74 @@ export function App() {
         enableMenu={true}
       />
       <ModalContainer />
-      <ModelingSidebar paneOpacity={paneOpacity} />
+      <Resizable
+        className={
+          'pointer-events-none h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
+          +paneOpacity
+        }
+        defaultSize={{
+          width: '550px',
+          height: 'auto',
+        }}
+        minWidth={200}
+        maxWidth={800}
+        minHeight={'auto'}
+        maxHeight={'auto'}
+        handleClasses={{
+          right:
+            'hover:bg-chalkboard-10/50 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
+            (buttonDownInStream || onboardingStatus === 'camera'
+              ? 'pointer-events-none '
+              : 'pointer-events-auto'),
+        }}
+      >
+        <div
+          id="code-pane"
+          className="h-full flex flex-col justify-between pointer-events-none"
+        >
+          <CollapsiblePanel
+            title="Code"
+            icon={faCode}
+            className="open:!mb-2"
+            open={openPanes.includes('code')}
+            menu={<CodeMenu />}
+          >
+            <TextEditor theme={editorTheme} />
+          </CollapsiblePanel>
+          <section className="flex flex-col">
+            <MemoryPanel
+              theme={editorTheme}
+              open={openPanes.includes('variables')}
+              title="Variables"
+              icon={faSquareRootVariable}
+            />
+            <Logs
+              theme={editorTheme}
+              open={openPanes.includes('logs')}
+              title="Logs"
+              icon={faCodeCommit}
+            />
+            <KCLErrors
+              theme={editorTheme}
+              open={openPanes.includes('kclErrors')}
+              title="KCL Errors"
+              iconClassNames={{ icon: 'group-open:text-destroy-30' }}
+            />
+          </section>
+        </div>
+      </Resizable>
       <Stream className="absolute inset-0 z-0" />
+      {showDebugPanel && (
+        <DebugPanel
+          title="Debug"
+          className={
+            'transition-opacity transition-duration-75 ' +
+            paneOpacity +
+            (buttonDownInStream ? ' pointer-events-none' : '')
+          }
+          open={openPanes.includes('debug')}
+        />
+      )}
       {/* <CamToggle /> */}
     </div>
   )

src/Router.tsx

@@ -22,40 +22,39 @@ import { paths } from 'lib/paths'
 import {
   fileLoader,
   homeLoader,
+  indexLoader,
   onboardingRedirectLoader,
-  settingsLoader,
 } from 'lib/routeLoaders'
 import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+
+export const BROWSER_FILE_NAME = 'new'
 
 const router = createBrowserRouter([
   {
-    loader: settingsLoader,
+    loader: indexLoader,
     id: paths.INDEX,
-    /* Make sure auth is the outermost provider or else we will have
-     * inefficient re-renders, use the react profiler to see. */
     element: (
       <CommandBarProvider>
+        <KclContextProvider>
           <SettingsAuthProvider>
             <LspProvider>
-            <KclContextProvider>
               <Outlet />
-            </KclContextProvider>
             </LspProvider>
           </SettingsAuthProvider>
+        </KclContextProvider>
       </CommandBarProvider>
     ),
-    errorElement: <ErrorPage />,
     children: [
       {
         path: paths.INDEX,
         loader: () =>
           isTauri()
             ? redirect(paths.HOME)
-            : redirect(paths.FILE + '/%2F' + BROWSER_PROJECT_NAME),
+            : redirect(paths.FILE + '/' + BROWSER_FILE_NAME),
+        errorElement: <ErrorPage />,
       },
       {
         loader: fileLoader,
@@ -68,29 +67,29 @@ const router = createBrowserRouter([
                 <Outlet />
                 <App />
                 <CommandBar />
-                {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
               </ModelingMachineProvider>
               <WasmErrBanner />
             </FileMachineProvider>
+            {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
           </Auth>
         ),
-        children: [
-          {
-            id: paths.FILE + 'SETTINGS',
-            loader: settingsLoader,
         children: [
           {
             loader: onboardingRedirectLoader,
             index: true,
             element: <></>,
           },
+          {
+            children: [
               {
                 path: makeUrlPathRelative(paths.SETTINGS),
+                loader: indexLoader, // very rare someone will load into settings first, but it's possible in the browser
                 element: <Settings />,
               },
               {
                 path: makeUrlPathRelative(paths.ONBOARDING.INDEX),
                 element: <Onboarding />,
+                loader: indexLoader, // very rare someone will load into settings first, but it's possible in the browser
                 children: onboardingRoutes,
               },
             ],
@@ -109,15 +108,8 @@ const router = createBrowserRouter([
         id: paths.HOME,
         loader: homeLoader,
         children: [
-          {
-            index: true,
-            element: <></>,
-            id: paths.HOME + 'SETTINGS',
-            loader: settingsLoader,
-          },
           {
             path: makeUrlPathRelative(paths.SETTINGS),
-            loader: settingsLoader,
             element: <Settings />,
           },
         ],

src/Toolbar.tsx

@@ -18,12 +18,8 @@ export const Toolbar = () => {
   const { commandBarSend } = useCommandsContext()
   const { state, send, context } = useModelingContext()
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
-  const iconClassName =
-    'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-chalkboard-10 group-pressed:!text-chalkboard-10'
   const bgClassName =
-    'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary group-pressed:bg-primary'
-  const buttonClassName =
-    'bg-chalkboard-10 dark:bg-chalkboard-100 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100'
+    'group-enabled:group-hover:bg-energy-10 group-pressed:bg-energy-10 dark:group-enabled:group-hover:bg-chalkboard-80 dark:group-pressed:bg-chalkboard-80'
   const pathId = useMemo(() => {
     if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
       return false
@@ -68,14 +64,12 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Enter sketch') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() =>
                 send({ type: 'Enter sketch', data: { forceNewSketch: true } })
               }
               icon={{
                 icon: 'sketch',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -87,12 +81,10 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Enter sketch') && pathId && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Enter sketch' })}
               icon={{
                 icon: 'sketch',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -104,12 +96,10 @@ export const Toolbar = () => {
         {state.nextEvents.includes('Cancel') && !state.matches('idle') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
               onClick={() => send({ type: 'Cancel' })}
               icon={{
                 icon: 'arrowLeft',
-                iconClassName,
                 bgClassName,
               }}
               disabled={disableAllButtons}
@@ -122,7 +112,6 @@ export const Toolbar = () => {
           <>
             <li className="contents" key="line-button">
               <ActionButton
-                className={buttonClassName}
                 Element="button"
                 onClick={() =>
                   state?.matches('Sketch.Line tool')
@@ -130,9 +119,9 @@ export const Toolbar = () => {
                     : send('Equip Line tool')
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
                 icon={{
                   icon: 'line',
-                  iconClassName,
                   bgClassName,
                 }}
                 disabled={disableAllButtons}
@@ -142,7 +131,6 @@ export const Toolbar = () => {
             </li>
             <li className="contents" key="tangential-arc-button">
               <ActionButton
-                className={buttonClassName}
                 Element="button"
                 onClick={() =>
                   state.matches('Sketch.Tangential arc to')
@@ -150,9 +138,9 @@ export const Toolbar = () => {
                     : send('Equip tangential arc to')
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
+                className="pressed:bg-energy-10/20 dark:pressed:bg-energy-80"
                 icon={{
                   icon: 'arc',
-                  iconClassName,
                   bgClassName,
                 }}
                 disabled={
@@ -191,8 +179,8 @@ export const Toolbar = () => {
             .map((eventName) => (
               <li className="contents" key={eventName}>
                 <ActionButton
-                  className={buttonClassName}
                   Element="button"
+                  className="text-sm"
                   key={eventName}
                   onClick={() => send(eventName)}
                   disabled={
@@ -203,7 +191,6 @@ export const Toolbar = () => {
                   title={eventName}
                   icon={{
                     icon: 'line',
-                    iconClassName,
                     bgClassName,
                   }}
                 >
@@ -216,8 +203,8 @@ export const Toolbar = () => {
         {state.matches('idle') && (
           <li className="contents">
             <ActionButton
-              className={buttonClassName}
               Element="button"
+              className="text-sm"
               onClick={() =>
                 commandBarSend({
                   type: 'Find and select command',
@@ -232,7 +219,6 @@ export const Toolbar = () => {
               }
               icon={{
                 icon: 'extrude',
-                iconClassName,
                 bgClassName,
               }}
             >
@@ -245,16 +231,16 @@ export const Toolbar = () => {
   }
 
   return (
-    <div className="max-w-full flex items-stretch rounded-l-sm rounded-r-full bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
-      <menu className="flex-1 pl-1 pr-2 py-0 overflow-hidden rounded-l-sm whitespace-nowrap border-solid border border-primary/30 dark:border-chalkboard-90 border-r-0">
+    <div className="max-w-full flex items-stretch rounded-l-sm rounded-r-full bg-chalkboard-10 dark:bg-chalkboard-100 relative">
+      <menu className="flex-1 pl-1 pr-2 py-0 overflow-hidden rounded-l-sm whitespace-nowrap bg-chalkboard-10 dark:bg-chalkboard-100 border-solid border border-energy-10 dark:border-chalkboard-90 border-r-0">
         <ToolbarButtons />
       </menu>
       <ActionButton
         Element="button"
         onClick={() => commandBarSend({ type: 'Open' })}
-        className="rounded-r-full pr-4 self-stretch border-primary/30 hover:border-primary dark:border-chalkboard-80 dark:bg-chalkboard-80 text-primary"
+        className="rounded-r-full pr-4 self-stretch border-energy-10 hover:border-energy-10 dark:border-chalkboard-80 bg-energy-10/50 hover:bg-energy-10 dark:bg-chalkboard-80 dark:text-energy-10"
       >
-        {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
+        {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
       </ActionButton>
     </div>
   )

src/clientSideScene/CameraControls.ts

@@ -21,7 +21,7 @@ import {
   Subscription,
   EngineCommandManager,
 } from 'lang/std/engineConnection'
-import { uuidv4 } from 'lib/utils'
+import { v4 as uuidv4 } from 'uuid'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'
 import * as TWEEN from '@tweenjs/tween.js'
@@ -110,6 +110,14 @@ export class CameraControls {
     }, 400) as any as number
   }
 
+  // reacts hooks into some of this singleton's properties
+  reactCameraProperties: ReactCameraProperties = {
+    type: 'perspective',
+    fov: 12,
+    position: [0, 0, 0],
+    quaternion: [0, 0, 0, 1],
+  }
+
   setCam = (camProps: ReactCameraProperties) => {
     if (
       camProps.type === 'perspective' &&
@@ -902,26 +910,6 @@ export class CameraControls {
         .start()
     })
 
-  get reactCameraProperties(): ReactCameraProperties {
-    return {
-      type: this.isPerspective ? 'perspective' : 'orthographic',
-      [this.isPerspective ? 'fov' : 'zoom']:
-        this.camera instanceof PerspectiveCamera
-          ? this.camera.fov
-          : this.camera.zoom,
-      position: [
-        roundOff(this.camera.position.x, 2),
-        roundOff(this.camera.position.y, 2),
-        roundOff(this.camera.position.z, 2),
-      ],
-      quaternion: [
-        roundOff(this.camera.quaternion.x, 2),
-        roundOff(this.camera.quaternion.y, 2),
-        roundOff(this.camera.quaternion.z, 2),
-        roundOff(this.camera.quaternion.w, 2),
-      ],
-    }
-  }
   reactCameraPropertiesCallback: (a: ReactCameraProperties) => void = () => {}
   setReactCameraPropertiesCallback = (
     cb: (a: ReactCameraProperties) => void
@@ -949,7 +937,24 @@ export class CameraControls {
         isPerspective: this.isPerspective,
         target: this.target,
       })
-    this.deferReactUpdate(this.reactCameraProperties)
+    this.deferReactUpdate({
+      type: this.isPerspective ? 'perspective' : 'orthographic',
+      [this.isPerspective ? 'fov' : 'zoom']:
+        this.camera instanceof PerspectiveCamera
+          ? this.camera.fov
+          : this.camera.zoom,
+      position: [
+        roundOff(this.camera.position.x, 2),
+        roundOff(this.camera.position.y, 2),
+        roundOff(this.camera.position.z, 2),
+      ],
+      quaternion: [
+        roundOff(this.camera.quaternion.x, 2),
+        roundOff(this.camera.quaternion.y, 2),
+        roundOff(this.camera.quaternion.z, 2),
+        roundOff(this.camera.quaternion.w, 2),
+      ],
+    })
     Object.values(this._camChangeCallbacks).forEach((cb) => cb())
   }
   getInteractionType = (event: any) =>

src/clientSideScene/ClientSideSceneComp.tsx

@@ -4,15 +4,10 @@ import { useModelingContext } from 'hooks/useModelingContext'
 import { cameraMouseDragGuards } from 'lib/cameraControls'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useStore } from 'useStore'
-import { ARROWHEAD, DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
+import { DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
 import { ReactCameraProperties } from './CameraControls'
 import { throttle } from 'lib/utils'
 import { sceneInfra } from 'lib/singletons'
-import {
-  EXTRA_SEGMENT_HANDLE,
-  PROFILE_START,
-  getParentGroup,
-} from './sceneEntities'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -42,10 +37,10 @@ export const ClientSideScene = ({
 }: {
   cameraControls: ReturnType<
     typeof useSettingsAuthContext
-  >['settings']['context']['modeling']['mouseControls']['current']
+  >['settings']['context']['cameraControls']
 }) => {
   const canvasRef = useRef<HTMLDivElement>(null)
-  const { state, send, context } = useModelingContext()
+  const { state, send } = useModelingContext()
   const { hideClient, hideServer } = useShouldHideScene()
   const { setHighlightRange } = useStore((s) => ({
     setHighlightRange: s.setHighlightRange,
@@ -81,33 +76,9 @@ export const ClientSideScene = ({
     }
   }, [])
 
-  let cursor = 'default'
-  if (state.matches('Sketch')) {
-    if (
-      context.mouseState.type === 'isHovering' &&
-      getParentGroup(context.mouseState.on, [
-        ARROWHEAD,
-        EXTRA_SEGMENT_HANDLE,
-        PROFILE_START,
-      ])
-    ) {
-      cursor = 'move'
-    } else if (context.mouseState.type === 'isDragging') {
-      cursor = 'grabbing'
-    } else if (
-      state.matches('Sketch.Line tool') ||
-      state.matches('Sketch.Tangential arc to')
-    ) {
-      cursor = 'crosshair'
-    } else {
-      cursor = 'default'
-    }
-  }
-
   return (
     <div
       ref={canvasRef}
-      style={{ cursor: cursor }}
       className={`absolute inset-0 h-full w-full transition-all duration-300 ${
         hideClient ? 'opacity-0' : 'opacity-100'
       } ${hideServer ? 'bg-black' : ''} ${
@@ -126,9 +97,12 @@ const throttled = throttle((a: ReactCameraProperties) => {
 }, 1000 / 15)
 
 export const CamDebugSettings = () => {
-  const [camSettings, setCamSettings] = useState<ReactCameraProperties>(
-    sceneInfra.camControls.reactCameraProperties
-  )
+  const [camSettings, setCamSettings] = useState<ReactCameraProperties>({
+    type: 'perspective',
+    fov: 12,
+    position: [0, 0, 0],
+    quaternion: [0, 0, 0, 1],
+  })
   const [fov, setFov] = useState(12)
 
   useEffect(() => {

src/clientSideScene/helpers.ts

@@ -28,15 +28,12 @@ export function createGridHelper({
   gridHelper.rotation.x = Math.PI / 2
   return gridHelper
 }
-const fudgeFactor = 72.66985970437086
 
 export const orthoScale = (cam: OrthographicCamera | PerspectiveCamera) =>
-  (0.55 * fudgeFactor) / cam.zoom / window.innerHeight
+  0.55 / cam.zoom
 
 export const perspScale = (cam: PerspectiveCamera, group: Group | Mesh) =>
-  (group.position.distanceTo(cam.position) * cam.fov * fudgeFactor) /
-  4000 /
-  window.innerHeight
+  (group.position.distanceTo(cam.position) * cam.fov) / 4000
 
 export function isQuaternionVertical(q: Quaternion) {
   const v = new Vector3(0, 0, 1).applyQuaternion(q)

src/clientSideScene/sceneEntities.ts

@@ -12,7 +12,6 @@ import {
   OrthographicCamera,
   PerspectiveCamera,
   PlaneGeometry,
-  Points,
   Quaternion,
   Scene,
   Shape,
@@ -82,25 +81,20 @@ import {
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import { createGridHelper, orthoScale, perspScale } from './helpers'
 import { Models } from '@kittycad/lib'
-import { uuidv4 } from 'lib/utils'
+import { v4 as uuidv4 } from 'uuid'
 import { SketchDetails } from 'machines/modelingMachine'
 import { EngineCommandManager } from 'lang/std/engineConnection'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
-export const EXTRA_SEGMENT_HANDLE = 'extraSegmentHandle'
-export const EXTRA_SEGMENT_OFFSET_PX = 8
-export const PROFILE_START = 'profile-start'
 export const STRAIGHT_SEGMENT = 'straight-segment'
 export const STRAIGHT_SEGMENT_BODY = 'straight-segment-body'
 export const STRAIGHT_SEGMENT_DASH = 'straight-segment-body-dashed'
-export const TANGENTIAL_ARC_TO__SEGMENT_DASH =
-  'tangential-arc-to-segment-body-dashed'
 export const TANGENTIAL_ARC_TO_SEGMENT = 'tangential-arc-to-segment'
 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 TANGENTIAL_ARC_TO__SEGMENT_DASH =
+  'tangential-arc-to-segment-body-dashed'
+export const PROFILE_START = 'profile-start'
 
 // This singleton Class is responsible for all of the things the user sees and interacts with.
 // That mostly mean sketch elements.
@@ -117,12 +111,8 @@ export class SceneEntities {
     this.engineCommandManager = engineCommandManager
     this.scene = sceneInfra?.scene
     sceneInfra?.camControls.subscribeToCamChange(this.onCamChange)
-    window.addEventListener('resize', this.onWindowResize)
   }
 
-  onWindowResize = () => {
-    this.onCamChange()
-  }
   onCamChange = () => {
     const orthoFactor = orthoScale(sceneInfra.camControls.camera)
 
@@ -292,6 +282,7 @@ export class SceneEntities {
     sketchGroup: SketchGroup
     variableDeclarationName: string
   }> {
+    sceneInfra.resetMouseListeners()
     this.createIntersectionPlane()
 
     const { truncatedAst, programMemoryOverride, variableDeclarationName } =
@@ -304,7 +295,7 @@ export class SceneEntities {
     })
     const sketchGroup = sketchGroupFromPathToNode({
       pathToNode: sketchPathToNode,
-      ast: maybeModdedAst,
+      ast: kclManager.ast,
       programMemory,
     })
     if (!Array.isArray(sketchGroup?.value))
@@ -392,7 +383,6 @@ export class SceneEntities {
           pathToNode: segPathToNode,
           isDraftSegment,
           scale: factor,
-          texture: sceneInfra.extraSegmentTexture,
         })
       } else {
         seg = straightSegment({
@@ -403,7 +393,6 @@ export class SceneEntities {
           isDraftSegment,
           scale: factor,
           callExpName,
-          texture: sceneInfra.extraSegmentTexture,
         })
       }
       seg.layers.set(SKETCH_LAYER)
@@ -446,7 +435,6 @@ export class SceneEntities {
   ) => {
     await kclManager.updateAst(modifiedAst, false)
     await this.tearDownSketch({ removeAxis: false })
-    sceneInfra.resetMouseListeners()
     await this.setupSketch({
       sketchPathToNode,
       forward,
@@ -454,12 +442,7 @@ export class SceneEntities {
       position: origin,
       maybeModdedAst: kclManager.ast,
     })
-    this.setupSketchIdleCallbacks({
-      forward,
-      up,
-      position: origin,
-      pathToNode: sketchPathToNode,
-    })
+    this.setupSketchIdleCallbacks(sketchPathToNode)
   }
   setUpDraftSegment = async (
     sketchPathToNode: PathToNode,
@@ -484,20 +467,19 @@ export class SceneEntities {
 
     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,
+    let modifiedAst = addNewSketchLn({
+      node: kclManager.ast,
       programMemory: kclManager.programMemory,
       to: [lastSeg.to[0], lastSeg.to[1]],
       from: [lastSeg.to[0], lastSeg.to[1]],
       fnName: segmentName,
       pathToNode: sketchPathToNode,
-    })
-    const modifiedAst = parse(recast(mod.modifiedAst))
+    }).modifiedAst
+    modifiedAst = parse(recast(modifiedAst))
 
     const draftExpressionsIndices = { start: index, end: index }
 
     if (shouldTearDown) await this.tearDownSketch({ removeAxis: false })
-    sceneInfra.resetMouseListeners()
     const { truncatedAst, programMemoryOverride, sketchGroup } =
       await this.setupSketch({
         sketchPathToNode,
@@ -564,104 +546,13 @@ export class SceneEntities {
           },
         })
       },
-      ...this.mouseEnterLeaveCallbacks(),
+      ...mouseEnterLeaveCallbacks(),
     })
   }
-  setupSketchIdleCallbacks = ({
-    pathToNode,
-    up,
-    forward,
-    position,
-  }: {
-    pathToNode: PathToNode
-    forward: [number, number, number]
-    up: [number, number, number]
-    position?: [number, number, number]
-  }) => {
-    let addingNewSegmentStatus: 'nothing' | 'pending' | 'added' = 'nothing'
+  setupSketchIdleCallbacks = (pathToNode: PathToNode) => {
     sceneInfra.setCallbacks({
-      onDragEnd: async () => {
-        if (addingNewSegmentStatus !== 'nothing') {
-          await this.tearDownSketch({ removeAxis: false })
-          this.setupSketch({
-            sketchPathToNode: pathToNode,
-            maybeModdedAst: kclManager.ast,
-            up,
-            forward,
-            position,
-          })
-          // setting up the callbacks again resets value in closures
-          this.setupSketchIdleCallbacks({
-            pathToNode,
-            up,
-            forward,
-            position,
-          })
-        }
-      },
-      onDrag: async ({
-        selected,
-        intersectionPoint,
-        mouseEvent,
-        intersects,
-      }) => {
+      onDrag: ({ selected, intersectionPoint, mouseEvent, intersects }) => {
         if (mouseEvent.which !== 1) return
-
-        const group = getParentGroup(selected, [EXTRA_SEGMENT_HANDLE])
-        if (group?.name === EXTRA_SEGMENT_HANDLE) {
-          const segGroup = getParentGroup(selected)
-          const pathToNode: PathToNode = segGroup?.userData?.pathToNode
-          const pathToNodeIndex = pathToNode.findIndex(
-            (x) => x[1] === 'PipeExpression'
-          )
-
-          const sketchGroup = sketchGroupFromPathToNode({
-            pathToNode,
-            ast: kclManager.ast,
-            programMemory: kclManager.programMemory,
-          })
-
-          const pipeIndex = pathToNode[pathToNodeIndex + 1][0] as number
-          if (addingNewSegmentStatus === 'nothing') {
-            const prevSegment = sketchGroup.value[pipeIndex - 2]
-            const mod = addNewSketchLn({
-              node: kclManager.ast,
-              programMemory: kclManager.programMemory,
-              to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
-              from: [prevSegment.from[0], prevSegment.from[1]],
-              // 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
-              fnName: 'line',
-              pathToNode: pathToNode,
-              spliceBetween: true,
-            })
-            addingNewSegmentStatus = 'pending'
-            await kclManager.executeAstMock(mod.modifiedAst, {
-              updates: 'code',
-            })
-            await this.tearDownSketch({ removeAxis: false })
-            this.setupSketch({
-              sketchPathToNode: pathToNode,
-              maybeModdedAst: kclManager.ast,
-              up,
-              forward,
-              position,
-            })
-            addingNewSegmentStatus = 'added'
-          } else if (addingNewSegmentStatus === 'added') {
-            const pathToNodeForNewSegment = pathToNode.slice(0, pathToNodeIndex)
-            pathToNodeForNewSegment.push([pipeIndex - 2, 'index'])
-            this.onDragSegment({
-              sketchPathToNode: pathToNodeForNewSegment,
-              object: selected,
-              intersection2d: intersectionPoint.twoD,
-              intersects,
-            })
-          }
-          return
-        }
-
         this.onDragSegment({
           object: selected,
           intersection2d: intersectionPoint.twoD,
@@ -686,7 +577,7 @@ export class SceneEntities {
         if (!event) return
         sceneInfra.modelingSend(event)
       },
-      ...this.mouseEnterLeaveCallbacks(),
+      ...mouseEnterLeaveCallbacks(),
     })
   }
   prepareTruncatedMemoryAndAst = (
@@ -864,7 +755,8 @@ export class SceneEntities {
     group.userData.to = to
     group.userData.prevSegment = prevSegment
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
+
+    arrowGroup.position.set(to[0], to[1], 0)
 
     const previousPoint =
       prevSegment?.type === 'TangentialArcTo'
@@ -882,21 +774,6 @@ export class SceneEntities {
       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(
@@ -904,27 +781,6 @@ export class SceneEntities {
       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
@@ -971,26 +827,10 @@ export class SceneEntities {
     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)
+    shape.moveTo(0, -0.08 * scale)
+    shape.lineTo(0, 0.08 * scale) // The width of the line
     const arrowGroup = group.getObjectByName(ARROWHEAD) 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)
 
@@ -1002,21 +842,6 @@ export class SceneEntities {
         .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
     }
 
     const straightSegmentBody = group.children.find(
@@ -1194,119 +1019,6 @@ export class SceneEntities {
       },
     })
   }
-  mouseEnterLeaveCallbacks() {
-    return {
-      onMouseEnter: ({ selected, dragSelected }: OnMouseEnterLeaveArgs) => {
-        if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-          const obj = selected as Mesh
-          const mat = obj.material as MeshBasicMaterial
-          mat.color.set(obj.userData.baseColor)
-          mat.color.offsetHSL(0, 0, 0.5)
-        }
-        const parent = getParentGroup(selected, [
-          STRAIGHT_SEGMENT,
-          TANGENTIAL_ARC_TO_SEGMENT,
-          PROFILE_START,
-        ])
-        if (parent?.userData?.pathToNode) {
-          const updatedAst = parse(recast(kclManager.ast))
-          const node = getNodeFromPath<CallExpression>(
-            updatedAst,
-            parent.userData.pathToNode,
-            'CallExpression'
-          ).node
-          sceneInfra.highlightCallback([node.start, node.end])
-          const yellow = 0xffff00
-          colorSegment(selected, yellow)
-          const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
-          if (extraSegmentGroup) {
-            extraSegmentGroup.traverse((child) => {
-              if (child instanceof Points || child instanceof Mesh) {
-                child.material.opacity = dragSelected ? 0 : 1
-              }
-            })
-          }
-          const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-          const factor =
-            (sceneInfra.camControls.camera instanceof OrthographicCamera
-              ? orthoFactor
-              : perspScale(sceneInfra.camControls.camera, parent)) /
-            sceneInfra._baseUnitMultiplier
-          if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
-              prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          }
-          return
-        }
-        sceneInfra.highlightCallback([0, 0])
-      },
-      onMouseLeave: ({ selected, ...rest }: OnMouseEnterLeaveArgs) => {
-        sceneInfra.highlightCallback([0, 0])
-        const parent = getParentGroup(selected, [
-          STRAIGHT_SEGMENT,
-          TANGENTIAL_ARC_TO_SEGMENT,
-          PROFILE_START,
-        ])
-        if (parent) {
-          const orthoFactor = orthoScale(sceneInfra.camControls.camera)
-
-          const factor =
-            (sceneInfra.camControls.camera instanceof OrthographicCamera
-              ? orthoFactor
-              : perspScale(sceneInfra.camControls.camera, parent)) /
-            sceneInfra._baseUnitMultiplier
-          if (parent.name === STRAIGHT_SEGMENT) {
-            this.updateStraightSegment({
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          } else if (parent.name === TANGENTIAL_ARC_TO_SEGMENT) {
-            this.updateTangentialArcToSegment({
-              prevSegment: parent.userData.prevSegment,
-              from: parent.userData.from,
-              to: parent.userData.to,
-              group: parent,
-              scale: factor,
-            })
-          }
-        }
-        const isSelected = parent?.userData?.isSelected
-        colorSegment(
-          selected,
-          isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
-        )
-        const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
-        if (extraSegmentGroup) {
-          extraSegmentGroup.traverse((child) => {
-            if (child instanceof Points || child instanceof Mesh) {
-              child.material.opacity = 0
-            }
-          })
-        }
-        if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
-          const obj = selected as Mesh
-          const mat = obj.material as MeshBasicMaterial
-          mat.color.set(obj.userData.baseColor)
-          if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
-        }
-      },
-    }
-  }
 }
 
 export type DefaultPlaneStr = 'XY' | 'XZ' | 'YZ' | '-XY' | '-XZ' | '-YZ'
@@ -1448,7 +1160,7 @@ function colorSegment(object: any, color: number) {
   ])
   if (straightSegmentBody) {
     straightSegmentBody.traverse((child) => {
-      if (child instanceof Mesh && !child.userData.ignoreColorChange) {
+      if (child instanceof Mesh) {
         child.material.color.set(color)
       }
     })
@@ -1549,3 +1261,53 @@ function massageFormats(a: any): Vector3 {
     ? new Vector3(a[0], a[1], a[2])
     : new Vector3(a.x, a.y, a.z)
 }
+
+function mouseEnterLeaveCallbacks() {
+  return {
+    onMouseEnter: ({ selected }: OnMouseEnterLeaveArgs) => {
+      if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
+        const obj = selected as Mesh
+        const mat = obj.material as MeshBasicMaterial
+        mat.color.set(obj.userData.baseColor)
+        mat.color.offsetHSL(0, 0, 0.5)
+      }
+      const parent = getParentGroup(selected, [
+        STRAIGHT_SEGMENT,
+        TANGENTIAL_ARC_TO_SEGMENT,
+        PROFILE_START,
+      ])
+      if (parent?.userData?.pathToNode) {
+        const updatedAst = parse(recast(kclManager.ast))
+        const node = getNodeFromPath<CallExpression>(
+          updatedAst,
+          parent.userData.pathToNode,
+          'CallExpression'
+        ).node
+        sceneInfra.highlightCallback([node.start, node.end])
+        const yellow = 0xffff00
+        colorSegment(selected, yellow)
+        return
+      }
+      sceneInfra.highlightCallback([0, 0])
+    },
+    onMouseLeave: ({ selected }: OnMouseEnterLeaveArgs) => {
+      sceneInfra.highlightCallback([0, 0])
+      const parent = getParentGroup(selected, [
+        STRAIGHT_SEGMENT,
+        TANGENTIAL_ARC_TO_SEGMENT,
+        PROFILE_START,
+      ])
+      const isSelected = parent?.userData?.isSelected
+      colorSegment(
+        selected,
+        isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
+      )
+      if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
+        const obj = selected as Mesh
+        const mat = obj.material as MeshBasicMaterial
+        mat.color.set(obj.userData.baseColor)
+        if (obj.userData.isSelected) mat.color.offsetHSL(0, 0, 0.2)
+      }
+    },
+  }
+}