Trigger shutdown operations after each test

Signed-off-by: Jess Frazelle <github@jessfraz.com>

.github/workflows/cargo-bench.yml

@@ -38,5 +38,7 @@ jobs:
       - name: Benchmark kcl library
         shell: bash
         run: |-
-          cd src/wasm-lib/kcl; cargo bench -- iai
+          cd src/wasm-lib/kcl; cargo bench --all-features -- iai
+        env:
+          KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
 

.github/workflows/ci.yml

@@ -138,6 +138,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: actions/download-artifact@v3
+        if: github.event_name == 'schedule'
 
       - name: Copy updated .json files
         if: github.event_name == 'schedule'
@@ -238,12 +239,8 @@ jobs:
         shell: cmd
 
       - name: Build the app (debug)
-        uses: tauri-apps/tauri-action@v0
         if: ${{ env.BUILD_RELEASE == 'false' }}
-        with:
-          includeRelease: false
-          includeDebug: true
-          args: "${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
+        run: "yarn tauri build --debug ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - name: Build for Mac TestFlight (nightly)
         if: ${{ github.event_name == 'schedule' && matrix.os == 'macos-14' }}
@@ -336,7 +333,6 @@ jobs:
       # specific and we want to overwrite it with the this new build after and
       # not upload the apple store build to the public bucket
       - name: Build the app (release) and sign
-        uses: tauri-apps/tauri-action@v0
         if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
@@ -348,8 +344,7 @@ jobs:
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           TAURI_CONF_ARGS: "--config ${{ matrix.os == 'windows-latest' && 'src-tauri\\tauri.release.conf.json' || 'src-tauri/tauri.release.conf.json' }}"
-        with:
-          args: "${{ env.TAURI_CONF_ARGS }} ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
+        run: "yarn tauri build ${{ env.TAURI_CONF_ARGS }} ${{ env.TAURI_ARGS_MACOS }} ${{ env.TAURI_ARGS_UBUNTU }}"
 
       - uses: actions/upload-artifact@v3
         if: matrix.os != 'ubuntu-latest'
@@ -383,6 +378,8 @@ jobs:
           TS_NODE_COMPILER_OPTIONS: '{"module": "commonjs"}'
 
   publish-apps-release:
+    permissions:
+      contents: write
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'release' || github.event_name == 'schedule' }}
     needs: [check-format, check-types, check-typos, build-test-web, prepare-json-files, build-test-apps]

.github/workflows/playwright.yml

@@ -38,6 +38,8 @@ jobs:
     runs-on: ubuntu-latest-8-cores
     needs: check-rust-changes
     steps:
+    - name: Tune GitHub-hosted runner network
+      uses: smorimoto/tune-github-hosted-runner-network@v1
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
@@ -90,11 +92,17 @@ jobs:
     - name: build web
       run: yarn build:local
     - name: Run ubuntu/chrome snapshots
-      run: yarn playwright test --project="Google Chrome" --update-snapshots e2e/playwright/snapshot-tests.spec.ts
+      continue-on-error: true
+      run: |
+        yarn playwright test --project="Google Chrome" --update-snapshots e2e/playwright/snapshot-tests.spec.ts
       env:
         CI: true
         token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
         snapshottoken: ${{ secrets.KITTYCAD_API_TOKEN }}
+    - name: Clean up test-results
+      if: always()
+      continue-on-error: true
+      run: rm -r test-results
     - name: check for changes
       id: git-check
       run: |
@@ -121,7 +129,7 @@ jobs:
     - uses: actions/upload-artifact@v4
       if: steps.git-check.outputs.modified == 'true'
       with:
-        name: playwright-report
+        name: playwright-report-ubuntu-${{ github.sha }}
         path: playwright-report/
         retention-days: 30
     # if have previous run results, use them
@@ -129,16 +137,18 @@ jobs:
       if: always()
       continue-on-error: true
       with:
-        name: test-results
+        name: test-results-ubuntu-${{ github.sha }}
         path: test-results/
     - name: Run ubuntu/chrome flow retry failures
       id: retry
       if: always()
       run: |
-        ls -1 "test-results"
-        if [[ $(ls -1 "test-results" | wc -l) == "0" ]];
-        then echo "retried=false" >> $GITHUB_OUTPUT; exit 0;
-        else echo "retried=true" >> $GITHUB_OUTPUT;
+        if [[ -d "test-results" ]];
+        then if [[ $(ls -1 "test-results" | wc -l) != "0" ]];
+          then echo "retried=true" >> $GITHUB_OUTPUT;
+          else echo "retried=false" >> $GITHUB_OUTPUT; exit 0;
+          fi;
+        else echo "retried=false" >> $GITHUB_OUTPUT; exit 0;
         fi;
         yarn playwright test --project="Google Chrome" --last-failed e2e/playwright/flow-tests.spec.ts
       env:
@@ -153,23 +163,25 @@ jobs:
     - uses: actions/upload-artifact@v4
       if: always()
       with:
-        name: test-results
+        name: test-results-ubuntu-${{ github.sha }}
         path: test-results/
         retention-days: 30
         overwrite: true
     - uses: actions/upload-artifact@v4
       if: always()
       with:
-        name: playwright-report
+        name: playwright-report-ubuntu-${{ github.sha }}
         path: playwright-report/
         retention-days: 30
         overwrite: true
 
   playwright-macos:
     timeout-minutes: 60
-    runs-on: macos-14
+    runs-on: macos-14-large
     needs: check-rust-changes
     steps:
+    - name: Tune GitHub-hosted runner network
+      uses: smorimoto/tune-github-hosted-runner-network@v1
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
@@ -227,23 +239,25 @@ jobs:
       if: ${{ always() }}
       continue-on-error: true
       with:
-        name: test-results
+        name: test-results-macos-${{ github.sha }}
         path: test-results/
     - name: Run macos/safari flow retry failures
       id: retry
-      continue-on-error: true
-      if: ${{ success() }}
+      if: always()
       run: |
-        if [ -d "test-results" ];
+        if [[ -d "test-results" ]];
+        then if [[ $(ls -1 "test-results" | wc -l) != "0" ]];
           then echo "retried=true" >> $GITHUB_OUTPUT;
-        else echo "retried=false" >> $GITHUB_OUTPUT;
+          else echo "retried=false" >> $GITHUB_OUTPUT; exit 0;
+          fi;
+        else echo "retried=false" >> $GITHUB_OUTPUT; exit 0;
         fi;
         yarn playwright test --project="webkit" --last-failed e2e/playwright/flow-tests.spec.ts
       env:
         CI: true
         token: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
     - name: Run macos/safari flow
-      if: ${{ steps.retry.outputs.retried != 'true' }}
+      if: steps.retry.outputs.retried == 'false'
       # webkit doesn't work on Ubuntu because of the same reason tauri doesn't (webRTC issues)
       # TODO remove this and the matrix and run all tests on ubuntu when this is fixed
       run: yarn playwright test --project="webkit" e2e/playwright/flow-tests.spec.ts
@@ -253,14 +267,14 @@ jobs:
     - uses: actions/upload-artifact@v4
       if: ${{ always() }}
       with:
-        name: test-results
+        name: test-results-macos-${{ github.sha }}
         path: test-results/
         retention-days: 30
         overwrite: true
     - uses: actions/upload-artifact@v4
       if: ${{ always() }}
       with:
-        name: playwright-report
+        name: playwright-report-macos-${{ github.sha }}
         path: playwright-report/
         retention-days: 30
         overwrite: true

.gitignore

@@ -56,3 +56,5 @@ src-tauri/gen
 
 src/wasm-lib/grackle/stdlib_cube_partial.json
 Mac_App_Distribution.provisionprofile
+
+*.tsbuildinfo

.prettierignore

@@ -1,5 +1,6 @@
 # Ignore artifacts:
 build
+dist
 coverage
 
 # Ignore Rust projects:
@@ -9,5 +10,6 @@ src/wasm-lib/pkg
 src/wasm-lib/kcl/bindings
 e2e/playwright/export-snapshots
 
+
 # XState generated files
 src/machines/**.typegen.ts

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-    "cSpell.words": [
-        "geos"
-    ],
-    "editor.tabSize": 2,
-    "editor.insertSpaces": true,
-}

README.md

@@ -124,36 +124,20 @@ Before you submit a contribution PR to this repo, please ensure that:
 
 ## Release a new version
 
-1. Bump the versions in the .json files by creating a `Cut release v{x}.{y}.{z}` PR, committing the changes from
+1. Bump the versions by running `./make-realease.sh` while on a fresh pull of main
 
-```bash
-VERSION=x.y.z yarn run bump-jsons
-```
-
-Alternatively you can try the experimental `make-release.sh` bash script that will create the branch with the updated json files for you.
+That will create the branch with the updated json files for you.
 run `./make-release.sh` for a patch update
 run `./make-release.sh "minor"` for minor
 run `./make-release.sh "major"` for major
 
-The PR may serve as a place to discuss the human-readable changelog and extra QA. A quick way of getting PR's merged since the last bump is to [use this PR filter](https://github.com/KittyCAD/modeling-app/pulls?q=is%3Apr+sort%3Aupdated-desc+is%3Amerged+), open up the browser console and paste in the following
+After it runs you should just need to push the push the branch and open a PR (it will suggest a changelog for you too, delete any that are not user facing)
 
-```typescript
-console.log(
-  '- ' +
-    Array.from(
-      document.querySelectorAll('[data-hovercard-type="pull_request"]')
-    ).map((a) => `[${a.innerText}](${a.href})`).join(`
-- `)
-)
-```
-
-grab the md list and delete any that are older than the last bump
+The PR may serve as a place to discuss the human-readable changelog and extra QA. 
 
 2. Merge the PR
 
-3. Create a new release and tag pointing to the bump version commit using semantic versioning `v{x}.{y}.{z}`
-
-4. A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, uploading artifacts to the release
+3. Profit (A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions if the PR was correctly named)
 
 ## Fuzzing the parser
 

docs/kcl/angleToMatchLengthX.md

@@ -17,11 +17,8 @@ angleToMatchLengthX(segment_name: TagIdentifier, to: number, sketch_group: Sketc
 ```js
 const sketch001 = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
-  |> line([2, 5], %, 'seg01')
-  |> angledLineToX([
-       -angleToMatchLengthX('seg01', 7, %),
-       10
-     ], %)
+  |> line([2, 5], %, $seg01)
+  |> angledLineToX([-angleToMatchLengthX(seg01, 7, %), 10], %)
   |> close(%)
 
 const extrusion = extrude(5, sketch001)

docs/kcl/angleToMatchLengthY.md

@@ -17,9 +17,9 @@ angleToMatchLengthY(segment_name: TagIdentifier, to: number, sketch_group: Sketc
 ```js
 const sketch001 = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
-  |> line([1, 2], %, 'seg01')
+  |> line([1, 2], %, $seg01)
   |> angledLine({
-       angle: angleToMatchLengthY('seg01', 15, %),
+       angle: angleToMatchLengthY(seg01, 15, %),
        length: 5
      }, %)
   |> yLineTo(0, %)

docs/kcl/angledLineOfXLength.md

@@ -17,10 +17,10 @@ angledLineOfXLength(data: AngledLineData, sketch_group: SketchGroup, tag?: TagDe
 ```js
 const sketch001 = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
-  |> angledLineOfXLength({ angle: 45, length: 10 }, %, "edge1")
-  |> angledLineOfXLength({ angle: -15, length: 20 }, %, "edge2")
+  |> angledLineOfXLength({ angle: 45, length: 10 }, %, $edge1)
+  |> angledLineOfXLength({ angle: -15, length: 20 }, %, $edge2)
   |> line([0, -5], %)
-  |> close(%, "edge3")
+  |> close(%, $edge3)
 
 const extrusion = extrude(10, sketch001)
 ```

docs/kcl/angledLineThatIntersects.md

@@ -18,7 +18,7 @@ angledLineThatIntersects(data: AngledLineThatIntersectsData, sketch_group: Sketc
 const exampleSketch = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
   |> lineTo([5, 10], %)
-  |> lineTo([-10, 10], %, "lineToIntersect")
+  |> lineTo([-10, 10], %, $lineToIntersect)
   |> lineTo([0, 20], %)
   |> angledLineThatIntersects({
        angle: 80,

docs/kcl/chamfer.md

@@ -22,19 +22,19 @@ const chamferLength = 2
 
 const mountingPlateSketch = startSketchOn("XY")
   |> startProfileAt([-width / 2, -length / 2], %)
-  |> lineTo([width / 2, -length / 2], %, 'edge1')
-  |> lineTo([width / 2, length / 2], %, 'edge2')
-  |> lineTo([-width / 2, length / 2], %, 'edge3')
-  |> close(%, 'edge4')
+  |> lineTo([width / 2, -length / 2], %, $edge1)
+  |> lineTo([width / 2, length / 2], %, $edge2)
+  |> lineTo([-width / 2, length / 2], %, $edge3)
+  |> close(%, $edge4)
 
 const mountingPlate = extrude(thickness, mountingPlateSketch)
   |> chamfer({
        length: chamferLength,
        tags: [
-         getNextAdjacentEdge('edge1', %),
-         getNextAdjacentEdge('edge2', %),
-         getNextAdjacentEdge('edge3', %),
-         getNextAdjacentEdge('edge4', %)
+         getNextAdjacentEdge(edge1, %),
+         getNextAdjacentEdge(edge2, %),
+         getNextAdjacentEdge(edge3, %),
+         getNextAdjacentEdge(edge4, %)
        ]
      }, %)
 ```

docs/kcl/circle.md

@@ -9,7 +9,7 @@ Sketch a circle.
 
 
 ```js
-circle(center: [number], radius: number, tag?: TagDeclarator, sketch_surface_or_group: SketchSurfaceOrGroup) -> SketchGroup
+circle(center: [number], radius: number, sketch_surface_or_group: SketchSurfaceOrGroup, tag?: TagDeclarator) -> SketchGroup
 ```
 
 ### Examples
@@ -41,14 +41,6 @@ const example = extrude(5, exampleSketch)
 
 * `center`: `[number]` (REQUIRED)
 * `radius`: `number` (REQUIRED)
-* `tag`: `TagDeclarator` (OPTIONAL)
-```js
-{
-	end: number,
-	start: number,
-	value: string,
-}
-```
 * `sketch_surface_or_group`: `SketchSurfaceOrGroup` - A sketch surface or a sketch group. (REQUIRED)
 ```js
 {
@@ -510,6 +502,14 @@ const example = extrude(5, exampleSketch)
 }],
 }
 ```
+* `tag`: `TagDeclarator` (OPTIONAL)
+```js
+{
+	end: number,
+	start: number,
+	value: string,
+}
+```
 
 ### Returns
 

docs/kcl/fillet.md

@@ -22,19 +22,19 @@ const filletRadius = 2
 
 const mountingPlateSketch = startSketchOn("XY")
   |> startProfileAt([-width / 2, -length / 2], %)
-  |> lineTo([width / 2, -length / 2], %, 'edge1')
-  |> lineTo([width / 2, length / 2], %, 'edge2')
-  |> lineTo([-width / 2, length / 2], %, 'edge3')
-  |> close(%, 'edge4')
+  |> lineTo([width / 2, -length / 2], %, $edge1)
+  |> lineTo([width / 2, length / 2], %, $edge2)
+  |> lineTo([-width / 2, length / 2], %, $edge3)
+  |> close(%, $edge4)
 
 const mountingPlate = extrude(thickness, mountingPlateSketch)
   |> fillet({
        radius: filletRadius,
        tags: [
-         getNextAdjacentEdge('edge1', %),
-         getNextAdjacentEdge('edge2', %),
-         getNextAdjacentEdge('edge3', %),
-         getNextAdjacentEdge('edge4', %)
+         getNextAdjacentEdge(edge1, %),
+         getNextAdjacentEdge(edge2, %),
+         getNextAdjacentEdge(edge3, %),
+         getNextAdjacentEdge(edge4, %)
        ]
      }, %)
 ```

docs/kcl/getEdge.md

@@ -17,7 +17,7 @@ getEdge(tag: TagIdentifier, extrude_group: ExtrudeGroup) -> Uuid
 ```js
 const box = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
-  |> line([0, 10], %, 'revolveAxis')
+  |> line([0, 10], %, $revolveAxis)
   |> line([10, 0], %)
   |> line([0, -10], %)
   |> close(%)
@@ -30,7 +30,7 @@ const revolution = startSketchOn(box, "revolveAxis")
   |> line([0, -10], %)
   |> close(%)
   |> revolve({
-       axis: getEdge('revolveAxis', box),
+       axis: getEdge(revolveAxis, box),
        angle: 90
      }, %)
 ```

docs/kcl/getNextAdjacentEdge.md

@@ -21,15 +21,13 @@ const exampleSketch = startSketchOn('XZ')
   |> angledLine({ angle: 60, length: 10 }, %)
   |> angledLine({ angle: 120, length: 10 }, %)
   |> line([-10, 0], %)
-  |> angledLine({ angle: 240, length: 10 }, %, 'referenceEdge')
+  |> angledLine({ angle: 240, length: 10 }, %, $referenceEdge)
   |> close(%)
 
 const example = extrude(5, exampleSketch)
   |> fillet({
        radius: 3,
-       tags: [
-         getNextAdjacentEdge("referenceEdge", %)
-       ]
+       tags: [getNextAdjacentEdge(referenceEdge, %)]
      }, %)
 ```
 

docs/kcl/getOppositeEdge.md

@@ -21,13 +21,13 @@ const exampleSketch = startSketchOn('XZ')
   |> angledLine({ angle: 60, length: 10 }, %)
   |> angledLine({ angle: 120, length: 10 }, %)
   |> line([-10, 0], %)
-  |> angledLine({ angle: 240, length: 10 }, %, 'referenceEdge')
+  |> angledLine({ angle: 240, length: 10 }, %, $referenceEdge)
   |> close(%)
 
 const example = extrude(5, exampleSketch)
   |> fillet({
        radius: 3,
-       tags: [getOppositeEdge("referenceEdge", %)]
+       tags: [getOppositeEdge(referenceEdge, %)]
      }, %)
 ```
 

docs/kcl/getPreviousAdjacentEdge.md

@@ -21,14 +21,14 @@ const exampleSketch = startSketchOn('XZ')
   |> angledLine({ angle: 60, length: 10 }, %)
   |> angledLine({ angle: 120, length: 10 }, %)
   |> line([-10, 0], %)
-  |> angledLine({ angle: 240, length: 10 }, %, 'referenceEdge')
+  |> angledLine({ angle: 240, length: 10 }, %, $referenceEdge)
   |> close(%)
 
 const example = extrude(5, exampleSketch)
   |> fillet({
        radius: 3,
        tags: [
-         getPreviousAdjacentEdge("referenceEdge", %)
+         getPreviousAdjacentEdge(referenceEdge, %)
        ]
      }, %)
 ```

docs/kcl/index.md

@@ -55,6 +55,7 @@ layout: manual
 * [`patternCircular3d`](kcl/patternCircular3d)
 * [`patternLinear2d`](kcl/patternLinear2d)
 * [`patternLinear3d`](kcl/patternLinear3d)
+* [`patternTransform`](kcl/patternTransform)
 * [`pi`](kcl/pi)
 * [`pow`](kcl/pow)
 * [`profileStart`](kcl/profileStart)

docs/kcl/profileStart.md

@@ -17,9 +17,9 @@ profileStart(sketch_group: SketchGroup) -> [number]
 ```js
 const sketch001 = startSketchOn('XY')
   |> startProfileAt([5, 2], %)
-  |> angledLine({ angle: 120, length: 50 }, %, 'seg01')
+  |> angledLine({ angle: 120, length: 50 }, %, $seg01)
   |> angledLine({
-       angle: segAng('seg01', %) + 120,
+       angle: segAng(seg01, %) + 120,
        length: 50
      }, %)
   |> lineTo(profileStart(%), %)

docs/kcl/revolve.md

@@ -99,7 +99,7 @@ const box = startSketchOn('XY')
   |> startProfileAt([0, 0], %)
   |> line([0, 20], %)
   |> line([20, 0], %)
-  |> line([0, -20], %, 'revolveAxis')
+  |> line([0, -20], %, $revolveAxis)
   |> close(%)
   |> extrude(20, %)
 
@@ -107,7 +107,7 @@ const sketch001 = startSketchOn(box, "END")
   |> circle([10, 10], 4, %)
   |> revolve({
        angle: 90,
-       axis: getOppositeEdge('revolveAxis', box)
+       axis: getOppositeEdge(revolveAxis, box)
      }, %)
 ```
 

docs/kcl/segAng.md

@@ -18,11 +18,11 @@ segAng(segment_name: TagIdentifier, sketch_group: SketchGroup) -> number
 const exampleSketch = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
   |> line([10, 0], %)
-  |> line([5, 10], %, 'seg01')
+  |> line([5, 10], %, $seg01)
   |> line([-10, 0], %)
-  |> angledLine([segAng('seg01', %), 10], %)
+  |> angledLine([segAng(seg01, %), 10], %)
   |> line([-10, 0], %)
-  |> angledLine([segAng('seg01', %), -15], %)
+  |> angledLine([segAng(seg01, %), -15], %)
   |> close(%)
 
 const example = extrude(4, exampleSketch)

docs/kcl/segEndX.md

@@ -17,9 +17,9 @@ segEndX(segment_name: TagIdentifier, sketch_group: SketchGroup) -> number
 ```js
 const exampleSketch = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
-  |> line([20, 0], %, "thing")
+  |> line([20, 0], %, $thing)
   |> line([0, 5], %)
-  |> line([segEndX("thing", %), 0], %)
+  |> line([segEndX(thing, %), 0], %)
   |> line([-20, 10], %)
   |> close(%)
 

docs/kcl/segEndY.md

@@ -18,9 +18,9 @@ segEndY(segment_name: TagIdentifier, sketch_group: SketchGroup) -> number
 const exampleSketch = startSketchOn('XZ')
   |> startProfileAt([0, 0], %)
   |> line([20, 0], %)
-  |> line([0, 3], %, "thing")
+  |> line([0, 3], %, $thing)
   |> line([-10, 0], %)
-  |> line([0, segEndY("thing", %)], %)
+  |> line([0, segEndY(thing, %)], %)
   |> line([-10, 0], %)
   |> close(%)
 

docs/kcl/segLen.md

@@ -17,12 +17,9 @@ segLen(segment_name: TagIdentifier, sketch_group: SketchGroup) -> number
 ```js
 const exampleSketch = startSketchOn("XZ")
   |> startProfileAt([0, 0], %)
-  |> angledLine({ angle: 60, length: 10 }, %, "thing")
+  |> angledLine({ angle: 60, length: 10 }, %, $thing)
   |> tangentialArc({ offset: -120, radius: 5 }, %)
-  |> angledLine({
-       angle: -60,
-       length: segLen("thing", %)
-     }, %)
+  |> angledLine({ angle: -60, length: segLen(thing, %) }, %)
   |> close(%)
 
 const example = extrude(5, exampleSketch)

docs/kcl/startSketchOn.md

@@ -49,7 +49,7 @@ const example003 = extrude(5, exampleSketch003)
 const exampleSketch = startSketchOn("XY")
   |> startProfileAt([0, 0], %)
   |> line([10, 0], %)
-  |> line([0, 10], %, 'sketchingFace')
+  |> line([0, 10], %, $sketchingFace)
   |> line([-10, 0], %)
   |> close(%)
 
@@ -60,7 +60,7 @@ const exampleSketch002 = startSketchOn(example, 'sketchingFace')
   |> line([8, 0], %)
   |> line([0, 8], %)
   |> line([-8, 0], %)
-  |> close(%, 'sketchingFace002')
+  |> close(%, $sketchingFace002)
 
 const example002 = extrude(10, exampleSketch002)
 

docs/kcl/types.md

@@ -74,6 +74,10 @@ You can nest expressions in parenthesis as well:
 let myMathExpression = 3 + (1 * 2 / (3 - 7))
 ```
 
+## Tag Declaration and Tag Identifiers
+
+The syntax for tags is now `$myTag` to declare a tag and `myTag` to then use it later. 
+
 Please if you find any issues using any of the above expressions or syntax
 please file an issue with the `ast` label on the [modeling-app
 repo](https://github.com/KittyCAD/modeling-app/issues/new).

e2e/playwright/snapshot-tests.spec.ts

@@ -91,8 +91,9 @@ const part001 = startSketchOn('-XZ')
     )
   })
   await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
+
   await u.openDebugPanel()
   await u.expectCmdLog('[data-message-type="execution-done"]')
   await u.waitForCmdReceive('extrude')
@@ -330,7 +331,7 @@ const extrudeDefaultPlane = async (context: any, page: any, plane: string) => {
 
   const u = await getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
 
   // wait for execution done
@@ -386,8 +387,8 @@ test('Draft segments should look right', async ({ page, context }) => {
   const u = await getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
-  await page.goto('/')
   await u.waitForAuthSkipAppStart()
+
   await u.openDebugPanel()
 
   await expect(
@@ -443,7 +444,7 @@ test('Draft rectangles should look right', async ({ page, context }) => {
   const u = await getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   const PUR = 400 / 37.5 //pixeltoUnitRatio
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
   await u.openDebugPanel()
 
@@ -490,7 +491,7 @@ test.describe('Client side scene scale should match engine scale', () => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
-    await page.goto('/')
+
     await u.waitForAuthSkipAppStart()
     await u.openDebugPanel()
 
@@ -589,7 +590,7 @@ test.describe('Client side scene scale should match engine scale', () => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
-    await page.goto('/')
+
     await u.waitForAuthSkipAppStart()
     await u.openDebugPanel()
 
@@ -689,7 +690,7 @@ const part002 = startSketchOn(part001, 'seg01')
   }, KCL_DEFAULT_LENGTH)
 
   await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
 
   await u.openDebugPanel()
@@ -739,7 +740,7 @@ test('Zoom to fit on load - solid 2d', async ({ page, context }) => {
   }, KCL_DEFAULT_LENGTH)
 
   await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
 
   await u.openDebugPanel()
@@ -776,7 +777,7 @@ test('Zoom to fit on load - solid 3d', async ({ page, context }) => {
   }, KCL_DEFAULT_LENGTH)
 
   await page.setViewportSize({ width: 1200, height: 500 })
-  await page.goto('/')
+
   await u.waitForAuthSkipAppStart()
 
   await u.openDebugPanel()
@@ -795,3 +796,83 @@ test('Zoom to fit on load - solid 3d', async ({ page, context }) => {
     maxDiffPixels: 100,
   })
 })
+
+test.describe('Grid visibility', () => {
+  test('Grid turned off', async ({ page }) => {
+    const u = await getUtils(page)
+    const stream = page.getByTestId('stream')
+    const mask = [
+      page.locator('#app-header'),
+      page.locator('#sidebar-top-ribbon'),
+      page.locator('#sidebar-bottom-ribbon'),
+    ]
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.goto('/')
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    // wait for execution done
+    await expect(
+      page.locator('[data-message-type="execution-done"]')
+    ).toHaveCount(2)
+    await u.closeDebugPanel()
+    await u.closeKclCodePanel()
+    // TODO: Find a way to truly know that the objects have finished
+    // rendering, because an execution-done message is not sufficient.
+    await page.waitForTimeout(1000)
+
+    await expect(stream).toHaveScreenshot({
+      maxDiffPixels: 100,
+      mask,
+    })
+  })
+
+  test('Grid turned on', async ({ page }) => {
+    await page.addInitScript(
+      async ({ settingsKey, settings }) => {
+        localStorage.setItem(settingsKey, settings)
+      },
+      {
+        settingsKey: TEST_SETTINGS_KEY,
+        settings: TOML.stringify({
+          settings: {
+            ...TEST_SETTINGS,
+            modeling: {
+              ...TEST_SETTINGS.modeling,
+              showScaleGrid: true,
+            },
+          },
+        }),
+      }
+    )
+
+    const u = await getUtils(page)
+    const stream = page.getByTestId('stream')
+    const mask = [
+      page.locator('#app-header'),
+      page.locator('#sidebar-top-ribbon'),
+      page.locator('#sidebar-bottom-ribbon'),
+    ]
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await page.goto('/')
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    // wait for execution done
+    await expect(
+      page.locator('[data-message-type="execution-done"]')
+    ).toHaveCount(2)
+    await u.closeDebugPanel()
+    await u.closeKclCodePanel()
+    // TODO: Find a way to truly know that the objects have finished
+    // rendering, because an execution-done message is not sufficient.
+    await page.waitForTimeout(1000)
+
+    await expect(stream).toHaveScreenshot({
+      maxDiffPixels: 100,
+      mask,
+    })
+  })
+})

e2e/playwright/test-utils.ts

@@ -45,8 +45,8 @@ async function clearCommandLogs(page: Page) {
   await page.getByTestId('clear-commands').click()
 }
 
-async function expectCmdLog(page: Page, locatorStr: string) {
-  await expect(page.locator(locatorStr).last()).toBeVisible()
+async function expectCmdLog(page: Page, locatorStr: string, timeout = 5000) {
+  await expect(page.locator(locatorStr).last()).toBeVisible({ timeout })
 }
 
 async function waitForDefaultPlanesToBeVisible(page: Page) {
@@ -207,6 +207,23 @@ export const getMovementUtils = (opts: any) => {
   return { toSU, click00r }
 }
 
+async function waitForAuthAndLsp(page: Page) {
+  const waitForLspPromise = page.waitForEvent('console', async (message) => {
+    // it would be better to wait for a message that the kcl lsp has started by looking for the message  message.text().includes('[lsp] [window/logMessage]')
+    // but that doesn't seem to make it to the console for macos/safari :(
+    if (message.text().includes('start kcl lsp')) {
+      await new Promise((resolve) => setTimeout(resolve, 200))
+      return true
+    }
+    return false
+  })
+
+  await page.goto('/')
+  await waitForPageLoad(page)
+
+  return waitForLspPromise
+}
+
 export async function getUtils(page: Page) {
   // Chrome devtools protocol session only works in Chromium
   const browserType = page.context().browser()?.browserType().name()
@@ -214,7 +231,8 @@ export async function getUtils(page: Page) {
     browserType !== 'chromium' ? null : await page.context().newCDPSession(page)
 
   return {
-    waitForAuthSkipAppStart: () => waitForPageLoad(page),
+    waitForAuthSkipAppStart: () => waitForAuthAndLsp(page),
+    waitForPageLoad: () => waitForPageLoad(page),
     removeCurrentCode: () => removeCurrentCode(page),
     sendCustomCmd: (cmd: EngineCommand) => sendCustomCmd(page, cmd),
     updateCamPosition: async (xyz: [number, number, number]) => {
@@ -228,7 +246,8 @@ export async function getUtils(page: Page) {
       await fillInput('z', xyz[2])
     },
     clearCommandLogs: () => clearCommandLogs(page),
-    expectCmdLog: (locatorStr: string) => expectCmdLog(page, locatorStr),
+    expectCmdLog: (locatorStr: string, timeout = 5000) =>
+      expectCmdLog(page, locatorStr, timeout),
     openKclCodePanel: () => openKclCodePanel(page),
     closeKclCodePanel: () => closeKclCodePanel(page),
     openDebugPanel: () => openDebugPanel(page),
@@ -293,18 +312,26 @@ export async function getUtils(page: Page) {
         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 pixMultiplier: number = await page.evaluate(
+        'window.devicePixelRatio'
+      )
       const index =
         (screenshot.width * coords.y * pixMultiplier +
           coords.x * pixMultiplier) *
         4 // rbga is 4 channels
-      return Math.max(
+      const maxDiff = 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])
       )
+      if (maxDiff > 4) {
+        console.log(
+          `Expected: ${expected} Actual: [${screenshot.data[index]}, ${
+            screenshot.data[index + 1]
+          }, ${screenshot.data[index + 2]}]`
+        )
+      }
+      return maxDiff
     },
     doAndWaitForImageDiff: (fn: () => Promise<any>, diffCount = 200) =>
       new Promise(async (resolve) => {
@@ -350,11 +377,10 @@ export async function getUtils(page: Page) {
     emulateNetworkConditions: async (
       networkOptions: Protocol.Network.emulateNetworkConditionsParameters
     ) => {
-      // Skip on non-Chromium browsers, since we need to use the CDP.
-      test.skip(
-        cdpSession === null,
-        'Network emulation is only supported in Chromium'
-      )
+      if (cdpSession === null) {
+        // Use a fail safe if we can't simulate disconnect (on Safari)
+        return page.evaluate('window.tearDown()')
+      }
 
       cdpSession?.send('Network.emulateNetworkConditions', networkOptions)
     },

examples/addition.cado

@@ -1,3 +0,0 @@
-// comment
-
-const hi = 5 + 4

package.json

@@ -1,50 +1,43 @@
 {
   "name": "untitled-app",
-  "version": "0.22.6",
+  "version": "0.23.1",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.16.0",
+    "@codemirror/autocomplete": "^6.17.0",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@csstools/postcss-oklab-function": "^3.0.16",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.67",
-    "@lezer/javascript": "^1.4.9",
-    "@open-rpc/client-js": "^1.8.1",
+    "@kittycad/lib": "^0.0.69",
     "@react-hook/resize-observer": "^2.0.1",
     "@replit/codemirror-interact": "^6.3.1",
-    "@tauri-apps/api": "2.0.0-beta.12",
-    "@tauri-apps/plugin-dialog": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-fs": "^2.0.0-beta.3",
-    "@tauri-apps/plugin-http": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-os": "^2.0.0-beta.3",
-    "@tauri-apps/plugin-process": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-updater": "^2.0.0-beta.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^15.0.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@tauri-apps/api": "^2.0.0-beta.14",
+    "@tauri-apps/plugin-dialog": "^2.0.0-beta.6",
+    "@tauri-apps/plugin-fs": "^2.0.0-beta.6",
+    "@tauri-apps/plugin-http": "^2.0.0-beta.7",
+    "@tauri-apps/plugin-os": "^2.0.0-beta.6",
+    "@tauri-apps/plugin-process": "^2.0.0-beta.6",
+    "@tauri-apps/plugin-shell": "^2.0.0-beta.7",
+    "@tauri-apps/plugin-updater": "^2.0.0-beta.6",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@types/node": "^18.19.31",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.2.25",
-    "@uiw/react-codemirror": "^4.21.25",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
-    "crypto-js": "^4.2.0",
-    "debounce-promise": "^3.1.2",
+    "codemirror": "^6.0.1",
     "decamelize": "^6.0.0",
-    "eslint-plugin-suggest-no-throw": "^1.0.0",
-    "formik": "^2.4.6",
     "fuse.js": "^7.0.0",
-    "html2canvas-pro": "^1.4.3",
-    "http-server": "^14.1.1",
+    "html2canvas-pro": "^1.5.2",
     "json-rpc-2.0": "^1.6.0",
     "jszip": "^3.10.1",
-    "node-fetch": "^3.3.2",
     "re-resizable": "^6.9.11",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
@@ -55,20 +48,15 @@
     "react-modal-promise": "^1.0.2",
     "react-router-dom": "^6.23.1",
     "sketch-helpers": "^0.0.4",
-    "swr": "^2.2.5",
-    "three": "^0.164.1",
-    "ts-node": "^10.9.2",
+    "three": "^0.166.1",
     "typescript": "^5.4.5",
     "ua-parser-js": "^1.0.37",
     "uuid": "^9.0.1",
-    "vitest": "^1.6.0",
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
-    "wasm-pack": "^0.12.1",
+    "vscode-uri": "^3.0.8",
     "web-vitals": "^3.5.2",
-    "ws": "^8.17.0",
-    "xstate": "^4.38.2",
-    "zustand": "^4.5.2"
+    "xstate": "^4.38.2"
   },
   "scripts": {
     "start": "vite",
@@ -85,11 +73,11 @@
     "test:e2e:tauri": "E2E_TAURI_ENABLED=true TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' wdio run wdio.conf.ts",
     "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
     "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
-    "fmt": "prettier --write ./src *.ts *.json *.js ./e2e",
-    "fmt-check": "prettier --check ./src *.ts *.json *.js ./e2e",
+    "fmt": "prettier --write ./src *.ts *.json *.js ./e2e ./packages",
+    "fmt-check": "prettier --check ./src *.ts *.json *.js ./e2e ./packages",
     "fetch:wasm": "./get-latest-wasm-bundle.sh",
     "build:wasm-dev": "(cd src/wasm-lib && wasm-pack build --dev --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
-    "build:wasm": "(cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
+    "build:wasm": "(cd src/wasm-lib && wasm-pack build --release --target web --out-dir pkg && cargo test -p kcl-lib export_bindings) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt",
     "build:wasm-clean": "yarn wasm-prep && yarn build:wasm",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
@@ -121,13 +109,16 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.3",
     "@iarna/toml": "^2.2.5",
-    "@playwright/test": "^1.44.1",
-    "@tauri-apps/cli": "^2.0.0-beta.13",
-    "@types/crypto-js": "^4.2.2",
-    "@types/debounce-promise": "^3.1.9",
+    "@playwright/test": "^1.45.1",
+    "@tauri-apps/cli": "==2.0.0-beta.13",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^15.0.2",
     "@types/mocha": "^10.0.6",
+    "@types/node": "^18.19.31",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.2.25",
     "@types/react-modal": "^3.16.3",
     "@types/three": "^0.163.0",
     "@types/ua-parser-js": "^0.7.39",
@@ -147,21 +138,27 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.12.0",
+    "eslint-plugin-suggest-no-throw": "^1.0.0",
     "happy-dom": "^14.3.10",
+    "http-server": "^14.1.1",
     "husky": "^9.0.11",
+    "node-fetch": "^3.3.2",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
     "postcss": "^8.4.31",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.8",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.4.1",
     "vite": "^5.2.9",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-package-version": "^1.1.0",
     "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0",
     "vitest-webgl-canvas-mock": "^1.1.0",
     "wait-on": "^7.2.0",
+    "wasm-pack": "^0.13.0",
+    "ws": "^8.17.0",
     "yarn": "^1.22.22"
   }
 }

packages/codemirror-lsp-client/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+build
+dist
+tsconfig.tsbuildinfo
+*.d.ts
+*.js

packages/codemirror-lsp-client/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kittycad/codemirror-lsp-client",
+  "version": "1.0.0",
+  "description": "An LSP client for the codemirror editor.",
+  "main": "src/index.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "type": "module",
+  "repository": "https://github.com/KittyCAD/modeling-app",
+  "author": "Zoo Engineering Team",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/state": "^6.4.1",
+    "@lezer/highlight": "^1.2.0",
+    "@ts-stack/markdown": "^1.5.0",
+    "json-rpc-2.0": "^1.7.0",
+    "typescript": "^5.5.2",
+    "vscode-languageserver-protocol": "^3.17.5",
+    "vscode-uri": "^3.0.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "ts-node": "^10.9.2"
+  }
+}

packages/codemirror-lsp-client/src/client/codec/demuxer.ts

@@ -1,10 +1,10 @@
 import * as vsrpc from 'vscode-jsonrpc'
 
+import { Codec } from '.'
 import Bytes from './bytes'
-import PromiseMap from './map'
 import Queue from './queue'
-import Tracer from '../tracer'
-import { Codec } from '../codec'
+import Tracer from './tracer'
+import PromiseMap from './map'
 
 export default class StreamDemuxer extends Queue<Uint8Array> {
   readonly responses: PromiseMap<number | string, vsrpc.ResponseMessage> =
@@ -15,9 +15,12 @@ export default class StreamDemuxer extends Queue<Uint8Array> {
     new Queue<vsrpc.RequestMessage>()
 
   readonly #start: Promise<void>
+  private trace: boolean = false
 
-  constructor() {
+  constructor(trace?: boolean) {
     super()
+    this.trace = trace || false
+
     this.#start = this.start()
   }
 
@@ -64,7 +67,10 @@ export default class StreamDemuxer extends Queue<Uint8Array> {
         contentLength = null
 
         const message = JSON.parse(delimited) as vsrpc.Message
+
+        if (this.trace) {
           Tracer.server(message)
+        }
 
         // demux the message stream
         if (vsrpc.Message.isResponse(message) && null != message.id) {
@@ -85,7 +91,9 @@ export default class StreamDemuxer extends Queue<Uint8Array> {
 
   add(bytes: Uint8Array): void {
     const message = Codec.decode(bytes) as vsrpc.Message
+    if (this.trace) {
       Tracer.server(message)
+    }
 
     // demux the message stream
     if (vsrpc.Message.isResponse(message) && null != message.id) {

packages/codemirror-lsp-client/src/client/codec/index.ts

@@ -1,12 +1,16 @@
 import * as jsrpc from 'json-rpc-2.0'
 import * as vsrpc from 'vscode-jsonrpc'
 
-import Bytes from './codec/bytes'
-import StreamDemuxer from './codec/demuxer'
-import Headers from './codec/headers'
-import Queue from './codec/queue'
+import Bytes from './bytes'
+import StreamDemuxer from './demuxer'
+import Headers from './headers'
+import Queue from './queue'
 import Tracer from './tracer'
-import { LspWorkerEventType, LspWorker } from './types'
+
+export enum LspWorkerEventType {
+  Init = 'init',
+  Call = 'call',
+}
 
 export const encoder = new TextEncoder()
 export const decoder = new TextDecoder()
@@ -33,16 +37,24 @@ export class IntoServer
   implements AsyncGenerator<Uint8Array, never, void>
 {
   private worker: Worker | null = null
-  private type_: LspWorker | null = null
-  constructor(type_?: LspWorker, worker?: Worker) {
+  private type_: String | null = null
+
+  private trace: boolean = false
+
+  constructor(type_?: String, worker?: Worker, trace?: boolean) {
     super()
     if (worker && type_) {
       this.worker = worker
       this.type_ = type_
     }
+
+    this.trace = trace || false
   }
   enqueue(item: Uint8Array): void {
+    if (this.trace) {
       Tracer.client(Headers.remove(decoder.decode(item)))
+    }
+
     if (this.worker) {
       this.worker.postMessage({
         worker: this.type_,
@@ -71,7 +83,7 @@ export namespace FromServer {
     // Calls private method .start() which can throw.
     // This is an odd one of the bunch but try/catch seems most suitable here.
     try {
-      return new StreamDemuxer()
+      return new StreamDemuxer(false)
     } catch (e: any) {
       return e
     }

packages/codemirror-lsp-client/src/client/codec/tracer.ts

@@ -0,0 +1,13 @@
+import { Message } from 'vscode-languageserver-protocol'
+
+export default class Tracer {
+  static client(message: string): void {
+    console.log('lsp client message', message)
+  }
+
+  static server(input: string | Message): void {
+    const message: string =
+      typeof input === 'string' ? input : JSON.stringify(input)
+    console.log('lsp server message', message)
+  }
+}

packages/codemirror-lsp-client/src/client/index.ts

@@ -1,16 +1,8 @@
 import type * as LSP from 'vscode-languageserver-protocol'
-import Client from './client'
-import { SemanticToken, deserializeTokens } from './kcl/semantic_tokens'
-import { LanguageServerPlugin } from 'editor/plugins/lsp/plugin'
-import { CopilotLspCompletionParams } from 'wasm-lib/kcl/bindings/CopilotLspCompletionParams'
-import { CopilotCompletionResponse } from 'wasm-lib/kcl/bindings/CopilotCompletionResponse'
-import { CopilotAcceptCompletionParams } from 'wasm-lib/kcl/bindings/CopilotAcceptCompletionParams'
-import { CopilotRejectCompletionParams } from 'wasm-lib/kcl/bindings/CopilotRejectCompletionParams'
-import { UpdateUnitsParams } from 'wasm-lib/kcl/bindings/UpdateUnitsParams'
-import { UpdateCanExecuteParams } from 'wasm-lib/kcl/bindings/UpdateCanExecuteParams'
-import { UpdateUnitsResponse } from 'wasm-lib/kcl/bindings/UpdateUnitsResponse'
-import { UpdateCanExecuteResponse } from 'wasm-lib/kcl/bindings/UpdateCanExecuteResponse'
-import { LspWorker } from './types'
+
+import { FromServer, IntoServer } from './codec'
+import Client from './jsonrpc'
+import { LanguageServerPlugin } from '../plugin/lsp'
 
 // https://microsoft.github.io/language-server-protocol/specifications/specification-current/
 
@@ -31,12 +23,6 @@ interface LSPRequestMap {
     LSP.TextEdit[] | null
   ]
   'textDocument/foldingRange': [LSP.FoldingRangeParams, LSP.FoldingRange[]]
-  'copilot/getCompletions': [
-    CopilotLspCompletionParams,
-    CopilotCompletionResponse
-  ]
-  'kcl/updateUnits': [UpdateUnitsParams, UpdateUnitsResponse | null]
-  'kcl/updateCanExecute': [UpdateCanExecuteParams, UpdateCanExecuteResponse]
 }
 
 // Client to server
@@ -49,21 +35,13 @@ interface LSPNotifyMap {
   'workspace/didCreateFiles': LSP.CreateFilesParams
   'workspace/didRenameFiles': LSP.RenameFilesParams
   'workspace/didDeleteFiles': LSP.DeleteFilesParams
-  'copilot/notifyAccepted': CopilotAcceptCompletionParams
-  'copilot/notifyRejected': CopilotRejectCompletionParams
 }
 
 export interface LanguageServerClientOptions {
-  client: Client
-  name: LspWorker
-}
-
-export interface LanguageServerOptions {
-  // We assume this is the main project directory, we are currently working in.
-  workspaceFolders: LSP.WorkspaceFolder[]
-  documentUri: string
-  allowHTMLContent: boolean
-  client: LanguageServerClient
+  name: string
+  fromServer: FromServer
+  intoServer: IntoServer
+  initializedCallback: () => void
 }
 
 export class LanguageServerClient {
@@ -76,18 +54,18 @@ export class LanguageServerClient {
 
   public initializePromise: Promise<void>
 
-  private isUpdatingSemanticTokens: boolean = false
-  private semanticTokens: SemanticToken[] = []
-  private queuedUids: string[] = []
-
   constructor(options: LanguageServerClientOptions) {
-    this.plugins = []
-    this.client = options.client
     this.name = options.name
+    this.plugins = []
+
+    this.client = new Client(
+      options.fromServer,
+      options.intoServer,
+      options.initializedCallback
+    )
 
     this.ready = false
 
-    this.queuedUids = []
     this.initializePromise = this.initialize()
   }
 
@@ -111,19 +89,10 @@ export class LanguageServerClient {
 
   textDocumentDidOpen(params: LSP.DidOpenTextDocumentParams) {
     this.notify('textDocument/didOpen', params)
-
-    // Update the facet of the plugins to the correct value.
-    for (const plugin of this.plugins) {
-      plugin.documentUri = params.textDocument.uri
-      plugin.languageId = params.textDocument.languageId
-    }
-
-    this.updateSemanticTokens(params.textDocument.uri)
   }
 
   textDocumentDidChange(params: LSP.DidChangeTextDocumentParams) {
     this.notify('textDocument/didChange', params)
-    this.updateSemanticTokens(params.textDocument.uri)
   }
 
   textDocumentDidClose(params: LSP.DidCloseTextDocumentParams) {
@@ -134,18 +103,9 @@ export class LanguageServerClient {
     added: LSP.WorkspaceFolder[],
     removed: LSP.WorkspaceFolder[]
   ) {
-    // Add all the current workspace folders in the plugin to removed.
-    for (const plugin of this.plugins) {
-      removed.push(...plugin.workspaceFolders)
-    }
     this.notify('workspace/didChangeWorkspaceFolders', {
       event: { added, removed },
     })
-
-    // Add all the new workspace folders to the plugins.
-    for (const plugin of this.plugins) {
-      plugin.workspaceFolders = added
-    }
   }
 
   workspaceDidCreateFiles(params: LSP.CreateFilesParams) {
@@ -160,33 +120,13 @@ export class LanguageServerClient {
     this.notify('workspace/didDeleteFiles', params)
   }
 
-  async updateSemanticTokens(uri: string) {
+  async textDocumentSemanticTokensFull(params: LSP.SemanticTokensParams) {
     const serverCapabilities = this.getServerCapabilities()
     if (!serverCapabilities.semanticTokensProvider) {
       return
     }
 
-    // Make sure we can only run, if we aren't already running.
-    if (!this.isUpdatingSemanticTokens) {
-      this.isUpdatingSemanticTokens = true
-
-      const result = await this.request('textDocument/semanticTokens/full', {
-        textDocument: {
-          uri,
-        },
-      })
-
-      this.semanticTokens = await deserializeTokens(
-        result.data,
-        this.getServerCapabilities().semanticTokensProvider
-      )
-
-      this.isUpdatingSemanticTokens = false
-    }
-  }
-
-  getSemanticTokens(): SemanticToken[] {
-    return this.semanticTokens
+    return this.request('textDocument/semanticTokens/full', params)
   }
 
   async textDocumentHover(params: LSP.HoverParams) {
@@ -239,6 +179,10 @@ export class LanguageServerClient {
     return this.client.request(method, params) as Promise<LSPRequestMap[K][1]>
   }
 
+  requestCustom<P, R>(method: string, params: P): Promise<R> {
+    return this.client.request(method, params) as Promise<R>
+  }
+
   private notify<K extends keyof LSPNotifyMap>(
     method: K,
     params: LSPNotifyMap[K]
@@ -246,44 +190,8 @@ export class LanguageServerClient {
     return this.client.notify(method, params)
   }
 
-  async getCompletion(params: CopilotLspCompletionParams) {
-    const response = await this.request('copilot/getCompletions', params)
-    //
-    this.queuedUids = [...response.completions.map((c) => c.uuid)]
-    return response
-  }
-
-  async accept(uuid: string) {
-    const badUids = this.queuedUids.filter((u) => u !== uuid)
-    this.queuedUids = []
-    this.acceptCompletion({ uuid })
-    this.rejectCompletions({ uuids: badUids })
-  }
-
-  async reject() {
-    const badUids = this.queuedUids
-    this.queuedUids = []
-    this.rejectCompletions({ uuids: badUids })
-  }
-
-  acceptCompletion(params: CopilotAcceptCompletionParams) {
-    this.notify('copilot/notifyAccepted', params)
-  }
-
-  rejectCompletions(params: CopilotRejectCompletionParams) {
-    this.notify('copilot/notifyRejected', params)
-  }
-
-  async updateUnits(
-    params: UpdateUnitsParams
-  ): Promise<UpdateUnitsResponse | null> {
-    return await this.request('kcl/updateUnits', params)
-  }
-
-  async updateCanExecute(
-    params: UpdateCanExecuteParams
-  ): Promise<UpdateCanExecuteResponse> {
-    return await this.request('kcl/updateCanExecute', params)
+  notifyCustom<P>(method: string, params: P): void {
+    return this.client.notify(method, params)
   }
 
   private processNotifications(notification: LSP.NotificationMessage) {

packages/codemirror-lsp-client/src/client/jsonrpc.ts

@@ -6,7 +6,6 @@ import {
   unregisterServerCapability,
 } from './server-capability-registration'
 import { Codec, FromServer, IntoServer } from './codec'
-import { err } from 'lib/trap'
 
 const client_capabilities: LSP.ClientCapabilities = {
   textDocument: {
@@ -67,8 +66,13 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
   #fromServer: FromServer
   private serverCapabilities: LSP.ServerCapabilities<any> = {}
   private notifyFn: ((message: LSP.NotificationMessage) => void) | null = null
+  private initializedCallback: () => void
 
-  constructor(fromServer: FromServer, intoServer: IntoServer) {
+  constructor(
+    fromServer: FromServer,
+    intoServer: IntoServer,
+    initializedCallback: () => void
+  ) {
     super(
       new jsrpc.JSONRPCServer(),
       new jsrpc.JSONRPCClient(async (json: jsrpc.JSONRPCRequest) => {
@@ -82,6 +86,7 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
       })
     )
     this.#fromServer = fromServer
+    this.initializedCallback = initializedCallback
   }
 
   async start(): Promise<void> {
@@ -124,7 +129,9 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
             this.serverCapabilities,
             capabilityRegistration
           )
-          if (err(caps)) return (this.serverCapabilities = {})
+          if (caps instanceof Error) {
+            return (this.serverCapabilities = {})
+          }
           this.serverCapabilities = caps
         }
       )
@@ -139,7 +146,9 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
             this.serverCapabilities,
             capabilityUnregistration
           )
-          if (err(caps)) return (this.serverCapabilities = {})
+          if (caps instanceof Error) {
+            return (this.serverCapabilities = {})
+          }
           this.serverCapabilities = caps
         }
       )
@@ -151,7 +160,7 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
       {
         processId: null,
         clientInfo: {
-          name: 'kcl-language-client',
+          name: 'codemirror-lsp-client',
         },
         capabilities: client_capabilities,
         rootUri: null,
@@ -163,6 +172,8 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
     // notify "initialized": client --> server
     this.notify(LSP.InitializedNotification.type.method, {})
 
+    this.initializedCallback()
+
     await Promise.all(
       this.afterInitializedHooks.map((f: () => Promise<void>) => f())
     )

packages/codemirror-lsp-client/src/index.ts

@@ -0,0 +1,57 @@
+import { foldService } from '@codemirror/language'
+import { Extension, EditorState } from '@codemirror/state'
+import { ViewPlugin } from '@codemirror/view'
+
+import {
+  docPathFacet,
+  LanguageServerPlugin,
+  LanguageServerPluginSpec,
+  languageId,
+  workspaceFolders,
+  LanguageServerOptions,
+} from './plugin/lsp'
+
+export type { LanguageServerClientOptions } from './client'
+export { LanguageServerClient } from './client'
+export {
+  Codec,
+  FromServer,
+  IntoServer,
+  LspWorkerEventType,
+} from './client/codec'
+export type { LanguageServerOptions } from './plugin/lsp'
+export {
+  LanguageServerPlugin,
+  LanguageServerPluginSpec,
+  docPathFacet,
+  languageId,
+  workspaceFolders,
+  lspSemanticTokensEvent,
+  lspDiagnosticsEvent,
+  lspFormatCodeEvent,
+} from './plugin/lsp'
+export { posToOffset, offsetToPos } from './plugin/util'
+
+export function lspPlugin(options: LanguageServerOptions): Extension {
+  let plugin: LanguageServerPlugin | null = null
+  const viewPlugin = ViewPlugin.define(
+    (view) => (plugin = new LanguageServerPlugin(options, view)),
+    new LanguageServerPluginSpec()
+  )
+
+  let ext = [
+    docPathFacet.of(options.documentUri),
+    languageId.of('kcl'),
+    workspaceFolders.of(options.workspaceFolders),
+    viewPlugin,
+    foldService.of((state: EditorState, lineStart: number, lineEnd: number) => {
+      if (plugin == null) return null
+      // Get the folding ranges from the language server.
+      // Since this is async we directly need to update the folding ranges after.
+      const range = plugin?.foldingRange(lineStart, lineEnd)
+      return range
+    }),
+  ]
+
+  return ext
+}

packages/codemirror-lsp-client/src/plugin/autocomplete.ts

@@ -0,0 +1,112 @@
+import {
+  acceptCompletion,
+  autocompletion,
+  clearSnippet,
+  closeCompletion,
+  hasNextSnippetField,
+  moveCompletionSelection,
+  nextSnippetField,
+  prevSnippetField,
+  startCompletion,
+} from '@codemirror/autocomplete'
+import { Prec, Extension } from '@codemirror/state'
+import { EditorView, keymap, KeyBinding, ViewPlugin } from '@codemirror/view'
+
+import {
+  CompletionItemKind,
+  CompletionTriggerKind,
+} from 'vscode-languageserver-protocol'
+
+import { LanguageServerPlugin } from './lsp'
+import { offsetToPos } from './util'
+import { syntaxTree } from '@codemirror/language'
+
+export const CompletionItemKindMap = Object.fromEntries(
+  Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
+) as Record<CompletionItemKind, string>
+
+const lspAutocompleteKeymap: readonly KeyBinding[] = [
+  { key: 'Ctrl-Space', run: startCompletion },
+  {
+    key: 'Escape',
+    run: (view: EditorView): boolean => {
+      if (clearSnippet(view)) return true
+
+      return closeCompletion(view)
+    },
+  },
+  { key: 'ArrowDown', run: moveCompletionSelection(true) },
+  { key: 'ArrowUp', run: moveCompletionSelection(false) },
+  { key: 'PageDown', run: moveCompletionSelection(true, 'page') },
+  { key: 'PageUp', run: moveCompletionSelection(false, 'page') },
+  { key: 'Enter', run: acceptCompletion },
+  {
+    key: 'Tab',
+    run: (view: EditorView): boolean => {
+      if (hasNextSnippetField(view.state)) {
+        const result = nextSnippetField(view)
+        return result
+      }
+
+      return acceptCompletion(view)
+    },
+    shift: prevSnippetField,
+  },
+]
+
+const lspAutocompleteKeymapExt = Prec.highest(keymap.of(lspAutocompleteKeymap))
+
+export default function lspAutocompleteExt(
+  plugin: ViewPlugin<LanguageServerPlugin>
+): Extension {
+  return [
+    lspAutocompleteKeymapExt,
+    autocompletion({
+      defaultKeymap: false,
+      override: [
+        async (context) => {
+          const { state, pos, explicit, view } = context
+          let value = view?.plugin(plugin)
+          if (!value) return null
+
+          let nodeBefore = syntaxTree(state).resolveInner(pos, -1)
+          if (
+            nodeBefore.name === 'BlockComment' ||
+            nodeBefore.name === 'LineComment'
+          )
+            return null
+
+          const line = state.doc.lineAt(pos)
+          let trigKind: CompletionTriggerKind = CompletionTriggerKind.Invoked
+          let trigChar: string | undefined
+          if (
+            !explicit &&
+            value.client
+              .getServerCapabilities()
+              .completionProvider?.triggerCharacters?.includes(
+                line.text[pos - line.from - 1]
+              )
+          ) {
+            trigKind = CompletionTriggerKind.TriggerCharacter
+            trigChar = line.text[pos - line.from - 1]
+          }
+          if (
+            trigKind === CompletionTriggerKind.Invoked &&
+            !context.matchBefore(/\w+$/)
+          ) {
+            return null
+          }
+
+          return await value.requestCompletion(
+            context,
+            offsetToPos(state.doc, pos),
+            {
+              triggerKind: trigKind,
+              triggerCharacter: trigChar,
+            }
+          )
+        },
+      ],
+    }),
+  ]
+}

packages/codemirror-lsp-client/src/plugin/format.ts

@@ -0,0 +1,27 @@
+import { Extension, Prec } from '@codemirror/state'
+import { EditorView, keymap, KeyBinding, ViewPlugin } from '@codemirror/view'
+
+import { LanguageServerPlugin } from './lsp'
+
+export default function lspFormatExt(
+  plugin: ViewPlugin<LanguageServerPlugin>
+): Extension {
+  const formatKeymap: readonly KeyBinding[] = [
+    {
+      key: 'Alt-Shift-f',
+      run: (view: EditorView) => {
+        let value = view.plugin(plugin)
+        if (!value) return false
+        value.requestFormatting()
+        return true
+      },
+    },
+  ]
+
+  // Create an extension for the key mappings.
+  const formatKeymapExt = Prec.highest(
+    keymap.computeN([], () => [formatKeymap])
+  )
+
+  return formatKeymapExt
+}

packages/codemirror-lsp-client/src/plugin/hover.ts

@@ -0,0 +1,22 @@
+import { Extension } from '@codemirror/state'
+import { hoverTooltip, tooltips, ViewPlugin } from '@codemirror/view'
+
+import { LanguageServerPlugin } from './lsp'
+import { offsetToPos } from './util'
+
+export default function lspHoverExt(
+  plugin: ViewPlugin<LanguageServerPlugin>
+): Extension {
+  return [
+    hoverTooltip((view, pos) => {
+      const value = view.plugin(plugin)
+      return (
+        value?.requestHoverTooltip(view, offsetToPos(view.state.doc, pos)) ??
+        null
+      )
+    }),
+    tooltips({
+      position: 'absolute',
+    }),
+  ]
+}

packages/codemirror-lsp-client/src/plugin/indent.ts

@@ -0,0 +1,21 @@
+import { indentService } from '@codemirror/language'
+import { Extension } from '@codemirror/state'
+
+export default function lspIndentExt(): Extension {
+  // Match the indentation of the previous line (if present).
+  return indentService.of((context, pos) => {
+    try {
+      const previousLine = context.lineAt(pos, -1)
+      const previousLineText = previousLine.text.replaceAll(
+        '\t',
+        ' '.repeat(context.state.tabSize)
+      )
+      const match = previousLineText.match(/^(\s)*/)
+      if (match === null || match.length <= 0) return null
+      return match[0].length
+    } catch (err) {
+      console.error('Error in codemirror indentService', err)
+    }
+    return null
+  })
+}

packages/codemirror-lsp-client/src/plugin/lint.ts

@@ -0,0 +1,12 @@
+import { Extension } from '@codemirror/state'
+import { linter, forEachDiagnostic, Diagnostic } from '@codemirror/lint'
+
+export default function lspLintExt(): Extension {
+  return linter((view) => {
+    let diagnostics: Diagnostic[] = []
+    forEachDiagnostic(view.state, (d: Diagnostic, from: number, to: number) => {
+      diagnostics.push(d)
+    })
+    return diagnostics
+  })
+}

packages/codemirror-lsp-client/src/plugin/lsp.ts

@@ -1,115 +1,155 @@
-import { completeFromList, snippetCompletion } from '@codemirror/autocomplete'
-import { setDiagnostics } from '@codemirror/lint'
-import { Facet } from '@codemirror/state'
-import { EditorView, Tooltip } from '@codemirror/view'
-import {
-  DiagnosticSeverity,
-  CompletionItemKind,
-  CompletionTriggerKind,
-} from 'vscode-languageserver-protocol'
-
-import { deferExecution } from 'lib/utils'
 import type {
   Completion,
   CompletionContext,
   CompletionResult,
 } from '@codemirror/autocomplete'
+import { completeFromList, snippetCompletion } from '@codemirror/autocomplete'
+import {
+  Facet,
+  StateEffect,
+  Extension,
+  Transaction,
+  Annotation,
+} from '@codemirror/state'
+import type {
+  ViewUpdate,
+  PluginValue,
+  PluginSpec,
+  ViewPlugin,
+} from '@codemirror/view'
+import { EditorView, Tooltip } from '@codemirror/view'
+
 import type { PublishDiagnosticsParams } from 'vscode-languageserver-protocol'
-import type { ViewUpdate, PluginValue } from '@codemirror/view'
 import type * as LSP from 'vscode-languageserver-protocol'
-import { LanguageServerClient } from 'editor/plugins/lsp'
-import { Marked } from '@ts-stack/markdown'
-import { posToOffset } from 'editor/plugins/lsp/util'
-import { Program, ProgramMemory } from 'lang/wasm'
-import { codeManager, editorManager, kclManager } from 'lib/singletons'
-import type { UnitLength } from 'wasm-lib/kcl/bindings/UnitLength'
-import { UpdateUnitsResponse } from 'wasm-lib/kcl/bindings/UpdateUnitsResponse'
-import { UpdateCanExecuteResponse } from 'wasm-lib/kcl/bindings/UpdateCanExecuteResponse'
+import {
+  DiagnosticSeverity,
+  CompletionTriggerKind,
+} from 'vscode-languageserver-protocol'
+import { URI } from 'vscode-uri'
+
+import { LanguageServerClient } from '../client'
+import { CompletionItemKindMap } from './autocomplete'
+import { addToken, SemanticToken } from './semantic-tokens'
+import { deferExecution, posToOffset, formatMarkdownContents } from './util'
+import lspAutocompleteExt from './autocomplete'
+import lspHoverExt from './hover'
+import lspFormatExt from './format'
+import lspIndentExt from './indent'
+import lspLintExt from './lint'
+import lspSemanticTokensExt from './semantic-tokens'
 
 const useLast = (values: readonly any[]) => values.reduce((_, v) => v, '')
-export const documentUri = Facet.define<string, string>({ combine: useLast })
+export const docPathFacet = Facet.define<string, string>({
+  combine: useLast,
+})
 export const languageId = Facet.define<string, string>({ combine: useLast })
 export const workspaceFolders = Facet.define<
   LSP.WorkspaceFolder[],
   LSP.WorkspaceFolder[]
 >({ combine: useLast })
 
-const CompletionItemKindMap = Object.fromEntries(
-  Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
-) as Record<CompletionItemKind, string>
+export enum LspAnnotation {
+  SemanticTokens = 'semantic-tokens',
+  FormatCode = 'format-code',
+  Diagnostics = 'diagnostics',
+}
 
-const changesDelay = 600
-let debounceTimer: ReturnType<typeof setTimeout> | null = null
-const updateDelay = 100
+const lspEvent = Annotation.define<LspAnnotation>()
+export const lspSemanticTokensEvent = lspEvent.of(LspAnnotation.SemanticTokens)
+export const lspFormatCodeEvent = lspEvent.of(LspAnnotation.FormatCode)
+export const lspDiagnosticsEvent = lspEvent.of(LspAnnotation.Diagnostics)
+
+export interface LanguageServerOptions {
+  // We assume this is the main project directory, we are currently working in.
+  workspaceFolders: LSP.WorkspaceFolder[]
+  documentUri: string
+  allowHTMLContent: boolean
+  client: LanguageServerClient
+  processLspNotification?: (
+    plugin: LanguageServerPlugin,
+    notification: LSP.NotificationMessage
+  ) => void
+
+  changesDelay?: number
+}
 
 export class LanguageServerPlugin implements PluginValue {
   public client: LanguageServerClient
-  public documentUri: string
-  public languageId: string
-  public workspaceFolders: LSP.WorkspaceFolder[]
   private documentVersion: number
   private foldingRanges: LSP.FoldingRange[] | null = null
-  private viewUpdate: ViewUpdate | null = null
+
+  private previousSemanticTokens: SemanticToken[] = []
+
+  private allowHTMLContent: boolean = true
+  private changesDelay: number = 600
+  private processLspNotification?: (
+    plugin: LanguageServerPlugin,
+    notification: LSP.NotificationMessage
+  ) => void
+
   private _defferer = deferExecution((code: string) => {
     try {
       // Update the state (not the editor) with the new code.
       this.client.textDocumentDidChange({
         textDocument: {
-          uri: this.documentUri,
+          uri: this.getDocUri(),
           version: this.documentVersion++,
         },
         contentChanges: [{ text: code }],
       })
 
-      if (this.viewUpdate) {
-        editorManager.handleOnViewUpdate(this.viewUpdate)
-      }
+      this.requestSemanticTokens()
+      this.updateFoldingRanges()
     } catch (e) {
       console.error(e)
     }
-  }, changesDelay)
+  }, this.changesDelay)
 
-  constructor(
-    client: LanguageServerClient,
-    private view: EditorView,
-    private allowHTMLContent: boolean
-  ) {
-    this.client = client
-    this.documentUri = this.view.state.facet(documentUri)
-    this.languageId = this.view.state.facet(languageId)
-    this.workspaceFolders = this.view.state.facet(workspaceFolders)
+  constructor(options: LanguageServerOptions, private view: EditorView) {
+    this.client = options.client
     this.documentVersion = 0
 
+    if (options.changesDelay) {
+      this.changesDelay = options.changesDelay
+    }
+
+    if (options.allowHTMLContent !== undefined) {
+      this.allowHTMLContent = options.allowHTMLContent
+    }
+
     this.client.attachPlugin(this)
 
+    this.processLspNotification = options.processLspNotification
+
     this.initialize({
-      documentText: this.view.state.doc.toString(),
+      documentText: this.getDocText(),
     })
   }
 
-  update(viewUpdate: ViewUpdate) {
-    this.viewUpdate = viewUpdate
-    if (!viewUpdate.docChanged) {
-      // debounce the view update.
-      // otherwise it is laggy for typing.
-      if (debounceTimer) {
-        clearTimeout(debounceTimer)
+  private getDocPath(view = this.view) {
+    return view.state.facet(docPathFacet)
   }
 
-      debounceTimer = setTimeout(() => {
-        editorManager.handleOnViewUpdate(viewUpdate)
-      }, updateDelay)
+  private getDocText(view = this.view) {
+    return view.state.doc.toString()
+  }
+
+  private getDocUri(view = this.view) {
+    return URI.file(this.getDocPath(view)).toString()
+  }
+
+  private getLanguageId(view = this.view) {
+    return view.state.facet(languageId)
+  }
+
+  update(viewUpdate: ViewUpdate) {
+    // If the doc didn't change we can return early.
+    if (!viewUpdate.docChanged) {
       return
     }
 
-    const newCode = this.view.state.doc.toString()
-
-    codeManager.code = newCode
-    codeManager.writeToFile()
-    kclManager.executeCode()
-
     this.sendChange({
-      documentText: newCode,
+      documentText: viewUpdate.state.doc.toString(),
     })
   }
 
@@ -121,14 +161,18 @@ export class LanguageServerPlugin implements PluginValue {
     if (this.client.initializePromise) {
       await this.client.initializePromise
     }
+
     this.client.textDocumentDidOpen({
       textDocument: {
-        uri: this.documentUri,
-        languageId: this.languageId,
+        uri: this.getDocUri(),
+        languageId: this.getLanguageId(),
         text: documentText,
         version: this.documentVersion,
       },
     })
+
+    this.requestSemanticTokens()
+    this.updateFoldingRanges()
   }
 
   async sendChange({ documentText }: { documentText: string }) {
@@ -137,8 +181,8 @@ export class LanguageServerPlugin implements PluginValue {
     this._defferer(documentText)
   }
 
-  requestDiagnostics(view: EditorView) {
-    this.sendChange({ documentText: view.state.doc.toString() })
+  requestDiagnostics() {
+    this.sendChange({ documentText: this.getDocText() })
   }
 
   async requestHoverTooltip(
@@ -151,9 +195,9 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.sendChange({ documentText: view.state.doc.toString() })
+    this.sendChange({ documentText: this.getDocText() })
     const result = await this.client.textDocumentHover({
-      textDocument: { uri: this.documentUri },
+      textDocument: { uri: this.getDocUri() },
       position: { line, character },
     })
     if (!result) return null
@@ -169,8 +213,8 @@ export class LanguageServerPlugin implements PluginValue {
     dom.classList.add('documentation')
     dom.classList.add('hover-tooltip')
     dom.style.zIndex = '99999999'
-    if (this.allowHTMLContent) dom.innerHTML = formatContents(contents)
-    else dom.textContent = formatContents(contents)
+    if (this.allowHTMLContent) dom.innerHTML = formatMarkdownContents(contents)
+    else dom.textContent = formatMarkdownContents(contents)
     return { pos, end, create: (view) => ({ dom }), above: true }
   }
 
@@ -180,8 +224,9 @@ export class LanguageServerPlugin implements PluginValue {
       !this.client.getServerCapabilities().foldingRangeProvider
     )
       return null
+
     const result = await this.client.textDocumentFoldingRange({
-      textDocument: { uri: this.documentUri },
+      textDocument: { uri: this.getDocUri() },
     })
 
     return result || null
@@ -222,42 +267,6 @@ export class LanguageServerPlugin implements PluginValue {
     return null
   }
 
-  async updateUnits(units: UnitLength): Promise<UpdateUnitsResponse | null> {
-    if (this.client.name !== 'kcl') return null
-    if (!this.client.ready) return null
-
-    return await this.client.updateUnits({
-      textDocument: {
-        uri: this.documentUri,
-      },
-      text: this.view.state.doc.toString(),
-      units,
-    })
-  }
-  async updateCanExecute(
-    canExecute: boolean
-  ): Promise<UpdateCanExecuteResponse | null> {
-    if (this.client.name !== 'kcl') return null
-    if (!this.client.ready) return null
-
-    let response = await this.client.updateCanExecute({
-      canExecute,
-    })
-
-    if (!canExecute && response.isExecuting) {
-      // We want to wait until the server is not busy before we reply to the
-      // caller.
-      while (response.isExecuting) {
-        await new Promise((resolve) => setTimeout(resolve, 100))
-        response = await this.client.updateCanExecute({
-          canExecute,
-        })
-      }
-    }
-    console.log('[lsp] kcl: updated canExecute', canExecute, response)
-    return response
-  }
-
   async requestFormatting() {
     if (
       !this.client.ready ||
@@ -267,14 +276,14 @@ export class LanguageServerPlugin implements PluginValue {
 
     this.client.textDocumentDidChange({
       textDocument: {
-        uri: this.documentUri,
+        uri: this.getDocUri(),
         version: this.documentVersion++,
       },
-      contentChanges: [{ text: this.view.state.doc.toString() }],
+      contentChanges: [{ text: this.getDocText() }],
     })
 
     const result = await this.client.textDocumentFormatting({
-      textDocument: { uri: this.documentUri },
+      textDocument: { uri: this.getDocUri() },
       options: {
         tabSize: 2,
         insertSpaces: true,
@@ -282,21 +291,17 @@ export class LanguageServerPlugin implements PluginValue {
       },
     })
 
-    if (!result) return null
+    if (!result || !result.length) return null
 
-    for (let i = 0; i < result.length; i++) {
-      const { range, newText } = result[i]
     this.view.dispatch({
-        changes: [
-          {
+      changes: result.map(({ range, newText }) => ({
         from: posToOffset(this.view.state.doc, range.start)!,
         to: posToOffset(this.view.state.doc, range.end)!,
         insert: newText,
-          },
-        ],
+      })),
+      annotations: lspFormatCodeEvent,
     })
   }
-  }
 
   async requestCompletion(
     context: CompletionContext,
@@ -320,7 +325,7 @@ export class LanguageServerPlugin implements PluginValue {
     })
 
     const result = await this.client.textDocumentCompletion({
-      textDocument: { uri: this.documentUri },
+      textDocument: { uri: this.getDocUri() },
       position: { line, character },
       context: {
         triggerKind,
@@ -360,7 +365,7 @@ export class LanguageServerPlugin implements PluginValue {
         }
         if (documentation) {
           completion.info = () => {
-            const htmlString = formatContents(documentation)
+            const htmlString = formatMarkdownContents(documentation)
             const htmlNode = document.createElement('div')
             htmlNode.style.display = 'contents'
             htmlNode.innerHTML = htmlString
@@ -379,16 +384,107 @@ export class LanguageServerPlugin implements PluginValue {
     return completeFromList(options)(context)
   }
 
+  parseSemanticTokens(view: EditorView, data: number[]) {
+    // decode the lsp semantic token types
+    const tokens = []
+    for (let i = 0; i < data.length; i += 5) {
+      tokens.push({
+        deltaLine: data[i],
+        startChar: data[i + 1],
+        length: data[i + 2],
+        tokenType: data[i + 3],
+        modifiers: data[i + 4],
+      })
+    }
+
+    // convert the tokens into an array of {to, from, type} objects
+    const tokenTypes =
+      this.client.getServerCapabilities().semanticTokensProvider!.legend
+        .tokenTypes
+    const tokenModifiers =
+      this.client.getServerCapabilities().semanticTokensProvider!.legend
+        .tokenModifiers
+    const tokenRanges: any = []
+    let curLine = 0
+    let prevStart = 0
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i]
+      const tokenType = tokenTypes[token.tokenType]
+      // get a list of modifiers
+      const tokenModifier = []
+      for (let j = 0; j < tokenModifiers.length; j++) {
+        if (token.modifiers & (1 << j)) {
+          tokenModifier.push(tokenModifiers[j])
+        }
+      }
+
+      if (token.deltaLine !== 0) prevStart = 0
+
+      const tokenRange = {
+        from: posToOffset(view.state.doc, {
+          line: curLine + token.deltaLine,
+          character: prevStart + token.startChar,
+        })!,
+        to: posToOffset(view.state.doc, {
+          line: curLine + token.deltaLine,
+          character: prevStart + token.startChar + token.length,
+        })!,
+        type: tokenType,
+        modifiers: tokenModifier,
+      }
+      tokenRanges.push(tokenRange)
+
+      curLine += token.deltaLine
+      prevStart += token.startChar
+    }
+
+    // sort by from
+    tokenRanges.sort((a: any, b: any) => a.from - b.from)
+    return tokenRanges
+  }
+
+  async requestSemanticTokens() {
+    if (
+      !this.client.ready ||
+      !this.client.getServerCapabilities().semanticTokensProvider
+    ) {
+      return null
+    }
+
+    const result = await this.client.textDocumentSemanticTokensFull({
+      textDocument: { uri: this.getDocUri() },
+    })
+    if (!result) return null
+
+    const { data } = result
+    this.previousSemanticTokens = this.parseSemanticTokens(this.view, data)
+
+    const effects: StateEffect<SemanticToken | Extension>[] =
+      this.previousSemanticTokens.map((tokenRange: any) =>
+        addToken.of(tokenRange)
+      )
+
+    this.view.dispatch({
+      effects,
+
+      annotations: [lspSemanticTokensEvent, Transaction.addToHistory.of(false)],
+    })
+  }
+
   async processNotification(notification: LSP.NotificationMessage) {
     try {
       switch (notification.method) {
         case 'textDocument/publishDiagnostics':
+          if (notification === undefined) break
+          if (notification.params === undefined) break
+          if (!notification.params) break
+          const params = notification.params as PublishDiagnosticsParams
+          if (!params) break
           console.log(
             '[lsp] [window/publishDiagnostics]',
             this.client.getName(),
-            notification.params
+            params
           )
-          const params = notification.params as PublishDiagnosticsParams
           // this is sometimes slower than our actual typing.
           this.processDiagnostics(params)
           break
@@ -406,30 +502,17 @@ export class LanguageServerPlugin implements PluginValue {
             notification.params
           )
           break
-        case 'kcl/astUpdated':
-          // The server has updated the AST, we should update elsewhere.
-          let updatedAst = notification.params as Program
-          console.log('[lsp]: Updated AST', updatedAst)
-
-          // Update the folding ranges, since the AST has changed.
-          // This is a hack since codemirror does not support async foldService.
-          // When they do we can delete this.
-          this.updateFoldingRanges()
-          break
-        case 'kcl/memoryUpdated':
-          // The server has updated the memory, we should update elsewhere.
-          let updatedMemory = notification.params as ProgramMemory
-          console.log('[lsp]: Updated Memory', updatedMemory)
-          kclManager.programMemory = updatedMemory
-          break
       }
     } catch (error) {
       console.error(error)
     }
+
+    // Send it to the plugin
+    this.processLspNotification?.(this, notification)
   }
 
   processDiagnostics(params: PublishDiagnosticsParams) {
-    if (params.uri !== this.documentUri) return
+    if (params.uri !== this.getDocUri()) return
 
     const diagnostics = params.diagnostics
       .map(({ range, message, severity }) => ({
@@ -459,18 +542,26 @@ export class LanguageServerPlugin implements PluginValue {
         return 0
       })
 
-    this.view.dispatch(setDiagnostics(this.view.state, diagnostics))
+    /* This creates infighting with the others.
+     * TODO: turn it back on when we have a better way to handle it.
+     * this.view.dispatch({
+      effects: [setDiagnosticsEffect.of(diagnostics)],
+      annotations: [lspDiagnosticsEvent, Transaction.addToHistory.of(false)],
+    })*/
   }
 }
 
-function formatContents(
-  contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[]
-): string {
-  if (Array.isArray(contents)) {
-    return contents.map((c) => formatContents(c) + '\n\n').join('')
-  } else if (typeof contents === 'string') {
-    return Marked.parse(contents)
-  } else {
-    return Marked.parse(contents.value)
+export class LanguageServerPluginSpec
+  implements PluginSpec<LanguageServerPlugin>
+{
+  provide(plugin: ViewPlugin<LanguageServerPlugin>): Extension {
+    return [
+      lspAutocompleteExt(plugin),
+      lspFormatExt(plugin),
+      lspHoverExt(plugin),
+      lspIndentExt(),
+      lspLintExt(),
+      lspSemanticTokensExt(),
+    ]
   }
 }

packages/codemirror-lsp-client/src/plugin/semantic-tokens.ts

@@ -0,0 +1,175 @@
+import { highlightingFor } from '@codemirror/language'
+import { StateEffect, StateField, Extension } from '@codemirror/state'
+import { EditorView, Decoration, DecorationSet } from '@codemirror/view'
+
+import { Tag, tags } from '@lezer/highlight'
+
+import { lspSemanticTokensEvent } from './lsp'
+
+export interface SemanticToken {
+  from: number
+  to: number
+  type: string
+  modifiers: string[]
+}
+
+export const addToken = StateEffect.define<SemanticToken>({
+  map: (token: SemanticToken, change) => ({
+    ...token,
+    from: change.mapPos(token.from),
+    to: change.mapPos(token.to),
+  }),
+})
+
+export default function lspSemanticTokenExt(): Extension {
+  return StateField.define<DecorationSet>({
+    create() {
+      return Decoration.none
+    },
+    update(highlights, tr) {
+      // Nothing can come before this line, this is very important!
+      // It makes sure the highlights are updated correctly for the changes.
+      highlights = highlights.map(tr.changes)
+
+      const isSemanticTokensEvent = tr.annotation(lspSemanticTokensEvent.type)
+      if (!isSemanticTokensEvent) {
+        return highlights
+      }
+
+      // Check if any of the changes are addToken
+      const hasAddToken = tr.effects.some((e) => e.is(addToken))
+      if (hasAddToken) {
+        highlights = highlights.update({
+          filter: (from, to) => false,
+        })
+      }
+
+      for (const e of tr.effects)
+        if (e.is(addToken)) {
+          const tag = getTag(e.value)
+          const className = tag
+            ? highlightingFor(tr.startState, [tag])
+            : undefined
+
+          if (e.value.from < e.value.to && tag) {
+            if (className) {
+              highlights = highlights.update({
+                add: [
+                  Decoration.mark({ class: className }).range(
+                    e.value.from,
+                    e.value.to
+                  ),
+                ],
+              })
+            }
+          }
+        }
+      return highlights
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  })
+}
+
+export function getTag(semanticToken: SemanticToken): Tag | null {
+  let tokenType = convertSemanticTokenTypeToCodeMirrorTag(semanticToken.type)
+
+  if (
+    semanticToken.modifiers === undefined ||
+    semanticToken.modifiers === null ||
+    semanticToken.modifiers.length === 0
+  ) {
+    return tokenType
+  }
+
+  for (let modifier of semanticToken.modifiers) {
+    tokenType = convertSemanticTokenToCodeMirrorTag(
+      '',
+      modifier,
+      tokenType || undefined
+    )
+  }
+
+  return tokenType
+}
+
+export function getTagName(semanticToken: SemanticToken): string {
+  let tokenType = semanticToken.type
+
+  if (
+    semanticToken.modifiers === undefined ||
+    semanticToken.modifiers === null ||
+    semanticToken.modifiers.length === 0
+  ) {
+    return tokenType
+  }
+
+  for (let modifier of semanticToken.modifiers) {
+    tokenType = `${tokenType}.${modifier}`
+  }
+
+  return tokenType
+}
+
+function convertSemanticTokenTypeToCodeMirrorTag(
+  tokenType: string
+): Tag | null {
+  switch (tokenType) {
+    case 'keyword':
+      return tags.keyword
+    case 'variable':
+      return tags.variableName
+    case 'string':
+      return tags.string
+    case 'number':
+      return tags.number
+    case 'comment':
+      return tags.comment
+    case 'operator':
+      return tags.operator
+    case 'function':
+      return tags.function(tags.name)
+    case 'type':
+      return tags.typeName
+    case 'property':
+      return tags.propertyName
+    case 'parameter':
+      return tags.local(tags.name)
+    default:
+      console.error('Unknown token type:', tokenType)
+      return null
+  }
+}
+
+function convertSemanticTokenToCodeMirrorTag(
+  tokenType: string,
+  tokenModifier: string,
+  givenTag?: Tag
+): Tag | null {
+  let tag = givenTag
+    ? givenTag
+    : convertSemanticTokenTypeToCodeMirrorTag(tokenType)
+
+  if (!tag) {
+    return null
+  }
+
+  if (tokenModifier) {
+    switch (tokenModifier) {
+      case 'definition':
+        return tags.definition(tag)
+      case 'declaration':
+        return tags.definition(tag)
+      case 'readonly':
+        return tags.constant(tag)
+      case 'static':
+        return tags.constant(tag)
+      case 'defaultLibrary':
+        return tags.standard(tag)
+      default:
+        console.error('Unknown token modifier:', tokenModifier)
+        return tag
+    }
+  }
+
+  return tag
+}

packages/codemirror-lsp-client/src/plugin/util.ts

@@ -0,0 +1,55 @@
+import { Text } from '@codemirror/state'
+import { Marked } from '@ts-stack/markdown'
+
+import type * as LSP from 'vscode-languageserver-protocol'
+
+// takes a function and executes it after the wait time, if the function is called again before the wait time is up, the timer is reset
+export function deferExecution<T>(func: (args: T) => any, wait: number) {
+  let timeout: ReturnType<typeof setTimeout> | null
+  let latestArgs: T
+
+  function later() {
+    timeout = null
+    func(latestArgs)
+  }
+
+  function deferred(args: T) {
+    latestArgs = args
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(later, wait)
+  }
+
+  return deferred
+}
+
+export function posToOffset(
+  doc: Text,
+  pos: { line: number; character: number }
+): number | undefined {
+  if (pos.line >= doc.lines) return
+  const offset = doc.line(pos.line + 1).from + pos.character
+  if (offset > doc.length) return
+  return offset
+}
+
+export function offsetToPos(doc: Text, offset: number) {
+  const line = doc.lineAt(offset)
+  return {
+    line: line.number - 1,
+    character: offset - line.from,
+  }
+}
+
+export function formatMarkdownContents(
+  contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[]
+): string {
+  if (Array.isArray(contents)) {
+    return contents.map((c) => formatMarkdownContents(c) + '\n\n').join('')
+  } else if (typeof contents === 'string') {
+    return Marked.parse(contents)
+  } else {
+    return Marked.parse(contents.value)
+  }
+}

packages/codemirror-lsp-client/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": ["src", "./*.ts"],
+  "exclude": ["node_modules"]
+}

packages/codemirror-lsp-client/yarn.lock

@@ -0,0 +1,231 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@codemirror/autocomplete@^6.16.3":
+  version "6.16.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.16.3.tgz#04d5a4e4e44ccae1ba525d47db53a5479bf46338"
+  integrity sha512-Vl/tIeRVVUCRDuOG48lttBasNQu8usGgXQawBXI7WJAiUDSFOfzflmEsZFZo48mAvAaa4FZ/4/yLLxFtdJaKYA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.10.2":
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.10.2.tgz#4056dc219619627ffe995832eeb09cea6060be61"
+  integrity sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.23.0"
+    "@lezer/common" "^1.1.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.4.1":
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
+  integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
+
+"@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0":
+  version "6.28.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.28.2.tgz#026d5d2bd315aa015c1a1573b6358eeba7acd004"
+  integrity sha512-A3DmyVfjgPsGIjiJqM/zvODUAPQdQl3ci0ghehYNnbt5x+o76xq+dL5+mMBuysDXnI3kapgOkoeJ0sbtL/3qPw==
+  dependencies:
+    "@codemirror/state" "^6.4.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
+"@cspotcode/source-map-support@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
+  dependencies:
+    "@jridgewell/trace-mapping" "0.3.9"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@lezer/common@^1.0.0", "@lezer/common@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
+  integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.0.tgz#e5898c3644208b4b589084089dceeea2966f7780"
+  integrity sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/lr@^1.0.0":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.1.tgz#fe25f051880a754e820b28148d90aa2a96b8bdd2"
+  integrity sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@ts-stack/markdown@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@ts-stack/markdown/-/markdown-1.5.0.tgz#5dc298a20dc3dc040143c5a5948201eb6bf5419d"
+  integrity sha512-ntVX2Kmb2jyTdH94plJohokvDVPvp6CwXHqsa9NVZTK8cOmHDCYNW0j6thIadUVRTStJhxhfdeovLd0owqDxLw==
+  dependencies:
+    tslib "^2.3.0"
+
+"@tsconfig/node10@^1.0.7":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.11.tgz#6ee46400685f130e278128c7b38b7e031ff5b2f2"
+  integrity sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==
+
+"@tsconfig/node12@^1.0.7":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
+  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
+
+"@tsconfig/node14@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
+  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
+
+"@tsconfig/node16@^1.0.2":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
+  integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
+
+"@types/node@^20.14.9":
+  version "20.14.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.9.tgz#12e8e765ab27f8c421a1820c99f5f313a933b420"
+  integrity sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==
+  dependencies:
+    undici-types "~5.26.4"
+
+acorn-walk@^8.1.1:
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.3.tgz#9caeac29eefaa0c41e3d4c65137de4d6f34df43e"
+  integrity sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==
+  dependencies:
+    acorn "^8.11.0"
+
+acorn@^8.11.0, acorn@^8.4.1:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.0.tgz#1627bfa2e058148036133b8d9b51a700663c294c"
+  integrity sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==
+
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
+json-rpc-2.0@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/json-rpc-2.0/-/json-rpc-2.0-1.7.0.tgz#840deb0bc168463e12bceb462f7fe225e793fc17"
+  integrity sha512-asnLgC1qD5ytP+fvBP8uL0rvj+l8P6iYICbzZ8dVxCpESffVjzA7KkYkbKCIbavs7cllwH1ZUaNtJwphdeRqpg==
+
+make-error@^1.1.1:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
+style-mod@^4.0.0, style-mod@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
+  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
+
+ts-node@^10.9.2:
+  version "10.9.2"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
+  integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
+  dependencies:
+    "@cspotcode/source-map-support" "^0.8.0"
+    "@tsconfig/node10" "^1.0.7"
+    "@tsconfig/node12" "^1.0.7"
+    "@tsconfig/node14" "^1.0.0"
+    "@tsconfig/node16" "^1.0.2"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.1"
+    yn "3.1.1"
+
+tslib@^2.3.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
+typescript@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507"
+  integrity sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
+
+vscode-jsonrpc@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz#f43dfa35fb51e763d17cd94dcca0c9458f35abf9"
+  integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==
+
+vscode-languageserver-protocol@^3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz#864a8b8f390835572f4e13bd9f8313d0e3ac4bea"
+  integrity sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==
+  dependencies:
+    vscode-jsonrpc "8.2.0"
+    vscode-languageserver-types "3.17.5"
+
+vscode-languageserver-types@3.17.5:
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz#3273676f0cf2eab40b3f44d085acbb7f08a39d8a"
+  integrity sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==
+
+vscode-uri@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
+
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==

playwright.config.ts

@@ -12,13 +12,13 @@ import { defineConfig, devices } from '@playwright/test'
 export default defineConfig({
   testDir: './e2e/playwright',
   /* Run tests in files in parallel */
-  fullyParallel: false,
+  fullyParallel: true,
   /* 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,
+  /* Do not retry */
+  retries: process.env.CI ? 0 : 0,
   /* Different amount of parallelism on CI and local. */
-  workers: process.env.CI ? 1 : 4,
+  workers: process.env.CI ? 4 : 4,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    '@csstools/postcss-oklab-function': { preserve: true },
     autoprefixer: {},
   },
 }

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ rust-version = "1.70"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-beta.13", features = [] }
+tauri-build = { version = "2.0.0-beta.18", features = [] }
 
 [dependencies]
 anyhow = "1"
@@ -20,18 +20,18 @@ 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-plugin-cli = { version = "2.0.0-beta.3" }
-tauri-plugin-deep-link = { version = "2.0.0-beta.3" }
+tauri = { version = "2.0.0-beta.23", features = [ "devtools", "unstable"] }
+tauri-plugin-cli = { version = "2.0.0-beta.7" }
+tauri-plugin-deep-link = { version = "2.0.0-beta.8" }
 tauri-plugin-dialog = { version = "2.0.0-beta.6" }
-tauri-plugin-fs = { version = "2.0.0-beta.6" }
-tauri-plugin-http = { version = "2.0.0-beta.6" }
-tauri-plugin-log = { version = "2.0.0-beta.4" }
-tauri-plugin-os = { version = "2.0.0-beta.2" }
-tauri-plugin-persisted-scope = { version = "2.0.0-beta.7" }
-tauri-plugin-process = { version = "2.0.0-beta.2" }
-tauri-plugin-shell = { version = "2.0.0-beta.2" }
-tauri-plugin-updater = { version = "2.0.0-beta.4" }
+tauri-plugin-fs = { version = "2.0.0-beta.10" }
+tauri-plugin-http = { version = "2.0.0-beta.11" }
+tauri-plugin-log = { version = "2.0.0-beta.7" }
+tauri-plugin-os = { version = "2.0.0-beta.7" }
+tauri-plugin-persisted-scope = { version = "2.0.0-beta.10" }
+tauri-plugin-process = { version = "2.0.0-beta.7" }
+tauri-plugin-shell = { version = "2.0.0-beta.8" }
+tauri-plugin-updater = { version = "2.0.0-beta.9" }
 tokio = { version = "1.37.0", features = ["time", "fs", "process"] }
 toml = "0.8.2"
 url = "2.5.0"

src-tauri/tauri.conf.json

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

src/App.tsx

@@ -1,6 +1,5 @@
-import { MouseEventHandler, useEffect, useRef } from 'react'
+import { MouseEventHandler, useEffect, useMemo, useRef } from 'react'
 import { uuidv4 } from 'lib/utils'
-import { useStore } from './useStore'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import { EngineCommand } from './lang/std/engineConnection'
@@ -25,6 +24,7 @@ import { LowerRightControls } from 'components/LowerRightControls'
 import ModalContainer from 'react-modal-promise'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import Gizmo from 'components/Gizmo'
+import { CoreDumpManager } from 'lib/coredump'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -43,19 +43,16 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
-  const { buttonDownInStream, didDragInStream, streamDimensions, setHtmlRef } =
-    useStore((s) => ({
-      buttonDownInStream: s.buttonDownInStream,
-      didDragInStream: s.didDragInStream,
-      streamDimensions: s.streamDimensions,
-      setHtmlRef: s.setHtmlRef,
-    }))
+  const { context } = useModelingContext()
 
-  useEffect(() => {
-    setHtmlRef(ref)
-  }, [ref])
+  const { auth, settings } = useSettingsAuthContext()
+  const token = auth?.context?.token
+
+  const coreDumpManager = useMemo(
+    () => new CoreDumpManager(engineCommandManager, token),
+    []
+  )
 
-  const { settings } = useSettingsAuthContext()
   const {
     app: { onboardingStatus },
   } = settings.context
@@ -76,7 +73,7 @@ export function App() {
     (p) => p === onboardingStatus.current
   )
     ? 'opacity-20'
-    : didDragInStream
+    : context.store?.didDragInStream
     ? 'opacity-40'
     : ''
 
@@ -94,11 +91,11 @@ export function App() {
       clientX: e.clientX,
       clientY: e.clientY,
       el: e.currentTarget,
-      ...streamDimensions,
+      ...context.store?.streamDimensions,
     })
 
     const newCmdId = uuidv4()
-    if (buttonDownInStream === undefined) {
+    if (context.store?.buttonDownInStream === undefined) {
       debounceSocketSend({
         type: 'modeling_cmd_req',
         cmd: {
@@ -120,7 +117,7 @@ export function App() {
         className={
           'transition-opacity transition-duration-75 ' +
           paneOpacity +
-          (buttonDownInStream ? ' pointer-events-none' : '')
+          (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
         }
         project={{ project, file }}
         enableMenu={true}
@@ -129,7 +126,7 @@ export function App() {
       <ModelingSidebar paneOpacity={paneOpacity} />
       <Stream />
       {/* <CamToggle /> */}
-      <LowerRightControls>
+      <LowerRightControls coreDumpManager={coreDumpManager}>
         <Gizmo />
       </LowerRightControls>
     </div>

src/AppState.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, ReactNode } from 'react'
+
+/*
+
+This is for a very small handful of global state we need that doesn't fit into
+any of the Xstate machines.
+Please do not fill this up with junk.
+
+*/
+
+interface AppState {
+  isStreamReady: boolean
+  setAppState: (newAppState: Partial<AppState>) => void
+}
+
+const AppStateContext = createContext<AppState>({
+  isStreamReady: false,
+  setAppState: () => {},
+})
+
+export const useAppState = () => useContext(AppStateContext)
+
+export const AppStateProvider = ({ children }: { children: ReactNode }) => {
+  const [appState, _setAppState] = useState<AppState>({
+    isStreamReady: false,
+    setAppState: () => {},
+  })
+  const setAppState = (newAppState: Partial<AppState>) =>
+    _setAppState({ ...appState, ...newAppState })
+
+  return (
+    <AppStateContext.Provider
+      value={{
+        isStreamReady: appState.isStreamReady,
+        setAppState,
+      }}
+    >
+      {children}
+    </AppStateContext.Provider>
+  )
+}

src/Router.tsx

@@ -33,6 +33,14 @@ import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
 import { BROWSER_PROJECT_NAME } from 'lib/constants'
 import { getState, setState } from 'lib/tauri'
+import { CoreDumpManager } from 'lib/coredump'
+import { engineCommandManager } from 'lib/singletons'
+import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import useHotkeyWrapper from 'lib/hotkeyWrapper'
+import toast from 'react-hot-toast'
+import { coreDump } from 'lang/wasm'
+import { useMemo } from 'react'
+import { AppStateProvider } from 'AppState'
 
 const router = createBrowserRouter([
   {
@@ -45,7 +53,9 @@ const router = createBrowserRouter([
         <SettingsAuthProvider>
           <LspProvider>
             <KclContextProvider>
+              <AppStateProvider>
                 <Outlet />
+              </AppStateProvider>
             </KclContextProvider>
           </LspProvider>
         </SettingsAuthProvider>
@@ -87,6 +97,7 @@ const router = createBrowserRouter([
           <Auth>
             <FileMachineProvider>
               <ModelingMachineProvider>
+                <CoreDump />
                 <Outlet />
                 <App />
                 <CommandBar />
@@ -165,3 +176,30 @@ export const Router = () => {
     </NetworkContext.Provider>
   )
 }
+
+function CoreDump() {
+  const { auth } = useSettingsAuthContext()
+  const token = auth?.context?.token
+  const coreDumpManager = useMemo(
+    () => new CoreDumpManager(engineCommandManager, token),
+    []
+  )
+  useHotkeyWrapper(['meta + shift + .'], () => {
+    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,
+        },
+      }
+    )
+  })
+  return null
+}

src/Toolbar.tsx

@@ -8,10 +8,14 @@ import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ActionButton } from 'components/ActionButton'
 import { isSingleCursorInPipe } from 'lang/queryAst'
 import { useKclContext } from 'lang/KclProvider'
-import { useStore } from 'useStore'
 import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from 'components/Tooltip'
+import { useAppState } from 'AppState'
+import {
+  canRectangleTool,
+  isEditingExistingSketch,
+} from 'machines/modelingMachine'
 
 export function Toolbar({
   className = '',
@@ -38,38 +42,56 @@ export function Toolbar({
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const { overallState } = useNetworkContext()
   const { isExecuting } = useKclContext()
-  const { isStreamReady } = useStore((s) => ({
-    isStreamReady: s.isStreamReady,
-  }))
+  const { isStreamReady } = useAppState()
+
   const disableAllButtons =
     (overallState !== NetworkHealthState.Ok &&
       overallState !== NetworkHealthState.Weak) ||
     isExecuting ||
     !isStreamReady
 
+  const disableLineButton =
+    state.matches('Sketch.Rectangle tool.Awaiting second corner') ||
+    disableAllButtons
   useHotkeys(
     'l',
     () =>
       state.matches('Sketch.Line tool')
         ? send('CancelSketch')
-        : send('Equip Line tool'),
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+        : send({
+            type: 'change tool',
+            data: 'line',
+          }),
+    { enabled: !disableLineButton, scopes: ['sketch'] }
   )
+  const disableTangentialArc =
+    (!isEditingExistingSketch(context) &&
+      !state.matches('Sketch.Tangential arc to')) ||
+    disableAllButtons
   useHotkeys(
     'a',
     () =>
       state.matches('Sketch.Tangential arc to')
         ? send('CancelSketch')
-        : send('Equip tangential arc to'),
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+        : send({
+            type: 'change tool',
+            data: 'tangentialArc',
+          }),
+    { enabled: !disableTangentialArc, scopes: ['sketch'] }
   )
+  const disableRectangle =
+    (!canRectangleTool(context) && !state.matches('Sketch.Rectangle tool')) ||
+    disableAllButtons
   useHotkeys(
     'r',
     () =>
       state.matches('Sketch.Rectangle tool')
         ? send('CancelSketch')
-        : send('Equip rectangle tool'),
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
+        : send({
+            type: 'change tool',
+            data: 'rectangle',
+          }),
+    { enabled: !disableRectangle, scopes: ['sketch'] }
   )
   useHotkeys(
     's',
@@ -82,7 +104,7 @@ export function Toolbar({
   useHotkeys(
     'esc',
     () =>
-      state.matches('Sketch.SketchIdle')
+      ['Sketch no face', 'Sketch.SketchIdle'].some(state.matches)
         ? send('Cancel')
         : send('CancelSketch'),
     { enabled: !disableAllButtons, scopes: ['sketch'] }
@@ -225,6 +247,11 @@ export function Toolbar({
             </ActionButton>
           </li>
         )}
+        {state.matches('Sketch no face') && (
+          <li className="contents">
+            <div className="mx-2 text-sm">click plane or face to sketch on</div>
+          </li>
+        )}
         {state.matches('Sketch') && !state.matches('idle') && (
           <>
             <li className="contents" key="line-button">
@@ -234,7 +261,10 @@ export function Toolbar({
                 onClick={() =>
                   state?.matches('Sketch.Line tool')
                     ? send('CancelSketch')
-                    : send('Equip Line tool')
+                    : send({
+                        type: 'change tool',
+                        data: 'line',
+                      })
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
                 iconStart={{
@@ -242,7 +272,7 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={disableAllButtons}
+                disabled={disableLineButton}
               >
                 Line
                 <Tooltip
@@ -261,7 +291,10 @@ export function Toolbar({
                 onClick={() =>
                   state.matches('Sketch.Tangential arc to')
                     ? send('CancelSketch')
-                    : send('Equip tangential arc to')
+                    : send({
+                        type: 'change tool',
+                        data: 'tangentialArc',
+                      })
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
                 iconStart={{
@@ -269,11 +302,7 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={
-                  (!state.can('Equip tangential arc to') &&
-                    !state.matches('Sketch.Tangential arc to')) ||
-                  disableAllButtons
-                }
+                disabled={disableTangentialArc}
               >
                 Tangential Arc
                 <Tooltip
@@ -292,7 +321,10 @@ export function Toolbar({
                 onClick={() =>
                   state.matches('Sketch.Rectangle tool')
                     ? send('CancelSketch')
-                    : send('Equip rectangle tool')
+                    : send({
+                        type: 'change tool',
+                        data: 'rectangle',
+                      })
                 }
                 aria-pressed={state.matches('Sketch.Rectangle tool')}
                 iconStart={{
@@ -300,13 +332,9 @@ export function Toolbar({
                   iconClassName,
                   bgClassName,
                 }}
-                disabled={
-                  (!state.can('Equip rectangle tool') &&
-                    !state.matches('Sketch.Rectangle tool')) ||
-                  disableAllButtons
-                }
+                disabled={disableRectangle}
                 title={
-                  state.can('Equip rectangle tool')
+                  canRectangleTool(context)
                     ? 'Rectangle'
                     : 'Can only be used when a sketch is empty currently'
                 }

src/clientSideScene/CameraControls.ts

@@ -74,6 +74,9 @@ export class CameraControls {
   enableRotate = true
   enablePan = true
   enableZoom = true
+  zoomDataFromLastFrame?: number = undefined
+  // holds coordinates, and interaction
+  moveDataFromLastFrame?: [number, number, string] = undefined
   lastPerspectiveFov: number = 45
   pendingZoom: number | null = null
   pendingRotation: Vector2 | null = null
@@ -101,16 +104,12 @@ export class CameraControls {
   get isPerspective() {
     return this.camera instanceof PerspectiveCamera
   }
-  private debounceTimer = 0
 
   handleStart = () => {
-    if (this.debounceTimer) clearTimeout(this.debounceTimer)
     this._isCamMovingCallback(true, false)
   }
   handleEnd = () => {
-    this.debounceTimer = setTimeout(() => {
     this._isCamMovingCallback(false, false)
-    }, 400) as any as number
   }
 
   setCam = (camProps: ReactCameraProperties) => {
@@ -230,6 +229,7 @@ export class CameraControls {
         camSettings.orientation.z,
         camSettings.orientation.w
       ).invert()
+
       this.camera.up.copy(new Vector3(0, 1, 0).applyQuaternion(quat))
       if (this.camera instanceof PerspectiveCamera && camSettings.ortho) {
         this.useOrthographicCamera()
@@ -258,6 +258,48 @@ export class CameraControls {
       }
       this.onCameraChange()
     }
+
+    // Our stream is never more than 60fps.
+    // We can get away with capping our "virtual fps" to 60 then.
+    const FPS_VIRTUAL = 60
+
+    const doZoom = () => {
+      if (this.zoomDataFromLastFrame !== undefined) {
+        this.handleStart()
+        this.engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd: {
+            type: 'default_camera_zoom',
+            magnitude:
+              (-1 * this.zoomDataFromLastFrame) / window.devicePixelRatio,
+          },
+          cmd_id: uuidv4(),
+        })
+        this.handleEnd()
+      }
+      this.zoomDataFromLastFrame = undefined
+    }
+    setInterval(doZoom, 1000 / FPS_VIRTUAL)
+
+    const doMove = () => {
+      if (this.moveDataFromLastFrame !== undefined) {
+        this.engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd: {
+            type: 'camera_drag_move',
+            interaction: this.moveDataFromLastFrame[2] as any,
+            window: {
+              x: this.moveDataFromLastFrame[0],
+              y: this.moveDataFromLastFrame[1],
+            },
+          },
+          cmd_id: uuidv4(),
+        })
+      }
+      this.moveDataFromLastFrame = undefined
+    }
+    setInterval(doMove, 1000 / FPS_VIRTUAL)
+
     setTimeout(() => {
       this.engineCommandManager.subscribeTo({
         event: 'camera_drag_end',
@@ -342,15 +384,7 @@ export class CameraControls {
       if (interaction === 'none') return
 
       if (this.syncDirection === 'engineToClient') {
-        this.throttledEngCmd({
-          type: 'modeling_cmd_req',
-          cmd: {
-            type: 'camera_drag_move',
-            interaction,
-            window: { x: event.clientX, y: event.clientY },
-          },
-          cmd_id: uuidv4(),
-        })
+        this.moveDataFromLastFrame = [event.clientX, event.clientY, interaction]
         return
       }
 
@@ -398,34 +432,19 @@ export class CameraControls {
   }
 
   onMouseWheel = (event: WheelEvent) => {
-    // Assume trackpad if the deltas are small and integers
-    this.handleStart()
-
     if (this.syncDirection === 'engineToClient') {
-      const interactions = this.interactionGuards.zoom.scrollCallback(
-        event as any
-      )
-      if (!interactions) {
-        this.handleEnd()
-        return
-      }
-      this.engineCommandManager.sendSceneCommand({
-        type: 'modeling_cmd_req',
-        cmd: {
-          type: 'default_camera_zoom',
-          magnitude: -event.deltaY * 0.4,
-        },
-        cmd_id: uuidv4(),
-      })
-      this.handleEnd()
+      this.zoomDataFromLastFrame = event.deltaY
       return
     }
 
-    // Else "clientToEngine" (Sketch Mode) or forceUpdate
+    // else "clientToEngine" (Sketch Mode) or forceUpdate
 
+    // We need to simulate similar behavior as when we send
+    // zoom commands to engine. This means dropping some zoom
+    // commands too.
     // From onMouseMove zoom handling which seems to be really smooth
-    this.pendingZoom = this.pendingZoom ? this.pendingZoom : 1
-    this.pendingZoom *= 1 + event.deltaY * 0.01
+    this.handleStart()
+    this.pendingZoom = 1 + (event.deltaY / window.devicePixelRatio) * 0.001
     this.handleEnd()
   }
 

src/clientSideScene/ClientSideSceneComp.tsx

@@ -37,7 +37,7 @@ import { Dialog, Popover, Transition } from '@headlessui/react'
 import { LineInputsType } from 'lang/std/sketchcombos'
 import toast from 'react-hot-toast'
 import { InstanceProps, create } from 'react-modal-promise'
-import { executeAst } from 'useStore'
+import { executeAst } from 'lang/langHelpers'
 import {
   deleteSegmentFromPipeExpression,
   makeRemoveSingleConstraintInput,

src/clientSideScene/sceneEntities.ts

@@ -58,7 +58,7 @@ import {
   editorManager,
 } from 'lib/singletons'
 import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
-import { executeAst, useStore } from 'useStore'
+import { executeAst } from 'lang/langHelpers'
 import {
   createArcGeometry,
   dashedStraight,
@@ -568,6 +568,7 @@ export class SceneEntities {
 
     if (shouldTearDown) await this.tearDownSketch({ removeAxis: false })
     sceneInfra.resetMouseListeners()
+
     const { truncatedAst, programMemoryOverride, sketchGroup } =
       await this.setupSketch({
         sketchPathToNode,
@@ -803,7 +804,7 @@ export class SceneEntities {
 
           // Update the primary AST and unequip the rectangle tool
           await kclManager.executeAstMock(_ast)
-          sceneInfra.modelingSend({ type: 'CancelSketch' })
+          sceneInfra.modelingSend({ type: 'Finish rectangle' })
 
           const { programMemory } = await executeAst({
             ast: _ast,
@@ -1443,11 +1444,10 @@ export class SceneEntities {
         selected.material.color = defaultPlaneColor(type)
       },
       onClick: async (args) => {
-        const { streamDimensions } = useStore.getState()
         const { entity_id } = await sendSelectEventToEngine(
           args?.mouseEvent,
           document.getElementById('video-stream') as HTMLVideoElement,
-          streamDimensions
+          sceneInfra._streamDimensions
         )
 
         let _entity_id = entity_id
@@ -1783,6 +1783,31 @@ function prepareTruncatedMemoryAndAst(
   const programMemoryOverride = programMemoryInit()
   if (err(programMemoryOverride)) return programMemoryOverride
 
+  // Grab all the TagDeclarators and TagIdentifiers from memory.
+  let start = _node.node.start
+  for (const key in programMemory.root) {
+    const value = programMemory.root[key]
+    if (!('__meta' in value)) {
+      continue
+    }
+    if (
+      value.__meta === undefined ||
+      value.__meta.length === 0 ||
+      value.__meta[0].sourceRange === undefined
+    ) {
+      continue
+    }
+
+    if (value.__meta[0].sourceRange[0] >= start) {
+      // We only want things before our start point.
+      continue
+    }
+
+    if (value.type === 'TagIdentifier') {
+      programMemoryOverride.root[key] = JSON.parse(JSON.stringify(value))
+    }
+  }
+
   for (let i = 0; i < bodyIndex; i++) {
     const node = _ast.body[i]
     if (node.type !== 'VariableDeclaration') {
@@ -1942,9 +1967,9 @@ export async function getSketchOrientationDetails(
  * @param  entityId - The ID of the entity for which orientation details are being fetched.
  * @returns A promise that resolves with the orientation details of the face.
  */
-async function getFaceDetails(
+export async function getFaceDetails(
   entityId: string
-): Promise<Models['FaceIsPlanar_type']> {
+): Promise<Models['GetSketchModePlane_type']> {
   // TODO mode engine connection to allow batching returns and batch the following
   await engineCommandManager.sendSceneCommand({
     type: 'modeling_cmd_req',
@@ -1957,8 +1982,7 @@ async function getFaceDetails(
       entity_id: entityId,
     },
   })
-  // TODO change typing to get_sketch_mode_plane once lib is updated
-  const faceInfo: Models['FaceIsPlanar_type'] = (
+  const faceInfo: Models['GetSketchModePlane_type'] = (
     await engineCommandManager.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd_id: uuidv4(),

src/clientSideScene/sceneInfra.ts

@@ -103,6 +103,10 @@ export class SceneInfra {
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
   _theme: Themes = Themes.System
+  _streamDimensions: { streamWidth: number; streamHeight: number } = {
+    streamWidth: 1280,
+    streamHeight: 720,
+  }
   extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
   onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}

src/components/AppHeader.tsx

@@ -26,6 +26,7 @@ export const AppHeader = ({
 
   return (
     <header
+      id="app-header"
       className={
         'w-full grid ' +
         styles.header +

src/components/AvailableVarsHelpers.tsx

@@ -10,7 +10,7 @@ import { findAllPreviousVariables, PrevVariable } from '../lang/queryAst'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useKclContext } from 'lang/KclProvider'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { executeAst } from 'useStore'
+import { executeAst } from 'lang/langHelpers'
 import { trap } from 'lib/trap'
 
 export const AvailableVars = ({

src/components/CommandBar/CommandBar.tsx

@@ -24,7 +24,7 @@ export const CommandBar = () => {
   }, [pathname])
 
   // Hook up keyboard shortcuts
-  useHotkeyWrapper(['mod+k', 'ctrl+c'], () => {
+  useHotkeyWrapper(['mod+k'], () => {
     if (commandBarState.context.commands.length === 0) return
     if (commandBarState.matches('Closed')) {
       commandBarSend({ type: 'Open' })

src/components/CommandBar/CommandBarKclInput.tsx

@@ -1,5 +1,6 @@
 import { Completion } from '@codemirror/autocomplete'
-import { EditorState, EditorView, useCodeMirror } from '@uiw/react-codemirror'
+import { EditorView, ViewUpdate } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
 import { CustomIcon } from 'components/CustomIcon'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -12,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
+import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 
 function CommandBarKclInput({
   arg,
@@ -63,9 +65,7 @@ function CommandBarKclInput({
 
   const { setContainer } = useCodeMirror({
     container: editorRef.current,
-    value,
-    indentWithTab: false,
-    basicSetup: false,
+    initialDocValue: value,
     autoFocus: true,
     selection: {
       anchor: 0,
@@ -74,7 +74,6 @@ function CommandBarKclInput({
           ? previouslySetValue.valueText.length
           : defaultValue.length,
     },
-    accessKey: 'command-bar',
     theme:
       settings.context.app.theme.current === 'system'
         ? getSystemTheme()
@@ -96,8 +95,12 @@ function CommandBarKclInput({
         }
         return tr
       }),
+      EditorView.updateListener.of((vu: ViewUpdate) => {
+        if (vu.docChanged) {
+          setValue(vu.state.doc.toString())
+        }
+      }),
     ],
-    onChange: (newValue) => setValue(newValue),
   })
 
   useEffect(() => {

src/components/FileTree.tsx

@@ -175,7 +175,11 @@ const FileTreeItem = ({
           codeManager.code
       )
       codeManager.writeToFile()
-      kclManager.executeCode(true, true)
+
+      kclManager.isFirstRender = true
+      kclManager.executeCode(true, true).then(() => {
+        kclManager.isFirstRender = false
+      })
     } else {
       // Let the lsp servers know we closed a file.
       onFileClose(currentFile?.path || null, project?.path || null)

src/components/LowerRightControls.tsx

@@ -6,8 +6,18 @@ import { NetworkHealthIndicator } from 'components/NetworkHealthIndicator'
 import { HelpMenu } from './HelpMenu'
 import { Link, useLocation } from 'react-router-dom'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
+import { coreDump } from 'lang/wasm'
+import toast from 'react-hot-toast'
+import { CoreDumpManager } from 'lib/coredump'
+import openWindow from 'lib/openWindow'
 
-export function LowerRightControls(props: React.PropsWithChildren) {
+export function LowerRightControls({
+  children,
+  coreDumpManager,
+}: {
+  children?: React.ReactNode
+  coreDumpManager?: CoreDumpManager
+}) {
   const location = useLocation()
   const filePath = useAbsoluteFilePath()
   const linkOverrideClassName =
@@ -15,9 +25,42 @@ export function LowerRightControls(props: React.PropsWithChildren) {
 
   const isPlayWright = window?.localStorage.getItem('playwright') === 'true'
 
+  async function reportbug(event: { preventDefault: () => void }) {
+    event?.preventDefault()
+
+    if (!coreDumpManager) {
+      // open default reporting option
+      openWindow('https://github.com/KittyCAD/modeling-app/issues/new/choose')
+    } else {
+      toast
+        .promise(
+          coreDump(coreDumpManager, true),
+          {
+            loading: 'Preparing bug report...',
+            success: 'Bug report opened in new window',
+            error: 'Unable to export a core dump. Using default reporting.',
+          },
+          {
+            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,
+            },
+          }
+        )
+        .catch((err: Error) => {
+          if (err) {
+            openWindow(
+              'https://github.com/KittyCAD/modeling-app/issues/new/choose'
+            )
+          }
+        })
+    }
+  }
+
   return (
     <section className="fixed bottom-2 right-2 flex flex-col items-end gap-3 pointer-events-none">
-      {props.children}
+      {children}
       <menu className="flex items-center justify-end gap-3 pointer-events-auto">
         <a
           href={`https://github.com/KittyCAD/modeling-app/releases/tag/v${APP_VERSION}`}
@@ -28,6 +71,7 @@ export function LowerRightControls(props: React.PropsWithChildren) {
           v{isPlayWright ? '11.22.33' : APP_VERSION}
         </a>
         <a
+          onClick={reportbug}
           href="https://github.com/KittyCAD/modeling-app/issues/new/choose"
           target="_blank"
           rel="noopener noreferrer"

src/components/LspProvider.tsx

@@ -1,18 +1,15 @@
-import { LanguageServerClient } from 'editor/plugins/lsp'
 import type * as LSP from 'vscode-languageserver-protocol'
-import React, {
-  createContext,
-  useMemo,
-  useEffect,
-  useContext,
-  useState,
-} from 'react'
-import { FromServer, IntoServer } from 'editor/plugins/lsp/codec'
-import Client from '../editor/plugins/lsp/client'
+import React, { createContext, useMemo, useContext, useState } from 'react'
+import {
+  LanguageServerClient,
+  FromServer,
+  IntoServer,
+  LspWorkerEventType,
+  LanguageServerPlugin,
+} from '@kittycad/codemirror-lsp-client'
 import { TEST, VITE_KC_API_BASE_URL } from 'env'
-import kclLanguage from 'editor/plugins/lsp/kcl/language'
+import KclLanguageSupport from 'editor/plugins/lsp/kcl/language'
 import { copilotPlugin } from 'editor/plugins/lsp/copilot'
-import { useStore } from 'useStore'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Extension } from '@codemirror/state'
 import { LanguageSupport } from '@codemirror/language'
@@ -21,16 +18,15 @@ import { paths } from 'lib/paths'
 import { FileEntry } from 'lib/types'
 import Worker from 'editor/plugins/lsp/worker.ts?worker'
 import {
-  LspWorkerEventType,
   KclWorkerOptions,
   CopilotWorkerOptions,
   LspWorker,
 } 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'
-import { err, trap } from 'lib/trap'
+import { err } from 'lib/trap'
+import { isTauri } from 'lib/isTauri'
+import { codeManager } from 'lib/singletons'
 
 function getWorkspaceFolders(): LSP.WorkspaceFolder[] {
   return []
@@ -70,21 +66,8 @@ type LspContext = {
 
 export const LspStateContext = createContext({} as LspContext)
 export const LspProvider = ({ children }: { children: React.ReactNode }) => {
-  const {
-    isKclLspServerReady,
-    isCopilotLspServerReady,
-    setIsKclLspServerReady,
-    setIsCopilotLspServerReady,
-    isStreamReady,
-  } = useStore((s) => ({
-    isKclLspServerReady: s.isKclLspServerReady,
-    isCopilotLspServerReady: s.isCopilotLspServerReady,
-    setIsKclLspServerReady: s.setIsKclLspServerReady,
-    setIsCopilotLspServerReady: s.setIsCopilotLspServerReady,
-    isStreamReady: s.isStreamReady,
-  }))
-  const [isLspReady, setIsLspReady] = useState(false)
-  const [isCopilotReady, setIsCopilotReady] = useState(false)
+  const [isKclLspReady, setIsKclLspReady] = useState(false)
+  const [isCopilotLspReady, setIsCopilotLspReady] = useState(false)
 
   const {
     auth,
@@ -96,8 +79,6 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   } = useSettingsAuthContext()
   const token = auth?.context.token
   const navigate = useNavigate()
-  const { overallState } = useNetworkContext()
-  const isNetworkOkay = overallState === NetworkHealthState.Ok
 
   // So this is a bit weird, we need to initialize the lsp server and client.
   // But the server happens async so we break this into two parts.
@@ -128,17 +109,34 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     const fromServer: FromServer | Error = FromServer.create()
     if (err(fromServer)) return { lspClient: null }
 
-    const client = new Client(fromServer, intoServer)
+    const lspClient = new LanguageServerClient({
+      name: LspWorker.Kcl,
+      fromServer,
+      intoServer,
+      initializedCallback: () => {
+        setIsKclLspReady(true)
+      },
+    })
 
-    setIsLspReady(true)
-
-    const lspClient = new LanguageServerClient({ client, name: LspWorker.Kcl })
     return { lspClient }
   }, [
     // We need a token for authenticating the server.
     token,
   ])
 
+  useMemo(() => {
+    if (!isTauri() && isKclLspReady && kclLspClient && codeManager.code) {
+      kclLspClient.textDocumentDidOpen({
+        textDocument: {
+          uri: `file:///${PROJECT_ENTRYPOINT}`,
+          languageId: 'kcl',
+          version: 1,
+          text: codeManager.code,
+        },
+      })
+    }
+  }, [kclLspClient, isKclLspReady])
+
   // Here we initialize the plugin which will start the client.
   // Now that we have multi-file support the name of the file is a dep of
   // this use memo, as well as the directory structure, which I think is
@@ -146,39 +144,38 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   // We do not want to restart the server, its just wasteful.
   const kclLSP = useMemo(() => {
     let plugin = null
-    if (isKclLspServerReady && !TEST && kclLspClient) {
+    if (isKclLspReady && !TEST && kclLspClient) {
       // Set up the lsp plugin.
-      const lsp = kclLanguage({
+      const lsp = new KclLanguageSupport({
         documentUri: `file:///${PROJECT_ENTRYPOINT}`,
         workspaceFolders: getWorkspaceFolders(),
         client: kclLspClient,
+        processLspNotification: (
+          plugin: LanguageServerPlugin,
+          notification: LSP.NotificationMessage
+        ) => {
+          try {
+            switch (notification.method) {
+              case 'kcl/astUpdated':
+                // Update the folding ranges, since the AST has changed.
+                // This is a hack since codemirror does not support async foldService.
+                // When they do we can delete this.
+                plugin.updateFoldingRanges()
+                plugin.requestSemanticTokens()
+                break
+              case 'kcl/memoryUpdated':
+                break
+            }
+          } catch (error) {
+            console.error(error)
+          }
+        },
       })
 
       plugin = lsp
     }
     return plugin
-  }, [kclLspClient, isKclLspServerReady])
-
-  // Re-execute the scene when the units change.
-  useEffect(() => {
-    if (kclLspClient) {
-      let plugins = kclLspClient.plugins
-      for (let plugin of plugins) {
-        if (plugin.updateUnits && isStreamReady && isNetworkOkay) {
-          plugin.updateUnits(defaultUnit.current)
-        }
-      }
-    }
-  }, [
-    kclLspClient,
-    defaultUnit.current,
-
-    // We want to re-execute the scene if the network comes back online.
-    // The lsp server will only re-execute if there were previous errors or
-    // changes, so it's fine to send it thru here.
-    isStreamReady,
-    isNetworkOkay,
-  ])
+  }, [kclLspClient, isKclLspReady])
 
   const { lspClient: copilotLspClient } = useMemo(() => {
     if (!token || token === '' || TEST) {
@@ -205,13 +202,13 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     const fromServer: FromServer | Error = FromServer.create()
     if (err(fromServer)) return { lspClient: null }
 
-    const client = new Client(fromServer, intoServer)
-
-    setIsCopilotReady(true)
-
     const lspClient = new LanguageServerClient({
-      client,
       name: LspWorker.Copilot,
+      fromServer,
+      intoServer,
+      initializedCallback: () => {
+        setIsCopilotLspReady(true)
+      },
     })
     return { lspClient }
   }, [token])
@@ -223,7 +220,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
   // We do not want to restart the server, its just wasteful.
   const copilotLSP = useMemo(() => {
     let plugin = null
-    if (isCopilotLspServerReady && !TEST && copilotLspClient) {
+    if (isCopilotLspReady && !TEST && copilotLspClient) {
       // Set up the lsp plugin.
       const lsp = copilotPlugin({
         documentUri: `file:///${PROJECT_ENTRYPOINT}`,
@@ -235,7 +232,7 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
       plugin = lsp
     }
     return plugin
-  }, [copilotLspClient, isCopilotLspServerReady])
+  }, [copilotLspClient, isCopilotLspReady])
 
   let lspClients: LanguageServerClient[] = []
   if (kclLspClient) {
@@ -245,13 +242,6 @@ export const LspProvider = ({ children }: { children: React.ReactNode }) => {
     lspClients.push(copilotLspClient)
   }
 
-  useEffect(() => {
-    setIsKclLspServerReady(isLspReady)
-  }, [isLspReady])
-  useEffect(() => {
-    setIsCopilotLspServerReady(isCopilotReady)
-  }, [isCopilotReady])
-
   const onProjectClose = (
     file: FileEntry | null,
     projectPath: string | null,

src/components/ModelingMachineProvider.tsx

@@ -23,13 +23,13 @@ import {
   editorManager,
   sceneEntitiesManager,
 } from 'lib/singletons'
+import { useHotkeys } from 'react-hotkeys-hook'
 import { applyConstraintHorzVertDistance } from './Toolbar/SetHorzVertDistance'
 import {
   angleBetweenInfo,
   applyConstraintAngleBetween,
 } from './Toolbar/SetAngleBetween'
 import { applyConstraintAngleLength } from './Toolbar/setAngleLength'
-import { useStore } from 'useStore'
 import {
   Selections,
   canExtrudeSelection,
@@ -53,13 +53,7 @@ import {
   sketchOnExtrudedFace,
   startSketchOnDefault,
 } from 'lang/modifyAst'
-import {
-  Program,
-  VariableDeclaration,
-  coreDump,
-  parse,
-  recast,
-} from 'lang/wasm'
+import { Program, VariableDeclaration, parse, recast } from 'lang/wasm'
 import {
   getNodeFromPath,
   getNodePathFromSourceRange,
@@ -70,14 +64,14 @@ import { TEST } from 'env'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
 import toast from 'react-hot-toast'
-import { EditorSelection } from '@uiw/react-codemirror'
-import { CoreDumpManager } from 'lib/coredump'
+import { EditorSelection, Transaction } from '@codemirror/state'
 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'
 import { err, trap } from 'lib/trap'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { modelingMachineEvent } from 'editor/manager'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -99,7 +93,7 @@ export const ModelingMachineProvider = ({
     settings: {
       context: {
         app: { theme, enableSSAO },
-        modeling: { defaultUnit, highlightEdges },
+        modeling: { defaultUnit, highlightEdges, showScaleGrid },
       },
     },
   } = useSettingsAuthContext()
@@ -109,38 +103,7 @@ export const ModelingMachineProvider = ({
   let [searchParams] = useSearchParams()
   const pool = searchParams.get('pool')
 
-  useSetupEngineManager(streamRef, token, {
-    pool: pool,
-    theme: theme.current,
-    highlightEdges: highlightEdges.current,
-    enableSSAO: enableSSAO.current,
-  })
-  const { htmlRef } = useStore((s) => ({
-    htmlRef: s.htmlRef,
-  }))
-  const coreDumpManager = new CoreDumpManager(
-    engineCommandManager,
-    htmlRef,
-    token
-  )
-  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,
-        },
-      }
-    )
-  })
+  const { commandBarState } = useCommandsContext()
 
   // Settings machine setup
   // const retrievedSettings = useRef(
@@ -159,7 +122,13 @@ export const ModelingMachineProvider = ({
     modelingMachine,
     {
       actions: {
-        'sketch exit execute': () => {
+        'disable copilot': () => {
+          editorManager.setCopilotEnabled(false)
+        },
+        'enable copilot': () => {
+          editorManager.setCopilotEnabled(true)
+        },
+        'sketch exit execute': ({ store }) => {
           ;(async () => {
             await sceneInfra.camControls.snapToPerspectiveBeforeHandingBackControlToEngine()
 
@@ -193,7 +162,10 @@ export const ModelingMachineProvider = ({
               })
             }
 
-            kclManager.executeCode(true)
+            store.videoElement?.pause()
+            kclManager.executeCode(true).then(() => {
+              store.videoElement?.play()
+            })
           })()
         },
         'Set mouse state': assign({
@@ -279,11 +251,15 @@ export const ModelingMachineProvider = ({
           const dispatchSelection = (selection?: EditorSelection) => {
             if (!selection) return // TODO less of hack for the below please
             if (!editorManager.editorView) return
-            editorManager.lastSelectionEvent = Date.now()
             setTimeout(() => {
-              if (editorManager.editorView) {
-                editorManager.editorView.dispatch({ selection })
-              }
+              if (!editorManager.editorView) return
+              editorManager.editorView.dispatch({
+                selection,
+                annotations: [
+                  modelingMachineEvent,
+                  Transaction.addToHistory.of(false),
+                ],
+              })
             })
           }
           let selections: Selections = {
@@ -460,16 +436,10 @@ export const ModelingMachineProvider = ({
 
           return canExtrudeSelection(selectionRanges)
         },
-        'Sketch is empty': ({ sketchDetails }) => {
-          const node = getNodeFromPath<VariableDeclaration>(
-            kclManager.ast,
-            sketchDetails?.sketchPathToNode || [],
-            'VariableDeclaration'
-          )
-          // This should not be returning false, and it should be caught
-          // but we need to simulate old behavior to move on.
-          if (err(node)) return false
-          return node.node?.declarations?.[0]?.init.type !== 'PipeExpression'
+        'has valid selection for deletion': ({ selectionRanges }) => {
+          if (!commandBarState.matches('Closed')) return false
+          if (selectionRanges.codeBasedSelections.length <= 0) return false
+          return true
         },
         'Selection is on face': ({ selectionRanges }, { data }) => {
           if (data?.forceNewSketch) return false
@@ -501,11 +471,15 @@ export const ModelingMachineProvider = ({
       services: {
         'AST-undo-startSketchOn': async ({ sketchDetails }) => {
           if (!sketchDetails) return
+          if (kclManager.ast.body.length) {
+            // this assumes no changes have been made to the sketch besides what we did when entering the sketch
+            // i.e. doesn't account for user's adding code themselves, maybe we need store a flag userEditedSinceSketchMode?
             const newAst: Program = JSON.parse(JSON.stringify(kclManager.ast))
             const varDecIndex = sketchDetails.sketchPathToNode[1][0]
             // remove body item at varDecIndex
             newAst.body = newAst.body.filter((_, i) => i !== varDecIndex)
             await kclManager.executeAstMock(newAst)
+          }
           sceneInfra.setCallbacks({
             onClick: () => {},
             onDrag: () => {},
@@ -885,6 +859,16 @@ export const ModelingMachineProvider = ({
     }
   )
 
+  useSetupEngineManager(streamRef, token, {
+    pool: pool,
+    theme: theme.current,
+    highlightEdges: highlightEdges.current,
+    enableSSAO: enableSSAO.current,
+    modelingSend,
+    modelingContext: modelingState.context,
+    showScaleGrid: showScaleGrid.current,
+  })
+
   useEffect(() => {
     kclManager.registerExecuteCallback(() => {
       modelingSend({ type: 'Re-execute' })
@@ -923,6 +907,11 @@ export const ModelingMachineProvider = ({
     }
   }, [modelingSend])
 
+  // Allow using the delete key to delete solids
+  useHotkeys(['backspace', 'delete', 'del'], () => {
+    modelingSend({ type: 'Delete selection' })
+  })
+
   useStateMachineCommands({
     machineId: 'modeling',
     state: modelingState,

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,6 +1,6 @@
-import { useStore } from 'useStore'
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export interface ModelingPaneProps
   extends React.PropsWithChildren,
@@ -33,11 +33,9 @@ export const ModelingPane = ({
 }: ModelingPaneProps) => {
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
-  const { buttonDownInStream } = useStore((s) => ({
-    buttonDownInStream: s.buttonDownInStream,
-  }))
+  const { context } = useModelingContext()
   const pointerEventsCssClass =
-    buttonDownInStream || onboardingStatus.current === 'camera'
+    context.store?.buttonDownInStream || onboardingStatus.current === 'camera'
       ? 'pointer-events-none '
       : 'pointer-events-auto '
   return (

src/components/ModelingSidebar/ModelingPanes/CodeEditor.tsx

@@ -0,0 +1,171 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
+import {
+  EditorState,
+  EditorStateConfig,
+  Extension,
+  StateEffect,
+} from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+//reference: https://github.com/sachinraja/rodemirror/blob/main/src/use-first-render.ts
+const useFirstRender = () => {
+  const firstRender = useRef(true)
+
+  useEffect(() => {
+    firstRender.current = false
+  }, [])
+
+  return firstRender.current
+}
+
+const defaultLightThemeOption = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: '#fff',
+    },
+  },
+  {
+    dark: false,
+  }
+)
+
+interface CodeEditorRef {
+  editor?: HTMLDivElement | null
+  view?: EditorView
+  state?: EditorState
+}
+
+interface CodeEditorProps {
+  onCreateEditor?: (view: EditorView | null) => void
+  initialDocValue?: EditorStateConfig['doc']
+  extensions?: Extension
+  theme: 'light' | 'dark'
+  autoFocus?: boolean
+  selection?: EditorStateConfig['selection']
+}
+
+interface UseCodeMirror extends CodeEditorProps {
+  container?: HTMLDivElement | null
+}
+
+const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+  const editor = useRef<HTMLDivElement>(null)
+
+  const { view, state, container } = useCodeMirror({
+    container: editor.current,
+    onCreateEditor,
+    extensions,
+    initialDocValue,
+    theme,
+    autoFocus,
+    selection,
+  })
+
+  useImperativeHandle(
+    ref,
+    () => ({ editor: editor.current, view: view, state: state }),
+    [editor, container, view, state]
+  )
+
+  return <div ref={editor}></div>
+})
+
+export function useCodeMirror(props: UseCodeMirror) {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+
+  const [container, setContainer] = useState<HTMLDivElement | null>()
+  const [view, setView] = useState<EditorView>()
+  const [state, setState] = useState<EditorState>()
+
+  const isFirstRender = useFirstRender()
+
+  const targetExtensions = useMemo(() => {
+    let exts = Array.isArray(extensions) ? extensions : []
+    if (theme === 'dark') {
+      exts = [...exts, oneDark]
+    } else if (theme === 'light') {
+      exts = [...exts, defaultLightThemeOption]
+    }
+
+    return exts
+  }, [extensions, theme])
+
+  useEffect(() => {
+    if (container && !state) {
+      const config = {
+        doc: initialDocValue,
+        selection,
+        extensions: [...Array.of(extensions)],
+      }
+      const stateCurrent = EditorState.create(config)
+      setState(stateCurrent)
+      if (!view) {
+        const viewCurrent = new EditorView({
+          state: stateCurrent,
+          parent: container,
+        })
+        setView(viewCurrent)
+        onCreateEditor && onCreateEditor(viewCurrent)
+      }
+    }
+    return () => {
+      if (view) {
+        setState(undefined)
+        setView(undefined)
+      }
+    }
+  }, [container, state])
+
+  useEffect(() => setContainer(props.container), [props.container])
+
+  useEffect(
+    () => () => {
+      if (view) {
+        view.destroy()
+        setView(undefined)
+      }
+    },
+    [view]
+  )
+
+  useEffect(() => {
+    if (autoFocus && view) {
+      view.focus()
+    }
+  }, [autoFocus, view])
+
+  useEffect(() => {
+    if (view && !isFirstRender) {
+      view.dispatch({
+        effects: StateEffect.reconfigure.of(targetExtensions),
+      })
+    }
+  }, [targetExtensions])
+
+  return { view, setView, container, setContainer, state, setState }
+}
+
+export default CodeEditor

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -1,4 +1,3 @@
-import ReactCodeMirror from '@uiw/react-codemirror'
 import { TEST } from 'env'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
@@ -43,6 +42,7 @@ import {
   closeBracketsKeymap,
   completionKeymap,
 } from '@codemirror/autocomplete'
+import CodeEditor from './CodeEditor'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -84,6 +84,10 @@ export const KclEditorPane = () => {
 
   const textWrapping = context.textEditor.textWrapping
   const cursorBlinking = context.textEditor.blinkingCursor
+  // DO NOT ADD THE CODEMIRROR HOTKEYS HERE TO THE DEPENDENCY ARRAY
+  // It reloads the editor every time we do _anything_ in the editor
+  // I have no idea why.
+  // Instead, hot load hotkeys via code mirror native.
   const codeMirrorHotkeys = codeManager.getCodemirrorHotkeys()
 
   const editorExtensions = useMemo(() => {
@@ -134,7 +138,6 @@ export const KclEditorPane = () => {
         highlightSelectionMatches(),
         syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
         rectangularSelection(),
-        drawSelection(),
         dropCursor(),
         interact({
           rules: [
@@ -173,13 +176,7 @@ export const KclEditorPane = () => {
     }
 
     return extensions
-  }, [
-    kclLSP,
-    copilotLSP,
-    textWrapping.current,
-    cursorBlinking.current,
-    codeMirrorHotkeys,
-  ])
+  }, [kclLSP, copilotLSP, textWrapping.current, cursorBlinking.current])
 
   const initialCode = useRef(codeManager.code)
 
@@ -188,15 +185,15 @@ export const KclEditorPane = () => {
       id="code-mirror-override"
       className={'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')}
     >
-      <ReactCodeMirror
-        value={initialCode.current}
+      <CodeEditor
+        initialDocValue={initialCode.current}
         extensions={editorExtensions}
         theme={theme}
-        onCreateEditor={(_editorView) =>
+        onCreateEditor={(_editorView) => {
+          if (_editorView === null) return
+
           editorManager.setEditorView(_editorView)
-        }
-        indentWithTab={false}
-        basicSetup={false}
+        }}
       />
     </div>
   )