Merge branch 'main' into migrate-to-lsp-execution

Bumps [kittycad-modeling-cmds](https://github.com/KittyCAD/modeling-api) from 0.2.17 to 0.2.18.
- [Commits](https://github.com/KittyCAD/modeling-api/compare/kittycad-modeling-cmds-0.2.17...kittycad-modeling-cmds-0.2.18)

---
updated-dependencies:
- dependency-name: kittycad-modeling-cmds
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.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
+skip: **/target,node_modules,build,**/Cargo.lock,./docs/kcl/*.md,./src-tauri/gen/schemas

.github/dependabot.yml

@@ -9,15 +9,27 @@ 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/ci.yml

@@ -104,7 +104,11 @@ 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' \
-            '.tauri.updater.endpoints[]=$url' src-tauri/tauri.release.conf.json --indent 2)" > src-tauri/tauri.release.conf.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
 
       - uses: actions/upload-artifact@v3
         if: github.event_name == 'schedule'
@@ -125,6 +129,9 @@ 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
 
@@ -144,10 +151,12 @@ jobs:
           sudo apt-get update &&
           sudo apt-get install -y
           libgtk-3-dev
-          libgtksourceview-3.0-dev
-          webkit2gtk-4.0
-          libappindicator3-dev
+          libayatana-appindicator3-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
@@ -161,7 +170,9 @@ 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'
@@ -224,14 +235,14 @@ jobs:
         with:
           includeRelease: false
           includeDebug: true
-          args: ${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }}
+          args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - name: Build the app (release) and sign
         uses: tauri-apps/tauri-action@v0
         if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
@@ -240,7 +251,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: "${{ matrix.os == 'macos-14' && '--target universal-apple-darwin' || '' }} ${{ env.TAURI_CONF_ARGS }}"
+          args: "${{ env.TAURI_CONF_ARGS }} ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - uses: actions/upload-artifact@v3
         if: matrix.os != 'ubuntu-latest'
@@ -250,10 +261,11 @@ jobs:
         with:
           path: "${{ env.PREFIX }}/${{ env.MODE }}/bundle/*/*"
 
+      # TODO: re-enable linux e2e tests when possible
       - name: Run e2e tests (linux only)
-        if: matrix.os == 'ubuntu-latest'
+        if: false
         run: |
-          cargo install tauri-driver@0.1.3
+          cargo install tauri-driver
           source .env.${{ env.BUILD_RELEASE == 'true' && 'production' || 'development' }}
           export VITE_KC_API_BASE_URL
           xvfb-run yarn test:e2e:tauri
@@ -273,6 +285,7 @@ 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
 
@@ -287,9 +300,9 @@ jobs:
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
             --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/Zoo%20Modeling%20App.app.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/${{ env.URL_CODED_NAME }}.app.tar.gz" \
             --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/msi/Zoo%20Modeling%20App_${VERSION_NO_V}_x64_en-US.msi.zip" \
+            --arg windows_url "$RELEASE_DIR/msi/${{ env.URL_CODED_NAME }}_${VERSION_NO_V}_x64_en-US.msi.zip" \
             '{
               "version": $version,
               "pub_date": $pub_date,
@@ -318,8 +331,8 @@ jobs:
             --arg version "${VERSION}" \
             --arg pub_date "${PUB_DATE}" \
             --arg notes "${NOTES}" \
-            --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" \
+            --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" \
             '{
               "version": $version,
               "pub_date": $pub_date,

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

@@ -15,7 +15,7 @@ concurrency:
   cancel-in-progress: true
 jobs:
   generate-website-docs:
-    name: generate-website-docs 
+    name: generate-website-docs
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -56,6 +56,9 @@ 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,5 +51,6 @@ e2e/playwright/export-snapshots/*
 
 ## generated files
 src/**/*.typegen.ts
+src-tauri/gen
 
 src/wasm-lib/grackle/stdlib_cube_partial.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(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     }, %)"
+      "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     }, %)"
     ]
   },
   {
@@ -41924,7 +41924,7 @@
     "unpublished": false,
     "deprecated": false,
     "examples": [
-      "fn rectShape = (pos, w, l) => {\n  const rr = startSketchOn('YZ')\n  |> startProfileAt([pos[0] - (w / 2), pos[1] - (l / 2)], %)\n  |> lineTo([pos[0] + w / 2, pos[1] - (l / 2)], %, \"edge1\")\n  |> lineTo([pos[0] + w / 2, pos[1] + l / 2], %, \"edge2\")\n  |> lineTo([pos[0] - (w / 2), pos[1] + l / 2], %, \"edge3\")\n  |> close(%, \"edge4\")\n  return rr\n}\n\n// Create the mounting plate extrusion, holes, and fillets\nconst part = rectShape([0, 0], 20, 20)"
+      "fn rectShape = (pos, w, l) => {\n  const rr = startSketchOn('YZ')\n    |> startProfileAt([pos[0] - (w / 2), pos[1] - (l / 2)], %)\n    |> lineTo([pos[0] + w / 2, pos[1] - (l / 2)], %, \"edge1\")\n    |> lineTo([pos[0] + w / 2, pos[1] + l / 2], %, \"edge2\")\n    |> lineTo([pos[0] - (w / 2), pos[1] + l / 2], %, \"edge3\")\n    |> close(%, \"edge4\")\n  return rr\n}\n\n// Create the mounting plate extrusion, holes, and fillets\nconst part = rectShape([0, 0], 20, 20)"
     ]
   },
   {
@@ -42165,7 +42165,7 @@
               "format": "double"
             },
             "center": {
-              "description": "The center about which to make th pattern. This is a 2D vector.",
+              "description": "The center about which to make the 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 th pattern. This is a 3D vector.",
+              "description": "The center about which to make the 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"
                       ]
                     },
                     {
@@ -58824,7 +58824,7 @@
     "deprecated": false,
     "examples": [
       "startSketchOn('XY')\n  |> startProfileAt([0, 0], %)\n  |> line([10, 10], %)\n  |> line([20, 10], %, \"edge1\")\n  |> close(%, \"edge2\")",
-      "fn cube = (pos, scale) => {\n  const sg = startSketchOn('XY')\n  |> startProfileAt(pos, %)\n  |> line([0, scale], %)\n  |> line([scale, 0], %)\n  |> line([0, -scale], %)\n  |> close(%)\n  |> extrude(scale, %)\n\n  return sg\n}\n\nconst box = cube([0, 0], 20)\n\nconst part001 = startSketchOn(box, \"start\")\n  |> startProfileAt([0, 0], %)\n  |> line([10, 10], %)\n  |> line([20, 10], %, \"edge1\")\n  |> close(%)\n  |> extrude(20, %)"
+      "fn cube = (pos, scale) => {\n  const sg = startSketchOn('XY')\n    |> startProfileAt(pos, %)\n    |> line([0, scale], %)\n    |> line([scale, 0], %)\n    |> line([0, -scale], %)\n    |> close(%)\n    |> extrude(scale, %)\n\n  return sg\n}\n\nconst box = cube([0, 0], 20)\n\nconst part001 = startSketchOn(box, \"start\")\n  |> startProfileAt([0, 0], %)\n  |> line([10, 10], %)\n  |> line([20, 10], %, \"edge1\")\n  |> close(%)\n  |> extrude(20, %)"
     ]
   },
   {

e2e/playwright/flow-tests.spec.ts

@@ -2,10 +2,15 @@ import { test, expect } from '@playwright/test'
 import { getUtils } from './test-utils'
 import waitOn from 'wait-on'
 import { roundOff } from 'lib/utils'
-import { basicStorageState } from './storageStates'
 import * as TOML from '@iarna/toml'
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { Themes } from 'lib/theme'
+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
@@ -32,13 +37,25 @@ test.beforeEach(async ({ context, page }) => {
     timeout: 5000,
   })
 
+  await context.addInitScript(
+    async ({ token, settingsKey, settings }) => {
+      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 }),
+    }
+  )
   // kill animations, speeds up tests and reduced flakiness
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
 test.setTimeout(60000)
 
-test('Basic sketch', async ({ page, context }) => {
+test('Basic sketch', async ({ page }) => {
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -128,6 +145,7 @@ 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 (
@@ -161,6 +179,8 @@ 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(),
@@ -308,9 +328,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, context }) => {
+test('executes on load', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -325,7 +345,11 @@ test('executes on load', async ({ page, context }) => {
   await u.waitForAuthSkipAppStart()
 
   // expand variables section
-  await page.getByText('Variables').click()
+  const variablesTabButton = page.getByRole('tab', {
+    name: 'Variables',
+    exact: false,
+  })
+  await variablesTabButton.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
@@ -340,16 +364,20 @@ test('executes on load', async ({ page, context }) => {
   ).toBeVisible()
 })
 
-test('re-executes', async ({ page, context }) => {
+test('re-executes', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async (token) => {
+  await page.addInitScript(async () => {
     localStorage.setItem('persistCode', `const myVar = 5`)
   })
   await page.setViewportSize({ width: 1000, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
-  await page.getByText('Variables').click()
+  const variablesTabButton = page.getByRole('tab', {
+    name: 'Variables',
+    exact: false,
+  })
+  await variablesTabButton.click()
   // expect to see "myVar:5"
   await expect(
     page.locator('.pretty-json-container >> text=myVar:5')
@@ -482,7 +510,8 @@ 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.type("'XY'")
+  await page.keyboard.press('Tab')
   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
@@ -490,7 +519,10 @@ 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.type('([0,0], %)')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> lin')
 
@@ -501,145 +533,149 @@ 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, %) // lin')
+  await page.keyboard.type('5')
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Tab')
+  await page.keyboard.type(' // 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([0,0], %)
+  |> startProfileAt([3.14, 3.14], %)
   |> xLine(5, %) // lin`)
 })
 
-// Stored settings validation test
-test.describe('Settings persistence and validation tests', () => {
-  // Override test setup
+test('Stored settings are validated and fall back to defaults', async ({
+  page,
+  context,
+}) => {
+  const u = getUtils(page)
+
+  // Override beforeEach test setup
   // with corrupted settings
-  const storageState = structuredClone(basicStorageState)
-  const s = TOML.parse(storageState.origins[0].localStorage[2].value) as {
-    settings: SaveSettingsPayload
-  }
-  s.settings.app.theme = Themes.Dark
-  s.settings.app.projectDirectory = 123 as any
-  s.settings.modeling.defaultUnit = 'invalid' as any
-  s.settings.modeling.mouseControls = `() => alert('hack the planet')` as any
-  s.settings.projects.defaultProjectName = false as any
-  storageState.origins[0].localStorage[2].value = TOML.stringify(s)
+  await context.addInitScript(
+    async ({ settingsKey, settings }) => {
+      localStorage.setItem(settingsKey, settings)
+    },
+    {
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS_CORRUPTED }),
+    }
+  )
 
-  test.use({ storageState })
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
 
-  test('Stored settings are validated and fall back to defaults', async ({
-    page,
-  }) => {
-    const u = getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
+  // Check the settings were reset
+  const storedSettings = TOML.parse(
+    await page.evaluate(
+      ({ settingsKey }) => localStorage.getItem(settingsKey) || '{}',
+      { settingsKey: TEST_SETTINGS_KEY }
+    )
+  ) as { settings: SaveSettingsPayload }
 
-    // Check the settings were reset
-    const storedSettings = TOML.parse(
-      await page.evaluate(() => localStorage.getItem('/user.toml') || '{}')
-    ) as { settings: SaveSettingsPayload }
+  expect(storedSettings.settings.app?.theme).toBe('dark')
 
-    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,
-  }) => {
-    const u = getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
-
-    // Open the settings modal with the browser keyboard shortcut
-    await page.keyboard.press('Meta+Shift+,')
-
-    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',
-      })
-      .click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
-
-    // 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 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)
 })
 
-// Onboarding tests
-test.describe('Onboarding tests', () => {
-  // Override test setup
-  const storageState = structuredClone(basicStorageState)
-  const s = TOML.parse(storageState.origins[0].localStorage[2].value) as {
-    settings: SaveSettingsPayload
-  }
-  s.settings.app.onboardingStatus = '/export'
-  storageState.origins[0].localStorage[2].value = TOML.stringify(s)
-  test.use({ storageState })
+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' })
 
-  test('Onboarding redirects and code updating', async ({ page, context }) => {
-    const u = getUtils(page)
+  // Open the settings modal with the browser keyboard shortcut
+  await page.keyboard.press('Meta+Shift+,')
 
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await page.goto('/')
-    await u.waitForAuthSkipAppStart()
+  await expect(
+    page.getByRole('heading', { name: 'Settings', exact: true })
+  ).toBeVisible()
+  await page
+    .locator('select[name="app-theme"]')
+    .selectOption({ value: 'light' })
 
-    // Test that the redirect happened
-    await expect(page.url().split(':3000').slice(-1)[0]).toBe(
-      `/file/%2Fbrowser%2Fmain.kcl/onboarding/export`
+  // 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',
+    })
+    .click()
+  await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
 
-    // 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`
-    )
+  // 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')
+})
 
-    // Test that the onboarding pane loaded
-    const title = page.locator('[data-testid="onboarding-content"]')
-    await expect(title).toBeAttached()
+test('Onboarding redirects and code updating', async ({ page }) => {
+  const u = getUtils(page)
 
-    // Test that the code changes when you advance to the next step
-    await page.locator('[data-testid="onboarding-next"]').click()
-    await expect(page.locator('.cm-content')).toHaveText('')
+  // Override beforeEach test setup
+  await page.addInitScript(
+    async ({ settingsKey, settings }) => {
+      // 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 }),
+    }
+  )
 
-    // Test that the code is not empty when you click on the next step
-    await page.locator('[data-testid="onboarding-next"]').click()
-    await expect(page.locator('.cm-content')).toHaveText(/.+/)
-  })
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  // Test that the redirect happened
+  await expect(page.url().split(':3000').slice(-1)[0]).toBe(
+    `/file/%2Fbrowser%2Fmain.kcl/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`
+  )
+
+  // Test that the onboarding pane loaded
+  const title = page.locator('[data-testid="onboarding-content"]')
+  await expect(title).toBeAttached()
+
+  // Test that the code changes when you advance to the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText('')
+
+  // Test that the code is not empty when you click on the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText(/.+/)
 })
 
 test('Selections work on fresh and edited sketch', async ({ page }) => {
@@ -851,19 +887,21 @@ test.describe('Command bar tests', () => {
     await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
   })
 
-  // Override test setup code
-  const storageState = structuredClone(basicStorageState)
-  storageState.origins[0].localStorage[1].value = `const distance = sqrt(20)
-  const part001 = startSketchOn('-XZ')
-    |> startProfileAt([-6.95, 4.98], %)
-    |> line([25.1, 0.41], %)
-    |> line([0.73, -14.93], %)
-    |> line([-23.44, 0.52], %)
-    |> close(%)
-  `
-  test.use({ storageState })
+  test('Can extrude from the command bar', async ({ page }) => {
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const distance = sqrt(20)
+        const part001 = startSketchOn('-XZ')
+  |> startProfileAt([-6.95, 4.98], %)
+  |> line([25.1, 0.41], %)
+  |> line([0.73, -14.93], %)
+  |> line([-23.44, 0.52], %)
+  |> close(%)
+        `
+      )
+    })
 
-  test('Can extrude from the command bar', async ({ page, context }) => {
     const u = getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     await page.goto('/')
@@ -872,15 +910,13 @@ test.describe('Command bar tests', () => {
     // Make sure the stream is up
     await u.openDebugPanel()
     await u.expectCmdLog('[data-message-type="execution-done"]')
-    await u.closeDebugPanel()
 
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
     ).not.toBeDisabled()
-    await page.getByText('|> startProfileAt([-6.95, 4.98], %)').click()
-    await expect(
-      page.getByRole('button', { name: 'Extrude' })
-    ).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')
@@ -898,23 +934,25 @@ test.describe('Command bar tests', () => {
     await expect(page.getByPlaceholder('Variable name')).toHaveValue(
       'distance001'
     )
-    await expect(page.getByRole('button', { name: 'Continue' })).toBeEnabled()
-    await page.getByRole('button', { name: 'Continue' }).click()
+
+    const continueButton = page.getByRole('button', { name: 'Continue' })
+    const submitButton = page.getByRole('button', { name: 'Submit command' })
+    await continueButton.click()
 
     // Review step and argument hotkeys
-    await expect(
-      page.getByRole('button', { name: 'Submit command' })
-    ).toBeEnabled()
+    await expect(submitButton).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 expect(page.getByText('Confirm Extrude')).toBeVisible()
+    await continueButton.click()
+    await submitButton.click()
 
     // Check that the code was updated
-    await page.keyboard.press('Enter')
+    await u.waitForCmdReceive('extrude')
     // Unfortunately this indentation seems to matter for the test
     await expect(page.locator('.cm-content')).toHaveText(
       `const distance = sqrt(20)
@@ -1055,9 +1093,9 @@ const part002 = startSketchOn('XY')
   )
 })
 
-test('ProgramMemory can be serialised', async ({ page, context }) => {
+test('ProgramMemory can be serialised', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part = startSketchOn('XY')
@@ -1067,7 +1105,7 @@ test('ProgramMemory can be serialised', async ({ page, context }) => {
   |> line([0, -1], %)
   |> close(%)
   |> extrude(1, %)
-  |> patternLinear({
+  |> patternLinear3d({
         axis: [1, 0, 1],
         repetitions: 3,
         distance: 6
@@ -1096,7 +1134,6 @@ test('ProgramMemory can be serialised', async ({ page, context }) => {
 
 test("Various pipe expressions should and shouldn't allow edit and or extrude", async ({
   page,
-  context,
 }) => {
   const u = getUtils(page)
   const selectionsSnippets = {
@@ -1105,7 +1142,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 context.addInitScript(
+  await page.addInitScript(
     async ({
       extrudeAndEditBlocked,
       extrudeAndEditBlockedInFunction,
@@ -1138,11 +1175,11 @@ const part003 = startSketchOn('-XZ')
 
 fn yohey = (pos) => {
   const part004 = startSketchOn('-XZ')
-  ${extrudeAndEditBlockedInFunction}
-  |> line([27.55, -1.65], %)
-  |> line([4.95, -10.53], %)
-  |> line([-20.38, -8], %)
-  |> line([-15.79, 17.08], %)
+    ${extrudeAndEditBlockedInFunction}
+    |> line([27.55, -1.65], %)
+    |> line([4.95, -10.53], %)
+    |> line([-20.38, -8], %)
+    |> line([-15.79, 17.08], %)
   return ''
 }
 
@@ -1152,7 +1189,7 @@ fn yohey = (pos) => {
     },
     selectionsSnippets
   )
-  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.setViewportSize({ width: 1200, height: 1000 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
 
@@ -1265,12 +1302,9 @@ 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,
-  context,
-}) => {
+test('Can edit segments by dragging their handles', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')
@@ -1422,9 +1456,9 @@ test('Snap to close works (at any scale)', async ({ page }) => {
   await doSnapAtDifferentScales([0, 10000, 10000], codeTemplate())
 })
 
-test('Sketch on face', async ({ page, context }) => {
+test('Sketch on face', async ({ page }) => {
   const u = getUtils(page)
-  await context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     localStorage.setItem(
       'persistCode',
       `const part001 = startSketchOn('-XZ')

e2e/playwright/snapshot-tests.spec.ts

@@ -7,16 +7,26 @@ import { spawn } from 'child_process'
 import { APP_NAME } from 'lib/constants'
 import JSZip from 'jszip'
 import path from 'path'
-import { basicSettings, basicStorageState } from './storageStates'
+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' })
-})
 
-test.use({
-  storageState: structuredClone(basicStorageState),
+  // set the default settings
+  await page.addInitScript(
+    async ({ token, settingsKey, settings }) => {
+      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 }),
+    }
+  )
 })
 
 test.setTimeout(60_000)
@@ -25,7 +35,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 context.addInitScript(async () => {
+  await page.addInitScript(async () => {
     ;(window as any).playwrightSkipFilePicker = true
     localStorage.setItem(
       'persistCode',
@@ -69,6 +79,7 @@ const part001 = startSketchOn('-XZ')
   |> extrude(4, %)`
     )
   })
+
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')
   await u.waitForAuthSkipAppStart()
@@ -364,17 +375,19 @@ test('extrude on each default plane should be stable', async ({
     await u.removeCurrentCode()
     // add makeCode('XZ')
     await u.openAndClearDebugPanel()
-    await page.locator('.cm-content').fill(makeCode(plane))
+    await u.doAndWaitForImageDiff(
+      () => page.locator('.cm-content').fill(makeCode(plane)),
+      200
+    )
     // wait for execution done
     await u.expectCmdLog('[data-message-type="execution-done"]')
     await u.clearAndCloseDebugPanel()
 
-    await page.getByText('Code').click()
-    await page.waitForTimeout(150)
+    await u.closeKclCodePanel()
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
     })
-    await page.getByText('Code').click()
+    await u.openKclCodePanel()
   }
   await runSnapshotsForOtherPlanes('XY')
   await runSnapshotsForOtherPlanes('-XY')
@@ -445,105 +458,108 @@ test('Draft segments should look right', async ({ page, context }) => {
   })
 })
 
-test('Client side scene scale should match engine scale - Inch', async ({
-  page,
-}) => {
-  const u = getUtils(page)
-  await page.setViewportSize({ width: 1200, height: 500 })
-  const PUR = 400 / 37.5 //pixeltoUnitRatio
-  await page.goto('/')
-  await u.waitForAuthSkipAppStart()
-  await u.openDebugPanel()
+test.describe('Client side scene scale should match engine scale', () => {
+  test('Inch scale', async ({ page }) => {
+    const u = getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    const PUR = 400 / 37.5 //pixeltoUnitRatio
+    await page.goto('/')
+    await u.waitForAuthSkipAppStart()
+    await u.openDebugPanel()
 
-  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' })
+    ).not.toBeDisabled()
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
 
-  // click on "Start Sketch" button
-  await u.clearCommandLogs()
-  await u.doAndWaitForImageDiff(
-    () => page.getByRole('button', { name: 'Start Sketch' }).click(),
-    200
-  )
+    // click on "Start Sketch" button
+    await u.clearCommandLogs()
+    await u.doAndWaitForImageDiff(
+      () => page.getByRole('button', { name: 'Start Sketch' }).click(),
+      200
+    )
 
-  // select a plane
-  await page.mouse.click(700, 200)
+    // select a plane
+    await page.mouse.click(700, 200)
 
-  await expect(page.locator('.cm-content')).toHaveText(
-    `const part001 = startSketchOn('-XZ')`
-  )
+    await expect(page.locator('.cm-content')).toHaveText(
+      `const part001 = startSketchOn('-XZ')`
+    )
 
-  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+    await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
 
-  const startXPx = 600
-  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], %)`)
-  await page.waitForTimeout(100)
+    const startXPx = 600
+    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], %)`)
+    await page.waitForTimeout(100)
 
-  await u.closeDebugPanel()
+    await u.closeDebugPanel()
 
-  await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
-  await page.waitForTimeout(100)
+    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+    await page.waitForTimeout(100)
 
-  await expect(page.locator('.cm-content'))
-    .toHaveText(`const part001 = startSketchOn('-XZ')
-  |> startProfileAt([9.06, -12.22], %)
-  |> line([9.14, 0], %)`)
+    await expect(page.locator('.cm-content'))
+      .toHaveText(`const part001 = startSketchOn('-XZ')
+    |> startProfileAt([9.06, -12.22], %)
+    |> line([9.14, 0], %)`)
 
-  await page.getByRole('button', { name: 'Tangential Arc' }).click()
-  await page.waitForTimeout(100)
+    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page.waitForTimeout(100)
 
-  await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
+    await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
 
-  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], %)`)
+    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], %)`)
 
-  // click tangential arc tool again to unequip it
-  await page.getByRole('button', { name: 'Tangential Arc' }).click()
-  await page.waitForTimeout(100)
+    // click tangential arc tool again to unequip it
+    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page.waitForTimeout(100)
 
-  // screen shot should show the sketch
-  await expect(page).toHaveScreenshot({
-    maxDiffPixels: 100,
+    // screen shot should show the sketch
+    await expect(page).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+
+    // exit sketch
+    await u.openAndClearDebugPanel()
+    await page.getByRole('button', { name: 'Exit Sketch' }).click()
+
+    // wait for execution done
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.clearAndCloseDebugPanel()
+    await page.waitForTimeout(200)
+
+    // second screen shot should look almost identical, i.e. scale should be the same.
+    await expect(page).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
   })
 
-  // exit sketch
-  await u.openAndClearDebugPanel()
-  await page.getByRole('button', { name: 'Exit Sketch' }).click()
-
-  // wait for execution done
-  await u.expectCmdLog('[data-message-type="execution-done"]')
-  await u.clearAndCloseDebugPanel()
-  await page.waitForTimeout(200)
-
-  // second screen shot should look almost identical, i.e. scale should be the same.
-  await expect(page).toHaveScreenshot({
-    maxDiffPixels: 100,
-  })
-})
-
-test.describe('Client side scene scale should match engine scale - Millimeters', () => {
-  const storageState = structuredClone(basicStorageState)
-  storageState.origins[0].localStorage[2].value = TOML.stringify({
-    settings: {
-      ...basicSettings,
-      modeling: {
-        ...basicSettings.modeling,
-        defaultUnit: 'mm',
+  test('Millimeter scale', async ({ page }) => {
+    await page.addInitScript(
+      async ({ settingsKey, settings }) => {
+        localStorage.setItem(settingsKey, settings)
       },
-    },
-  })
-  test.use({
-    storageState,
-  })
-
-  test('Millimeters', async ({ page }) => {
+      {
+        settingsKey: TEST_SETTINGS_KEY,
+        settings: TOML.stringify({
+          settings: {
+            ...TEST_SETTINGS,
+            modeling: {
+              ...TEST_SETTINGS.modeling,
+              defaultUnit: 'mm',
+            },
+          },
+        }),
+      }
+    )
     const u = getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -638,7 +654,7 @@ test('Sketch on face with none z-up', async ({ page, context }) => {
   |> close(%)
   |> extrude(5 + 7, %)
 const part002 = startSketchOn(part001, 'seg01')
-  |> startProfileAt([-2.89, 1.82], %)
+  |> startProfileAt([8, 8], %)
   |> line([4.68, 3.05], %)
   |> line([0, -7.79], %, 'seg02')
   |> close(%)
@@ -650,6 +666,19 @@ 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()

e2e/playwright/storageStates.ts

@@ -1,9 +1,8 @@
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
-import { secrets } from './secrets'
-import * as TOML from '@iarna/toml'
 import { Themes } from 'lib/theme'
 
-export const basicSettings = {
+export const TEST_SETTINGS_KEY = '/user.toml'
+export const TEST_SETTINGS = {
   app: {
     theme: Themes.Dark,
     onboardingStatus: 'dismissed',
@@ -22,19 +21,26 @@ export const basicSettings = {
   },
 } satisfies Partial<SaveSettingsPayload>
 
-export const basicStorageState = {
-  cookies: [],
-  origins: [
-    {
-      origin: 'http://localhost:3000',
-      localStorage: [
-        { name: 'TOKEN_PERSIST_KEY', value: secrets.token },
-        { name: 'persistCode', value: '' },
-        {
-          name: '/user.toml',
-          value: TOML.stringify({ settings: basicSettings }),
-        },
-      ],
-    },
-  ],
-}
+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

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

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.15.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.18",
@@ -15,24 +15,30 @@
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
-    "@replit/codemirror-interact": "^6.3.0",
-    "@tauri-apps/api": "^1.5.3",
+    "@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",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.5.2",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@types/node": "^18.19.26",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.22",
+    "@types/node": "^18.19.31",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@uiw/react-codemirror": "^4.21.25",
     "@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.3",
+    "formik": "^2.4.5",
     "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",
@@ -47,19 +53,19 @@
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.22.3",
     "sketch-helpers": "^0.0.4",
-    "swr": "^2.2.2",
-    "tauri-plugin-fs-extra-api": "https://github.com/tauri-apps/tauri-plugin-fs-extra#v1",
-    "three": "^0.160.0",
+    "swr": "^2.2.5",
+    "three": "^0.163.0",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
+    "ua-parser-js": "^1.0.37",
     "uuid": "^9.0.1",
-    "vitest": "^1.4.0",
+    "vitest": "^1.5.0",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.5",
     "wasm-pack": "^0.12.1",
     "web-vitals": "^3.5.2",
-    "ws": "^8.13.0",
+    "ws": "^8.16.0",
     "xstate": "^4.38.2",
     "zustand": "^4.5.2"
   },
@@ -86,7 +92,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\" '.package.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\" '.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)\""
   },
@@ -111,23 +117,24 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.3",
-    "@playwright/test": "^1.39.0",
-    "@tauri-apps/cli": "^1.5.11",
+    "@playwright/test": "^1.43.0",
+    "@tauri-apps/cli": "^2.0.0-beta.13",
     "@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.160.0",
+    "@types/three": "^0.163.0",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.8",
     "@types/wait-on": "^5.3.4",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@types/ws": "^8.5.5",
+    "@types/ws": "^8.5.10",
     "@vitejs/plugin-react": "^4.2.1",
     "@wdio/cli": "^8.24.3",
-    "@wdio/globals": "^8.24.3",
+    "@wdio/globals": "^8.36.0",
     "@wdio/local-runner": "^8.35.1",
-    "@wdio/mocha-framework": "^8.35.0",
+    "@wdio/mocha-framework": "^8.36.0",
     "@wdio/spec-reporter": "^8.32.4",
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.19",
@@ -149,6 +156,6 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest-webgl-canvas-mock": "^1.1.0",
     "wait-on": "^7.2.0",
-    "yarn": "^1.22.19"
+    "yarn": "^1.22.22"
   }
 }

playwright.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig, devices } from '@playwright/test'
-import { basicStorageState } from './e2e/playwright/storageStates'
 
 /**
  * Read environment variables from file.
@@ -29,9 +28,6 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-
-    /* Use a common shared localStorage */
-    storageState: basicStorageState,
   },
 
   /* Configure projects for major browsers */

src-tauri/Cargo.toml

@@ -7,21 +7,26 @@ license = ""
 repository = "https://github.com/KittyCAD/modeling-app"
 default-run = "app"
 edition = "2021"
-rust-version = "1.60"
+rust-version = "1.70"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.5.1", features = [] }
+tauri-build = { version = "2.0.0-beta.12", features = [] }
 
 [dependencies]
 anyhow = "1"
-kittycad = "0.2.63"
+kittycad = "0.2.67"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-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" }
+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"] }
 toml = "0.8.2"
 

src-tauri/capabilities/desktop.json

@@ -0,0 +1,87 @@
+{
+  "$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,11 +4,15 @@
 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::{InvokeError, Manager};
+use tauri::ipc::InvokeError;
+use tauri_plugin_shell::ShellExt;
 const DEFAULT_HOST: &str = "https://api.kittycad.io";
 
 /// This command returns the a json string parse from a toml file at the path.
@@ -24,6 +28,56 @@ 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> {
@@ -85,7 +139,8 @@ 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 {
-        tauri::api::shell::open(&app.shell_scope(), auth_uri.secret(), None)
+        app.shell()
+            .open(auth_uri.secret(), None)
             .map_err(|e| InvokeError::from_anyhow(e.into()))?;
     }
 
@@ -165,12 +220,15 @@ fn show_in_folder(path: String) {
 fn main() {
     tauri::Builder::default()
         .setup(|_app| {
-            #[cfg(debug_assertions)] // only include this code on debug builds
+            #[cfg(debug_assertions)]
             {
-                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();
+                use tauri::Manager;
+                _app.get_webview("main").unwrap().open_devtools();
+            }
+            #[cfg(not(debug_assertions))]
+            {
+                _app.handle()
+                    .plugin(tauri_plugin_updater::Builder::new().build())?;
             }
             Ok(())
         })
@@ -179,9 +237,14 @@ fn main() {
             login,
             read_toml,
             read_txt_file,
+            read_dir_recursive,
             show_in_folder,
         ])
-        .plugin(tauri_plugin_fs_extra::init())
+        .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())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -1,90 +1,9 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "build": {
-    "beforeDevCommand": "yarn start",
-    "devPath": "http://localhost:3000",
-    "distDir": "../build"
-  },
-  "package": {
-    "productName": "zoo-modeling-app",
-    "version": "0.17.3"
-  },
-  "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",
-        "icons/128x128.png",
-        "icons/128x128@2x.png",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ],
-      "identifier": "dev.zoo.modeling-app",
-      "longDescription": "",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
-      "resources": [],
-      "shortDescription": "",
-      "targets": "all"
-    },
+  "app": {
     "security": {
       "csp": null
     },
-    "updater": {
-      "active": false
-    },
     "windows": [
       {
         "fullscreen": false,
@@ -94,5 +13,47 @@
         "width": 1800
       }
     ]
-  }
+  },
+  "build": {
+    "beforeDevCommand": "yarn start",
+    "devUrl": "http://localhost:3000",
+    "frontendDist": "../build"
+  },
+  "bundle": {
+    "active": true,
+    "category": "DeveloperTool",
+    "copyright": "",
+    "externalBin": [],
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "linux": {
+      "deb": {
+        "depends": []
+      }
+    },
+    "longDescription": "",
+    "macOS": {
+      "entitlements": null,
+      "exceptionDomain": "",
+      "frameworks": [],
+      "providerShortName": null,
+      "signingIdentity": null
+    },
+    "resources": [],
+    "shortDescription": "",
+    "targets": "all"
+  },
+  "identifier": "dev.zoo.modeling-app",
+  "plugins": {
+    "shell": {
+      "open": true
+    }
+  },
+  "productName": "Zoo Modeling App",
+  "version": "0.17.3"
 }

src-tauri/tauri.macos.conf.json

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

src-tauri/tauri.release.conf.json

@@ -1,6 +1,13 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "tauri": {
+  "bundle": {
+    "windows": {
+      "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
+      "digestAlgorithm": "sha256",
+      "timestampUrl": "http://timestamp.digicert.com"
+    }
+  },
+  "plugins": {
     "updater": {
       "active": true,
       "endpoints": [
@@ -8,14 +15,6 @@
       ],
       "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

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

src/App.tsx

@@ -1,22 +1,12 @@
-import { useCallback, MouseEventHandler, useEffect } from 'react'
-import { DebugPanel } from './components/DebugPanel'
+import { MouseEventHandler, useEffect, useRef } from 'react'
 import { uuidv4 } from 'lib/utils'
-import { PaneType, useStore } from './useStore'
-import { Logs, KCLErrors } from './components/Logs'
-import { CollapsiblePanel } from './components/CollapsiblePanel'
-import { MemoryPanel } from './components/MemoryPanel'
+import { useStore } from './useStore'
 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'
@@ -24,9 +14,6 @@ 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'
@@ -34,6 +21,7 @@ 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'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -41,6 +29,9 @@ export function App() {
   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
@@ -49,43 +40,24 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
-  const {
-    buttonDownInStream,
-    openPanes,
-    setOpenPanes,
-    didDragInStream,
-    streamDimensions,
-  } = useStore((s) => ({
-    buttonDownInStream: s.buttonDownInStream,
-    openPanes: s.openPanes,
-    setOpenPanes: s.setOpenPanes,
-    didDragInStream: s.didDragInStream,
-    streamDimensions: s.streamDimensions,
-  }))
+  const { buttonDownInStream, didDragInStream, streamDimensions, setHtmlRef } =
+    useStore((s) => ({
+      buttonDownInStream: s.buttonDownInStream,
+      didDragInStream: s.didDragInStream,
+      streamDimensions: s.streamDimensions,
+      setHtmlRef: s.setHtmlRef,
+    }))
+
+  useEffect(() => {
+    setHtmlRef(ref)
+  }, [ref])
 
   const { settings } = useSettingsAuthContext()
   const {
-    modeling: { showDebugPanel },
-    app: { theme, onboardingStatus },
+    app: { onboardingStatus },
   } = settings.context
   const { state, send } = useModelingContext()
 
-  const editorTheme =
-    theme.current === Themes.System ? getSystemTheme() : theme.current
-
-  // 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()
@@ -140,6 +112,7 @@ export function App() {
     <div
       className="relative h-full flex flex-col"
       onMouseMove={handleMouseMove}
+      ref={ref}
     >
       <AppHeader
         className={
@@ -151,74 +124,8 @@ export function App() {
         enableMenu={true}
       />
       <ModalContainer />
-      <Resizable
-        className={
-          'pointer-events-none h-full flex flex-col flex-1 z-10 my-2 ml-2 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 hover:dark:bg-chalkboard-110 bg-transparent transition-colors duration-75 transition-ease-out delay-100 ' +
-            (buttonDownInStream || onboardingStatus.current === '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={{ bg: 'group-open:bg-destroy-70' }}
-            />
-          </section>
-        </div>
-      </Resizable>
+      <ModelingSidebar paneOpacity={paneOpacity} />
       <Stream className="absolute inset-0 z-0" />
-      {showDebugPanel.current && (
-        <DebugPanel
-          title="Debug"
-          className={
-            'transition-opacity transition-duration-75 ' +
-            paneOpacity +
-            (buttonDownInStream ? ' pointer-events-none' : '')
-          }
-          open={openPanes.includes('debug')}
-        />
-      )}
       {/* <CamToggle /> */}
     </div>
   )

src/Router.tsx

@@ -35,15 +35,17 @@ const router = createBrowserRouter([
   {
     loader: settingsLoader,
     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>
+        <SettingsAuthProvider>
+          <LspProvider>
+            <KclContextProvider>
               <Outlet />
-            </LspProvider>
-          </SettingsAuthProvider>
-        </KclContextProvider>
+            </KclContextProvider>
+          </LspProvider>
+        </SettingsAuthProvider>
       </CommandBarProvider>
     ),
     errorElement: <ErrorPage />,

src/Toolbar.tsx

@@ -254,7 +254,7 @@ export const Toolbar = () => {
         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"
       >
-        {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
+        {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
       </ActionButton>
     </div>
   )

src/clientSideScene/CameraControls.ts

@@ -110,14 +110,6 @@ 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' &&
@@ -910,6 +902,26 @@ 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
@@ -937,24 +949,7 @@ export class CameraControls {
         isPerspective: this.isPerspective,
         target: this.target,
       })
-    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),
-      ],
-    })
+    this.deferReactUpdate(this.reactCameraProperties)
     Object.values(this._camChangeCallbacks).forEach((cb) => cb())
   }
   getInteractionType = (event: any) =>

src/clientSideScene/ClientSideSceneComp.tsx

@@ -126,12 +126,9 @@ const throttled = throttle((a: ReactCameraProperties) => {
 }, 1000 / 15)
 
 export const CamDebugSettings = () => {
-  const [camSettings, setCamSettings] = useState<ReactCameraProperties>({
-    type: 'perspective',
-    fov: 12,
-    position: [0, 0, 0],
-    quaternion: [0, 0, 0, 1],
-  })
+  const [camSettings, setCamSettings] = useState<ReactCameraProperties>(
+    sceneInfra.camControls.reactCameraProperties
+  )
   const [fov, setFov] = useState(12)
 
   useEffect(() => {

src/colors.css

@@ -15,18 +15,20 @@
         https://catmosphere-theme-builder.vercel.app/?colors=%5B%7B%22from%22:%7B%22l%22:1,%22c%22:0.01,%22h%22:78%7D,%22to%22:%7B%22l%22:0.065,%22c%22:0.05,%22h%22:182.6%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.45,%22h%22:122.4%7D,%22to%22:%7B%22l%22:0.13,%22c%22:0.031,%22h%22:137.2%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.13,%22h%22:176%7D,%22to%22:%7B%22l%22:0.116,%22c%22:0.097,%22h%22:213.1%7D,%22stops%22:10,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.169,%22h%22:144.4%7D,%22to%22:%7B%22l%22:0.12,%22c%22:0.45,%22h%22:132.7%7D,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.087,%22h%22:261.6%7D,%22to%22:%7B%22l%22:0.22,%22c%22:0.084,%22h%22:275.5%7D,%22steps%22:12,%22uuid%22:%227tpx9pf1zd6%22%7D,%7B%22from%22:%7B%22l%22:0.954,%22c%22:0.108,%22h%22:280.6%7D,%22to%22:%7B%22l%22:0.166,%22c%22:0.188,%22h%22:263.8%7D,%22steps%22:12,%22uuid%22:%22vu652mebd3%22%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.115,%22h%22:0%7D,%22to%22:%7B%22l%22:0.096,%22c%22:0.261,%22h%22:302%7D,%22steps%22:12%7D,%7B%22from%22:%7B%22l%22:1,%22c%22:0.185,%22h%22:19.8%7D,%22to%22:%7B%22l%22:0.368,%22c%22:0.45,%22h%22:9.4%7D,%22steps%22:8,%22uuid%22:%22g05inkd34l%22%7D,%7B%22from%22:%7B%22l%22:0.912,%22c%22:0.139,%22h%22:87%7D,%22to%22:%7B%22l%22:0.502,%22c%22:0.45,%22h%22:97.7%7D,%22steps%22:8,%22uuid%22:%22l892hcw4ef%22%7D,%7B%22from%22:%7B%22l%22:0.89,%22c%22:0.16,%22h%22:143.4%7D,%22to%22:%7B%22l%22:0.466,%22c%22:0.208,%22h%22:147.7%7D,%22steps%22:8,%22uuid%22:%22hkd09y9ov4h%22%7D%5D
     */
   /* Chalkboard */
-  --chalkboard-10: oklch(99.9% 0.003766 102.8deg);
-  --chalkboard-20: oklch(91.34% 0.009353 109deg);
-  --chalkboard-30: oklch(82.99% 0.00994 115.2deg);
-  --chalkboard-40: oklch(74.63% 0.01053 121.4deg);
-  --chalkboard-50: oklch(66.27% 0.01111 127.6deg);
-  --chalkboard-60: oklch(57.92% 0.0117 133.9deg);
-  --chalkboard-70: oklch(49.56% 0.01229 140.1deg);
-  --chalkboard-80: oklch(41.21% 0.01288 146.3deg);
-  --chalkboard-90: oklch(32.85% 0.01346 152.5deg);
-  --chalkboard-100: oklch(24.49% 0.01405 158.7deg);
-  --chalkboard-110: oklch(16.14% 0.01464 164.9deg);
-  --chalkboard-120: oklch(7.783% 0.01522 171.1deg);
+
+  /* Chalkboard */
+  --chalkboard-10: oklch(99.11% 0 var(--primary-hue));
+  --chalkboard-20: oklch(95.51% 0 var(--primary-hue));
+  --chalkboard-30: oklch(88.48% 0 var(--primary-hue));
+  --chalkboard-40: oklch(82.01% 0 var(--primary-hue));
+  --chalkboard-50: oklch(72.41% 0 var(--primary-hue));
+  --chalkboard-60: oklch(68.19% 0 var(--primary-hue));
+  --chalkboard-70: oklch(48.19% 0 var(--primary-hue));
+  --chalkboard-80: oklch(39.04% 0 var(--primary-hue));
+  --chalkboard-90: oklch(30.12% 0 var(--primary-hue));
+  --chalkboard-100: oklch(22.64% 0 var(--primary-hue));
+  --chalkboard-110: oklch(18.22% 0 var(--primary-hue));
+  --chalkboard-120: oklch(0% 0 var(--primary-hue));
 
   /* Energy  */
   --energy-10: oklch(93.31% 0.227 122.3deg);
@@ -144,18 +146,18 @@
 
   /* Base values for use with Tailwind. */
   /* Chalkboard */
-  --_chalkboard-10: 99.7% 0.008766 102.8deg;
-  --_chalkboard-20: 91.34% 0.009353 109deg;
-  --_chalkboard-30: 82.99% 0.00994 115.2deg;
-  --_chalkboard-40: 74.63% 0.01053 121.4deg;
-  --_chalkboard-50: 66.27% 0.01111 127.6deg;
-  --_chalkboard-60: 57.92% 0.0117 133.9deg;
-  --_chalkboard-70: 49.56% 0.01229 140.1deg;
-  --_chalkboard-80: 41.21% 0.01288 146.3deg;
-  --_chalkboard-90: 32.85% 0.01346 152.5deg;
-  --_chalkboard-100: 24.49% 0.01405 158.7deg;
-  --_chalkboard-110: 16.14% 0.01464 164.9deg;
-  --_chalkboard-120: 7.783% 0.01522 171.1deg;
+  --_chalkboard-10: 99.11% 0 var(--primary-hue);
+  --_chalkboard-20: 95.51% 0 var(--primary-hue);
+  --_chalkboard-30: 88.48% 0 var(--primary-hue);
+  --_chalkboard-40: 82.01% 0 var(--primary-hue);
+  --_chalkboard-50: 72.41% 0 var(--primary-hue);
+  --_chalkboard-60: 68.19% 0 var(--primary-hue);
+  --_chalkboard-70: 48.19% 0 var(--primary-hue);
+  --_chalkboard-80: 39.04% 0 var(--primary-hue);
+  --_chalkboard-90: 30.12% 0 var(--primary-hue);
+  --_chalkboard-100: 22.64% 0 var(--primary-hue);
+  --_chalkboard-110: 18.22% 0 var(--primary-hue);
+  --_chalkboard-120: 0% 0 var(--primary-hue);
 
   /* Energy  */
   --_energy-10: 93.31% 0.227 122.3deg;

src/components/AppHeader.tsx

@@ -54,7 +54,7 @@ export const AppHeader = ({
           >
             Command Palette{' '}
             <kbd className="bg-primary/10 dark:bg-chalkboard-100 dark:text-primary inline-block px-1 py-0.5 border-primary dark:border-chalkboard-90">
-              {platform === 'darwin' ? '⌘K' : 'Ctrl+/'}
+              {platform === 'macos' ? '⌘K' : 'Ctrl+/'}
             </kbd>
           </ActionButton>
         )}

src/components/AstExplorer.tsx

@@ -16,7 +16,7 @@ export function AstExplorer() {
   const [filterKeys, setFilterKeys] = useState<string[]>(['start', 'end'])
 
   return (
-    <div className="relative" style={{ width: '300px' }}>
+    <div id="ast-explorer" className="relative">
       <div className="">
         filter out keys:<div className="w-2 inline-block"></div>
         {['start', 'end', 'type'].map((key) => {
@@ -45,7 +45,7 @@ export function AstExplorer() {
           setHighlightRange([0, 0])
         }}
       >
-        <pre className=" text-xs overflow-y-auto" style={{ width: '300px' }}>
+        <pre className="text-xs">
           <DisplayObj
             obj={kclManager.ast}
             filterKeys={filterKeys}
@@ -109,7 +109,7 @@ function DisplayObj({
     <pre
       ref={ref}
       className={`ml-2 border-l border-violet-600 pl-1 ${
-        hasCursor ? 'bg-violet-100/25' : ''
+        hasCursor ? 'bg-violet-100/80 dark:bg-violet-100/25' : ''
       }`}
       onMouseEnter={(e) => {
         setHighlightRange([obj?.start || 0, obj.end])

src/components/CollapsiblePanel.module.css

@@ -1,57 +0,0 @@
-.panel {
-  @apply relative z-0;
-  @apply bg-chalkboard-10/70 backdrop-blur-sm;
-}
-
-.header::before,
-.header::-webkit-details-marker {
-  display: none;
-}
-
-:global(.dark) .panel {
-  @apply bg-chalkboard-110/50 backdrop-blur-0;
-}
-
-.header {
-  @apply sticky top-0 z-10 cursor-pointer;
-  @apply flex items-center justify-between gap-2 w-full p-2;
-  @apply font-mono text-xs font-bold select-none text-chalkboard-90;
-  @apply bg-chalkboard-10;
-}
-
-.header:not(:last-of-type) {
-  @apply border-b;
-}
-
-:global(.dark) .header {
-  @apply bg-chalkboard-110 border-b-chalkboard-90 text-chalkboard-30;
-}
-
-:global(.dark) .header:not(:last-of-type) {
-  @apply border-b-2;
-}
-
-.panel:first-of-type .header {
-  @apply rounded-t;
-}
-
-.panel:last-of-type .header {
-  @apply rounded-b;
-}
-
-.panel[open] .header {
-  @apply rounded-t rounded-b-none;
-}
-
-.panel[open] {
-  @apply flex-grow max-h-full h-48 my-1 rounded;
-}
-
-.panel[open] + .panel[open],
-.panel[open]:first-of-type {
-  @apply mt-0;
-}
-
-.panel[open]:last-of-type {
-  @apply mb-0;
-}

src/components/CollapsiblePanel.tsx

@@ -1,76 +0,0 @@
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { ActionIcon } from './ActionIcon'
-import styles from './CollapsiblePanel.module.css'
-
-export interface CollapsiblePanelProps
-  extends React.PropsWithChildren,
-    React.HTMLAttributes<HTMLDetailsElement> {
-  title: string
-  icon?: IconDefinition
-  open?: boolean
-  menu?: React.ReactNode
-  detailsTestId?: string
-  iconClassNames?: {
-    bg?: string
-    icon?: string
-  }
-}
-
-export const PanelHeader = ({
-  title,
-  icon,
-  iconClassNames,
-  menu,
-}: CollapsiblePanelProps) => {
-  return (
-    <summary className={styles.header}>
-      <div className="flex gap-2 items-center flex-1">
-        <ActionIcon
-          icon={icon}
-          className="p-1"
-          size="sm"
-          bgClassName={
-            'dark:!bg-transparent group-open:bg-primary dark:group-open:!bg-primary rounded-sm ' +
-            (iconClassNames?.bg || '')
-          }
-          iconClassName={
-            'group-open:text-chalkboard-10 ' + (iconClassNames?.icon || '')
-          }
-        />
-        {title}
-      </div>
-      <div className="group-open:opacity-100 opacity-0 group-open:pointer-events-auto pointer-events-none">
-        {menu}
-      </div>
-    </summary>
-  )
-}
-
-export const CollapsiblePanel = ({
-  title,
-  icon,
-  children,
-  className,
-  iconClassNames,
-  menu,
-  detailsTestId,
-  ...props
-}: CollapsiblePanelProps) => {
-  return (
-    <details
-      {...props}
-      data-testid={detailsTestId}
-      className={
-        styles.panel + ' pointer-events-auto group ' + (className || '')
-      }
-    >
-      <PanelHeader
-        title={title}
-        icon={icon}
-        iconClassNames={iconClassNames}
-        menu={menu}
-      />
-      {children}
-    </details>
-  )
-}

src/components/DebugPanel.tsx

@@ -1,26 +0,0 @@
-import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { AstExplorer } from './AstExplorer'
-import { EngineCommands } from './EngineCommands'
-import { CamDebugSettings } from 'clientSideScene/ClientSideSceneComp'
-
-export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
-  return (
-    <CollapsiblePanel
-      {...props}
-      className={
-        '!absolute overflow-auto !h-auto bottom-5 right-5 ' + className
-      }
-      // header height, top-5, and bottom-5
-      style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
-      detailsTestId="debug-panel"
-    >
-      <section className="p-4 flex flex-col gap-4">
-        <EngineCommands />
-        <CamDebugSettings />
-        <div style={{ height: '400px' }} className="overflow-y-auto">
-          <AstExplorer />
-        </div>
-      </section>
-    </CollapsiblePanel>
-  )
-}

src/components/EngineCommands.tsx

@@ -3,7 +3,9 @@ import { engineCommandManager } from 'lib/singletons'
 import { useState, useEffect } from 'react'
 
 function useEngineCommands(): [CommandLog[], () => void] {
-  const [engineCommands, setEngineCommands] = useState<CommandLog[]>([])
+  const [engineCommands, setEngineCommands] = useState<CommandLog[]>(
+    engineCommandManager.commandLogs
+  )
 
   useEffect(() => {
     engineCommandManager.registerCommandLogCallback((commands) =>

src/components/FileMachineProvider.tsx

@@ -14,16 +14,10 @@ import {
 } from 'xstate'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { fileMachine } from 'machines/fileMachine'
-import {
-  createDir,
-  removeDir,
-  removeFile,
-  renameFile,
-  writeFile,
-} from '@tauri-apps/api/fs'
+import { mkdir, remove, rename, create } from '@tauri-apps/plugin-fs'
 import { readProject } from 'lib/tauriFS'
 import { isTauri } from 'lib/isTauri'
-import { sep } from '@tauri-apps/api/path'
+import { join, sep } from '@tauri-apps/api/path'
 import { DEFAULT_FILE_NAME, FILE_EXT } from 'lib/constants'
 
 type MachineContext<T extends AnyStateMachine> = {
@@ -56,7 +50,7 @@ export const FileMachineProvider = ({
           commandBarSend({ type: 'Close' })
           navigate(
             `${paths.FILE}/${encodeURIComponent(
-              context.selectedDirectory + sep + event.data.name
+              context.selectedDirectory + sep() + event.data.name
             )}`
           )
         }
@@ -79,14 +73,13 @@ export const FileMachineProvider = ({
         let name = event.data.name.trim() || DEFAULT_FILE_NAME
 
         if (event.data.makeDir) {
-          await createDir(context.selectedDirectory.path + sep + name)
+          await mkdir(await join(context.selectedDirectory.path, name))
         } else {
-          await writeFile(
+          await create(
             context.selectedDirectory.path +
-              sep +
+              sep() +
               name +
-              (name.endsWith(FILE_EXT) ? '' : FILE_EXT),
-            ''
+              (name.endsWith(FILE_EXT) ? '' : FILE_EXT)
           )
         }
 
@@ -99,12 +92,11 @@ export const FileMachineProvider = ({
         const { oldName, newName, isDir } = event.data
         let name = newName ? newName : DEFAULT_FILE_NAME
 
-        await renameFile(
-          context.selectedDirectory.path + sep + oldName,
-          context.selectedDirectory.path +
-            sep +
-            name +
-            (name.endsWith(FILE_EXT) || isDir ? '' : FILE_EXT)
+        await rename(
+          await join(context.selectedDirectory.path, oldName),
+          (await join(context.selectedDirectory.path, name)) +
+            (name.endsWith(FILE_EXT) || isDir ? '' : FILE_EXT),
+          {}
         )
         return (
           oldName !== name && `Successfully renamed "${oldName}" to "${name}"`
@@ -117,11 +109,11 @@ export const FileMachineProvider = ({
         const isDir = !!event.data.children
 
         if (isDir) {
-          await removeDir(event.data.path, {
+          await remove(event.data.path, {
             recursive: true,
           }).catch((e) => console.error('Error deleting directory', e))
         } else {
-          await removeFile(event.data.path).catch((e) =>
+          await remove(event.data.path).catch((e) =>
             console.error('Error deleting file', e)
           )
         }

src/components/FileTree.tsx

@@ -1,8 +1,7 @@
-import { type IndexLoaderData } from 'lib/types'
+import type { FileEntry, IndexLoaderData } from 'lib/types'
 import { paths } from 'lib/paths'
 import { ActionButton } from './ActionButton'
 import Tooltip from './Tooltip'
-import { FileEntry } from '@tauri-apps/api/fs'
 import { Dispatch, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Dialog, Disclosure } from '@headlessui/react'
@@ -172,7 +171,7 @@ const FileTreeItem = ({
 
     if (fileOrDir.name?.endsWith(FILE_EXT) === false && project?.path) {
       // Import non-kcl files
-      kclManager.setCodeAndExecute(
+      kclManager.setCode(
         `import("${fileOrDir.path.replace(project.path, '.')}")\n` +
           kclManager.code
       )

src/components/Logs.tsx

@@ -1,76 +0,0 @@
-import ReactJson from 'react-json-view'
-import { useEffect } from 'react'
-import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { Themes } from '../lib/theme'
-import { useKclContext } from 'lang/KclProvider'
-
-const ReactJsonTypeHack = ReactJson as any
-
-interface LogPanelProps extends CollapsiblePanelProps {
-  theme?: Exclude<Themes, Themes.System>
-}
-
-export const Logs = ({ theme = Themes.Light, ...props }: LogPanelProps) => {
-  const { logs } = useKclContext()
-  useEffect(() => {
-    const element = document.querySelector('.console-tile')
-    if (element) {
-      element.scrollTop = element.scrollHeight - element.clientHeight
-    }
-  }, [logs])
-  return (
-    <CollapsiblePanel {...props}>
-      <div className="relative w-full">
-        <div className="absolute inset-0 flex flex-col">
-          <ReactJsonTypeHack
-            src={logs}
-            collapsed={1}
-            collapseStringsAfterLength={60}
-            enableClipboard={false}
-            displayArrayKey={false}
-            displayDataTypes={false}
-            displayObjectSize={true}
-            indentWidth={2}
-            quotesOnKeys={false}
-            name={false}
-            theme={theme === 'light' ? 'rjv-default' : 'monokai'}
-          />
-        </div>
-      </div>
-    </CollapsiblePanel>
-  )
-}
-
-export const KCLErrors = ({
-  theme = Themes.Light,
-  ...props
-}: LogPanelProps) => {
-  const { errors } = useKclContext()
-  useEffect(() => {
-    const element = document.querySelector('.console-tile')
-    if (element) {
-      element.scrollTop = element.scrollHeight - element.clientHeight
-    }
-  }, [errors])
-  return (
-    <CollapsiblePanel {...props}>
-      <div className="h-full relative">
-        <div className="absolute inset-0 flex flex-col">
-          <ReactJsonTypeHack
-            src={errors}
-            collapsed={1}
-            collapseStringsAfterLength={60}
-            enableClipboard={false}
-            displayArrayKey={false}
-            displayDataTypes={false}
-            displayObjectSize={true}
-            indentWidth={2}
-            quotesOnKeys={false}
-            name={false}
-            theme={theme === 'light' ? 'rjv-default' : 'monokai'}
-          />
-        </div>
-      </div>
-    </CollapsiblePanel>
-  )
-}

src/components/LspProvider.tsx

@@ -1,6 +1,6 @@
 import { LanguageServerClient } from 'editor/plugins/lsp'
 import type * as LSP from 'vscode-languageserver-protocol'
-import React, { createContext, useMemo, useContext } from 'react'
+import React, { createContext, useMemo, useEffect, useContext } from 'react'
 import { FromServer, IntoServer } from 'editor/plugins/lsp/codec'
 import Server from '../editor/plugins/lsp/server'
 import Client from '../editor/plugins/lsp/client'
@@ -13,7 +13,8 @@ import { Extension } from '@codemirror/state'
 import { LanguageSupport } from '@codemirror/language'
 import { useNavigate } from 'react-router-dom'
 import { paths } from 'lib/paths'
-import { FileEntry } from '@tauri-apps/api/fs'
+import { FileEntry } from 'lib/types'
+import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
 
 const DEFAULT_FILE_NAME: string = 'main.kcl'
 
@@ -60,16 +61,27 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     isCopilotLspServerReady,
     setIsKclLspServerReady,
     setIsCopilotLspServerReady,
+    isStreamReady,
   } = useStore((s) => ({
     isKclLspServerReady: s.isKclLspServerReady,
     isCopilotLspServerReady: s.isCopilotLspServerReady,
     setIsKclLspServerReady: s.setIsKclLspServerReady,
     setIsCopilotLspServerReady: s.setIsCopilotLspServerReady,
+    isStreamReady: s.isStreamReady,
   }))
 
-  const { auth } = useSettingsAuthContext()
+  const {
+    auth,
+    settings: {
+      context: {
+        modeling: { defaultUnit },
+      },
+    },
+  } = useSettingsAuthContext()
   const token = auth?.context?.token
   const navigate = useNavigate()
+  const { overallState } = useNetworkStatus()
+  const isNetworkOkay = overallState === NetworkHealthState.Ok
 
   // So this is a bit weird, we need to initialize the lsp server and client.
   // But the server happens async so we break this into two parts.
@@ -87,7 +99,11 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
 
     const lspClient = new LanguageServerClient({ client, name: 'kcl' })
     return { lspClient }
-  }, [setIsKclLspServerReady, token])
+  }, [
+    setIsKclLspServerReady,
+    // We need a token for authenticating the server.
+    token,
+  ])
 
   // Here we initialize the plugin which will start the client.
   // Now that we have multi-file support the name of the file is a dep of
@@ -109,6 +125,25 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     return plugin
   }, [kclLspClient, isKclLspServerReady])
 
+  // Re-execute the scene when the units change.
+  useEffect(() => {
+    let plugins = kclLspClient.plugins
+    for (let plugin of plugins) {
+      if (plugin.updateUnits && isStreamReady && isNetworkOkay) {
+        plugin.updateUnits(defaultUnit.current)
+      }
+    }
+  }, [
+    kclLspClient,
+    defaultUnit.current,
+
+    // We want to re-execute the scene if the network comes back online.
+    // The lsp server will only re-execute if there were previous errors or
+    // changes, so it's fine to send it thru here.
+    isStreamReady,
+    isNetworkOkay,
+  ])
+
   const { lspClient: copilotLspClient } = useMemo(() => {
     const intoServer: IntoServer = new IntoServer()
     const fromServer: FromServer = FromServer.create()