Cut release v0.22.3 (#2729)

* Make sure we always reset the code on important steps no matter what the user did to it

* Convert comments in codeManager to JSDoc comments so they appear in diagnostics

* Was using the wrong codeManager callback

* Make sure editorView is available before resetting code

* Add Playwright test that shows the code being reset

* Fix up text that looks like linksÏ

* fmt

* Skip test on MacOS, make test more reliable on Chrome

* Update cargo-clippy to run based on paths on PRs as well

* playw fix

* try keep reports

* add fix me

* try one last thing

* fmt

---------

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

.codespellrc

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

.envrc

@@ -0,0 +1 @@
+use flake .

.github/workflows/cargo-check.yml

@@ -0,0 +1,40 @@
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**/Cargo.toml'
+      - '**/Cargo.lock'
+      - '**/rust-toolchain.toml'
+      - '**.rs'
+      - .github/workflows/cargo-check.yml
+  pull_request:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+name: cargo check
+jobs:
+  cargocheck:
+    name: cargo check
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        dir: ['src/wasm-lib']
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install latest rust
+        uses: actions-rs/toolchain@v1
+        with:
+            toolchain: stable
+            override: true
+
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2.6.1
+
+      - name: Run check
+        run: |
+          cd "${{ matrix.dir }}"
+          # We specifically want to test the disable-println feature
+          # Since it is not enabled by default, we need to specify it
+          # This is used in kcl-lsp
+          cargo check --all --features disable-println --features pyo3

.github/workflows/cargo-clippy.yml

@@ -9,6 +9,12 @@ on:
       - '**.rs'
       - .github/workflows/cargo-clippy.yml
   pull_request:
+    paths:
+      - '**/Cargo.toml'
+      - '**/Cargo.lock'
+      - '**/rust-toolchain.toml'
+      - '**.rs'
+      - .github/workflows/cargo-clippy.yml
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
@@ -54,3 +60,8 @@ jobs:
         run: |
           cd "${{ matrix.dir }}"
           cargo clippy --all --tests --benches -- -D warnings
+      # If this fails, run "cargo check" to update Cargo.lock,
+      # then add Cargo.lock to the PR.
+      - name: Check Cargo.lock doesn't need updating
+        run: |
+          cargo check --locked || echo "Pls run cargo check and commit the changed Cargo.lock"

.github/workflows/ci.yml

@@ -180,9 +180,7 @@ jobs:
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
 
-      # TODO: re-enable for Windows builds, see https://github.com/tauri-apps/tauri/issues/9045
       - name: Setup Rust cache
-        if: matrix.os != 'windows-latest'
         uses: swatinem/rust-cache@v2
         with:
           workspaces: './src-tauri -> target'

.github/workflows/playwright.yml

@@ -46,12 +46,18 @@ jobs:
     - uses: KittyCAD/action-install-cli@main
     - name: Install dependencies
       run: yarn
+    - name: Cache Playwright Browsers
+      uses: actions/cache@v4
+      with:
+        path: |
+          ~/.cache/ms-playwright/
+        key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps
     - name: Download Wasm Cache
       id: download-wasm
       if: needs.check-rust-changes.outputs.rust-changed == 'false'
-      uses: dawidd6/action-download-artifact@v3
+      uses: dawidd6/action-download-artifact@v6
       continue-on-error: true
       with:
         github_token: ${{secrets.GITHUB_TOKEN}}
@@ -127,7 +133,7 @@ jobs:
     - uses: actions/upload-artifact@v3
       if: always()
       with:
-        name: playwright-report
+        name: playwright-report-ubuntu
         path: playwright-report/
         retention-days: 30
 
@@ -143,12 +149,20 @@ jobs:
         cache: 'yarn'
     - name: Install dependencies
       run: yarn
+    - name: Cache Playwright Browsers
+      uses: actions/cache@v4
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps
     - name: Download Wasm Cache
       id: download-wasm
       if: needs.check-rust-changes.outputs.rust-changed == 'false'
-      uses: dawidd6/action-download-artifact@v3
+      uses: dawidd6/action-download-artifact@v6
       continue-on-error: true
       with:
         github_token: ${{secrets.GITHUB_TOKEN}}
@@ -190,6 +204,6 @@ jobs:
     - uses: actions/upload-artifact@v3
       if: always()
       with:
-        name: playwright-report
+        name: playwright-report-macos
         path: playwright-report/
         retention-days: 30

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.direnv
 
 npm-debug.log*
 yarn-debug.log*

Makefile

@@ -0,0 +1,14 @@
+.PHONY: dev
+
+WASM_LIB_FILES := $(wildcard src/wasm-lib/**/*.rs)
+
+dev: node_modules public/wasm_lib_bg.wasm
+	yarn start
+
+public/wasm_lib_bg.wasm: $(WASM_LIB_FILES)
+	yarn build:wasm-dev
+
+node_modules: package.json
+
+package.json:
+	yarn install

README.md

@@ -197,28 +197,32 @@ For more information on fuzzing you can check out
 
 ### Playwright
 
-First time running plawright locally, you'll need to add the secrets file
+For a portable way to run Playwright you'll need Docker.
+
+After that, open a terminal and run:
 
 ```bash
-touch ./e2e/playwright/playwright-secrets.env
-printf 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets.env
+docker run --network host  --rm --init -it playwright/chrome:playwright-1.43.1
 ```
 
+and in another terminal, run:
+
+```bash
+PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:4444/ yarn playwright test --project="Google Chrome" <test suite>
+```
+
+An example of a `<test suite>` is: `e2e/playwright/flow-tests.spec.ts`
+
+YOU WILL NEED A PLAYWRIGHT-SECRETS.ENV FILE:
+
+
+```bash
+# ./e2e/playwright/playwright-secrets.env
+token=<your-token>
+snapshottoken=<your-snapshot-token>
+```
 then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens
 
-then:
-run playwright
-
-```
-yarn playwright test
-```
-
-run a specific test suite
-
-```
-yarn playwright test src/e2e-tests/example.spec.ts
-```
-
 run a specific test change the test from `test('...` to `test.only('...`
 (note if you commit this, the tests will instantly fail without running any of the tests)
 
@@ -315,7 +319,7 @@ PS: for the debug panel, the following JSON is useful for snapping the camera
 
 ```
 yarn install
-yarn build:wasm
+yarn build:wasm-dev
 cp src/wasm-lib/pkg/wasm_lib_bg.wasm public
 yarn vite build --mode development
 yarn tauri build --debug -b

docs/kcl/index.md

@@ -23,6 +23,7 @@ layout: manual
 * [`atan`](kcl/atan)
 * [`bezierCurve`](kcl/bezierCurve)
 * [`ceil`](kcl/ceil)
+* [`chamfer`](kcl/chamfer)
 * [`circle`](kcl/circle)
 * [`close`](kcl/close)
 * [`cos`](kcl/cos)
@@ -64,6 +65,7 @@ layout: manual
 * [`segEndX`](kcl/segEndX)
 * [`segEndY`](kcl/segEndY)
 * [`segLen`](kcl/segLen)
+* [`shell`](kcl/shell)
 * [`sin`](kcl/sin)
 * [`sqrt`](kcl/sqrt)
 * [`startProfileAt`](kcl/startProfileAt)

docs/kcl/patternCircular2d.md

@@ -9,7 +9,7 @@ A circular pattern on a 2D sketch.
 
 
 ```js
-patternCircular2d(data: CircularPattern2dData, sketch_group: SketchGroup) -> [SketchGroup]
+patternCircular2d(data: CircularPattern2dData, sketch_group_set: SketchGroupSet) -> [SketchGroup]
 ```
 
 ### Examples
@@ -48,7 +48,7 @@ const example = extrude(1, exampleSketch)
 	rotateDuplicates: string,
 }
 ```
-* `sketch_group`: `SketchGroup` - A sketch group is a collection of paths. (REQUIRED)
+* `sketch_group_set`: `SketchGroupSet` - A sketch group or a group of sketch groups. (REQUIRED)
 ```js
 {
 	// The plane id or face id of the sketch group.
@@ -129,6 +129,7 @@ const example = extrude(1, exampleSketch)
 	// The to point.
 	to: [number, number],
 },
+	type: "sketchGroup",
 	// The paths in the sketch group.
 	value: [{
 	// The from point.
@@ -212,6 +213,9 @@ const example = extrude(1, exampleSketch)
 	y: number,
 	z: number,
 },
+} |
+{
+	type: "sketchGroups",
 }
 ```
 

docs/kcl/patternCircular3d.md

@@ -9,7 +9,7 @@ A circular pattern on a 3D model.
 
 
 ```js
-patternCircular3d(data: CircularPattern3dData, extrude_group: ExtrudeGroup) -> [ExtrudeGroup]
+patternCircular3d(data: CircularPattern3dData, extrude_group_set: ExtrudeGroupSet) -> [ExtrudeGroup]
 ```
 
 ### Examples
@@ -47,7 +47,7 @@ const example = extrude(-5, exampleSketch)
 	rotateDuplicates: string,
 }
 ```
-* `extrude_group`: `ExtrudeGroup` - An extrude group is a collection of extrude surfaces. (REQUIRED)
+* `extrude_group_set`: `ExtrudeGroupSet` - A extrude group or a group of extrude groups. (REQUIRED)
 ```js
 {
 	// The id of the extrusion end cap
@@ -127,6 +127,7 @@ const example = extrude(-5, exampleSketch)
 }],
 	// The id of the extrusion start cap
 	startCapId: uuid,
+	type: "extrudeGroup",
 	// The extrude surfaces.
 	value: [{
 	// The face id for the extrude plane.
@@ -176,6 +177,9 @@ const example = extrude(-5, exampleSketch)
 	y: number,
 	z: number,
 },
+} |
+{
+	type: "extrudeGroups",
 }
 ```
 

docs/kcl/patternLinear3d.md

@@ -9,7 +9,7 @@ A linear pattern on a 3D model.
 
 
 ```js
-patternLinear3d(data: LinearPattern3dData, extrude_group: ExtrudeGroup) -> [ExtrudeGroup]
+patternLinear3d(data: LinearPattern3dData, extrude_group_set: ExtrudeGroupSet) -> [ExtrudeGroup]
 ```
 
 ### Examples
@@ -45,7 +45,7 @@ const example = extrude(1, exampleSketch)
 	repetitions: number,
 }
 ```
-* `extrude_group`: `ExtrudeGroup` - An extrude group is a collection of extrude surfaces. (REQUIRED)
+* `extrude_group_set`: `ExtrudeGroupSet` - A extrude group or a group of extrude groups. (REQUIRED)
 ```js
 {
 	// The id of the extrusion end cap
@@ -125,6 +125,7 @@ const example = extrude(1, exampleSketch)
 }],
 	// The id of the extrusion start cap
 	startCapId: uuid,
+	type: "extrudeGroup",
 	// The extrude surfaces.
 	value: [{
 	// The face id for the extrude plane.
@@ -174,6 +175,9 @@ const example = extrude(1, exampleSketch)
 	y: number,
 	z: number,
 },
+} |
+{
+	type: "extrudeGroups",
 }
 ```
 

e2e/playwright/snapshot-tests.spec.ts

@@ -405,17 +405,16 @@ test('Draft segments should look right', async ({ page, context }) => {
   // select a plane
   await page.mouse.click(700, 200)
 
-  await expect(page.locator('.cm-content')).toHaveText(
-    `const part001 = startSketchOn('XZ')`
-  )
+  let code = `const sketch001 = startSketchOn('XZ')`
+  await expect(page.locator('.cm-content')).toHaveText(code)
 
-  await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+  await page.waitForTimeout(700) // TODO detect animation ending, or disable animation
 
   const startXPx = 600
   await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-  await expect(page.locator('.cm-content'))
-    .toHaveText(`const part001 = startSketchOn('XZ')
-  |> startProfileAt([9.06, -12.22], %)`)
+  code += `
+  |> startProfileAt([7.19, -9.7], %)`
+  await expect(page.locator('.cm-content')).toHaveText(code)
   await page.waitForTimeout(100)
 
   await u.closeDebugPanel()
@@ -427,10 +426,9 @@ test('Draft segments should look right', async ({ page, context }) => {
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
   await page.waitForTimeout(100)
 
-  await expect(page.locator('.cm-content'))
-    .toHaveText(`const part001 = startSketchOn('XZ')
-  |> startProfileAt([9.06, -12.22], %)
-  |> line([9.14, 0], %)`)
+  code += `
+  |> line([7.25, 0], %)`
+  await expect(page.locator('.cm-content')).toHaveText(code)
 
   await page.getByRole('button', { name: 'Tangential Arc' }).click()
 
@@ -465,7 +463,7 @@ test('Draft rectangles should look right', async ({ page, context }) => {
   await page.mouse.click(700, 200)
 
   await expect(page.locator('.cm-content')).toHaveText(
-    `const part001 = startSketchOn('XZ')`
+    `const sketch001 = startSketchOn('XZ')`
   )
 
   await page.waitForTimeout(500) // TODO detect animation ending, or disable animation
@@ -513,17 +511,16 @@ test.describe('Client side scene scale should match engine scale', () => {
     // select a plane
     await page.mouse.click(700, 200)
 
-    await expect(page.locator('.cm-content')).toHaveText(
-      `const part001 = startSketchOn('XZ')`
-    )
+    let code = `const sketch001 = startSketchOn('XZ')`
+    await expect(page.locator('.cm-content')).toHaveText(code)
 
-    await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+    await page.waitForTimeout(600) // TODO detect animation ending, or disable animation
 
     const startXPx = 600
     await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-    |> startProfileAt([9.06, -12.22], %)`)
+    code += `
+  |> startProfileAt([7.19, -9.7], %)`
+    await expect(u.codeLocator).toHaveText(code)
     await page.waitForTimeout(100)
 
     await u.closeDebugPanel()
@@ -531,21 +528,18 @@ test.describe('Client side scene scale should match engine scale', () => {
     await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
     await page.waitForTimeout(100)
 
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-    |> startProfileAt([9.06, -12.22], %)
-    |> line([9.14, 0], %)`)
+    code += `
+  |> line([7.25, 0], %)`
+    await expect(u.codeLocator).toHaveText(code)
 
     await page.getByRole('button', { name: 'Tangential Arc' }).click()
     await page.waitForTimeout(100)
 
     await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
 
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-    |> startProfileAt([9.06, -12.22], %)
-    |> line([9.14, 0], %)
-    |> tangentialArcTo([27.34, -3.08], %)`)
+    code += `
+  |> tangentialArcTo([21.7, -2.44], %)`
+    await expect(u.codeLocator).toHaveText(code)
 
     // click tangential arc tool again to unequip it
     await page.getByRole('button', { name: 'Tangential Arc' }).click()
@@ -616,17 +610,16 @@ test.describe('Client side scene scale should match engine scale', () => {
     // select a plane
     await page.mouse.click(700, 200)
 
-    await expect(page.locator('.cm-content')).toHaveText(
-      `const part001 = startSketchOn('XZ')`
-    )
+    let code = `const sketch001 = startSketchOn('XZ')`
+    await expect(u.codeLocator).toHaveText(code)
 
-    await page.waitForTimeout(300) // TODO detect animation ending, or disable animation
+    await page.waitForTimeout(600) // TODO detect animation ending, or disable animation
 
     const startXPx = 600
     await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-      |> startProfileAt([230.03, -310.32], %)`)
+    code += `
+  |> startProfileAt([182.59, -246.32], %)`
+    await expect(u.codeLocator).toHaveText(code)
     await page.waitForTimeout(100)
 
     await u.closeDebugPanel()
@@ -634,21 +627,18 @@ test.describe('Client side scene scale should match engine scale', () => {
     await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
     await page.waitForTimeout(100)
 
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-      |> startProfileAt([230.03, -310.32], %)
-      |> line([232.2, 0], %)`)
+    code += `
+  |> line([184.3, 0], %)`
+    await expect(u.codeLocator).toHaveText(code)
 
     await page.getByRole('button', { name: 'Tangential Arc' }).click()
     await page.waitForTimeout(100)
 
     await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
 
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const part001 = startSketchOn('XZ')
-      |> startProfileAt([230.03, -310.32], %)
-      |> line([232.2, 0], %)
-      |> tangentialArcTo([694.43, -78.12], %)`)
+    code += `
+  |> tangentialArcTo([551.2, -62.01], %)`
+    await expect(u.codeLocator).toHaveText(code)
 
     await page.getByRole('button', { name: 'Tangential Arc' }).click()
     await page.waitForTimeout(100)

e2e/playwright/storageStates.ts

@@ -1,5 +1,6 @@
 import { SaveSettingsPayload } from 'lib/settings/settingsTypes'
 import { Themes } from 'lib/theme'
+import { onboardingPaths } from 'routes/Onboarding/paths'
 
 export const TEST_SETTINGS_KEY = '/settings.toml'
 export const TEST_SETTINGS = {
@@ -22,9 +23,22 @@ export const TEST_SETTINGS = {
   },
 } satisfies Partial<SaveSettingsPayload>
 
+export const TEST_SETTINGS_ONBOARDING_USER_MENU = {
+  ...TEST_SETTINGS,
+  app: { ...TEST_SETTINGS.app, onboardingStatus: onboardingPaths.USER_MENU },
+} satisfies Partial<SaveSettingsPayload>
+
 export const TEST_SETTINGS_ONBOARDING_EXPORT = {
   ...TEST_SETTINGS,
-  app: { ...TEST_SETTINGS.app, onboardingStatus: '/export' },
+  app: { ...TEST_SETTINGS.app, onboardingStatus: onboardingPaths.EXPORT },
+} satisfies Partial<SaveSettingsPayload>
+
+export const TEST_SETTINGS_ONBOARDING_PARAMETRIC_MODELING = {
+  ...TEST_SETTINGS,
+  app: {
+    ...TEST_SETTINGS.app,
+    onboardingStatus: onboardingPaths.PARAMETRIC_MODELING,
+  },
 } satisfies Partial<SaveSettingsPayload>
 
 export const TEST_SETTINGS_ONBOARDING_START = {
@@ -50,3 +64,25 @@ export const TEST_SETTINGS_CORRUPTED = {
     textWrapping: true,
   },
 } satisfies Partial<SaveSettingsPayload>
+
+export const TEST_CODE_GIZMO = `const part001 = startSketchOn('XZ')
+|> startProfileAt([20, 0], %)
+|> line([7.13, 4 + 0], %)
+|> angledLine({ angle: 3 + 0, length: 3.14 + 0 }, %)
+|> lineTo([20.14 + 0, -0.14 + 0], %)
+|> xLineTo(29 + 0, %)
+|> yLine(-3.14 + 0, %, 'a')
+|> xLine(1.63, %)
+|> angledLineOfXLength({ angle: 3 + 0, length: 3.14 }, %)
+|> angledLineOfYLength({ angle: 30, length: 3 + 0 }, %)
+|> angledLineToX({ angle: 22.14 + 0, to: 12 }, %)
+|> angledLineToY({ angle: 30, to: 11.14 }, %)
+|> angledLineThatIntersects({
+  angle: 3.14,
+  intersectTag: 'a',
+  offset: 0
+}, %)
+|> tangentialArcTo([13.14 + 0, 13.14], %)
+|> close(%)
+|> extrude(5 + 7, %)
+`

e2e/playwright/test-utils.ts

@@ -1,5 +1,6 @@
 import { test, expect, Page, Download } from '@playwright/test'
 import { EngineCommand } from '../../src/lang/std/engineConnection'
+import os from 'os'
 import fsp from 'fs/promises'
 import pixelMatch from 'pixelmatch'
 import { PNG } from 'pngjs'
@@ -11,14 +12,16 @@ async function waitForPageLoad(page: Page) {
   // wait for 'Loading stream...' spinner
   await page.getByTestId('loading-stream').waitFor()
   // wait for all spinners to be gone
-  await page.getByTestId('loading').waitFor({ state: 'detached' })
+  await page
+    .getByTestId('loading')
+    .waitFor({ state: 'detached', timeout: 20_000 })
 
   await page.getByTestId('start-sketch').waitFor()
 }
 
 async function removeCurrentCode(page: Page) {
   const hotkey = process.platform === 'darwin' ? 'Meta' : 'Control'
-  await page.click('.cm-content')
+  await page.locator('.cm-content').click()
   await page.keyboard.down(hotkey)
   await page.keyboard.press('a')
   await page.keyboard.up(hotkey)
@@ -27,12 +30,12 @@ async function removeCurrentCode(page: Page) {
 }
 
 async function sendCustomCmd(page: Page, cmd: EngineCommand) {
-  await page.fill('[data-testid="custom-cmd-input"]', JSON.stringify(cmd))
-  await page.click('[data-testid="custom-cmd-send-button"]')
+  await page.getByTestId('custom-cmd-input').fill(JSON.stringify(cmd))
+  await page.getByTestId('custom-cmd-send-button').click()
 }
 
 async function clearCommandLogs(page: Page) {
-  await page.click('[data-testid="clear-commands"]')
+  await page.getByTestId('clear-commands').click()
 }
 
 async function expectCmdLog(page: Page, locatorStr: string) {
@@ -96,6 +99,74 @@ async function waitForCmdReceive(page: Page, commandType: string) {
     .waitFor()
 }
 
+export const wiggleMove = async (
+  page: any,
+  x: number,
+  y: number,
+  steps: number,
+  dist: number,
+  ang: number,
+  amplitude: number,
+  freq: number
+) => {
+  const tau = Math.PI * 2
+  const deg = tau / 360
+  const step = dist / steps
+  for (let i = 0, j = 0; i < dist; i += step, j += 1) {
+    const [x1, y1] = [0, Math.sin((tau / steps) * j * freq) * amplitude]
+    const [x2, y2] = [
+      Math.cos(-ang * deg) * i - Math.sin(-ang * deg) * y1,
+      Math.sin(-ang * deg) * i + Math.cos(-ang * deg) * y1,
+    ]
+    const [xr, yr] = [x2, y2]
+    await page.mouse.move(x + xr, y + yr, { steps: 2 })
+  }
+}
+
+export const getMovementUtils = (opts: any) => {
+  // The way we truncate is kinda odd apparently, so we need this function
+  // "[k]itty[c]ad round"
+  const kcRound = (n: number) => Math.trunc(n * 100) / 100
+
+  // To translate between screen and engine ("[U]nit") coordinates
+  // NOTE: these pretty much can't be perfect because of screen scaling.
+  // Handle on a case-by-case.
+  const toU = (x: number, y: number) => [
+    kcRound(x * 0.0678),
+    kcRound(-y * 0.0678), // Y is inverted in our coordinate system
+  ]
+
+  // Turn the array into a string with specific formatting
+  const fromUToString = (xy: number[]) => `[${xy[0]}, ${xy[1]}]`
+
+  // Combine because used often
+  const toSU = (xy: number[]) => fromUToString(toU(xy[0], xy[1]))
+
+  // Make it easier to click around from center ("click [from] zero zero")
+  const click00 = (x: number, y: number) =>
+    opts.page.mouse.click(opts.center.x + x, opts.center.y + y)
+
+  // Relative clicker, must keep state
+  let last = { x: 0, y: 0 }
+  const click00r = (x?: number, y?: number) => {
+    // reset relative coordinates when anything is undefined
+    if (x === undefined || y === undefined) {
+      last.x = 0
+      last.y = 0
+      return
+    }
+
+    const ret = click00(last.x + x, last.y + y)
+    last.x += x
+    last.y += y
+
+    // Returns the new absolute coordinate if you need it.
+    return ret.then(() => [last.x, last.y])
+  }
+
+  return { toSU, click00r }
+}
+
 export async function getUtils(page: Page) {
   // Chrome devtools protocol session only works in Chromium
   const browserType = page.context().browser()?.browserType().name()
@@ -141,15 +212,21 @@ export async function getUtils(page: Page) {
       const angleXOffset = Math.cos(((angle - 180) * Math.PI) / 180) * px
       const angleYOffset = Math.sin(((angle - 180) * Math.PI) / 180) * px
       return {
-        x: bbox.x + angleXOffset,
-        y: bbox.y - angleYOffset,
+        x: Math.round(bbox.x + angleXOffset),
+        y: Math.round(bbox.y - angleYOffset),
       }
     },
+    getAngle: async (locator: string) => {
+      const overlay = page.locator(locator)
+      return Number(await overlay.getAttribute('data-overlay-angle'))
+    },
     getBoundingBox: async (locator: string) =>
       page
         .locator(locator)
         .boundingBox()
-        .then((box) => ({ x: box?.x || 0, y: box?.y || 0 })),
+        .then((box) => ({ ...box, x: box?.x || 0, y: box?.y || 0 })),
+    codeLocator: page.locator('.cm-content'),
+    canvasLocator: page.getByTestId('client-side-scene'),
     doAndWaitForCmd: async (
       fn: () => Promise<void>,
       commandType: string,
@@ -165,6 +242,30 @@ export async function getUtils(page: Page) {
         await closeDebugPanel(page)
       }
     },
+    /**
+     * Given an expected RGB value, diff if the channel with the largest difference
+     */
+    getGreatestPixDiff: async (
+      coords: { x: number; y: number },
+      expected: [number, number, number]
+    ): Promise<number> => {
+      const buffer = await page.screenshot({
+        fullPage: true,
+      })
+      const screenshot = await PNG.sync.read(buffer)
+      // most likely related to pixel density but the screenshots for webkit are 2x the size
+      // there might be a more robust way of doing this.
+      const pixMultiplier = browserType === 'webkit' ? 2 : 1
+      const index =
+        (screenshot.width * coords.y * pixMultiplier +
+          coords.x * pixMultiplier) *
+        4 // rbga is 4 channels
+      return Math.max(
+        Math.abs(screenshot.data[index] - expected[0]),
+        Math.abs(screenshot.data[index + 1] - expected[1]),
+        Math.abs(screenshot.data[index + 2] - expected[2])
+      )
+    },
     doAndWaitForImageDiff: (fn: () => Promise<any>, diffCount = 200) =>
       new Promise(async (resolve) => {
         await page.screenshot({
@@ -366,3 +467,8 @@ export const doExport = async (
     outputType: output.type,
   }
 }
+
+/**
+ * Gets the appropriate modifier key for the platform.
+ */
+export const metaModifier = os.platform() === 'darwin' ? 'Meta' : 'Control'

e2e/tauri/specs/app.spec.ts

@@ -2,6 +2,7 @@ import { browser, $, expect } from '@wdio/globals'
 import fs from 'fs/promises'
 import path from 'path'
 import os from 'os'
+import { click, setDatasetValue } from '../utils'
 
 const isWin32 = os.platform() === 'win32'
 const documentsDir = path.join(os.homedir(), 'Documents')
@@ -15,25 +16,8 @@ const newProjectDir = path.join(documentsDir, 'a-different-directory')
 const tmp = process.env.TEMP || '/tmp'
 const userCodeDir = path.join(tmp, 'kittycad_user_code')
 
-async function click(element: WebdriverIO.Element): Promise<void> {
-  // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
-  await element.waitForClickable()
-  await browser.execute('arguments[0].click();', element)
-}
-
-/* Shoutout to @Sheap on Github for a great workaround utility:
- * https://github.com/tauri-apps/tauri/issues/6541#issue-1638944060
- */
-async function setDatasetValue(
-  field: WebdriverIO.Element,
-  property: string,
-  value: string
-) {
-  await browser.execute(`arguments[0].dataset.${property} = "${value}"`, field)
-}
-
-describe('ZMA (Tauri)', () => {
-  it('opens the auth page and signs in', async () => {
+describe('ZMA sign in flow', () => {
+  before(async () => {
     // Clean up filesystem from previous tests
     await new Promise((resolve) => setTimeout(resolve, 100))
     await fs.rm(defaultProjectDir, { force: true, recursive: true })
@@ -42,7 +26,9 @@ describe('ZMA (Tauri)', () => {
     await fs.rm(userSettingsDir, { force: true, recursive: true })
     await fs.mkdir(defaultProjectDir, { recursive: true })
     await fs.mkdir(newProjectDir, { recursive: true })
+  })
 
+  it('opens the auth page and signs in', async () => {
     const signInButton = await $('[data-testid="sign-in-button"]')
     expect(await signInButton.getText()).toEqual('Sign in')
 
@@ -82,6 +68,10 @@ describe('ZMA (Tauri)', () => {
     const newFileButton = await $('[data-testid="home-new-file"]')
     expect(await newFileButton.getText()).toEqual('New project')
   })
+})
+
+describe('ZMA authorized user flows', () => {
+  // Note: each flow below is intended to start *and* end from the home page
 
   it('opens the settings page, checks filesystem settings, and closes the settings page', async () => {
     const menuButton = await $('[data-testid="user-sidebar-toggle"]')
@@ -150,8 +140,11 @@ describe('ZMA (Tauri)', () => {
     const base = isWin32 ? 'http://tauri.localhost' : 'tauri://localhost'
     await browser.execute(`window.location.href = "${base}/home"`)
   })
+})
 
+describe('ZMA sign out flow', () => {
   it('signs out', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
     const menuButton = await $('[data-testid="user-sidebar-toggle"]')
     await click(menuButton)
     const signoutButton = await $('[data-testid="user-sidebar-sign-out"]')

e2e/tauri/utils.ts

@@ -0,0 +1,18 @@
+import { browser } from '@wdio/globals'
+
+export async function click(element: WebdriverIO.Element): Promise<void> {
+  // Workaround for .click(), see https://github.com/tauri-apps/tauri/issues/6541
+  await element.waitForClickable()
+  await browser.execute('arguments[0].click();', element)
+}
+
+/* Shoutout to @Sheap on Github for a great workaround utility:
+ * https://github.com/tauri-apps/tauri/issues/6541#issue-1638944060
+ */
+export async function setDatasetValue(
+  field: WebdriverIO.Element,
+  property: string,
+  value: string
+) {
+  await browser.execute(`arguments[0].dataset.${property} = "${value}"`, field)
+}

flake.lock

@@ -0,0 +1,62 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1718470082,
+        "narHash": "sha256-u2F0MMYE+Efc+ocruTbtU/wWHuYHWcJafp5zJ++n/YE=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "3027ba73dfef68eb555fc2fa97aed4e999e74f97",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1718428119,
+        "narHash": "sha256-WdWDpNaq6u1IPtxtYHHWpl5BmabtpmLnMAx0RdJ/vo8=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "e6cea36f83499eb4e9cd184c8a8e823296b50ad5",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "nixpkgs": "nixpkgs_2"
+      },
+      "locked": {
+        "lastModified": 1718681902,
+        "narHash": "sha256-E/T7Ge6ayEQe7FVKMJqDBoHyLhRhjc6u9CmU8MyYfy0=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "16c8ad83297c278eebe740dea5491c1708960dd1",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,70 @@
+{
+  description = "modeling-app development environment";
+
+  # Flake inputs
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    rust-overlay.url = "github:oxalica/rust-overlay"; # A helper for Rust + Nix
+  };
+
+  # Flake outputs
+  outputs = { self, nixpkgs, rust-overlay }:
+    let
+      # Overlays enable you to customize the Nixpkgs attribute set
+      overlays = [
+        # Makes a `rust-bin` attribute available in Nixpkgs
+        (import rust-overlay)
+        # Provides a `rustToolchain` attribute for Nixpkgs that we can use to
+        # create a Rust environment
+        (self: super: {
+          rustToolchain = super. rust-bin.stable.latest.default.override {
+            targets = [ "wasm32-unknown-unknown" ];
+            extensions = [ "rustfmt" "llvm-tools-preview" ];
+          };
+        })
+      ];
+
+      # Systems supported
+      allSystems = [
+        "x86_64-linux" # 64-bit Intel/AMD Linux
+        "aarch64-linux" # 64-bit ARM Linux
+        "x86_64-darwin" # 64-bit Intel macOS
+        "aarch64-darwin" # 64-bit ARM macOS
+      ];
+
+      # Helper to provide system-specific attributes
+      forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f {
+        pkgs = import nixpkgs { inherit overlays system; };
+      });
+
+    in
+    {
+      # Development environment output
+      devShells = forAllSystems ({ pkgs }: {
+        default = pkgs.mkShell {
+          # The Nix packages provided in the environment
+          packages = (with pkgs; [
+            # The package provided by our custom overlay. Includes cargo, Clippy, cargo-fmt,
+            # rustdoc, rustfmt, and other tools.
+            rustToolchain
+
+            cargo-llvm-cov
+            cargo-nextest
+
+            just
+            postgresql.lib
+            openssl
+            pkg-config
+
+            nodejs_22
+          ]) ++ pkgs.lib.optionals pkgs.stdenv.isDarwin (with pkgs; [
+            libiconv 
+            darwin.apple_sdk.frameworks.Security
+          ]);
+
+          TARGET_CC = "${pkgs.stdenv.cc}/bin/${pkgs.stdenv.cc.targetPrefix}cc";
+          LIBCLANG_PATH = "${pkgs.libclang.lib}/lib";
+        };
+      });
+    };
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.22.0",
+  "version": "0.22.3",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",
@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.63",
+    "@kittycad/lib": "^0.0.67",
     "@lezer/javascript": "^1.4.9",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^2.0.1",
@@ -95,7 +95,8 @@
     "lint": "eslint --fix src",
     "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json",
     "postinstall": "yarn xstate:typegen",
-    "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\""
+    "xstate:typegen": "yarn xstate typegen \"src/**/*.ts?(x)\"",
+    "make:dev": "make dev"
   },
   "prettier": {
     "trailingComma": "es5",

playwright.config.ts

@@ -12,12 +12,12 @@ import { defineConfig, devices } from '@playwright/test'
 export default defineConfig({
   testDir: './e2e/playwright',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 3 : 0,
-  /* Opt out of parallel tests on CI. */
+  /* Different amount of parallelism on CI and local. */
   workers: process.env.CI ? 1 : 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
@@ -34,7 +34,14 @@ export default defineConfig({
   projects: [
     {
       name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+        contextOptions: {
+          /* Chromium is the only one with these permission types */
+          permissions: ['clipboard-write', 'clipboard-read'],
+        },
+      }, // or 'chrome-beta'
     },
     {
       name: 'webkit',
@@ -72,7 +79,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn serve',
+    command: 'yarn start',
     // url: 'http://127.0.0.1:3000',
     reuseExistingServer: !process.env.CI,
   },

src-tauri/Cargo.toml

@@ -16,11 +16,11 @@ tauri-build = { version = "2.0.0-beta.13", features = [] }
 [dependencies]
 anyhow = "1"
 kcl-lib = { version = "0.1.53", path = "../src/wasm-lib/kcl" }
-kittycad = "0.3.0"
+kittycad = "0.3.5"
 log = "0.4.21"
 oauth2 = "4.4.2"
 serde_json = "1.0"
-tauri = { version = "2.0.0-beta.15", features = [ "devtools", "unstable"] }
+tauri = { version = "2.0.0-beta.22", features = [ "devtools", "unstable"] }
 tauri-plugin-cli = { version = "2.0.0-beta.3" }
 tauri-plugin-deep-link = { version = "2.0.0-beta.3" }
 tauri-plugin-dialog = { version = "2.0.0-beta.6" }

src-tauri/tauri.conf.json

@@ -63,16 +63,17 @@
       "subcommands": {}
     },
     "deep-link": {
-      "domains": [
-        {
-          "host": "app.zoo.dev"
-        }
+      "mobile": [],
+      "desktop": {
+        "schemes": [
+          "app.zoo.dev"
         ]
+      }
     },
     "shell": {
       "open": true
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.22.0"
+  "version": "0.22.3"
 }

src/App.tsx

@@ -127,7 +127,7 @@ export function App() {
       />
       <ModalContainer />
       <ModelingSidebar paneOpacity={paneOpacity} />
-      <Stream className="absolute inset-0 z-0" />
+      <Stream />
       {/* <CamToggle /> */}
       <LowerRightControls>
         <Gizmo />

src/Router.tsx

@@ -12,6 +12,8 @@ import SignIn from './routes/SignIn'
 import { Auth } from './Auth'
 import { isTauri } from './lib/isTauri'
 import Home from './routes/Home'
+import { NetworkContext } from './hooks/useNetworkContext'
+import { useNetworkStatus } from './hooks/useNetworkStatus'
 import makeUrlPathRelative from './lib/makeUrlPathRelative'
 import DownloadAppBanner from 'components/DownloadAppBanner'
 import { WasmErrBanner } from 'components/WasmErrBanner'
@@ -155,5 +157,11 @@ const router = createBrowserRouter([
  * @returns RouterProvider
  */
 export const Router = () => {
-  return <RouterProvider router={router} />
+  const networkStatus = useNetworkStatus()
+
+  return (
+    <NetworkContext.Provider value={networkStatus}>
+      <RouterProvider router={router} />
+    </NetworkContext.Provider>
+  )
 }

src/Toolbar.tsx

@@ -3,13 +3,11 @@ import { isCursorInSketchCommandRange } from 'lang/util'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useCommandsContext } from 'hooks/useCommandsContext'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ActionButton } from 'components/ActionButton'
 import { isSingleCursorInPipe } from 'lang/queryAst'
 import { useKclContext } from 'lang/KclProvider'
-import {
-  NetworkHealthState,
-  useNetworkStatus,
-} from 'components/NetworkHealthIndicator'
 import { useStore } from 'useStore'
 import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -38,14 +36,16 @@ export function Toolbar({
   }, [engineCommandManager.artifactMap, context.selectionRanges])
 
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
-
-  const { overallState } = useNetworkStatus()
+  const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
   const { isStreamReady } = useStore((s) => ({
     isStreamReady: s.isStreamReady,
   }))
   const disableAllButtons =
-    overallState !== NetworkHealthState.Ok || isExecuting || !isStreamReady
+    (overallState !== NetworkHealthState.Ok &&
+      overallState !== NetworkHealthState.Weak) ||
+    isExecuting ||
+    !isStreamReady
 
   useHotkeys(
     'l',

src/clientSideScene/CameraControls.ts

@@ -48,12 +48,14 @@ export type ReactCameraProperties =
       type: 'perspective'
       fov?: number
       position: [number, number, number]
+      target: [number, number, number]
       quaternion: [number, number, number, number]
     }
   | {
       type: 'orthographic'
       zoom?: number
       position: [number, number, number]
+      target: [number, number, number]
       quaternion: [number, number, number, number]
     }
 
@@ -172,41 +174,6 @@ export class CameraControls {
     }
   }
 
-  throttledUpdateEngineFov = throttle(
-    (vals: {
-      position: Vector3
-      quaternion: Quaternion
-      zoom: number
-      fov: number
-      target: Vector3
-    }) => {
-      const cmd: EngineCommand = {
-        type: 'modeling_cmd_req',
-        cmd_id: uuidv4(),
-        cmd: {
-          type: 'default_camera_perspective_settings',
-          ...convertThreeCamValuesToEngineCam({
-            ...vals,
-            isPerspective: true,
-          }),
-          fov_y: vals.fov,
-          ...calculateNearFarFromFOV(vals.fov),
-        },
-      }
-      this.engineCommandManager.sendSceneCommand(cmd)
-      this.lastPerspectiveCmd = cmd
-      this.lastPerspectiveCmdTime = Date.now()
-      if (this.lastPerspectiveCmdTimeoutId !== null) {
-        clearTimeout(this.lastPerspectiveCmdTimeoutId)
-      }
-      this.lastPerspectiveCmdTimeoutId = setTimeout(
-        this.sendLastPerspectiveReliableChannel,
-        lastCmdDelay
-      ) as any as number
-    },
-    1000 / 30
-  )
-
   constructor(
     isOrtho = false,
     domElement: HTMLCanvasElement,
@@ -442,7 +409,7 @@ export class CameraControls {
         this.handleEnd()
         return
       }
-      this.throttledEngCmd({
+      this.engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'default_camera_zoom',
@@ -454,11 +421,11 @@ export class CameraControls {
       return
     }
 
-    const isTrackpad = Math.abs(event.deltaY) <= 1 || event.deltaY % 1 === 0
+    // Else "clientToEngine" (Sketch Mode) or forceUpdate
 
-    const zoomSpeed = isTrackpad ? 0.02 : 0.1 // Reduced zoom speed for trackpad
+    // From onMouseMove zoom handling which seems to be really smooth
     this.pendingZoom = this.pendingZoom ? this.pendingZoom : 1
-    this.pendingZoom *= 1 + (event.deltaY > 0 ? zoomSpeed : -zoomSpeed)
+    this.pendingZoom *= 1 + event.deltaY * 0.01
     this.handleEnd()
   }
 
@@ -532,9 +499,10 @@ export class CameraControls {
     direction.normalize()
     this.camera.position.copy(this.target).addScaledVector(direction, distance)
   }
-  usePerspectiveCamera = () => {
+  usePerspectiveCamera = async () => {
     this._usePerspectiveCamera()
-    this.engineCommandManager.sendSceneCommand({
+    if (this.syncDirection === 'clientToEngine') {
+      await this.engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd_id: uuidv4(),
         cmd: {
@@ -546,12 +514,13 @@ export class CameraControls {
           },
         },
       })
+    }
     this.onCameraChange()
     this.update()
     return this.camera
   }
 
-  dollyZoom = (newFov: number) => {
+  dollyZoom = async (newFov: number, splitEngineCalls = false) => {
     if (!(this.camera instanceof PerspectiveCamera)) {
       console.warn('Dolly zoom is only applicable to perspective cameras.')
       return
@@ -602,13 +571,52 @@ export class CameraControls {
     this.camera.near = z_near
     this.camera.far = z_far
 
-    this.throttledUpdateEngineFov({
-      fov: newFov,
+    if (splitEngineCalls) {
+      await this.engineCommandManager.sendSceneCommand({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'default_camera_look_at',
+          ...convertThreeCamValuesToEngineCam({
+            isPerspective: true,
             position: newPosition,
             quaternion: this.camera.quaternion,
             zoom: this.camera.zoom,
             target: this.target,
+          }),
+        },
       })
+      await this.engineCommandManager.sendSceneCommand({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'default_camera_set_perspective',
+          parameters: {
+            fov_y: newFov,
+            z_near: 0.01,
+            z_far: 1000,
+          },
+        },
+      })
+    } else {
+      await this.engineCommandManager.sendSceneCommand({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: {
+          type: 'default_camera_perspective_settings',
+          ...convertThreeCamValuesToEngineCam({
+            isPerspective: true,
+            position: newPosition,
+            quaternion: this.camera.quaternion,
+            zoom: this.camera.zoom,
+            target: this.target,
+          }),
+          fov_y: newFov,
+          z_near: 0.01,
+          z_far: 1000,
+        },
+      })
+    }
   }
 
   update = (forceUpdate = false) => {
@@ -773,6 +781,75 @@ export class CameraControls {
     })
   }
 
+  async updateCameraToAxis(
+    axis: 'x' | 'y' | 'z' | '-x' | '-y' | '-z'
+  ): Promise<void> {
+    const distance = this.camera.position.distanceTo(this.target)
+
+    const vantage = this.target.clone()
+    let up = { x: 0, y: 0, z: 1 }
+
+    if (axis === 'x') {
+      vantage.x += distance
+    } else if (axis === 'y') {
+      vantage.y += distance
+    } else if (axis === 'z') {
+      vantage.z += distance
+      up = { x: -1, y: 0, z: 0 }
+    } else if (axis === '-x') {
+      vantage.x -= distance
+    } else if (axis === '-y') {
+      vantage.y -= distance
+    } else if (axis === '-z') {
+      vantage.z -= distance
+      up = { x: -1, y: 0, z: 0 }
+    }
+
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        center: this.target,
+        vantage: vantage,
+        up: up,
+      },
+    })
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_get_settings',
+      },
+    })
+  }
+
+  async resetCameraPosition(): Promise<void> {
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        center: this.target,
+        vantage: {
+          x: this.target.x,
+          y: this.target.y - 128,
+          z: this.target.z + 64,
+        },
+        up: { x: 0, y: 0, z: 1 },
+      },
+    })
+    await this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'zoom_to_fit',
+        object_ids: [], // leave empty to zoom to all objects
+        padding: 0.2, // padding around the objects
+      },
+    })
+  }
+
   async tweenCameraToQuaternion(
     targetQuaternion: Quaternion,
     targetPosition = new Vector3(),
@@ -944,6 +1021,29 @@ export class CameraControls {
         .onComplete(onComplete)
         .start()
     })
+  snapToPerspectiveBeforeHandingBackControlToEngine = async (
+    targetCamUp = new Vector3(0, 0, 1)
+  ) => {
+    if (this.syncDirection === 'engineToClient') {
+      console.warn(
+        'animate To Perspective not design to work with engineToClient syncDirection.'
+      )
+    }
+    this.isFovAnimationInProgress = true
+    const targetFov = this.fovBeforeOrtho // Target FOV for perspective
+    this.lastPerspectiveFov = 4
+    let currentFov = 4
+    const initialCameraUp = this.camera.up.clone()
+    this.usePerspectiveCamera()
+    const tempVec = new Vector3()
+
+    currentFov = this.lastPerspectiveFov + (targetFov - this.lastPerspectiveFov)
+    const currentUp = tempVec.lerpVectors(initialCameraUp, targetCamUp, 1)
+    this.camera.up.copy(currentUp)
+    await this.dollyZoom(currentFov, true)
+
+    this.isFovAnimationInProgress = false
+  }
 
   get reactCameraProperties(): ReactCameraProperties {
     return {
@@ -957,6 +1057,11 @@ export class CameraControls {
         roundOff(this.camera.position.y, 2),
         roundOff(this.camera.position.z, 2),
       ],
+      target: [
+        roundOff(this.target.x, 2),
+        roundOff(this.target.y, 2),
+        roundOff(this.target.z, 2),
+      ],
       quaternion: [
         roundOff(this.camera.quaternion.x, 2),
         roundOff(this.camera.quaternion.y, 2),
@@ -1011,7 +1116,7 @@ function calculateNearFarFromFOV(fov: number) {
   // const nearFarRatio = (fov - 3) / (45 - 3)
   // const z_near = 0.1 + nearFarRatio * (5 - 0.1)
   // const z_far = 1000 + nearFarRatio * (100000 - 1000)
-  return { z_near: 0.1, z_far: 1000 }
+  return { z_near: 0.01, z_far: 1000 }
 }
 
 function convertThreeCamValuesToEngineCam({
@@ -1030,11 +1135,6 @@ function convertThreeCamValuesToEngineCam({
   // leaving for now since it's working but maybe revisit later
   const euler = new Euler().setFromQuaternion(quaternion, 'XYZ')
 
-  const lookAtVector = new Vector3(0, 0, -1)
-    .applyEuler(euler)
-    .normalize()
-    .add(position)
-
   const upVector = new Vector3(0, 1, 0).applyEuler(euler).normalize()
   if (isPerspective) {
     return {
@@ -1043,6 +1143,10 @@ function convertThreeCamValuesToEngineCam({
       vantage: position,
     }
   }
+  const lookAtVector = new Vector3(0, 0, -1)
+    .applyEuler(euler)
+    .normalize()
+    .add(position)
   const fudgeFactor2 = zoom * 0.9979224466814468 - 0.03473692325839295
   const zoomFactor = (-ZOOM_MAGIC_NUMBER + fudgeFactor2) / zoom
   const direction = lookAtVector.clone().sub(position).normalize()

src/clientSideScene/ClientSideSceneComp.tsx

@@ -136,6 +136,7 @@ export const ClientSideScene = ({
       <div
         ref={canvasRef}
         style={{ cursor: cursor }}
+        data-testid="client-side-scene"
         className={`absolute inset-0 h-full w-full transition-all duration-300 ${
           hideClient ? 'opacity-0' : 'opacity-100'
         } ${hideServer ? 'bg-chalkboard-10 dark:bg-chalkboard-100' : ''} ${
@@ -699,6 +700,15 @@ export const CamDebugSettings = () => {
           }
         }}
       />
+      <div>
+        <button
+          onClick={() => {
+            sceneInfra.camControls.resetCameraPosition()
+          }}
+        >
+          Reset Camera Position
+        </button>
+      </div>
       {camSettings.type === 'perspective' && (
         <input
           type="range"
@@ -816,6 +826,71 @@ export const CamDebugSettings = () => {
           </li>
         </ul>
       </div>
+      <div>
+        target
+        <ul className="flex">
+          <li>
+            <span className="pl-2 pr-1">x:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-x-target"
+              value={camSettings.target[0]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.camControls.setCam({
+                  ...camSettings,
+                  target: [
+                    parseFloat(e.target.value),
+                    camSettings.target[1],
+                    camSettings.target[2],
+                  ],
+                })
+              }}
+            />
+          </li>
+          <li>
+            <span className="pl-2 pr-1">y:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-y-target"
+              value={camSettings.target[1]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.camControls.setCam({
+                  ...camSettings,
+                  target: [
+                    camSettings.target[0],
+                    parseFloat(e.target.value),
+                    camSettings.target[2],
+                  ],
+                })
+              }}
+            />
+          </li>
+          <li>
+            <span className="pl-2 pr-1">z:</span>
+            <input
+              type="number"
+              step={5}
+              data-testid="cam-z-target"
+              value={camSettings.target[2]}
+              className="text-black w-16"
+              onChange={(e) => {
+                sceneInfra.camControls.setCam({
+                  ...camSettings,
+                  target: [
+                    camSettings.target[0],
+                    camSettings.target[1],
+                    parseFloat(e.target.value),
+                  ],
+                })
+              }}
+            />
+          </li>
+        </ul>
+      </div>
     </div>
   )
 }

src/clientSideScene/sceneEntities.ts

@@ -32,9 +32,7 @@ import {
   SKETCH_GROUP_SEGMENTS,
   SKETCH_LAYER,
   X_AXIS,
-  XZ_PLANE,
   Y_AXIS,
-  YZ_PLANE,
 } from './sceneInfra'
 import { isQuaternionVertical, quaternionFromUpNForward } from './helpers'
 import {
@@ -93,7 +91,10 @@ import { createGridHelper, orthoScale, perspScale } from './helpers'
 import { Models } from '@kittycad/lib'
 import { uuidv4 } from 'lib/utils'
 import { SegmentOverlayPayload, SketchDetails } from 'machines/modelingMachine'
-import { EngineCommandManager } from 'lang/std/engineConnection'
+import {
+  ArtifactMapCommand,
+  EngineCommandManager,
+} from 'lang/std/engineConnection'
 import {
   getRectangleCallExpressions,
   updateRectangleSketch,
@@ -759,14 +760,6 @@ export class SceneEntities {
 
           _ast = parse(recast(_ast))
 
-          console.log('onClick', {
-            sketchInit: sketchInit,
-            _ast,
-            x,
-            y,
-            truncatedAst,
-          })
-
           // Update the primary AST and unequip the rectangle tool
           await kclManager.executeAstMock(_ast)
           sceneInfra.modelingSend({ type: 'CancelSketch' })
@@ -1334,13 +1327,6 @@ export class SceneEntities {
         to,
       })
   }
-  async animateAfterSketch() {
-    // if (isReducedMotion()) {
-    //   sceneInfra.camControls.usePerspectiveCamera()
-    //   return
-    // }
-    await sceneInfra.camControls.animateToPerspective()
-  }
   removeSketchGrid() {
     if (this.axisGroup) this.scene.remove(this.axisGroup)
   }
@@ -1404,35 +1390,115 @@ export class SceneEntities {
         selected.material.color = defaultPlaneColor(type)
       },
       onClick: async (args) => {
-        const checkExtrudeFaceClick = async (): Promise<
-          ['face' | 'plane' | 'other', string]
-        > => {
         const { streamDimensions } = useStore.getState()
-          const { entity_id } = await sendSelectEventToEngine(
+        const { entity_id, ...rest } = await sendSelectEventToEngine(
           args?.mouseEvent,
           document.getElementById('video-stream') as HTMLVideoElement,
           streamDimensions
         )
-          if (!entity_id) return ['other', '']
+        let _entity_id = entity_id
+        console.log('things', _entity_id, rest)
+        if (!_entity_id) return
         if (
-            engineCommandManager.defaultPlanes?.xy === entity_id ||
-            engineCommandManager.defaultPlanes?.xz === entity_id ||
-            engineCommandManager.defaultPlanes?.yz === entity_id
+          engineCommandManager.defaultPlanes?.xy === _entity_id ||
+          engineCommandManager.defaultPlanes?.xz === _entity_id ||
+          engineCommandManager.defaultPlanes?.yz === _entity_id ||
+          engineCommandManager.defaultPlanes?.negXy === _entity_id ||
+          engineCommandManager.defaultPlanes?.negXz === _entity_id ||
+          engineCommandManager.defaultPlanes?.negYz === _entity_id
         ) {
-            return ['plane', entity_id]
+          const defaultPlaneStrMap: Record<string, DefaultPlaneStr> = {
+            [engineCommandManager.defaultPlanes.xy]: 'XY',
+            [engineCommandManager.defaultPlanes.xz]: 'XZ',
+            [engineCommandManager.defaultPlanes.yz]: 'YZ',
+            [engineCommandManager.defaultPlanes.negXy]: '-XY',
+            [engineCommandManager.defaultPlanes.negXz]: '-XZ',
+            [engineCommandManager.defaultPlanes.negYz]: '-YZ',
           }
-          const artifact = this.engineCommandManager.artifactMap[entity_id]
-          if (artifact?.commandType !== 'solid3d_get_extrusion_face_info')
-            return ['other', entity_id]
+          // TODO can we get this information from rust land when it creates the default planes?
+          // maybe returned from make_default_planes (src/wasm-lib/src/wasm.rs)
+          let zAxis: [number, number, number] = [0, 0, 1]
+          let yAxis: [number, number, number] = [0, 1, 0]
 
-          const faceInfo = await getFaceDetails(entity_id)
-          if (!faceInfo?.origin || !faceInfo?.z_axis || !faceInfo?.y_axis)
-            return ['other', entity_id]
+          // get unit vector from camera position to target
+          const camVector = sceneInfra.camControls.camera.position
+            .clone()
+            .sub(sceneInfra.camControls.target)
+
+          if (engineCommandManager.defaultPlanes?.xy === _entity_id) {
+            console.log('XY')
+            zAxis = [0, 0, 1]
+            yAxis = [0, 1, 0]
+            if (camVector.z < 0) {
+              zAxis = [0, 0, -1]
+              _entity_id = engineCommandManager.defaultPlanes?.negXy || ''
+            }
+          } else if (engineCommandManager.defaultPlanes?.yz === _entity_id) {
+            console.log('YZ')
+            zAxis = [1, 0, 0]
+            yAxis = [0, 0, 1]
+            if (camVector.x < 0) {
+              zAxis = [-1, 0, 0]
+              _entity_id = engineCommandManager.defaultPlanes?.negYz || ''
+            }
+          } else if (engineCommandManager.defaultPlanes?.xz === _entity_id) {
+            console.log('XZ')
+            zAxis = [0, 1, 0]
+            yAxis = [0, 0, 1]
+            _entity_id = engineCommandManager.defaultPlanes?.negXz || ''
+            if (camVector.y < 0) {
+              zAxis = [0, -1, 0]
+              _entity_id = engineCommandManager.defaultPlanes?.xz || ''
+            }
+          }
+
+          sceneInfra.modelingSend({
+            type: 'Select default plane',
+            data: {
+              type: 'defaultPlane',
+              planeId: _entity_id,
+              plane: defaultPlaneStrMap[_entity_id],
+              zAxis,
+              yAxis,
+            },
+          })
+          return
+        }
+        const artifact = this.engineCommandManager.artifactMap[_entity_id]
+        // If we clicked on an extrude wall, we climb up the parent Id
+        // to get the sketch profile's face ID. If we clicked on an endcap,
+        // we already have it.
+        const targetId =
+          'additionalData' in artifact &&
+          artifact.additionalData?.type === 'cap'
+            ? _entity_id
+            : artifact.parentId
+
+        // tsc cannot infer that target can have extrusions
+        // from the commandType (why?) so we need to cast it
+        const target = this.engineCommandManager.artifactMap?.[
+          targetId || ''
+        ] as ArtifactMapCommand & { extrusions?: string[] }
+
+        // TODO: We get the first extrusion command ID,
+        // which is fine while backend systems only support one extrusion.
+        // but we need to more robustly handle resolving to the correct extrusion
+        // if there are multiple.
+        const extrusions =
+          this.engineCommandManager.artifactMap?.[target?.extrusions?.[0] || '']
+
+        if (artifact?.commandType !== 'solid3d_get_extrusion_face_info') return
+
+        const faceInfo = await getFaceDetails(_entity_id)
+        if (!faceInfo?.origin || !faceInfo?.z_axis || !faceInfo?.y_axis) return
         const { z_axis, y_axis, origin } = faceInfo
-          const pathToNode = getNodePathFromSourceRange(
+        const sketchPathToNode = getNodePathFromSourceRange(
           kclManager.ast,
           artifact.range
         )
+        const extrudePathToNode = extrusions?.range
+          ? getNodePathFromSourceRange(kclManager.ast, extrusions.range)
+          : []
 
         sceneInfra.modelingSend({
           type: 'Select default plane',
@@ -1443,48 +1509,16 @@ export class SceneEntities {
             position: [origin.x, origin.y, origin.z].map(
               (num) => num / sceneInfra._baseUnitMultiplier
             ) as [number, number, number],
-              extrudeSegmentPathToNode: pathToNode,
+            sketchPathToNode,
+            extrudePathToNode,
             cap:
               artifact?.additionalData?.type === 'cap'
                 ? artifact.additionalData.info
                 : 'none',
-              faceId: entity_id,
-            },
-          })
-          return ['face', entity_id]
-        }
-
-        const faceResult = await checkExtrudeFaceClick()
-        console.log('faceResult', faceResult)
-        if (faceResult[0] === 'face') return
-
-        if (!args || !args.intersects?.[0]) return
-        if (args.mouseEvent.which !== 1) return
-        const { intersects } = args
-        const type = intersects?.[0].object.name || ''
-        const posNorm = Number(intersects?.[0]?.normal?.z) > 0
-        let planeString: DefaultPlaneStr = posNorm ? 'XY' : '-XY'
-        let zAxis: [number, number, number] = posNorm ? [0, 0, 1] : [0, 0, -1]
-        let yAxis: [number, number, number] = [0, 1, 0]
-        if (type === YZ_PLANE) {
-          planeString = posNorm ? 'YZ' : '-YZ'
-          zAxis = posNorm ? [1, 0, 0] : [-1, 0, 0]
-          yAxis = [0, 0, 1]
-        } else if (type === XZ_PLANE) {
-          planeString = posNorm ? '-XZ' : 'XZ'
-          zAxis = posNorm ? [0, 1, 0] : [0, -1, 0]
-          yAxis = [0, 0, 1]
-        }
-        sceneInfra.modelingSend({
-          type: 'Select default plane',
-          data: {
-            type: 'defaultPlane',
-            plane: planeString,
-            zAxis,
-            yAxis,
-            planeId: faceResult[1],
+            faceId: _entity_id,
           },
         })
+        return
       },
     })
   }

src/components/CommandBar/CommandBar.tsx

@@ -6,6 +6,8 @@ import CommandComboBox from '../CommandComboBox'
 import CommandBarReview from './CommandBarReview'
 import { useLocation } from 'react-router-dom'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
+import { CustomIcon } from 'components/CustomIcon'
+import Tooltip from 'components/Tooltip'
 
 export const CommandBar = () => {
   const { pathname } = useLocation()
@@ -103,7 +105,7 @@ export const CommandBar = () => {
           leaveTo="opacity-0 scale-95"
         >
           <WrapperComponent.Panel
-            className="relative z-50 pointer-events-auto w-full max-w-xl py-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
+            className="relative z-50 pointer-events-auto w-full max-w-xl py-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
             as="div"
             data-testid="command-bar"
           >
@@ -116,6 +118,19 @@ export const CommandBar = () => {
                 <CommandBarReview stepBack={stepBack} />
               )
             )}
+            <button
+              onClick={() => commandBarSend({ type: 'Close' })}
+              className="group block !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent"
+            >
+              <CustomIcon
+                name="close"
+                className="w-5 h-5 rounded-sm bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
+              />
+              <Tooltip position="bottom" delay={500}>
+                Cancel{' '}
+                <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
+              </Tooltip>
+            </button>
           </WrapperComponent.Panel>
         </Transition.Child>
       </WrapperComponent>

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -7,10 +7,8 @@ import {
   getSelectionType,
   getSelectionTypeDisplayText,
 } from 'lib/selections'
-import { kclManager } from 'lib/singletons'
 import { modelingMachine } from 'machines/modelingMachine'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { StateFrom } from 'xstate'
 
 const selectionSelector = (snapshot: StateFrom<typeof modelingMachine>) =>
@@ -41,24 +39,10 @@ function CommandBarSelectionInput({
     canSubmitSelectionArg(selectionsByType, arg)
   )
 
-  useHotkeys('tab', () => onSubmit(selection), {
-    enableOnFormTags: true,
-    enableOnContentEditable: true,
-    keyup: true,
-  })
-
   useEffect(() => {
     inputRef.current?.focus()
   }, [selection, inputRef])
 
-  // Exit engine's edit mode when this input step is active,
-  // and re-enter it when it's not.
-  // In future the engine's edit mode will go away and this will be handled differently.
-  useEffect(() => {
-    kclManager.exitEditMode()
-    return () => kclManager.defaultSelectionFilter()
-  }, [])
-
   // Fast-forward through this arg if it's marked as skippable
   // and we have a valid selection already
   useEffect(() => {

src/components/ContextMenu.tsx

@@ -0,0 +1,199 @@
+import toast from 'react-hot-toast'
+import { ActionIcon, ActionIconProps } from './ActionIcon'
+import { RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { Dialog } from '@headlessui/react'
+
+interface ContextMenuProps
+  extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+  items?: React.ReactElement[]
+  menuTargetElement?: RefObject<HTMLElement>
+}
+
+const DefaultContextMenuItems = [
+  <ContextMenuItemRefresh />,
+  <ContextMenuItemCopy />,
+  // add more default context menu items here
+]
+
+export function ContextMenu({
+  items = DefaultContextMenuItems,
+  menuTargetElement,
+  className,
+  ...props
+}: ContextMenuProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  const [windowSize, setWindowSize] = useState({
+    width: globalThis?.window?.innerWidth,
+    height: globalThis?.window?.innerHeight,
+  })
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  useHotkeys('esc', () => setOpen(false), {
+    enabled: open,
+  })
+
+  const dialogPositionStyle = useMemo(() => {
+    if (!dialogRef.current)
+      return {
+        top: 0,
+        left: 0,
+        right: 'auto',
+        bottom: 'auto',
+      }
+
+    return {
+      top:
+        position.y + dialogRef.current.clientHeight > windowSize.height
+          ? 'auto'
+          : position.y,
+      left:
+        position.x + dialogRef.current.clientWidth > windowSize.width
+          ? 'auto'
+          : position.x,
+      right:
+        position.x + dialogRef.current.clientWidth > windowSize.width
+          ? windowSize.width - position.x
+          : 'auto',
+      bottom:
+        position.y + dialogRef.current.clientHeight > windowSize.height
+          ? windowSize.height - position.y
+          : 'auto',
+    }
+  }, [position, windowSize, dialogRef.current])
+
+  // Listen for window resize to update context menu position
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: globalThis?.window?.innerWidth,
+        height: globalThis?.window?.innerHeight,
+      })
+    }
+    globalThis?.window?.addEventListener('resize', handleResize)
+    return () => {
+      globalThis?.window?.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  // Add context menu listener to target once mounted
+  useEffect(() => {
+    const handleContextMenu = (e: MouseEvent) => {
+      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(
+        'contextmenu',
+        handleContextMenu
+      )
+    }
+  }, [menuTargetElement?.current])
+
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)}>
+      <div
+        className="fixed inset-0 z-50 w-screen h-screen"
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        <Dialog.Backdrop className="fixed z-10 inset-0" />
+        <Dialog.Panel
+          ref={dialogRef}
+          className={`w-48 fixed bg-chalkboard-10 dark:bg-chalkboard-90
+          border border-solid border-chalkboard-10 dark:border-chalkboard-90 rounded
+          shadow-lg backdrop:fixed backdrop:inset-0 backdrop:bg-primary ${className}`}
+          style={{
+            ...dialogPositionStyle,
+            ...props.style,
+          }}
+        >
+          <ul
+            {...props}
+            className="relative flex flex-col gap-0.5 items-stretch content-stretch"
+            onClick={() => setOpen(false)}
+          >
+            {...items}
+          </ul>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  )
+}
+
+export function ContextMenuDivider() {
+  return <hr className="border-chalkboard-20 dark:border-chalkboard-80" />
+}
+
+interface ContextMenuItemProps {
+  children: React.ReactNode
+  icon?: ActionIconProps['icon']
+  onClick?: () => void
+  hotkey?: string
+}
+
+export function ContextMenuItem({
+  children,
+  icon,
+  onClick,
+  hotkey,
+}: ContextMenuItemProps) {
+  return (
+    <button
+      className="flex items-center gap-2 py-1 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left"
+      onClick={onClick}
+    >
+      {icon && <ActionIcon icon={icon} bgClassName="!bg-transparent" />}
+      <div className="flex-1">{children}</div>
+      {hotkey && (
+        <kbd className="px-1.5 py-0.5 rounded bg-primary/10 text-primary dark:bg-chalkboard-80 dark:text-chalkboard-40">
+          {hotkey}
+        </kbd>
+      )}
+    </button>
+  )
+}
+
+export function ContextMenuItemRefresh() {
+  return (
+    <ContextMenuItem
+      icon="arrowRotateRight"
+      onClick={() => globalThis?.window?.location.reload()}
+    >
+      Refresh
+    </ContextMenuItem>
+  )
+}
+
+interface ContextMenuItemCopyProps {
+  toBeCopiedContent?: string
+  toBeCopiedLabel?: string
+}
+
+export function ContextMenuItemCopy({
+  toBeCopiedContent = globalThis.window?.getSelection()?.toString(),
+  toBeCopiedLabel = 'selection',
+}: ContextMenuItemCopyProps) {
+  return (
+    <ContextMenuItem
+      icon="clipboardPlus"
+      onClick={() => {
+        if (toBeCopiedContent) {
+          globalThis?.navigator?.clipboard
+            .writeText(toBeCopiedContent)
+            .then(() => toast.success(`Copied ${toBeCopiedLabel} to clipboard`))
+            .catch(() =>
+              toast.error(`Failed to copy ${toBeCopiedLabel} to clipboard`)
+            )
+        }
+      }}
+    >
+      Copy
+    </ContextMenuItem>
+  )
+}

src/components/CustomIcon.tsx

@@ -71,6 +71,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  bug: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.8209 5.99884C10.6403 5.73962 10.3399 5.57001 10 5.57001C9.65984 5.57001 9.35936 5.73984 9.17871 5.99935C9.43724 5.95129 9.71142 5.92578 10.0012 5.92578C10.29 5.92578 10.5633 5.95111 10.8209 5.99884ZM10 4.57001C8.9459 4.57001 8.08227 5.38548 8.00554 6.41997C7.58916 6.65398 7.23724 6.95989 6.95014 7.31304L5.85355 6.21645L5.14645 6.92356L6.40931 8.18642C6.20774 8.62503 6.08043 9.09624 6.0278 9.57001H5V10.57H6.01946C6.06396 11.1581 6.1867 11.8173 6.4071 12.4558L5.14645 13.7165L5.85355 14.4236L6.8408 13.4363C7.46354 14.555 8.47307 15.4258 10.0012 15.4258C11.529 15.4258 12.5378 14.5554 13.16 13.4371L14.1464 14.4236L14.8536 13.7165L13.5934 12.4563C13.8136 11.8177 13.9362 11.1583 13.9806 10.57H15V9.57001H13.9722C13.9197 9.0961 13.7925 8.62474 13.5911 8.18602L14.8536 6.92356L14.1464 6.21645L13.0505 7.31239C12.7633 6.95894 12.4112 6.65285 11.9944 6.41883C11.9171 5.38488 11.0537 4.57001 10 4.57001ZM10.5 14.3801V8.57001H9.5V14.3796C8.72105 14.2298 8.15885 13.7245 7.7428 12.9999C7.22316 12.095 7 10.937 7 10.07C7 8.46381 8.04281 6.92578 10.0012 6.92578C11.9589 6.92578 13 8.4629 13 10.07C13 10.9373 12.7773 12.0954 12.2582 13.0003C11.8422 13.7254 11.2799 14.2309 10.5 14.3801Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   checkmark: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -257,6 +267,14 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  keyboard: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16 12V15H13.5M16 12V9M16 12H13.5M4 12V15H6.5M4 12V9M4 12H6.5M4 9V6H6.5M4 9H6.5M16 9V6H13.5M16 9H13.5M6.5 12V15M6.5 12H7.5M6.5 15H13.5M13.5 15V12M13.5 12H12.5M7.5 12V9M7.5 12H10M7.5 9H8.75M7.5 9H6.5M10 12V9M10 12H12.5M10 9H11.25M10 9H8.75M12.5 12V9M12.5 9H13.5M12.5 9H11.25M13.5 9V6M13.5 6H11.25M11.25 9V6M11.25 6H8.75M8.75 9V6M8.75 6H6.5M6.5 9V6"
+        stroke="currentColor"
+      />
+    </svg>
+  ),
   line: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/components/FileTree.tsx

@@ -18,6 +18,8 @@ import { useLspContext } from './LspProvider'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { DeleteConfirmationDialog } from './ProjectCard/DeleteProjectDialog'
+import { ContextMenu, ContextMenuItem } from './ContextMenu'
+import usePlatform from 'hooks/usePlatform'
 
 function getIndentationCSS(level: number) {
   return `calc(1rem * ${level + 1})`
@@ -125,6 +127,7 @@ const FileTreeItem = ({
   const navigate = useNavigate()
   const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
   const isCurrentFile = fileOrDir.path === currentFile?.path
+  const itemRef = useRef(null)
 
   const isRenaming = fileContext.itemsBeingRenamed.includes(fileOrDir.path)
   const removeCurrentItemFromRenaming = useCallback(
@@ -185,7 +188,7 @@ const FileTreeItem = ({
   }
 
   return (
-    <>
+    <div className="contents" ref={itemRef}>
       {fileOrDir.children === undefined ? (
         <li
           className={
@@ -321,7 +324,41 @@ const FileTreeItem = ({
           setIsOpen={setIsConfirmingDelete}
         />
       )}
-    </>
+      <FileTreeContextMenu
+        itemRef={itemRef}
+        onRename={addCurrentItemToRenaming}
+        onDelete={() => setIsConfirmingDelete(true)}
+      />
+    </div>
+  )
+}
+
+interface FileTreeContextMenuProps {
+  itemRef: React.RefObject<HTMLElement>
+  onRename: () => void
+  onDelete: () => void
+}
+
+function FileTreeContextMenu({
+  itemRef,
+  onRename,
+  onDelete,
+}: FileTreeContextMenuProps) {
+  const platform = usePlatform()
+  const metaKey = platform === 'macos' ? '⌘' : 'Ctrl'
+
+  return (
+    <ContextMenu
+      menuTargetElement={itemRef}
+      items={[
+        <ContextMenuItem onClick={onRename} hotkey="Enter">
+          Rename
+        </ContextMenuItem>,
+        <ContextMenuItem onClick={onDelete} hotkey={metaKey + ' + Del'}>
+          Delete
+        </ContextMenuItem>,
+      ]}
+    />
   )
 }
 

src/components/Gizmo.tsx

@@ -1,5 +1,6 @@
+import { SceneInfra } from 'clientSideScene/sceneInfra'
 import { sceneInfra } from 'lib/singletons'
-import { useEffect, useRef } from 'react'
+import { MutableRefObject, useEffect, useRef } from 'react'
 import {
   WebGLRenderer,
   Scene,
@@ -12,21 +13,52 @@ import {
   Clock,
   Quaternion,
   ColorRepresentation,
+  Vector2,
+  Raycaster,
+  Camera,
+  Intersection,
+  Object3D,
 } from 'three'
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuItem,
+  ContextMenuItemRefresh,
+} from './ContextMenu'
 
 const CANVAS_SIZE = 80
 const FRUSTUM_SIZE = 0.5
 const AXIS_LENGTH = 0.35
 const AXIS_WIDTH = 0.02
-const AXIS_COLORS = {
-  x: '#fa6668',
-  y: '#11eb6b',
-  z: '#6689ef',
-  gray: '#c6c7c2',
+enum AxisColors {
+  X = '#fa6668',
+  Y = '#11eb6b',
+  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 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)
 
   useEffect(() => {
     if (!canvasRef.current) return
@@ -41,35 +73,89 @@ export default function Gizmo() {
     const { gizmoAxes, gizmoAxisHeads } = createGizmo()
     scene.add(...gizmoAxes, ...gizmoAxisHeads)
 
+    const raycaster = new Raycaster()
+    const { mouse, disposeMouseEvents } = initializeMouseEvents(
+      canvas,
+      raycasterIntersect,
+      sceneInfra
+    )
+    const raycasterObjects = [...gizmoAxisHeads]
+
     const clock = new Clock()
     const clientCamera = sceneInfra.camControls.camera
     let currentQuaternion = new Quaternion().copy(clientCamera.quaternion)
 
     const animate = () => {
-      requestAnimationFrame(animate)
+      const delta = clock.getDelta()
       updateCameraOrientation(
         camera,
         currentQuaternion,
         sceneInfra.camControls.camera.quaternion,
-        clock.getDelta()
+        delta,
+        cameraPassiveUpdateTimer
+      )
+      updateRayCaster(
+        raycasterObjects,
+        raycaster,
+        mouse,
+        camera,
+        raycasterIntersect,
+        delta,
+        raycasterPassiveUpdateTimer
       )
       renderer.render(scene, camera)
+      requestAnimationFrame(animate)
     }
     animate()
 
     return () => {
       renderer.dispose()
+      disposeMouseEvents()
     }
   }, [])
 
   return (
-    <div className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-none">
+    <>
+      <div
+        ref={wrapperRef}
+        aria-label="View orientation gizmo"
+        className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto"
+      >
         <canvas ref={canvasRef} />
+        <ContextMenu
+          menuTargetElement={wrapperRef}
+          items={[
+            ...Object.entries(axisNamesSemantic).map(
+              ([axisName, axisSemantic]) => (
+                <ContextMenuItem
+                  key={axisName}
+                  onClick={() => {
+                    sceneInfra.camControls.updateCameraToAxis(
+                      axisName as AxisNames
+                    )
+                  }}
+                >
+                  {axisSemantic} view
+                </ContextMenuItem>
+              )
+            ),
+            <ContextMenuItem
+              onClick={() => {
+                sceneInfra.camControls.resetCameraPosition()
+              }}
+            >
+              Reset view
+            </ContextMenuItem>,
+            <ContextMenuDivider />,
+            <ContextMenuItemRefresh />,
+          ]}
+        />
       </div>
+    </>
   )
 }
 
-const createCamera = () => {
+const createCamera = (): OrthographicCamera => {
   return new OrthographicCamera(
     -FRUSTUM_SIZE,
     FRUSTUM_SIZE,
@@ -82,21 +168,21 @@ const createCamera = () => {
 
 const createGizmo = () => {
   const gizmoAxes = [
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.x, 0, 'z'),
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.y, Math.PI / 2, 'z'),
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.z, -Math.PI / 2, 'y'),
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.gray, Math.PI, 'z'),
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.gray, -Math.PI / 2, 'z'),
-    createAxis(AXIS_LENGTH, AXIS_WIDTH, AXIS_COLORS.gray, Math.PI / 2, 'y'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.X, 0, 'z'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.Y, Math.PI / 2, 'z'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.Z, -Math.PI / 2, 'y'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.Gray, Math.PI, 'z'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.Gray, -Math.PI / 2, 'z'),
+    createAxis(AXIS_LENGTH, AXIS_WIDTH, AxisColors.Gray, Math.PI / 2, 'y'),
   ]
 
   const gizmoAxisHeads = [
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.x, 0, 'z'),
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.y, Math.PI / 2, 'z'),
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.z, -Math.PI / 2, 'y'),
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.gray, Math.PI, 'z'),
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.gray, -Math.PI / 2, 'z'),
-    createAxisHead(AXIS_LENGTH, AXIS_COLORS.gray, Math.PI / 2, 'y'),
+    createAxisHead(AxisNames.X, AxisColors.X, [AXIS_LENGTH, 0, 0]),
+    createAxisHead(AxisNames.Y, AxisColors.Y, [0, AXIS_LENGTH, 0]),
+    createAxisHead(AxisNames.Z, AxisColors.Z, [0, 0, AXIS_LENGTH]),
+    createAxisHead(AxisNames.NEG_X, AxisColors.Gray, [-AXIS_LENGTH, 0, 0]),
+    createAxisHead(AxisNames.NEG_Y, AxisColors.Gray, [0, -AXIS_LENGTH, 0]),
+    createAxisHead(AxisNames.NEG_Z, AxisColors.Gray, [0, 0, -AXIS_LENGTH]),
   ]
 
   return { gizmoAxes, gizmoAxisHeads }
@@ -108,12 +194,9 @@ const createAxis = (
   color: ColorRepresentation,
   rotation = 0,
   axis = 'x'
-) => {
-  const geometry = new BoxGeometry(length, width, width).translate(
-    length / 2,
-    0,
-    0
-  )
+): Mesh => {
+  const geometry = new BoxGeometry(length, width, width)
+  geometry.translate(length / 2, 0, 0)
   const material = new MeshBasicMaterial({ color: new Color(color) })
   const mesh = new Mesh(geometry, material)
   mesh.rotation[axis as 'x' | 'y' | 'z'] = rotation
@@ -121,15 +204,17 @@ const createAxis = (
 }
 
 const createAxisHead = (
-  length: number,
+  name: AxisNames,
   color: ColorRepresentation,
-  rotation = 0,
-  axis = 'x'
-) => {
-  const geometry = new SphereGeometry(0.065, 16, 8).translate(length, 0, 0)
+  position: number[]
+): Mesh => {
+  const geometry = new SphereGeometry(0.065, 16, 8)
   const material = new MeshBasicMaterial({ color: new Color(color) })
   const mesh = new Mesh(geometry, material)
-  mesh.rotation[axis as 'x' | 'y' | 'z'] = rotation
+
+  mesh.position.set(position[0], position[1], position[2])
+  mesh.updateMatrixWorld()
+  mesh.name = name
   return mesh
 }
 
@@ -137,10 +222,97 @@ const updateCameraOrientation = (
   camera: OrthographicCamera,
   currentQuaternion: Quaternion,
   targetQuaternion: Quaternion,
-  deltaTime: number
+  deltaTime: number,
+  cameraPassiveUpdateTimer: MutableRefObject<number>
 ) => {
+  cameraPassiveUpdateTimer.current += deltaTime
+  if (
+    !quaternionsEqual(currentQuaternion, targetQuaternion) ||
+    cameraPassiveUpdateTimer.current >= 5
+  ) {
     const slerpFactor = 1 - Math.exp(-30 * deltaTime)
     currentQuaternion.slerp(targetQuaternion, slerpFactor).normalize()
     camera.position.set(0, 0, 1).applyQuaternion(currentQuaternion)
     camera.quaternion.copy(currentQuaternion)
+    cameraPassiveUpdateTimer.current = 0
+  }
+}
+
+const quaternionsEqual = (
+  q1: Quaternion,
+  q2: Quaternion,
+  tolerance: number = 0.001
+): boolean => {
+  return (
+    Math.abs(q1.x - q2.x) < tolerance &&
+    Math.abs(q1.y - q2.y) < tolerance &&
+    Math.abs(q1.z - q2.z) < tolerance &&
+    Math.abs(q1.w - q2.w) < tolerance
+  )
+}
+
+const initializeMouseEvents = (
+  canvas: HTMLCanvasElement,
+  raycasterIntersect: MutableRefObject<Intersection<Object3D> | null>,
+  sceneInfra: SceneInfra
+): { mouse: Vector2; disposeMouseEvents: () => void } => {
+  const mouse = new Vector2()
+  mouse.x = 1 // fix initial mouse position issue
+
+  const handleMouseMove = (event: MouseEvent) => {
+    const { left, top, width, height } = canvas.getBoundingClientRect()
+    mouse.x = ((event.clientX - left) / width) * 2 - 1
+    mouse.y = ((event.clientY - top) / height) * -2 + 1
+  }
+
+  const handleClick = () => {
+    if (raycasterIntersect.current) {
+      const axisName = raycasterIntersect.current.object.name as AxisNames
+      sceneInfra.camControls.updateCameraToAxis(axisName)
+    }
+  }
+
+  window.addEventListener('mousemove', handleMouseMove)
+  window.addEventListener('click', handleClick)
+
+  const disposeMouseEvents = () => {
+    window.removeEventListener('mousemove', handleMouseMove)
+    window.removeEventListener('click', handleClick)
+  }
+
+  return { mouse, disposeMouseEvents }
+}
+
+const updateRayCaster = (
+  objects: Object3D[],
+  raycaster: Raycaster,
+  mouse: Vector2,
+  camera: Camera,
+  raycasterIntersect: MutableRefObject<Intersection<Object3D> | null>,
+  deltaTime: number,
+  raycasterPassiveUpdateTimer: MutableRefObject<number>
+) => {
+  raycasterPassiveUpdateTimer.current += deltaTime
+
+  // check if mouse is outside the canvas bounds and stop raycaster
+  if (raycasterPassiveUpdateTimer.current < 2) {
+    if (mouse.x < -1 || mouse.x > 1 || mouse.y < -1 || mouse.y > 1) {
+      raycasterIntersect.current = null
+      return
+    }
+  }
+
+  raycaster.setFromCamera(mouse, camera)
+  const intersects = raycaster.intersectObjects(objects)
+
+  objects.forEach((object) => object.scale.set(1, 1, 1))
+  if (intersects.length) {
+    intersects[0].object.scale.set(1.5, 1.5, 1.5)
+    raycasterIntersect.current = intersects[0] // filter first object
+  } else {
+    raycasterIntersect.current = null
+  }
+  if (raycasterPassiveUpdateTimer.current > 2) {
+    raycasterPassiveUpdateTimer.current = 0
+  }
 }

src/components/HelpMenu.tsx

@@ -81,6 +81,12 @@ export function HelpMenu(props: React.PropsWithChildren) {
         >
           Release notes
         </HelpMenuItem>
+        <HelpMenuItem
+          as="button"
+          onClick={() => navigate('settings?tab=keybindings')}
+        >
+          Keyboard shortcuts
+        </HelpMenuItem>
         <HelpMenuItem
           as="button"
           onClick={() => {

src/components/Loading.tsx

@@ -1,14 +1,65 @@
 import { useEffect, useState } from 'react'
 
+import {
+  EngineConnectionStateType,
+  DisconnectingType,
+  EngineCommandManagerEvents,
+  EngineConnectionEvents,
+  ConnectionError,
+  CONNECTION_ERROR_TEXT,
+} from '../lang/std/engineConnection'
+
+import { engineCommandManager } from '../lib/singletons'
+
 const Loading = ({ children }: React.PropsWithChildren) => {
-  const [hasLongLoadTime, setHasLongLoadTime] = useState(false)
+  const [error, setError] = useState<ConnectionError>(ConnectionError.Unset)
+
   useEffect(() => {
+    const onConnectionStateChange = ({ detail: state }: CustomEvent) => {
+      if (
+        (state.type !== EngineConnectionStateType.Disconnected ||
+          state.type !== EngineConnectionStateType.Disconnecting) &&
+        state.value?.type !== DisconnectingType.Error
+      )
+        return
+      setError(state.value.value.error)
+    }
+
+    const onEngineAvailable = ({ detail: engineConnection }: CustomEvent) => {
+      engineConnection.addEventListener(
+        EngineConnectionEvents.ConnectionStateChanged,
+        onConnectionStateChange as EventListener
+      )
+    }
+
+    engineCommandManager.addEventListener(
+      EngineCommandManagerEvents.EngineAvailable,
+      onEngineAvailable as EventListener
+    )
+
+    return () => {
+      engineCommandManager.removeEventListener(
+        EngineCommandManagerEvents.EngineAvailable,
+        onEngineAvailable as EventListener
+      )
+      engineCommandManager.engineConnection?.removeEventListener(
+        EngineConnectionEvents.ConnectionStateChanged,
+        onConnectionStateChange as EventListener
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    // Don't set long loading time if there's a more severe error
+    if (error > ConnectionError.LongLoadingTime) return
+
     const timer = setTimeout(() => {
-      setHasLongLoadTime(true)
+      setError(ConnectionError.LongLoadingTime)
     }, 4000)
 
     return () => clearTimeout(timer)
-  }, [setHasLongLoadTime])
+  }, [error, setError])
+
   return (
     <div
       className="body-bg flex flex-col items-center justify-center h-screen"
@@ -29,10 +80,10 @@ const Loading = ({ children }: React.PropsWithChildren) => {
       <p
         className={
           'text-sm mt-4 text-primary/60 transition-opacity duration-500' +
-          (hasLongLoadTime ? ' opacity-100' : ' opacity-0')
+          (error !== ConnectionError.Unset ? ' opacity-100' : ' opacity-0')
         }
       >
-        Loading is taking longer than expected.
+        {CONNECTION_ERROR_TEXT[error]}
       </p>
     </div>
   )

src/components/LowerRightControls.tsx

@@ -33,7 +33,7 @@ export function LowerRightControls(props: React.PropsWithChildren) {
           rel="noopener noreferrer"
         >
           <CustomIcon
-            name="exclamationMark"
+            name="bug"
             className={`w-5 h-5 ${linkOverrideClassName}`}
           />
           <Tooltip position="top">Report a bug</Tooltip>

src/components/LspProvider.tsx

@@ -13,7 +13,6 @@ import { LanguageSupport } from '@codemirror/language'
 import { useNavigate } from 'react-router-dom'
 import { paths } from 'lib/paths'
 import { FileEntry } from 'lib/types'
-import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
 import Worker from 'editor/plugins/lsp/worker.ts?worker'
 import {
   LspWorkerEventType,
@@ -23,6 +22,8 @@ import {
 } from 'editor/plugins/lsp/types'
 import { wasmUrl } from 'lang/wasm'
 import { PROJECT_ENTRYPOINT } from 'lib/constants'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 
 function getWorkspaceFolders(): LSP.WorkspaceFolder[] {
   return []
@@ -86,7 +87,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   } = useSettingsAuthContext()
   const token = auth?.context.token
   const navigate = useNavigate()
-  const { overallState } = useNetworkStatus()
+  const { overallState } = useNetworkContext()
   const isNetworkOkay = overallState === NetworkHealthState.Ok
 
   // So this is a bit weird, we need to initialize the lsp server and client.

src/components/ModelingMachineProvider.tsx

@@ -47,7 +47,6 @@ import {
   TANGENTIAL_ARC_TO_SEGMENT,
   getParentGroup,
   getSketchOrientationDetails,
-  getSketchQuaternion,
 } from 'clientSideScene/sceneEntities'
 import {
   moveValueIntoNewVariablePath,
@@ -76,6 +75,7 @@ import { useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { getVarNameModal } from 'hooks/useToolbarGuards'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
+import { uuidv4 } from 'lib/utils'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -121,7 +121,24 @@ export const ModelingMachineProvider = ({
     htmlRef,
     token
   )
-  useHotkeyWrapper(['meta + shift + .'], () => coreDump(coreDumpManager, true))
+  useHotkeyWrapper(['meta + shift + .'], () => {
+    console.warn('CoreDump: Initializing core dump')
+    toast.promise(
+      coreDump(coreDumpManager, true),
+      {
+        loading: 'Starting core dump...',
+        success: 'Core dump completed successfully',
+        error: 'Error while exporting core dump',
+      },
+      {
+        success: {
+          // Note: this extended duration is especially important for Playwright e2e testing
+          // default duration is 2000 - https://react-hot-toast.com/docs/toast#default-durations
+          duration: 6000,
+        },
+      }
+    )
+  })
 
   // Settings machine setup
   // const retrievedSettings = useRef(
@@ -141,7 +158,41 @@ export const ModelingMachineProvider = ({
     {
       actions: {
         'sketch exit execute': () => {
+          ;(async () => {
+            await sceneInfra.camControls.snapToPerspectiveBeforeHandingBackControlToEngine()
+
+            sceneInfra.camControls.syncDirection = 'engineToClient'
+
+            const settings: Models['CameraSettings_type'] = (
+              await engineCommandManager.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: {
+                  type: 'default_camera_get_settings',
+                },
+              })
+            )?.data?.data?.settings
+            if (settings.up.z !== 1) {
+              // workaround for gimbal lock situation
+              await engineCommandManager.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: {
+                  type: 'default_camera_look_at',
+                  center: settings.center,
+                  vantage: {
+                    ...settings.pos,
+                    y:
+                      settings.pos.y +
+                      (settings.center.z - settings.pos.z > 0 ? 2 : -2),
+                  },
+                  up: { x: 0, y: 0, z: 1 },
+                },
+              })
+            }
+
             kclManager.executeCode(true)
+          })()
         },
         'Set mouse state': assign({
           mouseState: (_, event) => event.data,
@@ -453,7 +504,8 @@ export const ModelingMachineProvider = ({
             const { modifiedAst, pathToNode: pathToNewSketchNode } =
               sketchOnExtrudedFace(
                 kclManager.ast,
-                data.extrudeSegmentPathToNode,
+                data.sketchPathToNode,
+                data.extrudePathToNode,
                 kclManager.programMemory,
                 data.cap
               )
@@ -463,7 +515,7 @@ export const ModelingMachineProvider = ({
               engineCommandManager,
               data.faceId
             )
-
+            sceneInfra.camControls.syncDirection = 'clientToEngine'
             return {
               sketchPathToNode: pathToNewSketchNode,
               zAxis: data.zAxis,
@@ -477,8 +529,10 @@ export const ModelingMachineProvider = ({
           )
           await kclManager.updateAst(modifiedAst, false)
           sceneInfra.camControls.syncDirection = 'clientToEngine'
-          const quat = await getSketchQuaternion(pathToNode, data.zAxis)
-          await sceneInfra.camControls.tweenCameraToQuaternion(quat)
+          await letEngineAnimateAndSyncCamAfter(
+            engineCommandManager,
+            data.planeId
+          )
           return {
             sketchPathToNode: pathToNode,
             zAxis: data.zAxis,

src/components/ModelingSidebar/ModelingPane.module.css

@@ -2,7 +2,7 @@
   @apply relative z-0 rounded-r max-w-full h-full flex-1;
   display: grid;
   grid-template-rows: auto 1fr;
-  @apply bg-chalkboard-10/50 backdrop-blur-sm border border-chalkboard-20;
+  @apply bg-chalkboard-10/50 focus-within:bg-chalkboard-10/90 backdrop-blur-sm border border-chalkboard-20;
   scroll-margin-block-start: 41px;
 }
 
@@ -12,7 +12,7 @@
 }
 
 :global(.dark) .panel {
-  @apply bg-chalkboard-100/50 backdrop-blur-[3px] border-chalkboard-80;
+  @apply bg-chalkboard-100/50 focus-within:bg-chalkboard-100/90 backdrop-blur-[3px] border-chalkboard-80;
 }
 
 .header {

src/components/ModelingSidebar/ModelingPane.tsx

@@ -46,7 +46,11 @@ export const ModelingPane = ({
       data-testid={detailsTestId}
       id={id}
       className={
-        pointerEventsCssClass + styles.panel + ' group ' + (className || '')
+        'group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
+        pointerEventsCssClass +
+        styles.panel +
+        ' group ' +
+        (className || '')
       }
     >
       <ModelingPaneHeader title={title} Menu={Menu} />

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -123,6 +123,7 @@ function ModelingSidebarSection({
   }, [showDebugPanel.current, togglePane, openPanes])
 
   return (
+    <div className="group contents">
       <Tab.Group
         vertical
         selectedIndex={
@@ -142,7 +143,8 @@ function ModelingSidebarSection({
             (currentPane === 'none'
               ? ' rounded-r focus-within:!border-primary/50'
               : ' border-r-0') +
-          ' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 ' +
+            ' p-2 col-start-1 col-span-1 h-fit w-fit flex flex-col items-start gap-2 ' +
+            'bg-chalkboard-10 border border-solid border-chalkboard-20 dark:bg-chalkboard-90 dark:border-chalkboard-80 group-focus-within:border-primary dark:group-focus-within:border-chalkboard-50 ' +
             (openPanes.length === 1 && currentPane === 'none' ? 'pr-0.5' : '')
           }
         >
@@ -187,6 +189,7 @@ function ModelingSidebarSection({
           ))}
         </Tab.Panels>
       </Tab.Group>
+    </div>
   )
 }
 

src/components/NetworkHealthIndicator.test.tsx

@@ -5,8 +5,8 @@ import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import {
   NETWORK_HEALTH_TEXT,
   NetworkHealthIndicator,
-  NetworkHealthState,
 } from './NetworkHealthIndicator'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 
 function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
@@ -19,6 +19,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   )
 }
 
+// Our Playwright tests for this are much more comprehensive.
 describe('NetworkHealthIndicator tests', () => {
   test('Renders the network indicator', () => {
     render(
@@ -29,21 +30,7 @@ describe('NetworkHealthIndicator tests', () => {
 
     fireEvent.click(screen.getByTestId('network-toggle'))
 
-    expect(screen.getByTestId('network')).toHaveTextContent(
-      NETWORK_HEALTH_TEXT[NetworkHealthState.Ok]
-    )
-  })
-
-  test('Responds to network changes', () => {
-    render(
-      <TestWrap>
-        <NetworkHealthIndicator />
-      </TestWrap>
-    )
-
-    fireEvent.offline(window)
-    fireEvent.click(screen.getByTestId('network-toggle'))
-
+    // Starts as disconnected
     expect(screen.getByTestId('network')).toHaveTextContent(
       NETWORK_HEALTH_TEXT[NetworkHealthState.Disconnected]
     )

src/components/NetworkHealthIndicator.tsx

@@ -1,26 +1,13 @@
 import { Popover } from '@headlessui/react'
-import { useEffect, useState } from 'react'
 import { ActionIcon, ActionIconProps } from './ActionIcon'
-import {
-  ConnectingType,
-  ConnectingTypeGroup,
-  DisconnectingType,
-  EngineConnectionState,
-  EngineConnectionStateType,
-  ErrorType,
-  initialConnectingTypeGroupState,
-} from '../lang/std/engineConnection'
-import { engineCommandManager } from '../lib/singletons'
 import Tooltip from './Tooltip'
-
-export enum NetworkHealthState {
-  Ok,
-  Issue,
-  Disconnected,
-}
+import { ConnectingTypeGroup } from '../lang/std/engineConnection'
+import { useNetworkContext } from '../hooks/useNetworkContext'
+import { NetworkHealthState } from '../hooks/useNetworkStatus'
 
 export const NETWORK_HEALTH_TEXT: Record<NetworkHealthState, string> = {
   [NetworkHealthState.Ok]: 'Connected',
+  [NetworkHealthState.Weak]: 'Weak',
   [NetworkHealthState.Issue]: 'Problem',
   [NetworkHealthState.Disconnected]: 'Offline',
 }
@@ -61,6 +48,10 @@ const overallConnectionStateColor: Record<NetworkHealthState, IconColorConfig> =
       icon: 'text-succeed-80 dark:text-succeed-10',
       bg: 'bg-succeed-10/30 dark:bg-succeed-80/50',
     },
+    [NetworkHealthState.Weak]: {
+      icon: 'text-warn-80 dark:text-warn-10',
+      bg: 'bg-warn-10 dark:bg-warn-80/80',
+    },
     [NetworkHealthState.Issue]: {
       icon: 'text-destroy-80 dark:text-destroy-10',
       bg: 'bg-destroy-10 dark:bg-destroy-80/80',
@@ -76,125 +67,11 @@ const overallConnectionStateIcon: Record<
   ActionIconProps['icon']
 > = {
   [NetworkHealthState.Ok]: 'network',
+  [NetworkHealthState.Weak]: 'network',
   [NetworkHealthState.Issue]: 'networkCrossedOut',
   [NetworkHealthState.Disconnected]: 'networkCrossedOut',
 }
 
-export function useNetworkStatus() {
-  const [steps, setSteps] = useState(initialConnectingTypeGroupState)
-  const [internetConnected, setInternetConnected] = useState<boolean>(true)
-  const [overallState, setOverallState] = useState<NetworkHealthState>(
-    NetworkHealthState.Ok
-  )
-  const [hasCopied, setHasCopied] = useState<boolean>(false)
-
-  const [error, setError] = useState<ErrorType | undefined>(undefined)
-
-  const issues: Record<ConnectingTypeGroup, boolean> = {
-    [ConnectingTypeGroup.WebSocket]: steps[ConnectingTypeGroup.WebSocket].some(
-      (a: [ConnectingType, boolean | undefined]) => a[1] === false
-    ),
-    [ConnectingTypeGroup.ICE]: steps[ConnectingTypeGroup.ICE].some(
-      (a: [ConnectingType, boolean | undefined]) => a[1] === false
-    ),
-    [ConnectingTypeGroup.WebRTC]: steps[ConnectingTypeGroup.WebRTC].some(
-      (a: [ConnectingType, boolean | undefined]) => a[1] === false
-    ),
-  }
-
-  const hasIssues: boolean =
-    issues[ConnectingTypeGroup.WebSocket] ||
-    issues[ConnectingTypeGroup.ICE] ||
-    issues[ConnectingTypeGroup.WebRTC]
-
-  useEffect(() => {
-    setOverallState(
-      !internetConnected
-        ? NetworkHealthState.Disconnected
-        : hasIssues
-        ? NetworkHealthState.Issue
-        : NetworkHealthState.Ok
-    )
-  }, [hasIssues, internetConnected])
-
-  useEffect(() => {
-    const onlineCallback = () => {
-      setSteps(initialConnectingTypeGroupState)
-      setInternetConnected(true)
-    }
-    const offlineCallback = () => {
-      setInternetConnected(false)
-    }
-    window.addEventListener('online', onlineCallback)
-    window.addEventListener('offline', offlineCallback)
-    return () => {
-      window.removeEventListener('online', onlineCallback)
-      window.removeEventListener('offline', offlineCallback)
-    }
-  }, [])
-
-  useEffect(() => {
-    engineCommandManager.onConnectionStateChange(
-      (engineConnectionState: EngineConnectionState) => {
-        let hasSetAStep = false
-
-        if (
-          engineConnectionState.type === EngineConnectionStateType.Connecting
-        ) {
-          const groups = Object.values(steps)
-          for (let group of groups) {
-            for (let step of group) {
-              if (step[0] !== engineConnectionState.value.type) continue
-              step[1] = true
-              hasSetAStep = true
-            }
-          }
-        }
-
-        if (
-          engineConnectionState.type === EngineConnectionStateType.Disconnecting
-        ) {
-          const groups = Object.values(steps)
-          for (let group of groups) {
-            for (let step of group) {
-              if (
-                engineConnectionState.value.type === DisconnectingType.Error
-              ) {
-                if (
-                  engineConnectionState.value.value.lastConnectingValue
-                    ?.type === step[0]
-                ) {
-                  step[1] = false
-                  hasSetAStep = true
-                }
-              }
-            }
-
-            if (engineConnectionState.value.type === DisconnectingType.Error) {
-              setError(engineConnectionState.value.value)
-            }
-          }
-        }
-
-        if (hasSetAStep) {
-          setSteps(steps)
-        }
-      }
-    )
-  }, [])
-
-  return {
-    hasIssues,
-    overallState,
-    internetConnected,
-    steps,
-    issues,
-    error,
-    setHasCopied,
-    hasCopied,
-  }
-}
-
 export const NetworkHealthIndicator = () => {
   const {
     hasIssues,
@@ -205,7 +82,7 @@ export const NetworkHealthIndicator = () => {
     error,
     setHasCopied,
     hasCopied,
-  } = useNetworkStatus()
+  } = useNetworkContext()
 
   return (
     <Popover className="relative">
@@ -259,18 +136,18 @@ export const NetworkHealthIndicator = () => {
                     size="lg"
                     icon={
                       hasIssueToIcon[
-                        issues[name as ConnectingTypeGroup].toString()
+                        String(issues[name as ConnectingTypeGroup])
                       ]
                     }
                     iconClassName={
                       hasIssueToIconColors[
-                        issues[name as ConnectingTypeGroup].toString()
+                        String(issues[name as ConnectingTypeGroup])
                       ].icon
                     }
                     bgClassName={
                       'rounded-sm ' +
                       hasIssueToIconColors[
-                        issues[name as ConnectingTypeGroup].toString()
+                        String(issues[name as ConnectingTypeGroup])
                       ].bg
                     }
                   />

src/components/ProjectSidebarMenu.test.tsx

@@ -1,8 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { SettingsAuthProviderJest } from './SettingsAuthProvider'
-import { APP_NAME } from 'lib/constants'
 import { CommandBarProvider } from './CommandBar/CommandBarProvider'
 import { Project } from 'wasm-lib/kcl/bindings/Project'
 

src/components/ProjectSidebarMenu.tsx

@@ -5,7 +5,6 @@ import { paths } from 'lib/paths'
 import { isTauri } from '../lib/isTauri'
 import { Link } from 'react-router-dom'
 import { Fragment } from 'react'
-import { FileTree } from './FileTree'
 import { sep } from '@tauri-apps/api/path'
 import { Logo } from './Logo'
 import { APP_NAME } from 'lib/constants'

src/components/RefreshButton.tsx

@@ -24,9 +24,9 @@ export function RefreshButton() {
   return (
     <button
       onClick={refresh}
-      className="p-1 m-0 bg-chalkboard-10/80 dark:bg-chalkboard-100/50 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100 rounded-full border border-solid border-chalkboard-10 dark:border-chalkboard-100"
+      className="p-1 m-0 bg-chalkboard-10/80 dark:bg-chalkboard-100/50 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100 rounded-full border border-solid border-chalkboard-20 dark:border-chalkboard-90"
     >
-      <CustomIcon name="arrowRotateRight" className="w-5 h-5" />
+      <CustomIcon name="exclamationMark" className="w-5 h-5" />
       <Tooltip position="bottom-right">
         <span>Refresh and report</span>
         <br />

src/components/Settings/AllKeybindingsFields.tsx

@@ -0,0 +1,87 @@
+import {
+  InteractionMapItem,
+  interactionMap,
+  sortInteractionMapByCategory,
+} from 'lib/settings/initialKeybindings'
+import { ForwardedRef, forwardRef } from 'react'
+import { useLocation } from 'react-router-dom'
+
+interface AllKeybindingsFieldsProps {}
+
+export const AllKeybindingsFields = forwardRef(
+  (
+    props: AllKeybindingsFieldsProps,
+    scrollRef: ForwardedRef<HTMLDivElement>
+  ) => {
+    // This is how we will get the interaction map from the context
+    // in the future whene franknoirot/editable-hotkeys is merged.
+    // const { state } = useInteractionMapContext()
+
+    return (
+      <div className="relative overflow-y-auto pb-16">
+        <div ref={scrollRef} className="flex flex-col gap-12">
+          {Object.entries(interactionMap)
+            .sort(sortInteractionMapByCategory)
+            .map(([category, categoryItems]) => (
+              <div className="flex flex-col gap-4 px-2 pr-4">
+                <h2
+                  id={`category-${category}`}
+                  className="text-xl mt-6 first-of-type:mt-0 capitalize font-bold"
+                >
+                  {category}
+                </h2>
+                {categoryItems.map((item) => (
+                  <KeybindingField
+                    key={category + '-' + item.name}
+                    category={category}
+                    item={item}
+                  />
+                ))}
+              </div>
+            ))}
+        </div>
+      </div>
+    )
+  }
+)
+
+function KeybindingField({
+  item,
+  category,
+}: {
+  item: InteractionMapItem
+  category: string
+}) {
+  const location = useLocation()
+
+  return (
+    <div
+      className={
+        'flex gap-16 justify-between items-start py-1 px-2 -my-1 -mx-2 ' +
+        (location.hash === `#${item.name}`
+          ? 'bg-primary/5 dark:bg-chalkboard-90'
+          : '')
+      }
+      id={item.name}
+    >
+      <div>
+        <h3 className="text-lg font-normal capitalize tracking-wide">
+          {item.title}
+        </h3>
+        <p className="text-xs text-chalkboard-60 dark:text-chalkboard-50">
+          {item.description}
+        </p>
+      </div>
+      <div className="flex-1 flex flex-wrap justify-end gap-3">
+        {item.sequence.split(' ').map((chord, i) => (
+          <kbd
+            key={`${category}-${item.name}-${chord}-${i}`}
+            className="py-0.5 px-1.5 rounded bg-primary/10 dark:bg-chalkboard-80"
+          >
+            {chord}
+          </kbd>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/Settings/AllSettingsFields.tsx

@@ -0,0 +1,238 @@
+import decamelize from 'decamelize'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { Setting } from 'lib/settings/initialSettings'
+import { SetEventTypes, SettingsLevel } from 'lib/settings/settingsTypes'
+import {
+  shouldHideSetting,
+  shouldShowSettingInput,
+} from 'lib/settings/settingsUtils'
+import { Fragment } from 'react/jsx-runtime'
+import { SettingsSection } from './SettingsSection'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { isTauri } from 'lib/isTauri'
+import { ActionButton } from 'components/ActionButton'
+import { SettingsFieldInput } from './SettingsFieldInput'
+import { getInitialDefaultDir, showInFolder } from 'lib/tauri'
+import toast from 'react-hot-toast'
+import { APP_VERSION } from 'routes/Settings'
+import { createAndOpenNewProject, getSettingsFolderPaths } from 'lib/tauriFS'
+import { paths } from 'lib/paths'
+import { useDotDotSlash } from 'hooks/useDotDotSlash'
+import { sep } from '@tauri-apps/api/path'
+import { ForwardedRef, forwardRef } from 'react'
+
+interface AllSettingsFieldsProps {
+  searchParamTab: SettingsLevel
+  isFileSettings: boolean
+}
+
+export const AllSettingsFields = forwardRef(
+  (
+    { searchParamTab, isFileSettings }: AllSettingsFieldsProps,
+    scrollRef: ForwardedRef<HTMLDivElement>
+  ) => {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const dotDotSlash = useDotDotSlash()
+    const {
+      settings: { send, context },
+    } = useSettingsAuthContext()
+
+    const projectPath =
+      isFileSettings && isTauri()
+        ? decodeURI(
+            location.pathname
+              .replace(paths.FILE + '/', '')
+              .replace(paths.SETTINGS, '')
+              .slice(0, decodeURI(location.pathname).lastIndexOf(sep()))
+          )
+        : undefined
+
+    function restartOnboarding() {
+      send({
+        type: `set.app.onboardingStatus`,
+        data: { level: 'user', value: '' },
+      })
+
+      if (isFileSettings) {
+        navigate(dotDotSlash(1) + paths.ONBOARDING.INDEX)
+      } else {
+        createAndOpenNewProject(navigate)
+      }
+    }
+
+    return (
+      <div className="relative overflow-y-auto">
+        <div ref={scrollRef} className="flex flex-col gap-4 px-2">
+          {Object.entries(context)
+            .filter(([_, categorySettings]) =>
+              // Filter out categories that don't have any non-hidden settings
+              Object.values(categorySettings).some(
+                (setting) => !shouldHideSetting(setting, searchParamTab)
+              )
+            )
+            .map(([category, categorySettings]) => (
+              <Fragment key={category}>
+                <h2
+                  id={`category-${category}`}
+                  className="text-xl mt-6 first-of-type:mt-0 capitalize font-bold"
+                >
+                  {decamelize(category, { separator: ' ' })}
+                </h2>
+                {Object.entries(categorySettings)
+                  .filter(
+                    // Filter out settings that don't have a Component or inputType
+                    // or are hidden on the current level or the current platform
+                    (item: [string, Setting<unknown>]) =>
+                      shouldShowSettingInput(item[1], searchParamTab)
+                  )
+                  .map(([settingName, s]) => {
+                    const setting = s as Setting
+                    const parentValue =
+                      setting[setting.getParentLevel(searchParamTab)]
+                    return (
+                      <SettingsSection
+                        title={decamelize(settingName, {
+                          separator: ' ',
+                        })}
+                        id={settingName}
+                        className={
+                          location.hash === `#${settingName}`
+                            ? 'bg-primary/5 dark:bg-chalkboard-90'
+                            : ''
+                        }
+                        key={`${category}-${settingName}-${searchParamTab}`}
+                        description={setting.description}
+                        settingHasChanged={
+                          setting[searchParamTab] !== undefined &&
+                          setting[searchParamTab] !==
+                            setting.getFallback(searchParamTab)
+                        }
+                        parentLevel={setting.getParentLevel(searchParamTab)}
+                        onFallback={() =>
+                          send({
+                            type: `set.${category}.${settingName}`,
+                            data: {
+                              level: searchParamTab,
+                              value:
+                                parentValue !== undefined
+                                  ? parentValue
+                                  : setting.getFallback(searchParamTab),
+                            },
+                          } as SetEventTypes)
+                        }
+                      >
+                        <SettingsFieldInput
+                          category={category}
+                          settingName={settingName}
+                          settingsLevel={searchParamTab}
+                          setting={setting}
+                        />
+                      </SettingsSection>
+                    )
+                  })}
+              </Fragment>
+            ))}
+          <h2 id="settings-resets" className="text-2xl mt-6 font-bold">
+            Resets
+          </h2>
+          <SettingsSection
+            title="Onboarding"
+            description="Replay the onboarding process"
+          >
+            <ActionButton
+              Element="button"
+              onClick={restartOnboarding}
+              iconStart={{
+                icon: 'refresh',
+                size: 'sm',
+                className: 'p-1',
+              }}
+            >
+              Replay Onboarding
+            </ActionButton>
+          </SettingsSection>
+          <SettingsSection
+            title="Reset settings"
+            description={`Restore settings to their default values. Your settings are saved in
+                    ${
+                      isTauri()
+                        ? ' a file in the app data folder for your OS.'
+                        : " your browser's local storage."
+                    }
+                  `}
+          >
+            <div className="flex flex-col items-start gap-4">
+              {isTauri() && (
+                <ActionButton
+                  Element="button"
+                  onClick={async () => {
+                    const paths = await getSettingsFolderPaths(
+                      projectPath ? decodeURIComponent(projectPath) : undefined
+                    )
+                    showInFolder(paths[searchParamTab])
+                  }}
+                  iconStart={{
+                    icon: 'folder',
+                    size: 'sm',
+                    className: 'p-1',
+                  }}
+                >
+                  Show in folder
+                </ActionButton>
+              )}
+              <ActionButton
+                Element="button"
+                onClick={async () => {
+                  const defaultDirectory = await getInitialDefaultDir()
+                  send({
+                    type: 'Reset settings',
+                    defaultDirectory,
+                  })
+                  toast.success('Settings restored to default')
+                }}
+                iconStart={{
+                  icon: 'refresh',
+                  size: 'sm',
+                  className: 'p-1 text-chalkboard-10',
+                  bgClassName: 'bg-destroy-70',
+                }}
+              >
+                Restore default settings
+              </ActionButton>
+            </div>
+          </SettingsSection>
+          <h2 id="settings-about" className="text-2xl mt-6 font-bold">
+            About Modeling App
+          </h2>
+          <div className="text-sm mb-12">
+            <p>
+              {/* This uses a Vite plugin, set in vite.config.ts
+                  to inject the version from package.json */}
+              App version {APP_VERSION}.{' '}
+              <a
+                href={`https://github.com/KittyCAD/modeling-app/releases/tag/v${APP_VERSION}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View release on GitHub
+              </a>
+            </p>
+            <p className="max-w-2xl mt-6">
+              Don't see the feature you want? Check to see if it's on{' '}
+              <a
+                href="https://github.com/KittyCAD/modeling-app/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                our roadmap
+              </a>
+              , and start a discussion if you don't see it! Your feedback will
+              help us prioritize what to build next.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)

src/components/Settings/KeybindingsSectionsList.tsx

@@ -0,0 +1,35 @@
+import {
+  interactionMap,
+  sortInteractionMapByCategory,
+} from 'lib/settings/initialKeybindings'
+
+interface KeybindingSectionsListProps {
+  scrollRef: React.RefObject<HTMLDivElement>
+}
+
+export function KeybindingsSectionsList({
+  scrollRef,
+}: KeybindingSectionsListProps) {
+  return (
+    <div className="flex w-32 flex-col gap-3 pr-2 py-1 border-0 border-r border-r-chalkboard-20 dark:border-r-chalkboard-90">
+      {Object.entries(interactionMap)
+        .sort(sortInteractionMapByCategory)
+        .map(([category]) => (
+          <button
+            key={category}
+            onClick={() =>
+              scrollRef.current
+                ?.querySelector(`#category-${category}`)
+                ?.scrollIntoView({
+                  block: 'center',
+                  behavior: 'smooth',
+                })
+            }
+            className="capitalize text-left border-none px-1"
+          >
+            {category}
+          </button>
+        ))}
+    </div>
+  )
+}

src/components/Settings/SettingsSearchBar.tsx

@@ -3,11 +3,23 @@ import { CustomIcon } from 'components/CustomIcon'
 import decamelize from 'decamelize'
 import Fuse from 'fuse.js'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { interactionMap } from 'lib/settings/initialKeybindings'
 import { Setting } from 'lib/settings/initialSettings'
+import { SettingsLevel } from 'lib/settings/settingsTypes'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useNavigate } from 'react-router-dom'
 
+type ExtendedSettingsLevel = SettingsLevel | 'keybindings'
+
+export type SettingsSearchItem = {
+  name: string
+  displayName: string
+  description: string
+  category: string
+  level: ExtendedSettingsLevel
+}
+
 export function SettingsSearchBar() {
   const inputRef = useRef<HTMLInputElement>(null)
   useHotkeys(
@@ -21,29 +33,40 @@ export function SettingsSearchBar() {
   const navigate = useNavigate()
   const [query, setQuery] = useState('')
   const { settings } = useSettingsAuthContext()
-  const settingsAsSearchable = useMemo(
-    () =>
-      Object.entries(settings.state.context).flatMap(
+  const settingsAsSearchable: SettingsSearchItem[] = useMemo(
+    () => [
+      ...Object.entries(settings.state.context).flatMap(
         ([category, categorySettings]) =>
           Object.entries(categorySettings).flatMap(([settingName, setting]) => {
             const s = setting as Setting
-            return ['project', 'user']
+            return (['project', 'user'] satisfies SettingsLevel[])
               .filter((l) => s.hideOnLevel !== l)
               .map((l) => ({
                 category: decamelize(category, { separator: ' ' }),
-                settingName: settingName,
-                settingNameDisplay: decamelize(settingName, { separator: ' ' }),
-                setting: s,
-                level: l,
+                name: settingName,
+                description: s.description ?? '',
+                displayName: decamelize(settingName, { separator: ' ' }),
+                level: l as ExtendedSettingsLevel,
               }))
           })
       ),
+      ...Object.entries(interactionMap).flatMap(
+        ([category, categoryKeybindings]) =>
+          categoryKeybindings.map((keybinding) => ({
+            name: keybinding.name,
+            displayName: keybinding.title,
+            description: keybinding.description,
+            category: category,
+            level: 'keybindings' as ExtendedSettingsLevel,
+          }))
+      ),
+    ],
     [settings.state.context]
   )
   const [searchResults, setSearchResults] = useState(settingsAsSearchable)
 
   const fuse = new Fuse(settingsAsSearchable, {
-    keys: ['category', 'settingNameDisplay', 'setting.description'],
+    keys: ['category', 'displayName', 'description'],
     includeScore: true,
   })
 
@@ -52,16 +75,8 @@ export function SettingsSearchBar() {
     setSearchResults(query.length > 0 ? results : settingsAsSearchable)
   }, [query])
 
-  function handleSelection({
-    level,
-    settingName,
-  }: {
-    category: string
-    settingName: string
-    setting: Setting<unknown>
-    level: string
-  }) {
-    navigate(`?tab=${level}#${settingName}`)
+  function handleSelection({ level, name }: SettingsSearchItem) {
+    navigate(`?tab=${level}#${name}`)
   }
 
   return (
@@ -87,18 +102,18 @@ export function SettingsSearchBar() {
         <Combobox.Options className="absolute top-full mt-2 right-0 w-80 overflow-y-auto z-50 max-h-96 cursor-pointer bg-chalkboard-10 dark:bg-chalkboard-100 border border-solid border-primary dark:border-chalkboard-30 rounded">
           {searchResults?.map((option) => (
             <Combobox.Option
-              key={`${option.category}-${option.settingName}-${option.level}`}
+              key={`${option.category}-${option.name}-${option.level}`}
               value={option}
               className="flex flex-col items-start gap-2 px-4 py-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
             >
               <p className="flex-grow text-base capitalize m-0 leading-none">
                 {option.level} ·{' '}
                 {decamelize(option.category, { separator: ' ' })} ·{' '}
-                {option.settingNameDisplay}
+                {option.displayName}
               </p>
-              {option.setting.description && (
+              {option.description && (
                 <p className="text-xs leading-tight text-chalkboard-70 dark:text-chalkboard-50">
-                  {option.setting.description}
+                  {option.description}
                 </p>
               )}
             </Combobox.Option>

src/components/Settings/SettingsSectionsList.tsx

@@ -0,0 +1,68 @@
+import decamelize from 'decamelize'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { Setting } from 'lib/settings/initialSettings'
+import { SettingsLevel } from 'lib/settings/settingsTypes'
+import { shouldHideSetting } from 'lib/settings/settingsUtils'
+
+interface SettingsSectionsListProps {
+  searchParamTab: SettingsLevel
+  scrollRef: React.RefObject<HTMLDivElement>
+}
+
+export function SettingsSectionsList({
+  searchParamTab,
+  scrollRef,
+}: SettingsSectionsListProps) {
+  const {
+    settings: { context },
+  } = useSettingsAuthContext()
+  return (
+    <div className="flex w-32 flex-col gap-3 pr-2 py-1 border-0 border-r border-r-chalkboard-20 dark:border-r-chalkboard-90">
+      {Object.entries(context)
+        .filter(([_, categorySettings]) =>
+          // Filter out categories that don't have any non-hidden settings
+          Object.values(categorySettings).some(
+            (setting: Setting) => !shouldHideSetting(setting, searchParamTab)
+          )
+        )
+        .map(([category]) => (
+          <button
+            key={category}
+            onClick={() =>
+              scrollRef.current
+                ?.querySelector(`#category-${category}`)
+                ?.scrollIntoView({
+                  block: 'center',
+                  behavior: 'smooth',
+                })
+            }
+            className="capitalize text-left border-none px-1"
+          >
+            {decamelize(category, { separator: ' ' })}
+          </button>
+        ))}
+      <button
+        onClick={() =>
+          scrollRef.current?.querySelector(`#settings-resets`)?.scrollIntoView({
+            block: 'center',
+            behavior: 'smooth',
+          })
+        }
+        className="capitalize text-left border-none px-1"
+      >
+        Resets
+      </button>
+      <button
+        onClick={() =>
+          scrollRef.current?.querySelector(`#settings-about`)?.scrollIntoView({
+            block: 'center',
+            behavior: 'smooth',
+          })
+        }
+        className="capitalize text-left border-none px-1"
+      >
+        About
+      </button>
+    </div>
+  )
+}

src/components/Settings/SettingsTabs.tsx

@@ -34,6 +34,15 @@ export function SettingsTabs({
           )}
         </RadioGroup.Option>
       )}
+      <RadioGroup.Option value="keybindings">
+        {({ checked }) => (
+          <SettingsTabButton
+            checked={checked}
+            icon="keyboard"
+            text="Keybindings"
+          />
+        )}
+      </RadioGroup.Option>
     </RadioGroup>
   )
 }

src/components/SettingsAuthProvider.tsx

@@ -171,7 +171,9 @@ export const SettingsAuthProviderBase = ({
           })
         },
         'Execute AST': () => kclManager.executeCode(true, true),
-        persistSettings: (context) =>
+      },
+      services: {
+        'Persist settings': (context) =>
           saveSettings(context, loadedProject?.project?.path),
       },
     }

src/components/Stream.tsx

@@ -4,8 +4,9 @@ import { getNormalisedCoordinates } from '../lib/utils'
 import Loading from './Loading'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useModelingContext } from 'hooks/useModelingContext'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
-import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
 import { butName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
 
@@ -28,8 +29,43 @@ export const Stream = ({ className = '' }: { className?: string }) => {
   }))
   const { settings } = useSettingsAuthContext()
   const { state } = useModelingContext()
-  const { overallState } = useNetworkStatus()
-  const isNetworkOkay = overallState === NetworkHealthState.Ok
+  const { overallState } = useNetworkContext()
+
+  const isNetworkOkay =
+    overallState === NetworkHealthState.Ok ||
+    overallState === NetworkHealthState.Weak
+
+  // Linux has a default behavior to paste text on middle mouse up
+  // This adds a listener to block that pasting if the click target
+  // is not a text input, so users can move in the 3D scene with
+  // middle mouse drag with a text input focused without pasting.
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      const isHtmlElement = e.target && e.target instanceof HTMLElement
+      const isEditable =
+        (isHtmlElement && !('explicitOriginalTarget' in e)) ||
+        ('explicitOriginalTarget' in e &&
+          ((e.explicitOriginalTarget as HTMLElement).contentEditable ===
+            'true' ||
+            ['INPUT', 'TEXTAREA'].some(
+              (tagName) =>
+                tagName === (e.explicitOriginalTarget as HTMLElement).tagName
+            )))
+      if (!isEditable) {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+      }
+    }
+
+    globalThis?.window?.document?.addEventListener('paste', handlePaste, {
+      capture: true,
+    })
+    return () =>
+      globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
+        capture: true,
+      })
+  }, [])
 
   useEffect(() => {
     if (
@@ -43,6 +79,7 @@ export const Stream = ({ className = '' }: { className?: string }) => {
   }, [mediaStream])
 
   const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
+    if (!isNetworkOkay) return
     if (!videoRef.current) return
     if (state.matches('Sketch')) return
     if (state.matches('Sketch no face')) return
@@ -58,6 +95,7 @@ export const Stream = ({ className = '' }: { className?: string }) => {
   }
 
   const handleMouseUp: MouseEventHandler<HTMLDivElement> = (e) => {
+    if (!isNetworkOkay) return
     if (!videoRef.current) return
     setButtonDownInStream(undefined)
     if (state.matches('Sketch')) return
@@ -72,6 +110,7 @@ export const Stream = ({ className = '' }: { className?: string }) => {
   }
 
   const handleMouseMove: MouseEventHandler<HTMLVideoElement> = (e) => {
+    if (!isNetworkOkay) return
     if (state.matches('Sketch')) return
     if (state.matches('Sketch no face')) return
     if (!clickCoords) return
@@ -87,8 +126,8 @@ export const Stream = ({ className = '' }: { className?: string }) => {
 
   return (
     <div
-      id="stream"
-      className={className}
+      className="absolute inset-0 z-0"
+      data-testid="stream"
       onMouseUp={handleMouseUp}
       onMouseDown={handleMouseDown}
       onContextMenu={(e) => e.preventDefault()}
@@ -103,7 +142,6 @@ export const Stream = ({ className = '' }: { className?: string }) => {
         onMouseMoveCapture={handleMouseMove}
         className="w-full cursor-pointer h-full"
         disablePictureInPicture
-        style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
         id="video-stream"
       />
       <ClientSideScene
@@ -112,7 +150,7 @@ export const Stream = ({ className = '' }: { className?: string }) => {
       {!isNetworkOkay && !isLoading && (
         <div className="text-center absolute inset-0">
           <Loading>
-            <span data-testid="loading-stream">Stream disconnected</span>
+            <span data-testid="loading-stream">Stream disconnected...</span>
           </Loading>
         </div>
       )}

src/components/Tooltip.module.css

@@ -11,30 +11,8 @@
   --_p-inline: calc(50% + calc(var(--isRTL) * var(--_triangle-width) / 2));
   --_p-block: 4px;
   --_bg: var(--chalkboard-10);
-  --_shadow-alpha: 5%;
+  --_shadow-alpha: 8%;
   --_theme-alpha: 0.15;
-  --_theme-outline: drop-shadow(
-      0 1px 0
-        oklch(
-          var(--primary-lightness) var(--primary-chroma) var(--primary-hue) /
-            var(--_theme-alpha)
-        )
-    )
-    drop-shadow(
-      0 -1px 0 oklch(var(--primary-lightness) var(--primary-chroma)
-            var(--primary-hue) / var(--_theme-alpha))
-    )
-    drop-shadow(
-      1px 0 0
-        oklch(
-          var(--primary-lightness) var(--primary-chroma) var(--primary-hue) /
-            var(--_theme-alpha)
-        )
-    )
-    drop-shadow(
-      -1px 0 0 oklch(var(--primary-lightness) var(--primary-chroma)
-            var(--primary-hue) / var(--_theme-alpha))
-    );
 
   pointer-events: none;
   user-select: none;
@@ -61,16 +39,15 @@
   background: var(--_bg);
   @apply text-chalkboard-110;
   will-change: filter;
-  filter: drop-shadow(0 1px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
-    drop-shadow(0 4px 8px hsl(0 0% 0% / var(--_shadow-alpha)))
-    var(--_theme-outline);
+  filter: drop-shadow(0 1px 2px hsl(0 0% 0% / var(--_shadow-alpha)))
+    drop-shadow(0 4px 6px hsl(0 0% 0% / calc(var(--_shadow-alpha) / 2)));
 }
 
 :global(.dark) .tooltip {
-  --_bg: var(--chalkboard-110);
+  --_bg: var(--chalkboard-90);
   --_theme-alpha: 40%;
+  --_shadow-alpha: 16%;
   @apply text-chalkboard-10;
-  filter: var(--_theme-outline);
 }
 
 .tooltip:dir(rtl) {

src/components/UserSidebarMenu.tsx

@@ -39,7 +39,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
     <Popover className="relative">
       {user?.image && !imageLoadFailed ? (
         <Popover.Button
-          className="border-0 rounded-full w-fit min-w-max p-0 group"
+          className="relative border-0 rounded-full w-fit min-w-max p-0 group"
           data-testid="user-sidebar-toggle"
         >
           <div className="rounded-full border overflow-hidden">
@@ -51,6 +51,9 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
               onError={() => setImageLoadFailed(true)}
             />
           </div>
+          <Tooltip position="bottom-right" delay={1000}>
+            User menu
+          </Tooltip>
         </Popover.Button>
       ) : (
         <ActionButton
@@ -59,7 +62,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
           className="border-transparent !px-0"
           data-testid="user-sidebar-toggle"
         >
-          <Tooltip position="left" delay={1000}>
+          <Tooltip position="bottom-right" delay={1000}>
             User menu
           </Tooltip>
         </ActionButton>

src/editor/manager.ts

@@ -7,7 +7,11 @@ import { Selections, processCodeMirrorRanges, Selection } from 'lib/selections'
 import { undo, redo } from '@codemirror/commands'
 import { CommandBarMachineEvent } from 'machines/commandBarMachine'
 import { addLineHighlight } from './highlightextension'
-import { setDiagnostics, Diagnostic } from '@codemirror/lint'
+import { forEachDiagnostic, setDiagnostics, Diagnostic } from '@codemirror/lint'
+
+function diagnosticIsEqual(d1: Diagnostic, d2: Diagnostic): boolean {
+  return d1.from === d2.from && d1.to === d2.to && d1.message === d2.message
+}
 
 export default class EditorManager {
   private _editorView: EditorView | null = null
@@ -91,11 +95,38 @@ export default class EditorManager {
     }
   }
 
+  clearDiagnostics(): void {
+    if (!this.editorView) return
+    this.editorView.dispatch(setDiagnostics(this.editorView.state, []))
+  }
+
   setDiagnostics(diagnostics: Diagnostic[]): void {
     if (!this.editorView) return
     this.editorView.dispatch(setDiagnostics(this.editorView.state, diagnostics))
   }
 
+  addDiagnostics(diagnostics: Diagnostic[]): void {
+    if (!this.editorView) return
+
+    forEachDiagnostic(this.editorView.state, function (diag) {
+      diagnostics.push(diag)
+    })
+
+    const uniqueDiagnostics = new Set<Diagnostic>()
+    diagnostics.forEach((diagnostic) => {
+      for (const knownDiagnostic of uniqueDiagnostics.values()) {
+        if (diagnosticIsEqual(diagnostic, knownDiagnostic)) {
+          return
+        }
+      }
+      uniqueDiagnostics.add(diagnostic)
+    })
+
+    this.editorView.dispatch(
+      setDiagnostics(this.editorView.state, [...uniqueDiagnostics])
+    )
+  }
+
   undo() {
     if (this._editorView) {
       undo(this._editorView)

src/editor/plugins/lsp/copilot/index.ts

@@ -474,19 +474,13 @@ const completionRequester = (client: LanguageServerClient) => {
 }
 
 export const copilotPlugin = (options: LanguageServerOptions): Extension => {
-  let plugin: LanguageServerPlugin | null = null
-
   return [
     documentUri.of(options.documentUri),
     languageId.of('kcl'),
     workspaceFolders.of(options.workspaceFolders),
     ViewPlugin.define(
       (view) =>
-        (plugin = new LanguageServerPlugin(
-          options.client,
-          view,
-          options.allowHTMLContent
-        ))
+        new LanguageServerPlugin(options.client, view, options.allowHTMLContent)
     ),
     completionDecoration,
     Prec.highest(completionPlugin(options.client)),

src/editor/plugins/lsp/plugin.ts

@@ -382,9 +382,14 @@ export class LanguageServerPlugin implements PluginValue {
     try {
       switch (notification.method) {
         case 'textDocument/publishDiagnostics':
-          //const params = notification.params as PublishDiagnosticsParams
+          console.log(
+            '[lsp] [window/publishDiagnostics]',
+            this.client.getName(),
+            notification.params
+          )
+          const params = notification.params as PublishDiagnosticsParams
           // this is sometimes slower than our actual typing.
-          //this.processDiagnostics(params)
+          this.processDiagnostics(params)
           break
         case 'window/logMessage':
           console.log(

src/hooks/useNetworkContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react'
+import {
+  ConnectingTypeGroup,
+  initialConnectingTypeGroupState,
+} from '../lang/std/engineConnection'
+import { NetworkStatus, NetworkHealthState } from './useNetworkStatus'
+
+export const NetworkContext = createContext<NetworkStatus>({
+  hasIssues: undefined,
+  overallState: NetworkHealthState.Disconnected,
+  internetConnected: true,
+  steps: structuredClone(initialConnectingTypeGroupState),
+  issues: {
+    [ConnectingTypeGroup.WebSocket]: undefined,
+    [ConnectingTypeGroup.ICE]: undefined,
+    [ConnectingTypeGroup.WebRTC]: undefined,
+  },
+  error: undefined,
+  setHasCopied: (b: boolean) => {},
+  hasCopied: false,
+  pingPongHealth: undefined,
+} as NetworkStatus)
+export const useNetworkContext = () => {
+  return useContext(NetworkContext)
+}

src/hooks/useNetworkStatus.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useState } from 'react'
+import {
+  ConnectingType,
+  ConnectingTypeGroup,
+  DisconnectingType,
+  EngineCommandManagerEvents,
+  EngineConnectionEvents,
+  EngineConnectionStateType,
+  ErrorType,
+  initialConnectingTypeGroupState,
+} from '../lang/std/engineConnection'
+import { engineCommandManager } from '../lib/singletons'
+
+export enum NetworkHealthState {
+  Ok,
+  Weak,
+  Issue,
+  Disconnected,
+}
+
+export interface NetworkStatus {
+  hasIssues: boolean | undefined
+  overallState: NetworkHealthState
+  internetConnected: boolean
+  steps: typeof initialConnectingTypeGroupState
+  issues: Record<ConnectingTypeGroup, boolean | undefined>
+  error: ErrorType | undefined
+  setHasCopied: (b: boolean) => void
+  hasCopied: boolean
+  pingPongHealth: undefined | 'OK' | 'TIMEOUT'
+}
+
+// Must be called from one place in the application.
+// We've chosen the <Router /> component for this.
+export function useNetworkStatus() {
+  const [steps, setSteps] = useState(
+    structuredClone(initialConnectingTypeGroupState)
+  )
+  const [internetConnected, setInternetConnected] = useState<boolean>(true)
+  const [overallState, setOverallState] = useState<NetworkHealthState>(
+    NetworkHealthState.Disconnected
+  )
+  const [pingPongHealth, setPingPongHealth] = useState<
+    undefined | 'OK' | 'TIMEOUT'
+  >(undefined)
+  const [hasCopied, setHasCopied] = useState<boolean>(false)
+
+  const [error, setError] = useState<ErrorType | undefined>(undefined)
+
+  const hasIssue = (i: [ConnectingType, boolean | undefined]) =>
+    i[1] === undefined ? i[1] : !i[1]
+
+  const [issues, setIssues] = useState<
+    Record<ConnectingTypeGroup, boolean | undefined>
+  >({
+    [ConnectingTypeGroup.WebSocket]: undefined,
+    [ConnectingTypeGroup.ICE]: undefined,
+    [ConnectingTypeGroup.WebRTC]: undefined,
+  })
+
+  const [hasIssues, setHasIssues] = useState<boolean | undefined>(undefined)
+  useEffect(() => {
+    setOverallState(
+      !internetConnected
+        ? NetworkHealthState.Disconnected
+        : hasIssues || hasIssues === undefined
+        ? NetworkHealthState.Issue
+        : pingPongHealth === 'TIMEOUT'
+        ? NetworkHealthState.Weak
+        : NetworkHealthState.Ok
+    )
+  }, [hasIssues, internetConnected, pingPongHealth])
+
+  useEffect(() => {
+    const onlineCallback = () => {
+      setInternetConnected(true)
+    }
+    const offlineCallback = () => {
+      setInternetConnected(false)
+      setSteps(structuredClone(initialConnectingTypeGroupState))
+    }
+    window.addEventListener('online', onlineCallback)
+    window.addEventListener('offline', offlineCallback)
+    return () => {
+      window.removeEventListener('online', onlineCallback)
+      window.removeEventListener('offline', offlineCallback)
+    }
+  }, [])
+
+  useEffect(() => {
+    const issues = {
+      [ConnectingTypeGroup.WebSocket]: steps[
+        ConnectingTypeGroup.WebSocket
+      ].reduce(
+        (acc: boolean | undefined, a) =>
+          acc === true || acc === undefined ? acc : hasIssue(a),
+        false
+      ),
+      [ConnectingTypeGroup.ICE]: steps[ConnectingTypeGroup.ICE].reduce(
+        (acc: boolean | undefined, a) =>
+          acc === true || acc === undefined ? acc : hasIssue(a),
+        false
+      ),
+      [ConnectingTypeGroup.WebRTC]: steps[ConnectingTypeGroup.WebRTC].reduce(
+        (acc: boolean | undefined, a) =>
+          acc === true || acc === undefined ? acc : hasIssue(a),
+        false
+      ),
+    }
+    setIssues(issues)
+  }, [steps])
+
+  useEffect(() => {
+    setHasIssues(
+      issues[ConnectingTypeGroup.WebSocket] ||
+        issues[ConnectingTypeGroup.ICE] ||
+        issues[ConnectingTypeGroup.WebRTC]
+    )
+  }, [issues])
+
+  useEffect(() => {
+    const onPingPongChange = ({ detail: state }: CustomEvent) => {
+      setPingPongHealth(state)
+    }
+
+    const onConnectionStateChange = ({
+      detail: engineConnectionState,
+    }: CustomEvent) => {
+      setSteps((steps) => {
+        let nextSteps = structuredClone(steps)
+
+        if (
+          engineConnectionState.type === EngineConnectionStateType.Connecting
+        ) {
+          const groups = Object.values(nextSteps)
+          for (let group of groups) {
+            for (let step of group) {
+              if (step[0] !== engineConnectionState.value.type) continue
+              step[1] = true
+            }
+          }
+        }
+
+        if (
+          engineConnectionState.type === EngineConnectionStateType.Disconnecting
+        ) {
+          const groups = Object.values(nextSteps)
+          for (let group of groups) {
+            for (let step of group) {
+              if (
+                engineConnectionState.value.type === DisconnectingType.Error
+              ) {
+                if (
+                  engineConnectionState.value.value.lastConnectingValue
+                    ?.type === step[0]
+                ) {
+                  step[1] = false
+                }
+              }
+            }
+
+            if (engineConnectionState.value.type === DisconnectingType.Error) {
+              setError(engineConnectionState.value.value)
+            }
+          }
+        }
+
+        // Reset the state of all steps if we have disconnected.
+        if (
+          engineConnectionState.type === EngineConnectionStateType.Disconnected
+        ) {
+          return structuredClone(initialConnectingTypeGroupState)
+        }
+
+        return nextSteps
+      })
+    }
+
+    const onEngineAvailable = ({ detail: engineConnection }: CustomEvent) => {
+      engineConnection.addEventListener(
+        EngineConnectionEvents.PingPongChanged,
+        onPingPongChange as EventListener
+      )
+      engineConnection.addEventListener(
+        EngineConnectionEvents.ConnectionStateChanged,
+        onConnectionStateChange as EventListener
+      )
+
+      // Tell EngineConnection to start firing events.
+      window.dispatchEvent(new CustomEvent('use-network-status-ready', {}))
+    }
+
+    engineCommandManager.addEventListener(
+      EngineCommandManagerEvents.EngineAvailable,
+      onEngineAvailable as EventListener
+    )
+
+    return () => {
+      engineCommandManager.removeEventListener(
+        EngineCommandManagerEvents.EngineAvailable,
+        onEngineAvailable as EventListener
+      )
+
+      // When the component is unmounted these should be assigned, but it's possible
+      // the component mounts and unmounts before engine is available.
+      engineCommandManager.engineConnection?.addEventListener(
+        EngineConnectionEvents.PingPongChanged,
+        onPingPongChange as EventListener
+      )
+      engineCommandManager.engineConnection?.addEventListener(
+        EngineConnectionEvents.ConnectionStateChanged,
+        onConnectionStateChange as EventListener
+      )
+    }
+  }, [])
+
+  return {
+    hasIssues,
+    overallState,
+    internetConnected,
+    steps,
+    issues,
+    error,
+    setHasCopied,
+    hasCopied,
+    pingPongHealth,
+  }
+}

src/hooks/useSetupEngineManager.ts

@@ -43,7 +43,7 @@ export function useSetupEngineManager(
     engineCommandManager.pool = settings.pool
   }
 
-  useLayoutEffect(() => {
+  const startEngineInstance = () => {
     // Load the engine command manager once with the initial width and height,
     // then we do not want to reload it.
     const { width: quadWidth, height: quadHeight } = getDimensions(
@@ -73,7 +73,12 @@ export function useSetupEngineManager(
       })
       hasSetNonZeroDimensions.current = true
     }
-  }, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
+  }
+
+  useLayoutEffect(startEngineInstance, [
+    streamRef?.current?.offsetWidth,
+    streamRef?.current?.offsetHeight,
+  ])
 
   useEffect(() => {
     const handleResize = deferExecution(() => {
@@ -96,8 +101,20 @@ export function useSetupEngineManager(
       }
     }, 500)
 
+    const onOnline = () => {
+      startEngineInstance()
+    }
+
+    const onOffline = () => {
+      engineCommandManager.tearDown()
+    }
+
+    window.addEventListener('online', onOnline)
+    window.addEventListener('offline', onOffline)
     window.addEventListener('resize', handleResize)
     return () => {
+      window.removeEventListener('online', onOnline)
+      window.removeEventListener('offline', onOffline)
       window.removeEventListener('resize', handleResize)
     }
   }, [])

src/hooks/useStateMachineCommands.ts

@@ -7,12 +7,10 @@ import { authMachine } from 'machines/authMachine'
 import { settingsMachine } from 'machines/settingsMachine'
 import { homeMachine } from 'machines/homeMachine'
 import { Command, CommandSetConfig, CommandSetSchema } from 'lib/commandTypes'
-import {
-  NetworkHealthState,
-  useNetworkStatus,
-} from 'components/NetworkHealthIndicator'
 import { useKclContext } from 'lang/KclProvider'
 import { useStore } from 'useStore'
+import { useNetworkContext } from 'hooks/useNetworkContext'
+import { NetworkHealthState } from 'hooks/useNetworkStatus'
 
 // This might not be necessary, AnyStateMachine from xstate is working
 export type AllMachines =
@@ -47,7 +45,7 @@ export default function useStateMachineCommands<
   onCancel,
 }: UseStateMachineCommandsArgs<T, S>) {
   const { commandBarSend } = useCommandsContext()
-  const { overallState } = useNetworkStatus()
+  const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
   const { isStreamReady } = useStore((s) => ({
     isStreamReady: s.isStreamReady,
@@ -55,7 +53,10 @@ export default function useStateMachineCommands<
 
   useEffect(() => {
     const disableAllButtons =
-      overallState !== NetworkHealthState.Ok || isExecuting || !isStreamReady
+      (overallState !== NetworkHealthState.Ok &&
+        overallState !== NetworkHealthState.Weak) ||
+      isExecuting ||
+      !isStreamReady
     const newCommands = state.nextEvents
       .filter((_) => !allCommandsRequireNetwork || !disableAllButtons)
       .filter((e) => !['done.', 'error.'].some((n) => e.includes(n)))

src/index.css

@@ -147,15 +147,33 @@ code {
 
 #code-mirror-override .cm-activeLine,
 #code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/10;
+  @apply bg-primary/5;
 }
 
 .dark #code-mirror-override .cm-activeLine,
 .dark #code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/20;
+  @apply bg-chalkboard-70/20;
   mix-blend-mode: lighten;
 }
 
+#code-mirror-override .cm-focused .cm-activeLine,
+#code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-primary/10;
+}
+
+.dark #code-mirror-override .cm-focused .cm-activeLine,
+.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-chalkboard-70/40;
+}
+
+#code-mirror-override .cm-matchingBracket {
+  @apply bg-primary/20;
+}
+
+.dark #code-mirror-override .cm-matchingBracket {
+  @apply bg-chalkboard-70/60;
+}
+
 #code-mirror-override .cm-gutters {
   @apply bg-chalkboard-10/30;
 }
@@ -171,22 +189,8 @@ code {
   @apply caret-chalkboard-10;
 }
 
-#code-mirror-override .cm-focused .cm-cursor {
-  width: 0px;
-}
-#code-mirror-override .cm-cursor {
-  display: block;
-  width: 1ch;
-  @apply mix-blend-multiply;
-  @apply border-l-primary;
-}
-
-.dark #code-mirror-override .cm-cursor {
-  @apply border-l-chalkboard-10;
-}
-
-#code-mirror-override.blink .cm-cursor {
-  animation: blink 1200ms ease-out infinite;
+#code-mirror-override .cm-focused {
+  outline: none;
 }
 
 @keyframes blink {
@@ -249,3 +253,10 @@ code {
 .cm-ghostText * {
   color: rgb(120, 120, 120, 0.8) !important;
 }
+
+@layer components {
+  kbd.hotkey {
+    @apply font-mono text-xs inline-block px-1 py-0.5 rounded-sm;
+    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
+  }
+}

src/lang/KclSingleton.ts

@@ -41,7 +41,10 @@ export class KclManager {
   engineCommandManager: EngineCommandManager
   private _defferer = deferExecution((code: string) => {
     const ast = this.safeParse(code)
-    if (!ast) return
+    if (!ast) {
+      this.clearAst()
+      return
+    }
     try {
       const fmtAndStringify = (ast: Program) =>
         JSON.stringify(parse(recast(ast)))
@@ -91,7 +94,7 @@ export class KclManager {
   set kclErrors(kclErrors) {
     this._kclErrors = kclErrors
     let diagnostics = kclErrorsToDiagnostics(kclErrors)
-    editorManager.setDiagnostics(diagnostics)
+    editorManager.addDiagnostics(diagnostics)
     this._kclErrorsCallBack(kclErrors)
   }
 
@@ -145,6 +148,18 @@ export class KclManager {
     this._executeCallback = callback
   }
 
+  clearAst() {
+    this._ast = {
+      body: [],
+      start: 0,
+      end: 0,
+      nonCodeMeta: {
+        nonCodeNodes: {},
+        start: [],
+      },
+    }
+  }
+
   safeParse(code: string): Program | null {
     try {
       const ast = parse(code)
@@ -185,6 +200,11 @@ export class KclManager {
     const currentExecutionId = executionId || Date.now()
     this._cancelTokens.set(currentExecutionId, false)
 
+    // here we're going to clear diagnostics since we're the first
+    // one in. We're the only location where diagnostics are cleared;
+    // everything from here on out should be *appending*.
+    editorManager.clearDiagnostics()
+
     this.isExecuting = true
     await this.ensureWasmInit()
     const { logs, errors, programMemory } = await executeAst({
@@ -234,6 +254,7 @@ export class KclManager {
     } = { updates: 'none' }
   ) {
     await this.ensureWasmInit()
+
     const newCode = recast(ast)
     const newAst = this.safeParse(newCode)
     if (!newAst) return
@@ -243,6 +264,11 @@ export class KclManager {
     await this?.engineCommandManager?.waitForReady
     this._ast = { ...newAst }
 
+    // here we're going to clear diagnostics since we're the first
+    // one in. We're the only location where diagnostics are cleared;
+    // everything from here on out should be *appending*.
+    editorManager.clearDiagnostics()
+
     const { logs, errors, programMemory } = await executeAst({
       ast: newAst,
       engineCommandManager: this.engineCommandManager,
@@ -281,14 +307,20 @@ export class KclManager {
     if (!force) return this._defferer(codeManager.code)
 
     const ast = this.safeParse(codeManager.code)
-    if (!ast) return
+    if (!ast) {
+      this.clearAst()
+      return
+    }
     this.ast = { ...ast }
     return this.executeAst(ast, zoomToFit)
   }
   format() {
     const originalCode = codeManager.code
     const ast = this.safeParse(originalCode)
-    if (!ast) return
+    if (!ast) {
+      this.clearAst()
+      return
+    }
     const code = recast(ast)
     if (originalCode === code) return
 
@@ -352,25 +384,55 @@ export class KclManager {
     return this?.engineCommandManager?.defaultPlanes
   }
 
-  showPlanes() {
-    if (!this.defaultPlanes) return
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, false)
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, false)
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, false)
+  showPlanes(all = false) {
+    if (!this.defaultPlanes) return Promise.all([])
+    const thePromises = [
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, false),
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, false),
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, false),
+    ]
+    if (all) {
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(
+          this.defaultPlanes.negXy,
+          false
+        )
+      )
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(
+          this.defaultPlanes.negYz,
+          false
+        )
+      )
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(
+          this.defaultPlanes.negXz,
+          false
+        )
+      )
+    }
+    return Promise.all(thePromises)
   }
 
-  hidePlanes() {
-    if (!this.defaultPlanes) return
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, true)
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, true)
-    void this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, true)
+  hidePlanes(all = false) {
+    if (!this.defaultPlanes) return Promise.all([])
+    const thePromises = [
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xy, true),
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.yz, true),
+      this.engineCommandManager.setPlaneHidden(this.defaultPlanes.xz, true),
+    ]
+    if (all) {
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(this.defaultPlanes.negXy, true)
+      )
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(this.defaultPlanes.negYz, true)
+      )
+      thePromises.push(
+        this.engineCommandManager.setPlaneHidden(this.defaultPlanes.negXz, true)
+      )
     }
-  exitEditMode() {
-    this.engineCommandManager.sendSceneCommand({
-      type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
-      cmd: { type: 'edit_mode_exit' },
-    })
+    return Promise.all(thePromises)
   }
   defaultSelectionFilter() {
     defaultSelectionFilter(this.programMemory, this.engineCommandManager)
@@ -386,24 +448,11 @@ function defaultSelectionFilter(
   ) as SketchGroup | ExtrudeGroup
   firstSketchOrExtrudeGroup &&
     engineCommandManager.sendSceneCommand({
-      type: 'modeling_cmd_batch_req',
-      batch_id: uuidv4(),
-      responses: false,
-      requests: [
-        {
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'edit_mode_enter',
-            target: firstSketchOrExtrudeGroup.id,
-          },
-        },
-        {
+      type: 'modeling_cmd_req',
       cmd_id: uuidv4(),
       cmd: {
         type: 'set_selection_filter',
-            filter: ['face', 'edge', 'solid2d'],
+        filter: ['face', 'edge', 'solid2d', 'curve'],
       },
-        },
-      ],
     })
 }

src/lang/codeManager.ts

@@ -22,7 +22,7 @@ export default class CodeManager {
       return
     }
 
-    const storedCode = safeLSGetItem(PERSIST_CODE_TOKEN) || ''
+    const storedCode = safeLSGetItem(PERSIST_CODE_TOKEN)
     // TODO #819 remove zustand persistence logic in a few months
     // short term migration, shouldn't make a difference for tauri app users
     // anyway since that's filesystem based.
@@ -68,7 +68,9 @@ export default class CodeManager {
     this._currentFilePath = path
   }
 
-  // This updates the code state and calls the updateState function.
+  /**
+   * This updates the code state and calls the updateState function.
+   */
   updateCodeState(code: string): void {
     if (this._code !== code) {
       this.code = code
@@ -76,7 +78,9 @@ export default class CodeManager {
     }
   }
 
-  // Update the code in the editor.
+  /**
+   * Update the code in the editor.
+   */
   updateCodeEditor(code: string): void {
     this.code = code
     if (editorManager.editorView) {
@@ -90,7 +94,9 @@ export default class CodeManager {
     }
   }
 
-  // Update the code, state, and the code the code mirror editor sees.
+  /**
+   * Update the code, state, and the code the code mirror editor sees.
+   */
   updateCodeStateEditor(code: string): void {
     if (this._code !== code) {
       this.code = code

src/lang/modifyAst.test.ts

@@ -125,7 +125,7 @@ describe('Testing addSketchTo', () => {
       'yz'
     )
     const str = recast(result.modifiedAst)
-    expect(str).toBe(`const part001 = startSketchOn('YZ')
+    expect(str).toBe(`const sketch001 = startSketchOn('YZ')
   |> startProfileAt('default', %)
   |> line('default', %)
 `)
@@ -291,14 +291,25 @@ describe('testing sketchOnExtrudedFace', () => {
   |> extrude(5 + 7, %)`
     const ast = parse(code)
     const programMemory = await enginelessExecutor(ast)
-    const snippet = `line([9.7, 9.19], %)`
-    const range: [number, number] = [
-      code.indexOf(snippet),
-      code.indexOf(snippet) + snippet.length,
+    const segmentSnippet = `line([9.7, 9.19], %)`
+    const segmentRange: [number, number] = [
+      code.indexOf(segmentSnippet),
+      code.indexOf(segmentSnippet) + segmentSnippet.length,
     ]
-    const pathToNode = getNodePathFromSourceRange(ast, range)
+    const segmentPathToNode = getNodePathFromSourceRange(ast, segmentRange)
+    const extrudeSnippet = `extrude(5 + 7, %)`
+    const extrudeRange: [number, number] = [
+      code.indexOf(extrudeSnippet),
+      code.indexOf(extrudeSnippet) + extrudeSnippet.length,
+    ]
+    const extrudePathToNode = getNodePathFromSourceRange(ast, extrudeRange)
 
-    const { modifiedAst } = sketchOnExtrudedFace(ast, pathToNode, programMemory)
+    const { modifiedAst } = sketchOnExtrudedFace(
+      ast,
+      segmentPathToNode,
+      extrudePathToNode,
+      programMemory
+    )
     const newCode = recast(modifiedAst)
     expect(newCode).toContain(`const part001 = startSketchOn('-XZ')
   |> startProfileAt([3.58, 2.06], %)
@@ -306,7 +317,7 @@ describe('testing sketchOnExtrudedFace', () => {
   |> line([8.62, -9.57], %)
   |> close(%)
   |> extrude(5 + 7, %)
-const part002 = startSketchOn(part001, 'seg01')`)
+const sketch001 = startSketchOn(part001, 'seg01')`)
   })
   test('it should be able to extrude on close segments', async () => {
     const code = `const part001 = startSketchOn('-XZ')
@@ -317,14 +328,25 @@ const part002 = startSketchOn(part001, 'seg01')`)
   |> extrude(5 + 7, %)`
     const ast = parse(code)
     const programMemory = await enginelessExecutor(ast)
-    const snippet = `close(%)`
-    const range: [number, number] = [
-      code.indexOf(snippet),
-      code.indexOf(snippet) + snippet.length,
+    const segmentSnippet = `close(%)`
+    const segmentRange: [number, number] = [
+      code.indexOf(segmentSnippet),
+      code.indexOf(segmentSnippet) + segmentSnippet.length,
     ]
-    const pathToNode = getNodePathFromSourceRange(ast, range)
+    const segmentPathToNode = getNodePathFromSourceRange(ast, segmentRange)
+    const extrudeSnippet = `extrude(5 + 7, %)`
+    const extrudeRange: [number, number] = [
+      code.indexOf(extrudeSnippet),
+      code.indexOf(extrudeSnippet) + extrudeSnippet.length,
+    ]
+    const extrudePathToNode = getNodePathFromSourceRange(ast, extrudeRange)
 
-    const { modifiedAst } = sketchOnExtrudedFace(ast, pathToNode, programMemory)
+    const { modifiedAst } = sketchOnExtrudedFace(
+      ast,
+      segmentPathToNode,
+      extrudePathToNode,
+      programMemory
+    )
     const newCode = recast(modifiedAst)
     expect(newCode).toContain(`const part001 = startSketchOn('-XZ')
   |> startProfileAt([3.58, 2.06], %)
@@ -332,7 +354,7 @@ const part002 = startSketchOn(part001, 'seg01')`)
   |> line([8.62, -9.57], %)
   |> close(%, 'seg01')
   |> extrude(5 + 7, %)
-const part002 = startSketchOn(part001, 'seg01')`)
+const sketch001 = startSketchOn(part001, 'seg01')`)
   })
   test('it should be able to extrude on start-end caps', async () => {
     const code = `const part001 = startSketchOn('-XZ')
@@ -343,16 +365,23 @@ const part002 = startSketchOn(part001, 'seg01')`)
   |> extrude(5 + 7, %)`
     const ast = parse(code)
     const programMemory = await enginelessExecutor(ast)
-    const snippet = `startProfileAt([3.58, 2.06], %)`
-    const range: [number, number] = [
-      code.indexOf(snippet),
-      code.indexOf(snippet) + snippet.length,
+    const sketchSnippet = `startProfileAt([3.58, 2.06], %)`
+    const sketchRange: [number, number] = [
+      code.indexOf(sketchSnippet),
+      code.indexOf(sketchSnippet) + sketchSnippet.length,
     ]
-    const pathToNode = getNodePathFromSourceRange(ast, range)
+    const sketchPathToNode = getNodePathFromSourceRange(ast, sketchRange)
+    const extrudeSnippet = `extrude(5 + 7, %)`
+    const extrudeRange: [number, number] = [
+      code.indexOf(extrudeSnippet),
+      code.indexOf(extrudeSnippet) + extrudeSnippet.length,
+    ]
+    const extrudePathToNode = getNodePathFromSourceRange(ast, extrudeRange)
 
     const { modifiedAst } = sketchOnExtrudedFace(
       ast,
-      pathToNode,
+      sketchPathToNode,
+      extrudePathToNode,
       programMemory,
       'end'
     )
@@ -363,7 +392,47 @@ const part002 = startSketchOn(part001, 'seg01')`)
   |> line([8.62, -9.57], %)
   |> close(%)
   |> extrude(5 + 7, %)
-const part002 = startSketchOn(part001, 'END')`)
+const sketch001 = startSketchOn(part001, 'END')`)
+  })
+  test('it should ensure that the new sketch is inserted after the extrude', async () => {
+    const code = `const sketch001 = startSketchOn('-XZ')
+    |> startProfileAt([3.29, 7.86], %)
+    |> line([2.48, 2.44], %)
+    |> line([2.66, 1.17], %)
+    |> line([3.75, 0.46], %)
+    |> line([4.99, -0.46], %)
+    |> line([3.3, -2.12], %)
+    |> line([2.16, -3.33], %)
+    |> line([0.85, -3.08], %)
+    |> line([-0.18, -3.36], %)
+    |> line([-3.86, -2.73], %)
+    |> line([-17.67, 0.85], %)
+    |> close(%)
+    const part001 = extrude(5 + 7, sketch001)`
+    const ast = parse(code)
+    const programMemory = await enginelessExecutor(ast)
+    const segmentSnippet = `line([4.99, -0.46], %)`
+    const segmentRange: [number, number] = [
+      code.indexOf(segmentSnippet),
+      code.indexOf(segmentSnippet) + segmentSnippet.length,
+    ]
+    const segmentPathToNode = getNodePathFromSourceRange(ast, segmentRange)
+    const extrudeSnippet = `extrude(5 + 7, sketch001)`
+    const extrudeRange: [number, number] = [
+      code.indexOf(extrudeSnippet),
+      code.indexOf(extrudeSnippet) + extrudeSnippet.length,
+    ]
+    const extrudePathToNode = getNodePathFromSourceRange(ast, extrudeRange)
+
+    const { modifiedAst } = sketchOnExtrudedFace(
+      ast,
+      segmentPathToNode,
+      extrudePathToNode,
+      programMemory
+    )
+    const newCode = recast(modifiedAst)
+    expect(newCode).toContain(`const part001 = extrude(5 + 7, sketch001)
+const sketch002 = startSketchOn(part001, 'seg01')`)
   })
 })
 

src/lang/modifyAst.ts

@@ -34,6 +34,7 @@ import {
 } from './std/sketchcombos'
 import { DefaultPlaneStr } from 'clientSideScene/sceneEntities'
 import { isOverlap, roundOff } from 'lib/utils'
+import { KCL_DEFAULT_CONSTANT_PREFIXES } from 'lib/constants'
 import { ConstrainInfo } from './std/stdTypes'
 
 export function startSketchOnDefault(
@@ -42,7 +43,8 @@ export function startSketchOnDefault(
   name = ''
 ): { modifiedAst: Program; id: string; pathToNode: PathToNode } {
   const _node = { ...node }
-  const _name = name || findUniqueName(node, 'part')
+  const _name =
+    name || findUniqueName(node, KCL_DEFAULT_CONSTANT_PREFIXES.SKETCH)
 
   const startSketchOn = createCallExpressionStdLib('startSketchOn', [
     createLiteral(axis),
@@ -109,7 +111,8 @@ export function addSketchTo(
   name = ''
 ): { modifiedAst: Program; id: string; pathToNode: PathToNode } {
   const _node = { ...node }
-  const _name = name || findUniqueName(node, 'part')
+  const _name =
+    name || findUniqueName(node, KCL_DEFAULT_CONSTANT_PREFIXES.SKETCH)
 
   const startSketchOn = createCallExpressionStdLib('startSketchOn', [
     createLiteral(axis.toUpperCase()),
@@ -242,7 +245,7 @@ export function mutateObjExpProp(
 export function extrudeSketch(
   node: Program,
   pathToNode: PathToNode,
-  shouldPipe = true,
+  shouldPipe = false,
   distance = createLiteral(4) as Value
 ): {
   modifiedAst: Program
@@ -293,12 +296,22 @@ export function extrudeSketch(
       pathToExtrudeArg,
     }
   }
-  const name = findUniqueName(node, 'part')
+
+  // 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)
-  _node.body.splice(_node.body.length, 0, VariableDeclaration)
+
+  const sketchIndexInPathToNode =
+    pathToDecleration.findIndex((a) => a[0] === 'body') + 1
+  const sketchIndexInBody = pathToDecleration[
+    sketchIndexInPathToNode
+  ][0] as number
+  _node.body.splice(sketchIndexInBody + 1, 0, VariableDeclaration)
+
   const pathToExtrudeArg: PathToNode = [
     ['body', ''],
-    [_node.body.length, 'index'],
+    [sketchIndexInBody + 1, 'index'],
     ['declarations', 'VariableDeclaration'],
     [0, 'index'],
     ['init', 'VariableDeclarator'],
@@ -306,7 +319,7 @@ export function extrudeSketch(
     [0, 'index'],
   ]
   return {
-    modifiedAst: node,
+    modifiedAst: _node,
     pathToNode: [...pathToNode.slice(0, -1), [-1, 'index']],
     pathToExtrudeArg,
   }
@@ -314,31 +327,41 @@ export function extrudeSketch(
 
 export function sketchOnExtrudedFace(
   node: Program,
-  pathToNode: PathToNode,
+  sketchPathToNode: PathToNode,
+  extrudePathToNode: PathToNode,
   programMemory: ProgramMemory,
   cap: 'none' | 'start' | 'end' = 'none'
 ): { modifiedAst: Program; pathToNode: PathToNode } {
   let _node = { ...node }
-  const newSketchName = findUniqueName(node, 'part')
+  const newSketchName = findUniqueName(
+    node,
+    KCL_DEFAULT_CONSTANT_PREFIXES.SKETCH
+  )
   const { node: oldSketchNode } = getNodeFromPath<VariableDeclarator>(
     _node,
-    pathToNode,
+    sketchPathToNode,
     'VariableDeclarator',
     true
   )
   const oldSketchName = oldSketchNode.id.name
   const { node: expression } = getNodeFromPath<CallExpression>(
     _node,
-    pathToNode,
+    sketchPathToNode,
     'CallExpression'
   )
+  const { node: extrudeVarDec } = getNodeFromPath<VariableDeclarator>(
+    _node,
+    extrudePathToNode,
+    'VariableDeclarator'
+  )
+  const extrudeName = extrudeVarDec.id?.name
 
   let _tag = ''
   if (cap === 'none') {
     const { modifiedAst, tag } = addTagForSketchOnFace(
       {
         previousProgramMemory: programMemory,
-        pathToNode,
+        pathToNode: sketchPathToNode,
         node: _node,
       },
       expression.callee.name
@@ -352,13 +375,16 @@ export function sketchOnExtrudedFace(
   const newSketch = createVariableDeclaration(
     newSketchName,
     createCallExpressionStdLib('startSketchOn', [
-      createIdentifier(oldSketchName),
+      createIdentifier(extrudeName ? extrudeName : oldSketchName),
       createLiteral(_tag),
     ]),
     'const'
   )
 
-  const expressionIndex = pathToNode[1][0] as number
+  const expressionIndex = Math.max(
+    sketchPathToNode[1][0] as number,
+    extrudePathToNode[1][0] as number
+  )
   _node.body.splice(expressionIndex + 1, 0, newSketch)
   const newpathToNode: PathToNode = [
     ['body', ''],

src/lang/std/engineConnection.ts

@@ -1,5 +1,5 @@
 import { PathToNode, Program, SourceRange } from 'lang/wasm'
-import { VITE_KC_API_WS_MODELING_URL, VITE_KC_CONNECTION_TIMEOUT_MS } from 'env'
+import { VITE_KC_API_WS_MODELING_URL } from 'env'
 import { Models } from '@kittycad/lib'
 import { exportSave } from 'lib/exportSave'
 import { uuidv4 } from 'lib/utils'
@@ -9,7 +9,31 @@ import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
 
 let lastMessage = ''
 
-interface CommandInfo {
+// TODO(paultag): This ought to be tweakable.
+const pingIntervalMs = 10000
+
+type CommandTypes = Models['ModelingCmd_type']['type'] | 'batch'
+
+type CommandInfo =
+  | {
+      commandType: 'extrude'
+      // commandType: CommandTypes
+      range: SourceRange
+      pathToNode: PathToNode
+      /// uuid of the entity to extrude
+      target: string
+      parentId?: string
+    }
+  | {
+      commandType: 'start_path'
+      // commandType: CommandTypes
+      range: SourceRange
+      pathToNode: PathToNode
+      /// uuid of the entity that have been extruded
+      extrusions: string[]
+      parentId?: string
+    }
+  | {
       commandType: CommandTypes
       range: SourceRange
       pathToNode: PathToNode
@@ -24,18 +48,27 @@ interface CommandInfo {
             ids: string[]
             info?: null
           }
+    }
+
+function isHighlightSetEntity_type(
+  data: any
+): data is Models['HighlightSetEntity_type'] {
+  return data.entity_id && data.sequence
 }
 
 type WebSocketResponse = Models['WebSocketResponse_type']
 type OkWebSocketResponseData = Models['OkWebSocketResponseData_type']
+type BatchResponseMap = {
+  [key: string]: Models['BatchResponse_type']
+}
 
-interface ResultCommand extends CommandInfo {
+type ResultCommand = CommandInfo & {
   type: 'result'
   data: any
   raw: WebSocketResponse
   headVertexId?: string
 }
-interface FailedCommand extends CommandInfo {
+type FailedCommand = CommandInfo & {
   type: 'failed'
   errors: Models['FailureWebSocketResponse_type']['errors']
 }
@@ -48,12 +81,14 @@ interface ResolveCommand {
   data?: Models['OkModelingCmdResponse_type']
   errors?: Models['FailureWebSocketResponse_type']['errors']
 }
-interface PendingCommand extends CommandInfo {
+type PendingCommand = CommandInfo & {
   type: 'pending'
   promise: Promise<any>
   resolve: (val: ResolveCommand) => void
 }
 
+export type ArtifactMapCommand = ResultCommand | PendingCommand | FailedCommand
+
 /**
  * The ArtifactMap is a client-side representation of the artifacts that
  * have been sent to the server-side engine. It is used to keep track of
@@ -63,7 +98,7 @@ interface PendingCommand extends CommandInfo {
  * lines of KCL code that generated them.
  */
 export interface ArtifactMap {
-  [commandId: string]: ResultCommand | PendingCommand | FailedCommand
+  [commandId: string]: ArtifactMapCommand
 }
 
 interface NewTrackArgs {
@@ -110,9 +145,51 @@ export enum DisconnectingType {
   Quit = 'quit',
 }
 
+// Sorted by severity
+export enum ConnectionError {
+  Unset = 0,
+  LongLoadingTime,
+
+  ICENegotiate,
+  DataChannelError,
+  WebSocketError,
+  LocalDescriptionInvalid,
+
+  // These are more severe than protocol errors because they don't even allow
+  // the program to do any protocol messages in the first place if they occur.
+  MissingAuthToken,
+  BadAuthToken,
+  TooManyConnections,
+
+  // An unknown error is the most severe because it has not been classified
+  // or encountered before.
+  Unknown,
+}
+
+export const CONNECTION_ERROR_TEXT: Record<ConnectionError, string> = {
+  [ConnectionError.Unset]: '',
+  [ConnectionError.LongLoadingTime]:
+    'Loading is taking longer than expected...',
+  [ConnectionError.ICENegotiate]: 'ICE negotiation failed.',
+  [ConnectionError.DataChannelError]: 'The data channel signaled an error.',
+  [ConnectionError.WebSocketError]: 'The websocket signaled an error.',
+  [ConnectionError.LocalDescriptionInvalid]:
+    'The local description is invalid.',
+  [ConnectionError.MissingAuthToken]:
+    'Your authorization token is missing; please login again.',
+  [ConnectionError.BadAuthToken]:
+    'Your authorization token is invalid; please login again.',
+  [ConnectionError.TooManyConnections]: 'There are too many connections.',
+  [ConnectionError.Unknown]:
+    'An unexpected error occurred. Please report this to us.',
+}
+
 export interface ErrorType {
-  // We may not necessary have an error to assign.
-  error?: Error
+  // The error we've encountered.
+  error: ConnectionError
+
+  // Additional context.
+  context?: any
 
   // We assign this in the state setter because we may have not failed at
   // a Connecting state, which we check for there.
@@ -127,7 +204,7 @@ export type DisconnectingValue =
 // These are ordered by the expected sequence.
 export enum ConnectingType {
   WebSocketConnecting = 'websocket-connecting',
-  WebSocketEstablished = 'websocket-established',
+  WebSocketOpen = 'websocket-open',
   PeerConnectionCreated = 'peer-connection-created',
   ICEServersSet = 'ice-servers-set',
   SetLocalDescription = 'set-local-description',
@@ -154,7 +231,7 @@ export const initialConnectingTypeGroupState: Record<
 > = {
   [ConnectingTypeGroup.WebSocket]: [
     [ConnectingType.WebSocketConnecting, undefined],
-    [ConnectingType.WebSocketEstablished, undefined],
+    [ConnectingType.WebSocketOpen, undefined],
   ],
   [ConnectingTypeGroup.ICE]: [
     [ConnectingType.PeerConnectionCreated, undefined],
@@ -176,7 +253,7 @@ export const initialConnectingTypeGroupState: Record<
 
 export type ConnectingValue =
   | State<ConnectingType.WebSocketConnecting, void>
-  | State<ConnectingType.WebSocketEstablished, void>
+  | State<ConnectingType.WebSocketOpen, void>
   | State<ConnectingType.PeerConnectionCreated, void>
   | State<ConnectingType.ICEServersSet, void>
   | State<ConnectingType.SetLocalDescription, void>
@@ -197,12 +274,28 @@ export type EngineConnectionState =
   | State<EngineConnectionStateType.Disconnecting, DisconnectingValue>
   | State<EngineConnectionStateType.Disconnected, void>
 
-/**
- * EngineConnection encapsulates the connection(s) to the Engine
- * for the EngineCommandManager; namely, the underlying WebSocket
- * and WebRTC connections.
- */
-class EngineConnection {
+export type PingPongState = 'OK' | 'TIMEOUT'
+
+export enum EngineConnectionEvents {
+  // Fires for each ping-pong success or failure.
+  PingPongChanged = 'ping-pong-changed', // (state: PingPongState) => void
+
+  // For now, this is only used by the NetworkHealthIndicator.
+  // We can eventually use it for more, but one step at a time.
+  ConnectionStateChanged = 'connection-state-changed', // (state: EngineConnectionState) => void
+
+  // These are used for the EngineCommandManager and were created
+  // before onConnectionStateChange existed.
+  ConnectionStarted = 'connection-started', // (engineConnection: EngineConnection) => void
+  Opened = 'opened', // (engineConnection: EngineConnection) => void
+  Closed = 'closed', // (engineConnection: EngineConnection) => void
+  NewTrack = 'new-track', // (track: NewTrackArgs) => void
+}
+
+// EngineConnection encapsulates the connection(s) to the Engine
+// for the EngineCommandManager; namely, the underlying WebSocket
+// and WebRTC connections.
+class EngineConnection extends EventTarget {
   websocket?: WebSocket
   pc?: RTCPeerConnection
   unreliableDataChannel?: RTCDataChannel
@@ -225,9 +318,8 @@ class EngineConnection {
         // Record the last step we failed at.
         // (Check the current state that we're about to override that
         // it was a Connecting state.)
-        console.log(sub)
         if (this._state.type === EngineConnectionStateType.Connecting) {
-          if (!sub.value) sub.value = {}
+          if (!sub.value) sub.value = { error: ConnectionError.Unknown }
           sub.value.lastConnectingValue = this._state.value
         }
 
@@ -235,7 +327,12 @@ class EngineConnection {
       }
     }
     this._state = next
-    this.onConnectionStateChange(this._state)
+
+    this.dispatchEvent(
+      new CustomEvent(EngineConnectionEvents.ConnectionStateChanged, {
+        detail: this._state,
+      })
+    )
   }
 
   private failedConnTimeout: IsomorphicTimeout | null
@@ -243,95 +340,82 @@ class EngineConnection {
   readonly url: string
   private readonly token?: string
 
-  /**For now, this is only used by the NetworkHealthIndicator.
-   * We can eventually use it for more, but one step at a time.
-   */
-  private onConnectionStateChange: (state: EngineConnectionState) => void
-
-  /**
-   * Used for the EngineCommandManager, created before
-   * onConnectionStateChange existed.
-   */
-  private onEngineConnectionOpen: (engineConnection: EngineConnection) => void
-  /**
-   * Used for the EngineCommandManager, created before
-   * onConnectionStateChange existed.
-   */
-  private onConnectionStarted: (engineConnection: EngineConnection) => void
-  /**
-   * Used for the EngineCommandManager, created before
-   * onConnectionStateChange existed.
-   */
-  private onClose: (engineConnection: EngineConnection) => void
-  /**
-   * Used for the EngineCommandManager, created before
-   * onConnectionStateChange existed.
-   */
-  private onNewTrack: (track: NewTrackArgs) => void
-
-  /**
-   * @todo actual type is `ClientMetrics`
-   */
+  // TODO: actual type is ClientMetrics
   public webrtcStatsCollector?: () => Promise<WebRTCClientMetrics>
   private engineCommandManager: EngineCommandManager
 
+  private pingPongSpan: { ping?: Date; pong?: Date }
+
   constructor({
     engineCommandManager,
     url,
     token,
-    onConnectionStateChange = () => {},
-    onNewTrack = () => {},
-    onEngineConnectionOpen = () => {},
-    onConnectionStarted = () => {},
-    onClose = () => {},
   }: {
     engineCommandManager: EngineCommandManager
     url: string
     token?: string
-    onConnectionStateChange?: (state: EngineConnectionState) => void
-    onEngineConnectionOpen?: (engineConnection: EngineConnection) => void
-    onConnectionStarted?: (engineConnection: EngineConnection) => void
-    onClose?: (engineConnection: EngineConnection) => void
-    onNewTrack?: (track: NewTrackArgs) => void
   }) {
+    super()
+
     this.engineCommandManager = engineCommandManager
     this.url = url
     this.token = token
     this.failedConnTimeout = null
-    this.onConnectionStateChange = onConnectionStateChange
-    this.onEngineConnectionOpen = onEngineConnectionOpen
-    this.onConnectionStarted = onConnectionStarted
 
-    this.onClose = onClose
-    this.onNewTrack = onNewTrack
-
-    // TODO(paultag): This ought to be tweakable.
-    const pingIntervalMs = 10000
+    this.pingPongSpan = { ping: undefined, pong: undefined }
 
     // Without an interval ping, our connection will timeout.
-    let pingInterval = setInterval(() => {
+    setInterval(() => {
       switch (this.state.type as EngineConnectionStateType) {
         case EngineConnectionStateType.ConnectionEstablished:
+          // If there was no reply to the last ping, report a timeout.
+          if (this.pingPongSpan.ping && !this.pingPongSpan.pong) {
+            this.dispatchEvent(
+              new CustomEvent(EngineConnectionEvents.PingPongChanged, {
+                detail: 'TIMEOUT',
+              })
+            )
+            // Otherwise check the time between was >= pingIntervalMs,
+            // and if it was, then it's bad network health.
+          } else if (this.pingPongSpan.ping && this.pingPongSpan.pong) {
+            if (
+              Math.abs(
+                this.pingPongSpan.pong.valueOf() -
+                  this.pingPongSpan.ping.valueOf()
+              ) >= pingIntervalMs
+            ) {
+              this.dispatchEvent(
+                new CustomEvent(EngineConnectionEvents.PingPongChanged, {
+                  detail: 'TIMEOUT',
+                })
+              )
+            } else {
+              this.dispatchEvent(
+                new CustomEvent(EngineConnectionEvents.PingPongChanged, {
+                  detail: 'OK',
+                })
+              )
+            }
+          }
+
           this.send({ type: 'ping' })
+          this.pingPongSpan.ping = new Date()
+          this.pingPongSpan.pong = undefined
           break
         case EngineConnectionStateType.Disconnecting:
         case EngineConnectionStateType.Disconnected:
-          clearInterval(pingInterval)
+          // Reconnect if we have disconnected.
+          if (!this.isConnecting()) this.connect(true)
           break
         default:
+          if (this.isConnecting()) break
+          // Means we never could do an initial connection. Reconnect everything.
+          if (!this.pingPongSpan.ping) this.connect(true)
           break
       }
     }, pingIntervalMs)
 
-    const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
-    let connectRetryInterval = setInterval(() => {
-      if (this.state.type !== EngineConnectionStateType.Disconnected) return
-
-      // Only try reconnecting when completely disconnected.
-      clearInterval(connectRetryInterval)
-      console.log('Trying to reconnect')
     this.connect()
-    }, connectionTimeoutMs)
   }
 
   isConnecting() {
@@ -357,18 +441,23 @@ class EngineConnection {
    * This will attempt the full handshake, and retry if the connection
    * did not establish.
    */
-  connect() {
+  connect(reconnecting?: boolean) {
     if (this.isConnecting() || this.isReady()) {
       return
     }
 
-    // Information on the connect transaction
-
     const createPeerConnection = () => {
       this.pc = new RTCPeerConnection({
         bundlePolicy: 'max-bundle',
       })
 
+      // Other parts of the application expect pc to be initialized when firing.
+      this.dispatchEvent(
+        new CustomEvent(EngineConnectionEvents.ConnectionStarted, {
+          detail: this,
+        })
+      )
+
       // Data channels MUST BE specified before SDP offers because requesting
       // them affects what our needs are!
       const DATACHANNEL_NAME_UMC = 'unreliable_modeling_cmds'
@@ -422,7 +511,11 @@ class EngineConnection {
           // dance is it safest to connect the video tracks / stream
           case 'connected':
             // Let the browser attach to the video stream now
-            this.onNewTrack({ conn: this, mediaStream: this.mediaStream! })
+            this.dispatchEvent(
+              new CustomEvent(EngineConnectionEvents.NewTrack, {
+                detail: { conn: this, mediaStream: this.mediaStream! },
+              })
+            )
             break
           case 'failed':
             this.disconnectAll()
@@ -431,9 +524,8 @@ class EngineConnection {
               value: {
                 type: DisconnectingType.Error,
                 value: {
-                  error: new Error(
-                    'failed to negotiate ice connection; restarting'
-                  ),
+                  error: ConnectionError.ICENegotiate,
+                  context: event,
                 },
               },
             }
@@ -552,7 +644,10 @@ class EngineConnection {
           this.state = { type: EngineConnectionStateType.ConnectionEstablished }
 
           this.engineCommandManager.inSequence = 1
-          this.onEngineConnectionOpen(this)
+
+          this.dispatchEvent(
+            new CustomEvent(EngineConnectionEvents.Opened, { detail: this })
+          )
         })
 
         this.unreliableDataChannel.addEventListener('close', (event) => {
@@ -568,7 +663,8 @@ class EngineConnection {
             value: {
               type: DisconnectingType.Error,
               value: {
-                error: new Error(event.toString()),
+                error: ConnectionError.DataChannelError,
+                context: event,
               },
             },
           }
@@ -599,6 +695,7 @@ class EngineConnection {
       })
     }
 
+    const createWebSocketConnection = () => {
       this.state = {
         type: EngineConnectionStateType.Connecting,
         value: {
@@ -613,7 +710,7 @@ class EngineConnection {
         this.state = {
           type: EngineConnectionStateType.Connecting,
           value: {
-          type: ConnectingType.WebSocketEstablished,
+            type: ConnectingType.WebSocketOpen,
           },
         }
 
@@ -626,6 +723,10 @@ class EngineConnection {
             headers: { Authorization: `Bearer ${this.token}` },
           })
         }
+
+        // Send an initial ping
+        this.send({ type: 'ping' })
+        this.pingPongSpan.ping = new Date()
       })
 
       this.websocket.addEventListener('close', (event) => {
@@ -641,7 +742,8 @@ class EngineConnection {
           value: {
             type: DisconnectingType.Error,
             value: {
-            error: new Error(event.toString()),
+              error: ConnectionError.WebSocketError,
+              context: event,
             },
           },
         }
@@ -673,23 +775,40 @@ class EngineConnection {
               this.engineCommandManager.lastArtifactMap[message.request_id]
             console.error(
               `Error in response to request ${message.request_id}:\n${errorsString}
-failed cmd type was ${artifactThatFailed?.commandType}`
+  failed cmd type was ${artifactThatFailed?.commandType}`
             )
           } else {
             console.error(`Error from server:\n${errorsString}`)
           }
+
+          const firstError = message?.errors[0]
+          if (firstError.error_code === 'auth_token_invalid') {
+            this.state = {
+              type: EngineConnectionStateType.Disconnecting,
+              value: {
+                type: DisconnectingType.Error,
+                value: {
+                  error: ConnectionError.BadAuthToken,
+                  context: firstError.message,
+                },
+              },
+            }
+            this.disconnectAll()
+          }
           return
         }
 
         let resp = message.resp
 
         // If there's no body to the response, we can bail here.
-      // !resp.type is usually "pong" response for our "ping"
         if (!resp || !resp.type) {
           return
         }
 
         switch (resp.type) {
+          case 'pong':
+            this.pingPongSpan.pong = new Date()
+            break
           case 'ice_server_info':
             let ice_servers = resp.data?.ice_servers
 
@@ -748,7 +867,6 @@ failed cmd type was ${artifactThatFailed?.commandType}`
             this.pc
               ?.createOffer()
               .then((offer: RTCSessionDescriptionInit) => {
-              console.log(offer)
                 this.state = {
                   type: EngineConnectionStateType.Connecting,
                   value: {
@@ -758,10 +876,7 @@ failed cmd type was ${artifactThatFailed?.commandType}`
                 return this.pc?.setLocalDescription(offer).then(() => {
                   this.send({
                     type: 'sdp_offer',
-                  offer: {
-                    sdp: offer.sdp || '',
-                    type: offer.type,
-                  },
+                    offer: offer as Models['RtcSessionDescription_type'],
                   })
                   this.state = {
                     type: EngineConnectionStateType.Connecting,
@@ -771,8 +886,7 @@ failed cmd type was ${artifactThatFailed?.commandType}`
                   }
                 })
               })
-            .catch((error: Error) => {
-              console.error(error)
+              .catch((err: Error) => {
                 // The local description is invalid, so there's no point continuing.
                 this.disconnectAll()
                 this.state = {
@@ -780,7 +894,8 @@ failed cmd type was ${artifactThatFailed?.commandType}`
                   value: {
                     type: DisconnectingType.Error,
                     value: {
-                    error,
+                      error: ConnectionError.LocalDescriptionInvalid,
+                      context: err,
                     },
                   },
                 }
@@ -823,7 +938,6 @@ failed cmd type was ${artifactThatFailed?.commandType}`
 
           case 'trickle_ice':
             let candidate = resp.data?.candidate
-          console.log('trickle_ice: using this candidate: ', candidate)
             void this.pc?.addIceCandidate(candidate as RTCIceCandidateInit)
             break
 
@@ -841,28 +955,15 @@ failed cmd type was ${artifactThatFailed?.commandType}`
             break
         }
       })
+    }
 
-    const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
-    if (this.failedConnTimeout) {
-      clearTimeout(this.failedConnTimeout)
-      this.failedConnTimeout = null
+    if (reconnecting) {
+      createWebSocketConnection()
+    } else {
+      window.addEventListener('use-network-status-ready', () => {
+        createWebSocketConnection()
+      })
     }
-    this.failedConnTimeout = setTimeout(() => {
-      if (this.isReady()) {
-        return
-      }
-      this.failedConnTimeout = null
-      this.state = {
-        type: EngineConnectionStateType.Disconnecting,
-        value: {
-          type: DisconnectingType.Timeout,
-        },
-      }
-      this.disconnectAll()
-      this.finalizeIfAllConnectionsClosed()
-    }, connectionTimeoutMs)
-
-    this.onConnectionStarted(this)
   }
   // Do not change this back to an object or any, we should only be sending the
   // WebSocketRequest type!
@@ -903,8 +1004,6 @@ failed cmd type was ${artifactThatFailed?.commandType}`
 export type EngineCommand = Models['WebSocketRequest_type']
 type ModelTypes = Models['OkModelingCmdResponse_type']['type']
 
-type CommandTypes = Models['ModelingCmd_type']['type'] | 'batch'
-
 type UnreliableResponses = Extract<
   Models['OkModelingCmdResponse_type'],
   { type: 'highlight_set_entity' | 'camera_drag_move' }
@@ -914,6 +1013,8 @@ export interface UnreliableSubscription<T extends UnreliableResponses['type']> {
   callback: (data: Extract<UnreliableResponses, { type: T }>) => void
 }
 
+// TODO: Should eventually be replaced with native EventTarget event system,
+// as it manages events in a more familiar way to other developers.
 export interface Subscription<T extends ModelTypes> {
   event: T
   callback: (
@@ -941,6 +1042,10 @@ export type CommandLog =
       data: null
     }
 
+export enum EngineCommandManagerEvents {
+  EngineAvailable = 'engine-available',
+}
+
 /**
  * The EngineCommandManager is the main interface to the Engine for Modeling App.
  *
@@ -951,7 +1056,7 @@ export type CommandLog =
  * It also maintains an {@link artifactMap} that keeps track of the state of each
  * command, and the artifacts that have been generated by those commands.
  */
-export class EngineCommandManager {
+export class EngineCommandManager extends EventTarget {
   /**
    * The artifactMap is a client-side representation of the commands that have been sent
    * to the server-side geometry engine, and the state of their resulting artifacts.
@@ -1020,10 +1125,9 @@ export class EngineCommandManager {
     }
   } = {} as any
 
-  callbacksEngineStateConnection: ((state: EngineConnectionState) => void)[] =
-    []
-
   constructor(pool?: string) {
+    super()
+
     this.engineConnection = undefined
     this.pool = pool
   }
@@ -1088,14 +1192,22 @@ export class EngineCommandManager {
       engineCommandManager: this,
       url,
       token,
-      onConnectionStateChange: (state: EngineConnectionState) => {
-        for (let cb of this.callbacksEngineStateConnection) {
-          cb(state)
-        }
-      },
-      onEngineConnectionOpen: () => {
+    })
+
+    this.dispatchEvent(
+      new CustomEvent(EngineCommandManagerEvents.EngineAvailable, {
+        detail: this.engineConnection,
+      })
+    )
+
+    this.engineConnection.addEventListener(
+      EngineConnectionEvents.Opened,
+      () => {
         // Set the stream background color
-        this.sendSceneCommand({
+        // This takes RGBA values from 0-1
+        // So we convert from the conventional 0-255 found in Figma
+
+        void this.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
@@ -1141,14 +1253,58 @@ export class EngineCommandManager {
           setIsStreamReady(true)
           await executeCode()
         })
-      },
-      onClose: () => {
+      }
+    )
+
+    this.engineConnection.addEventListener(
+      EngineConnectionEvents.Closed,
+      () => {
         setIsStreamReady(false)
-      },
-      onConnectionStarted: (engineConnection) => {
+      }
+    )
+
+    this.engineConnection.addEventListener(
+      EngineConnectionEvents.ConnectionStarted,
+      ({ detail: engineConnection }: any) => {
+        engineConnection?.pc?.addEventListener(
+          'datachannel',
+          (event: RTCDataChannelEvent) => {
+            let unreliableDataChannel = event.channel
+
+            unreliableDataChannel.addEventListener(
+              'message',
+              (event: MessageEvent) => {
+                const result: UnreliableResponses = JSON.parse(event.data)
+                Object.values(
+                  this.unreliableSubscriptions[result.type] || {}
+                ).forEach(
+                  // TODO: There is only one response that uses the unreliable channel atm,
+                  // highlight_set_entity, if there are more it's likely they will all have the same
+                  // sequence logic, but I'm not sure if we use a single global sequence or a sequence
+                  // per unreliable subscription.
+                  (callback) => {
+                    let data = result?.data
+                    if (isHighlightSetEntity_type(data)) {
+                      if (
+                        data.sequence !== undefined &&
+                        data.sequence > this.inSequence
+                      ) {
+                        this.inSequence = data.sequence
+                        callback(result)
+                      }
+                    }
+                  }
+                )
+              }
+            )
+          }
+        )
+
         // When the EngineConnection starts a connection, we want to register
         // callbacks into the WebSocket/PeerConnection.
-        engineConnection.websocket?.addEventListener('message', (event) => {
+        engineConnection.websocket?.addEventListener('message', ((
+          event: MessageEvent
+        ) => {
           if (event.data instanceof ArrayBuffer) {
             // If the data is an ArrayBuffer, it's  the result of an export command,
             // because in all other cases we send JSON strings. But in the case of
@@ -1163,7 +1319,8 @@ export class EngineCommandManager {
             )
             if (
               message.success &&
-              message.resp.type === 'modeling' &&
+              (message.resp.type === 'modeling' ||
+                message.resp.type === 'modeling_batch') &&
               message.request_id
             ) {
               this.handleModelingCommand(
@@ -1179,23 +1336,26 @@ export class EngineCommandManager {
               this.handleFailedModelingCommand(message.request_id, message)
             }
           }
-        })
-      },
-      onNewTrack: ({ mediaStream }) => {
-        console.log('received track', mediaStream)
+        }) as EventListener)
 
+        this.engineConnection?.addEventListener(
+          EngineConnectionEvents.NewTrack,
+          (({ detail: { mediaStream } }: CustomEvent<NewTrackArgs>) => {
             mediaStream.getVideoTracks()[0].addEventListener('mute', () => {
-          console.log('peer is not sending video to us')
-          // this.engineConnection?.close()
-          // this.engineConnection?.connect()
+              console.error(
+                'video track mute: check webrtc internals -> inbound rtp'
+              )
             })
 
             setMediaStream(mediaStream)
-      },
-    })
+          }) as EventListener
+        )
 
         this.engineConnection?.connect()
       }
+    )
+  }
+
   handleResize({
     streamWidth,
     streamHeight,
@@ -1224,19 +1384,60 @@ export class EngineCommandManager {
     id: string,
     raw: WebSocketResponse
   ) {
-    if (message.type !== 'modeling') {
+    if (!(message.type === 'modeling' || message.type === 'modeling_batch')) {
       return
     }
-    const modelingResponse = message.data.modeling_response
+
     const command = this.artifactMap[id]
+    let modelingResponse: Models['OkModelingCmdResponse_type'] = {
+      type: 'empty',
+    }
+    if ('modeling_response' in message.data) {
+      modelingResponse = message.data.modeling_response
+    }
     if (
       command?.type === 'pending' &&
       command.commandType === 'batch' &&
       command?.additionalData?.type === 'batch-ids'
     ) {
+      if ('responses' in message.data) {
+        const batchResponse = message.data.responses as BatchResponseMap
+        // Iterate over the map of responses.
+        Object.entries(batchResponse).forEach(([key, response]) => {
+          // If the response is a success, we resolve the promise.
+          if ('response' in response && response.response) {
+            this.handleModelingCommand(
+              {
+                type: 'modeling',
+                data: {
+                  modeling_response: response.response,
+                },
+              },
+              key,
+              {
+                request_id: key,
+                resp: {
+                  type: 'modeling',
+                  data: {
+                    modeling_response: response.response,
+                  },
+                },
+                success: true,
+              }
+            )
+          } else if ('errors' in response) {
+            this.handleFailedModelingCommand(key, {
+              request_id: key,
+              success: false,
+              errors: response.errors,
+            })
+          }
+        })
+      } else {
         command.additionalData.ids.forEach((id) => {
           this.handleModelingCommand(message, id, raw)
         })
+      }
       // batch artifact is just a container, we don't need to keep it
       // once we process all the commands inside it
       const resolve = command.resolve
@@ -1245,7 +1446,6 @@ export class EngineCommandManager {
         id,
         commandType: command.commandType,
         range: command.range,
-        data: modelingResponse,
         raw,
       })
       return
@@ -1443,9 +1643,6 @@ export class EngineCommandManager {
   ) {
     delete this.unreliableSubscriptions[event][id]
   }
-  onConnectionStateChange(callback: (state: EngineConnectionState) => void) {
-    this.callbacksEngineStateConnection.push(callback)
-  }
   // We make this a separate function so we can call it from wasm.
   clearDefaultPlanes() {
     this.defaultPlanes = null
@@ -1500,7 +1697,6 @@ export class EngineCommandManager {
         (command.cmd.type === 'highlight_set_entity' ||
           command.cmd.type === 'mouse_move' ||
           command.cmd.type === 'camera_drag_move' ||
-          command.cmd.type === 'default_camera_look_at' ||
           command.cmd.type === ('default_camera_perspective_settings' as any))
       )
     ) {
@@ -1515,7 +1711,6 @@ export class EngineCommandManager {
       command.type === 'modeling_cmd_req' &&
       command.cmd.type !== lastMessage
     ) {
-      console.log('sending command', command.cmd.type)
       lastMessage = command.cmd.type
     }
     if (command.type === 'modeling_cmd_batch_req') {
@@ -1529,7 +1724,6 @@ export class EngineCommandManager {
     if (
       (cmd.type === 'camera_drag_move' ||
         cmd.type === 'handle_mouse_drag_move' ||
-        cmd.type === 'default_camera_look_at' ||
         cmd.type === ('default_camera_perspective_settings' as any)) &&
       this.engineConnection?.unreliableDataChannel &&
       !forceWebsocket
@@ -1583,7 +1777,7 @@ export class EngineCommandManager {
     command: EngineCommand
     ast: Program
     idToRangeMap?: { [key: string]: SourceRange }
-  }): Promise<any> {
+  }): Promise<ResolveCommand | void> {
     if (this.engineConnection === undefined) {
       return Promise.resolve()
     }
@@ -1652,19 +1846,24 @@ export class EngineCommandManager {
     command: Models['ModelingCmd_type'],
     ast?: Program,
     range?: SourceRange
-  ) {
+  ): Promise<ResolveCommand | void> {
     let resolve: (val: any) => void = () => {}
-    const promise = new Promise((_resolve, reject) => {
+    const promise: Promise<ResolveCommand | void> = new Promise(
+      (_resolve, reject) => {
         resolve = _resolve
-    })
+      }
+    )
     const getParentId = (): string | undefined => {
       if (command.type === 'extend_path') return command.path
       if (command.type === 'solid3d_get_extrusion_face_info') {
         const edgeArtifact = this.artifactMap[command.edge_id]
         // edges's parent id is to the original "start_path" artifact
-        if (edgeArtifact?.parentId) return edgeArtifact.parentId
+        if (edgeArtifact && edgeArtifact.parentId) {
+          return edgeArtifact.parentId
+        }
       }
       if (command.type === 'close_path') return command.path_id
+      if (command.type === 'extrude') return command.target
       // handle other commands that have a parent here
     }
     const pathToNode = ast
@@ -1679,6 +1878,33 @@ export class EngineCommandManager {
       promise,
       resolve,
     }
+    if (command.type === 'extrude') {
+      this.artifactMap[id] = {
+        range: range || [0, 0],
+        pathToNode,
+        type: 'pending',
+        commandType: 'extrude',
+        parentId: getParentId(),
+        promise,
+        target: command.target,
+        resolve,
+      }
+      const target = this.artifactMap[command.target]
+      if (target.commandType === 'start_path') {
+        // tsc cannot infer that target can have extrusions
+        // from the commandType (why?) so we need to cast it
+        const typedTarget = target as (
+          | PendingCommand
+          | ResultCommand
+          | FailedCommand
+        ) & { extrusions?: string[] }
+        if (typedTarget?.extrusions?.length) {
+          typedTarget.extrusions.push(id)
+        } else {
+          typedTarget.extrusions = [id]
+        }
+      }
+    }
     return promise
   }
   async handlePendingBatchCommand(
@@ -1687,11 +1913,13 @@ export class EngineCommandManager {
     idToRangeMap?: { [key: string]: SourceRange },
     ast?: Program,
     range?: SourceRange
-  ) {
+  ): Promise<ResolveCommand | void> {
     let resolve: (val: any) => void = () => {}
-    const promise = new Promise((_resolve, reject) => {
+    const promise: Promise<ResolveCommand | void> = new Promise(
+      (_resolve, reject) => {
         resolve = _resolve
-    })
+      }
+    )
 
     if (!idToRangeMap) {
       throw new Error('idToRangeMap is required for batch commands')
@@ -1711,7 +1939,7 @@ export class EngineCommandManager {
       resolve,
     }
 
-    await Promise.all(
+    Promise.all(
       commands.map((c) =>
         this.handlePendingCommand(c.cmd_id, c.cmd, ast, idToRangeMap[c.cmd_id])
       )
@@ -1723,7 +1951,7 @@ export class EngineCommandManager {
     rangeStr: string,
     commandStr: string,
     idToRangeStr: string
-  ): Promise<any> {
+  ): Promise<string | void> {
     if (this.engineConnection === undefined) {
       return Promise.resolve()
     }
@@ -1752,13 +1980,13 @@ export class EngineCommandManager {
       command,
       ast: this.getAst(),
       idToRangeMap,
-    }).then(({ raw }: { raw: WebSocketResponse | undefined | null }) => {
-      if (raw === undefined || raw === null) {
+    }).then((resp) => {
+      if (!resp) {
         throw new Error(
           'returning modeling cmd response to the rust side is undefined or null'
         )
       }
-      return JSON.stringify(raw)
+      return JSON.stringify(resp.raw)
     })
   }
   commandResult(id: string): Promise<any> {

src/lang/wasm.ts

@@ -25,7 +25,7 @@ import type { Program } from '../wasm-lib/kcl/bindings/Program'
 import type { Token } from '../wasm-lib/kcl/bindings/Token'
 import { Coords2d } from './std/sketch'
 import { fileSystemManager } from 'lang/std/fileSystemManager'
-import { AppInfo } from 'wasm-lib/kcl/bindings/AppInfo'
+import { CoreDumpInfo } from 'wasm-lib/kcl/bindings/CoreDumpInfo'
 import { CoreDumpManager } from 'lib/coredump'
 import openWindow from 'lib/openWindow'
 import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
@@ -335,14 +335,27 @@ export function programMemoryInit(): ProgramMemory {
 export async function coreDump(
   coreDumpManager: CoreDumpManager,
   openGithubIssue: boolean = false
-): Promise<AppInfo> {
+): Promise<CoreDumpInfo> {
   try {
-    const dump: AppInfo = await coredump(coreDumpManager)
+    const dump: CoreDumpInfo = await coredump(coreDumpManager)
+    /* NOTE: this console output of the coredump should include the field
+       `github_issue_url` which is not in the uploaded coredump file.
+       `github_issue_url` is added after the file is uploaded
+       and is only needed for the openWindow operation which creates
+       a new GitHub issue for the user.
+     */
     if (openGithubIssue && dump.github_issue_url) {
       openWindow(dump.github_issue_url)
+    } else {
+      console.error(
+        'github_issue_url undefined. Unable to create GitHub issue for coredump.'
+      )
     }
+    console.log('CoreDump: final coredump', dump)
+    console.log('CoreDump: final coredump JSON', JSON.stringify(dump))
     return dump
   } catch (e: any) {
+    console.error('CoreDump: error', e)
     throw new Error(`Error getting core dump: ${e}`)
   }
 }

src/lib/constants.ts

@@ -44,5 +44,13 @@ export const RELEVANT_FILE_TYPES = [
 ] as const
 /** The default name for a tutorial project */
 export const ONBOARDING_PROJECT_NAME = 'Tutorial Project $nn'
+/**
+ * The default starting constant name for various modeling operations.
+ * These are used to generate unique names for new objects.
+ * */
+export const KCL_DEFAULT_CONSTANT_PREFIXES = {
+  SKETCH: 'sketch',
+  EXTRUDE: 'extrude',
+} as const
 /** The default KCL length expression */
 export const KCL_DEFAULT_LENGTH = `5`

src/lib/coredump.ts

@@ -13,8 +13,15 @@ import screenshot from 'lib/screenshot'
 import React from 'react'
 import { VITE_KC_API_BASE_URL } from 'env'
 
-// This is a class for getting all the values from the JS world to pass to the Rust world
-// for a core dump.
+/**
+ * CoreDumpManager module
+ * - for getting all the values from the JS world to pass to the Rust world for a core dump.
+ * @module lib/coredump
+ * @class
+ */
+// CoreDumpManager is instantiated in ModelingMachineProvider and passed to coreDump() in wasm.ts
+// The async function coreDump() handles any errors thrown in its Promise catch method and rethrows
+// them to so the toast handler in ModelingMachineProvider can show the user an error message toast
 export class CoreDumpManager {
   engineCommandManager: EngineCommandManager
   htmlRef: React.RefObject<HTMLDivElement> | null
@@ -144,6 +151,293 @@ export class CoreDumpManager {
       })
   }
 
+  // Currently just a placeholder to begin loading singleton and xstate data into
+  getClientState(): Promise<string> {
+    /**
+     * Deep clone a JavaScript Object
+     * - NOTE: this function throws on parse errors from things like circular references
+     * - It is also synchronous and could be more performant
+     * - There is a whole rabbit hole to explore here if you like.
+     * - This works for our use case.
+     * @param {object} obj - The object to clone.
+     */
+    const deepClone = (obj: any) => JSON.parse(JSON.stringify(obj))
+
+    /**
+     * Check if a function is private method
+     */
+    const isPrivateMethod = (key: string) => {
+      return key.length && key[0] === '_'
+    }
+
+    // Turn off verbose logging by default
+    const verboseLogging = false
+
+    /**
+     * Toggle verbose debug logging of step-by-step client state coredump data
+     */
+    const debugLog = verboseLogging ? console.log : () => {}
+
+    console.warn('CoreDump: Gathering client state')
+
+    // Initialize the clientState object
+    let clientState = {
+      // singletons
+      engine_command_manager: {
+        artifact_map: {},
+        command_logs: [],
+        engine_connection: { state: { type: '' } },
+        default_planes: {},
+        scene_command_artifacts: {},
+      },
+      kcl_manager: {
+        ast: {},
+        kcl_errors: [],
+      },
+      scene_infra: {},
+      scene_entities_manager: {},
+      editor_manager: {},
+      // xstate
+      auth_machine: {},
+      command_bar_machine: {},
+      file_machine: {},
+      home_machine: {},
+      modeling_machine: {},
+      settings_machine: {},
+    }
+    debugLog('CoreDump: initialized clientState', clientState)
+    debugLog('CoreDump: globalThis.window', globalThis.window)
+
+    try {
+      // Singletons
+
+      // engine_command_manager
+      debugLog('CoreDump: engineCommandManager', this.engineCommandManager)
+
+      // artifact map - this.engineCommandManager.artifactMap
+      if (this.engineCommandManager?.artifactMap) {
+        debugLog(
+          'CoreDump: Engine Command Manager artifact map',
+          this.engineCommandManager.artifactMap
+        )
+        clientState.engine_command_manager.artifact_map = deepClone(
+          this.engineCommandManager.artifactMap
+        )
+      }
+
+      // command logs - this.engineCommandManager.commandLogs
+      if (this.engineCommandManager?.commandLogs) {
+        debugLog(
+          'CoreDump: Engine Command Manager command logs',
+          this.engineCommandManager.commandLogs
+        )
+        clientState.engine_command_manager.command_logs = deepClone(
+          this.engineCommandManager.commandLogs
+        )
+      }
+
+      // default planes - this.engineCommandManager.defaultPlanes
+      if (this.engineCommandManager?.defaultPlanes) {
+        debugLog(
+          'CoreDump: Engine Command Manager default planes',
+          this.engineCommandManager.defaultPlanes
+        )
+        clientState.engine_command_manager.default_planes = deepClone(
+          this.engineCommandManager.defaultPlanes
+        )
+      }
+
+      // engine connection state
+      if (this.engineCommandManager?.engineConnection?.state) {
+        debugLog(
+          'CoreDump: Engine Command Manager engine connection state',
+          this.engineCommandManager.engineConnection.state
+        )
+        clientState.engine_command_manager.engine_connection.state =
+          this.engineCommandManager.engineConnection.state
+      }
+
+      // in sequence - this.engineCommandManager.inSequence
+      if (this.engineCommandManager?.inSequence) {
+        debugLog(
+          'CoreDump: Engine Command Manager in sequence',
+          this.engineCommandManager.inSequence
+        )
+        ;(clientState.engine_command_manager as any).in_sequence =
+          this.engineCommandManager.inSequence
+      }
+
+      // out sequence - this.engineCommandManager.outSequence
+      if (this.engineCommandManager?.outSequence) {
+        debugLog(
+          'CoreDump: Engine Command Manager out sequence',
+          this.engineCommandManager.outSequence
+        )
+        ;(clientState.engine_command_manager as any).out_sequence =
+          this.engineCommandManager.outSequence
+      }
+
+      // scene command artifacts - this.engineCommandManager.sceneCommandArtifacts
+      if (this.engineCommandManager?.sceneCommandArtifacts) {
+        debugLog(
+          'CoreDump: Engine Command Manager scene command artifacts',
+          this.engineCommandManager.sceneCommandArtifacts
+        )
+        clientState.engine_command_manager.scene_command_artifacts = deepClone(
+          this.engineCommandManager.sceneCommandArtifacts
+        )
+      }
+
+      // KCL Manager - globalThis?.window?.kclManager
+      const kclManager = (globalThis?.window as any)?.kclManager
+      debugLog('CoreDump: kclManager', kclManager)
+
+      if (kclManager) {
+        // KCL Manager AST
+        debugLog('CoreDump: KCL Manager AST', kclManager?.ast)
+        if (kclManager?.ast) {
+          clientState.kcl_manager.ast = deepClone(kclManager.ast)
+        }
+
+        // KCL Errors
+        debugLog('CoreDump: KCL Errors', kclManager?.kclErrors)
+        if (kclManager?.kclErrors) {
+          clientState.kcl_manager.kcl_errors = deepClone(kclManager.kclErrors)
+        }
+
+        // KCL isExecuting
+        debugLog('CoreDump: KCL isExecuting', kclManager?.isExecuting)
+        if (kclManager?.isExecuting) {
+          ;(clientState.kcl_manager as any).isExecuting = kclManager.isExecuting
+        }
+
+        // KCL logs
+        debugLog('CoreDump: KCL logs', kclManager?.logs)
+        if (kclManager?.logs) {
+          ;(clientState.kcl_manager as any).logs = deepClone(kclManager.logs)
+        }
+
+        // KCL programMemory
+        debugLog('CoreDump: KCL programMemory', kclManager?.programMemory)
+        if (kclManager?.programMemory) {
+          ;(clientState.kcl_manager as any).programMemory = deepClone(
+            kclManager.programMemory
+          )
+        }
+
+        // KCL wasmInitFailed
+        debugLog('CoreDump: KCL wasmInitFailed', kclManager?.wasmInitFailed)
+        if (kclManager?.wasmInitFailed) {
+          ;(clientState.kcl_manager as any).wasmInitFailed =
+            kclManager.wasmInitFailed
+        }
+      }
+
+      // Scene Infra - globalThis?.window?.sceneInfra
+      const sceneInfra = (globalThis?.window as any)?.sceneInfra
+      debugLog('CoreDump: Scene Infra', sceneInfra)
+
+      if (sceneInfra) {
+        const sceneInfraSkipKeys = ['camControls']
+        const sceneInfraKeys = Object.keys(sceneInfra)
+          .sort()
+          .filter((entry) => {
+            return (
+              typeof sceneInfra[entry] !== 'function' &&
+              !sceneInfraSkipKeys.includes(entry)
+            )
+          })
+
+        debugLog('CoreDump: Scene Infra keys', sceneInfraKeys)
+        sceneInfraKeys.forEach((key: string) => {
+          debugLog('CoreDump: Scene Infra', key, sceneInfra[key])
+          try {
+            ;(clientState.scene_infra as any)[key] = sceneInfra[key]
+          } catch (error) {
+            console.error(
+              'CoreDump: unable to parse Scene Infra ' + key + ' data due to ',
+              error
+            )
+          }
+        })
+      }
+
+      // Scene Entities Manager - globalThis?.window?.sceneEntitiesManager
+      const sceneEntitiesManager = (globalThis?.window as any)
+        ?.sceneEntitiesManager
+      debugLog('CoreDump: sceneEntitiesManager', sceneEntitiesManager)
+
+      if (sceneEntitiesManager) {
+        // Scene Entities Manager active segments
+        debugLog(
+          'CoreDump: Scene Entities Manager active segments',
+          sceneEntitiesManager?.activeSegments
+        )
+        if (sceneEntitiesManager?.activeSegments) {
+          ;(clientState.scene_entities_manager as any).activeSegments =
+            deepClone(sceneEntitiesManager.activeSegments)
+        }
+      }
+
+      // Editor Manager - globalThis?.window?.editorManager
+      const editorManager = (globalThis?.window as any)?.editorManager
+      debugLog('CoreDump: editorManager', editorManager)
+
+      if (editorManager) {
+        const editorManagerSkipKeys = ['camControls']
+        const editorManagerKeys = Object.keys(editorManager)
+          .sort()
+          .filter((entry) => {
+            return (
+              typeof editorManager[entry] !== 'function' &&
+              !isPrivateMethod(entry) &&
+              !editorManagerSkipKeys.includes(entry)
+            )
+          })
+
+        debugLog('CoreDump: Editor Manager keys', editorManagerKeys)
+        editorManagerKeys.forEach((key: string) => {
+          debugLog('CoreDump: Editor Manager', key, editorManager[key])
+          try {
+            ;(clientState.editor_manager as any)[key] = deepClone(
+              editorManager[key]
+            )
+          } catch (error) {
+            console.error(
+              'CoreDump: unable to parse Editor Manager ' +
+                key +
+                ' data due to ',
+              error
+            )
+          }
+        })
+      }
+
+      // enableMousePositionLogs - Not coredumped
+      // See https://github.com/KittyCAD/modeling-app/issues/2338#issuecomment-2136441998
+      debugLog(
+        'CoreDump: enableMousePositionLogs [not coredumped]',
+        (globalThis?.window as any)?.enableMousePositionLogs
+      )
+
+      // XState Machines
+      debugLog(
+        'CoreDump: xstate services',
+        (globalThis?.window as any)?.__xstate__?.services
+      )
+
+      debugLog('CoreDump: final clientState', clientState)
+
+      const clientStateJson = JSON.stringify(clientState)
+      debugLog('CoreDump: final clientState JSON', clientStateJson)
+
+      return Promise.resolve(clientStateJson)
+    } catch (error) {
+      console.error('CoreDump: unable to return data due to ', error)
+      return Promise.reject(JSON.stringify(error))
+    }
+  }
+
   // Return a data URL (png format) of the screenshot of the current page.
   screenshot(): Promise<string> {
     return screenshot(this.htmlRef)

src/lib/paths.ts

@@ -17,15 +17,17 @@ const prependRoutes =
     )
   }
 
+type OnboardingPaths = {
+  [K in keyof typeof onboardingPaths]: `/onboarding${(typeof onboardingPaths)[K]}`
+}
+
 export const paths = {
   INDEX: '/',
   HOME: '/home',
   FILE: '/file',
   SETTINGS: '/settings',
   SIGN_IN: '/signin',
-  ONBOARDING: prependRoutes(onboardingPaths)(
-    '/onboarding'
-  ) as typeof onboardingPaths,
+  ONBOARDING: prependRoutes(onboardingPaths)('/onboarding') as OnboardingPaths,
 } as const
 export const BROWSER_PATH = `%2F${BROWSER_PROJECT_NAME}%2F${BROWSER_FILE_NAME}${FILE_EXT}`
 

src/lib/selections.ts

@@ -318,7 +318,6 @@ function resetAndSetEngineEntitySelectionCmds(
   selections: SelectionToEngine[]
 ): Models['WebSocketRequest_type'][] {
   if (!engineCommandManager.engineConnection?.isReady()) {
-    console.log('engine connection is not ready')
     return []
   }
   return [
@@ -541,7 +540,7 @@ function codeToIdSelections(
     .filter(Boolean) as any
 }
 
-export function sendSelectEventToEngine(
+export async function sendSelectEventToEngine(
   e: MouseEvent | React.MouseEvent<HTMLDivElement, MouseEvent>,
   el: HTMLVideoElement,
   streamDimensions: { streamWidth: number; streamHeight: number }
@@ -552,7 +551,7 @@ export function sendSelectEventToEngine(
     el,
     ...streamDimensions,
   })
-  const result: Promise<Models['SelectWithPoint_type']> = engineCommandManager
+  const result: Models['SelectWithPoint_type'] = await engineCommandManager
     .sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd: {

src/lib/settings/initialKeybindings.ts

@@ -0,0 +1,182 @@
+import { isTauri } from 'lib/isTauri'
+
+export type InteractionMapItem = {
+  name: string
+  sequence: string
+  title: string
+  description: string
+}
+
+/**
+ * Controls both the available names for interaction map categories
+ * and the order in which they are displayed.
+ */
+export const interactionMapCategories = [
+  'Sketching',
+  'Modeling',
+  'Command Palette',
+  'Settings',
+  'Panes',
+  'Code Editor',
+  'File Tree',
+  'Miscellaneous',
+]
+
+type InteractionMapCategory = (typeof interactionMapCategories)[number]
+
+/**
+ * A temporary implementation of the interaction map for
+ * display purposes only.
+ * @todo Implement a proper interaction map
+ * that can be edited, saved, and loaded. This is underway in the
+ * franknoirot/editable-hotkeys branch.
+ */
+export const interactionMap: Record<
+  InteractionMapCategory,
+  InteractionMapItem[]
+> = {
+  Settings: [
+    {
+      name: 'toggle-settings',
+      sequence: isTauri() ? 'Meta+,' : 'Shift+Meta+,',
+      title: 'Toggle Settings',
+      description: 'Opens the settings dialog. Always available.',
+    },
+    {
+      name: 'settings-search',
+      sequence: 'Control+.',
+      title: 'Settings Search',
+      description:
+        'Focus the settings search input. Available when settings are open.',
+    },
+  ],
+  'Command Palette': [
+    {
+      name: 'toggle-command-palette',
+      sequence: 'Meta+K',
+      title: 'Toggle Command Palette',
+      description: 'Always available. Use Ctrl+/ on Windows/Linux.',
+    },
+  ],
+  Panes: [
+    {
+      name: 'toggle-code-pane',
+      sequence: 'Shift+C',
+      title: 'Toggle Code Pane',
+      description:
+        'Available while modeling when not typing in the code editor.',
+    },
+    {
+      name: 'toggle-variables-pane',
+      sequence: 'Shift+V',
+      title: 'Toggle Variables Pane',
+      description:
+        'Available while modeling when not typing in the code editor.',
+    },
+    {
+      name: 'toggle-logs-pane',
+      sequence: 'Shift+L',
+      title: 'Toggle Logs Pane',
+      description:
+        'Available while modeling when not typing in the code editor.',
+    },
+    {
+      name: 'toggle-errors-pane',
+      sequence: 'Shift+E',
+      title: 'Toggle Errors Pane',
+      description:
+        'Available while modeling when not typing in the code editor.',
+    },
+  ],
+  Sketching: [
+    {
+      name: 'enter-sketch-mode',
+      sequence: 'S',
+      title: 'Enter Sketch Mode',
+      description:
+        'Available while modeling when not typing in the code editor.',
+    },
+    {
+      name: 'unequip-sketch-tool',
+      sequence: 'Escape',
+      title: 'Unequip Sketch Tool',
+      description:
+        'Unequips the current sketch tool. Available while sketching.',
+    },
+    {
+      name: 'exit-sketch-mode',
+      sequence: 'Escape',
+      title: 'Exit Sketch Mode',
+      description: 'Available while sketching, if no sketch tool is equipped.',
+    },
+    {
+      name: 'toggle-line-tool',
+      sequence: 'L',
+      title: 'Toggle Line Tool',
+      description:
+        'Available while sketching, when not typing in the code editor.',
+    },
+    {
+      name: 'toggle-rectangle-tool',
+      sequence: 'R',
+      title: 'Toggle Rectangle Tool',
+      description:
+        'Available while sketching, when not typing in the code editor.',
+    },
+    {
+      name: 'toggle-arc-tool',
+      sequence: 'A',
+      title: 'Toggle Arc Tool',
+      description:
+        'Available while sketching, when not typing in the code editor.',
+    },
+  ],
+  Modeling: [
+    {
+      name: 'extrude',
+      sequence: 'E',
+      title: 'Extrude',
+      description:
+        'Available while modeling with either a face selected or an empty selection, when not typing in the code editor.',
+    },
+  ],
+  'Code Editor': [
+    {
+      name: 'format-code',
+      sequence: 'Shift+Alt+F',
+      title: 'Format Code',
+      description:
+        'Nicely formats the KCL code in the editor, available when the editor is focused.',
+    },
+  ],
+  'File Tree': [
+    {
+      name: 'rename-file',
+      sequence: 'Enter',
+      title: 'Rename File/Folder',
+      description:
+        'Available when a file or folder is selected in the file tree.',
+    },
+    {
+      name: 'delete-file',
+      sequence: 'Meta+Backspace',
+      title: 'Delete File/Folder',
+      description:
+        'Available when a file or folder is selected in the file tree.',
+    },
+  ],
+}
+
+/**
+ * Sorts interaction map categories by their order in the
+ * `interactionMapCategories` array.
+ */
+export function sortInteractionMapByCategory(
+  [categoryA]: [InteractionMapCategory, InteractionMapItem[]],
+  [categoryB]: [InteractionMapCategory, InteractionMapItem[]]
+) {
+  return (
+    interactionMapCategories.indexOf(categoryA) -
+    interactionMapCategories.indexOf(categoryB)
+  )
+}