Merge branch 'main' into pierremtb/shell-dry-run-validation-on-selections-and-extra-arguments

.env.development

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

.env.production

@@ -1,5 +1,8 @@
+NODE_ENV=production
+DEV=false
 VITE_KC_API_WS_MODELING_URL=wss://api.zoo.dev/ws/modeling/commands
 VITE_KC_API_BASE_URL=https://api.zoo.dev
 VITE_KC_SITE_BASE_URL=https://zoo.dev
+VITE_KC_SITE_APP_URL=https://app.zoo.dev
 VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=15000

.github/workflows/build-apps.yml

@@ -134,8 +134,6 @@ jobs:
           max_attempts: 3
           command: yarn install
 
-      - run: yarn tronb:vite
-
       - name: Prepare certificate and variables (Windows only)
         if: ${{ (env.IS_RELEASE == 'true' || env.IS_NIGHTLY == 'true') && matrix.os == 'windows-2022' }}
         run: |
@@ -165,8 +163,8 @@ jobs:
       - name: Build the app (debug)
         if: ${{ env.IS_RELEASE == 'false' && env.IS_NIGHTLY == 'false' }}
         # electron-builder doesn't have a concept of release vs debug,
-        # this is just not doing any codesign or release yml generation
-        run: yarn electron-builder --config
+        # this is just not doing any codesign or release yml generation, and points to dev infra
+        run: yarn tronb:package:dev
 
       - name: Build the app (release)
         if: ${{ env.IS_RELEASE == 'true' || env.IS_NIGHTLY == 'true' }}
@@ -185,7 +183,7 @@ jobs:
         with:
           timeout_minutes: 10
           max_attempts: 3
-          command: yarn electron-builder --config --publish always
+          command: yarn tronb:package:prod
 
       - name: List artifacts in out/
         run: ls -R out
@@ -246,7 +244,7 @@ jobs:
         with:
           timeout_minutes: 10
           max_attempts: 3
-          command: yarn electron-builder --config --publish always
+          command: yarn tronb:package:prod
 
       - uses: actions/upload-artifact@v4
         if: ${{ env.IS_RELEASE == 'true' }}
@@ -390,19 +388,19 @@ jobs:
 
       - name: Authenticate to Google Cloud
         if: ${{ env.IS_NIGHTLY == 'true' }}
-        uses: 'google-github-actions/auth@v2.1.7'
+        uses: 'google-github-actions/auth@v2.1.8'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 
       - name: Set up Google Cloud SDK
         if: ${{ env.IS_NIGHTLY == 'true' }}
-        uses: google-github-actions/setup-gcloud@v2.1.2
+        uses: google-github-actions/setup-gcloud@v2.1.4
         with:
           project_id: ${{ env.GOOGLE_CLOUD_PROJECT_ID }}
 
       - name: Upload nightly files to public bucket
         if: ${{ env.IS_NIGHTLY == 'true' }}
-        uses: google-github-actions/upload-cloud-storage@v2.2.1
+        uses: google-github-actions/upload-cloud-storage@v2.2.2
         with:
           path: out
           glob: '*'

.github/workflows/e2e-tests.yml

@@ -123,23 +123,23 @@ jobs:
       if: steps.download-wasm.outcome == 'failure'
       shell: bash
       run: yarn build:wasm
-    - name: build electron
+    - name: build web
       shell: bash
-      run: yarn tron:package
-    - name: Run ubuntu/chrome snapshots
-      if: ${{ matrix.os == 'namespace-profile-ubuntu-8-cores' && matrix.shardIndex == 1 }}
-      shell: bash
-      # TODO: break this in its own job, for now it's not slowing down the overall execution as ubuntu is the quickest,
-      # but we could do better. This forces a large 1/1 shard of all 20 snapshot tests that runs in about 3 minutes.
-      run: |
-        PLATFORM=web yarn playwright test --config=playwright.config.ts --retries="3" --update-snapshots --grep=@snapshot  --shard=1/1
-      env:
-        CI: true
-        NODE_ENV: development
-        VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
-        VITE_KC_SKIP_AUTH: true
-        token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
-        snapshottoken: ${{ secrets.KITTYCAD_API_TOKEN }}
+      run: yarn tronb:vite:dev
+    # - name: Run ubuntu/chrome snapshots
+    #   if: ${{ matrix.os == 'namespace-profile-ubuntu-8-cores' && matrix.shardIndex == 1 }}
+    #   shell: bash
+    #   # TODO: break this in its own job, for now it's not slowing down the overall execution as ubuntu is the quickest,
+    #   # but we could do better. This forces a large 1/1 shard of all 20 snapshot tests that runs in about 3 minutes.
+    #   run: |
+    #     PLATFORM=web yarn playwright test --config=playwright.config.ts --retries="3" --update-snapshots --grep=@snapshot  --shard=1/1
+    #   env:
+    #     CI: true
+    #     NODE_ENV: development
+    #     VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
+    #     VITE_KC_SKIP_AUTH: true
+    #     token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
+    #     snapshottoken: ${{ secrets.KITTYCAD_API_TOKEN }}
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() && (success() || failure()) }}
       with:
@@ -162,20 +162,20 @@ jobs:
           then echo "modified=true" >> $GITHUB_OUTPUT
           else echo "modified=false" >> $GITHUB_OUTPUT
           fi
-    - name: Commit changes, if any
-      if: steps.git-check.outputs.modified == 'true'
-      shell: bash
-      run: |
-        git add .
-        git config --local user.email "github-actions[bot]@users.noreply.github.com"
-        git config --local user.name "github-actions[bot]"
-        git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
-        git fetch origin
-        echo ${{ github.head_ref }}
-        git checkout ${{ github.head_ref }}
-        git commit -am "A snapshot a day keeps the bugs away! 📷🐛 (OS: ${{matrix.os}})" || true
-        git push
-        git push origin ${{ github.head_ref }}
+    # - name: Commit changes, if any
+    #   if: steps.git-check.outputs.modified == 'true'
+    #   shell: bash
+    #   run: |
+    #     git add .
+    #     git config --local user.email "github-actions[bot]@users.noreply.github.com"
+    #     git config --local user.name "github-actions[bot]"
+    #     git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
+    #     git fetch origin
+    #     echo ${{ github.head_ref }}
+    #     git checkout ${{ github.head_ref }}
+    #     git commit -am "A snapshot a day keeps the bugs away! 📷🐛 (OS: ${{matrix.os}})" || true
+    #     git push
+    #     git push origin ${{ github.head_ref }}
     # only upload artifacts if there's actually changes
     - uses: actions/upload-artifact@v4
       if: steps.git-check.outputs.modified == 'true'

.github/workflows/publish-apps-release.yml

@@ -108,17 +108,17 @@ jobs:
         run: yarn files:set-notes
 
       - name: Authenticate to Google Cloud
-        uses: 'google-github-actions/auth@v2.1.7'
+        uses: 'google-github-actions/auth@v2.1.8'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 
       - name: Set up Google Cloud SDK
-        uses: google-github-actions/setup-gcloud@v2.1.2
+        uses: google-github-actions/setup-gcloud@v2.1.4
         with:
           project_id: ${{ env.GOOGLE_CLOUD_PROJECT_ID }}
 
       - name: Upload release files to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.2.1
+        uses: google-github-actions/upload-cloud-storage@v2.2.2
         with:
           path: out
           glob: '*'

.gitignore

@@ -44,7 +44,7 @@ e2e/playwright/temp3.png
 e2e/playwright/export-snapshots/*
 !e2e/playwright/export-snapshots/*.png
 
-
+/kcl-samples
 /test-results/
 /playwright-report/
 /blob-report/

README.md

@@ -101,7 +101,7 @@ This will start the application and hot-reload on changes.
 
 Devtools can be opened with the usual Cmd-Opt-I (Mac) or Ctrl-Shift-I (Linux and Windows).
 
-To build, run `yarn tron:package`.
+To build with electron-builder, run `yarn tronb:package:dev` (or `yarn tronb:package:prod` to point to the .env.production variables)
 
 ## Checking out commits / Bisecting
 

docs/kcl/import.md

@@ -4,14 +4,16 @@ excerpt: "Import a CAD file."
 layout: manual
 ---
 
+**WARNING:** This function is deprecated.
+
 Import a CAD file.
 
+**DEPRECATED** Prefer to use import statements.
+
 For formats lacking unit data (such as STL, OBJ, or PLY files), the default unit of measurement is millimeters. Alternatively you may specify the unit by passing your desired measurement unit in the options parameter. When importing a GLTF file, the bin file will be imported as well. Import paths are relative to the current project directory.
 
 Note: The import command currently only works when using the native Modeling App.
 
-For importing KCL functions using the `import` statement, see the docs on [KCL modules](/docs/kcl/modules).
-
 ```js
 import(file_path: String, options?: ImportFormat) -> ImportedGeometry
 ```

docs/kcl/index.md

@@ -51,7 +51,6 @@ layout: manual
 * [`helixRevolutions`](kcl/helixRevolutions)
 * [`hole`](kcl/hole)
 * [`hollow`](kcl/hollow)
-* [`import`](kcl/import)
 * [`inch`](kcl/inch)
 * [`lastSegX`](kcl/lastSegX)
 * [`lastSegY`](kcl/lastSegY)

docs/kcl/std.json

@@ -92765,7 +92765,7 @@
   {
     "name": "import",
     "summary": "Import a CAD file.",
-    "description": "For formats lacking unit data (such as STL, OBJ, or PLY files), the default unit of measurement is millimeters. Alternatively you may specify the unit by passing your desired measurement unit in the options parameter. When importing a GLTF file, the bin file will be imported as well. Import paths are relative to the current project directory.\n\nNote: The import command currently only works when using the native Modeling App.\n\nFor importing KCL functions using the `import` statement, see the docs on [KCL modules](/docs/kcl/modules).",
+    "description": "**DEPRECATED** Prefer to use import statements.\n\nFor formats lacking unit data (such as STL, OBJ, or PLY files), the default unit of measurement is millimeters. Alternatively you may specify the unit by passing your desired measurement unit in the options parameter. When importing a GLTF file, the bin file will be imported as well. Import paths are relative to the current project directory.\n\nNote: The import command currently only works when using the native Modeling App.",
     "tags": [],
     "keywordArguments": false,
     "args": [
@@ -93168,7 +93168,7 @@
       "labelRequired": true
     },
     "unpublished": false,
-    "deprecated": false,
+    "deprecated": true,
     "examples": [
       "model = import(\"tests/inputs/cube.obj\")",
       "model = import(\"tests/inputs/cube.obj\", { format = \"obj\", units = \"m\" })",

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

@@ -1,7 +1,8 @@
 import { test, expect } from './zoo-test'
-
-import { getUtils } from './test-utils'
+import * as fsp from 'fs/promises'
+import { executorInputPath, getUtils } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
+import path from 'path'
 
 test.describe('Command bar tests', () => {
   test('Extrude from command bar selects extrude line after', async ({
@@ -305,4 +306,132 @@ test.describe('Command bar tests', () => {
     await arcToolCommand.click()
     await expect(arcToolButton).toHaveAttribute('aria-pressed', 'true')
   })
+
+  test(`Reacts to query param to open "import from URL" command`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+  }) => {
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&ask-open-desktop`
+      await homePage.expectState({
+        projectCards: [],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'New Project' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'New project',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+    })
+  })
+
+  test(`"import from URL" can add to existing project`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+    toolbar,
+    context,
+  }) => {
+    await context.folderSetupFn(async (dir) => {
+      const testProjectDir = path.join(dir, 'testProjectDir')
+      await Promise.all([fsp.mkdir(testProjectDir, { recursive: true })])
+      await Promise.all([
+        fsp.copyFile(
+          executorInputPath('cylinder.kcl'),
+          path.join(testProjectDir, 'main.kcl')
+        ),
+      ])
+    })
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&ask-open-desktop`
+      await homePage.expectState({
+        projectCards: [
+          {
+            fileCount: 1,
+            title: 'testProjectDir',
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'Existing Project' }).click()
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'projectName',
+        currentArgValue: '',
+        headerArguments: {
+          Method: 'Existing project',
+          Name: 'test',
+          ProjectName: '',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'projectName',
+      })
+      await cmdBar.selectOption({ name: 'testProjectDir' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'Existing project',
+          ProjectName: 'testProjectDir',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+      await toolbar.openPane('files')
+      await toolbar.expectFileTreeState(['main.kcl', 'test.kcl'])
+    })
+  })
 })

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -4,7 +4,6 @@ import { expect } from '@playwright/test'
 type CmdBarSerialised =
   | {
       stage: 'commandBarClosed'
-      // TODO no more properties needed but needs to be implemented in _serialiseCmdBar
     }
   | {
       stage: 'pickCommand'
@@ -37,6 +36,9 @@ export class CmdBarFixture {
   }
 
   private _serialiseCmdBar = async (): Promise<CmdBarSerialised> => {
+    if (!(await this.page.getByTestId('command-bar-wrapper').isVisible())) {
+      return { stage: 'commandBarClosed' }
+    }
     const reviewForm = this.page.locator('#review-form')
     const getHeaderArgs = async () => {
       const inputs = await this.page.getByTestId('cmd-bar-input-tab').all()
@@ -151,4 +153,11 @@ export class CmdBarFixture {
   chooseCommand = async (commandName: string) => {
     await this.cmdOptions.getByText(commandName).click()
   }
+
+  /**
+   * Select an option from the command bar
+   */
+  selectOption = (options: Parameters<typeof this.page.getByRole>[1]) => {
+    return this.page.getByRole('option', options)
+  }
 }

e2e/playwright/fixtures/toolbarFixture.ts

@@ -18,6 +18,7 @@ export class ToolbarFixture {
   filletButton!: Locator
   chamferButton!: Locator
   shellButton!: Locator
+  revolveButton!: Locator
   offsetPlaneButton!: Locator
   startSketchBtn!: Locator
   lineBtn!: Locator
@@ -47,6 +48,7 @@ export class ToolbarFixture {
     this.filletButton = page.getByTestId('fillet3d')
     this.chamferButton = page.getByTestId('chamfer3d')
     this.shellButton = page.getByTestId('shell')
+    this.revolveButton = page.getByTestId('revolve')
     this.offsetPlaneButton = page.getByTestId('plane-offset')
     this.startSketchBtn = page.getByTestId('sketch')
     this.lineBtn = page.getByTestId('line')

e2e/playwright/point-click.spec.ts

@@ -1078,7 +1078,7 @@ sketch002 = startSketchOn('XZ')
     await page.waitForTimeout(500)
     await cmdBar.progressCmdBar()
     await expect(
-      page.getByText('Unable to sweep with the provided selection')
+      page.getByText('Unable to sweep with the current selection. Reason:')
     ).toBeVisible()
   })
 })
@@ -1183,7 +1183,7 @@ extrude001 = extrude(-12, sketch001)
       currentArgKey: 'radius',
       currentArgValue: '5',
       headerArguments: {
-        Selection: '1 face',
+        Selection: '1 segment',
         Radius: '',
       },
       stage: 'arguments',
@@ -1192,7 +1192,7 @@ extrude001 = extrude(-12, sketch001)
     await cmdBar.expectState({
       commandName: 'Fillet',
       headerArguments: {
-        Selection: '1 face',
+        Selection: '1 segment',
         Radius: '5',
       },
       stage: 'review',
@@ -1296,6 +1296,167 @@ extrude001 = extrude(-12, sketch001)
       lowTolerance
     )
   })
+
+  // Test 3: Delete fillets
+  await test.step('Delete fillet via feature tree selection', async () => {
+    await test.step('Open Feature Tree Pane', async () => {
+      await toolbar.openPane('feature-tree')
+      await page.waitForTimeout(500)
+    })
+    await test.step('Delete fillet via feature tree selection', async () => {
+      await editor.expectEditor.toContain(secondFilletDeclaration)
+      const operationButton = await toolbar.getFeatureTreeOperation('Fillet', 1)
+      await operationButton.click({ button: 'left' })
+      await page.keyboard.press('Backspace')
+      await page.waitForTimeout(500)
+      await scene.expectPixelColor(edgeColorWhite, secondEdgeLocation, 15) // deleted
+      await editor.expectEditor.not.toContain(secondFilletDeclaration)
+      await scene.expectPixelColor(filletColor, firstEdgeLocation, 15) // stayed
+    })
+  })
+})
+
+test(`Fillet point-and-click delete`, async ({
+  context,
+  page,
+  homePage,
+  scene,
+  editor,
+  toolbar,
+}) => {
+  // Code samples
+  const initialCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-12, -6], %)
+  |> line([0, 12], %)
+  |> line([24, 0], %, $seg02)
+  |> line([0, -12], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %, $seg01)
+  |> close(%)
+extrude001 = extrude(-12, sketch001)
+  |> fillet({ radius = 5, tags = [seg01] }, %) // fillet01
+  |> fillet({ radius = 5, tags = [seg02] }, %) // fillet02
+fillet03 = fillet({  radius = 5,  tags = [getOppositeEdge(seg01)]}, extrude001)
+fillet04 = fillet({  radius = 5,  tags = [getOppositeEdge(seg02)]}, extrude001)
+`
+  const pipedFilletDeclaration = 'fillet({ radius = 5, tags = [seg01] }, %)'
+  const secondPipedFilletDeclaration =
+    'fillet({ radius = 5, tags = [seg02] }, %)'
+  const standaloneFilletDeclaration =
+    'fillet03 = fillet({  radius = 5,  tags = [getOppositeEdge(seg01)]}, extrude001)'
+  const secondStandaloneFilletDeclaration =
+    'fillet04 = fillet({  radius = 5,  tags = [getOppositeEdge(seg02)]}, extrude001)'
+
+  // Locators
+  const pipedFilletEdgeLocation = { x: 600, y: 193 }
+  const standaloneFilletEdgeLocation = { x: 600, y: 383 }
+  const bodyLocation = { x: 630, y: 290 }
+
+  // Colors
+  const edgeColorWhite: [number, number, number] = [248, 248, 248]
+  const bodyColor: [number, number, number] = [155, 155, 155]
+  const filletColor: [number, number, number] = [127, 127, 127]
+  const backgroundColor: [number, number, number] = [30, 30, 30]
+  const lowTolerance = 20
+  const highTolerance = 40
+
+  // Setup
+  await test.step(`Initial test setup`, async () => {
+    await context.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, initialCode)
+    await page.setBodyDimensions({ width: 1000, height: 500 })
+    await homePage.goToModelingScene()
+
+    // verify modeling scene is loaded
+    await scene.expectPixelColor(
+      backgroundColor,
+      standaloneFilletEdgeLocation,
+      lowTolerance
+    )
+
+    // wait for stream to load
+    await scene.expectPixelColor(bodyColor, bodyLocation, highTolerance)
+  })
+
+  // Test
+  await test.step('Delete fillet via feature tree selection', async () => {
+    await test.step('Open Feature Tree Pane', async () => {
+      await toolbar.openPane('feature-tree')
+      await page.waitForTimeout(500)
+    })
+
+    await test.step('Delete piped fillet via feature tree selection', async () => {
+      await test.step('Verify all fillets are present in the editor', async () => {
+        await editor.expectEditor.toContain(pipedFilletDeclaration)
+        await editor.expectEditor.toContain(secondPipedFilletDeclaration)
+        await editor.expectEditor.toContain(standaloneFilletDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneFilletDeclaration)
+      })
+      await test.step('Verify test fillets are present in the scene', async () => {
+        await scene.expectPixelColor(
+          filletColor,
+          pipedFilletEdgeLocation,
+          lowTolerance
+        )
+        await scene.expectPixelColor(
+          backgroundColor,
+          standaloneFilletEdgeLocation,
+          lowTolerance
+        )
+      })
+      await test.step('Delete piped fillet', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Fillet',
+          0
+        )
+        await operationButton.click({ button: 'left' })
+        await page.keyboard.press('Backspace')
+        await page.waitForTimeout(500)
+      })
+      await test.step('Verify piped fillet is deleted but other fillets are not (in the editor)', async () => {
+        await editor.expectEditor.not.toContain(pipedFilletDeclaration)
+        await editor.expectEditor.toContain(secondPipedFilletDeclaration)
+        await editor.expectEditor.toContain(standaloneFilletDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneFilletDeclaration)
+      })
+      await test.step('Verify piped fillet is deleted but non-piped is not (in the scene)', async () => {
+        await scene.expectPixelColor(
+          edgeColorWhite, // you see edge because fillet is deleted
+          pipedFilletEdgeLocation,
+          lowTolerance
+        )
+        await scene.expectPixelColor(
+          backgroundColor, // you see background because fillet is not deleted
+          standaloneFilletEdgeLocation,
+          lowTolerance
+        )
+      })
+    })
+
+    await test.step('Delete non-piped fillet via feature tree selection', async () => {
+      await test.step('Delete non-piped fillet', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Fillet',
+          1
+        )
+        await operationButton.click({ button: 'left' })
+        await page.keyboard.press('Backspace')
+        await page.waitForTimeout(500)
+      })
+      await test.step('Verify non-piped fillet is deleted but other two fillets are not (in the editor)', async () => {
+        await editor.expectEditor.toContain(secondPipedFilletDeclaration)
+        await editor.expectEditor.not.toContain(standaloneFilletDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneFilletDeclaration)
+      })
+      await test.step('Verify non-piped fillet is deleted but piped is not (in the scene)', async () => {
+        await scene.expectPixelColor(
+          edgeColorWhite,
+          standaloneFilletEdgeLocation,
+          lowTolerance
+        )
+      })
+    })
+  })
 })
 
 test(`Chamfer point-and-click`, async ({
@@ -1398,7 +1559,7 @@ extrude001 = extrude(-12, sketch001)
       currentArgKey: 'length',
       currentArgValue: '5',
       headerArguments: {
-        Selection: '1 face',
+        Selection: '1 segment',
         Length: '',
       },
       stage: 'arguments',
@@ -1407,7 +1568,7 @@ extrude001 = extrude(-12, sketch001)
     await cmdBar.expectState({
       commandName: 'Chamfer',
       headerArguments: {
-        Selection: '1 face',
+        Selection: '1 segment',
         Length: '5',
       },
       stage: 'review',
@@ -1511,6 +1672,163 @@ extrude001 = extrude(-12, sketch001)
       lowTolerance
     )
   })
+
+  // Test 3: Delete chamfer via feature tree selection
+  await test.step('Open Feature Tree Pane', async () => {
+    await toolbar.openPane('feature-tree')
+    await page.waitForTimeout(500)
+  })
+  await test.step('Delete chamfer via feature tree selection', async () => {
+    const operationButton = await toolbar.getFeatureTreeOperation('Chamfer', 1)
+    await operationButton.click({ button: 'left' })
+    await page.keyboard.press('Backspace')
+    await page.waitForTimeout(500)
+    await scene.expectPixelColor(edgeColorWhite, secondEdgeLocation, 15) // deleted
+    await scene.expectPixelColor(chamferColor, firstEdgeLocation, 15) // stayed
+  })
+})
+
+test(`Chamfer point-and-click delete`, async ({
+  context,
+  page,
+  homePage,
+  scene,
+  editor,
+  toolbar,
+}) => {
+  // Code samples
+  const initialCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-12, -6], %)
+  |> line([0, 12], %)
+  |> line([24, 0], %, $seg02)
+  |> line([0, -12], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %, $seg01)
+  |> close(%)
+extrude001 = extrude(-12, sketch001)
+  |> chamfer({ length = 5, tags = [seg01] }, %) // chamfer01
+  |> chamfer({ length = 5, tags = [seg02] }, %) // chamfer02
+chamfer03 = chamfer({  length = 5,  tags = [getOppositeEdge(seg01)]}, extrude001)
+chamfer04 = chamfer({  length = 5,  tags = [getOppositeEdge(seg02)]}, extrude001)
+`
+  const pipedChamferDeclaration = 'chamfer({ length = 5, tags = [seg01] }, %)'
+  const secondPipedChamferDeclaration =
+    'chamfer({ length = 5, tags = [seg02] }, %)'
+  const standaloneChamferDeclaration =
+    'chamfer03 = chamfer({  length = 5,  tags = [getOppositeEdge(seg01)]}, extrude001)'
+  const secondStandaloneChamferDeclaration =
+    'chamfer04 = chamfer({  length = 5,  tags = [getOppositeEdge(seg02)]}, extrude001)'
+
+  // Locators
+  const pipedChamferEdgeLocation = { x: 600, y: 193 }
+  const standaloneChamferEdgeLocation = { x: 600, y: 383 }
+  const bodyLocation = { x: 630, y: 290 }
+
+  // Colors
+  const edgeColorWhite: [number, number, number] = [248, 248, 248]
+  const bodyColor: [number, number, number] = [155, 155, 155]
+  const chamferColor: [number, number, number] = [168, 168, 168]
+  const backgroundColor: [number, number, number] = [30, 30, 30]
+  const lowTolerance = 20
+  const highTolerance = 40
+
+  // Setup
+  await test.step(`Initial test setup`, async () => {
+    await context.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, initialCode)
+    await page.setBodyDimensions({ width: 1000, height: 500 })
+    await homePage.goToModelingScene()
+
+    // verify modeling scene is loaded
+    await scene.expectPixelColor(
+      backgroundColor,
+      standaloneChamferEdgeLocation,
+      lowTolerance
+    )
+
+    // wait for stream to load
+    await scene.expectPixelColor(bodyColor, bodyLocation, highTolerance)
+  })
+
+  // Test
+  await test.step('Delete chamfer via feature tree selection', async () => {
+    await test.step('Open Feature Tree Pane', async () => {
+      await toolbar.openPane('feature-tree')
+      await page.waitForTimeout(500)
+    })
+
+    await test.step('Delete piped chamfer via feature tree selection', async () => {
+      await test.step('Verify all chamfers are present in the editor', async () => {
+        await editor.expectEditor.toContain(pipedChamferDeclaration)
+        await editor.expectEditor.toContain(secondPipedChamferDeclaration)
+        await editor.expectEditor.toContain(standaloneChamferDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneChamferDeclaration)
+      })
+      await test.step('Verify test chamfers are present in the scene', async () => {
+        await scene.expectPixelColor(
+          chamferColor,
+          pipedChamferEdgeLocation,
+          lowTolerance
+        )
+        await scene.expectPixelColor(
+          backgroundColor,
+          standaloneChamferEdgeLocation,
+          lowTolerance
+        )
+      })
+      await test.step('Delete piped chamfer', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Chamfer',
+          0
+        )
+        await operationButton.click({ button: 'left' })
+        await page.keyboard.press('Backspace')
+        await page.waitForTimeout(500)
+      })
+      await test.step('Verify piped chamfer is deleted but other chamfers are not (in the editor)', async () => {
+        await editor.expectEditor.not.toContain(pipedChamferDeclaration)
+        await editor.expectEditor.toContain(secondPipedChamferDeclaration)
+        await editor.expectEditor.toContain(standaloneChamferDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneChamferDeclaration)
+      })
+      await test.step('Verify piped chamfer is deleted but non-piped is not (in the scene)', async () => {
+        await scene.expectPixelColor(
+          edgeColorWhite, // you see edge color because chamfer is deleted
+          pipedChamferEdgeLocation,
+          lowTolerance
+        )
+        await scene.expectPixelColor(
+          backgroundColor, // you see background color instead of edge because it's chamfered
+          standaloneChamferEdgeLocation,
+          lowTolerance
+        )
+      })
+    })
+
+    await test.step('Delete non-piped chamfer via feature tree selection', async () => {
+      await test.step('Delete non-piped chamfer', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Chamfer',
+          1
+        )
+        await operationButton.click({ button: 'left' })
+        await page.keyboard.press('Backspace')
+        await page.waitForTimeout(500)
+      })
+      await test.step('Verify non-piped chamfer is deleted but other two chamfers are not (in the editor)', async () => {
+        await editor.expectEditor.toContain(secondPipedChamferDeclaration)
+        await editor.expectEditor.not.toContain(standaloneChamferDeclaration)
+        await editor.expectEditor.toContain(secondStandaloneChamferDeclaration)
+      })
+      await test.step('Verify non-piped chamfer is deleted but piped is not (in the scene)', async () => {
+        await scene.expectPixelColor(
+          edgeColorWhite,
+          standaloneChamferEdgeLocation,
+          lowTolerance
+        )
+      })
+    })
+  })
 })
 
 const shellPointAndClickCapCases = [
@@ -1846,8 +2164,176 @@ sweep001 = sweep({ path = sketch002 }, sketch001)
     await page.waitForTimeout(500)
     await cmdBar.progressCmdBar()
     await expect(
-      page.getByText('Unable to shell with the provided selection')
+      page.getByText('Unable to shell with the current selection. Reason:')
     ).toBeVisible()
     await page.waitForTimeout(1000)
   })
 })
+
+test.describe('Revolve point and click workflows', () => {
+  test('Base case workflow, auto spam continue in command bar', async ({
+    context,
+    page,
+    homePage,
+    scene,
+    editor,
+    toolbar,
+    cmdBar,
+  }) => {
+    const initialCode = `
+sketch001 = startSketchOn('XZ')
+|> startProfileAt([-100.0, 100.0], %)
+|> angledLine([0, 200.0], %, $rectangleSegmentA001)
+|> angledLine([segAng(rectangleSegmentA001) - 90, 200], %, $rectangleSegmentB001)
+|> angledLine([
+segAng(rectangleSegmentA001),
+-segLen(rectangleSegmentA001)
+], %, $rectangleSegmentC001)
+|> lineTo([profileStartX(%), profileStartY(%)], %)
+|> close(%)
+extrude001 = extrude(200, sketch001)
+sketch002 = startSketchOn(extrude001, rectangleSegmentA001)
+|> startProfileAt([-66.77, 84.81], %)
+|> angledLine([180, 27.08], %, $rectangleSegmentA002)
+|> angledLine([
+segAng(rectangleSegmentA002) - 90,
+27.8
+], %, $rectangleSegmentB002)
+|> angledLine([
+segAng(rectangleSegmentA002),
+-segLen(rectangleSegmentA002)
+], %, $rectangleSegmentC002)
+|> lineTo([profileStartX(%), profileStartY(%)], %)
+|> close(%)
+`
+
+    await context.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, initialCode)
+    await page.setBodyDimensions({ width: 1000, height: 500 })
+    await homePage.goToModelingScene()
+    await scene.waitForExecutionDone()
+
+    // select line of code
+    const codeToSelecton = `segAng(rectangleSegmentA002) - 90,`
+    // revolve
+    await page.getByText(codeToSelecton).click()
+    await toolbar.revolveButton.click()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+
+    const newCodeToFind = `revolve001 = revolve({ angle = 360, axis = 'X' }, sketch002)`
+    expect(editor.expectEditor.toContain(newCodeToFind)).toBeTruthy()
+  })
+  test('revolve surface around edge from an extruded solid2d', async ({
+    context,
+    page,
+    homePage,
+    scene,
+    editor,
+    toolbar,
+    cmdBar,
+  }) => {
+    const initialCode = `
+sketch001 = startSketchOn('XZ')
+|> startProfileAt([-102.57, 101.72], %)
+|> angledLine([0, 202.6], %, $rectangleSegmentA001)
+|> angledLine([
+segAng(rectangleSegmentA001) - 90,
+202.6
+], %, $rectangleSegmentB001)
+|> angledLine([
+segAng(rectangleSegmentA001),
+-segLen(rectangleSegmentA001)
+], %, $rectangleSegmentC001)
+|> lineTo([profileStartX(%), profileStartY(%)], %)
+|> close(%)
+extrude001 = extrude(50, sketch001)
+sketch002 = startSketchOn(extrude001, rectangleSegmentA001)
+|> circle({
+center = [-11.34, 10.0],
+radius = 8.69
+}, %)
+`
+    await context.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, initialCode)
+    await page.setBodyDimensions({ width: 1000, height: 500 })
+    await homePage.goToModelingScene()
+    await scene.waitForExecutionDone()
+
+    // select line of code
+    const codeToSelecton = `center = [-11.34, 10.0]`
+    // revolve
+    await page.getByText(codeToSelecton).click()
+    await toolbar.revolveButton.click()
+    await page.getByText('Edge', { exact: true }).click()
+    const lineCodeToSelection = `|> angledLine([0, 202.6], %, $rectangleSegmentA001)`
+    await page.getByText(lineCodeToSelection).click()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+
+    const newCodeToFind = `revolve001 = revolve({angle = 360, axis = getOppositeEdge(rectangleSegmentA001)}, sketch002) `
+    expect(editor.expectEditor.toContain(newCodeToFind)).toBeTruthy()
+  })
+  test('revolve sketch circle around line segment from startProfileAt sketch', async ({
+    context,
+    page,
+    homePage,
+    scene,
+    editor,
+    toolbar,
+    cmdBar,
+  }) => {
+    const initialCode = `
+    sketch002 = startSketchOn('XY')
+      |> startProfileAt([-2.02, 1.79], %)
+      |> xLine(2.6, %)
+    sketch001 = startSketchOn('-XY')
+      |> startProfileAt([-0.48, 1.25], %)
+      |> angledLine([0, 2.38], %, $rectangleSegmentA001)
+      |> angledLine([segAng(rectangleSegmentA001) - 90, 2.4], %, $rectangleSegmentB001)
+      |> angledLine([
+        segAng(rectangleSegmentA001),
+          -segLen(rectangleSegmentA001)
+      ], %, $rectangleSegmentC001)
+      |> lineTo([profileStartX(%), profileStartY(%)], %)
+      |> close(%)
+    extrude001 = extrude(5, sketch001)
+    sketch003 = startSketchOn(extrude001, 'START')
+      |> circle({
+        center = [-0.69, 0.56],
+        radius = 0.28
+      }, %)
+`
+
+    await context.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, initialCode)
+    await page.setBodyDimensions({ width: 1000, height: 500 })
+    await homePage.goToModelingScene()
+    await scene.waitForExecutionDone()
+
+    // select line of code
+    const codeToSelecton = `center = [-0.69, 0.56]`
+    // revolve
+    await page.getByText(codeToSelecton).click()
+    await toolbar.revolveButton.click()
+    await page.getByText('Edge', { exact: true }).click()
+    const lineCodeToSelection = `|> xLine(2.6, %)`
+    await page.getByText(lineCodeToSelection).click()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+    await cmdBar.progressCmdBar()
+
+    const newCodeToFind = `revolve001 = revolve({ angle = 360, axis = seg01 }, sketch003)`
+    expect(editor.expectEditor.toContain(newCodeToFind)).toBeTruthy()
+  })
+})

e2e/playwright/projects.spec.ts

@@ -572,7 +572,7 @@ test(
       fs.utimesSync(`${dir}/lego/main.kcl`, _1995, _1995)
     })
 
-    await page.setBodyDimensions({ width: 1200, height: 500 })
+    await page.setBodyDimensions({ width: 1200, height: 600 })
 
     page.on('console', console.log)
 
@@ -1525,7 +1525,7 @@ extrude001 = extrude(200, sketch001)`)
 test(
   'Opening a project should successfully load the stream, (regression test that this also works when switching between projects)',
   { tag: '@electron' },
-  async ({ context, page }, testInfo) => {
+  async ({ context, page, cmdBar, homePage }, testInfo) => {
     await context.folderSetupFn(async (dir) => {
       await Promise.all([
         fsp.mkdir(path.join(dir, 'router-template-slate'), { recursive: true }),
@@ -1563,11 +1563,38 @@ test(
 
     const pointOnModel = { x: 630, y: 280 }
 
-    await test.step('Opening the bracket project should load the stream', async () => {
-      // expect to see the text bracket
-      await expect(page.getByText('bracket')).toBeVisible()
+    await test.step('Opening the bracket project via command palette should load the stream', async () => {
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: 'bracket',
+            fileCount: 1,
+          },
+          {
+            title: 'router-template-slate',
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
 
-      await page.getByText('bracket').click()
+      await cmdBar.openCmdBar()
+      await cmdBar.chooseCommand('open project')
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Open project',
+        currentArgKey: 'name',
+        currentArgValue: '',
+        headerArguments: {
+          Name: '',
+        },
+        highlightedHeaderArg: 'name',
+      })
+      await cmdBar.argumentInput.fill('brac')
+      await cmdBar.progressCmdBar()
+      await cmdBar.expectState({
+        stage: 'commandBarClosed',
+      })
 
       await u.waitForPageLoad()
 
@@ -1588,7 +1615,7 @@ test(
       await expect(page.getByText('Create project')).toBeVisible()
     })
 
-    await test.step('Opening the router-template project should load the stream', async () => {
+    await test.step('Opening the router-template project via link should load the stream', async () => {
       // expect to see the text bracket
       await expect(page.getByText('router-template-slate')).toBeVisible()
 
@@ -1605,16 +1632,26 @@ test(
         .toBeLessThan(15)
     })
 
-    await test.step('Opening the router-template project should load the stream', async () => {
+    await test.step('The projects on the home page should still be normal', async () => {
       await page.getByTestId('project-sidebar-toggle').click()
       await expect(
         page.getByRole('button', { name: 'Go to Home' })
       ).toBeVisible()
       await page.getByRole('button', { name: 'Go to Home' }).click()
 
-      await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
-      await expect(page.getByText('router-template-slate')).toBeVisible()
-      await expect(page.getByText('Create project')).toBeVisible()
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: 'bracket',
+            fileCount: 1,
+          },
+          {
+            title: 'router-template-slate',
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
     })
   }
 )

e2e/playwright/sketch-tests.spec.ts

@@ -34,7 +34,7 @@ test.describe('Sketch tests', () => {
     screwRadius = 3
     wireRadius = 2
     wireOffset = 0.5
-  
+
     screwHole = startSketchOn('XY')
   ${startProfileAt1}
   |> arc({
@@ -42,7 +42,7 @@ test.describe('Sketch tests', () => {
         angleStart = 0,
         angleEnd = 360
       }, %)
-  
+
     part001 = startSketchOn('XY')
   ${startProfileAt2}
   |> xLine(width * .5, %)
@@ -51,7 +51,7 @@ test.describe('Sketch tests', () => {
   |> close(%)
   |> hole(screwHole, %)
   |> extrude(thickness, %)
-  
+
     part002 = startSketchOn('-XZ')
   ${startProfileAt3}
   |> xLine(width / 4, %)
@@ -99,6 +99,7 @@ test.describe('Sketch tests', () => {
   test('Can delete most of a sketch and the line tool will still work', async ({
     page,
     homePage,
+    scene,
   }) => {
     const u = await getUtils(page)
     await page.addInitScript(async () => {
@@ -112,12 +113,13 @@ test.describe('Sketch tests', () => {
     })
 
     await homePage.goToModelingScene()
+    await scene.waitForExecutionDone()
 
     await expect(async () => {
       await page.getByText('tangentialArcTo([24.95, -5.38], %)').click()
       await expect(
         page.getByRole('button', { name: 'Edit Sketch' })
-      ).toBeEnabled({ timeout: 1000 })
+      ).toBeEnabled({ timeout: 2000 })
       await page.getByRole('button', { name: 'Edit Sketch' }).click()
     }).toPass({ timeout: 40_000, intervals: [1_000] })
 
@@ -884,7 +886,7 @@ test.describe('Sketch tests', () => {
     // sketch selection should already have been made. "Selection: 1 face" only show up when the selection has been made already
     // otherwise the cmdbar would be waiting for a selection.
     await expect(
-      page.getByRole('button', { name: 'selection : 1 face', exact: false })
+      page.getByRole('button', { name: 'selection : 1 segment', exact: false })
     ).toBeVisible({
       timeout: 10_000,
     })
@@ -1063,7 +1065,7 @@ test.describe('Sketch tests', () => {
         `lugHeadLength = 0.25
       lugDiameter = 0.5
       lugLength = 2
-  
+
       fn lug = (origin, length, diameter, plane) => {
         lugSketch = startSketchOn(plane)
           |> startProfileAt([origin[0] + lugDiameter / 2, origin[1]], %)
@@ -1072,10 +1074,10 @@ test.describe('Sketch tests', () => {
           |> yLineTo(0, %)
           |> close(%)
           |> revolve({ axis = "Y" }, %)
-  
+
         return lugSketch
       }
-  
+
       lug([0, 0], 10, .5, "XY")`
       )
     })
@@ -1127,14 +1129,14 @@ test.describe('Sketch tests', () => {
         `fn in2mm = (inches) => {
     return inches * 25.4
   }
-  
+
   const railTop = in2mm(.748)
   const railSide = in2mm(.024)
   const railBaseWidth = in2mm(.612)
   const railWideWidth = in2mm(.835)
   const railBaseLength = in2mm(.200)
   const railClampable = in2mm(.200)
-  
+
   const rail = startSketchOn('XZ')
     |> startProfileAt([
      -railTop / 2,
@@ -1405,3 +1407,46 @@ test.describe(`Click based selection don't brick the app when clicked out of ran
     })
   })
 })
+
+// Regression test for https://github.com/KittyCAD/modeling-app/issues/4372
+test.describe('Redirecting to home page and back to the original file should clear sketch DOM elements', () => {
+  test('Can redirect to home page and back to original file and have a cleared DOM', async ({
+    context,
+    page,
+    scene,
+    toolbar,
+    editor,
+    homePage,
+  }) => {
+    // We seed the scene with a single offset plane
+    await context.addInitScript(() => {
+      localStorage.setItem(
+        'persistCode',
+        ` sketch001 = startSketchOn('XZ')
+|> startProfileAt([256.85, 14.41], %)
+|> lineTo([0, 211.07], %)
+`
+      )
+    })
+    await homePage.goToModelingScene()
+    await scene.waitForExecutionDone()
+
+    const [objClick] = scene.makeMouseHelpers(634, 274)
+    await objClick()
+
+    // Enter sketch mode
+    await toolbar.editSketch()
+
+    await expect(page.getByText('323.49')).toBeVisible()
+
+    // Open navigation side bar
+    await page.getByTestId('project-sidebar-toggle').click()
+    const goToHome = page.getByRole('button', {
+      name: 'Go to Home',
+    })
+
+    await goToHome.click()
+    await homePage.openProject('testDefault')
+    await expect(page.getByText('323.49')).not.toBeVisible()
+  })
+})

e2e/playwright/testing-samples-loading.spec.ts

@@ -69,7 +69,6 @@ test.describe('Testing in-app sample loading', () => {
       await confirmButton.click()
 
       await editor.expectEditor.toContain('// ' + newSample.title)
-      await expect(unitsToast('in')).toBeVisible()
     })
   })
 
@@ -158,7 +157,6 @@ test.describe('Testing in-app sample loading', () => {
         await editor.expectEditor.toContain('// ' + sampleOne.title)
         await expect(newlyCreatedFile(sampleOne.file)).toBeVisible()
         await expect(projectMenuButton).toContainText(sampleOne.file)
-        await expect(unitsToast('in')).toBeVisible()
       })
 
       await test.step(`Now overwrite the current file`, async () => {
@@ -188,7 +186,6 @@ test.describe('Testing in-app sample loading', () => {
         await expect(newlyCreatedFile(sampleOne.file)).toBeVisible()
         await expect(newlyCreatedFile(sampleTwo.file)).not.toBeVisible()
         await expect(projectMenuButton).toContainText(sampleOne.file)
-        await expect(unitsToast('mm')).toBeVisible()
       })
     }
   )

electron-builder.yml

@@ -75,3 +75,6 @@ publish:
     channel: latest
 releaseInfo:
   releaseNotesFile: release-notes.md
+protocols:
+  - name: Zoo Studio
+    schemes: ['zoo-studio']

forge.config.ts

@@ -9,23 +9,8 @@ const rootDir = process.cwd()
 const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
-    osxSign: (process.env.BUILD_RELEASE === 'true' && {}) || undefined,
-    osxNotarize:
-      (process.env.BUILD_RELEASE === 'true' && {
-        appleId: process.env.APPLE_ID || '',
-        appleIdPassword: process.env.APPLE_PASSWORD || '',
-        teamId: process.env.APPLE_TEAM_ID || '',
-      }) ||
-      undefined,
     executableName: 'zoo-modeling-app',
     icon: path.resolve(rootDir, 'assets', 'icon'),
-    protocols: [
-      {
-        name: 'Zoo Studio',
-        schemes: ['zoo-studio'],
-      },
-    ],
-    extendInfo: 'Info.plist', // Information for file associations.
   },
   rebuildConfig: {},
   makers: [],

interface.d.ts

@@ -65,6 +65,7 @@ export interface IElectronAPI {
       VITE_KC_API_WS_MODELING_URL: string
       VITE_KC_API_BASE_URL: string
       VITE_KC_SITE_BASE_URL: string
+      VITE_KC_SITE_APP_URL: string
       VITE_KC_SKIP_AUTH: string
       VITE_KC_CONNECTION_TIMEOUT_MS: string
       VITE_KC_DEV_TOKEN: string

package.json

@@ -103,23 +103,23 @@
     "make:dev": "make dev",
     "generate:machine-api": "npx openapi-typescript ./openapi/machine-api.json -o src/lib/machine-api.d.ts",
     "tron:start": "electron-forge start",
-    "tron:package": "electron-forge package",
     "chrome:test": "PLATFORM=web NODE_ENV=development yarn playwright test --config=playwright.config.ts --project='Google Chrome' --grep-invert='@snapshot'",
-    "tron:test": "NODE_ENV=development yarn playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
-    "tronb:vite": "vite build -c vite.main.config.ts && vite build -c vite.preload.config.ts && vite build -c vite.renderer.config.ts",
-    "tronb:package": "electron-builder --config electron-builder.yml",
+    "tronb:vite:dev": "vite build -c vite.main.config.ts -m development && vite build -c vite.preload.config.ts -m development && vite build -c vite.renderer.config.ts -m development",
+    "tronb:vite:prod": "vite build -c vite.main.config.ts && vite build -c vite.preload.config.ts && vite build -c vite.renderer.config.ts",
+    "tronb:package:dev": "yarn tronb:vite:dev && electron-builder --config electron-builder.yml",
+    "tronb:package:prod": "yarn tronb:vite:prod && electron-builder --config electron-builder.yml --publish always",
     "test-setup": "yarn install && yarn build:wasm",
     "test": "vitest --mode development",
     "test:unit": "vitest run --mode development --exclude **/kclSamples.test.ts",
     "test:unit:kcl-samples": "vitest run --mode development ./src/lang/kclSamples.test.ts",
     "test:playwright:electron": "playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
-    "test:playwright:electron:windows": "playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\"",
-    "test:playwright:electron:macos": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot'",
-    "test:playwright:electron:ubuntu": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot'",
-    "test:playwright:electron:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
-    "test:playwright:electron:windows:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\"",
-    "test:playwright:electron:macos:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot'",
-    "test:playwright:electron:ubuntu:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot'",
+    "test:playwright:electron:windows": "playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\" --quiet",
+    "test:playwright:electron:macos": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot' --quiet",
+    "test:playwright:electron:ubuntu": "playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot' --quiet",
+    "test:playwright:electron:local": "yarn tronb:package:dev && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@snapshot'",
+    "test:playwright:electron:windows:local": "yarn tronb:package:dev && set NODE_ENV='development' && playwright test --config=playwright.electron.config.ts --grep-invert=\"@skipWin|@snapshot\"",
+    "test:playwright:electron:macos:local": "yarn tronb:package:dev && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@skipMacos|@snapshot'",
+    "test:playwright:electron:ubuntu:local": "yarn tronb:package:dev && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep-invert='@skipLinux|@snapshot'",
     "test:unit:local": "yarn simpleserver:bg && yarn test:unit; kill-port 3000",
     "test:unit:kcl-samples:local": "yarn simpleserver:bg && yarn test:unit:kcl-samples; kill-port 3000"
   },
@@ -201,7 +201,7 @@
     "ts-node": "^10.0.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.19.1",
-    "vite": "^5.4.6",
+    "vite": "^5.4.12",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0",

packages/codemirror-lang-kcl/yarn.lock

@@ -683,9 +683,9 @@ vite-tsconfig-paths@^4.3.2:
     tsconfck "^3.0.3"
 
 vite@^5.0.0:
-  version "5.4.11"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
-  integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
+  version "5.4.14"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.14.tgz#ff8255edb02134df180dcfca1916c37a6abe8408"
+  integrity sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import { AppHeader } from './components/AppHeader'
@@ -22,13 +22,33 @@ import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
 import { CameraProjectionToggle } from 'components/CameraProjectionToggle'
+import { useCreateFileLinkQuery } from 'hooks/useCreateFileLinkQueryWatcher'
 import { maybeWriteToDisk } from 'lib/telemetry'
+import { takeScreenshotOfVideoStreamCanvas } from 'lib/screenshot'
+import { writeProjectThumbnailFile } from 'lib/desktop'
+import { useRouteLoaderData } from 'react-router-dom'
+import { useEngineCommands } from 'components/EngineCommands'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useToken } from 'machines/appMachine'
 maybeWriteToDisk()
   .then(() => {})
   .catch(() => {})
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
+
+  // Keep a lookout for a URL query string that invokes the 'import file from URL' command
+  useCreateFileLinkQuery((argDefaultValues) => {
+    commandBarActor.send({
+      type: 'Find and select command',
+      data: {
+        groupId: 'projects',
+        name: 'Import file from URL',
+        argDefaultValues,
+      },
+    })
+  })
+
   useRefreshSettings(PATHS.FILE + 'SETTINGS')
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
@@ -39,14 +59,20 @@ export function App() {
 
   const projectName = project?.name || null
   const projectPath = project?.path || null
+
+  const [commands] = useEngineCommands()
+  const [capturedCanvas, setCapturedCanvas] = useState(false)
+  const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const lastCommandType = commands[commands.length - 1]?.type
+
   useEffect(() => {
     onProjectOpen({ name: projectName, path: projectPath }, file || null)
   }, [projectName, projectPath])
 
   useHotKeyListener()
 
-  const { auth, settings } = useSettingsAuthContext()
-  const token = auth?.context?.token
+  const { settings } = useSettingsAuthContext()
+  const token = useToken()
 
   const coreDumpManager = useMemo(
     () => new CoreDumpManager(engineCommandManager, codeManager, token),
@@ -76,6 +102,28 @@ export function App() {
 
   useEngineConnectionSubscriptions()
 
+  // Generate thumbnail.png when loading the app
+  useEffect(() => {
+    if (!capturedCanvas && lastCommandType === 'execution-done') {
+      setTimeout(() => {
+        const projectDirectoryWithoutEndingSlash = loaderData?.project?.path
+        if (!projectDirectoryWithoutEndingSlash) {
+          return
+        }
+        const dataUrl: string = takeScreenshotOfVideoStreamCanvas()
+        // zoom to fit command does not wait, wait 500ms to see if zoom to fit finishes
+        writeProjectThumbnailFile(dataUrl, projectDirectoryWithoutEndingSlash)
+          .then(() => {})
+          .catch((e) => {
+            console.error(
+              `Failed to generate thumbnail for ${projectDirectoryWithoutEndingSlash}`
+            )
+            console.error(e)
+          })
+      }, 500)
+    }
+  }, [lastCommandType])
+
   return (
     <div className="relative h-full flex flex-col" ref={ref}>
       <AppHeader

src/Auth.tsx

@@ -1,10 +1,10 @@
+import { useAuthState } from 'machines/appMachine'
 import Loading from './components/Loading'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 
 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {
-  const { auth } = useSettingsAuthContext()
-  const isLoggingIn = auth?.state.matches('checkIfLoggedIn')
+  const authState = useAuthState()
+  const isLoggingIn = authState.matches('checkIfLoggedIn')
 
   return isLoggingIn ? (
     <Loading>

src/Router.tsx

@@ -31,14 +31,12 @@ import {
   settingsLoader,
   telemetryLoader,
 } from 'lib/routeLoaders'
-import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+import { ASK_TO_OPEN_QUERY_PARAM, BROWSER_PROJECT_NAME } from 'lib/constants'
 import { CoreDumpManager } from 'lib/coredump'
 import { codeManager, engineCommandManager } from 'lib/singletons'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import toast from 'react-hot-toast'
 import { coreDump } from 'lang/wasm'
@@ -47,6 +45,8 @@ import { AppStateProvider } from 'AppState'
 import { reportRejection } from 'lib/trap'
 import { RouteProvider } from 'components/RouteProvider'
 import { ProjectsContextProvider } from 'components/ProjectsContextProvider'
+import { OpenInDesktopAppHandler } from 'components/OpenInDesktopAppHandler'
+import { useToken } from 'machines/appMachine'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
 
@@ -58,7 +58,7 @@ const router = createRouter([
     /* Make sure auth is the outermost provider or else we will have
      * inefficient re-renders, use the react profiler to see. */
     element: (
-      <CommandBarProvider>
+      <OpenInDesktopAppHandler>
         <RouteProvider>
           <SettingsAuthProvider>
             <LspProvider>
@@ -74,17 +74,26 @@ const router = createRouter([
             </LspProvider>
           </SettingsAuthProvider>
         </RouteProvider>
-      </CommandBarProvider>
+      </OpenInDesktopAppHandler>
     ),
     errorElement: <ErrorPage />,
     children: [
       {
         path: PATHS.INDEX,
-        loader: async () => {
+        loader: async ({ request }) => {
           const onDesktop = isDesktop()
-          return onDesktop
-            ? redirect(PATHS.HOME)
-            : redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
+          const url = new URL(request.url)
+          if (onDesktop) {
+            return redirect(PATHS.HOME + (url.search || ''))
+          } else {
+            const searchParams = new URLSearchParams(url.search)
+            if (!searchParams.has(ASK_TO_OPEN_QUERY_PARAM)) {
+              return redirect(
+                PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME + (url.search || '')
+              )
+            }
+          }
+          return null
         },
       },
       {
@@ -194,8 +203,7 @@ export const Router = () => {
 }
 
 function CoreDump() {
-  const { auth } = useSettingsAuthContext()
-  const token = auth?.context?.token
+  const token = useToken()
   const coreDumpManager = useMemo(
     () => new CoreDumpManager(engineCommandManager, codeManager, token),
     []

src/Toolbar.tsx

@@ -2,7 +2,6 @@ import { useRef, useMemo, memo, useCallback, useState } from 'react'
 import { isCursorInSketchCommandRange } from 'lang/util'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ActionButton } from 'components/ActionButton'
@@ -22,13 +21,13 @@ import {
 } from 'lib/toolbar'
 import { isDesktop } from 'lib/isDesktop'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export function Toolbar({
   className = '',
   ...props
 }: React.HTMLAttributes<HTMLElement>) {
   const { state, send, context } = useModelingContext()
-  const { commandBarSend } = useCommandsContext()
   const iconClassName =
     'group-disabled:text-chalkboard-50 !text-inherit dark:group-enabled:group-hover:!text-inherit'
   const bgClassName = '!bg-transparent'
@@ -71,10 +70,9 @@ export function Toolbar({
     () => ({
       modelingState: state,
       modelingSend: send,
-      commandBarSend,
       sketchPathId,
     }),
-    [state, send, commandBarSend, sketchPathId]
+    [state, send, commandBarActor.send, sketchPathId]
   )
 
   const tooltipContentClassName = !showRichContent

src/clientSideScene/CameraControls.ts

@@ -29,6 +29,7 @@ import * as TWEEN from '@tweenjs/tween.js'
 import { isQuaternionVertical } from './helpers'
 import { reportRejection } from 'lib/trap'
 import { CameraProjectionType } from 'wasm-lib/kcl/bindings/CameraProjectionType'
+import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/models'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
@@ -406,7 +407,7 @@ export class CameraControls {
         .sub(this.mouseDownPosition)
       this.mouseDownPosition.copy(this.mouseNewPosition)
 
-      const interaction = this.getInteractionType(event)
+      let interaction = this.getInteractionType(event)
       if (interaction === 'none') return
 
       // If there's a valid interaction and the mouse is moving,
@@ -753,8 +754,6 @@ export class CameraControls {
       didChange = true
     }
 
-    this.safeLookAtTarget(this.camera.up)
-
     // Update the camera's matrices
     this.camera.updateMatrixWorld()
     if (didChange || forceUpdate) {
@@ -1189,14 +1188,24 @@ export class CameraControls {
     this.deferReactUpdate(this.reactCameraProperties)
     Object.values(this._camChangeCallbacks).forEach((cb) => cb())
   }
-  getInteractionType = (event: MouseEvent) =>
-    _getInteractionType(
+  getInteractionType = (
+    event: MouseEvent
+  ): CameraDragInteractionType_type | 'none' => {
+    const initialInteractionType = _getInteractionType(
       this.interactionGuards,
       event,
       this.enablePan,
       this.enableRotate,
       this.enableZoom
     )
+    if (
+      initialInteractionType === 'rotate' &&
+      this.engineCommandManager.settings.cameraOrbit === 'trackball'
+    ) {
+      return 'rotatetrackball'
+    }
+    return initialInteractionType
+  }
 }
 
 // Pure function helpers

src/clientSideScene/ClientSideSceneComp.tsx

@@ -46,8 +46,8 @@ import {
 } from 'lang/modifyAst'
 import { ActionButton } from 'components/ActionButton'
 import { err, reportRejection, trap } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -124,6 +124,14 @@ export const ClientSideScene = ({
         'mouseup',
         toSync(sceneInfra.onMouseUp, reportRejection)
       )
+      sceneEntitiesManager
+        .tearDownSketch()
+        .then(() => {
+          // no op
+        })
+        .catch((e) => {
+          console.error(e)
+        })
     }
   }, [])
 
@@ -510,7 +518,6 @@ const ConstraintSymbol = ({
   constrainInfo: ConstrainInfo
   verticalPosition: 'top' | 'bottom'
 }) => {
-  const { commandBarSend } = useCommandsContext()
   const { context } = useModelingContext()
   const varNameMap: {
     [key in ConstrainInfo['type']]: {
@@ -630,7 +637,7 @@ const ConstraintSymbol = ({
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?
         onClick={toSync(async () => {
           if (!isConstrained) {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: {
                 name: 'Constrain with named value',
@@ -756,7 +763,6 @@ export const CamDebugSettings = () => {
     sceneInfra.camControls.reactCameraProperties
   )
   const [fov, setFov] = useState(12)
-  const { commandBarSend } = useCommandsContext()
 
   useEffect(() => {
     sceneInfra.camControls.setReactCameraPropertiesCallback(setCamSettings)
@@ -775,7 +781,7 @@ export const CamDebugSettings = () => {
         type="checkbox"
         checked={camSettings.type === 'perspective'}
         onChange={() =>
-          commandBarSend({
+          commandBarActor.send({
             type: 'Find and select command',
             data: {
               groupId: 'settings',

src/clientSideScene/sceneEntities.ts

@@ -69,7 +69,8 @@ import {
   codeManager,
   editorManager,
 } from 'lib/singletons'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { executeAst, ToolTip } from 'lang/langHelpers'
 import {
   createProfileStartHandle,

src/clientSideScene/segments.ts

@@ -61,6 +61,7 @@ import { SegmentInputs } from 'lang/std/stdTypes'
 import { err } from 'lib/trap'
 import { editorManager, sceneInfra } from 'lib/singletons'
 import { Selections } from 'lib/selections'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 interface CreateSegmentArgs {
   input: SegmentInputs
@@ -847,7 +848,7 @@ function createLengthIndicator({
     })
 
     // Command Bar
-    editorManager.commandBarSend({
+    commandBarActor.send({
       type: 'Find and select command',
       data: {
         name: 'Constrain length',

src/components/AppHeader.tsx

@@ -2,11 +2,11 @@ import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from 'components/UserSidebarMenu'
 import { type IndexLoaderData } from 'lib/types'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { RefreshButton } from 'components/RefreshButton'
 import { CommandBarOpenButton } from './CommandBarOpenButton'
 import { isDesktop } from 'lib/isDesktop'
+import { useUser } from 'machines/appMachine'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -24,8 +24,7 @@ export const AppHeader = ({
   style,
   enableMenu = false,
 }: AppHeaderProps) => {
-  const { auth } = useSettingsAuthContext()
-  const user = auth?.context?.user
+  const user = useUser()
 
   return (
     <header

src/components/AstExplorer.tsx

@@ -1,6 +1,7 @@
 import { useModelingContext } from 'hooks/useModelingContext'
 import { editorManager, engineCommandManager, kclManager } from 'lib/singletons'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { useEffect, useRef, useState } from 'react'
 import { trap } from 'lib/trap'
 import { codeToIdSelections } from 'lib/selections'

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -1,8 +1,8 @@
 import { Combobox } from '@headlessui/react'
 import { useSelector } from '@xstate/react'
 import Fuse from 'fuse.js'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument, CommandArgumentOption } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { AnyStateMachine, StateFrom } from 'xstate'
 
@@ -23,7 +23,7 @@ function CommandArgOptionInput({
   placeholder?: string
 }) {
   const actorContext = useSelector(arg.machineActor, contextSelector)
-  const { commandBarSend, commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const resolvedOptions = useMemo(
     () =>
       typeof arg.options === 'function'
@@ -129,6 +129,7 @@ function CommandArgOptionInput({
           <label
             htmlFor="option-input"
             className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80"
+            data-testid="cmd-bar-arg-name"
           >
             {argName}
           </label>
@@ -142,7 +143,7 @@ function CommandArgOptionInput({
             className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
             onKeyDown={(event) => {
               if (event.metaKey && event.key === 'k')
-                commandBarSend({ type: 'Close' })
+                commandBarActor.send({ type: 'Close' })
               if (event.key === 'Backspace' && !event.currentTarget.value) {
                 stepBack()
               }

src/components/CommandBar/CommandBar.tsx

@@ -1,6 +1,5 @@
 import { Dialog, Popover, Transition } from '@headlessui/react'
 import { Fragment, useEffect } from 'react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import CommandBarArgument from './CommandBarArgument'
 import CommandComboBox from '../CommandComboBox'
 import CommandBarReview from './CommandBarReview'
@@ -8,12 +7,13 @@ import { useLocation } from 'react-router-dom'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import { CustomIcon } from 'components/CustomIcon'
 import Tooltip from 'components/Tooltip'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 export const COMMAND_PALETTE_HOTKEY = 'mod+k'
 
 export const CommandBar = () => {
   const { pathname } = useLocation()
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { selectedCommand, currentArgument, commands },
   } = commandBarState
@@ -23,16 +23,16 @@ export const CommandBar = () => {
   // Close the command bar when navigating
   useEffect(() => {
     if (commandBarState.matches('Closed')) return
-    commandBarSend({ type: 'Close' })
+    commandBarActor.send({ type: 'Close' })
   }, [pathname])
 
   // Hook up keyboard shortcuts
   useHotkeyWrapper([COMMAND_PALETTE_HOTKEY], () => {
     if (commandBarState.context.commands.length === 0) return
     if (commandBarState.matches('Closed')) {
-      commandBarSend({ type: 'Open' })
+      commandBarActor.send({ type: 'Open' })
     } else {
-      commandBarSend({ type: 'Close' })
+      commandBarActor.send({ type: 'Close' })
     }
   })
 
@@ -52,14 +52,14 @@ export const CommandBar = () => {
           ...entries[entries.length - 1][1],
         }
 
-        commandBarSend({
+        commandBarActor.send({
           type: 'Edit argument',
           data: {
             arg: currentArg,
           },
         })
       } else {
-        commandBarSend({ type: 'Deselect command' })
+        commandBarActor.send({ type: 'Deselect command' })
       }
     } else {
       const entries = Object.entries(selectedCommand?.args || {})
@@ -68,9 +68,9 @@ export const CommandBar = () => {
       )
 
       if (index === 0) {
-        commandBarSend({ type: 'Deselect command' })
+        commandBarActor.send({ type: 'Deselect command' })
       } else {
-        commandBarSend({
+        commandBarActor.send({
           type: 'Change current argument',
           data: {
             arg: { name: entries[index - 1][0], ...entries[index - 1][1] },
@@ -85,19 +85,20 @@ export const CommandBar = () => {
       show={!commandBarState.matches('Closed') || false}
       afterLeave={() => {
         if (selectedCommand?.onCancel) selectedCommand.onCancel()
-        commandBarSend({ type: 'Clear' })
+        commandBarActor.send({ type: 'Clear' })
       }}
       as={Fragment}
     >
       <WrapperComponent
         open={!commandBarState.matches('Closed') || isSelectionArgument}
         onClose={() => {
-          commandBarSend({ type: 'Close' })
+          commandBarActor.send({ type: 'Close' })
         }}
         className={
           'fixed inset-0 z-50 overflow-y-auto pb-4 pt-1 ' +
           (isSelectionArgument ? 'pointer-events-none' : '')
         }
+        data-testid="command-bar-wrapper"
       >
         <Transition.Child
           enter="duration-100 ease-out"
@@ -122,7 +123,7 @@ export const CommandBar = () => {
               )
             )}
             <button
-              onClick={() => commandBarSend({ type: 'Close' })}
+              onClick={() => commandBarActor.send({ type: 'Close' })}
               className="group block !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent"
             >
               <CustomIcon

src/components/CommandBar/CommandBarArgument.tsx

@@ -2,13 +2,13 @@ import CommandArgOptionInput from './CommandArgOptionInput'
 import CommandBarBasicInput from './CommandBarBasicInput'
 import CommandBarSelectionInput from './CommandBarSelectionInput'
 import { CommandArgument } from 'lib/commandTypes'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import CommandBarHeader from './CommandBarHeader'
 import CommandBarKclInput from './CommandBarKclInput'
 import CommandBarTextareaInput from './CommandBarTextareaInput'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { currentArgument },
   } = commandBarState
@@ -16,7 +16,7 @@ function CommandBarArgument({ stepBack }: { stepBack: () => void }) {
   function onSubmit(data: unknown) {
     if (!currentArgument) return
 
-    commandBarSend({
+    commandBarActor.send({
       type: 'Submit argument',
       data: {
         [currentArgument.name]: data,

src/components/CommandBar/CommandBarBasicInput.tsx

@@ -1,5 +1,5 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { useEffect, useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -15,8 +15,8 @@ function CommandBarBasicInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const commandBarState = useCommandBarState()
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {

src/components/CommandBar/CommandBarHeader.tsx

@@ -1,4 +1,3 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from '../CustomIcon'
 import React, { useState } from 'react'
 import { ActionButton } from '../ActionButton'
@@ -7,9 +6,10 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { KclCommandValue, KclExpressionWithVariable } from 'lib/commandTypes'
 import Tooltip from 'components/Tooltip'
 import { roundOff } from 'lib/utils'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { selectedCommand, currentArgument, argumentsToSubmit },
   } = commandBarState
@@ -49,7 +49,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
         ]
         const arg = selectedCommand?.args[argName]
         if (!argName || !arg) return
-        commandBarSend({
+        commandBarActor.send({
           type: 'Change current argument',
           data: { arg: { ...arg, name: argName } },
         })
@@ -100,7 +100,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     }
                     disabled={!isReviewing && currentArgument?.name === argName}
                     onClick={() => {
-                      commandBarSend({
+                      commandBarActor.send({
                         type: isReviewing
                           ? 'Edit argument'
                           : 'Change current argument',

src/components/CommandBar/CommandBarKclInput.tsx

@@ -7,7 +7,6 @@ import {
 } from '@codemirror/autocomplete'
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view'
 import { CustomIcon } from 'components/CustomIcon'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { CommandArgument, KclCommandValue } from 'lib/commandTypes'
 import { getSystemTheme } from 'lib/theme'
@@ -20,6 +19,7 @@ import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
 import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 import { useSelector } from '@xstate/react'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 
 const machineContextSelector = (snapshot?: {
   context: Record<string, unknown>
@@ -37,7 +37,7 @@ function CommandBarKclInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const previouslySetValue = commandBarState.context.argumentsToSubmit[
     arg.name
   ] as KclCommandValue | undefined
@@ -82,7 +82,7 @@ function CommandBarKclInput({
       false
   )
   const [canSubmit, setCanSubmit] = useState(true)
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const editorRef = useRef<HTMLDivElement>(null)
 
   const {

src/components/CommandBar/CommandBarProvider.tsx

@@ -1,43 +0,0 @@
-import { createActorContext } from '@xstate/react'
-import { editorManager } from 'lib/singletons'
-import { commandBarMachine } from 'machines/commandBarMachine'
-import { useEffect } from 'react'
-
-export const CommandsContext = createActorContext(
-  commandBarMachine.provide({
-    guards: {
-      'Command has no arguments': ({ context }) => {
-        return (
-          !context.selectedCommand?.args ||
-          Object.keys(context.selectedCommand?.args).length === 0
-        )
-      },
-      'All arguments are skippable': ({ context }) => {
-        return Object.values(context.selectedCommand!.args!).every(
-          (argConfig) => argConfig.skip
-        )
-      },
-    },
-  })
-)
-
-export const CommandBarProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  return (
-    <CommandsContext.Provider>
-      <CommandBarProviderInner>{children}</CommandBarProviderInner>
-    </CommandsContext.Provider>
-  )
-}
-function CommandBarProviderInner({ children }: { children: React.ReactNode }) {
-  const commandBarActor = CommandsContext.useActorRef()
-
-  useEffect(() => {
-    editorManager.setCommandBarSend(commandBarActor.send)
-  })
-
-  return children
-}

src/components/CommandBar/CommandBarReview.tsx

@@ -1,9 +1,9 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import CommandBarHeader from './CommandBarHeader'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 function CommandBarReview({ stepBack }: { stepBack: () => void }) {
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const {
     context: { argumentsToSubmit, selectedCommand },
   } = commandBarState
@@ -33,7 +33,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
           parseInt(b.keys[0], 10) - 1
         ]
         const arg = selectedCommand?.args[argName]
-        commandBarSend({
+        commandBarActor.send({
           type: 'Edit argument',
           data: { arg: { ...arg, name: argName } },
         })
@@ -50,7 +50,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
 
   function submitCommand(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
-    commandBarSend({
+    commandBarActor.send({
       type: 'Submit command',
       output: argumentsToSubmit,
     })

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -1,5 +1,4 @@
 import { useSelector } from '@xstate/react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Artifact } from 'lang/std/artifactGraph'
 import { CommandArgument } from 'lib/commandTypes'
 import {
@@ -10,6 +9,7 @@ import {
 import { kclManager } from 'lib/singletons'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { modelingMachine } from 'machines/modelingMachine'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { StateFrom } from 'xstate'
@@ -49,7 +49,7 @@ function CommandBarSelectionInput({
   onSubmit: (data: unknown) => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
-  const { commandBarState, commandBarSend } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const selection = useSelector(arg.machineActor, selectionSelector)
   const selectionsByType = useMemo(() => {
@@ -145,7 +145,7 @@ function CommandBarSelectionInput({
             if (event.key === 'Backspace') {
               stepBack()
             } else if (event.key === 'Escape') {
-              commandBarSend({ type: 'Close' })
+              commandBarActor.send({ type: 'Close' })
             }
           }}
           onChange={handleChange}

src/components/CommandBar/CommandBarTextareaInput.tsx

@@ -1,5 +1,5 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CommandArgument } from 'lib/commandTypes'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
 import { RefObject, useEffect, useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -15,8 +15,8 @@ function CommandBarTextareaInput({
   stepBack: () => void
   onSubmit: (event: unknown) => void
 }) {
-  const { commandBarSend, commandBarState } = useCommandsContext()
-  useHotkeys('mod + k, mod + /', () => commandBarSend({ type: 'Close' }))
+  const commandBarState = useCommandBarState()
+  useHotkeys('mod + k, mod + /', () => commandBarActor.send({ type: 'Close' }))
   const formRef = useRef<HTMLFormElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   useTextareaAutoGrow(inputRef)

src/components/CommandBarOpenButton.tsx

@@ -1,16 +1,15 @@
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import usePlatform from 'hooks/usePlatform'
 import { hotkeyDisplay } from 'lib/hotkeyWrapper'
 import { COMMAND_PALETTE_HOTKEY } from './CommandBar/CommandBar'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export function CommandBarOpenButton() {
-  const { commandBarSend } = useCommandsContext()
   const platform = usePlatform()
 
   return (
     <button
       className="group rounded-full flex items-center justify-center gap-2 px-2 py-1 bg-primary/10 dark:bg-chalkboard-90 dark:backdrop-blur-sm border-primary hover:border-primary dark:border-chalkboard-50 dark:hover:border-inherit text-primary dark:text-inherit"
-      onClick={() => commandBarSend({ type: 'Open' })}
+      onClick={() => commandBarActor.send({ type: 'Open' })}
       data-testid="command-bar-open-button"
     >
       <span>Commands</span>

src/components/CommandComboBox.tsx

@@ -1,11 +1,11 @@
 import { Combobox } from '@headlessui/react'
 import Fuse from 'fuse.js'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Command } from 'lib/commandTypes'
 import { useEffect, useState } from 'react'
 import { CustomIcon } from './CustomIcon'
 import { getActorNextEvents } from 'lib/utils'
 import { sortCommands } from 'lib/commandUtils'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 function CommandComboBox({
   options,
@@ -14,7 +14,6 @@ function CommandComboBox({
   options: Command[]
   placeholder?: string
 }) {
-  const { commandBarSend } = useCommandsContext()
   const [query, setQuery] = useState('')
   const [filteredOptions, setFilteredOptions] = useState<typeof options>()
 
@@ -41,7 +40,7 @@ function CommandComboBox({
   }, [query])
 
   function handleSelection(command: Command) {
-    commandBarSend({ type: 'Select command', data: { command } })
+    commandBarActor.send({ type: 'Select command', data: { command } })
   }
 
   return (
@@ -61,7 +60,7 @@ function CommandComboBox({
               (event.key === 'Backspace' && !event.currentTarget.value)
             ) {
               event.preventDefault()
-              commandBarSend({ type: 'Close' })
+              commandBarActor.send({ type: 'Close' })
             }
           }}
           placeholder={
@@ -76,34 +75,40 @@ function CommandComboBox({
           autoFocus
         />
       </div>
-      <Combobox.Options
-        static
-        className="overflow-y-auto max-h-96 cursor-pointer"
-      >
-        {filteredOptions?.map((option) => (
-          <Combobox.Option
-            key={option.groupId + option.name + (option.displayName || '')}
-            value={option}
-            className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
-            disabled={optionIsDisabled(option)}
-            data-testid={`cmd-bar-option`}
-          >
-            {'icon' in option && option.icon && (
-              <CustomIcon name={option.icon} className="w-5 h-5" />
-            )}
-            <div className="flex-grow flex flex-col">
-              <p className="my-0 leading-tight">
-                {option.displayName || option.name}{' '}
-              </p>
-              {option.description && (
-                <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
-                  {option.description}
-                </p>
+      {filteredOptions?.length ? (
+        <Combobox.Options
+          static
+          className="overflow-y-auto max-h-96 cursor-pointer"
+        >
+          {filteredOptions?.map((option) => (
+            <Combobox.Option
+              key={option.groupId + option.name + (option.displayName || '')}
+              value={option}
+              className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
+              disabled={optionIsDisabled(option)}
+              data-testid={`cmd-bar-option`}
+            >
+              {'icon' in option && option.icon && (
+                <CustomIcon name={option.icon} className="w-5 h-5" />
               )}
-            </div>
-          </Combobox.Option>
-        ))}
-      </Combobox.Options>
+              <div className="flex-grow flex flex-col">
+                <p className="my-0 leading-tight">
+                  {option.displayName || option.name}{' '}
+                </p>
+                {option.description && (
+                  <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
+                    {option.description}
+                  </p>
+                )}
+              </div>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      ) : (
+        <p className="px-4 pt-2 text-chalkboard-60 dark:text-chalkboard-50">
+          No results found
+        </p>
+      )}
     </Combobox>
   )
 }

src/components/FileMachineProvider.tsx

@@ -12,7 +12,6 @@ import {
   StateFrom,
   fromPromise,
 } from 'xstate'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { fileMachine } from 'machines/fileMachine'
 import { isDesktop } from 'lib/isDesktop'
 import {
@@ -30,6 +29,8 @@ import {
 } from 'lib/getKclSamplesManifest'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { markOnce } from 'lib/performance'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useToken } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -47,9 +48,10 @@ export const FileMachineProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { commandBarSend } = useCommandsContext()
   const { settings } = useSettingsAuthContext()
-  const { project, file } = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const token = useToken()
+  const projectData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const { project, file } = projectData
   const [kclSamples, setKclSamples] = React.useState<KclSamplesManifestItem[]>(
     []
   )
@@ -90,7 +92,7 @@ export const FileMachineProvider = ({
         navigateToFile: ({ context, event }) => {
           if (event.type !== 'xstate.done.actor.create-and-open-file') return
           if (event.output && 'name' in event.output) {
-            commandBarSend({ type: 'Close' })
+            commandBarActor.send({ type: 'Close' })
             navigate(
               `..${PATHS.FILE}/${encodeURIComponent(
                 context.selectedDirectory +
@@ -296,55 +298,65 @@ export const FileMachineProvider = ({
 
   const kclCommandMemo = useMemo(
     () =>
-      kclCommands(
-        async (data) => {
-          if (data.method === 'overwrite') {
-            codeManager.updateCodeStateEditor(data.code)
-            await kclManager.executeCode(true)
-            await codeManager.writeToFile()
-          } else if (data.method === 'newFile' && isDesktop()) {
-            send({
-              type: 'Create file',
-              data: {
-                name: data.sampleName,
-                content: data.code,
-                makeDir: false,
-              },
-            })
-          }
-
-          // Either way, we want to overwrite the defaultUnit project setting
-          // with the sample's setting.
-          if (data.sampleUnits) {
-            settings.send({
-              type: 'set.modeling.defaultUnit',
-              data: {
-                level: 'project',
-                value: data.sampleUnits,
-              },
-            })
-          }
+      kclCommands({
+        authToken: token ?? '',
+        projectData,
+        settings: {
+          defaultUnit: settings?.context?.modeling.defaultUnit.current ?? 'mm',
         },
-        kclSamples.map((sample) => ({
-          value: sample.pathFromProjectDirectoryToFirstFile,
-          name: sample.title,
-        }))
-      ).filter(
+        specialPropsForSampleCommand: {
+          onSubmit: async (data) => {
+            if (data.method === 'overwrite') {
+              codeManager.updateCodeStateEditor(data.code)
+              await kclManager.executeCode(true)
+              await codeManager.writeToFile()
+            } else if (data.method === 'newFile' && isDesktop()) {
+              send({
+                type: 'Create file',
+                data: {
+                  name: data.sampleName,
+                  content: data.code,
+                  makeDir: false,
+                },
+              })
+            }
+
+            // Either way, we want to overwrite the defaultUnit project setting
+            // with the sample's setting.
+            if (data.sampleUnits) {
+              settings.send({
+                type: 'set.modeling.defaultUnit',
+                data: {
+                  level: 'project',
+                  value: data.sampleUnits,
+                },
+              })
+            }
+          },
+          providedOptions: kclSamples.map((sample) => ({
+            value: sample.pathFromProjectDirectoryToFirstFile,
+            name: sample.title,
+          })),
+        },
+      }).filter(
         (command) => kclSamples.length || command.name !== 'open-kcl-example'
       ),
     [codeManager, kclManager, send, kclSamples]
   )
 
   useEffect(() => {
-    commandBarSend({ type: 'Add commands', data: { commands: kclCommandMemo } })
+    commandBarActor.send({
+      type: 'Add commands',
+      data: { commands: kclCommandMemo },
+    })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands: kclCommandMemo },
       })
     }
-  }, [commandBarSend, kclCommandMemo])
+  }, [commandBarActor.send, kclCommandMemo])
 
   return (
     <FileContext.Provider

src/components/LspProvider.tsx

@@ -27,6 +27,7 @@ import { PROJECT_ENTRYPOINT } from 'lib/constants'
 import { err } from 'lib/trap'
 import { isDesktop } from 'lib/isDesktop'
 import { codeManager } from 'lib/singletons'
+import { useToken } from 'machines/appMachine'
 
 function getWorkspaceFolders(): LSP.WorkspaceFolder[] {
   return []
@@ -69,8 +70,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   const [isKclLspReady, setIsKclLspReady] = useState(false)
   const [isCopilotLspReady, setIsCopilotLspReady] = useState(false)
 
-  const { auth } = useSettingsAuthContext()
-  const token = auth?.context.token
+  const token = useToken()
   const navigate = useNavigate()
 
   // So this is a bit weird, we need to initialize the lsp server and client.

src/components/MachineManagerProvider.tsx

@@ -1,11 +1,11 @@
 import { createContext, useEffect, useState } from 'react'
 
 import { engineCommandManager } from 'lib/singletons'
-import { CommandsContext } from 'components/CommandBar/CommandBarProvider'
 import { isDesktop } from 'lib/isDesktop'
 import { components } from 'lib/machine-api'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export type MachinesListing = Array<
   components['schemas']['MachineInfoResponse']
@@ -42,8 +42,6 @@ export const MachineManagerProvider = ({
     components['schemas']['MachineInfoResponse'] | null
   >(null)
 
-  const commandBarActor = CommandsContext.useActorRef()
-
   // Get the reason message for why there are no machines.
   const noMachinesReason = (): string | undefined => {
     if (machines.length > 0) {

src/components/ModelStateIndicator.tsx

@@ -1,10 +1,8 @@
 import { useEngineCommands } from './EngineCommands'
 import { Spinner } from './Spinner'
 import { CustomIcon } from './CustomIcon'
-
 export const ModelStateIndicator = () => {
   const [commands] = useEngineCommands()
-
   const lastCommandType = commands[commands.length - 1]?.type
 
   let className = 'w-6 h-6 '

src/components/ModelingMachineProvider.tsx

@@ -1,4 +1,4 @@
-import { useMachine } from '@xstate/react'
+import { useMachine, useSelector } from '@xstate/react'
 import React, {
   createContext,
   useEffect,
@@ -11,6 +11,7 @@ import {
   AnyStateMachine,
   ContextFrom,
   Prop,
+  SnapshotFrom,
   StateFrom,
   assign,
   fromPromise,
@@ -67,18 +68,14 @@ import {
   startSketchOnDefault,
 } from 'lang/modifyAst'
 import { PathToNode, Program, parse, recast, resultIsOk } from 'lang/wasm'
-import {
-  artifactIsPlaneWithPaths,
-  getNodePathFromSourceRange,
-  isSingleCursorInPipe,
-} from 'lang/queryAst'
+import { artifactIsPlaneWithPaths, isSingleCursorInPipe } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
 import toast from 'react-hot-toast'
 import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { err, reportRejection, trap } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import {
   ExportIntent,
   EngineConnectionStateType,
@@ -91,6 +88,8 @@ import { IndexLoaderData } from 'lib/types'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { promptToEditFlow } from 'lib/promptToEdit'
 import { kclEditorActor } from 'machines/kclEditorMachine'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useToken } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -102,13 +101,16 @@ export const ModelingMachineContext = createContext(
   {} as MachineContext<typeof modelingMachine>
 )
 
+const commandBarIsClosedSelector = (
+  state: SnapshotFrom<typeof commandBarActor>
+) => state.matches('Closed')
+
 export const ModelingMachineProvider = ({
   children,
 }: {
   children: React.ReactNode
 }) => {
   const {
-    auth,
     settings: {
       context: {
         app: { theme, enableSSAO, allowOrbitInSketchMode },
@@ -117,6 +119,7 @@ export const ModelingMachineProvider = ({
           cameraProjection,
           highlightEdges,
           showScaleGrid,
+          cameraOrbit,
         },
       },
     },
@@ -125,15 +128,17 @@ export const ModelingMachineProvider = ({
   const navigate = useNavigate()
   const { context, send: fileMachineSend } = useFileContext()
   const { file } = useLoaderData() as IndexLoaderData
-  const token = auth?.context?.token
+  const token = useToken()
   const streamRef = useRef<HTMLDivElement>(null)
   const persistedContext = useMemo(() => getPersistedContext(), [])
 
   let [searchParams] = useSearchParams()
   const pool = searchParams.get('pool')
 
-  const { commandBarState, commandBarSend } = useCommandsContext()
-
+  const isCommandBarClosed = useSelector(
+    commandBarActor,
+    commandBarIsClosedSelector
+  )
   // Settings machine setup
   // const retrievedSettings = useRef(
   // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
@@ -388,7 +393,16 @@ export const ModelingMachineProvider = ({
             }
 
             if (setSelections.selectionType === 'completeSelection') {
-              editorManager.selectRange(setSelections.selection)
+              const codeMirrorSelection = editorManager.createEditorSelection(
+                setSelections.selection
+              )
+              kclEditorActor.send({
+                type: 'setLastSelectionEvent',
+                data: {
+                  codeMirrorSelection,
+                  scrollIntoView: false,
+                },
+              })
               if (!sketchDetails)
                 return {
                   selectionRanges: setSelections.selection,
@@ -529,7 +543,6 @@ export const ModelingMachineProvider = ({
             trimmedPrompt,
             fileMachineSend,
             navigate,
-            commandBarSend,
             context,
             token,
             settings: {
@@ -543,7 +556,7 @@ export const ModelingMachineProvider = ({
         'has valid selection for deletion': ({
           context: { selectionRanges },
         }) => {
-          if (!commandBarState.matches('Closed')) return false
+          if (!isCommandBarClosed) return false
           if (selectionRanges.graphSelections.length <= 0) return false
           return true
         },
@@ -1142,6 +1155,7 @@ export const ModelingMachineProvider = ({
       enableSSAO: enableSSAO.current,
       showScaleGrid: showScaleGrid.current,
       cameraProjection: cameraProjection.current,
+      cameraOrbit: cameraOrbit.current,
     },
     token
   )
@@ -1171,6 +1185,13 @@ export const ModelingMachineProvider = ({
     editorManager.selectionRanges = modelingState.context.selectionRanges
   }, [modelingState.context.selectionRanges])
 
+  // When changing camera modes reset the camera to the default orientation to correct
+  // the up vector otherwise the conconical orientation for the camera modes will be
+  // wrong
+  useEffect(() => {
+    sceneInfra.camControls.resetCameraPosition().catch(reportRejection)
+  }, [cameraOrbit.current])
+
   useEffect(() => {
     const onConnectionStateChanged = ({ detail }: CustomEvent) => {
       // If we are in sketch mode we need to exit it.

src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx

@@ -9,12 +9,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { kclManager } from 'lib/singletons'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 import { reportRejection } from 'lib/trap'
-import { useCommandsContext } from 'hooks/useCommandsContext'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 export const KclEditorMenu = ({ children }: PropsWithChildren) => {
   const { enable: convertToVarEnabled, handleClick: handleConvertToVarClick } =
     useConvertToVariable()
-  const { commandBarSend } = useCommandsContext()
 
   return (
     <Menu>
@@ -85,7 +84,7 @@ export const KclEditorMenu = ({ children }: PropsWithChildren) => {
           <Menu.Item>
             <button
               onClick={() => {
-                commandBarSend({
+                commandBarActor.send({
                   type: 'Find and select command',
                   data: {
                     groupId: 'code',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -15,12 +15,12 @@ import { ModelingPane } from './ModelingPane'
 import { isDesktop } from 'lib/isDesktop'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { CustomIconName } from 'components/CustomIcon'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { useKclContext } from 'lang/KclProvider'
 import { MachineManagerContext } from 'components/MachineManagerProvider'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { SIDEBAR_BUTTON_SUFFIX } from 'lib/constants'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -37,7 +37,6 @@ function getPlatformString(): 'web' | 'desktop' {
 
 export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   const machineManager = useContext(MachineManagerContext)
-  const { commandBarSend } = useCommandsContext()
   const kclContext = useKclContext()
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
@@ -66,7 +65,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
       icon: 'floppyDiskArrow',
       keybinding: 'Ctrl + Shift + E',
       action: () =>
-        commandBarSend({
+        commandBarActor.send({
           type: 'Find and select command',
           data: { name: 'Export', groupId: 'modeling' },
         }),
@@ -79,7 +78,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
       keybinding: 'Ctrl + Shift + M',
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       action: async () => {
-        commandBarSend({
+        commandBarActor.send({
           type: 'Find and select command',
           data: { name: 'Make', groupId: 'modeling' },
         })
@@ -298,7 +297,7 @@ function ModelingPaneButton({
   })
 
   return (
-    <div id={paneConfig.id + '-button-holder'}>
+    <div id={paneConfig.id + '-button-holder'} className="relative">
       <button
         className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
         onClick={onClick}
@@ -340,7 +339,7 @@ function ModelingPaneButton({
         <p
           id={`${paneConfig.id}-badge`}
           className={
-            'absolute m-0 p-0 top-1 right-0 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
+            'absolute m-0 p-0 bottom-4 left-4 w-3 h-3 flex items-center justify-center text-[10px] font-semibold text-white bg-primary hue-rotate-90 rounded-full border border-chalkboard-10 dark:border-chalkboard-80 z-50 hover:cursor-pointer hover:scale-[2] transition-transform duration-200'
           }
           onClick={showBadge.onClick}
           title={`Click to view ${showBadge.value} notification${

src/components/NetworkHealthIndicator.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import {
   NETWORK_HEALTH_TEXT,
   NetworkHealthIndicator,
@@ -12,9 +11,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
   return (
     <BrowserRouter>
-      <CommandBarProvider>
-        <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-      </CommandBarProvider>
+      <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
     </BrowserRouter>
   )
 }

src/components/OpenInDesktopAppHandler.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { OpenInDesktopAppHandler } from './OpenInDesktopAppHandler'
+
+/**
+ * The behavior under test requires a router,
+ * so we wrap the component in a minimal router setup.
+ */
+function TestingMinimalRouterWrapper({
+  children,
+  location,
+}: {
+  location?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Routes location={location}>
+      <Route
+        path="/"
+        element={<OpenInDesktopAppHandler>{children}</OpenInDesktopAppHandler>}
+      />
+    </Routes>
+  )
+}
+
+describe('OpenInDesktopAppHandler tests', () => {
+  test(`does not render the modal if no query param is present`, () => {
+    render(
+      <BrowserRouter>
+        <TestingMinimalRouterWrapper>
+          <p>Dummy app contents</p>
+        </TestingMinimalRouterWrapper>
+      </BrowserRouter>
+    )
+
+    const dummyAppContents = screen.getByText('Dummy app contents')
+    const modalContents = screen.queryByText('Open in desktop app')
+
+    expect(dummyAppContents).toBeInTheDocument()
+    expect(modalContents).not.toBeInTheDocument()
+  })
+
+  test(`renders the modal if the query param is present`, () => {
+    render(
+      <BrowserRouter>
+        <TestingMinimalRouterWrapper location="/?ask-open-desktop">
+          <p>Dummy app contents</p>
+        </TestingMinimalRouterWrapper>
+      </BrowserRouter>
+    )
+
+    let dummyAppContents = screen.queryByText('Dummy app contents')
+    let modalButton = screen.queryByText('Continue to web app')
+
+    // Starts as disconnected
+    expect(dummyAppContents).not.toBeInTheDocument()
+    expect(modalButton).not.toBeFalsy()
+    expect(modalButton).toBeInTheDocument()
+    fireEvent.click(modalButton as Element)
+
+    // I don't like that you have to re-query the screen here
+    dummyAppContents = screen.queryByText('Dummy app contents')
+    modalButton = screen.queryByText('Continue to web app')
+
+    expect(dummyAppContents).toBeInTheDocument()
+    expect(modalButton).not.toBeInTheDocument()
+  })
+})

src/components/OpenInDesktopAppHandler.tsx

@@ -0,0 +1,125 @@
+import { getSystemTheme, Themes } from 'lib/theme'
+import { ZOO_STUDIO_PROTOCOL } from 'lib/constants'
+import { isDesktop } from 'lib/isDesktop'
+import { useSearchParams } from 'react-router-dom'
+import { ASK_TO_OPEN_QUERY_PARAM } from 'lib/constants'
+import { VITE_KC_SITE_BASE_URL } from 'env'
+import { ActionButton } from './ActionButton'
+import { Transition } from '@headlessui/react'
+
+/**
+ * This component is a handler that checks if a certain query parameter
+ * is present, and if so, it will show a modal asking the user if they
+ * want to open the current page in the desktop app.
+ */
+export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
+  const theme = getSystemTheme()
+  const buttonClasses =
+    'bg-transparent flex-0 hover:bg-primary/10 dark:hover:bg-primary/10'
+  const pathLogomarkSvg = `${isDesktop() ? '.' : ''}/zma-logomark${
+    theme === Themes.Light ? '-dark' : ''
+  }.svg`
+  const [searchParams, setSearchParams] = useSearchParams()
+  // We also ignore this param on desktop, as it is redundant
+  const hasAskToOpenParam =
+    !isDesktop() && searchParams.has(ASK_TO_OPEN_QUERY_PARAM)
+
+  /**
+   * This function removes the query param to ask to open in desktop app
+   * and then navigates to the same route but with our custom protocol
+   * `zoo-studio:` instead of `https://${BASE_URL}`, to trigger the user's
+   * desktop app to open.
+   */
+  function onOpenInDesktopApp() {
+    const newSearchParams = new URLSearchParams(globalThis.location.search)
+    newSearchParams.delete(ASK_TO_OPEN_QUERY_PARAM)
+    const newURL = `${ZOO_STUDIO_PROTOCOL}://${globalThis.location.pathname.replace(
+      '/',
+      ''
+    )}${searchParams.size > 0 ? `?${newSearchParams.toString()}` : ''}`
+    globalThis.location.href = newURL
+  }
+
+  /**
+   * Just remove the query param to ask to open in desktop app
+   * and continue to the web app.
+   */
+  function continueToWebApp() {
+    searchParams.delete(ASK_TO_OPEN_QUERY_PARAM)
+    setSearchParams(searchParams)
+  }
+
+  return hasAskToOpenParam ? (
+    <Transition
+      appear
+      show={true}
+      as="div"
+      className={
+        theme +
+        ` fixed inset-0 grid p-4 place-content-center ${
+          theme === Themes.Dark ? '!bg-chalkboard-110 text-chalkboard-20' : ''
+        }`
+      }
+    >
+      <Transition.Child
+        as="div"
+        className={`max-w-3xl py-6 px-10 flex flex-col items-center gap-8 
+          mx-auto border rounded-lg shadow-lg dark:bg-chalkboard-100`}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+        style={{ zIndex: 10 }}
+      >
+        <div>
+          <h1 className="text-2xl">
+            Launching{' '}
+            <img
+              src={pathLogomarkSvg}
+              className="w-48"
+              alt="Zoo Modeling App"
+            />
+          </h1>
+        </div>
+        <p className="text-primary flex items-center gap-2">
+          Choose where to open this link...
+        </p>
+        <div className="flex flex-col md:flex-row items-start justify-between gap-4 xl:gap-8">
+          <div className="flex flex-col gap-2">
+            <ActionButton
+              Element="button"
+              className={buttonClasses + ' !text-base'}
+              onClick={onOpenInDesktopApp}
+              iconEnd={{ icon: 'arrowRight' }}
+            >
+              Open in desktop app
+            </ActionButton>
+            <ActionButton
+              Element="externalLink"
+              className={
+                buttonClasses +
+                ' text-sm border-transparent justify-center dark:bg-transparent'
+              }
+              to={`${VITE_KC_SITE_BASE_URL}/modeling-app/download`}
+              iconEnd={{ icon: 'link', bgClassName: '!bg-transparent' }}
+            >
+              Download desktop app
+            </ActionButton>
+          </div>
+          <ActionButton
+            Element="button"
+            className={buttonClasses + ' -order-1 !text-base'}
+            onClick={continueToWebApp}
+            iconStart={{ icon: 'arrowLeft' }}
+          >
+            Continue to web app
+          </ActionButton>
+        </div>
+      </Transition.Child>
+    </Transition>
+  ) : (
+    props.children
+  )
+}

src/components/ProjectCard/ProjectCard.tsx

@@ -2,7 +2,7 @@ import { FormEvent, useEffect, useRef, useState } from 'react'
 import { PATHS } from 'lib/paths'
 import { Link } from 'react-router-dom'
 import { ActionButton } from '../ActionButton'
-import { FILE_EXT } from 'lib/constants'
+import { FILE_EXT, PROJECT_IMAGE_NAME } from 'lib/constants'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from '../Tooltip'
 import { DeleteConfirmationDialog } from './DeleteProjectDialog'
@@ -29,7 +29,7 @@ function ProjectCard({
   const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
   const [numberOfFiles, setNumberOfFiles] = useState(1)
   const [numberOfFolders, setNumberOfFolders] = useState(0)
-  // const [imageUrl, setImageUrl] = useState('')
+  const [imageUrl, setImageUrl] = useState('')
 
   let inputRef = useRef<HTMLInputElement>(null)
 
@@ -53,18 +53,21 @@ function ProjectCard({
       setNumberOfFolders(project.directory_count)
     }
 
-    // async function setupImageUrl() {
-    //   const projectImagePath = await join(project.file.path, PROJECT_IMAGE_NAME)
-    //   if (await exists(projectImagePath)) {
-    //     const imageData = await readFile(projectImagePath)
-    //     const blob = new Blob([imageData], { type: 'image/jpg' })
-    //     const imageUrl = URL.createObjectURL(blob)
-    //     setImageUrl(imageUrl)
-    //   }
-    // }
+    async function setupImageUrl() {
+      const projectImagePath = window.electron.path.join(
+        project.path,
+        PROJECT_IMAGE_NAME
+      )
+      if (await window.electron.exists(projectImagePath)) {
+        const imageData = await window.electron.readFile(projectImagePath)
+        const blob = new Blob([imageData], { type: 'image/png' })
+        const imageUrl = URL.createObjectURL(blob)
+        setImageUrl(imageUrl)
+      }
+    }
 
     void getNumberOfFiles()
-    // void setupImageUrl()
+    void setupImageUrl()
   }, [project.kcl_file_count, project.directory_count])
 
   useEffect(() => {
@@ -84,7 +87,7 @@ function ProjectCard({
         to={`${PATHS.FILE}/${encodeURIComponent(project.default_file)}`}
         className="flex flex-col flex-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10 group-hover:!hue-rotate-0 min-h-[5em] divide-y divide-primary/40 dark:divide-chalkboard-80 group-hover:!divide-primary"
       >
-        {/* <div className="h-36 relative overflow-hidden bg-gradient-to-b from-transparent to-primary/10 rounded-t-sm">
+        <div className="h-36 relative overflow-hidden bg-gradient-to-b from-transparent to-primary/10 rounded-t-sm">
           {imageUrl && (
             <img
               src={imageUrl}
@@ -92,7 +95,7 @@ function ProjectCard({
               className="h-full w-full transition-transform group-hover:scale-105 object-cover"
             />
           )}
-        </div> */}
+        </div>
         <div className="pb-2 flex flex-col flex-grow flex-auto gap-2 rounded-b-sm">
           {isEditing ? (
             <ProjectCardRenameForm

src/components/ProjectSidebarMenu.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import { Project } from 'lib/project'
 
 const now = new Date()
@@ -33,11 +32,9 @@ describe('ProjectSidebarMenu tests', () => {
   test('Disables popover menu by default', () => {
     render(
       <BrowserRouter>
-        <CommandBarProvider>
-          <SettingsAuthProviderJest>
-            <ProjectSidebarMenu project={projectWellFormed} />
-          </SettingsAuthProviderJest>
-        </CommandBarProvider>
+        <SettingsAuthProviderJest>
+          <ProjectSidebarMenu project={projectWellFormed} />
+        </SettingsAuthProviderJest>
       </BrowserRouter>
     )
 

src/components/ProjectSidebarMenu.tsx

@@ -7,14 +7,20 @@ import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useMemo, useContext } from 'react'
 import { Logo } from './Logo'
 import { APP_NAME } from 'lib/constants'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { CustomIcon } from './CustomIcon'
 import { useLspContext } from './LspProvider'
-import { engineCommandManager, kclManager } from 'lib/singletons'
+import { codeManager, engineCommandManager, kclManager } from 'lib/singletons'
 import { MachineManagerContext } from 'components/MachineManagerProvider'
 import usePlatform from 'hooks/usePlatform'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import Tooltip from './Tooltip'
+import { SnapshotFrom } from 'xstate'
+import { commandBarActor } from 'machines/commandBarMachine'
+import { useSelector } from '@xstate/react'
+import { copyFileShareLink } from 'lib/links'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { IS_NIGHTLY_OR_DEBUG } from 'routes/Settings'
+import { useToken } from 'machines/appMachine'
 
 const ProjectSidebarMenu = ({
   project,
@@ -84,6 +90,9 @@ function AppLogoLink({
   )
 }
 
+const commandsSelector = (state: SnapshotFrom<typeof commandBarActor>) =>
+  state.context.commands
+
 function ProjectMenuPopover({
   project,
   file,
@@ -95,17 +104,18 @@ function ProjectMenuPopover({
   const location = useLocation()
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
+  const { settings } = useSettingsAuthContext()
+  const token = useToken()
   const machineManager = useContext(MachineManagerContext)
+  const commands = useSelector(commandBarActor, commandsSelector)
 
-  const { commandBarState, commandBarSend } = useCommandsContext()
   const { onProjectClose } = useLspContext()
   const exportCommandInfo = { name: 'Export', groupId: 'modeling' }
   const makeCommandInfo = { name: 'Make', groupId: 'modeling' }
+  const shareCommandInfo = { name: 'share-file-link', groupId: 'code' }
   const findCommand = (obj: { name: string; groupId: string }) =>
     Boolean(
-      commandBarState.context.commands.find(
-        (c) => c.name === obj.name && c.groupId === obj.groupId
-      )
+      commands.find((c) => c.name === obj.name && c.groupId === obj.groupId)
     )
   const machineCount = machineManager.machines.length
 
@@ -150,12 +160,11 @@ function ProjectMenuPopover({
           ),
           disabled: !findCommand(exportCommandInfo),
           onClick: () =>
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: exportCommandInfo,
             }),
         },
-        'break',
         {
           id: 'make',
           Element: 'button',
@@ -175,12 +184,26 @@ function ProjectMenuPopover({
           ),
           disabled: !findCommand(makeCommandInfo) || machineCount === 0,
           onClick: () => {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: makeCommandInfo,
             })
           },
         },
+        {
+          id: 'share-link',
+          Element: 'button',
+          children: 'Share link to file',
+          disabled: IS_NIGHTLY_OR_DEBUG || !findCommand(shareCommandInfo),
+          onClick: async () => {
+            await copyFileShareLink({
+              token: token ?? '',
+              code: codeManager.code,
+              name: project?.name || '',
+              units: settings.context.modeling.defaultUnit.current,
+            })
+          },
+        },
         'break',
         {
           id: 'go-home',
@@ -200,7 +223,7 @@ function ProjectMenuPopover({
     [
       platform,
       findCommand,
-      commandBarSend,
+      commandBarActor.send,
       engineCommandManager,
       onProjectClose,
       isDesktop,

src/components/ProjectsContextProvider.tsx

@@ -1,13 +1,12 @@
 import { useMachine } from '@xstate/react'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { useProjectsLoader } from 'hooks/useProjectsLoader'
 import { projectsMachine } from 'machines/projectsMachine'
-import { createContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useEffect, useState } from 'react'
 import { Actor, AnyStateMachine, fromPromise, Prop, StateFrom } from 'xstate'
 import { useLspContext } from './LspProvider'
 import toast from 'react-hot-toast'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import {
   createNewProjectDirectory,
@@ -19,11 +18,28 @@ import {
   interpolateProjectNameWithIndex,
   doesProjectNameNeedInterpolated,
   getUniqueProjectName,
+  getNextFileName,
 } from 'lib/desktopFS'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import useStateMachineCommands from 'hooks/useStateMachineCommands'
 import { projectsCommandBarConfig } from 'lib/commandBarConfigs/projectsCommandConfig'
 import { isDesktop } from 'lib/isDesktop'
+import { commandBarActor } from 'machines/commandBarMachine'
+import {
+  CREATE_FILE_URL_PARAM,
+  FILE_EXT,
+  PROJECT_ENTRYPOINT,
+} from 'lib/constants'
+import { DeepPartial } from 'lib/types'
+import { Configuration } from 'wasm-lib/kcl/bindings/Configuration'
+import { codeManager } from 'lib/singletons'
+import {
+  loadAndValidateSettings,
+  projectConfigurationToSettingsPayload,
+  saveSettings,
+  setSettingsAtLevel,
+} from 'lib/settings/settingsUtils'
+import { Project } from 'lib/project'
 
 type MachineContext<T extends AnyStateMachine> = {
   state?: StateFrom<T>
@@ -53,12 +69,110 @@ export const ProjectsContextProvider = ({
   )
 }
 
+/**
+ * We need some of the functionality of the ProjectsContextProvider in the web version
+ * but we can't perform file system operations in the browser,
+ * so most of the behavior of this machine is stubbed out.
+ */
 const ProjectsContextWeb = ({ children }: { children: React.ReactNode }) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const clearImportSearchParams = useCallback(() => {
+    // Clear the search parameters related to the "Import file from URL" command
+    // or we'll never be able cancel or submit it.
+    searchParams.delete(CREATE_FILE_URL_PARAM)
+    searchParams.delete('code')
+    searchParams.delete('name')
+    searchParams.delete('units')
+    setSearchParams(searchParams)
+  }, [searchParams, setSearchParams])
+  const {
+    settings: { context: settings, send: settingsSend },
+  } = useSettingsAuthContext()
+
+  const [state, send, actor] = useMachine(
+    projectsMachine.provide({
+      actions: {
+        navigateToProject: () => {},
+        navigateToProjectIfNeeded: () => {},
+        navigateToFile: () => {},
+        toastSuccess: ({ event }) =>
+          toast.success(
+            ('data' in event && typeof event.data === 'string' && event.data) ||
+              ('output' in event &&
+                'message' in event.output &&
+                typeof event.output.message === 'string' &&
+                event.output.message) ||
+              ''
+          ),
+        toastError: ({ event }) =>
+          toast.error(
+            ('data' in event && typeof event.data === 'string' && event.data) ||
+              ('output' in event &&
+                typeof event.output === 'string' &&
+                event.output) ||
+              ''
+          ),
+      },
+      actors: {
+        readProjects: fromPromise(async () => [] as Project[]),
+        createProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+        })),
+        renameProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+          oldName: '',
+          newName: '',
+        })),
+        deleteProject: fromPromise(async () => ({
+          message: 'not implemented on web',
+          name: '',
+        })),
+        createFile: fromPromise(async ({ input }) => {
+          // Browser version doesn't navigate, just overwrites the current file
+          clearImportSearchParams()
+          codeManager.updateCodeStateEditor(input.code || '')
+          await codeManager.writeToFile()
+
+          settingsSend({
+            type: 'set.modeling.defaultUnit',
+            data: {
+              level: 'project',
+              value: input.units,
+            },
+          })
+
+          return {
+            message: 'File and units overwritten successfully',
+            fileName: input.name,
+            projectName: '',
+          }
+        }),
+      },
+    }),
+    {
+      input: {
+        projects: [],
+        defaultProjectName: settings.projects.defaultProjectName.current,
+        defaultDirectory: settings.app.projectDirectory.current,
+      },
+    }
+  )
+
+  // register all project-related command palette commands
+  useStateMachineCommands({
+    machineId: 'projects',
+    send,
+    state,
+    commandBarConfig: projectsCommandBarConfig,
+    actor,
+    onCancel: clearImportSearchParams,
+  })
+
   return (
     <ProjectsMachineContext.Provider
       value={{
-        state: undefined,
-        send: () => {},
+        state,
+        send,
       }}
     >
       {children}
@@ -73,19 +187,21 @@ const ProjectsContextDesktop = ({
 }) => {
   const navigate = useNavigate()
   const location = useLocation()
-  const { commandBarSend } = useCommandsContext()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const clearImportSearchParams = useCallback(() => {
+    // Clear the search parameters related to the "Import file from URL" command
+    // or we'll never be able cancel or submit it.
+    searchParams.delete(CREATE_FILE_URL_PARAM)
+    searchParams.delete('code')
+    searchParams.delete('name')
+    searchParams.delete('units')
+    setSearchParams(searchParams)
+  }, [searchParams, setSearchParams])
   const { onProjectOpen } = useLspContext()
   const {
     settings: { context: settings },
   } = useSettingsAuthContext()
 
-  useEffect(() => {
-    console.log(
-      'project directory changed',
-      settings.app.projectDirectory.current
-    )
-  }, [settings.app.projectDirectory.current])
-
   const [projectsLoaderTrigger, setProjectsLoaderTrigger] = useState(0)
   const { projectPaths, projectsDir } = useProjectsLoader([
     projectsLoaderTrigger,
@@ -126,7 +242,7 @@ const ProjectsContextDesktop = ({
               },
               null
             )
-            commandBarSend({ type: 'Close' })
+            commandBarActor.send({ type: 'Close' })
             const newPathName = `${PATHS.FILE}/${encodeURIComponent(
               projectPath
             )}`
@@ -169,6 +285,31 @@ const ProjectsContextDesktop = ({
             }
           }
         },
+        navigateToFile: ({ context, event }) => {
+          if (event.type !== 'xstate.done.actor.create-file') return
+          // For now, the browser version of create-file doesn't need to navigate
+          // since it just overwrites the current file.
+          if (!isDesktop()) return
+          let projectPath = window.electron.join(
+            context.defaultDirectory,
+            event.output.projectName
+          )
+          let filePath = window.electron.join(
+            projectPath,
+            event.output.fileName
+          )
+          onProjectOpen(
+            {
+              name: event.output.projectName,
+              path: projectPath,
+            },
+            null
+          )
+          const pathToNavigateTo = `${PATHS.FILE}/${encodeURIComponent(
+            filePath
+          )}`
+          navigate(pathToNavigateTo)
+        },
         toastSuccess: ({ event }) =>
           toast.success(
             ('data' in event && typeof event.data === 'string' && event.data) ||
@@ -218,8 +359,6 @@ const ProjectsContextDesktop = ({
             name = interpolateProjectNameWithIndex(name, nextIndex)
           }
 
-          console.log('from Project')
-
           await renameProjectDirectory(
             window.electron.path.join(defaultDirectory, oldName),
             name
@@ -242,13 +381,82 @@ const ProjectsContextDesktop = ({
             name: input.name,
           }
         }),
-      },
-      guards: {
-        'Has at least 1 project': ({ event }) => {
-          if (event.type !== 'xstate.done.actor.read-projects') return false
-          console.log(`from has at least 1 project: ${event.output.length}`)
-          return event.output.length ? event.output.length >= 1 : false
-        },
+        createFile: fromPromise(async ({ input }) => {
+          let projectName =
+            (input.method === 'newProject' ? input.name : input.projectName) ||
+            settings.projects.defaultProjectName.current
+          let fileName =
+            input.method === 'newProject'
+              ? PROJECT_ENTRYPOINT
+              : input.name.endsWith(FILE_EXT)
+              ? input.name
+              : input.name + FILE_EXT
+          let message = 'File created successfully'
+          const unitsConfiguration: DeepPartial<Configuration> = {
+            settings: {
+              project: {
+                directory: settings.app.projectDirectory.current,
+              },
+              modeling: {
+                base_unit: input.units,
+              },
+            },
+          }
+
+          const needsInterpolated = doesProjectNameNeedInterpolated(projectName)
+          if (needsInterpolated) {
+            const nextIndex = getNextProjectIndex(projectName, input.projects)
+            projectName = interpolateProjectNameWithIndex(
+              projectName,
+              nextIndex
+            )
+          }
+
+          // Create the project around the file if newProject
+          if (input.method === 'newProject') {
+            await createNewProjectDirectory(
+              projectName,
+              input.code,
+              unitsConfiguration
+            )
+            message = `Project "${projectName}" created successfully with link contents`
+          } else {
+            let projectPath = window.electron.join(
+              settings.app.projectDirectory.current,
+              projectName
+            )
+
+            message = `File "${fileName}" created successfully`
+            const existingConfiguration = await loadAndValidateSettings(
+              projectPath
+            )
+            const settingsToSave = setSettingsAtLevel(
+              existingConfiguration.settings,
+              'project',
+              projectConfigurationToSettingsPayload(unitsConfiguration)
+            )
+            await saveSettings(settingsToSave, projectPath)
+          }
+
+          // Create the file
+          let baseDir = window.electron.join(
+            settings.app.projectDirectory.current,
+            projectName
+          )
+          const { name, path } = getNextFileName({
+            entryName: fileName,
+            baseDir,
+          })
+
+          fileName = name
+          await window.electron.writeFile(path, input.code || '')
+
+          return {
+            message,
+            fileName,
+            projectName,
+          }
+        }),
       },
     }),
     {
@@ -271,6 +479,7 @@ const ProjectsContextDesktop = ({
     state,
     commandBarConfig: projectsCommandBarConfig,
     actor,
+    onCancel: clearImportSearchParams,
   })
 
   return (

src/components/RefreshButton.tsx

@@ -8,10 +8,10 @@ import Tooltip from './Tooltip'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
+import { useToken } from 'machines/appMachine'
 
 export const RefreshButton = ({ children }: React.PropsWithChildren) => {
-  const { auth } = useSettingsAuthContext()
-  const token = auth?.context?.token
+  const token = useToken()
   const coreDumpManager = useMemo(
     () => new CoreDumpManager(engineCommandManager, codeManager, token),
     []

src/components/RouteProvider.tsx

@@ -2,13 +2,16 @@ import { useEffect, useState, createContext, ReactNode } from 'react'
 import { useNavigation, useLocation } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { markOnce } from 'lib/performance'
+import { useAuthNavigation } from 'hooks/useAuthNavigation'
 
 export const RouteProviderContext = createContext({})
 
 export function RouteProvider({ children }: { children: ReactNode }) {
+  useAuthNavigation()
   const [first, setFirstState] = useState(true)
   const navigation = useNavigation()
   const location = useLocation()
+
   useEffect(() => {
     // On initialization, the react-router-dom does not send a 'loading' state event.
     // it sends an idle event first.

src/components/SettingsAuthProvider.tsx

@@ -2,10 +2,7 @@ import { trap } from 'lib/trap'
 import { useMachine, useSelector } from '@xstate/react'
 import { useNavigate, useRouteLoaderData, useLocation } from 'react-router-dom'
 import { PATHS, BROWSER_PATH } from 'lib/paths'
-import { authMachine, TOKEN_PERSIST_KEY } from '../machines/authMachine'
-import withBaseUrl from '../lib/withBaseURL'
 import React, { createContext, useEffect, useState } from 'react'
-import useStateMachineCommands from '../hooks/useStateMachineCommands'
 import { settingsMachine } from 'machines/settingsMachine'
 import { toast } from 'react-hot-toast'
 import {
@@ -16,7 +13,6 @@ import {
 } from 'lib/theme'
 import decamelize from 'decamelize'
 import { Actor, AnyStateMachine, ContextFrom, Prop, StateFrom } from 'xstate'
-import { authCommandBarConfig } from 'lib/commandBarConfigs/authCommandConfig'
 import {
   kclManager,
   sceneInfra,
@@ -29,7 +25,6 @@ import {
   createSettingsCommand,
   settingsWithCommandConfigs,
 } from 'lib/commandBarConfigs/settingsCommandConfig'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Command } from 'lib/commandTypes'
 import { BaseUnit } from 'lib/settings/settingsTypes'
 import {
@@ -42,6 +37,7 @@ import { isDesktop } from 'lib/isDesktop'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { codeManager } from 'lib/singletons'
 import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -50,7 +46,6 @@ type MachineContext<T extends AnyStateMachine> = {
 }
 
 type SettingsAuthContextType = {
-  auth: MachineContext<typeof authMachine>
   settings: MachineContext<typeof settingsMachine>
 }
 
@@ -109,7 +104,6 @@ export const SettingsAuthProviderBase = ({
 }) => {
   const location = useLocation()
   const navigate = useNavigate()
-  const { commandBarSend } = useCommandsContext()
   const [settingsPath, setSettingsPath] = useState<string | undefined>(
     undefined
   )
@@ -278,10 +272,10 @@ export const SettingsAuthProviderBase = ({
       )
       .filter((c) => c !== null) as Command[]
 
-    commandBarSend({ type: 'Add commands', data: { commands: commands } })
+    commandBarActor.send({ type: 'Add commands', data: { commands: commands } })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands },
       })
@@ -290,7 +284,7 @@ export const SettingsAuthProviderBase = ({
     settingsState,
     settingsSend,
     settingsActor,
-    commandBarSend,
+    commandBarActor.send,
     settingsWithCommandConfigs,
   ])
 
@@ -303,7 +297,7 @@ export const SettingsAuthProviderBase = ({
       encodeURIComponent(loadedProject?.file?.path || BROWSER_PATH)
     const { RouteTelemetryCommand, RouteHomeCommand, RouteSettingsCommand } =
       createRouteCommands(navigate, location, filePath)
-    commandBarSend({
+    commandBarActor.send({
       type: 'Remove commands',
       data: {
         commands: [
@@ -314,12 +308,12 @@ export const SettingsAuthProviderBase = ({
       },
     })
     if (location.pathname === PATHS.HOME) {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Add commands',
         data: { commands: [RouteTelemetryCommand, RouteSettingsCommand] },
       })
     } else if (location.pathname.includes(PATHS.FILE)) {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Add commands',
         data: {
           commands: [
@@ -371,40 +365,9 @@ export const SettingsAuthProviderBase = ({
     )
   }, [settingsState.context.textEditor.blinkingCursor.current])
 
-  // Auth machine setup
-  const [authState, authSend, authActor] = useMachine(
-    authMachine.provide({
-      actions: {
-        goToSignInPage: () => {
-          navigate(PATHS.SIGN_IN)
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          logout()
-        },
-        goToIndexPage: () => {
-          if (location.pathname.includes(PATHS.SIGN_IN)) {
-            navigate(PATHS.INDEX)
-          }
-        },
-      },
-    })
-  )
-
-  useStateMachineCommands({
-    machineId: 'auth',
-    state: authState,
-    send: authSend,
-    commandBarConfig: authCommandBarConfig,
-    actor: authActor,
-  })
-
   return (
     <SettingsAuthContext.Provider
       value={{
-        auth: {
-          state: authState,
-          context: authState.context,
-          send: authSend,
-        },
         settings: {
           state: settingsState,
           context: settingsState.context,
@@ -418,12 +381,3 @@ export const SettingsAuthProviderBase = ({
 }
 
 export default SettingsAuthProvider
-
-export async function logout() {
-  localStorage.removeItem(TOKEN_PERSIST_KEY)
-  if (isDesktop()) return Promise.resolve(null)
-  return fetch(withBaseUrl('/logout'), {
-    method: 'POST',
-    credentials: 'include',
-  })
-}

src/components/Stream.tsx

@@ -17,10 +17,11 @@ import {
 import { useRouteLoaderData } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { IndexLoaderData } from 'lib/types'
-import { useCommandsContext } from 'hooks/useCommandsContext'
 import { err, reportRejection } from 'lib/trap'
 import { getArtifactOfTypes } from 'lang/std/artifactGraph'
 import { ViewControlContextMenu } from './ViewControlMenu'
+import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
+import { useSelector } from '@xstate/react'
 
 enum StreamState {
   Playing = 'playing',
@@ -35,7 +36,7 @@ export const Stream = () => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
   const { state, send } = useModelingContext()
-  const { commandBarState } = useCommandsContext()
+  const commandBarState = useCommandBarState()
   const { mediaStream } = useAppStream()
   const { overallState, immediateState } = useNetworkContext()
   const [streamState, setStreamState] = useState(StreamState.Unset)

src/components/ToastTextToCad.tsx

@@ -28,7 +28,7 @@ import { base64Decode } from 'lang/wasm'
 import { sendTelemetry } from 'lib/textToCad'
 import { Themes } from 'lib/theme'
 import { ActionButton } from './ActionButton'
-import { commandBarMachine } from 'machines/commandBarMachine'
+import { commandBarActor, commandBarMachine } from 'machines/commandBarMachine'
 import { EventFrom } from 'xstate'
 import { fileMachine } from 'machines/fileMachine'
 import { reportRejection } from 'lib/trap'
@@ -43,15 +43,10 @@ export function ToastTextToCadError({
   toastId,
   message,
   prompt,
-  commandBarSend,
 }: {
   toastId: string
   message: string
   prompt: string
-  commandBarSend: (
-    event: EventFrom<typeof commandBarMachine>,
-    data?: unknown
-  ) => void
 }) {
   return (
     <div className="flex flex-col justify-between gap-6">
@@ -81,7 +76,7 @@ export function ToastTextToCadError({
           }}
           name="Edit prompt"
           onClick={() => {
-            commandBarSend({
+            commandBarActor.send({
               type: 'Find and select command',
               data: {
                 groupId: 'modeling',

src/components/Toolbar/EqualAngle.tsx

@@ -1,10 +1,8 @@
 import { toolTips } from 'lang/langHelpers'
 import { Selections } from 'lib/selections'
 import { Program, Expr, VariableDeclarator } from '../../lang/wasm'
-import {
-  getNodePathFromSourceRange,
-  getNodeFromPath,
-} from '../../lang/queryAst'
+import { getNodeFromPath } from '../../lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
 import {
   transformSecondarySketchLinesTagFirst,

src/components/UserSidebarMenu.test.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 
 type User = Models['User_type']
 
@@ -124,9 +123,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
       <Route
         path="/file/:id"
         element={
-          <CommandBarProvider>
-            <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-          </CommandBarProvider>
+          <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
         }
       />
     ),

src/components/UserSidebarMenu.tsx

@@ -4,12 +4,12 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { Fragment, useMemo, useState } from 'react'
 import { PATHS } from 'lib/paths'
 import { Models } from '@kittycad/lib'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import Tooltip from './Tooltip'
 import usePlatform from 'hooks/usePlatform'
 import { isDesktop } from 'lib/isDesktop'
 import { CustomIcon } from './CustomIcon'
+import { authActor } from 'machines/appMachine'
 
 type User = Models['User_type']
 
@@ -20,7 +20,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
-  const send = useSettingsAuthContext()?.auth?.send
+  const send = authActor.send
 
   // We filter this memoized list so that no orphan "break" elements are rendered.
   const userMenuItems = useMemo<(ActionButtonProps | 'break')[]>(

src/editor/manager.ts

@@ -5,7 +5,6 @@ import { engineCommandManager, kclManager } from 'lib/singletons'
 import { modelingMachine, ModelingMachineEvent } from 'machines/modelingMachine'
 import { Selections, Selection, processCodeMirrorRanges } from 'lib/selections'
 import { undo, redo } from '@codemirror/commands'
-import { CommandBarMachineEvent } from 'machines/commandBarMachine'
 import { addLineHighlight, addLineHighlightEvent } from './highlightextension'
 import {
   Diagnostic,
@@ -52,9 +51,6 @@ export default class EditorManager {
   private _modelingSend: (eventInfo: ModelingMachineEvent) => void = () => {}
   private _modelingState: StateFrom<typeof modelingMachine> | null = null
 
-  private _commandBarSend: (eventInfo: CommandBarMachineEvent) => void =
-    () => {}
-
   private _convertToVariableEnabled: boolean = false
   private _convertToVariableCallback: () => void = () => {}
 
@@ -161,14 +157,6 @@ export default class EditorManager {
     this._modelingState = state
   }
 
-  setCommandBarSend(send: (eventInfo: CommandBarMachineEvent) => void) {
-    this._commandBarSend = send
-  }
-
-  commandBarSend(eventInfo: CommandBarMachineEvent): void {
-    return this._commandBarSend(eventInfo)
-  }
-
   get highlightRange(): Array<[number, number]> {
     return this._highlightRange
   }
@@ -315,6 +303,21 @@ export default class EditorManager {
     if (selections?.graphSelections?.length === 0) {
       return
     }
+
+    if (!this._editorView) {
+      return
+    }
+    const codeBaseSelections = this.createEditorSelection(selections)
+    this._editorView.dispatch({
+      selection: codeBaseSelections,
+      annotations: [
+        updateOutsideEditorEvent,
+        Transaction.addToHistory.of(false),
+      ],
+    })
+  }
+
+  createEditorSelection(selections: Selections) {
     let codeBasedSelections = []
     for (const selection of selections.graphSelections) {
       const safeEnd = Math.min(
@@ -331,18 +334,7 @@ export default class EditorManager {
         .range[1]
     const safeEnd = Math.min(end, this._editorView?.state.doc.length || end)
     codeBasedSelections.push(EditorSelection.cursor(safeEnd))
-
-    if (!this._editorView) {
-      return
-    }
-
-    this._editorView.dispatch({
-      selection: EditorSelection.create(codeBasedSelections, 1),
-      annotations: [
-        updateOutsideEditorEvent,
-        Transaction.addToHistory.of(false),
-      ],
-    })
+    return EditorSelection.create(codeBasedSelections, 1)
   }
 
   // We will ONLY get here if the user called a select event.

src/env.ts

@@ -10,6 +10,7 @@ export const VITE_KC_API_WS_MODELING_URL = env.VITE_KC_API_WS_MODELING_URL as
   | undefined
 export const VITE_KC_API_BASE_URL = env.VITE_KC_API_BASE_URL as string
 export const VITE_KC_SITE_BASE_URL = env.VITE_KC_SITE_BASE_URL as string
+export const VITE_KC_SITE_APP_URL = env.VITE_KC_SITE_APP_URL as string
 export const VITE_KC_SKIP_AUTH = env.VITE_KC_SKIP_AUTH as string | undefined
 export const VITE_KC_CONNECTION_TIMEOUT_MS =
   env.VITE_KC_CONNECTION_TIMEOUT_MS as string | undefined

src/hooks/useAuthNavigation.tsx

@@ -0,0 +1,29 @@
+import { PATHS } from 'lib/paths'
+import { useAuthState } from 'machines/appMachine'
+import { useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+/**
+ * A simple hook that listens to the auth state of the app and navigates
+ * accordingly.
+ */
+export function useAuthNavigation() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const authState = useAuthState()
+
+  // Subscribe to the auth state of the app and navigate accordingly.
+  useEffect(() => {
+    if (
+      authState.matches('loggedIn') &&
+      location.pathname.includes(PATHS.SIGN_IN)
+    ) {
+      navigate(PATHS.INDEX)
+    } else if (
+      authState.matches('loggedOut') &&
+      !location.pathname.includes(PATHS.SIGN_IN)
+    ) {
+      navigate(PATHS.SIGN_IN)
+    }
+  }, [authState])
+}

src/hooks/useCommandsContext.ts

@@ -1,10 +0,0 @@
-import { CommandsContext } from 'components/CommandBar/CommandBarProvider'
-
-export const useCommandsContext = () => {
-  const commandBarActor = CommandsContext.useActorRef()
-  const commandBarState = CommandsContext.useSelector((state) => state)
-  return {
-    commandBarSend: commandBarActor.send,
-    commandBarState,
-  }
-}

src/hooks/useCreateFileLinkQueryWatcher.ts

@@ -0,0 +1,65 @@
+import { base64ToString } from 'lib/base64'
+import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from 'lib/constants'
+import { useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useSettingsAuthContext } from './useSettingsAuthContext'
+import { isDesktop } from 'lib/isDesktop'
+import { FileLinkParams } from 'lib/links'
+import { ProjectsCommandSchema } from 'lib/commandBarConfigs/projectsCommandConfig'
+import { baseUnitsUnion } from 'lib/settings/settingsTypes'
+
+// For initializing the command arguments, we actually want `method` to be undefined
+// so that we don't skip it in the command palette.
+export type CreateFileSchemaMethodOptional = Omit<
+  ProjectsCommandSchema['Import file from URL'],
+  'method'
+> & {
+  method?: 'newProject' | 'existingProject'
+}
+
+/**
+ * companion to createFileLink. This hook runs an effect on mount that
+ * checks the URL for the CREATE_FILE_URL_PARAM and triggers the "Create file"
+ * command if it is present, loading the command's default values from the other
+ * URL parameters.
+ */
+export function useCreateFileLinkQuery(
+  callback: (args: CreateFileSchemaMethodOptional) => void
+) {
+  const [searchParams] = useSearchParams()
+  const { settings } = useSettingsAuthContext()
+
+  useEffect(() => {
+    const createFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
+
+    if (createFileParam) {
+      const params: FileLinkParams = {
+        code: base64ToString(
+          decodeURIComponent(searchParams.get('code') ?? '')
+        ),
+
+        name: searchParams.get('name') ?? DEFAULT_FILE_NAME,
+
+        units:
+          (baseUnitsUnion.find((unit) => searchParams.get('units') === unit) ||
+            settings.context.modeling.defaultUnit.default) ??
+          settings.context.modeling.defaultUnit.current,
+      }
+
+      const argDefaultValues: CreateFileSchemaMethodOptional = {
+        name: params.name
+          ? isDesktop()
+            ? params.name.replace('.kcl', '')
+            : params.name
+          : isDesktop()
+          ? settings.context.projects.defaultProjectName.current
+          : DEFAULT_FILE_NAME,
+        code: params.code || '',
+        units: params.units,
+        method: isDesktop() ? undefined : 'existingProject',
+      }
+
+      callback(argDefaultValues)
+    }
+  }, [searchParams])
+}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -17,7 +17,8 @@ import {
 } from 'lang/std/artifactGraph'
 import { err, reportRejection } from 'lib/trap'
 import { DefaultPlaneStr, getFaceDetails } from 'clientSideScene/sceneEntities'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { CallExpression, defaultSourceRange } from 'lang/wasm'
 import { EdgeCutInfo, ExtrudeFacePlane } from 'machines/modelingMachine'
 

src/hooks/useProjectsLoader.tsx

@@ -14,7 +14,7 @@ export const useProjectsLoader = (deps?: [number]) => {
 
   useEffect(() => {
     // Useless on web, until we get fake filesystems over there.
-    if (!isDesktop) return
+    if (!isDesktop()) return
 
     if (deps && deps[0] === lastTs) return
 

src/hooks/useSetupEngineManager.ts

@@ -16,14 +16,15 @@ export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
   modelingSend: ReturnType<typeof useModelingContext>['send'],
   modelingContext: ReturnType<typeof useModelingContext>['context'],
-  settings = {
+  settings: SettingsViaQueryString = {
     pool: null,
     theme: Themes.System,
     highlightEdges: true,
     enableSSAO: true,
     showScaleGrid: false,
     cameraProjection: 'perspective',
-  } as SettingsViaQueryString,
+    cameraOrbit: 'spherical',
+  },
   token?: string
 ) {
   const networkContext = useNetworkContext()

src/hooks/useStateMachineCommands.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { AnyStateMachine, Actor, StateFrom, EventFrom } from 'xstate'
 import { createMachineCommand } from '../lib/createMachineCommand'
-import { useCommandsContext } from './useCommandsContext'
 import { modelingMachine } from 'machines/modelingMachine'
 import { authMachine } from 'machines/authMachine'
 import { settingsMachine } from 'machines/settingsMachine'
@@ -15,6 +14,7 @@ import { useKclContext } from 'lang/KclProvider'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { useAppState } from 'AppState'
+import { commandBarActor } from 'machines/commandBarMachine'
 
 // This might not be necessary, AnyStateMachine from xstate is working
 export type AllMachines =
@@ -48,7 +48,6 @@ export default function useStateMachineCommands<
   allCommandsRequireNetwork = false,
   onCancel,
 }: UseStateMachineCommandsArgs<T, S>) {
-  const { commandBarSend } = useCommandsContext()
   const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
   const { isStreamReady } = useAppState()
@@ -76,10 +75,13 @@ export default function useStateMachineCommands<
       })
       .filter((c) => c !== null) as Command[] // TS isn't smart enough to know this filter removes nulls
 
-    commandBarSend({ type: 'Add commands', data: { commands: newCommands } })
+    commandBarActor.send({
+      type: 'Add commands',
+      data: { commands: newCommands },
+    })
 
     return () => {
-      commandBarSend({
+      commandBarActor.send({
         type: 'Remove commands',
         data: { commands: newCommands },
       })

src/lang/KclSingleton.ts

@@ -322,6 +322,7 @@ export class KclManager {
     await this.ensureWasmInit()
     const { logs, errors, execState, isInterrupted } = await executeAst({
       ast,
+      path: codeManager.currentFilePath || undefined,
       engineCommandManager: this.engineCommandManager,
     })
 

src/lang/codeManager.ts

@@ -80,6 +80,10 @@ export default class CodeManager {
     }))
   }
 
+  get currentFilePath(): string | null {
+    return this._currentFilePath
+  }
+
   updateCurrentFilePath(path: string) {
     this._currentFilePath = path
   }

src/lang/getNodePathFromSourceRange.test.ts

@@ -1,4 +1,5 @@
-import { getNodePathFromSourceRange, getNodeFromPath } from './queryAst'
+import { getNodeFromPath } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   Identifier,
   assertParse,

src/lang/kclSamples.test.ts

@@ -52,27 +52,22 @@ afterAll(async () => {
   } catch (e) {}
 })
 
-afterEach(() => {
-  process.chdir('..')
-})
-
-// The tests have to be sequential because we need to change directories
-// to support `import` working properly.
-// @ts-expect-error
-describe.sequential('Test KCL Samples from public Github repository', () => {
-  // @ts-expect-error
-  describe.sequential('when performing enginelessExecutor', () => {
+describe('Test KCL Samples from public Github repository', () => {
+  describe('when performing enginelessExecutor', () => {
     manifest.forEach((file: KclSampleFile) => {
-      // @ts-expect-error
-      it.sequential(
+      it(
         `should execute ${file.title} (${file.file}) successfully`,
         async () => {
-          const [dirProject, fileKcl] =
-            file.pathFromProjectDirectoryToFirstFile.split('/')
-          process.chdir(dirProject)
-          const code = await fs.readFile(fileKcl, 'utf-8')
+          const code = await fs.readFile(
+            file.pathFromProjectDirectoryToFirstFile,
+            'utf-8'
+          )
           const ast = assertParse(code)
-          await enginelessExecutor(ast, programMemoryInit())
+          await enginelessExecutor(
+            ast,
+            programMemoryInit(),
+            file.pathFromProjectDirectoryToFirstFile
+          )
         },
         files.length * 1000
       )

src/lang/langHelpers.ts

@@ -46,12 +46,14 @@ export const toolTips: Array<ToolTip> = [
 
 export async function executeAst({
   ast,
+  path,
   engineCommandManager,
   // If you set programMemoryOverride we assume you mean mock mode. Since that
   // is the only way to go about it.
   programMemoryOverride,
 }: {
   ast: Node<Program>
+  path?: string
   engineCommandManager: EngineCommandManager
   programMemoryOverride?: ProgramMemory
   isInterrupted?: boolean
@@ -63,8 +65,8 @@ export async function executeAst({
 }> {
   try {
     const execState = await (programMemoryOverride
-      ? enginelessExecutor(ast, programMemoryOverride)
-      : executor(ast, engineCommandManager))
+      ? enginelessExecutor(ast, programMemoryOverride, path)
+      : executor(ast, engineCommandManager, path))
 
     await engineCommandManager.waitForAllCommands()
 

src/lang/modifyAst.test.ts

@@ -5,6 +5,8 @@ import {
   Identifier,
   SourceRange,
   topLevelRange,
+  LiteralValue,
+  Literal,
 } from './wasm'
 import {
   createLiteral,
@@ -25,7 +27,8 @@ import {
   deleteFromSelection,
 } from './modifyAst'
 import { enginelessExecutor } from '../lib/testHelpers'
-import { findUsesOfTagInPipe, getNodePathFromSourceRange } from './queryAst'
+import { findUsesOfTagInPipe } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { err } from 'lib/trap'
 import { SimplifiedArgDetails } from './std/stdTypes'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
@@ -36,10 +39,26 @@ beforeAll(async () => {
 })
 
 describe('Testing createLiteral', () => {
-  it('should create a literal', () => {
+  it('should create a literal number without units', () => {
     const result = createLiteral(5)
     expect(result.type).toBe('Literal')
     expect((result as any).value.value).toBe(5)
+    expect((result as any).value.suffix).toBe('None')
+    expect((result as Literal).raw).toBe('5')
+  })
+  it('should create a literal number with units', () => {
+    const lit: LiteralValue = { value: 5, suffix: 'Mm' }
+    const result = createLiteral(lit)
+    expect(result.type).toBe('Literal')
+    expect((result as any).value.value).toBe(5)
+    expect((result as any).value.suffix).toBe('Mm')
+    expect((result as Literal).raw).toBe('5mm')
+  })
+  it('should create a literal boolean', () => {
+    const result = createLiteral(false)
+    expect(result.type).toBe('Literal')
+    expect((result as Literal).value).toBe(false)
+    expect((result as Literal).raw).toBe('false')
   })
 })
 describe('Testing createIdentifier', () => {

src/lang/modifyAst.ts

@@ -20,16 +20,17 @@ import {
   SourceRange,
   sketchFromKclValue,
   isPathToNodeNumber,
+  formatNumber,
 } from './wasm'
 import {
   isNodeSafeToReplacePath,
   findAllPreviousVariables,
   findAllPreviousVariablesPath,
   getNodeFromPath,
-  getNodePathFromSourceRange,
   isNodeSafeToReplace,
   traverse,
 } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { addTagForSketchOnFace, getConstraintInfo } from './std/sketch'
 import {
   PathToNodeMap,
@@ -46,6 +47,7 @@ import { Models } from '@kittycad/lib'
 import { ExtrudeFacePlane } from 'machines/modelingMachine'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { KclExpressionWithVariable } from 'lib/commandTypes'
+import { deleteEdgeTreatment } from './modifyAst/addEdgeTreatment'
 
 export function startSketchOnDefault(
   node: Node<Program>,
@@ -743,11 +745,26 @@ export function splitPathAtPipeExpression(pathToNode: PathToNode): {
   return splitPathAtPipeExpression(pathToNode.slice(0, -1))
 }
 
+/**
+ * Note: This depends on WASM, but it's not async.  Callers are responsible for
+ * awaiting init of the WASM module.
+ */
 export function createLiteral(value: LiteralValue | number): Node<Literal> {
-  const raw = `${value}`
   if (typeof value === 'number') {
     value = { value, suffix: 'None' }
   }
+  let raw: string
+  if (typeof value === 'string') {
+    // TODO: Should we handle escape sequences?
+    raw = `${value}`
+  } else if (typeof value === 'boolean') {
+    raw = `${value}`
+  } else if (typeof value.value === 'number' && value.suffix === 'None') {
+    // Fast path for numbers when there are no units.
+    raw = `${value.value}`
+  } else {
+    raw = formatNumber(value.value, value.suffix)
+  }
   return {
     type: 'Literal',
     start: 0,
@@ -1355,6 +1372,8 @@ export async function deleteFromSelection(
     }
     // await prom
     return astClone
+  } else if (selection.artifact?.type === 'edgeCut') {
+    return deleteEdgeTreatment(astClone, selection)
   } else if (varDec.node.init.type === 'PipeExpression') {
     const pipeBody = varDec.node.init.body
     if (

src/lang/modifyAst/addEdgeTreatment.test.ts

@@ -20,8 +20,10 @@ import {
   FilletParameters,
   ChamferParameters,
   EdgeTreatmentParameters,
+  deleteEdgeTreatment,
 } from './addEdgeTreatment'
-import { getNodeFromPath, getNodePathFromSourceRange } from '../queryAst'
+import { getNodeFromPath } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { createLiteral } from 'lang/modifyAst'
 import { err } from 'lib/trap'
 import { Selection, Selections } from 'lib/selections'
@@ -286,7 +288,7 @@ const runModifyAstCloneWithEdgeTreatmentAndTag = async (
     otherSelections: [],
   }
 
-  // apply edge treatment to seleciton
+  // apply edge treatment to selection
   const result = modifyAstWithEdgeTreatmentAndTag(ast, selection, parameters)
   if (err(result)) {
     return result
@@ -297,6 +299,46 @@ const runModifyAstCloneWithEdgeTreatmentAndTag = async (
 
   expect(newCode).toContain(expectedCode)
 }
+const runDeleteEdgeTreatmentTest = async (
+  code: string,
+  edgeTreatmentSnippet: string,
+  expectedCode: string
+) => {
+  // parse ast
+  const ast = assertParse(code)
+
+  // update artifact graph
+  await kclManager.executeAst({ ast })
+  const artifactGraph = engineCommandManager.artifactGraph
+
+  // define snippet range
+  const edgeTreatmentRange = topLevelRange(
+    code.indexOf(edgeTreatmentSnippet),
+    code.indexOf(edgeTreatmentSnippet) + edgeTreatmentSnippet.length
+  )
+
+  // find artifact
+  const maybeArtifact = [...artifactGraph].find(([, artifact]) => {
+    if (!('codeRef' in artifact)) return false
+    return isOverlap(artifact.codeRef.range, edgeTreatmentRange)
+  })
+
+  // build selection
+  const selection: Selection = {
+    codeRef: codeRefFromRange(edgeTreatmentRange, ast),
+    artifact: maybeArtifact ? maybeArtifact[1] : undefined,
+  }
+
+  // delete edge treatment
+  const result = await deleteEdgeTreatment(ast, selection)
+  if (err(result)) {
+    return result
+  }
+
+  // recast and check
+  const newCode = recast(result)
+  expect(newCode).toContain(expectedCode)
+}
 const createFilletParameters = (radiusValue: number): FilletParameters => ({
   type: EdgeTreatmentType.Fillet,
   radius: {
@@ -573,6 +615,191 @@ extrude002 = extrude(-25, sketch002)
         )
       })
     })
+    describe(`Testing deleteEdgeTreatment with ${edgeTreatmentType}s`, () => {
+      // simple cases
+      it(`should delete a piped ${edgeTreatmentType} from a single segment`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+  |> ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)`
+        const edgeTreatmentSnippet = `${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+      it(`should delete a non-piped ${edgeTreatmentType} from a single segment`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, extrude001)`
+        const edgeTreatmentSnippet = `fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, extrude001)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+      // getOppositeEdge and getNextAdjacentEdge cases
+      it(`should delete a piped ${edgeTreatmentType} tagged with getOppositeEdge`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [getOppositeEdge(seg01)] }, extrude001)`
+        const edgeTreatmentSnippet = `fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [getOppositeEdge(seg01)] }, extrude001)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+      it(`should delete a non-piped ${edgeTreatmentType} tagged with getNextAdjacentEdge`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [getNextAdjacentEdge(seg01)] }, extrude001)`
+        const edgeTreatmentSnippet = `fillet001 = ${edgeTreatmentType}({ ${parameterName} = 3, tags = [getNextAdjacentEdge(seg01)] }, extrude001)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg01)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+      // cases with several edge treatments
+      it(`should delete a piped ${edgeTreatmentType} from a body with multiple treatments`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %, $seg01)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg02)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+  |> ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)
+  |> fillet({ radius = 5, tags = [getOppositeEdge(seg02)] }, %)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 6, tags = [seg02] }, extrude001)
+chamfer001 = chamfer({ length = 5, tags = [getOppositeEdge(seg01)] }, extrude001)`
+        const edgeTreatmentSnippet = `${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %, $seg01)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg02)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+  |> fillet({
+       radius = 5,
+       tags = [getOppositeEdge(seg02)]
+     }, %)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 6, tags = [seg02] }, extrude001)
+chamfer001 = chamfer({
+  length = 5,
+  tags = [getOppositeEdge(seg01)]
+}, extrude001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+      it(`should delete a non-piped ${edgeTreatmentType} from a body with multiple treatments`, async () => {
+        const code = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %, $seg01)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg02)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+  |> ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)
+  |> fillet({ radius = 5, tags = [getOppositeEdge(seg02)] }, %)
+fillet001 = ${edgeTreatmentType}({ ${parameterName} = 6, tags = [seg02] }, extrude001)
+chamfer001 = chamfer({ length = 5, tags = [getOppositeEdge(seg01)] }, extrude001)`
+        const edgeTreatmentSnippet = `fillet001 = ${edgeTreatmentType}({ ${parameterName} = 6, tags = [seg02] }, extrude001)`
+        const expectedCode = `sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, 10], %)
+  |> line([20, 0], %, $seg01)
+  |> line([0, -20], %)
+  |> line([-20, 0], %, $seg02)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+extrude001 = extrude(-15, sketch001)
+  |> ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg01] }, %)
+  |> fillet({
+       radius = 5,
+       tags = [getOppositeEdge(seg02)]
+     }, %)
+chamfer001 = chamfer({
+  length = 5,
+  tags = [getOppositeEdge(seg01)]
+}, extrude001)`
+
+        await runDeleteEdgeTreatmentTest(
+          code,
+          edgeTreatmentSnippet,
+          expectedCode
+        )
+      })
+    })
   }
 )
 

src/lang/modifyAst/addEdgeTreatment.ts

@@ -5,6 +5,7 @@ import {
   Identifier,
   ObjectExpression,
   PathToNode,
+  PipeExpression,
   Program,
   VariableDeclaration,
   VariableDeclarator,
@@ -20,10 +21,10 @@ import {
 } from '../modifyAst'
 import {
   getNodeFromPath,
-  getNodePathFromSourceRange,
   hasSketchPipeBeenExtruded,
   traverse,
 } from '../queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   addTagForSketchOnFace,
   getTagFromCallExpression,
@@ -722,3 +723,148 @@ export const isTagUsedInEdgeTreatment = ({
 
   return edges
 }
+
+// Delete Edge Treatment
+export async function deleteEdgeTreatment(
+  ast: Node<Program>,
+  selection: Selection
+): Promise<Node<Program> | Error> {
+  /**
+   * Deletes an edge treatment (fillet or chamfer)
+   * from the AST based on the selection.
+   * Handles both standalone treatments
+   * and those within a PipeExpression.
+   *
+   * Supported cases:
+   * [+] fillet and chamfer
+   * [+] piped and non-piped edge treatments
+   * [-] delete single tag from array of tags (currently whole expression is deleted)
+   * [-] multiple selections with different edge treatments (currently single selection is supported)
+   */
+
+  // 1. Validate Selection Type
+  const { artifact } = selection
+  if (!artifact || artifact.type !== 'edgeCut') {
+    return new Error('Selection is not an edge cut')
+  }
+
+  const { subType: edgeTreatmentType } = artifact
+  if (
+    !edgeTreatmentType ||
+    !['fillet', 'chamfer'].includes(edgeTreatmentType)
+  ) {
+    return new Error('Unsupported or missing edge treatment type')
+  }
+
+  // 2. Clone ast and retrieve the VariableDeclarator
+  const astClone = structuredClone(ast)
+  const varDec = getNodeFromPath<VariableDeclarator>(
+    ast,
+    selection?.codeRef?.pathToNode,
+    'VariableDeclarator'
+  )
+  if (err(varDec)) return varDec
+
+  // 3: Check if edge treatment is in a pipe
+  const inPipe = varDec.node.init.type === 'PipeExpression'
+
+  // 4A. Handle standalone edge treatment
+  if (!inPipe) {
+    const varDecPathStep = varDec.shallowPath[1]
+
+    if (
+      !Array.isArray(varDecPathStep) ||
+      typeof varDecPathStep[0] !== 'number'
+    ) {
+      return new Error(
+        'Invalid shallowPath structure: expected a number at shallowPath[1][0]'
+      )
+    }
+
+    const varDecIndex: number = varDecPathStep[0]
+
+    // Remove entire VariableDeclarator from the ast
+    astClone.body.splice(varDecIndex, 1)
+    return astClone
+  }
+
+  // 4B. Handle edge treatment within pipe
+  if (inPipe) {
+    // Retrieve the CallExpression path
+    const callExp =
+      getNodeFromPath<CallExpression>(
+        ast,
+        selection?.codeRef?.pathToNode,
+        'CallExpression'
+      ) ?? null
+    if (err(callExp)) return callExp
+
+    const shallowPath = callExp.shallowPath
+
+    // Initialize variables to hold the PipeExpression path and callIndex
+    let pipeExpressionPath: PathToNode | null = null
+    let callIndex: number | null = null
+
+    // Iterate through the shallowPath to find the PipeExpression and callIndex
+    for (let i = 0; i < shallowPath.length - 1; i++) {
+      const [key, value] = shallowPath[i]
+
+      if (key === 'body' && value === 'PipeExpression') {
+        pipeExpressionPath = shallowPath.slice(0, i + 1)
+
+        const nextStep = shallowPath[i + 1]
+        if (
+          nextStep &&
+          nextStep[1] === 'index' &&
+          typeof nextStep[0] === 'number'
+        ) {
+          callIndex = nextStep[0]
+        }
+
+        break
+      }
+    }
+
+    if (!pipeExpressionPath) {
+      return new Error('PipeExpression not found in path')
+    }
+
+    if (callIndex === null) {
+      return new Error('Failed to extract CallExpression index')
+    }
+    // Retrieve the PipeExpression node
+    const pipeExpressionNode = getNodeFromPath<PipeExpression>(
+      astClone,
+      pipeExpressionPath,
+      'PipeExpression'
+    )
+    if (err(pipeExpressionNode)) return pipeExpressionNode
+
+    // Ensure that the PipeExpression.body is an array
+    if (!Array.isArray(pipeExpressionNode.node.body)) {
+      return new Error('PipeExpression body is not an array')
+    }
+
+    // Remove the CallExpression at the specified index
+    pipeExpressionNode.node.body.splice(callIndex, 1)
+
+    // Remove VariableDeclarator if PipeExpression.body is empty
+    if (pipeExpressionNode.node.body.length === 0) {
+      const varDecPathStep = varDec.shallowPath[1]
+      if (
+        !Array.isArray(varDecPathStep) ||
+        typeof varDecPathStep[0] !== 'number'
+      ) {
+        return new Error(
+          'Invalid shallowPath structure: expected a number at shallowPath[1][0]'
+        )
+      }
+      const varDecIndex: number = varDecPathStep[0]
+      astClone.body.splice(varDecIndex, 1)
+    }
+
+    return astClone
+  }
+
+  return Error('Delete fillets not implemented')
+}

src/lang/modifyAst/addRevolve.ts

@@ -19,7 +19,8 @@ import {
   findUniqueName,
   createVariableDeclaration,
 } from 'lang/modifyAst'
-import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodeFromPath } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import {
   mutateAstWithTagForSketchSegment,
   getEdgeTagCall,

src/lang/queryAst.test.ts

@@ -5,12 +5,15 @@ import {
   PathToNode,
   Identifier,
   topLevelRange,
+  PipeExpression,
+  CallExpression,
+  VariableDeclarator,
 } from './wasm'
+import { ProgramMemory } from 'lang/wasm'
 import {
   findAllPreviousVariables,
   isNodeSafeToReplace,
   isTypeInValue,
-  getNodePathFromSourceRange,
   hasExtrudeSketch,
   findUsesOfTagInPipe,
   hasSketchPipeBeenExtruded,
@@ -19,15 +22,18 @@ import {
   getNodeFromPath,
   doesSceneHaveExtrudedSketch,
 } from './queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { enginelessExecutor } from '../lib/testHelpers'
 import {
   createArrayExpression,
   createCallExpression,
   createLiteral,
   createPipeSubstitution,
+  createCallExpressionStdLib,
 } from './modifyAst'
 import { err } from 'lib/trap'
 import { codeRefFromRange } from './std/artifactGraph'
+import { addCallExpressionsToPipe, addCloseToPipe } from 'lang/std/sketch'
 
 beforeAll(async () => {
   await initPromise
@@ -680,3 +686,115 @@ myNestedVar = [
     expect(pathToNode).toEqual(pathToNode2)
   })
 })
+
+describe('Testing specific sketch getNodeFromPath workflow', () => {
+  it('should parse the code', () => {
+    const openSketch = `sketch001 = startSketchOn('XZ')
+|> startProfileAt([0.02, 0.22], %)
+|> xLine(0.39, %)
+|> line([0.02, -0.17], %)
+|> yLine(-0.15, %)
+|> line([-0.21, -0.02], %)
+|> xLine(-0.15, %)
+|> line([-0.02, 0.21], %)
+|> line([-0.08, 0.05], %)`
+    const ast = assertParse(openSketch)
+    expect(ast.start).toEqual(0)
+    expect(ast.end).toEqual(227)
+  })
+  it('should find the location to add new lineTo', () => {
+    const openSketch = `sketch001 = startSketchOn('XZ')
+|> startProfileAt([0.02, 0.22], %)
+|> xLine(0.39, %)
+|> line([0.02, -0.17], %)
+|> yLine(-0.15, %)
+|> line([-0.21, -0.02], %)
+|> xLine(-0.15, %)
+|> line([-0.02, 0.21], %)
+|> line([-0.08, 0.05], %)`
+    const ast = assertParse(openSketch)
+
+    const sketchSnippet = `startProfileAt([0.02, 0.22], %)`
+    const sketchRange = topLevelRange(
+      openSketch.indexOf(sketchSnippet),
+      openSketch.indexOf(sketchSnippet) + sketchSnippet.length
+    )
+    const sketchPathToNode = getNodePathFromSourceRange(ast, sketchRange)
+    const modifiedAst = addCallExpressionsToPipe({
+      node: ast,
+      programMemory: ProgramMemory.empty(),
+      pathToNode: sketchPathToNode,
+      expressions: [
+        createCallExpressionStdLib(
+          'lineTo', // We are forcing lineTo!
+          [
+            createArrayExpression([
+              createCallExpressionStdLib('profileStartX', [
+                createPipeSubstitution(),
+              ]),
+              createCallExpressionStdLib('profileStartY', [
+                createPipeSubstitution(),
+              ]),
+            ]),
+            createPipeSubstitution(),
+          ]
+        ),
+      ],
+    })
+    if (err(modifiedAst)) throw modifiedAst
+    const recasted = recast(modifiedAst)
+    const expectedCode = `sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0.02, 0.22], %)
+  |> xLine(0.39, %)
+  |> line([0.02, -0.17], %)
+  |> yLine(-0.15, %)
+  |> line([-0.21, -0.02], %)
+  |> xLine(-0.15, %)
+  |> line([-0.02, 0.21], %)
+  |> line([-0.08, 0.05], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+`
+    expect(recasted).toEqual(expectedCode)
+  })
+  it('it should find the location to add close', () => {
+    const openSketch = `sketch001 = startSketchOn('XZ')
+|> startProfileAt([0.02, 0.22], %)
+|> xLine(0.39, %)
+|> line([0.02, -0.17], %)
+|> yLine(-0.15, %)
+|> line([-0.21, -0.02], %)
+|> xLine(-0.15, %)
+|> line([-0.02, 0.21], %)
+|> line([-0.08, 0.05], %)
+|> lineTo([profileStartX(%), profileStartY(%)], %)
+`
+    const ast = assertParse(openSketch)
+    const sketchSnippet = `startProfileAt([0.02, 0.22], %)`
+    const sketchRange = topLevelRange(
+      openSketch.indexOf(sketchSnippet),
+      openSketch.indexOf(sketchSnippet) + sketchSnippet.length
+    )
+    const sketchPathToNode = getNodePathFromSourceRange(ast, sketchRange)
+    const modifiedAst = addCloseToPipe({
+      node: ast,
+      programMemory: ProgramMemory.empty(),
+      pathToNode: sketchPathToNode,
+    })
+
+    if (err(modifiedAst)) throw modifiedAst
+    const recasted = recast(modifiedAst)
+    const expectedCode = `sketch001 = startSketchOn('XZ')
+  |> startProfileAt([0.02, 0.22], %)
+  |> xLine(0.39, %)
+  |> line([0.02, -0.17], %)
+  |> yLine(-0.15, %)
+  |> line([-0.21, -0.02], %)
+  |> xLine(-0.15, %)
+  |> line([-0.02, 0.21], %)
+  |> line([-0.08, 0.05], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+`
+    expect(recasted).toEqual(expectedCode)
+  })
+})

src/lang/queryAst.ts

@@ -21,7 +21,9 @@ import {
   topLevelRange,
   VariableDeclaration,
   VariableDeclarator,
+  recast,
 } from './wasm'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { createIdentifier, splitPathAtLastIndex } from './modifyAst'
 import { getSketchSegmentFromSourceRange } from './std/sketchConstraints'
 import { getAngle } from '../lib/utils'
@@ -67,7 +69,28 @@ export function getNodeFromPath<T>(
           deepPath: successfulPaths,
         }
       }
-      return new Error('not an object')
+      const stackTraceError = new Error()
+      const sourceCode = recast(node)
+      const levels = stackTraceError.stack?.split('\n')
+      const aFewFunctionNames: string[] = []
+      let tree = ''
+      levels?.forEach((val, index) => {
+        const fnName = val.trim().split(' ')[1]
+        const ending = index === levels.length - 1 ? ' ' : ' > '
+        tree += fnName + ending
+        if (index < 3) {
+          aFewFunctionNames.push(fnName)
+        }
+      })
+      const error = new Error(
+        `Failed to stopAt ${stopAt}, ${aFewFunctionNames
+          .filter((a) => a)
+          .join(' > ')}`
+      )
+      console.error(tree)
+      console.error(sourceCode)
+      console.error(error.stack)
+      return error
     }
     currentNode = currentNode?.[pathItem[0]]
     successfulPaths.push(pathItem)
@@ -125,311 +148,6 @@ export function getNodeFromPathCurry(
   }
 }
 
-function moreNodePathFromSourceRange(
-  node: Node<
-    | Expr
-    | ImportStatement
-    | ExpressionStatement
-    | VariableDeclaration
-    | ReturnStatement
-  >,
-  sourceRange: SourceRange,
-  previousPath: PathToNode = [['body', '']]
-): PathToNode {
-  const [start, end] = sourceRange
-  let path: PathToNode = [...previousPath]
-  const _node = { ...node }
-
-  if (start < _node.start || end > _node.end) return path
-
-  const isInRange = _node.start <= start && _node.end >= end
-
-  if (
-    (_node.type === 'Identifier' ||
-      _node.type === 'Literal' ||
-      _node.type === 'TagDeclarator') &&
-    isInRange
-  ) {
-    return path
-  }
-
-  if (_node.type === 'CallExpression' && isInRange) {
-    const { callee, arguments: args } = _node
-    if (
-      callee.type === 'Identifier' &&
-      callee.start <= start &&
-      callee.end >= end
-    ) {
-      path.push(['callee', 'CallExpression'])
-      return path
-    }
-    if (args.length > 0) {
-      for (let argIndex = 0; argIndex < args.length; argIndex++) {
-        const arg = args[argIndex]
-        if (arg.start <= start && arg.end >= end) {
-          path.push(['arguments', 'CallExpression'])
-          path.push([argIndex, 'index'])
-          return moreNodePathFromSourceRange(arg, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-
-  if (_node.type === 'CallExpressionKw' && isInRange) {
-    const { callee, arguments: args } = _node
-    if (
-      callee.type === 'Identifier' &&
-      callee.start <= start &&
-      callee.end >= end
-    ) {
-      path.push(['callee', 'CallExpressionKw'])
-      return path
-    }
-    if (args.length > 0) {
-      for (let argIndex = 0; argIndex < args.length; argIndex++) {
-        const arg = args[argIndex].arg
-        if (arg.start <= start && arg.end >= end) {
-          path.push(['arguments', 'CallExpressionKw'])
-          path.push([argIndex, 'index'])
-          return moreNodePathFromSourceRange(arg, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-
-  if (_node.type === 'BinaryExpression' && isInRange) {
-    const { left, right } = _node
-    if (left.start <= start && left.end >= end) {
-      path.push(['left', 'BinaryExpression'])
-      return moreNodePathFromSourceRange(left, sourceRange, path)
-    }
-    if (right.start <= start && right.end >= end) {
-      path.push(['right', 'BinaryExpression'])
-      return moreNodePathFromSourceRange(right, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'PipeExpression' && isInRange) {
-    const { body } = _node
-    for (let i = 0; i < body.length; i++) {
-      const pipe = body[i]
-      if (pipe.start <= start && pipe.end >= end) {
-        path.push(['body', 'PipeExpression'])
-        path.push([i, 'index'])
-        return moreNodePathFromSourceRange(pipe, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ArrayExpression' && isInRange) {
-    const { elements } = _node
-    for (let elIndex = 0; elIndex < elements.length; elIndex++) {
-      const element = elements[elIndex]
-      if (element.start <= start && element.end >= end) {
-        path.push(['elements', 'ArrayExpression'])
-        path.push([elIndex, 'index'])
-        return moreNodePathFromSourceRange(element, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ObjectExpression' && isInRange) {
-    const { properties } = _node
-    for (let propIndex = 0; propIndex < properties.length; propIndex++) {
-      const property = properties[propIndex]
-      if (property.start <= start && property.end >= end) {
-        path.push(['properties', 'ObjectExpression'])
-        path.push([propIndex, 'index'])
-        if (property.key.start <= start && property.key.end >= end) {
-          path.push(['key', 'Property'])
-          return moreNodePathFromSourceRange(property.key, sourceRange, path)
-        }
-        if (property.value.start <= start && property.value.end >= end) {
-          path.push(['value', 'Property'])
-          return moreNodePathFromSourceRange(property.value, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ExpressionStatement' && isInRange) {
-    const { expression } = _node
-    path.push(['expression', 'ExpressionStatement'])
-    return moreNodePathFromSourceRange(expression, sourceRange, path)
-  }
-  if (_node.type === 'VariableDeclaration' && isInRange) {
-    const declaration = _node.declaration
-
-    if (declaration.start <= start && declaration.end >= end) {
-      path.push(['declaration', 'VariableDeclaration'])
-      const init = declaration.init
-      if (init.start <= start && init.end >= end) {
-        path.push(['init', ''])
-        return moreNodePathFromSourceRange(init, sourceRange, path)
-      }
-    }
-  }
-  if (_node.type === 'VariableDeclaration' && isInRange) {
-    const declaration = _node.declaration
-
-    if (declaration.start <= start && declaration.end >= end) {
-      const init = declaration.init
-      if (init.start <= start && init.end >= end) {
-        path.push(['declaration', 'VariableDeclaration'])
-        path.push(['init', ''])
-        return moreNodePathFromSourceRange(init, sourceRange, path)
-      }
-    }
-    return path
-  }
-  if (_node.type === 'UnaryExpression' && isInRange) {
-    const { argument } = _node
-    if (argument.start <= start && argument.end >= end) {
-      path.push(['argument', 'UnaryExpression'])
-      return moreNodePathFromSourceRange(argument, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'FunctionExpression' && isInRange) {
-    for (let i = 0; i < _node.params.length; i++) {
-      const param = _node.params[i]
-      if (param.identifier.start <= start && param.identifier.end >= end) {
-        path.push(['params', 'FunctionExpression'])
-        path.push([i, 'index'])
-        return moreNodePathFromSourceRange(param.identifier, sourceRange, path)
-      }
-    }
-    if (_node.body.start <= start && _node.body.end >= end) {
-      path.push(['body', 'FunctionExpression'])
-      const fnBody = _node.body.body
-      for (let i = 0; i < fnBody.length; i++) {
-        const statement = fnBody[i]
-        if (statement.start <= start && statement.end >= end) {
-          path.push(['body', 'FunctionExpression'])
-          path.push([i, 'index'])
-          return moreNodePathFromSourceRange(statement, sourceRange, path)
-        }
-      }
-    }
-    return path
-  }
-  if (_node.type === 'ReturnStatement' && isInRange) {
-    const { argument } = _node
-    if (argument.start <= start && argument.end >= end) {
-      path.push(['argument', 'ReturnStatement'])
-      return moreNodePathFromSourceRange(argument, sourceRange, path)
-    }
-    return path
-  }
-  if (_node.type === 'MemberExpression' && isInRange) {
-    const { object, property } = _node
-    if (object.start <= start && object.end >= end) {
-      path.push(['object', 'MemberExpression'])
-      return moreNodePathFromSourceRange(object, sourceRange, path)
-    }
-    if (property.start <= start && property.end >= end) {
-      path.push(['property', 'MemberExpression'])
-      return moreNodePathFromSourceRange(property, sourceRange, path)
-    }
-    return path
-  }
-
-  if (_node.type === 'PipeSubstitution' && isInRange) return path
-
-  if (_node.type === 'IfExpression' && isInRange) {
-    const { cond, then_val, else_ifs, final_else } = _node
-    if (cond.start <= start && cond.end >= end) {
-      path.push(['cond', 'IfExpression'])
-      return moreNodePathFromSourceRange(cond, sourceRange, path)
-    }
-    if (then_val.start <= start && then_val.end >= end) {
-      path.push(['then_val', 'IfExpression'])
-      path.push(['body', 'IfExpression'])
-      return getNodePathFromSourceRange(then_val, sourceRange, path)
-    }
-    for (let i = 0; i < else_ifs.length; i++) {
-      const else_if = else_ifs[i]
-      if (else_if.start <= start && else_if.end >= end) {
-        path.push(['else_ifs', 'IfExpression'])
-        path.push([i, 'index'])
-        const { cond, then_val } = else_if
-        if (cond.start <= start && cond.end >= end) {
-          path.push(['cond', 'IfExpression'])
-          return moreNodePathFromSourceRange(cond, sourceRange, path)
-        }
-        path.push(['then_val', 'IfExpression'])
-        path.push(['body', 'IfExpression'])
-        return getNodePathFromSourceRange(then_val, sourceRange, path)
-      }
-    }
-    if (final_else.start <= start && final_else.end >= end) {
-      path.push(['final_else', 'IfExpression'])
-      path.push(['body', 'IfExpression'])
-      return getNodePathFromSourceRange(final_else, sourceRange, path)
-    }
-    return path
-  }
-
-  if (_node.type === 'ImportStatement' && isInRange) {
-    if (_node.selector && _node.selector.type === 'List') {
-      path.push(['selector', 'ImportStatement'])
-      const { items } = _node.selector
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i]
-        if (item.start <= start && item.end >= end) {
-          path.push(['items', 'ImportSelector'])
-          path.push([i, 'index'])
-          if (item.name.start <= start && item.name.end >= end) {
-            path.push(['name', 'ImportItem'])
-            return path
-          }
-          if (
-            item.alias &&
-            item.alias.start <= start &&
-            item.alias.end >= end
-          ) {
-            path.push(['alias', 'ImportItem'])
-            return path
-          }
-          return path
-        }
-      }
-      return path
-    }
-    return path
-  }
-
-  console.error('not implemented: ' + node.type)
-
-  return path
-}
-
-export function getNodePathFromSourceRange(
-  node: Program,
-  sourceRange: SourceRange,
-  previousPath: PathToNode = [['body', '']]
-): PathToNode {
-  const [start, end] = sourceRange || []
-  let path: PathToNode = [...previousPath]
-  const _node = { ...node }
-
-  // loop over each statement in body getting the index with a for loop
-  for (
-    let statementIndex = 0;
-    statementIndex < _node.body.length;
-    statementIndex++
-  ) {
-    const statement = _node.body[statementIndex]
-    if (statement.start <= start && statement.end >= end) {
-      path.push([statementIndex, 'index'])
-      return moreNodePathFromSourceRange(statement, sourceRange, path)
-    }
-  }
-  return path
-}
-
 type KCLNode = Node<
   | Expr
   | ExpressionStatement

src/lang/queryAstNodePathUtils.ts

@@ -0,0 +1,316 @@
+import {
+  Expr,
+  ExpressionStatement,
+  VariableDeclaration,
+  ReturnStatement,
+  SourceRange,
+  PathToNode,
+  Program,
+} from './wasm'
+import { ImportStatement } from 'wasm-lib/kcl/bindings/ImportStatement'
+import { Node } from 'wasm-lib/kcl/bindings/Node'
+
+function moreNodePathFromSourceRange(
+  node: Node<
+    | Expr
+    | ImportStatement
+    | ExpressionStatement
+    | VariableDeclaration
+    | ReturnStatement
+  >,
+  sourceRange: SourceRange,
+  previousPath: PathToNode = [['body', '']]
+): PathToNode {
+  const [start, end] = sourceRange
+  let path: PathToNode = [...previousPath]
+  const _node = { ...node }
+
+  if (start < _node.start || end > _node.end) return path
+
+  const isInRange = _node.start <= start && _node.end >= end
+
+  if (
+    (_node.type === 'Identifier' ||
+      _node.type === 'Literal' ||
+      _node.type === 'TagDeclarator') &&
+    isInRange
+  ) {
+    return path
+  }
+
+  if (_node.type === 'CallExpression' && isInRange) {
+    const { callee, arguments: args } = _node
+    if (
+      callee.type === 'Identifier' &&
+      callee.start <= start &&
+      callee.end >= end
+    ) {
+      path.push(['callee', 'CallExpression'])
+      return path
+    }
+    if (args.length > 0) {
+      for (let argIndex = 0; argIndex < args.length; argIndex++) {
+        const arg = args[argIndex]
+        if (arg.start <= start && arg.end >= end) {
+          path.push(['arguments', 'CallExpression'])
+          path.push([argIndex, 'index'])
+          return moreNodePathFromSourceRange(arg, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+
+  if (_node.type === 'CallExpressionKw' && isInRange) {
+    const { callee, arguments: args } = _node
+    if (
+      callee.type === 'Identifier' &&
+      callee.start <= start &&
+      callee.end >= end
+    ) {
+      path.push(['callee', 'CallExpressionKw'])
+      return path
+    }
+    if (args.length > 0) {
+      for (let argIndex = 0; argIndex < args.length; argIndex++) {
+        const arg = args[argIndex].arg
+        if (arg.start <= start && arg.end >= end) {
+          path.push(['arguments', 'CallExpressionKw'])
+          path.push([argIndex, 'index'])
+          return moreNodePathFromSourceRange(arg, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+
+  if (_node.type === 'BinaryExpression' && isInRange) {
+    const { left, right } = _node
+    if (left.start <= start && left.end >= end) {
+      path.push(['left', 'BinaryExpression'])
+      return moreNodePathFromSourceRange(left, sourceRange, path)
+    }
+    if (right.start <= start && right.end >= end) {
+      path.push(['right', 'BinaryExpression'])
+      return moreNodePathFromSourceRange(right, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'PipeExpression' && isInRange) {
+    const { body } = _node
+    for (let i = 0; i < body.length; i++) {
+      const pipe = body[i]
+      if (pipe.start <= start && pipe.end >= end) {
+        path.push(['body', 'PipeExpression'])
+        path.push([i, 'index'])
+        return moreNodePathFromSourceRange(pipe, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ArrayExpression' && isInRange) {
+    const { elements } = _node
+    for (let elIndex = 0; elIndex < elements.length; elIndex++) {
+      const element = elements[elIndex]
+      if (element.start <= start && element.end >= end) {
+        path.push(['elements', 'ArrayExpression'])
+        path.push([elIndex, 'index'])
+        return moreNodePathFromSourceRange(element, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ObjectExpression' && isInRange) {
+    const { properties } = _node
+    for (let propIndex = 0; propIndex < properties.length; propIndex++) {
+      const property = properties[propIndex]
+      if (property.start <= start && property.end >= end) {
+        path.push(['properties', 'ObjectExpression'])
+        path.push([propIndex, 'index'])
+        if (property.key.start <= start && property.key.end >= end) {
+          path.push(['key', 'Property'])
+          return moreNodePathFromSourceRange(property.key, sourceRange, path)
+        }
+        if (property.value.start <= start && property.value.end >= end) {
+          path.push(['value', 'Property'])
+          return moreNodePathFromSourceRange(property.value, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ExpressionStatement' && isInRange) {
+    const { expression } = _node
+    path.push(['expression', 'ExpressionStatement'])
+    return moreNodePathFromSourceRange(expression, sourceRange, path)
+  }
+  if (_node.type === 'VariableDeclaration' && isInRange) {
+    const declaration = _node.declaration
+
+    if (declaration.start <= start && declaration.end >= end) {
+      path.push(['declaration', 'VariableDeclaration'])
+      const init = declaration.init
+      if (init.start <= start && init.end >= end) {
+        path.push(['init', ''])
+        return moreNodePathFromSourceRange(init, sourceRange, path)
+      }
+    }
+  }
+  if (_node.type === 'VariableDeclaration' && isInRange) {
+    const declaration = _node.declaration
+
+    if (declaration.start <= start && declaration.end >= end) {
+      const init = declaration.init
+      if (init.start <= start && init.end >= end) {
+        path.push(['declaration', 'VariableDeclaration'])
+        path.push(['init', ''])
+        return moreNodePathFromSourceRange(init, sourceRange, path)
+      }
+    }
+    return path
+  }
+  if (_node.type === 'UnaryExpression' && isInRange) {
+    const { argument } = _node
+    if (argument.start <= start && argument.end >= end) {
+      path.push(['argument', 'UnaryExpression'])
+      return moreNodePathFromSourceRange(argument, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'FunctionExpression' && isInRange) {
+    for (let i = 0; i < _node.params.length; i++) {
+      const param = _node.params[i]
+      if (param.identifier.start <= start && param.identifier.end >= end) {
+        path.push(['params', 'FunctionExpression'])
+        path.push([i, 'index'])
+        return moreNodePathFromSourceRange(param.identifier, sourceRange, path)
+      }
+    }
+    if (_node.body.start <= start && _node.body.end >= end) {
+      path.push(['body', 'FunctionExpression'])
+      const fnBody = _node.body.body
+      for (let i = 0; i < fnBody.length; i++) {
+        const statement = fnBody[i]
+        if (statement.start <= start && statement.end >= end) {
+          path.push(['body', 'FunctionExpression'])
+          path.push([i, 'index'])
+          return moreNodePathFromSourceRange(statement, sourceRange, path)
+        }
+      }
+    }
+    return path
+  }
+  if (_node.type === 'ReturnStatement' && isInRange) {
+    const { argument } = _node
+    if (argument.start <= start && argument.end >= end) {
+      path.push(['argument', 'ReturnStatement'])
+      return moreNodePathFromSourceRange(argument, sourceRange, path)
+    }
+    return path
+  }
+  if (_node.type === 'MemberExpression' && isInRange) {
+    const { object, property } = _node
+    if (object.start <= start && object.end >= end) {
+      path.push(['object', 'MemberExpression'])
+      return moreNodePathFromSourceRange(object, sourceRange, path)
+    }
+    if (property.start <= start && property.end >= end) {
+      path.push(['property', 'MemberExpression'])
+      return moreNodePathFromSourceRange(property, sourceRange, path)
+    }
+    return path
+  }
+
+  if (_node.type === 'PipeSubstitution' && isInRange) return path
+
+  if (_node.type === 'IfExpression' && isInRange) {
+    const { cond, then_val, else_ifs, final_else } = _node
+    if (cond.start <= start && cond.end >= end) {
+      path.push(['cond', 'IfExpression'])
+      return moreNodePathFromSourceRange(cond, sourceRange, path)
+    }
+    if (then_val.start <= start && then_val.end >= end) {
+      path.push(['then_val', 'IfExpression'])
+      path.push(['body', 'IfExpression'])
+      return getNodePathFromSourceRange(then_val, sourceRange, path)
+    }
+    for (let i = 0; i < else_ifs.length; i++) {
+      const else_if = else_ifs[i]
+      if (else_if.start <= start && else_if.end >= end) {
+        path.push(['else_ifs', 'IfExpression'])
+        path.push([i, 'index'])
+        const { cond, then_val } = else_if
+        if (cond.start <= start && cond.end >= end) {
+          path.push(['cond', 'IfExpression'])
+          return moreNodePathFromSourceRange(cond, sourceRange, path)
+        }
+        path.push(['then_val', 'IfExpression'])
+        path.push(['body', 'IfExpression'])
+        return getNodePathFromSourceRange(then_val, sourceRange, path)
+      }
+    }
+    if (final_else.start <= start && final_else.end >= end) {
+      path.push(['final_else', 'IfExpression'])
+      path.push(['body', 'IfExpression'])
+      return getNodePathFromSourceRange(final_else, sourceRange, path)
+    }
+    return path
+  }
+
+  if (_node.type === 'ImportStatement' && isInRange) {
+    if (_node.selector && _node.selector.type === 'List') {
+      path.push(['selector', 'ImportStatement'])
+      const { items } = _node.selector
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (item.start <= start && item.end >= end) {
+          path.push(['items', 'ImportSelector'])
+          path.push([i, 'index'])
+          if (item.name.start <= start && item.name.end >= end) {
+            path.push(['name', 'ImportItem'])
+            return path
+          }
+          if (
+            item.alias &&
+            item.alias.start <= start &&
+            item.alias.end >= end
+          ) {
+            path.push(['alias', 'ImportItem'])
+            return path
+          }
+          return path
+        }
+      }
+      return path
+    }
+    return path
+  }
+
+  console.error('not implemented: ' + node.type)
+
+  return path
+}
+
+export function getNodePathFromSourceRange(
+  node: Program,
+  sourceRange: SourceRange,
+  previousPath: PathToNode = [['body', '']]
+): PathToNode {
+  const [start, end] = sourceRange || []
+  let path: PathToNode = [...previousPath]
+  const _node = { ...node }
+
+  // loop over each statement in body getting the index with a for loop
+  for (
+    let statementIndex = 0;
+    statementIndex < _node.body.length;
+    statementIndex++
+  ) {
+    const statement = _node.body[statementIndex]
+    if (statement.start <= start && statement.end >= end) {
+      path.push([statementIndex, 'index'])
+      return moreNodePathFromSourceRange(statement, sourceRange, path)
+    }
+  }
+  return path
+}

src/lang/std/artifactGraph.ts

@@ -16,7 +16,7 @@ import {
   EdgeCut,
 } from 'lang/wasm'
 import { Models } from '@kittycad/lib'
-import { getNodePathFromSourceRange } from 'lang/queryAst'
+import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
 import { err } from 'lib/trap'
 
 export type { Artifact, ArtifactId, SegmentArtifact } from 'lang/wasm'