Update test snaps

Both the Lego brick base, the first bump, and the second bump are all ExtrudeGroups. They all share the same ID -- the ID of the original path that formed the base of the brick.

When running a pattern on the lego *bump* (not the lego *base*), the pattern target ID is the extrude group ID. But like I said, that's the same ID as the rest of the entire extrude! So whether you pattern the base or the brick, the result will be the same -- the entire extrude gets patterned.

Solution: send the ID of the original sketch group (either base or bump)

.github/workflows/build-apps.yml

@@ -165,7 +165,6 @@ jobs:
       - name: Build the app (release)
         if: ${{ env.IS_RELEASE == 'true' || env.IS_NIGHTLY == 'true' }}
         env:
-          PUBLISH_FOR_PULL_REQUEST: true
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
@@ -173,7 +172,6 @@ jobs:
           CSC_LINK: ${{ secrets.APPLE_CERTIFICATE }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           CSC_KEYCHAIN: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          CSC_FOR_PULL_REQUEST: true
           WINDOWS_CERTIFICATE_THUMBPRINT: ${{ secrets.WINDOWS_CERTIFICATE_THUMBPRINT }}
         run: yarn electron-builder --config --publish always
 
@@ -229,7 +227,6 @@ jobs:
           CSC_LINK: ${{ secrets.APPLE_CERTIFICATE }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           CSC_KEYCHAIN: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          CSC_FOR_PULL_REQUEST: true
           WINDOWS_CERTIFICATE_THUMBPRINT: ${{ secrets.WINDOWS_CERTIFICATE_THUMBPRINT }}
         run: yarn electron-builder --config --publish always
 

.github/workflows/cargo-test.yml

@@ -2,28 +2,8 @@ on:
   push:
     branches:
       - main
-    paths:
-      - 'src/wasm-lib/**.rs'
-      - 'src/wasm-lib/**.hbs'
-      - 'src/wasm-lib/**.gen'
-      - 'src/wasm-lib/**.snap'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - 'src/wasm-lib/**.kcl'
-      - .github/workflows/cargo-test.yml
 
   pull_request:
-    paths:
-      - 'src/wasm-lib/**.rs'
-      - 'src/wasm-lib/**.hbs'
-      - 'src/wasm-lib/**.gen'
-      - 'src/wasm-lib/**.snap'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - 'src/wasm-lib/**.kcl'
-      - .github/workflows/cargo-test.yml
   workflow_dispatch:
 permissions: read-all
 concurrency:
@@ -71,7 +51,7 @@ jobs:
           KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
           RUST_MIN_STACK: 10485760000
       - name: Upload to codecov.io
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           token: ${{secrets.CODECOV_TOKEN}}
           fail_ci_if_error: true

docs/kcl/KNOWN-ISSUES.md

@@ -22,3 +22,5 @@ once fixed in engine will just start working here with no language changes.
 
 - **Chamfers**: Chamfers cannot intersect, you will get an error. Only simple
     chamfer cases work currently.
+
+- **Appearance**: Changing the appearance on a loft does not work.

docs/kcl/index.md

@@ -19,6 +19,7 @@ layout: manual
 * [`angledLineThatIntersects`](kcl/angledLineThatIntersects)
 * [`angledLineToX`](kcl/angledLineToX)
 * [`angledLineToY`](kcl/angledLineToY)
+* [`appearance`](kcl/appearance)
 * [`arc`](kcl/arc)
 * [`arcTo`](kcl/arcTo)
 * [`asin`](kcl/asin)
@@ -29,6 +30,7 @@ layout: manual
 * [`assertLessThan`](kcl/assertLessThan)
 * [`assertLessThanOrEq`](kcl/assertLessThanOrEq)
 * [`atan`](kcl/atan)
+* [`atan2`](kcl/atan2)
 * [`bezierCurve`](kcl/bezierCurve)
 * [`ceil`](kcl/ceil)
 * [`chamfer`](kcl/chamfer)
@@ -101,6 +103,7 @@ layout: manual
 * [`startProfileAt`](kcl/startProfileAt)
 * [`startSketchAt`](kcl/startSketchAt)
 * [`startSketchOn`](kcl/startSketchOn)
+* [`sweep`](kcl/sweep)
 * [`tan`](kcl/tan)
 * [`tangentToEnd`](kcl/tangentToEnd)
 * [`tangentialArc`](kcl/tangentialArc)

docs/kcl/reduce.md

@@ -43,7 +43,7 @@ fn sum(arr) {
 
 /* The above is basically like this pseudo-code:
 fn sum(arr):
-    let sumSoFar = 0
+    sumSoFar = 0
     for i in arr:
         sumSoFar = add(sumSoFar, i)
     return sumSoFar */
@@ -96,14 +96,14 @@ fn decagon(radius) {
 
 /* The `decagon` above is basically like this pseudo-code:
 fn decagon(radius):
-    let stepAngle = (1/10) * tau()
+    stepAngle = (1/10) * tau()
-    let startOfDecagonSketch = startSketchAt([(cos(0)*radius), (sin(0) * radius)])
+    startOfDecagonSketch = startSketchAt([(cos(0)*radius), (sin(0) * radius)])
 
     // Here's the reduce part.
-    let partialDecagon = startOfDecagonSketch
+    partialDecagon = startOfDecagonSketch
     for i in [1..10]:
-        let x = cos(stepAngle * i) * radius
+        x = cos(stepAngle * i) * radius
-        let y = sin(stepAngle * i) * radius
+        y = sin(stepAngle * i) * radius
         partialDecagon = lineTo([x, y], partialDecagon)
     fullDecagon = partialDecagon // it's now full
     return fullDecagon */

docs/kcl/types/AppearanceData.md

@@ -0,0 +1,23 @@
+---
+title: "AppearanceData"
+excerpt: "Data for appearance."
+layout: manual
+---
+
+Data for appearance.
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `color` |`string`| Color of the new material, a hex string like "#ff0000". | No |
+| `metalness` |`number` (**maximum:** 100.0)| Metalness of the new material, a percentage like 95.7. | No |
+| `roughness` |`number` (**maximum:** 100.0)| Roughness of the new material, a percentage like 95.7. | No |
+
+

docs/kcl/types/KclNone.md

@@ -12,5 +12,10 @@ KCL value for an optional parameter which was not given an argument. (remember,
 
 
 
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `digest` |`[, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`, `integer`]`|  | No |
 
 

docs/kcl/types/Sketch.md

@@ -21,6 +21,7 @@ A sketch is a collection of paths.
 | `on` |[`SketchSurface`](/docs/kcl/types/SketchSurface)| What the sketch is on (can be a plane or a face). | No |
 | `start` |[`BasePath`](/docs/kcl/types/BasePath)| The starting path. | No |
 | `tags` |`object`| Tag identifiers that have been declared in this sketch. | No |
+| `originalId` |`string`| The original id of the sketch. This stays the same even if the sketch is sketched on face etc. | No |
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`| Metadata. | No |
 
 

docs/kcl/types/SketchSet.md

@@ -30,6 +30,7 @@ A sketch is a collection of paths.
 | `on` |[`SketchSurface`](/docs/kcl/types/SketchSurface)| What the sketch is on (can be a plane or a face). | No |
 | `start` |[`BasePath`](/docs/kcl/types/BasePath)| The starting path. | No |
 | `tags` |`object`| Tag identifiers that have been declared in this sketch. | No |
+| `originalId` |`string`| The original id of the sketch. This stays the same even if the sketch is sketched on face etc. | No |
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`| Metadata. | No |
 
 

docs/kcl/types/SweepData.md

@@ -0,0 +1,23 @@
+---
+title: "SweepData"
+excerpt: "Data for a sweep."
+layout: manual
+---
+
+Data for a sweep.
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `path` |[`Sketch`](/docs/kcl/types/Sketch)| The path to sweep along. | No |
+| `sectional` |`boolean`| If true, the sweep will be broken up into sub-sweeps (extrusions, revolves, sweeps) based on the trajectory path components. | No |
+| `tolerance` |`number`| Tolerance for the sweep operation. | No |
+
+

e2e/playwright/basic-sketch.spec.ts

@@ -57,23 +57,26 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   const startXPx = 600
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator).toContainText(
-  |> startProfileAt(${commonPoints.startAt}, %)`)
+      `sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)`
+    )
   }
   await page.waitForTimeout(500)
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
   await page.waitForTimeout(500)
 
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)
   |> xLine(${commonPoints.num1}, %)`)
   }
   await page.waitForTimeout(500)
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+      commonPoints.startAt
+    }, sketch001)
   |> xLine(${commonPoints.num1}, %)
   |> yLine(${commonPoints.num1 + 0.01}, %)`)
   } else {
@@ -82,8 +85,10 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   await page.waitForTimeout(200)
   await page.mouse.click(startXPx, 500 - PUR * 20)
   if (openPanes.includes('code')) {
-    await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+    await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+      commonPoints.startAt
+    }, sketch001)
   |> xLine(${commonPoints.num1}, %)
   |> yLine(${commonPoints.num1 + 0.01}, %)
   |> xLine(${commonPoints.num2 * -1}, %)`)
@@ -140,8 +145,10 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
 
   // Open the code pane.
   await u.openKclCodePanel()
-  await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
+  await expect(u.codeLocator)
-  |> startProfileAt(${commonPoints.startAt}, %)
+    .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
+    commonPoints.startAt
+  }, sketch001)
   |> xLine(${commonPoints.num1}, %, $seg01)
   |> yLine(${commonPoints.num1 + 0.01}, %)
   |> xLine(-segLen(seg01), %)`)

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

@@ -44,8 +44,7 @@ test.describe('Can create sketches on all planes and their back sides', () => {
       },
     }
 
-    const code = `sketch001 = startSketchOn('${plane}')
+    const code = `sketch001 = startSketchOn('${plane}')profile001 = startProfileAt([0.9, -1.22], sketch001)`
-    |> startProfileAt([0.9, -1.22], %)`
 
     await u.openDebugPanel()
 

e2e/playwright/editor-tests.spec.ts

@@ -94,6 +94,51 @@ test.describe('Editor tests', () => {
     |> close(%)`)
   })
 
+  test('ensure we use the cache, and do not re-execute', async ({ page }) => {
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.codeLocator.click()
+    await page.keyboard.type(`sketch001 = startSketchOn('XY')
+  |> startProfileAt([-10, -10], %)
+  |> line([20, 0], %)
+  |> line([0, 20], %)
+  |> line([-20, 0], %)
+  |> close(%)`)
+
+    // Ensure we execute the first time.
+    await u.openDebugPanel()
+    await expect(
+      page.locator('[data-receive-command-type="scene_clear_all"]')
+    ).toHaveCount(2)
+    await expect(
+      page.locator('[data-message-type="execution-done"]')
+    ).toHaveCount(2)
+
+    // Add whitespace to the end of the code.
+    await u.codeLocator.click()
+    await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('ArrowUp')
+    await page.keyboard.press('Home')
+    await page.keyboard.type('    ')
+    await page.keyboard.press('Enter')
+    await page.keyboard.type('    ')
+
+    // Ensure we don't execute the second time.
+    await u.openDebugPanel()
+    // Make sure we didn't clear the scene.
+    await expect(
+      page.locator('[data-message-type="execution-done"]')
+    ).toHaveCount(3)
+    await expect(
+      page.locator('[data-receive-command-type="scene_clear_all"]')
+    ).toHaveCount(2)
+  })
+
   test('if you click the format button it formats your code and executes so lints are still there', async ({
     page,
   }) => {

e2e/playwright/fixtures/sceneFixture.ts

@@ -11,6 +11,7 @@ import {
 
 type mouseParams = {
   pixelDiff?: number
+  shouldDbClick?: boolean
 }
 type mouseDragToParams = mouseParams & {
   fromPoint: { x: number; y: number }
@@ -75,11 +76,16 @@ export class SceneFixture {
         if (clickParams?.pixelDiff) {
           return doAndWaitForImageDiff(
             this.page,
-            () => this.page.mouse.click(x, y),
+            () =>
+              clickParams?.shouldDbClick
+                ? this.page.mouse.dblclick(x, y)
+                : this.page.mouse.click(x, y),
             clickParams.pixelDiff
           )
         }
-        return this.page.mouse.click(x, y)
+        return clickParams?.shouldDbClick
+          ? this.page.mouse.dblclick(x, y)
+          : this.page.mouse.click(x, y)
       },
       (moveParams?: mouseParams) => {
         if (moveParams?.pixelDiff) {
@@ -210,27 +216,11 @@ export class SceneFixture {
   }
 
   expectPixelColor = async (
-    colour: [number, number, number],
+    colour: [number, number, number] | [number, number, number][],
     coords: { x: number; y: number },
     diff: number
   ) => {
-    let finalValue = colour
+    await expectPixelColor(this.page, colour, coords, diff)
-    await expect
-      .poll(async () => {
-        const pixel = (await getPixelRGBs(this.page)(coords, 1))[0]
-        if (!pixel) return null
-        finalValue = pixel
-        return pixel.every(
-          (channel, index) => Math.abs(channel - colour[index]) < diff
-        )
-      })
-      .toBeTruthy()
-      .catch((cause) => {
-        throw new Error(
-          `ExpectPixelColor: expecting ${colour} got ${finalValue}`,
-          { cause }
-        )
-      })
   }
 
   get gizmo() {
@@ -246,3 +236,42 @@ export class SceneFixture {
     await buttonToTest.click()
   }
 }
+
+function isColourArray(
+  colour: [number, number, number] | [number, number, number][]
+): colour is [number, number, number][] {
+  return Array.isArray(colour[0])
+}
+
+export async function expectPixelColor(
+  page: Page,
+  colour: [number, number, number] | [number, number, number][],
+  coords: { x: number; y: number },
+  diff: number
+) {
+  let finalValue = colour
+  await expect
+    .poll(
+      async () => {
+        const pixel = (await getPixelRGBs(page)(coords, 1))[0]
+        if (!pixel) return null
+        finalValue = pixel
+        if (!isColourArray(colour)) {
+          return pixel.every(
+            (channel, index) => Math.abs(channel - colour[index]) < diff
+          )
+        }
+        return colour.some((c) =>
+          c.every((channel, index) => Math.abs(pixel[index] - channel) < diff)
+        )
+      },
+      { timeout: 10_000 }
+    )
+    .toBeTruthy()
+    .catch((cause) => {
+      throw new Error(
+        `ExpectPixelColor: expecting ${colour} got ${finalValue}`,
+        { cause }
+      )
+    })
+}

e2e/playwright/fixtures/toolbarFixture.ts

@@ -11,7 +11,10 @@ export class ToolbarFixture {
   offsetPlaneButton!: Locator
   startSketchBtn!: Locator
   lineBtn!: Locator
+  tangentialArcBtn!: Locator
+  circleBtn!: Locator
   rectangleBtn!: Locator
+  lengthConstraintBtn!: Locator
   exitSketchBtn!: Locator
   editSketchBtn!: Locator
   fileTreeBtn!: Locator
@@ -33,7 +36,10 @@ export class ToolbarFixture {
     this.offsetPlaneButton = page.getByTestId('plane-offset')
     this.startSketchBtn = page.getByTestId('sketch')
     this.lineBtn = page.getByTestId('line')
+    this.tangentialArcBtn = page.getByTestId('tangential-arc')
+    this.circleBtn = page.getByTestId('circle-center')
     this.rectangleBtn = page.getByTestId('corner-rectangle')
+    this.lengthConstraintBtn = page.getByTestId('constraint-length')
     this.exitSketchBtn = page.getByTestId('sketch-exit')
     this.editSketchBtn = page.getByText('Edit Sketch')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
@@ -91,4 +97,13 @@ export class ToolbarFixture {
       await expect(this.exeIndicator).toBeVisible({ timeout: 15_000 })
     }
   }
+  selectCenterRectangle = async () => {
+    await this.page
+      .getByRole('button', { name: 'caret down Corner rectangle:' })
+      .click()
+    await expect(
+      this.page.getByTestId('dropdown-center-rectangle')
+    ).toBeVisible()
+    await this.page.getByTestId('dropdown-center-rectangle').click()
+  }
 }

e2e/playwright/onboarding-tests.spec.ts

@@ -19,6 +19,7 @@ import {
   TEST_SETTINGS_ONBOARDING_USER_MENU,
 } from './storageStates'
 import * as TOML from '@iarna/toml'
+import { expectPixelColor } from './fixtures/sceneFixture'
 
 test.beforeEach(async ({ context, page }, testInfo) => {
   if (testInfo.tags.includes('@electron')) {
@@ -45,7 +46,7 @@ test.describe('Onboarding tests', () => {
       { settingsKey: TEST_SETTINGS_KEY }
     )
 
-    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.setViewportSize({ width: 1200, height: 1000 })
 
     await u.waitForAuthSkipAppStart()
 
@@ -54,6 +55,12 @@ test.describe('Onboarding tests', () => {
 
     // *and* that the code is shown in the editor
     await expect(page.locator('.cm-content')).toContainText('// Shelf Bracket')
+
+    // Make sure the model loaded
+    const XYPlanePoint = { x: 774, y: 116 } as const
+    const modelColor: [number, number, number] = [45, 45, 45]
+    await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
+    expect(await u.getGreatestPixDiff(XYPlanePoint, modelColor)).toBeLessThan(8)
   })
 
   test(
@@ -72,7 +79,7 @@ test.describe('Onboarding tests', () => {
 
       const u = await getUtils(page)
 
-      const viewportSize = { width: 1200, height: 500 }
+      const viewportSize = { width: 1200, height: 1000 }
       await page.setViewportSize(viewportSize)
 
       await test.step(`Create a project and open to the onboarding`, async () => {
@@ -92,6 +99,14 @@ test.describe('Onboarding tests', () => {
         await expect(page.locator('.cm-content')).toContainText(
           '// Shelf Bracket'
         )
+
+        // TODO: jess make less shit
+        // Make sure the model loaded
+        //const XYPlanePoint = { x: 986, y: 522 } as const
+        //const modelColor: [number, number, number] = [76, 76, 76]
+        //await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
+
+        //await expectPixelColor(page, modelColor, XYPlanePoint, 8)
       })
 
       await electronApp.close()
@@ -108,7 +123,7 @@ test.describe('Onboarding tests', () => {
     }, initialCode)
 
     const u = await getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.setViewportSize({ width: 1200, height: 1000 })
     await u.waitForAuthSkipAppStart()
 
     // Replay the onboarding
@@ -140,6 +155,12 @@ test.describe('Onboarding tests', () => {
         return localStorage.getItem('persistCode')
       })
     ).toContain('// Shelf Bracket')
+
+    // Make sure the model loaded
+    const XYPlanePoint = { x: 986, y: 522 } as const
+    const modelColor: [number, number, number] = [76, 76, 76]
+    await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
+    await expectPixelColor(page, modelColor, XYPlanePoint, 8)
   })
 
   test('Click through each onboarding step', async ({ page }) => {
@@ -179,6 +200,17 @@ test.describe('Onboarding tests', () => {
     // Test that the onboarding pane is gone
     await expect(page.getByTestId('onboarding-content')).not.toBeVisible()
     await expect(page.url()).not.toContain('onboarding')
+
+    await u.openAndClearDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    // TODO: jess to fix
+    // Make sure the model loaded
+    //const XYPlanePoint = { x: 774, y: 516 } as const
+    // const modelColor: [number, number, number] = [129, 129, 129]
+    // await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
+    // await expectPixelColor(page, modelColor, XYPlanePoint, 20)
   })
 
   test('Onboarding redirects and code updating', async ({ page }) => {
@@ -439,7 +471,7 @@ test(
     })
 
     await test.step('Navigate into project', async () => {
-      await page.setViewportSize({ width: 1200, height: 500 })
+      await page.setViewportSize({ width: 1200, height: 1000 })
 
       page.on('console', console.log)
 
@@ -462,7 +494,15 @@ test(
     await test.step('Confirm that the onboarding has restarted', async () => {
       await expect(tutorialProjectIndicator).toBeVisible()
       await expect(tutorialModalText).toBeVisible()
+      // Make sure the model loaded
+      const XYPlanePoint = { x: 988, y: 523 } as const
+      const modelColor: [number, number, number] = [76, 76, 76]
+
+      await page.mouse.move(XYPlanePoint.x, XYPlanePoint.y)
+      await expectPixelColor(page, modelColor, XYPlanePoint, 8)
       await tutorialDismissButton.click()
+      // Make sure model still there.
+      await expectPixelColor(page, modelColor, XYPlanePoint, 8)
     })
 
     await test.step('Clear code and restart onboarding from settings', async () => {

e2e/playwright/point-click.spec.ts

@@ -135,7 +135,9 @@ test.describe('verify sketch on chamfer works', () => {
           pixelDiff: 50,
         })
         await rectangle2ndClick()
-        await editor.expectEditor.toContain(afterRectangle2ndClickSnippet)
+        await editor.expectEditor.toContain(afterRectangle2ndClickSnippet, {
+          shouldNormalise: true,
+        })
       })
 
       await test.step('Clean up so that `_sketchOnAChamfer` util can be called again', async () => {
@@ -177,18 +179,13 @@ test.describe('verify sketch on chamfer works', () => {
 
         afterChamferSelectSnippet:
           'sketch002 = startSketchOn(extrude001, seg03)',
-        afterRectangle1stClickSnippet: 'startProfileAt([205.96, 254.59], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.39], %, $rectangleSegmentA002)
+          'startProfileAt([205.96, 254.59], sketch002)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.39],%,$rectangleSegmentA002)
-         segAng(rectangleSegmentA002) - 90,
+        |>angledLine([segAng(rectangleSegmentA002)-90,105.26],%)
-         105.26
+        |>angledLine([segAng(rectangleSegmentA002),-segLen(rectangleSegmentA002)],%)
-       ], %, $rectangleSegmentB001)
+        |>lineTo([profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA002),
-         -segLen(rectangleSegmentA002)
-       ], %, $rectangleSegmentC001)
-    |> lineTo([profileStartX(%), profileStartY(%)], %)
-    |> close(%)`,
       })
 
       await sketchOnAChamfer({
@@ -209,19 +206,15 @@ test.describe('verify sketch on chamfer works', () => {
 
         afterChamferSelectSnippet:
           'sketch003 = startSketchOn(extrude001, seg04)',
-        afterRectangle1stClickSnippet: 'startProfileAt([-209.64, 255.28], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.56], %, $rectangleSegmentA003)
+          'startProfileAt([-209.64, 255.28], sketch003)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.56],%,$rectangleSegmentA003)
-         segAng(rectangleSegmentA003) - 90,
+        |>angledLine([segAng(rectangleSegmentA003)-90,106.84],%)
-         106.84
+        |>angledLine([segAng(rectangleSegmentA003),-segLen(rectangleSegmentA003)],%)
-       ], %, $rectangleSegmentB002)
+        |>lineTo([profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA003),
-         -segLen(rectangleSegmentA003)
-       ], %, $rectangleSegmentC002)
-    |> lineTo([profileStartX(%), profileStartY(%)], %)
-    |> close(%)`,
       })
+
       await sketchOnAChamfer({
         clickCoords: { x: 677, y: 87 },
         cameraPos: { x: -6200, y: 1500, z: 6200 },
@@ -234,19 +227,14 @@ test.describe('verify sketch on chamfer works', () => {
          ]
        }, %)`,
         afterChamferSelectSnippet:
-          'sketch003 = startSketchOn(extrude001, seg04)',
+          'sketch004 = startSketchOn(extrude001, seg05)',
-        afterRectangle1stClickSnippet: 'startProfileAt([-209.64, 255.28], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.56], %, $rectangleSegmentA003)
+          'startProfileAt([82.57, 322.96], sketch004)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.16],%,$rectangleSegmentA004)
-         segAng(rectangleSegmentA003) - 90,
+        |>angledLine([segAng(rectangleSegmentA004)-90,103.07],%)
-         106.84
+        |>angledLine([segAng(rectangleSegmentA004),-segLen(rectangleSegmentA004)],%)
-       ], %, $rectangleSegmentB002)
+        |>lineTo([profileStartX(%),profileStartY(%)],%)|
-    |> angledLine([
+        >close(%)`,
-         segAng(rectangleSegmentA003),
-         -segLen(rectangleSegmentA003)
-       ], %, $rectangleSegmentC002)
-    |> lineTo([profileStartX(%), profileStartY(%)], %)
-    |> close(%)`,
       })
       /// last one
       await sketchOnAChamfer({
@@ -259,104 +247,97 @@ test.describe('verify sketch on chamfer works', () => {
        }, %)`,
         afterChamferSelectSnippet:
           'sketch005 = startSketchOn(extrude001, seg06)',
-        afterRectangle1stClickSnippet: 'startProfileAt([-23.43, 19.69], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 9.1], %, $rectangleSegmentA005)
+          'startProfileAt([-23.43, 19.69], sketch005)',
-
+        afterRectangle2ndClickSnippet: `angledLine([0,9.1],%,$rectangleSegmentA005)
-    |> angledLine([
+        |>angledLine([segAng(rectangleSegmentA005)-90,84.07],%)
-         segAng(rectangleSegmentA005) - 90,
+        |>angledLine([segAng(rectangleSegmentA005),-segLen(rectangleSegmentA005)],%)
-         84.07
+        |>lineTo([profileStartX(%),profileStartY(%)],%)
-       ], %, $rectangleSegmentB004)
+        |>close(%)`,
-    |> angledLine([
-         segAng(rectangleSegmentA005),
-         -segLen(rectangleSegmentA005)
-       ], %, $rectangleSegmentC004)
-    |> lineTo([profileStartX(%), profileStartY(%)], %)
-    |> close(%)`,
       })
 
       await test.step('verify at the end of the test that final code is what is expected', async () => {
         await editor.expectEditor.toContain(
           `sketch001 = startSketchOn('XZ')
-
+  |> startProfileAt([75.8, 317.2], %) // [$startCapTag, $EndCapTag]
-      |> startProfileAt([75.8, 317.2], %) // [$startCapTag, $EndCapTag]
+  |> angledLine([0, 268.43], %, $rectangleSegmentA001)
-      |> angledLine([0, 268.43], %, $rectangleSegmentA001)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
-           segAng(rectangleSegmentA001) - 90,
+       217.26
-           217.26
+     ], %, $seg01)
-         ], %, $seg01)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA001),
-           segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
-           -segLen(rectangleSegmentA001)
+     ], %, $yo)
-         ], %, $yo)
+  |> lineTo([profileStartX(%), profileStartY(%)], %, $seg02)
-      |> lineTo([profileStartX(%), profileStartY(%)], %, $seg02)
+  |> close(%)
-      |> close(%)
+extrude001 = extrude(100, sketch001)
-    extrude001 = extrude(100, sketch001)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getOppositeEdge(seg01)]
-           tags = [getOppositeEdge(seg01)]
+     }, %, $seg03)
-         }, %, $seg03)
+  |> chamfer({ length = 30, tags = [seg01] }, %, $seg04)
-      |> chamfer({ length = 30, tags = [seg01] }, %, $seg04)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getNextAdjacentEdge(seg02)]
-           tags = [getNextAdjacentEdge(seg02)]
+     }, %, $seg05)
-         }, %, $seg05)
+  |> chamfer({
-      |> chamfer({
+       length = 30,
-           length = 30,
+       tags = [getNextAdjacentEdge(yo)]
-           tags = [getNextAdjacentEdge(yo)]
+     }, %, $seg06)
-         }, %, $seg06)
+sketch005 = startSketchOn(extrude001, seg06)
-    sketch005 = startSketchOn(extrude001, seg06)
+profile004 = startProfileAt([-23.43, 19.69], sketch005)
-      |> startProfileAt([-23.43, 19.69], %)
+  |> angledLine([0, 9.1], %, $rectangleSegmentA005)
-      |> angledLine([0, 9.1], %, $rectangleSegmentA005)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA005) - 90,
-           segAng(rectangleSegmentA005) - 90,
+       84.07
-           84.07
+     ], %)
-         ], %, $rectangleSegmentB004)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA005),
-           segAng(rectangleSegmentA005),
+       -segLen(rectangleSegmentA005)
-           -segLen(rectangleSegmentA005)
+     ], %)
-         ], %, $rectangleSegmentC004)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
-      |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
-      |> close(%)
+sketch004 = startSketchOn(extrude001, seg05)
-    sketch004 = startSketchOn(extrude001, seg05)
+profile003 = startProfileAt([82.57, 322.96], sketch004)
-      |> startProfileAt([82.57, 322.96], %)
+  |> angledLine([0, 11.16], %, $rectangleSegmentA004)
-      |> angledLine([0, 11.16], %, $rectangleSegmentA004)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA004) - 90,
-           segAng(rectangleSegmentA004) - 90,
+       103.07
-           103.07
+     ], %)
-         ], %, $rectangleSegmentB003)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA004),
-           segAng(rectangleSegmentA004),
+       -segLen(rectangleSegmentA004)
-           -segLen(rectangleSegmentA004)
+     ], %)
-         ], %, $rectangleSegmentC003)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
-      |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
-      |> close(%)
+sketch003 = startSketchOn(extrude001, seg04)
-    sketch003 = startSketchOn(extrude001, seg04)
+profile002 = startProfileAt([-209.64, 255.28], sketch003)
-      |> startProfileAt([-209.64, 255.28], %)
+  |> angledLine([0, 11.56], %, $rectangleSegmentA003)
-      |> angledLine([0, 11.56], %, $rectangleSegmentA003)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA003) - 90,
-           segAng(rectangleSegmentA003) - 90,
+       106.84
-           106.84
+     ], %)
-         ], %, $rectangleSegmentB002)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA003),
-           segAng(rectangleSegmentA003),
+       -segLen(rectangleSegmentA003)
-           -segLen(rectangleSegmentA003)
+     ], %)
-         ], %, $rectangleSegmentC002)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
-      |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
-      |> close(%)
+sketch002 = startSketchOn(extrude001, seg03)
-    sketch002 = startSketchOn(extrude001, seg03)
+profile001 = startProfileAt([205.96, 254.59], sketch002)
-      |> startProfileAt([205.96, 254.59], %)
+  |> angledLine([0, 11.39], %, $rectangleSegmentA002)
-      |> angledLine([0, 11.39], %, $rectangleSegmentA002)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA002) - 90,
-           segAng(rectangleSegmentA002) - 90,
+       105.26
-           105.26
+     ], %)
-         ], %, $rectangleSegmentB001)
+  |> angledLine([
-      |> angledLine([
+       segAng(rectangleSegmentA002),
-           segAng(rectangleSegmentA002),
+       -segLen(rectangleSegmentA002)
-           -segLen(rectangleSegmentA002)
+     ], %)
-         ], %, $rectangleSegmentC001)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
-      |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
-      |> close(%)
+`,
-    `,
           { shouldNormalise: true }
         )
       })
@@ -392,18 +373,13 @@ test.describe('verify sketch on chamfer works', () => {
         beforeChamferSnippetEnd: '}, extrude001)',
         afterChamferSelectSnippet:
           'sketch002 = startSketchOn(extrude001, seg03)',
-        afterRectangle1stClickSnippet: 'startProfileAt([205.96, 254.59], %)',
+        afterRectangle1stClickSnippet:
-        afterRectangle2ndClickSnippet: `angledLine([0, 11.39], %, $rectangleSegmentA002)
+          'startProfileAt([205.96, 254.59], sketch002)',
-    |> angledLine([
+        afterRectangle2ndClickSnippet: `angledLine([0,11.39],%,$rectangleSegmentA002)
-         segAng(rectangleSegmentA002) - 90,
+        |>angledLine([segAng(rectangleSegmentA002)-90,105.26],%)
-         105.26
+        |>angledLine([segAng(rectangleSegmentA002),-segLen(rectangleSegmentA002)],%)
-       ], %, $rectangleSegmentB001)
+        |>lineTo([profileStartX(%),profileStartY(%)],%)
-    |> angledLine([
+        |>close(%)`,
-         segAng(rectangleSegmentA002),
-         -segLen(rectangleSegmentA002)
-       ], %, $rectangleSegmentC001)
-    |> lineTo([profileStartX(%), profileStartY(%)], %)
-    |> close(%)`,
       })
       await editor.expectEditor.toContain(
         `sketch001 = startSketchOn('XZ')
@@ -433,16 +409,16 @@ chamf = chamfer({
        ]
      }, %)
 sketch002 = startSketchOn(extrude001, seg03)
-  |> startProfileAt([205.96, 254.59], %)
+profile001 = startProfileAt([205.96, 254.59], sketch002)
   |> angledLine([0, 11.39], %, $rectangleSegmentA002)
   |> angledLine([
        segAng(rectangleSegmentA002) - 90,
        105.26
-     ], %, $rectangleSegmentB001)
+     ], %)
   |> angledLine([
        segAng(rectangleSegmentA002),
        -segLen(rectangleSegmentA002)
-     ], %, $rectangleSegmentC001)
+     ], %)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
   |> close(%)
 `,
@@ -504,10 +480,10 @@ test(`Verify axis, origin, and horizontal snapping`, async ({
 
   const expectedCodeSnippets = {
     sketchOnXzPlane: `sketch001 = startSketchOn('XZ')`,
-    pointAtOrigin: `startProfileAt([${originSloppy.kcl[0]}, ${originSloppy.kcl[1]}], %)`,
+    pointAtOrigin: `startProfileAt([${originSloppy.kcl[0]}, ${originSloppy.kcl[1]}], sketch001)`,
     segmentOnXAxis: `xLine(${xAxisSloppy.kcl[0]}, %)`,
-    afterSegmentDraggedOffYAxis: `startProfileAt([${offYAxis.kcl[0]}, ${offYAxis.kcl[1]}], %)`,
+    afterSegmentDraggedOffYAxis: `startProfileAt([${offYAxis.kcl[0]}, ${offYAxis.kcl[1]}], sketch001)`,
-    afterSegmentDraggedOnYAxis: `startProfileAt([${yAxisSloppy.kcl[0]}, ${yAxisSloppy.kcl[1]}], %)`,
+    afterSegmentDraggedOnYAxis: `startProfileAt([${yAxisSloppy.kcl[0]}, ${yAxisSloppy.kcl[1]}], sketch001)`,
   }
 
   await app.initialise()

e2e/playwright/snapshot-tests.spec.ts

@@ -446,8 +446,7 @@ test(
 
     const startXPx = 600
     await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    code += `
+    code += `profile001 = startProfileAt([7.19, -9.7], sketch001)`
-  |> startProfileAt([7.19, -9.7], %)`
     await expect(page.locator('.cm-content')).toHaveText(code)
     await page.waitForTimeout(100)
 
@@ -469,6 +468,10 @@ test(
       .getByRole('button', { name: 'arc Tangential Arc', exact: true })
       .click()
 
+    // click to continue profile
+    await page.mouse.move(813, 392, { steps: 10 })
+    await page.waitForTimeout(100)
+
     await page.mouse.move(startXPx + PUR * 30, 500 - PUR * 20, { steps: 10 })
 
     await page.waitForTimeout(1000)
@@ -591,8 +594,7 @@ test(
       mask: [page.getByTestId('model-state-indicator')],
     })
     await expect(page.locator('.cm-content')).toHaveText(
-      `sketch001 = startSketchOn('XZ')
+      `sketch001 = startSketchOn('XZ')profile001 = circle({ center = [14.44, -2.44], radius = 1 }, sketch001)`
-  |> circle({ center = [14.44, -2.44], radius = 1 }, %)`
     )
   }
 )
@@ -636,8 +638,7 @@ test.describe(
 
       const startXPx = 600
       await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-      code += `
+      code += `profile001 = startProfileAt([7.19, -9.7], sketch001)`
-  |> startProfileAt([7.19, -9.7], %)`
       await expect(u.codeLocator).toHaveText(code)
       await page.waitForTimeout(100)
 
@@ -655,6 +656,10 @@ test.describe(
         .click()
       await page.waitForTimeout(100)
 
+      // click to continue profile
+      await page.mouse.click(813, 392)
+      await page.waitForTimeout(100)
+
       await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
 
       code += `
@@ -741,8 +746,7 @@ test.describe(
 
       const startXPx = 600
       await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-      code += `
+      code += `profile001 = startProfileAt([182.59, -246.32], sketch001)`
-  |> startProfileAt([182.59, -246.32], %)`
       await expect(u.codeLocator).toHaveText(code)
       await page.waitForTimeout(100)
 
@@ -760,6 +764,10 @@ test.describe(
         .click()
       await page.waitForTimeout(100)
 
+      // click to continue profile
+      await page.mouse.click(813, 392)
+      await page.waitForTimeout(100)
+
       await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
 
       code += `
@@ -950,7 +958,75 @@ test(
 
 test.describe('Grid visibility', { tag: '@snapshot' }, () => {
   // FIXME: Skip on macos its being weird.
-  test.skip(process.platform === 'darwin', 'Skip on macos')
+  // test.skip(process.platform === 'darwin', 'Skip on macos')
+
+  test('Grid turned off to on via command bar', async ({ page }) => {
+    const u = await getUtils(page)
+    const stream = page.getByTestId('stream')
+    const mask = [
+      page.locator('#app-header'),
+      page.locator('#sidebar-top-ribbon'),
+      page.locator('#sidebar-bottom-ribbon'),
+    ]
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.goto('/')
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    // wait for execution done
+    await expect(
+      page.locator('[data-message-type="execution-done"]')
+    ).toHaveCount(1)
+    await u.closeDebugPanel()
+    await u.closeKclCodePanel()
+    // TODO: Find a way to truly know that the objects have finished
+    // rendering, because an execution-done message is not sufficient.
+    await page.waitForTimeout(1000)
+
+    // Open the command bar.
+    await page
+      .getByRole('button', { name: 'Commands', exact: false })
+      .or(page.getByRole('button', { name: '⌘K' }))
+      .click()
+    const commandName = 'show scale grid'
+    const commandOption = page.getByRole('option', {
+      name: commandName,
+      exact: false,
+    })
+    const cmdSearchBar = page.getByPlaceholder('Search commands')
+    // This selector changes after we set the setting
+    await cmdSearchBar.fill(commandName)
+    await expect(commandOption).toBeVisible()
+    await commandOption.click()
+
+    const toggleInput = page.getByPlaceholder('Off')
+    await expect(toggleInput).toBeVisible()
+    await expect(toggleInput).toBeFocused()
+
+    // Select On
+    await page.keyboard.press('ArrowDown')
+    await expect(page.getByRole('option', { name: 'Off' })).toHaveAttribute(
+      'data-headlessui-state',
+      'active selected'
+    )
+    await page.keyboard.press('ArrowUp')
+    await expect(page.getByRole('option', { name: 'On' })).toHaveAttribute(
+      'data-headlessui-state',
+      'active'
+    )
+    await page.keyboard.press('Enter')
+
+    // Check the toast appeared
+    await expect(
+      page.getByText(`Set show scale grid to "true" as a user default`)
+    ).toBeVisible()
+
+    await expect(stream).toHaveScreenshot({
+      maxDiffPixels: 100,
+      mask,
+    })
+  })
 
   test('Grid turned off', async ({ page }) => {
     const u = await getUtils(page)
@@ -1096,3 +1172,109 @@ test.fixme('theme persists', async ({ page, context }) => {
     maxDiffPixels: 100,
   })
 })
+
+test.describe('code color goober', { tag: '@snapshot' }, () => {
+  test('code color goober', async ({ page, context }) => {
+    const u = await getUtils(page)
+    await context.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `// Create a pipe using a sweep.
+
+// Create a path for the sweep.
+sweepPath = startSketchOn('XZ')
+  |> startProfileAt([0.05, 0.05], %)
+  |> line([0, 7], %)
+  |> tangentialArc({ offset = 90, radius = 5 }, %)
+  |> line([-3, 0], %)
+  |> tangentialArc({ offset = -90, radius = 5 }, %)
+  |> line([0, 7], %)
+
+sweepSketch = startSketchOn('XY')
+  |> startProfileAt([2, 0], %)
+  |> arc({
+       angleEnd = 360,
+       angleStart = 0,
+       radius = 2
+     }, %)
+  |> sweep({
+    path = sweepPath,
+  }, %)
+  |> appearance({
+       color = "#bb00ff",
+       metalness = 90,
+       roughness = 90
+     }, %)
+`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 1000 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.clearAndCloseDebugPanel()
+
+    await expect(page, 'expect small color widget').toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+  })
+
+  test('code color goober opening window', async ({ page, context }) => {
+    const u = await getUtils(page)
+    await context.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `// Create a pipe using a sweep.
+
+// Create a path for the sweep.
+sweepPath = startSketchOn('XZ')
+  |> startProfileAt([0.05, 0.05], %)
+  |> line([0, 7], %)
+  |> tangentialArc({ offset = 90, radius = 5 }, %)
+  |> line([-3, 0], %)
+  |> tangentialArc({ offset = -90, radius = 5 }, %)
+  |> line([0, 7], %)
+
+sweepSketch = startSketchOn('XY')
+  |> startProfileAt([2, 0], %)
+  |> arc({
+       angleEnd = 360,
+       angleStart = 0,
+       radius = 2
+     }, %)
+  |> sweep({
+    path = sweepPath,
+  }, %)
+  |> appearance({
+       color = "#bb00ff",
+       metalness = 90,
+       roughness = 90
+     }, %)
+`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 1000 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.clearAndCloseDebugPanel()
+
+    await expect(page.locator('.cm-css-color-picker-wrapper')).toBeVisible()
+
+    // Click the color widget
+    await page.locator('.cm-css-color-picker-wrapper input').click()
+
+    await expect(
+      page,
+      'expect small color widget to have window open'
+    ).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+  })
+})

e2e/playwright/storageStates.ts

@@ -14,7 +14,7 @@ export const TEST_SETTINGS = {
   },
   modeling: {
     defaultUnit: 'in',
-    mouseControls: 'KittyCAD',
+    mouseControls: 'Zoo',
     cameraProjection: 'perspective',
     showDebugPanel: true,
   },

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

@@ -1,6 +1,8 @@
 import { test, expect } from '@playwright/test'
 
 import { commonPoints, getUtils, setup, tearDown } from './test-utils'
+import { uuidv4 } from 'lib/utils'
+import { EngineCommand } from 'lang/std/artifactGraph'
 
 test.beforeEach(async ({ context, page }, testInfo) => {
   await setup(context, page, testInfo)
@@ -130,17 +132,16 @@ test.describe('Test network and connection issues', () => {
 
     const startXPx = 600
     await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    await expect(page.locator('.cm-content'))
+    await expect(page.locator('.cm-content')).toHaveText(
-      .toHaveText(`sketch001 = startSketchOn('XZ')
+      `sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)`
-    |> startProfileAt(${commonPoints.startAt}, %)`)
+    )
     await page.waitForTimeout(100)
 
     await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
     await page.waitForTimeout(100)
 
     await expect(page.locator('.cm-content'))
-      .toHaveText(`sketch001 = startSketchOn('XZ')
+      .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)
-    |> startProfileAt(${commonPoints.startAt}, %)
     |> xLine(${commonPoints.num1}, %)`)
 
     // Expect the network to be up
@@ -188,7 +189,9 @@ test.describe('Test network and connection issues', () => {
     await page.mouse.click(100, 100)
 
     // select a line
-    await page.getByText(`startProfileAt(${commonPoints.startAt}, %)`).click()
+    await page
+      .getByText(`startProfileAt(${commonPoints.startAt}, sketch001)`)
+      .click()
 
     // enter sketch again
     await u.doAndWaitForCmd(
@@ -202,11 +205,36 @@ test.describe('Test network and connection issues', () => {
 
     await page.waitForTimeout(150)
 
+    const camCommand: EngineCommand = {
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        center: { x: 109, y: 0, z: -152 },
+        vantage: { x: 115, y: -505, z: -152 },
+        up: { x: 0, y: 0, z: 1 },
+      },
+    }
+    const updateCamCommand: EngineCommand = {
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_get_settings',
+      },
+    }
+    await u.sendCustomCmd(camCommand)
+    await page.waitForTimeout(100)
+    await u.sendCustomCmd(updateCamCommand)
+    await page.waitForTimeout(100)
+
+    // click to continue profile
+    await page.mouse.click(1007, 400)
+    await page.waitForTimeout(100)
     // Ensure we can continue sketching
     await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
     await expect.poll(u.normalisedEditorCode)
       .toBe(`sketch001 = startSketchOn('XZ')
-  |> startProfileAt([12.34, -12.34], %)
+profile001 = startProfileAt([12.34, -12.34], sketch001)
   |> xLine(12.34, %)
   |> line([-12.34, 12.34], %)
 
@@ -216,7 +244,7 @@ test.describe('Test network and connection issues', () => {
 
     await expect.poll(u.normalisedEditorCode)
       .toBe(`sketch001 = startSketchOn('XZ')
-  |> startProfileAt([12.34, -12.34], %)
+profile001 = startProfileAt([12.34, -12.34], sketch001)
   |> xLine(12.34, %)
   |> line([-12.34, 12.34], %)
   |> xLine(-12.34, %)

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

@@ -479,4 +479,26 @@ test.describe('Testing Camera Movement', () => {
       })
     }
   })
+
+  test('Right-click opens context menu when not dragged', async ({ page }) => {
+    const u = await getUtils(page)
+    await u.waitForAuthSkipAppStart()
+
+    await test.step(`The menu should not show if we drag the mouse`, async () => {
+      await page.mouse.move(900, 200)
+      await page.mouse.down({ button: 'right' })
+      await page.mouse.move(900, 300)
+      await page.mouse.up({ button: 'right' })
+
+      await expect(page.getByTestId('view-controls-menu')).not.toBeVisible()
+    })
+
+    await test.step(`The menu should show if we don't drag the mouse`, async () => {
+      await page.mouse.move(900, 200)
+      await page.mouse.down({ button: 'right' })
+      await page.mouse.up({ button: 'right' })
+
+      await expect(page.getByTestId('view-controls-menu')).toBeVisible()
+    })
+  })
 })

e2e/playwright/testing-constraints.spec.ts

@@ -17,11 +17,11 @@ test.describe('Testing constraints', () => {
       localStorage.setItem(
         'persistCode',
         `sketch001 = startSketchOn('XY')
-    |> startProfileAt([-10, -10], %)
+  |> startProfileAt([-10, -10], %)
-    |> line([20, 0], %)
+  |> line([20, 0], %)
-    |> line([0, 20], %)
+  |> line([0, 20], %)
-    |> xLine(-20, %)
+  |> xLine(-20, %)
-  `
+`
       )
     })
 

e2e/playwright/testing-selections.spec.ts

@@ -77,30 +77,31 @@ test.describe('Testing selections', () => {
       const startXPx = 600
       await u.closeDebugPanel()
       await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-      await expect(page.locator('.cm-content'))
+      await expect(page.locator('.cm-content')).toHaveText(
-        .toHaveText(`sketch001 = startSketchOn('XZ')
+        `sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)`
-    |> startProfileAt(${commonPoints.startAt}, %)`)
+      )
 
       await page.waitForTimeout(100)
       await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
 
       await expect(page.locator('.cm-content'))
-        .toHaveText(`sketch001 = startSketchOn('XZ')
+        .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${commonPoints.startAt}, sketch001)
-    |> startProfileAt(${commonPoints.startAt}, %)
     |> xLine(${commonPoints.num1}, %)`)
 
       await page.waitForTimeout(100)
       await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
       await expect(page.locator('.cm-content'))
-        .toHaveText(`sketch001 = startSketchOn('XZ')
+        .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
-    |> startProfileAt(${commonPoints.startAt}, %)
+        commonPoints.startAt
+      }, sketch001)
     |> xLine(${commonPoints.num1}, %)
     |> yLine(${commonPoints.num1 + 0.01}, %)`)
       await page.waitForTimeout(100)
       await page.mouse.click(startXPx, 500 - PUR * 20)
       await expect(page.locator('.cm-content'))
-        .toHaveText(`sketch001 = startSketchOn('XZ')
+        .toHaveText(`sketch001 = startSketchOn('XZ')profile001 = startProfileAt(${
-    |> startProfileAt(${commonPoints.startAt}, %)
+        commonPoints.startAt
+      }, sketch001)
     |> xLine(${commonPoints.num1}, %)
     |> yLine(${commonPoints.num1 + 0.01}, %)
     |> xLine(${commonPoints.num2 * -1}, %)`)
@@ -330,6 +331,28 @@ part009 = startSketchOn('XY')
   |> angledLineToX({ angle = 60, to = pipeLargeDia }, %)
   |> close(%)
 rev = revolve({ axis = 'y' }, part009)
+sketch006 = startSketchOn('XY')
+profile001 = circle({
+  center = [42.91, -70.42],
+  radius = 17.96
+}, sketch006)
+profile002 = startProfileAt([86.92, -63.81], sketch006)
+  |> angledLine([0, 63.81], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
+       17.05
+     ], %)
+  |> angledLine([
+       segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
+     ], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+profile003 = startProfileAt([40.16, -120.48], sketch006)
+  |> line([26.95, 24.21], %)
+  |> line([20.91, -28.61], %)
+  |> line([32.46, 18.71], %)
+
 `
       )
     }, KCL_DEFAULT_LENGTH)
@@ -362,9 +385,10 @@ rev = revolve({ axis = 'y' }, part009)
     })
     await page.waitForTimeout(100)
 
-    const revolve = { x: 646, y: 248 }
+    const revolve = { x: 635, y: 253 }
     const parentExtrude = { x: 915, y: 133 }
     const solid2d = { x: 770, y: 167 }
+    const individualProfile = { x: 694, y: 432 }
 
     // DELETE REVOLVE
     await page.mouse.click(revolve.x, revolve.y)
@@ -430,6 +454,20 @@ rev = revolve({ axis = 'y' }, part009)
     await u.expectCmdLog('[data-message-type="execution-done"]', 10_000)
     await page.waitForTimeout(200)
     await expect(u.codeLocator).not.toContainText(`sketch005 = startSketchOn({`)
+
+    // Delete a single profile
+    await page.mouse.click(individualProfile.x, individualProfile.y)
+    await page.waitForTimeout(100)
+    const codeToBeDeletedSnippet =
+      'profile003 = startProfileAt([40.16, -120.48], sketch006)'
+    await expect(page.locator('.cm-activeLine')).toHaveText(
+      '  |> line([20.91, -28.61], %)'
+    )
+    await u.clearCommandLogs()
+    await page.keyboard.press('Backspace')
+    await u.expectCmdLog('[data-message-type="execution-done"]', 10_000)
+    await page.waitForTimeout(200)
+    await expect(u.codeLocator).not.toContainText(codeToBeDeletedSnippet)
   })
   test("Deleting solid that the AST mod can't handle results in a toast message", async ({
     page,
@@ -1258,12 +1296,15 @@ extrude001 = extrude(50, sketch001)
 
     await page.waitForTimeout(600)
 
+    const firstClickCoords = { x: 650, y: 200 } as const
     // Place a point because the line tool will exit if no points are pressed
-    await page.mouse.click(650, 200)
+    await page.mouse.click(firstClickCoords.x, firstClickCoords.y)
     await page.waitForTimeout(600)
 
     // Code before exiting the tool
-    let previousCodeContent = await page.locator('.cm-content').innerText()
+    let previousCodeContent = (
+      await page.locator('.cm-content').innerText()
+    ).replace(/\s+/g, '')
 
     // deselect the line tool by clicking it
     await page.getByRole('button', { name: 'line Line', exact: true }).click()
@@ -1275,14 +1316,23 @@ extrude001 = extrude(50, sketch001)
     await page.mouse.click(750, 200)
     await page.waitForTimeout(100)
 
-    // expect no change
+    await expect
-    await expect(page.locator('.cm-content')).toHaveText(previousCodeContent)
+      .poll(async () => {
+        let str = await page.locator('.cm-content').innerText()
+        str = str.replace(/\s+/g, '')
+        return str
+      })
+      .toBe(previousCodeContent)
 
     // select line tool again
     await page.getByRole('button', { name: 'line Line', exact: true }).click()
 
     await u.closeDebugPanel()
 
+    // Click to continue profile
+    await page.mouse.click(firstClickCoords.x, firstClickCoords.y)
+    await page.waitForTimeout(100)
+
     // line tool should work as expected again
     await page.mouse.click(700, 200)
     await expect(page.locator('.cm-content')).not.toHaveText(

e2e/playwright/various.spec.ts

@@ -224,8 +224,13 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
   // Draw a line
   await page.mouse.move(700, 200, { steps: 5 })
   await page.mouse.click(700, 200)
-  await page.mouse.move(800, 250, { steps: 5 })
+
-  await page.mouse.click(800, 250)
+  const secondMousePosition = { x: 800, y: 250 }
+
+  await page.mouse.move(secondMousePosition.x, secondMousePosition.y, {
+    steps: 5,
+  })
+  await page.mouse.click(secondMousePosition.x, secondMousePosition.y)
   // Unequip line tool
   await page.keyboard.press('Escape')
   // Make sure we didn't pop out of sketch mode.
@@ -234,9 +239,17 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
   // Equip arc tool
   await page.keyboard.press('a')
   await expect(arcButton).toHaveAttribute('aria-pressed', 'true')
+
+  // click in the same position again to continue the profile
+  await page.mouse.move(secondMousePosition.x, secondMousePosition.y, {
+    steps: 5,
+  })
+  await page.mouse.click(secondMousePosition.x, secondMousePosition.y)
+
   await page.mouse.move(1000, 100, { steps: 5 })
   await page.mouse.click(1000, 100)
   await page.keyboard.press('Escape')
+  await expect(arcButton).toHaveAttribute('aria-pressed', 'false')
   await page.keyboard.press('l')
   await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
 
@@ -537,9 +550,9 @@ test('Sketch on face', async ({ page }) => {
 
   await expect.poll(u.normalisedEditorCode).toContain(
     u.normalisedCode(`sketch002 = startSketchOn(extrude001, seg01)
-  |> startProfileAt([-12.94, 6.6], %)
+profile001 = startProfileAt([-12.88, 6.66], sketch002)
-  |> line([2.45, -0.2], %)
+  |> line([2.71, -0.22], %)
-  |> line([-2.6, -1.25], %)
+  |> line([-2.87, -1.38], %)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
   |> close(%)`)
   )
@@ -554,8 +567,7 @@ test('Sketch on face', async ({ page }) => {
   await page.getByText('startProfileAt([-12').click()
   await expect(page.getByRole('button', { name: 'Edit Sketch' })).toBeVisible()
   await page.getByRole('button', { name: 'Edit Sketch' }).click()
-  await page.waitForTimeout(400)
+  await page.waitForTimeout(500)
-  await page.waitForTimeout(150)
   await page.setViewportSize({ width: 1200, height: 1200 })
   await u.openAndClearDebugPanel()
   await u.updateCamPosition([452, -152, 1166])

forge.config.ts

@@ -1,20 +1,9 @@
 import type { ForgeConfig } from '@electron-forge/shared-types'
-import { MakerSquirrel } from '@electron-forge/maker-squirrel'
-import { MakerZIP } from '@electron-forge/maker-zip'
-import { MakerDeb } from '@electron-forge/maker-deb'
-import { MakerRpm } from '@electron-forge/maker-rpm'
 import { VitePlugin } from '@electron-forge/plugin-vite'
-import { MakerWix, MakerWixConfig } from '@electron-forge/maker-wix'
 import { FusesPlugin } from '@electron-forge/plugin-fuses'
 import { FuseV1Options, FuseVersion } from '@electron/fuses'
 import path from 'path'
 
-interface ExtendedMakerWixConfig extends MakerWixConfig {
-  // see https://github.com/electron/forge/issues/3673
-  // this is an undocumented property of electron-wix-msi
-  associateExtensions?: string
-}
-
 const rootDir = process.cwd()
 
 const config: ForgeConfig = {
@@ -39,26 +28,7 @@ const config: ForgeConfig = {
     extendInfo: 'Info.plist', // Information for file associations.
   },
   rebuildConfig: {},
-  makers: [
+  makers: [],
-    new MakerSquirrel({
-      setupIcon: path.resolve(rootDir, 'assets', 'icon.ico'),
-    }),
-    new MakerWix({
-      icon: path.resolve(rootDir, 'assets', 'icon.ico'),
-      associateExtensions: 'kcl',
-    } as ExtendedMakerWixConfig),
-    new MakerZIP({}, ['darwin']),
-    new MakerRpm({
-      options: {
-        icon: path.resolve(rootDir, 'assets', 'icon.png'),
-      },
-    }),
-    new MakerDeb({
-      options: {
-        icon: path.resolve(rootDir, 'assets', 'icon.png'),
-      },
-    }),
-  ],
   plugins: [
     new VitePlugin({
       // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.

package.json

@@ -39,7 +39,6 @@
     "chokidar": "^4.0.1",
     "codemirror": "^6.0.1",
     "decamelize": "^6.0.0",
-    "electron-squirrel-startup": "^1.0.1",
     "electron-updater": "6.3.0",
     "fuse.js": "^7.0.0",
     "html2canvas-pro": "^1.5.8",
@@ -69,7 +68,7 @@
     "yargs": "^17.7.2"
   },
   "scripts": {
-    "start": "vite",
+    "start": "vite --port=3000 --host=0.0.0.0",
     "start:prod": "vite preview --port=3000",
     "serve": "vite serve --port=3000",
     "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm && vite build",
@@ -104,8 +103,6 @@
     "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",
-    "tron:make": "electron-forge make",
-    "tron:publish": "electron-forge publish",
     "tron:test": "NODE_ENV=development yarn playwright test --config=playwright.electron.config.ts --grep=@electron",
     "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",
@@ -148,17 +145,10 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.25.4",
-    "@electron-forge/cli": "^7.4.0",
+    "@electron-forge/cli": "7.4.0",
-    "@electron-forge/maker-deb": "^7.4.0",
+    "@electron-forge/plugin-fuses": "7.4.0",
-    "@electron-forge/maker-rpm": "^7.4.0",
+    "@electron-forge/plugin-vite": "7.4.0",
-    "@electron-forge/maker-squirrel": "^7.4.0",
+    "@electron/fuses": "1.8.0",
-    "@electron-forge/maker-wix": "^7.5.0",
-    "@electron-forge/maker-zip": "^7.5.0",
-    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
-    "@electron-forge/plugin-fuses": "^7.4.0",
-    "@electron-forge/plugin-vite": "^7.4.0",
-    "@electron/fuses": "^1.8.0",
-    "@electron/rebuild": "^3.6.0",
     "@iarna/toml": "^2.2.5",
     "@lezer/generator": "^1.7.1",
     "@nabla/vite-plugin-eslint": "^2.0.5",
@@ -188,9 +178,9 @@
     "@xstate/cli": "^0.5.17",
     "autoprefixer": "^10.4.19",
     "d3-force": "^3.0.0",
-    "electron": "^32.1.2",
+    "electron": "32.1.2",
-    "electron-builder": "^24.13.3",
+    "electron-builder": "24.13.3",
-    "electron-notarize": "^1.2.2",
+    "electron-notarize": "1.2.2",
     "eslint": "^8.0.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",

public/kcl-samples-manifest-fallback.json

@@ -119,6 +119,11 @@
     "title": "Pipe and Flange Assembly",
     "description": "A crucial component in various piping systems, designed to facilitate the connection, disconnection, and access to piping for inspection, cleaning, and modifications. This assembly combines pipes (long cylindrical conduits) with flanges (plate-like fittings) to create a secure yet detachable joint."
   },
+  {
+    "file": "pipe-with-bend.kcl",
+    "title": "Pipe with bend",
+    "description": "A tubular section or hollow cylinder, usually but not necessarily of circular cross-section, used mainly to convey substances that can flow."
+  },
   {
     "file": "poopy-shoe.kcl",
     "title": "Poopy Shoe",

src/Router.tsx

@@ -200,10 +200,7 @@ function CoreDump() {
     () => new CoreDumpManager(engineCommandManager, codeManager, token),
     []
   )
-  // TODO: revisit once progress is made on upstream issue
+  useHotkeyWrapper(['mod + shift + .'], () => {
-  // https://github.com/JohannesKlauss/react-hotkeys-hook/issues/1064
-  // const hotkey = process.platform !== 'linux' ? 'mod + shift + .' : 'mod + shift + >'
-  useHotkeyWrapper(['mod + shift + .', 'mod + shift + >'], () => {
     toast
       .promise(
         coreDump(coreDumpManager, true),

src/Toolbar.tsx

@@ -6,7 +6,6 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ActionButton } from 'components/ActionButton'
-import { isSingleCursorInPipe } from 'lang/queryAst'
 import { useKclContext } from 'lang/KclProvider'
 import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -22,6 +21,7 @@ import {
 } from 'lib/toolbar'
 import { isDesktop } from 'lib/isDesktop'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
+import { isCursorInFunctionDefinition } from 'lang/queryAst'
 
 export function Toolbar({
   className = '',
@@ -38,7 +38,12 @@ export function Toolbar({
     '!border-transparent hover:!border-chalkboard-20 dark:enabled:hover:!border-primary pressed:!border-primary ui-open:!border-primary'
 
   const sketchPathId = useMemo(() => {
-    if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast))
+    if (
+      isCursorInFunctionDefinition(
+        kclManager.ast,
+        context.selectionRanges.graphSelections[0]
+      )
+    )
       return false
     return isCursorInSketchCommandRange(
       engineCommandManager.artifactGraph,

src/clientSideScene/CameraControls.ts

@@ -105,7 +105,7 @@ export class CameraControls {
   pendingZoom: number | null = null
   pendingRotation: Vector2 | null = null
   pendingPan: Vector2 | null = null
-  interactionGuards: MouseGuard = cameraMouseDragGuards.KittyCAD
+  interactionGuards: MouseGuard = cameraMouseDragGuards.Zoo
   isFovAnimationInProgress = false
   perspectiveFovBeforeOrtho = 45
   get isPerspective() {

src/clientSideScene/ClientSideSceneComp.tsx

@@ -433,6 +433,8 @@ export async function deleteSegment({
   if (!sketchDetails) return
   await sceneEntitiesManager.updateAstAndRejigSketch(
     pathToNode,
+    sketchDetails.sketchNodePaths,
+    sketchDetails.planeNodePath,
     modifiedAst,
     sketchDetails.zAxis,
     sketchDetails.yAxis,

src/clientSideScene/segments.ts

@@ -691,19 +691,21 @@ export function createProfileStartHandle({
   scale = 1,
   theme,
   isSelected,
+  size = 12,
   ...rest
 }: {
   from: Coords2d
   scale?: number
   theme: Themes
   isSelected?: boolean
+  size?: number
 } & (
   | { isDraft: true }
   | { isDraft: false; id: string; pathToNode: PathToNode }
 )) {
   const group = new Group()
 
-  const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
+  const geometry = new BoxGeometry(size, size, size) // in pixels scaled later
   const baseColor = getThemeColorForThreeJs(theme)
   const color = isSelected ? 0x0000ff : baseColor
   const body = new MeshBasicMaterial({ color })

src/components/ContextMenu.tsx

@@ -1,13 +1,23 @@
 import toast from 'react-hot-toast'
 import { ActionIcon, ActionIconProps } from './ActionIcon'
-import { RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  MouseEvent,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Dialog } from '@headlessui/react'
 
-interface ContextMenuProps
+export interface ContextMenuProps
   extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
   items?: React.ReactElement[]
   menuTargetElement?: RefObject<HTMLElement>
+  guard?: (e: globalThis.MouseEvent) => boolean
+  event?: 'contextmenu' | 'mouseup'
 }
 
 const DefaultContextMenuItems = [
@@ -20,6 +30,8 @@ export function ContextMenu({
   items = DefaultContextMenuItems,
   menuTargetElement,
   className,
+  guard,
+  event = 'contextmenu',
   ...props
 }: ContextMenuProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
@@ -32,6 +44,15 @@ export function ContextMenu({
   useHotkeys('esc', () => setOpen(false), {
     enabled: open,
   })
+  const handleContextMenu = useCallback(
+    (e: globalThis.MouseEvent) => {
+      if (guard && !guard(e)) return
+      e.preventDefault()
+      setPosition({ x: e.clientX, y: e.clientY })
+      setOpen(true)
+    },
+    [guard, setPosition, setOpen]
+  )
 
   const dialogPositionStyle = useMemo(() => {
     if (!dialogRef.current)
@@ -78,21 +99,9 @@ export function ContextMenu({
 
   // Add context menu listener to target once mounted
   useEffect(() => {
-    const handleContextMenu = (e: MouseEvent) => {
+    menuTargetElement?.current?.addEventListener(event, handleContextMenu)
-      console.log('context menu', e)
-      e.preventDefault()
-      setPosition({ x: e.x, y: e.y })
-      setOpen(true)
-    }
-    menuTargetElement?.current?.addEventListener(
-      'contextmenu',
-      handleContextMenu
-    )
     return () => {
-      menuTargetElement?.current?.removeEventListener(
+      menuTargetElement?.current?.removeEventListener(event, handleContextMenu)
-        'contextmenu',
-        handleContextMenu
-      )
     }
   }, [menuTargetElement?.current])
 
@@ -100,7 +109,10 @@ export function ContextMenu({
     <Dialog open={open} onClose={() => setOpen(false)}>
       <div
         className="fixed inset-0 z-50 w-screen h-screen"
-        onContextMenu={(e) => e.preventDefault()}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setPosition({ x: e.clientX, y: e.clientY })
+        }}
       >
         <Dialog.Backdrop className="fixed z-10 inset-0" />
         <Dialog.Panel

src/components/Gizmo.tsx

@@ -1,6 +1,6 @@
 import { SceneInfra } from 'clientSideScene/sceneInfra'
 import { sceneInfra } from 'lib/singletons'
-import { MutableRefObject, useEffect, useMemo, useRef } from 'react'
+import { MutableRefObject, useEffect, useRef } from 'react'
 import {
   WebGLRenderer,
   Scene,
@@ -19,16 +19,14 @@ import {
   Intersection,
   Object3D,
 } from 'three'
-import {
-  ContextMenu,
-  ContextMenuDivider,
-  ContextMenuItem,
-  ContextMenuItemRefresh,
-} from './ContextMenu'
 import { Popover } from '@headlessui/react'
 import { CustomIcon } from './CustomIcon'
 import { reportRejection } from 'lib/trap'
-import { useModelingContext } from 'hooks/useModelingContext'
+import {
+  useViewControlMenuItems,
+  ViewControlContextMenu,
+} from './ViewControlMenu'
+import { AxisNames } from 'lib/constants'
 
 const CANVAS_SIZE = 80
 const FRUSTUM_SIZE = 0.5
@@ -40,64 +38,14 @@ enum AxisColors {
   Z = '#6689ef',
   Gray = '#c6c7c2',
 }
-enum AxisNames {
-  X = 'x',
-  Y = 'y',
-  Z = 'z',
-  NEG_X = '-x',
-  NEG_Y = '-y',
-  NEG_Z = '-z',
-}
-const axisNamesSemantic: Record<AxisNames, string> = {
-  [AxisNames.X]: 'Right',
-  [AxisNames.Y]: 'Back',
-  [AxisNames.Z]: 'Top',
-  [AxisNames.NEG_X]: 'Left',
-  [AxisNames.NEG_Y]: 'Front',
-  [AxisNames.NEG_Z]: 'Bottom',
-}
 
 export default function Gizmo() {
+  const menuItems = useViewControlMenuItems()
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const raycasterIntersect = useRef<Intersection<Object3D> | null>(null)
   const cameraPassiveUpdateTimer = useRef(0)
   const raycasterPassiveUpdateTimer = useRef(0)
-  const { send: modelingSend } = useModelingContext()
-  const menuItems = useMemo(
-    () => [
-      ...Object.entries(axisNamesSemantic).map(([axisName, axisSemantic]) => (
-        <ContextMenuItem
-          key={axisName}
-          onClick={() => {
-            sceneInfra.camControls
-              .updateCameraToAxis(axisName as AxisNames)
-              .catch(reportRejection)
-          }}
-        >
-          {axisSemantic} view
-        </ContextMenuItem>
-      )),
-      <ContextMenuDivider />,
-      <ContextMenuItem
-        onClick={() => {
-          sceneInfra.camControls.resetCameraPosition().catch(reportRejection)
-        }}
-      >
-        Reset view
-      </ContextMenuItem>,
-      <ContextMenuItem
-        onClick={() => {
-          modelingSend({ type: 'Center camera on selection' })
-        }}
-      >
-        Center view on selection
-      </ContextMenuItem>,
-      <ContextMenuDivider />,
-      <ContextMenuItemRefresh />,
-    ],
-    [axisNamesSemantic]
-  )
 
   useEffect(() => {
     if (!canvasRef.current) return
@@ -161,7 +109,7 @@ export default function Gizmo() {
         className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-sm"
       >
         <canvas ref={canvasRef} />
-        <ContextMenu menuTargetElement={wrapperRef} items={menuItems} />
+        <ViewControlContextMenu menuTargetElement={wrapperRef} />
       </div>
       <GizmoDropdown items={menuItems} />
     </div>

src/components/LowerRightControls.tsx

@@ -1,4 +1,4 @@
-import { APP_VERSION, RELEASE_URL } from 'routes/Settings'
+import { APP_VERSION, getReleaseUrl } from 'routes/Settings'
 import { CustomIcon } from 'components/CustomIcon'
 import Tooltip from 'components/Tooltip'
 import { PATHS } from 'lib/paths'
@@ -72,8 +72,8 @@ export function LowerRightControls({
       <menu className="flex items-center justify-end gap-3 pointer-events-auto">
         {!location.pathname.startsWith(PATHS.HOME) && <ModelStateIndicator />}
         <a
-          onClick={openExternalBrowserIfDesktop(RELEASE_URL)}
+          onClick={openExternalBrowserIfDesktop(getReleaseUrl())}
-          href={RELEASE_URL}
+          href={getReleaseUrl()}
           target="_blank"
           rel="noopener noreferrer"
           className={'!no-underline font-mono text-xs ' + linkOverrideClassName}

src/components/LspProvider.tsx

@@ -69,14 +69,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   const [isKclLspReady, setIsKclLspReady] = useState(false)
   const [isCopilotLspReady, setIsCopilotLspReady] = useState(false)
 
-  const {
+  const { auth } = useSettingsAuthContext()
-    auth,
-    settings: {
-      context: {
-        modeling: { defaultUnit },
-      },
-    },
-  } = useSettingsAuthContext()
   const token = auth?.context.token
   const navigate = useNavigate()
 
@@ -92,7 +85,6 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     const initEvent: KclWorkerOptions = {
       wasmUrl: wasmUrl(),
       token: token,
-      baseUnit: defaultUnit.current,
       apiBaseUrl: VITE_KC_API_BASE_URL,
     }
     lspWorker.postMessage({

src/components/ModelingMachineProvider.tsx

@@ -24,7 +24,7 @@ import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import {
   isCursorInSketchCommandRange,
-  updatePathToNodeFromMap,
+  updateSketchDetailsNodePaths,
 } from 'lang/util'
 import {
   kclManager,
@@ -71,14 +71,24 @@ import {
   replaceValueAtNodePath,
   sketchOnExtrudedFace,
   sketchOnOffsetPlane,
+  splitPipedProfile,
   startSketchOnDefault,
 } from 'lang/modifyAst'
-import { PathToNode, Program, parse, recast, resultIsOk } from 'lang/wasm'
+import {
+  PathToNode,
+  Program,
+  VariableDeclaration,
+  parse,
+  recast,
+  resultIsOk,
+} from 'lang/wasm'
 import {
   doesSceneHaveExtrudedSketch,
   doesSceneHaveSweepableSketch,
-  getNodePathFromSourceRange,
+  doesSketchPipeNeedSplitting,
-  isSingleCursorInPipe,
+  getNodeFromPath,
+  isCursorInFunctionDefinition,
+  traverse,
 } from 'lang/queryAst'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
@@ -86,7 +96,7 @@ import toast from 'react-hot-toast'
 import { EditorSelection, Transaction } from '@codemirror/state'
 import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
-import { err, reportRejection, trap } from 'lib/trap'
+import { err, reportRejection, trap, reject } from 'lib/trap'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { modelingMachineEvent } from 'editor/manager'
 import { hasValidEdgeTreatmentSelection } from 'lang/modifyAst/addEdgeTreatment'
@@ -100,6 +110,10 @@ import { useFileContext } from 'hooks/useFileContext'
 import { uuidv4 } from 'lib/utils'
 import { IndexLoaderData } from 'lib/types'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
+import {
+  getPathsFromArtifact,
+  getPlaneFromArtifact,
+} from 'lang/std/artifactGraph'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -290,7 +304,7 @@ export const ModelingMachineProvider = ({
           return {
             sketchDetails: {
               ...sketchDetails,
-              sketchPathToNode: event.data,
+              sketchEntryNodePath: event.data,
             },
           }
         }),
@@ -413,9 +427,17 @@ export const ModelingMachineProvider = ({
                 selectionRanges: setSelections.selection,
                 sketchDetails: {
                   ...sketchDetails,
-                  sketchPathToNode:
+                  sketchEntryNodePath:
-                    setSelections.updatedPathToNode ||
+                    setSelections.updatedSketchEntryNodePath ||
-                    sketchDetails?.sketchPathToNode ||
+                    sketchDetails?.sketchEntryNodePath ||
+                    [],
+                  sketchNodePaths:
+                    setSelections.updatedSketchNodePaths ||
+                    sketchDetails?.sketchNodePaths ||
+                    [],
+                  planeNodePath:
+                    setSelections.updatedPlaneNodePath ||
+                    sketchDetails?.planeNodePath ||
                     [],
                 },
               }
@@ -625,7 +647,6 @@ export const ModelingMachineProvider = ({
           }
 
           const canShell = canShellSelection(selectionRanges)
-          console.log('canShellSelection', canShellSelection(selectionRanges))
           if (err(canShell)) return false
           return canShell
         },
@@ -648,7 +669,12 @@ export const ModelingMachineProvider = ({
         'Selection is on face': ({ context: { selectionRanges }, event }) => {
           if (event.type !== 'Enter sketch') return false
           if (event.data?.forceNewSketch) return false
-          if (!isSingleCursorInPipe(selectionRanges, kclManager.ast))
+          if (
+            isCursorInFunctionDefinition(
+              kclManager.ast,
+              selectionRanges.graphSelections[0]
+            )
+          )
             return false
           return !!isCursorInSketchCommandRange(
             engineCommandManager.artifactGraph,
@@ -679,10 +705,32 @@ export const ModelingMachineProvider = ({
               // this assumes no changes have been made to the sketch besides what we did when entering the sketch
               // i.e. doesn't account for user's adding code themselves, maybe we need store a flag userEditedSinceSketchMode?
               const newAst = structuredClone(kclManager.ast)
-              const varDecIndex = sketchDetails.sketchPathToNode[1][0]
+              const varDecIndex = sketchDetails.planeNodePath[1][0]
+
+              const varDec = getNodeFromPath<VariableDeclaration>(
+                newAst,
+                sketchDetails.planeNodePath,
+                'VariableDeclaration'
+              )
+              if (err(varDec)) return reject(new Error('No varDec'))
+              const variableName = varDec.node.declaration.id.name
+              let isIdentifierUsed = false
+              traverse(newAst, {
+                enter: (node) => {
+                  if (
+                    node.type === 'Identifier' &&
+                    node.name === variableName
+                  ) {
+                    isIdentifierUsed = true
+                  }
+                },
+              })
+              if (isIdentifierUsed) return
+
               // remove body item at varDecIndex
               newAst.body = newAst.body.filter((_, i) => i !== varDecIndex)
               await kclManager.executeAstMock(newAst)
+              await codeManager.updateEditorWithAstAndWriteToFile(newAst)
             }
             sceneInfra.setCallbacks({
               onClick: () => {},
@@ -692,7 +740,7 @@ export const ModelingMachineProvider = ({
           }
         ),
         'animate-to-face': fromPromise(async ({ input }) => {
-          if (!input) return undefined
+          if (!input) return null
           if (input.type === 'extrudeFace' || input.type === 'offsetPlane') {
             const sketched =
               input.type === 'extrudeFace'
@@ -719,7 +767,9 @@ export const ModelingMachineProvider = ({
             await letEngineAnimateAndSyncCamAfter(engineCommandManager, id)
             sceneInfra.camControls.syncDirection = 'clientToEngine'
             return {
-              sketchPathToNode: pathToNewSketchNode,
+              sketchEntryNodePath: [],
+              planeNodePath: pathToNewSketchNode,
+              sketchNodePaths: [],
               zAxis: input.zAxis,
               yAxis: input.yAxis,
               origin: input.position,
@@ -739,7 +789,9 @@ export const ModelingMachineProvider = ({
           )
 
           return {
-            sketchPathToNode: pathToNode,
+            sketchEntryNodePath: [],
+            planeNodePath: pathToNode,
+            sketchNodePaths: [],
             zAxis: input.zAxis,
             yAxis: input.yAxis,
             origin: [0, 0, 0],
@@ -747,12 +799,14 @@ export const ModelingMachineProvider = ({
         }),
         'animate-to-sketch': fromPromise(
           async ({ input: { selectionRanges } }) => {
-            const sourceRange =
+            const sketchPathToNode =
-              selectionRanges.graphSelections[0]?.codeRef?.range
+              selectionRanges.graphSelections[0]?.codeRef?.pathToNode
-            const sketchPathToNode = getNodePathFromSourceRange(
+            const plane = getPlaneFromArtifact(
-              kclManager.ast,
+              selectionRanges.graphSelections[0].artifact,
-              sourceRange
+              engineCommandManager.artifactGraph
             )
+            if (err(plane)) return Promise.reject(plane)
+
             const info = await getSketchOrientationDetails(
               sketchPathToNode || []
             )
@@ -760,8 +814,17 @@ export const ModelingMachineProvider = ({
               engineCommandManager,
               info?.sketchDetails?.faceId || ''
             )
-            return {
+            const sketchPaths = getPathsFromArtifact({
+              artifact: selectionRanges.graphSelections[0].artifact,
               sketchPathToNode: sketchPathToNode || [],
+            })
+            if (err(sketchPaths)) return Promise.reject(sketchPaths)
+            if (!plane.codeRef)
+              return Promise.reject(new Error('No plane codeRef'))
+            return {
+              sketchEntryNodePath: sketchPathToNode || [],
+              sketchNodePaths: sketchPaths,
+              planeNodePath: plane.codeRef.pathToNode,
               zAxis: info.sketchDetails.zAxis || null,
               yAxis: info.sketchDetails.yAxis || null,
               origin: info.sketchDetails.origin.map(
@@ -773,7 +836,7 @@ export const ModelingMachineProvider = ({
 
         'Get horizontal info': fromPromise(
           async ({ input: { selectionRanges, sketchDetails } }) => {
-            const { modifiedAst, pathToNodeMap } =
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
               await applyConstraintHorzVertDistance({
                 constraint: 'setHorzDistance',
                 selectionRanges,
@@ -785,13 +848,23 @@ export const ModelingMachineProvider = ({
 
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
+
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -812,13 +885,15 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
         'Get vertical info': fromPromise(
           async ({ input: { selectionRanges, sketchDetails } }) => {
-            const { modifiedAst, pathToNodeMap } =
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
               await applyConstraintHorzVertDistance({
                 constraint: 'setVertDistance',
                 selectionRanges,
@@ -829,13 +904,23 @@ export const ModelingMachineProvider = ({
             const _modifiedAst = pResult.program
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
+
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -856,7 +941,9 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
@@ -866,14 +953,15 @@ export const ModelingMachineProvider = ({
               selectionRanges,
             })
             if (err(info)) return Promise.reject(info)
-            const { modifiedAst, pathToNodeMap } = await (info.enabled
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
-              ? applyConstraintAngleBetween({
+              await (info.enabled
-                  selectionRanges,
+                ? applyConstraintAngleBetween({
-                })
+                    selectionRanges,
-              : applyConstraintAngleLength({
+                  })
-                  selectionRanges,
+                : applyConstraintAngleLength({
-                  angleOrLength: 'setAngle',
+                    selectionRanges,
-                }))
+                    angleOrLength: 'setAngle',
+                  }))
             const pResult = parse(recast(modifiedAst))
             if (trap(pResult) || !resultIsOk(pResult))
               return Promise.reject(new Error('Unexpected compilation error'))
@@ -882,13 +970,23 @@ export const ModelingMachineProvider = ({
 
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
+
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -909,7 +1007,9 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
@@ -924,20 +1024,30 @@ export const ModelingMachineProvider = ({
               length: lengthValue,
             })
             if (err(constraintResult)) return Promise.reject(constraintResult)
-            const { modifiedAst, pathToNodeMap } = constraintResult
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
+              constraintResult
             const pResult = parse(recast(modifiedAst))
             if (trap(pResult) || !resultIsOk(pResult))
               return Promise.reject(new Error('Unexpected compilation error'))
             const _modifiedAst = pResult.program
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -958,13 +1068,15 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
         'Get perpendicular distance info': fromPromise(
           async ({ input: { selectionRanges, sketchDetails } }) => {
-            const { modifiedAst, pathToNodeMap } =
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
               await applyConstraintIntersect({
                 selectionRanges,
               })
@@ -974,13 +1086,22 @@ export const ModelingMachineProvider = ({
             const _modifiedAst = pResult.program
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -1001,13 +1122,15 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
         'Get ABS X info': fromPromise(
           async ({ input: { selectionRanges, sketchDetails } }) => {
-            const { modifiedAst, pathToNodeMap } =
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
               await applyConstraintAbsDistance({
                 constraint: 'xAbs',
                 selectionRanges,
@@ -1018,13 +1141,22 @@ export const ModelingMachineProvider = ({
             const _modifiedAst = pResult.program
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -1045,13 +1177,15 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
         'Get ABS Y info': fromPromise(
           async ({ input: { selectionRanges, sketchDetails } }) => {
-            const { modifiedAst, pathToNodeMap } =
+            const { modifiedAst, pathToNodeMap, exprInsertIndex } =
               await applyConstraintAbsDistance({
                 constraint: 'yAbs',
                 selectionRanges,
@@ -1062,13 +1196,22 @@ export const ModelingMachineProvider = ({
             const _modifiedAst = pResult.program
             if (!sketchDetails)
               return Promise.reject(new Error('No sketch details'))
-            const updatedPathToNode = updatePathToNodeFromMap(
+
-              sketchDetails.sketchPathToNode,
+            const {
-              pathToNodeMap
+              updatedSketchEntryNodePath,
-            )
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex,
+            })
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                updatedPathToNode,
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 _modifiedAst,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -1089,7 +1232,9 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
             }
           }
         ),
@@ -1109,9 +1254,11 @@ export const ModelingMachineProvider = ({
             let result: {
               modifiedAst: Node<Program>
               pathToReplaced: PathToNode | null
+              exprInsertIndex: number
             } = {
               modifiedAst: parsed,
               pathToReplaced: null,
+              exprInsertIndex: -1,
             }
             // If the user provided a constant name,
             // we need to insert the named constant
@@ -1141,6 +1288,7 @@ export const ModelingMachineProvider = ({
               result = {
                 modifiedAst: parseResultAfterInsertion.program,
                 pathToReplaced: astAfterReplacement.pathToReplaced,
+                exprInsertIndex: astAfterReplacement.exprInsertIndex,
               }
             } else if ('valueText' in data.namedValue) {
               // If they didn't provide a constant name,
@@ -1171,10 +1319,22 @@ export const ModelingMachineProvider = ({
             parsed = parsed as Node<Program>
             if (!result.pathToReplaced)
               return Promise.reject(new Error('No path to replaced node'))
+            const {
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            } = updateSketchDetailsNodePaths({
+              sketchEntryNodePath: sketchDetails.sketchEntryNodePath,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+              exprInsertIndex: result.exprInsertIndex,
+            })
 
             const updatedAst =
               await sceneEntitiesManager.updateAstAndRejigSketch(
-                result.pathToReplaced || [],
+                updatedSketchEntryNodePath,
+                updatedSketchNodePaths,
+                updatedPlaneNodePath,
                 parsed,
                 sketchDetails.zAxis,
                 sketchDetails.yAxis,
@@ -1195,7 +1355,140 @@ export const ModelingMachineProvider = ({
             return {
               selectionType: 'completeSelection',
               selection,
-              updatedPathToNode: result.pathToReplaced,
+              updatedSketchEntryNodePath,
+              updatedSketchNodePaths,
+              updatedPlaneNodePath,
+            }
+          }
+        ),
+        'set-up-draft-circle': fromPromise(
+          async ({ input: { sketchDetails, data } }) => {
+            if (!sketchDetails || !data)
+              return reject('No sketch details or data')
+            await sceneEntitiesManager.tearDownSketch({ removeAxis: false })
+
+            const result = await sceneEntitiesManager.setupDraftCircle(
+              sketchDetails.sketchEntryNodePath,
+              sketchDetails.sketchNodePaths,
+              sketchDetails.planeNodePath,
+              sketchDetails.zAxis,
+              sketchDetails.yAxis,
+              sketchDetails.origin,
+              data
+            )
+            if (err(result)) return reject(result)
+            await codeManager.updateEditorWithAstAndWriteToFile(kclManager.ast)
+
+            return result
+          }
+        ),
+        'set-up-draft-rectangle': fromPromise(
+          async ({ input: { sketchDetails, data } }) => {
+            if (!sketchDetails || !data)
+              return reject('No sketch details or data')
+            await sceneEntitiesManager.tearDownSketch({ removeAxis: false })
+
+            const result = await sceneEntitiesManager.setupDraftRectangle(
+              sketchDetails.sketchEntryNodePath,
+              sketchDetails.sketchNodePaths,
+              sketchDetails.planeNodePath,
+              sketchDetails.zAxis,
+              sketchDetails.yAxis,
+              sketchDetails.origin,
+              data
+            )
+            if (err(result)) return reject(result)
+            await codeManager.updateEditorWithAstAndWriteToFile(kclManager.ast)
+
+            return result
+          }
+        ),
+        'set-up-draft-center-rectangle': fromPromise(
+          async ({ input: { sketchDetails, data } }) => {
+            if (!sketchDetails || !data)
+              return reject('No sketch details or data')
+            await sceneEntitiesManager.tearDownSketch({ removeAxis: false })
+            const result = await sceneEntitiesManager.setupDraftCenterRectangle(
+              sketchDetails.sketchEntryNodePath,
+              sketchDetails.sketchNodePaths,
+              sketchDetails.planeNodePath,
+              sketchDetails.zAxis,
+              sketchDetails.yAxis,
+              sketchDetails.origin,
+              data
+            )
+            if (err(result)) return reject(result)
+            await codeManager.updateEditorWithAstAndWriteToFile(kclManager.ast)
+
+            return result
+          }
+        ),
+        'setup-client-side-sketch-segments': fromPromise(
+          async ({ input: { sketchDetails, selectionRanges } }) => {
+            if (!sketchDetails) return
+            if (!sketchDetails.sketchEntryNodePath.length) return
+            if (Object.keys(sceneEntitiesManager.activeSegments).length > 0) {
+              sceneEntitiesManager.tearDownSketch({ removeAxis: false })
+            }
+            sceneInfra.resetMouseListeners()
+            await sceneEntitiesManager.setupSketch({
+              sketchEntryNodePath: sketchDetails?.sketchEntryNodePath || [],
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              forward: sketchDetails.zAxis,
+              up: sketchDetails.yAxis,
+              position: sketchDetails.origin,
+              maybeModdedAst: kclManager.ast,
+              selectionRanges,
+            })
+            sceneInfra.resetMouseListeners()
+
+            sceneEntitiesManager.setupSketchIdleCallbacks({
+              sketchEntryNodePath: sketchDetails?.sketchEntryNodePath || [],
+              forward: sketchDetails.zAxis,
+              up: sketchDetails.yAxis,
+              position: sketchDetails.origin,
+              sketchNodePaths: sketchDetails.sketchNodePaths,
+              planeNodePath: sketchDetails.planeNodePath,
+            })
+            return undefined
+          }
+        ),
+        'split-sketch-pipe-if-needed': fromPromise(
+          async ({ input: { sketchDetails } }) => {
+            if (!sketchDetails) return reject('No sketch details')
+            const existingSketchInfoNoOp = {
+              updatedEntryNodePath: sketchDetails.sketchEntryNodePath,
+              updatedSketchNodePaths: sketchDetails.sketchNodePaths,
+              updatedPlaneNodePath: sketchDetails.planeNodePath,
+            } as const
+            if (
+              !sketchDetails.sketchNodePaths.length &&
+              sketchDetails.planeNodePath.length
+            ) {
+              // new sketch, no profiles yet
+              return existingSketchInfoNoOp
+            }
+            const doesNeedSplitting = doesSketchPipeNeedSplitting(
+              kclManager.ast,
+              sketchDetails.sketchEntryNodePath
+            )
+            if (err(doesNeedSplitting)) return reject(doesNeedSplitting)
+            if (!doesNeedSplitting) return existingSketchInfoNoOp
+
+            const splitResult = splitPipedProfile(
+              kclManager.ast,
+              sketchDetails.sketchEntryNodePath
+            )
+            if (err(splitResult)) return reject(splitResult)
+
+            await kclManager.executeAstMock(splitResult.modifiedAst)
+            await codeManager.updateEditorWithAstAndWriteToFile(
+              splitResult.modifiedAst
+            )
+            return {
+              updatedEntryNodePath: splitResult.pathToProfile,
+              updatedSketchNodePaths: [splitResult.pathToProfile],
+              updatedPlaneNodePath: sketchDetails.planeNodePath,
             }
           }
         ),

src/components/ModelingSidebar/ModelingPane.tsx

@@ -6,6 +6,7 @@ import Tooltip from 'components/Tooltip'
 import { CustomIconName } from 'components/CustomIcon'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from 'components/ActionIcon'
+import { onboardingPaths } from 'routes/Onboarding/paths'
 
 export interface ModelingPaneProps {
   id: string
@@ -70,7 +71,7 @@ export const ModelingPane = ({
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
   const pointerEventsCssClass =
-    onboardingStatus.current === 'camera'
+    onboardingStatus.current === onboardingPaths.CAMERA
       ? 'pointer-events-none '
       : 'pointer-events-auto '
   return (

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -19,6 +19,7 @@ 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'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -41,7 +42,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   const onboardingStatus = settings.context.app.onboardingStatus
   const { send, context } = useModelingContext()
   const pointerEventsCssClass =
-    onboardingStatus.current === 'camera' ||
+    onboardingStatus.current === onboardingPaths.CAMERA ||
     context.store?.openPanes.length === 0
       ? 'pointer-events-none '
       : 'pointer-events-auto '

src/components/Settings/AllSettingsFields.tsx

@@ -13,7 +13,7 @@ import { isDesktop } from 'lib/isDesktop'
 import { ActionButton } from 'components/ActionButton'
 import { SettingsFieldInput } from './SettingsFieldInput'
 import toast from 'react-hot-toast'
-import { APP_VERSION, IS_NIGHTLY, RELEASE_URL } from 'routes/Settings'
+import { APP_VERSION, IS_NIGHTLY, getReleaseUrl } from 'routes/Settings'
 import { PATHS } from 'lib/paths'
 import {
   createAndOpenNewTutorialProject,
@@ -246,8 +246,8 @@ export const AllSettingsFields = forwardRef(
                   to inject the version from package.json */}
               App version {APP_VERSION}.{' '}
               <a
-                onClick={openExternalBrowserIfDesktop(RELEASE_URL)}
+                onClick={openExternalBrowserIfDesktop(getReleaseUrl())}
-                href={RELEASE_URL}
+                href={getReleaseUrl()}
                 target="_blank"
                 rel="noopener noreferrer"
               >

src/components/SettingsAuthProvider.tsx

@@ -1,5 +1,5 @@
 import { trap } from 'lib/trap'
-import { useMachine } from '@xstate/react'
+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'
@@ -23,7 +23,6 @@ import {
   engineCommandManager,
   sceneEntitiesManager,
 } from 'lib/singletons'
-import { uuidv4 } from 'lib/utils'
 import { IndexLoaderData } from 'lib/types'
 import { settings } from 'lib/settings/initialSettings'
 import {
@@ -55,11 +54,15 @@ type SettingsAuthContextType = {
   settings: MachineContext<typeof settingsMachine>
 }
 
-// a little hacky for sure, open to changing it
+/**
-// this implies that we should only even have one instance of this provider mounted at any one time
+ * This variable is used to store the last snapshot of the settings context
-// but I think that's a safe assumption
+ * for use outside of React, such as in `wasm.ts`. It is updated every time
-let settingsStateRef: ContextFrom<typeof settingsMachine> | undefined
+ * the settings machine changes with `useSelector`.
-export const getSettingsState = () => settingsStateRef
+ * TODO: when we decouple XState from React, we can just subscribe to the actor directly from `wasm.ts`
+ */
+export let lastSettingsContextSnapshot:
+  | ContextFrom<typeof settingsMachine>
+  | undefined
 
 export const SettingsAuthContext = createContext({} as SettingsAuthContextType)
 
@@ -129,27 +132,11 @@ export const SettingsAuthProviderBase = ({
             .setTheme(context.app.theme.current)
             .catch(reportRejection)
         },
-        setEngineScaleGridVisibility: ({ context }) => {
-          engineCommandManager.setScaleGridVisibility(
-            context.modeling.showScaleGrid.current
-          )
-        },
         setClientTheme: ({ context }) => {
           const opposingTheme = getOppositeTheme(context.app.theme.current)
           sceneInfra.theme = opposingTheme
           sceneEntitiesManager.updateSegmentBaseColor(opposingTheme)
         },
-        setEngineEdges: ({ context }) => {
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          engineCommandManager.sendSceneCommand({
-            cmd_id: uuidv4(),
-            type: 'modeling_cmd_req',
-            cmd: {
-              type: 'edge_lines_visible' as any, // TODO update kittycad.ts to get this new command type
-              hidden: !context.modeling.highlightEdges.current,
-            },
-          })
-        },
         toastSuccess: ({ event }) => {
           if (!('data' in event)) return
           const eventParts = event.type.replace(/^set./, '').split('.') as [
@@ -175,17 +162,27 @@ export const SettingsAuthProviderBase = ({
         },
         'Execute AST': ({ context, event }) => {
           try {
+            const relevantSetting = (s: typeof settings) => {
+              return (
+                s.modeling?.defaultUnit?.current !==
+                  context.modeling.defaultUnit.current ||
+                s.modeling.showScaleGrid.current !==
+                  context.modeling.showScaleGrid.current ||
+                s.modeling?.highlightEdges.current !==
+                  context.modeling.highlightEdges.current
+              )
+            }
+
             const allSettingsIncludesUnitChange =
               event.type === 'Set all settings' &&
-              event.settings?.modeling?.defaultUnit?.current !==
+              relevantSetting(event.settings)
-                context.modeling.defaultUnit.current
             const resetSettingsIncludesUnitChange =
-              event.type === 'Reset settings' &&
+              event.type === 'Reset settings' && relevantSetting(settings)
-              context.modeling.defaultUnit.current !==
-                settings?.modeling?.defaultUnit?.default
 
             if (
               event.type === 'set.modeling.defaultUnit' ||
+              event.type === 'set.modeling.showScaleGrid' ||
+              event.type === 'set.modeling.highlightEdges' ||
               allSettingsIncludesUnitChange ||
               resetSettingsIncludesUnitChange
             ) {
@@ -214,7 +211,10 @@ export const SettingsAuthProviderBase = ({
     }),
     { input: loadedSettings }
   )
-  settingsStateRef = settingsState.context
+  // Any time the actor changes, update the settings state for external use
+  useSelector(settingsActor, (s) => {
+    lastSettingsContextSnapshot = s.context
+  })
 
   useEffect(() => {
     if (!isDesktop()) return

src/components/Spinner.tsx

@@ -2,7 +2,12 @@ import { SVGProps } from 'react'
 
 export const Spinner = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg viewBox="0 0 10 10" className={'w-8 h-8'} {...props}>
+    <svg
+      data-testid="spinner"
+      viewBox="0 0 10 10"
+      className={'w-8 h-8'}
+      {...props}
+    >
       <circle
         cx="5"
         cy="5"

src/components/Stream.tsx

@@ -20,6 +20,7 @@ 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'
 
 enum StreamState {
   Playing = 'playing',
@@ -30,6 +31,7 @@ enum StreamState {
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
+  const videoWrapperRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
   const { state, send } = useModelingContext()
@@ -258,7 +260,7 @@ export const Stream = () => {
     setIsLoading(false)
   }, [mediaStream])
 
-  const handleMouseUp: MouseEventHandler<HTMLDivElement> = (e) => {
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
     // If we've got no stream or connection, don't do anything
     if (!isNetworkOkay) return
     if (!videoRef.current) return
@@ -320,10 +322,11 @@ export const Stream = () => {
 
   return (
     <div
+      ref={videoWrapperRef}
       className="absolute inset-0 z-0"
       id="stream"
       data-testid="stream"
-      onClick={handleMouseUp}
+      onClick={handleClick}
       onDoubleClick={enterSketchModeIfSelectingSketch}
       onContextMenu={(e) => e.preventDefault()}
       onContextMenuCapture={(e) => e.preventDefault()}
@@ -384,6 +387,14 @@ export const Stream = () => {
           </Loading>
         </div>
       )}
+      <ViewControlContextMenu
+        event="mouseup"
+        guard={(e) =>
+          sceneInfra.camControls.wasDragging === false &&
+          btnName(e).right === true
+        }
+        menuTargetElement={videoWrapperRef}
+      />
     </div>
   )
 }

src/components/ToastUpdate.tsx

@@ -2,6 +2,7 @@ import toast from 'react-hot-toast'
 import { ActionButton } from './ActionButton'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 import { Marked } from '@ts-stack/markdown'
+import { getReleaseUrl } from 'routes/Settings'
 
 export function ToastUpdate({
   version,
@@ -32,10 +33,8 @@ export function ToastUpdate({
             A new update has downloaded and will be available next time you
             start the app. You can view the release notes{' '}
             <a
-              onClick={openExternalBrowserIfDesktop(
+              onClick={openExternalBrowserIfDesktop(getReleaseUrl(version))}
-                `https://github.com/KittyCAD/modeling-app/releases/tag/v${version}`
+              href={getReleaseUrl(version)}
-              )}
-              href={`https://github.com/KittyCAD/modeling-app/releases/tag/v${version}`}
               target="_blank"
               rel="noreferrer"
             >

src/components/Toolbar/Intersect.tsx

@@ -136,6 +136,7 @@ export async function applyConstraintIntersect({
 }): Promise<{
   modifiedAst: Node<Program>
   pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
 }> {
   const info = intersectInfo({
     selectionRanges,
@@ -174,6 +175,7 @@ export async function applyConstraintIntersect({
     return {
       modifiedAst,
       pathToNodeMap,
+      exprInsertIndex: -1,
     }
   }
   // transform again but forcing certain values
@@ -192,6 +194,7 @@ export async function applyConstraintIntersect({
   const { modifiedAst: _modifiedAst, pathToNodeMap: _pathToNodeMap } =
     transform2
 
+  let exprInsertIndex = -1
   if (variableName) {
     const newBody = [..._modifiedAst.body]
     newBody.splice(
@@ -204,9 +207,11 @@ export async function applyConstraintIntersect({
       const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
       pathToNode[index][0] = Number(pathToNode[index][0]) + 1
     })
+    exprInsertIndex = newVariableInsertIndex
   }
   return {
     modifiedAst: _modifiedAst,
     pathToNodeMap: _pathToNodeMap,
+    exprInsertIndex,
   }
 }

src/components/Toolbar/RemoveConstrainingValues.tsx

@@ -28,7 +28,7 @@ export function removeConstrainingValuesInfo({
   | Error {
   const _nodes = selectionRanges.graphSelections.map(({ codeRef }) => {
     const tmp = getNodeFromPath<Expr>(kclManager.ast, codeRef.pathToNode)
-    if (err(tmp)) return tmp
+    if (tmp instanceof Error) return tmp
     return tmp.node
   })
   const _err1 = _nodes.find(err)

src/components/Toolbar/SetAbsDistance.tsx

@@ -93,6 +93,7 @@ export async function applyConstraintAbsDistance({
 }): Promise<{
   modifiedAst: Program
   pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
 }> {
   const info = absDistanceInfo({
     selectionRanges,
@@ -132,6 +133,7 @@ export async function applyConstraintAbsDistance({
   if (err(transform2)) return Promise.reject(transform2)
   const { modifiedAst: _modifiedAst, pathToNodeMap } = transform2
 
+  let exprInsertIndex = -1
   if (variableName) {
     const newBody = [..._modifiedAst.body]
     newBody.splice(
@@ -144,8 +146,9 @@ export async function applyConstraintAbsDistance({
       const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
       pathToNode[index][0] = Number(pathToNode[index][0]) + 1
     })
+    exprInsertIndex = newVariableInsertIndex
   }
-  return { modifiedAst: _modifiedAst, pathToNodeMap }
+  return { modifiedAst: _modifiedAst, pathToNodeMap, exprInsertIndex }
 }
 
 export function applyConstraintAxisAlign({

src/components/Toolbar/SetAngleBetween.tsx

@@ -86,6 +86,7 @@ export async function applyConstraintAngleBetween({
 }): Promise<{
   modifiedAst: Program
   pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
 }> {
   const info = angleBetweenInfo({ selectionRanges })
   if (err(info)) return Promise.reject(info)
@@ -122,6 +123,7 @@ export async function applyConstraintAngleBetween({
     return {
       modifiedAst,
       pathToNodeMap,
+      exprInsertIndex: -1,
     }
   }
 
@@ -141,6 +143,7 @@ export async function applyConstraintAngleBetween({
   const { modifiedAst: _modifiedAst, pathToNodeMap: _pathToNodeMap } =
     transformed2
 
+  let exprInsertIndex = -1
   if (variableName) {
     const newBody = [..._modifiedAst.body]
     newBody.splice(
@@ -153,9 +156,11 @@ export async function applyConstraintAngleBetween({
       const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
       pathToNode[index][0] = Number(pathToNode[index][0]) + 1
     })
+    exprInsertIndex = newVariableInsertIndex
   }
   return {
     modifiedAst: _modifiedAst,
     pathToNodeMap: _pathToNodeMap,
+    exprInsertIndex,
   }
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -87,15 +87,13 @@ export function horzVertDistanceInfo({
 export async function applyConstraintHorzVertDistance({
   selectionRanges,
   constraint,
-  // TODO align will always be false (covered by synconous applyConstraintHorzVertAlign), remove it
-  isAlign = false,
 }: {
   selectionRanges: Selections
   constraint: 'setHorzDistance' | 'setVertDistance'
-  isAlign?: false
 }): Promise<{
   modifiedAst: Program
   pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
 }> {
   const info = horzVertDistanceInfo({
     selectionRanges: selectionRanges,
@@ -133,13 +131,12 @@ export async function applyConstraintHorzVertDistance({
     return {
       modifiedAst,
       pathToNodeMap,
+      exprInsertIndex: -1,
     }
   } else {
     if (!isExprBinaryPart(valueNode))
       return Promise.reject('Invalid valueNode, is not a BinaryPart')
-    let finalValue = isAlign
+    let finalValue = removeDoubleNegatives(valueNode, sign, variableName)
-      ? createLiteral(0)
-      : removeDoubleNegatives(valueNode, sign, variableName)
     // transform again but forcing certain values
     const transformed = transformSecondarySketchLinesTagFirst({
       ast: kclManager.ast,
@@ -152,6 +149,7 @@ export async function applyConstraintHorzVertDistance({
 
     if (err(transformed)) return Promise.reject(transformed)
     const { modifiedAst: _modifiedAst, pathToNodeMap } = transformed
+    let exprInsertIndex = -1
     if (variableName) {
       const newBody = [..._modifiedAst.body]
       newBody.splice(
@@ -164,10 +162,12 @@ export async function applyConstraintHorzVertDistance({
         const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
         pathToNode[index][0] = Number(pathToNode[index][0]) + 1
       })
+      exprInsertIndex = newVariableInsertIndex
     }
     return {
       modifiedAst: _modifiedAst,
       pathToNodeMap,
+      exprInsertIndex,
     }
   }
 }

src/components/Toolbar/setAngleLength.tsx

@@ -70,10 +70,14 @@ export async function applyConstraintLength({
 }: {
   length: KclCommandValue
   selectionRanges: Selections
-}) {
+}): Promise<{
+  modifiedAst: Program
+  pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
+}> {
   const ast = kclManager.ast
   const angleLength = angleLengthInfo({ selectionRanges })
-  if (err(angleLength)) return angleLength
+  if (err(angleLength)) return Promise.reject(angleLength)
   const { transforms } = angleLength
 
   let distanceExpression: Expr = length.valueAst
@@ -94,7 +98,7 @@ export async function applyConstraintLength({
   }
 
   if (!isExprBinaryPart(distanceExpression)) {
-    return new Error('Invalid valueNode, is not a BinaryPart')
+    return Promise.reject('Invalid valueNode, is not a BinaryPart')
   }
 
   const retval = transformAstSketchLines({
@@ -112,6 +116,12 @@ export async function applyConstraintLength({
   return {
     modifiedAst: _modifiedAst,
     pathToNodeMap,
+    exprInsertIndex:
+      'variableName' in length &&
+      length.variableName &&
+      length.insertIndex !== undefined
+        ? length.insertIndex
+        : -1,
   }
 }
 
@@ -124,6 +134,7 @@ export async function applyConstraintAngleLength({
 }): Promise<{
   modifiedAst: Program
   pathToNodeMap: PathToNodeMap
+  exprInsertIndex: number
 }> {
   const angleLength = angleLengthInfo({ selectionRanges, angleOrLength })
   if (err(angleLength)) return Promise.reject(angleLength)
@@ -208,5 +219,6 @@ export async function applyConstraintAngleLength({
   return {
     modifiedAst: _modifiedAst,
     pathToNodeMap,
+    exprInsertIndex: variableName ? newVariableInsertIndex : -1,
   }
 }

src/components/UnitsMenu.tsx

@@ -41,7 +41,10 @@ export function UnitsMenu() {
                       close()
                     }}
                   >
-                    {baseUnitLabels[unit]}
+                    <span className="flex-1">{baseUnitLabels[unit]}</span>
+                    {unit === settings.context.modeling.defaultUnit.current && (
+                      <span className="text-chalkboard-60">current</span>
+                    )}
                   </button>
                 </li>
               ))}

src/components/ViewControlMenu.tsx

@@ -0,0 +1,66 @@
+import { reportRejection } from 'lib/trap'
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuItem,
+  ContextMenuItemRefresh,
+  ContextMenuProps,
+} from './ContextMenu'
+import { AxisNames, VIEW_NAMES_SEMANTIC } from 'lib/constants'
+import { useModelingContext } from 'hooks/useModelingContext'
+import { useMemo } from 'react'
+import { sceneInfra } from 'lib/singletons'
+
+export function useViewControlMenuItems() {
+  const { send: modelingSend } = useModelingContext()
+  const menuItems = useMemo(
+    () => [
+      ...Object.entries(VIEW_NAMES_SEMANTIC).map(([axisName, axisSemantic]) => (
+        <ContextMenuItem
+          key={axisName}
+          onClick={() => {
+            sceneInfra.camControls
+              .updateCameraToAxis(axisName as AxisNames)
+              .catch(reportRejection)
+          }}
+        >
+          {axisSemantic} view
+        </ContextMenuItem>
+      )),
+      <ContextMenuDivider />,
+      <ContextMenuItem
+        onClick={() => {
+          sceneInfra.camControls.resetCameraPosition().catch(reportRejection)
+        }}
+      >
+        Reset view
+      </ContextMenuItem>,
+      <ContextMenuItem
+        onClick={() => {
+          modelingSend({ type: 'Center camera on selection' })
+        }}
+      >
+        Center view on selection
+      </ContextMenuItem>,
+      <ContextMenuDivider />,
+      <ContextMenuItemRefresh />,
+    ],
+    [VIEW_NAMES_SEMANTIC]
+  )
+  return menuItems
+}
+
+export function ViewControlContextMenu({
+  menuTargetElement: wrapperRef,
+  ...props
+}: ContextMenuProps) {
+  const menuItems = useViewControlMenuItems()
+  return (
+    <ContextMenu
+      data-testid="view-controls-menu"
+      menuTargetElement={wrapperRef}
+      items={menuItems}
+      {...props}
+    />
+  )
+}

src/editor/plugins/lsp/kcl/colors.ts

@@ -0,0 +1,327 @@
+import {
+  EditorView,
+  WidgetType,
+  ViewUpdate,
+  ViewPlugin,
+  DecorationSet,
+  Decoration,
+} from '@codemirror/view'
+import { Range, Extension, Text } from '@codemirror/state'
+import { NodeProp, Tree } from '@lezer/common'
+import { language, syntaxTree } from '@codemirror/language'
+
+interface PickerState {
+  from: number
+  to: number
+  alpha: string
+  colorType: ColorType
+}
+
+export interface WidgetOptions extends PickerState {
+  color: string
+}
+
+export type ColorData = Omit<WidgetOptions, 'from' | 'to'>
+
+const pickerState = new WeakMap<HTMLInputElement, PickerState>()
+
+export enum ColorType {
+  hex = 'HEX',
+}
+
+const hexRegex = /(^|\b)(#[0-9a-f]{3,9})(\b|$)/i
+
+function discoverColorsInKCL(
+  syntaxTree: Tree,
+  from: number,
+  to: number,
+  typeName: string,
+  doc: Text,
+  language?: string
+): WidgetOptions | Array<WidgetOptions> | null {
+  switch (typeName) {
+    case 'Program':
+    case 'VariableDeclaration':
+    case 'CallExpression':
+    case 'ObjectExpression':
+    case 'ObjectProperty':
+    case 'ArgumentList':
+    case 'PipeExpression': {
+      let innerTree = syntaxTree.resolveInner(from, 0).tree
+
+      if (!innerTree) {
+        innerTree = syntaxTree.resolveInner(from, 1).tree
+        if (!innerTree) {
+          return null
+        }
+      }
+
+      const overlayTree = innerTree.prop(NodeProp.mounted)?.tree
+
+      if (overlayTree?.type.name !== 'Styles') {
+        return null
+      }
+
+      const ret: Array<WidgetOptions> = []
+      overlayTree.iterate({
+        from: 0,
+        to: overlayTree.length,
+        enter: ({ type, from: overlayFrom, to: overlayTo }) => {
+          const maybeWidgetOptions = discoverColorsInKCL(
+            syntaxTree,
+            // We add one because the tree doesn't include the
+            // quotation mark from the style tag
+            from + 1 + overlayFrom,
+            from + 1 + overlayTo,
+            type.name,
+            doc,
+            language
+          )
+
+          if (maybeWidgetOptions) {
+            if (Array.isArray(maybeWidgetOptions)) {
+              console.error('Unexpected nested overlays')
+              ret.push(...maybeWidgetOptions)
+            } else {
+              ret.push(maybeWidgetOptions)
+            }
+          }
+        },
+      })
+
+      return ret
+    }
+
+    case 'String': {
+      const result = parseColorLiteral(doc.sliceString(from, to))
+      if (!result) {
+        return null
+      }
+      return {
+        ...result,
+        from,
+        to,
+      }
+    }
+
+    default:
+      return null
+  }
+}
+
+export function parseColorLiteral(colorLiteral: string): ColorData | null {
+  const literal = colorLiteral.replace(/"/g, '')
+  const match = hexRegex.exec(literal)
+  if (!match) {
+    return null
+  }
+  const [color, alpha] = toFullHex(literal)
+
+  return {
+    colorType: ColorType.hex,
+    color,
+    alpha,
+  }
+}
+
+function colorPickersDecorations(
+  view: EditorView,
+  discoverColors: typeof discoverColorsInKCL
+) {
+  const widgets: Array<Range<Decoration>> = []
+
+  const st = syntaxTree(view.state)
+
+  for (const range of view.visibleRanges) {
+    st.iterate({
+      from: range.from,
+      to: range.to,
+      enter: ({ type, from, to }) => {
+        const maybeWidgetOptions = discoverColors(
+          st,
+          from,
+          to,
+          type.name,
+          view.state.doc,
+          view.state.facet(language)?.name
+        )
+
+        if (!maybeWidgetOptions) {
+          return
+        }
+
+        if (!Array.isArray(maybeWidgetOptions)) {
+          widgets.push(
+            Decoration.widget({
+              widget: new ColorPickerWidget(maybeWidgetOptions),
+              side: 1,
+            }).range(maybeWidgetOptions.from)
+          )
+
+          return
+        }
+
+        for (const wo of maybeWidgetOptions) {
+          widgets.push(
+            Decoration.widget({
+              widget: new ColorPickerWidget(wo),
+              side: 1,
+            }).range(wo.from)
+          )
+        }
+      },
+    })
+  }
+
+  return Decoration.set(widgets)
+}
+
+function toFullHex(color: string): string[] {
+  if (color.length === 4) {
+    // 3-char hex
+    return [
+      `#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`,
+      '',
+    ]
+  }
+
+  if (color.length === 5) {
+    // 4-char hex (alpha)
+    return [
+      `#${color[1].repeat(2)}${color[2].repeat(2)}${color[3].repeat(2)}`,
+      color[4].repeat(2),
+    ]
+  }
+
+  if (color.length === 9) {
+    // 8-char hex (alpha)
+    return [`#${color.slice(1, -2)}`, color.slice(-2)]
+  }
+
+  return [color, '']
+}
+
+export const wrapperClassName = 'cm-css-color-picker-wrapper'
+
+class ColorPickerWidget extends WidgetType {
+  private readonly state: PickerState
+  private readonly color: string
+
+  constructor({ color, ...state }: WidgetOptions) {
+    super()
+    this.state = state
+    this.color = color
+  }
+
+  eq(other: ColorPickerWidget) {
+    return (
+      other.state.colorType === this.state.colorType &&
+      other.color === this.color &&
+      other.state.from === this.state.from &&
+      other.state.to === this.state.to &&
+      other.state.alpha === this.state.alpha
+    )
+  }
+
+  toDOM() {
+    const picker = document.createElement('input')
+    pickerState.set(picker, this.state)
+    picker.type = 'color'
+    picker.value = this.color
+
+    const wrapper = document.createElement('span')
+    wrapper.appendChild(picker)
+    wrapper.className = wrapperClassName
+
+    return wrapper
+  }
+
+  ignoreEvent() {
+    return false
+  }
+}
+
+export const colorPickerTheme = EditorView.baseTheme({
+  [`.${wrapperClassName}`]: {
+    display: 'inline-block',
+    outline: '1px solid #eee',
+    marginRight: '0.6ch',
+    height: '1em',
+    width: '1em',
+    transform: 'translateY(1px)',
+  },
+  [`.${wrapperClassName} input[type="color"]`]: {
+    cursor: 'pointer',
+    height: '100%',
+    width: '100%',
+    padding: 0,
+    border: 'none',
+    '&::-webkit-color-swatch-wrapper': {
+      padding: 0,
+    },
+    '&::-webkit-color-swatch': {
+      border: 'none',
+    },
+    '&::-moz-color-swatch': {
+      border: 'none',
+    },
+  },
+})
+
+interface IFactoryOptions {
+  discoverColors: typeof discoverColorsInKCL
+}
+
+export const makeColorPicker = (options: IFactoryOptions) =>
+  ViewPlugin.fromClass(
+    class ColorPickerViewPlugin {
+      decorations: DecorationSet
+
+      constructor(view: EditorView) {
+        this.decorations = colorPickersDecorations(view, options.discoverColors)
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = colorPickersDecorations(
+            update.view,
+            options.discoverColors
+          )
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      eventHandlers: {
+        change: (e, view) => {
+          const target = e.target as HTMLInputElement
+          if (
+            target.nodeName !== 'INPUT' ||
+            !target.parentElement ||
+            !target.parentElement.classList.contains(wrapperClassName)
+          ) {
+            return false
+          }
+
+          const data = pickerState.get(target)!
+
+          let converted = '"' + target.value + data.alpha + '"'
+
+          view.dispatch({
+            changes: {
+              from: data.from,
+              to: data.to,
+              insert: converted,
+            },
+          })
+
+          return true
+        },
+      },
+    }
+  )
+
+export const colorPicker: Extension = [
+  makeColorPicker({ discoverColors: discoverColorsInKCL }),
+  colorPickerTheme,
+]

src/editor/plugins/lsp/kcl/language.ts

@@ -17,6 +17,7 @@ import { kclPlugin } from '.'
 import type * as LSP from 'vscode-languageserver-protocol'
 // @ts-ignore: No types available
 import { parser } from './kcl.grammar'
+import { colorPicker } from './colors'
 
 export interface LanguageOptions {
   workspaceFolders: LSP.WorkspaceFolder[]
@@ -54,14 +55,14 @@ export const KclLanguage = LRLanguage.define({
 })
 
 export function kcl(options: LanguageOptions) {
-  return new LanguageSupport(
+  return new LanguageSupport(KclLanguage, [
-    KclLanguage,
+    colorPicker,
     kclPlugin({
       documentUri: options.documentUri,
       workspaceFolders: options.workspaceFolders,
       allowHTMLContent: true,
       client: options.client,
       processLspNotification: options.processLspNotification,
-    })
+    }),
-  )
+  ])
 }

src/editor/plugins/lsp/types.ts

@@ -1,7 +1,5 @@
 import { LspWorkerEventType } from '@kittycad/codemirror-lsp-client'
 
-import { UnitLength } from 'wasm-lib/kcl/bindings/UnitLength'
-
 export enum LspWorker {
   Kcl = 'kcl',
   Copilot = 'copilot',
@@ -9,7 +7,6 @@ export enum LspWorker {
 export interface KclWorkerOptions {
   wasmUrl: string
   token: string
-  baseUnit: UnitLength
   apiBaseUrl: string
 }
 

src/editor/plugins/lsp/worker.ts

@@ -17,7 +17,6 @@ import {
   KclWorkerOptions,
   CopilotWorkerOptions,
 } from 'editor/plugins/lsp/types'
-import { EngineCommandManager } from 'lang/std/engineConnection'
 import { err, reportRejection } from 'lib/trap'
 
 const intoServer: IntoServer = new IntoServer()
@@ -46,14 +45,12 @@ export async function copilotLspRun(
 
 export async function kclLspRun(
   config: ServerConfig,
-  engineCommandManager: EngineCommandManager | null,
   token: string,
-  baseUnit: string,
   baseUrl: string
 ) {
   try {
     console.log('start kcl lsp')
-    await kcl_lsp_run(config, engineCommandManager, baseUnit, token, baseUrl)
+    await kcl_lsp_run(config, null, undefined, token, baseUrl)
   } catch (e: any) {
     console.log('kcl lsp failed', e)
     // We can't restart here because a moved value, we should do this another way.
@@ -82,13 +79,7 @@ onmessage = function (event: MessageEvent) {
           switch (worker) {
             case LspWorker.Kcl:
               const kclData = eventData as KclWorkerOptions
-              await kclLspRun(
+              await kclLspRun(config, kclData.token, kclData.apiBaseUrl)
-                config,
-                null,
-                kclData.token,
-                kclData.baseUnit,
-                kclData.apiBaseUrl
-              )
               break
             case LspWorker.Copilot:
               let copilotData = eventData as CopilotWorkerOptions

src/hooks/useSetupEngineManager.ts

@@ -2,7 +2,7 @@ import { useLayoutEffect, useEffect, useRef } from 'react'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { deferExecution } from 'lib/utils'
 import { Themes } from 'lib/theme'
-import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
+import { makeDefaultPlanes } from 'lang/wasm'
 import { useModelingContext } from './useModelingContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { useAppState, useAppStream } from 'AppState'
@@ -56,9 +56,6 @@ export function useSetupEngineManager(
       makeDefaultPlanes: () => {
         return makeDefaultPlanes(kclManager.engineCommandManager)
       },
-      modifyGrid: (hidden: boolean) => {
-        return modifyGrid(kclManager.engineCommandManager, hidden)
-      },
     })
     hasSetNonZeroDimensions.current = true
   }

src/index.css

@@ -317,3 +317,8 @@ code {
 #code-mirror-override .cm-editor {
   height: 100% !important;
 }
+
+/* Can't use #code-mirror-override here as we're outside of this div */
+.body-bg .cm-diagnosticAction {
+  @apply bg-primary;
+}

src/lang/KclSingleton.ts

@@ -311,8 +311,6 @@ export class KclManager {
     // Do not send send scene commands if the program was interrupted, go to clean up
     if (!isInterrupted) {
       this.addDiagnostics(await lintAst({ ast: ast }))
-
-      sceneInfra.modelingSend({ type: 'code edit during sketch' })
       setSelectionFilterToDefault(execState.memory, this.engineCommandManager)
 
       if (args.zoomToFit) {
@@ -358,7 +356,11 @@ export class KclManager {
       this.lastSuccessfulProgramMemory = execState.memory
     }
     this.ast = { ...ast }
+    // updateArtifactGraph relies on updated executeState/programMemory
+    await this.engineCommandManager.updateArtifactGraph(this.ast)
     this._executeCallback()
+    if (!isInterrupted)
+      sceneInfra.modelingSend({ type: 'code edit during sketch' })
     this.engineCommandManager.addCommandLog({
       type: 'execution-done',
       data: null,
@@ -400,6 +402,7 @@ export class KclManager {
 
     this._logs = logs
     this.addDiagnostics(kclErrorsToDiagnostics(errors))
+
     this._execState = execState
     this._programMemory = execState.memory
     if (!errors.length) {
@@ -411,7 +414,7 @@ export class KclManager {
     // problem this solves, but either way we should strive to remove it.
     Array.from(this.engineCommandManager.artifactGraph).forEach(
       ([commandId, artifact]) => {
-        if (!('codeRef' in artifact)) return
+        if (!('codeRef' in artifact && artifact.codeRef)) return
         const _node1 = getNodeFromPath<Node<CallExpression>>(
           this.ast,
           artifact.codeRef.pathToNode,

src/lang/artifact.test.ts

@@ -22,6 +22,7 @@ const mySketch001 = startSketchOn('XY')
       value: {
         type: 'Sketch',
         on: expect.any(Object),
+        originalId: expect.any(String),
         start: {
           to: [0, 0],
           from: [0, 0],
@@ -91,6 +92,7 @@ const mySketch001 = startSketchOn('XY')
       ],
       sketch: {
         id: expect.any(String),
+        originalId: expect.any(String),
         __meta: expect.any(Array),
         on: expect.any(Object),
         start: expect.any(Object),
@@ -185,6 +187,7 @@ const sk2 = startSketchOn('XY')
         ],
         sketch: {
           id: expect.any(String),
+          originalId: expect.any(String),
           __meta: expect.any(Array),
           on: expect.any(Object),
           start: expect.any(Object),
@@ -277,6 +280,7 @@ const sk2 = startSketchOn('XY')
         ],
         sketch: {
           id: expect.any(String),
+          originalId: expect.any(String),
           __meta: expect.any(Array),
           on: expect.any(Object),
           start: expect.any(Object),

src/lang/executor.test.ts

@@ -160,6 +160,7 @@ const newVar = myVar + 1`
       value: {
         type: 'Sketch',
         on: expect.any(Object),
+        originalId: expect.any(String),
         start: {
           to: [0, 0],
           from: [0, 0],

src/lang/langHelpers.ts

@@ -1,6 +1,6 @@
 import {
   Program,
-  _executor,
+  executor,
   ProgramMemory,
   kclLint,
   emptyExecState,
@@ -64,12 +64,9 @@ export async function executeAst({
   try {
     const execState = await (programMemoryOverride
       ? enginelessExecutor(ast, programMemoryOverride)
-      : _executor(ast, engineCommandManager))
+      : executor(ast, engineCommandManager))
-
-    await engineCommandManager.waitForAllCommands(
-      programMemoryOverride !== undefined
-    )
 
+    await engineCommandManager.waitForAllCommands()
     return {
       logs: [],
       errors: [],

src/lang/modifyAst.test.ts

@@ -16,6 +16,7 @@ import {
   deleteSegmentFromPipeExpression,
   removeSingleConstraintInfo,
   deleteFromSelection,
+  splitPipedProfile,
 } from './modifyAst'
 import { enginelessExecutor } from '../lib/testHelpers'
 import { findUsesOfTagInPipe, getNodePathFromSourceRange } from './queryAst'
@@ -918,3 +919,63 @@ sketch002 = startSketchOn({
     }
   )
 })
+
+describe('Testing splitPipedProfile', () => {
+  it('should split the pipe expression correctly', () => {
+    const codeBefore = `part001 = startSketchOn('XZ')
+  |> startProfileAt([1, 2], %)
+  |> line([3, 4], %)
+  |> line([5, 6], %)
+  |> close(%)
+extrude001 = extrude(5, part001)
+    `
+
+    const expectedCodeAfter = `sketch001 = startSketchOn('XZ')
+part001 = startProfileAt([1, 2], sketch001)
+  |> line([3, 4], %)
+  |> line([5, 6], %)
+  |> close(%)
+extrude001 = extrude(5, part001)
+    `
+
+    const ast = assertParse(codeBefore)
+
+    const codeOfInterest = `startSketchOn('XZ')`
+    const range: [number, number, boolean] = [
+      codeBefore.indexOf(codeOfInterest),
+      codeBefore.indexOf(codeOfInterest) + codeOfInterest.length,
+      true,
+    ]
+    const pathToPipe = getNodePathFromSourceRange(ast, range)
+
+    const result = splitPipedProfile(ast, pathToPipe)
+
+    if (err(result)) throw result
+
+    const newCode = recast(result.modifiedAst)
+    if (err(newCode)) throw newCode
+    expect(newCode.trim()).toBe(expectedCodeAfter.trim())
+  })
+  it('should return error for already split pipe', () => {
+    const codeBefore = `sketch001 = startSketchOn('XZ')
+part001 = startProfileAt([1, 2], sketch001)
+  |> line([3, 4], %)
+  |> line([5, 6], %)
+  |> close(%)
+extrude001 = extrude(5, part001)
+    `
+
+    const ast = assertParse(codeBefore)
+
+    const codeOfInterest = `startProfileAt([1, 2], sketch001)`
+    const range: [number, number, boolean] = [
+      codeBefore.indexOf(codeOfInterest),
+      codeBefore.indexOf(codeOfInterest) + codeOfInterest.length,
+      true,
+    ]
+    const pathToPipe = getNodePathFromSourceRange(ast, range)
+
+    const result = splitPipedProfile(ast, pathToPipe)
+    expect(result instanceof Error).toBe(true)
+  })
+})

src/lang/modifyAst.ts

@@ -29,6 +29,8 @@ import {
   getNodePathFromSourceRange,
   isNodeSafeToReplace,
   traverse,
+  getBodyIndex,
+  isCallExprWithName,
 } from './queryAst'
 import { addTagForSketchOnFace, getConstraintInfo } from './std/sketch'
 import {
@@ -46,6 +48,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 { Artifact, getPathsFromArtifact } from './std/artifactGraph'
 
 export function startSketchOnDefault(
   node: Node<Program>,
@@ -78,41 +81,54 @@ export function startSketchOnDefault(
   }
 }
 
-export function addStartProfileAt(
+export function insertNewStartProfileAt(
   node: Node<Program>,
-  pathToNode: PathToNode,
+  sketchEntryNodePath: PathToNode,
-  at: [number, number]
+  sketchNodePaths: PathToNode[],
-): { modifiedAst: Node<Program>; pathToNode: PathToNode } | Error {
+  planeNodePath: PathToNode,
-  const _node1 = getNodeFromPath<VariableDeclaration>(
+  at: [number, number],
+  insertType: 'start' | 'end' = 'end'
+):
+  | {
+      modifiedAst: Node<Program>
+      updatedSketchNodePaths: PathToNode[]
+      updatedEntryNodePath: PathToNode
+    }
+  | Error {
+  const varDec = getNodeFromPath<VariableDeclarator>(
     node,
-    pathToNode,
+    planeNodePath,
-    'VariableDeclaration'
+    'VariableDeclarator'
   )
-  if (err(_node1)) return _node1
+  if (err(varDec)) return varDec
-  const variableDeclaration = _node1.node
+  if (varDec.node.type !== 'VariableDeclarator') return new Error('not a var')
-  if (variableDeclaration.type !== 'VariableDeclaration') {
+
-    return new Error('variableDeclaration.init.type !== PipeExpression')
+  const newExpression = createVariableDeclaration(
-  }
+    findUniqueName(node, 'profile'),
-  const _node = { ...node }
+    createCallExpressionStdLib('startProfileAt', [
-  const init = variableDeclaration.declaration.init
+      createArrayExpression([
-  const startProfileAt = createCallExpressionStdLib('startProfileAt', [
+        createLiteral(roundOff(at[0])),
-    createArrayExpression([
+        createLiteral(roundOff(at[1])),
-      createLiteral(roundOff(at[0])),
+      ]),
-      createLiteral(roundOff(at[1])),
+      createIdentifier(varDec.node.id.name),
-    ]),
-    createPipeSubstitution(),
-  ])
-  if (init.type === 'PipeExpression') {
-    init.body.splice(1, 0, startProfileAt)
-  } else {
-    variableDeclaration.declaration.init = createPipeExpression([
-      init,
-      startProfileAt,
     ])
-  }
+  )
+  const insertIndex = getInsertIndex(sketchNodePaths, planeNodePath, insertType)
+
+  const _node = structuredClone(node)
+  // TODO the rest of this function will not be robust to work for sketches defined within a function declaration
+  _node.body.splice(insertIndex, 0, newExpression)
+
+  const { updatedEntryNodePath, updatedSketchNodePaths } =
+    updateSketchNodePathsWithInsertIndex({
+      insertIndex,
+      insertType,
+      sketchNodePaths,
+    })
   return {
     modifiedAst: _node,
-    pathToNode,
+    updatedSketchNodePaths,
+    updatedEntryNodePath,
   }
 }
 
@@ -253,7 +269,7 @@ export function mutateObjExpProp(
 export function extrudeSketch(
   node: Node<Program>,
   pathToNode: PathToNode,
-  shouldPipe = false,
+  artifact?: Artifact,
   distance: Expr = createLiteral(4)
 ):
   | {
@@ -262,10 +278,14 @@ export function extrudeSketch(
       pathToExtrudeArg: PathToNode
     }
   | Error {
+  const orderedSketchNodePaths = getPathsFromArtifact({
+    artifact: artifact,
+    sketchPathToNode: pathToNode,
+  })
+  if (err(orderedSketchNodePaths)) return orderedSketchNodePaths
   const _node = structuredClone(node)
   const _node1 = getNodeFromPath(_node, pathToNode)
   if (err(_node1)) return _node1
-  const { node: sketchExpression } = _node1
 
   // determine if sketchExpression is in a pipeExpression or not
   const _node2 = getNodeFromPath<PipeExpression>(
@@ -274,9 +294,6 @@ export function extrudeSketch(
     'PipeExpression'
   )
   if (err(_node2)) return _node2
-  const { node: pipeExpression } = _node2
-
-  const isInPipeExpression = pipeExpression.type === 'PipeExpression'
 
   const _node3 = getNodeFromPath<VariableDeclarator>(
     _node,
@@ -284,49 +301,23 @@ export function extrudeSketch(
     'VariableDeclarator'
   )
   if (err(_node3)) return _node3
-  const { node: variableDeclarator, shallowPath: pathToDecleration } = _node3
+  const { node: variableDeclarator } = _node3
 
   const extrudeCall = createCallExpressionStdLib('extrude', [
     distance,
-    shouldPipe
+    createIdentifier(variableDeclarator.id.name),
-      ? createPipeSubstitution()
-      : createIdentifier(variableDeclarator.id.name),
   ])
 
-  if (shouldPipe) {
-    const pipeChain = createPipeExpression(
-      isInPipeExpression
-        ? [...pipeExpression.body, extrudeCall]
-        : [sketchExpression as any, extrudeCall]
-    )
-
-    variableDeclarator.init = pipeChain
-    const pathToExtrudeArg: PathToNode = [
-      ...pathToDecleration,
-      ['init', 'VariableDeclarator'],
-      ['body', ''],
-      [pipeChain.body.length - 1, 'index'],
-      ['arguments', 'CallExpression'],
-      [0, 'index'],
-    ]
-
-    return {
-      modifiedAst: _node,
-      pathToNode,
-      pathToExtrudeArg,
-    }
-  }
-
   // We're not creating a pipe expression,
   // but rather a separate constant for the extrusion
   const name = findUniqueName(node, KCL_DEFAULT_CONSTANT_PREFIXES.EXTRUDE)
   const VariableDeclaration = createVariableDeclaration(name, extrudeCall)
 
-  const sketchIndexInPathToNode =
+  const lastSketchNodePath =
-    pathToDecleration.findIndex((a) => a[0] === 'body') + 1
+    orderedSketchNodePaths[orderedSketchNodePaths.length - 1]
-  const sketchIndexInBody = pathToDecleration[
+
-    sketchIndexInPathToNode
+  console.log('lastSketchNodePath', lastSketchNodePath, orderedSketchNodePaths)
-  ][0] as number
+  const sketchIndexInBody = Number(lastSketchNodePath[1][0])
   _node.body.splice(sketchIndexInBody + 1, 0, VariableDeclaration)
 
   const pathToExtrudeArg: PathToNode = [
@@ -1295,7 +1286,8 @@ export async function deleteFromSelection(
     const pipeBody = varDec.node.init.body
     if (
       pipeBody[0].type === 'CallExpression' &&
-      pipeBody[0].callee.name === 'startSketchOn'
+      (pipeBody[0].callee.name === 'startSketchOn' ||
+        pipeBody[0].callee.name === 'startProfileAt')
     ) {
       // remove varDec
       const varDecIndex = varDec.shallowPath[1][0] as number
@@ -1310,3 +1302,149 @@ export async function deleteFromSelection(
 const nonCodeMetaEmpty = () => {
   return { nonCodeNodes: {}, startNodes: [], start: 0, end: 0 }
 }
+
+export function getInsertIndex(
+  sketchNodePaths: PathToNode[],
+  planeNodePath: PathToNode,
+  insertType: 'start' | 'end'
+) {
+  let minIndex = 0
+  let maxIndex = 0
+  for (const path of sketchNodePaths) {
+    const index = Number(path[1][0])
+    if (index < minIndex) minIndex = index
+    if (index > maxIndex) maxIndex = index
+  }
+
+  const insertIndex = !sketchNodePaths.length
+    ? Number(planeNodePath[1][0]) + 1
+    : insertType === 'start'
+    ? minIndex
+    : maxIndex + 1
+  return insertIndex
+}
+
+export function updateSketchNodePathsWithInsertIndex({
+  insertIndex,
+  insertType,
+  sketchNodePaths,
+}: {
+  insertIndex: number
+  insertType: 'start' | 'end'
+  sketchNodePaths: PathToNode[]
+}): {
+  updatedEntryNodePath: PathToNode
+  updatedSketchNodePaths: PathToNode[]
+} {
+  // TODO the rest of this function will not be robust to work for sketches defined within a function declaration
+  const newExpressionPathToNode: PathToNode = [
+    ['body', ''],
+    [insertIndex, 'index'],
+    ['declaration', 'VariableDeclaration'],
+    ['init', 'VariableDeclarator'],
+  ]
+  let updatedSketchNodePaths = structuredClone(sketchNodePaths)
+  if (insertType === 'start') {
+    updatedSketchNodePaths = updatedSketchNodePaths.map((path) => {
+      path[1][0] = Number(path[1][0]) + 1
+      return path
+    })
+    updatedSketchNodePaths.unshift(newExpressionPathToNode)
+  } else {
+    updatedSketchNodePaths.push(newExpressionPathToNode)
+  }
+  return {
+    updatedSketchNodePaths,
+    updatedEntryNodePath: newExpressionPathToNode,
+  }
+}
+
+/**
+ * 
+ * Split the following pipe expression into 
+ * ```ts
+ * part001 = startSketchOn('XZ')
+  |> startProfileAt([1, 2], %)
+  |> line([3, 4], %)
+  |> line([5, 6], %)
+  |> close(%)
+extrude001 = extrude(5, part001)
+```
+into
+```ts
+sketch001 = startSketchOn('XZ')
+part001 = startProfileAt([1, 2], sketch001)
+  |> line([3, 4], %)
+  |> line([5, 6], %)
+  |> close(%)
+extrude001 = extrude(5, part001)
+```
+Notice that the `startSketchOn` is what gets the new variable name, this is so part001 still has the same data as before
+making it safe for later code that uses part001 (the extrude in this example)
+ * 
+ */
+export function splitPipedProfile(
+  ast: Program,
+  pathToPipe: PathToNode
+):
+  | {
+      modifiedAst: Program
+      pathToProfile: PathToNode
+      pathToPlane: PathToNode
+    }
+  | Error {
+  const _ast = structuredClone(ast)
+  const varDec = getNodeFromPath<VariableDeclaration>(
+    _ast,
+    pathToPipe,
+    'VariableDeclaration'
+  )
+  if (err(varDec)) return varDec
+  if (
+    varDec.node.type !== 'VariableDeclaration' ||
+    varDec.node.declaration.init.type !== 'PipeExpression'
+  ) {
+    return new Error('pathToNode does not point to pipe')
+  }
+  const init = varDec.node.declaration.init
+  const firstCall = init.body[0]
+  if (!isCallExprWithName(firstCall, 'startSketchOn'))
+    return new Error('First call is not startSketchOn')
+  const secondCall = init.body[1]
+  if (!isCallExprWithName(secondCall, 'startProfileAt'))
+    return new Error('Second call is not startProfileAt')
+
+  const varName = varDec.node.declaration.id.name
+  const newVarName = findUniqueName(_ast, 'sketch')
+  const secondCallArgs = structuredClone(secondCall.arguments)
+  secondCallArgs[1] = createIdentifier(newVarName)
+  const firstCallOfNewPipe = createCallExpression(
+    'startProfileAt',
+    secondCallArgs
+  )
+  const newSketch = createVariableDeclaration(
+    newVarName,
+    varDec.node.declaration.init.body[0]
+  )
+  const newProfile = createVariableDeclaration(
+    varName,
+    varDec.node.declaration.init.body.length <= 2
+      ? firstCallOfNewPipe
+      : createPipeExpression([
+          firstCallOfNewPipe,
+          ...varDec.node.declaration.init.body.slice(2),
+        ])
+  )
+  const index = getBodyIndex(pathToPipe)
+  if (err(index)) return index
+  _ast.body.splice(index, 1, newSketch, newProfile)
+  const pathToPlane = structuredClone(pathToPipe)
+  const pathToProfile = structuredClone(pathToPipe)
+  pathToProfile[1][0] = index + 1
+
+  return {
+    modifiedAst: _ast,
+    pathToProfile,
+    pathToPlane,
+  }
+}

src/lang/modifyAst/addEdgeTreatment.test.ts

@@ -40,7 +40,6 @@ beforeAll(async () => {
       makeDefaultPlanes: () => makeDefaultPlanes(engineCommandManager),
       setMediaStream: () => {},
       setIsStreamReady: () => {},
-      modifyGrid: async () => {},
       callbackOnEngineLiteConnect: () => {
         resolve(true)
       },
@@ -248,7 +247,7 @@ extrude003 = extrude(-15, sketch003)`
       selectedSegmentSnippet,
       expectedExtrudeSnippet
     )
-  })
+  }, 5_000)
 })
 
 const runModifyAstCloneWithEdgeTreatmentAndTag = async (
@@ -276,7 +275,7 @@ const runModifyAstCloneWithEdgeTreatmentAndTag = async (
   const selection: Selections = {
     graphSelections: segmentRanges.map((segmentRange) => {
       const maybeArtifact = [...artifactGraph].find(([, a]) => {
-        if (!('codeRef' in a)) return false
+        if (!('codeRef' in a && a.codeRef)) return false
         return isOverlap(a.codeRef.range, segmentRange)
       })
       return {
@@ -478,7 +477,7 @@ extrude001 = extrude(-15, sketch001)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
   |> close(%)
 extrude001 = extrude(-15, sketch001)
-  |> chamfer({ length: 5, tags: [seg01] }, %)`
+  |> chamfer({ length = 5, tags = [seg01] }, %)`
         const segmentSnippets = ['line([-20, 0], %)']
         const expectedCode = `sketch001 = startSketchOn('XY')
   |> startProfileAt([-10, 10], %)
@@ -488,8 +487,8 @@ extrude001 = extrude(-15, sketch001)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
   |> close(%)
 extrude001 = extrude(-15, sketch001)
-  |> chamfer({ length: 5, tags: [seg01] }, %)
+  |> chamfer({ length = 5, tags = [seg01] }, %)
-  |> ${edgeTreatmentType}({ ${parameterName}: 3, tags: [seg02] }, %)`
+  |> ${edgeTreatmentType}({ ${parameterName} = 3, tags = [seg02] }, %)`
 
         await runModifyAstCloneWithEdgeTreatmentAndTag(
           code,

src/lang/modifyAst/addRevolve.ts

@@ -5,7 +5,6 @@ import {
   PathToNode,
   Expr,
   CallExpression,
-  PipeExpression,
   VariableDeclarator,
 } from 'lang/wasm'
 import { Selections } from 'lib/selections'
@@ -15,7 +14,6 @@ import {
   createCallExpressionStdLib,
   createObjectExpression,
   createIdentifier,
-  createPipeExpression,
   findUniqueName,
   createVariableDeclaration,
 } from 'lang/modifyAst'
@@ -24,12 +22,13 @@ import {
   mutateAstWithTagForSketchSegment,
   getEdgeTagCall,
 } from 'lang/modifyAst/addEdgeTreatment'
+import { Artifact, getPathsFromArtifact } from 'lang/std/artifactGraph'
 export function revolveSketch(
   ast: Node<Program>,
   pathToSketchNode: PathToNode,
-  shouldPipe = false,
   angle: Expr = createLiteral(4),
-  axis: Selections
+  axis: Selections,
+  artifact?: Artifact
 ):
   | {
       modifiedAst: Node<Program>
@@ -37,6 +36,11 @@ export function revolveSketch(
       pathToRevolveArg: PathToNode
     }
   | Error {
+  const orderedSketchNodePaths = getPathsFromArtifact({
+    artifact: artifact,
+    sketchPathToNode: pathToSketchNode,
+  })
+  if (err(orderedSketchNodePaths)) return orderedSketchNodePaths
   const clonedAst = structuredClone(ast)
   const sketchNode = getNodeFromPath(clonedAst, pathToSketchNode)
   if (err(sketchNode)) return sketchNode
@@ -67,29 +71,13 @@ export function revolveSketch(
   if (err(tagResult)) return tagResult
   const { tag } = tagResult
 
-  /* Original Code */
-  const { node: sketchExpression } = sketchNode
-
-  // determine if sketchExpression is in a pipeExpression or not
-  const sketchPipeExpressionNode = getNodeFromPath<PipeExpression>(
-    clonedAst,
-    pathToSketchNode,
-    'PipeExpression'
-  )
-  if (err(sketchPipeExpressionNode)) return sketchPipeExpressionNode
-  const { node: sketchPipeExpression } = sketchPipeExpressionNode
-  const isInPipeExpression = sketchPipeExpression.type === 'PipeExpression'
-
   const sketchVariableDeclaratorNode = getNodeFromPath<VariableDeclarator>(
     clonedAst,
     pathToSketchNode,
     'VariableDeclarator'
   )
   if (err(sketchVariableDeclaratorNode)) return sketchVariableDeclaratorNode
-  const {
+  const { node: sketchVariableDeclarator } = sketchVariableDeclaratorNode
-    node: sketchVariableDeclarator,
-    shallowPath: sketchPathToDecleration,
-  } = sketchVariableDeclaratorNode
 
   const axisSelection = axis?.graphSelections[0]?.artifact
 
@@ -103,37 +91,13 @@ export function revolveSketch(
     createIdentifier(sketchVariableDeclarator.id.name),
   ])
 
-  if (shouldPipe) {
-    const pipeChain = createPipeExpression(
-      isInPipeExpression
-        ? [...sketchPipeExpression.body, revolveCall]
-        : [sketchExpression as any, revolveCall]
-    )
-
-    sketchVariableDeclarator.init = pipeChain
-    const pathToRevolveArg: PathToNode = [
-      ...sketchPathToDecleration,
-      ['init', 'VariableDeclarator'],
-      ['body', ''],
-      [pipeChain.body.length - 1, 'index'],
-      ['arguments', 'CallExpression'],
-      [0, 'index'],
-    ]
-
-    return {
-      modifiedAst: clonedAst,
-      pathToSketchNode,
-      pathToRevolveArg,
-    }
-  }
-
   // We're not creating a pipe expression,
   // but rather a separate constant for the extrusion
   const name = findUniqueName(clonedAst, KCL_DEFAULT_CONSTANT_PREFIXES.REVOLVE)
   const VariableDeclaration = createVariableDeclaration(name, revolveCall)
-  const sketchIndexInPathToNode =
+  const lastSketchNodePath =
-    sketchPathToDecleration.findIndex((a) => a[0] === 'body') + 1
+    orderedSketchNodePaths[orderedSketchNodePaths.length - 1]
-  const sketchIndexInBody = sketchPathToDecleration[sketchIndexInPathToNode][0]
+  const sketchIndexInBody = Number(lastSketchNodePath[1][0])
   if (typeof sketchIndexInBody !== 'number')
     return new Error('expected sketchIndexInBody to be a number')
   clonedAst.body.splice(sketchIndexInBody + 1, 0, VariableDeclaration)

src/lang/queryAst.ts

@@ -33,6 +33,7 @@ import { err, Reason } from 'lib/trap'
 import { ImportStatement } from 'wasm-lib/kcl/bindings/ImportStatement'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { ArtifactGraph, codeRefFromRange } from './std/artifactGraph'
+import { FunctionExpression } from 'wasm-lib/kcl/bindings/FunctionExpression'
 
 /**
  * Retrieves a node from a given path within a Program node structure, optionally stopping at a specified node type.
@@ -596,7 +597,13 @@ export function findAllPreviousVariables(
 type ReplacerFn = (
   _ast: Node<Program>,
   varName: string
-) => { modifiedAst: Node<Program>; pathToReplaced: PathToNode } | Error
+) =>
+  | {
+      modifiedAst: Node<Program>
+      pathToReplaced: PathToNode
+      exprInsertIndex: number
+    }
+  | Error
 
 export function isNodeSafeToReplacePath(
   ast: Program,
@@ -648,7 +655,7 @@ export function isNodeSafeToReplacePath(
     if (err(_nodeToReplace)) return _nodeToReplace
     const nodeToReplace = _nodeToReplace.node as any
     nodeToReplace[last[0]] = identifier
-    return { modifiedAst: _ast, pathToReplaced }
+    return { modifiedAst: _ast, pathToReplaced, exprInsertIndex: index }
   }
 
   const hasPipeSub = isTypeInValue(finVal as Expr, 'PipeSubstitution')
@@ -767,8 +774,15 @@ export function isLinesParallelAndConstrained(
     if (err(_primarySegment)) return _primarySegment
     const primarySegment = _primarySegment.segment
 
+    const _varDec2 = getNodeFromPath(ast, secondaryPath, 'VariableDeclaration')
+    if (err(_varDec2)) return _varDec2
+    const varDec2 = _varDec2.node
+    const varName2 = (varDec2 as VariableDeclaration)?.declaration.id?.name
+    const sg2 = sketchFromKclValue(programMemory?.get(varName2), varName2)
+    if (err(sg2)) return sg2
+
     const _segment = getSketchSegmentFromSourceRange(
-      sg,
+      sg2,
       secondaryLine?.codeRef?.range
     )
     if (err(_segment)) return _segment
@@ -1101,3 +1115,57 @@ export function getObjExprProperty(
   if (index === -1) return null
   return { expr: node.properties[index].value, index }
 }
+
+export function isCursorInFunctionDefinition(
+  ast: Node<Program>,
+  selectionRanges: Selection
+): boolean {
+  if (!selectionRanges?.codeRef?.pathToNode) return false
+  const node = getNodeFromPath<FunctionExpression>(
+    ast,
+    selectionRanges.codeRef.pathToNode,
+    'FunctionExpression'
+  )
+  if (err(node)) return false
+  if (node.node.type === 'FunctionExpression') return true
+  return false
+}
+
+export function getBodyIndex(pathToNode: PathToNode): number | Error {
+  const index = Number(pathToNode[1][0])
+  if (Number.isInteger(index)) return index
+  return new Error('Expected number index')
+}
+
+export function isCallExprWithName(
+  expr: Expr | CallExpression,
+  name: string
+): expr is CallExpression {
+  if (expr.type === 'CallExpression' && expr.callee.type === 'Identifier') {
+    return expr.callee.name === name
+  }
+  return false
+}
+
+export function doesSketchPipeNeedSplitting(
+  ast: Node<Program>,
+  pathToPipe: PathToNode
+): boolean | Error {
+  const varDec = getNodeFromPath<VariableDeclarator>(
+    ast,
+    pathToPipe,
+    'VariableDeclarator'
+  )
+  if (err(varDec)) return varDec
+  if (varDec.node.type !== 'VariableDeclarator') return new Error('Not a var')
+  const pipeExpression = varDec.node.init
+  if (pipeExpression.type !== 'PipeExpression') return false
+  const [firstPipe, secondPipe] = pipeExpression.body
+  if (!firstPipe || !secondPipe) return false
+  if (
+    isCallExprWithName(firstPipe, 'startSketchOn') &&
+    isCallExprWithName(secondPipe, 'startProfileAt')
+  )
+    return true
+  return false
+}