Merge branch 'main' into franknoirot/xstate-toolbar

Only implementing adding to code-based selections in the text editor so far

.env.development

@@ -1,6 +1,6 @@
-VITE_KC_API_WS_MODELING_URL=wss://api.dev.kittycad.io/ws/modeling/commands
-VITE_KC_API_BASE_URL=https://api.dev.kittycad.io
-VITE_KC_SITE_BASE_URL=https://dev.kittycad.io
+VITE_KC_API_WS_MODELING_URL=wss://api.kittycad.io/ws/modeling/commands
+VITE_KC_API_BASE_URL=https://api.kittycad.io
+VITE_KC_SITE_BASE_URL=https://kittycad.io
 VITE_KC_SKIP_AUTH=false
-VITE_KC_CONNECTION_TIMEOUT_MS=5000
+VITE_KC_CONNECTION_TIMEOUT_MS=15000
 VITE_KC_SENTRY_DSN=

.github/workflows/cargo-build.yml

@@ -15,9 +15,6 @@ on:
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
       - .github/workflows/cargo-build.yml
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
 name: cargo build
 jobs:
   cargobuild:
@@ -27,7 +24,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
 
       - name: Install latest rust
         uses: actions-rs/toolchain@v1

.github/workflows/cargo-clippy.yml

@@ -15,9 +15,6 @@ on:
       - '**/rust-toolchain.toml'
       - '**.rs'
       - .github/workflows/cargo-build.yml
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
 name: cargo clippy
 jobs:
   cargoclippy:
@@ -27,7 +24,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:
@@ -57,4 +54,4 @@ jobs:
       - name: Run clippy
         run: |
           cd "${{ matrix.dir }}"
-          cargo clippy --all --tests --benches -- -D warnings
+          cargo clippy --all --tests -- -D warnings

.github/workflows/cargo-criterion.yml

@@ -1,40 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**.rs'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-criterion.yml
-  pull_request:
-    paths:
-      - '**.rs'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-criterion.yml
-  workflow_dispatch:
-permissions: read-all
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-name: cargo criterion
-jobs:
-  cargocriterion:
-    name: cargo criterion
-    runs-on: ubuntu-latest-8-cores
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dtolnay/rust-toolchain@stable
-      - name: Install dependencies
-        run: |
-          cargo install cargo-criterion
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@v2.6.1
-      - name: Benchmark kcl library
-        shell: bash
-        run: |-
-          cd src/wasm-lib/kcl; cargo criterion
-

.github/workflows/cargo-fmt.yml

@@ -18,9 +18,6 @@ on:
 permissions:
   packages: read
   contents: read
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
 name: cargo fmt
 jobs:
   cargofmt:
@@ -30,7 +27,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib', 'src-tauri']
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:

.github/workflows/cargo-test.yml

@@ -17,9 +17,6 @@ on:
       - .github/workflows/cargo-test.yml
   workflow_dispatch:
 permissions: read-all
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
 name: cargo test
 jobs:
   cargotest:
@@ -29,7 +26,7 @@ jobs:
       matrix:
         dir: ['src/wasm-lib']
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - name: Install latest rust
         uses: actions-rs/toolchain@v1
         with:
@@ -58,8 +55,7 @@ jobs:
         shell: bash
         run: |-
           cd "${{ matrix.dir }}"
-          cargo nextest run --workspace --no-fail-fast -P ci
+          cargo test --all
         env:
           KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
-          RUST_MIN_STACK: 10485760000
 

.github/workflows/ci.yml

@@ -4,18 +4,16 @@ on:
   pull_request:
   push:
     branches:
-      - main
+        - main
   release:
     types: [published]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
 jobs:
+
   check-format:
     runs-on: 'ubuntu-20.04'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
@@ -27,7 +25,7 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
@@ -35,17 +33,19 @@ jobs:
       - run: yarn install
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: './src/wasm-lib'
+          workspaces: "./src/wasm-lib"
 
       - run: yarn build:wasm
       - run: yarn tsc
 
+
   build-test-web:
     runs-on: ubuntu-20.04
     outputs:
       version: ${{ steps.export_version.outputs.version }}
     steps:
-      - uses: actions/checkout@v4
+
+      - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v3
         with:
@@ -56,7 +56,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: './src/wasm-lib'
+          workspaces: "./src/wasm-lib"
 
       - run: yarn build:wasm
 
@@ -69,6 +69,7 @@ jobs:
       - id: export_version
         run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"
 
+
   build-apps:
     needs: [check-format, build-test-web, check-types]
     runs-on: ${{ matrix.os }}
@@ -76,7 +77,8 @@ jobs:
       matrix:
         os: [macos-latest, ubuntu-20.04, windows-latest]
     steps:
-      - uses: actions/checkout@v4
+
+      - uses: actions/checkout@v3
 
       - name: install ubuntu system dependencies
         if: matrix.os == 'ubuntu-20.04'
@@ -102,7 +104,7 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: './src/wasm-lib'
+          workspaces: "./src/wasm-lib"
 
       - name: wasm prep
         shell: bash
@@ -112,6 +114,18 @@ jobs:
           cd ../../
           cp src/wasm-lib/pkg/wasm_lib_bg.wasm public
 
+      - name: macos sed
+        if: matrix.os == 'macos-latest'
+        shell: bash
+        run: |
+          sed -i '' 's/import.meta.url//g' "./src/wasm-lib/pkg/wasm_lib.js"
+
+      - name: ubuntu and windows sed
+        if: matrix.os != 'macos-latest'
+        shell: bash
+        run: |
+          sed -i 's/import.meta.url//g' "./src/wasm-lib/pkg/wasm_lib.js"
+
       - name: Fix format
         run: yarn fmt
 
@@ -120,42 +134,11 @@ jobs:
         run: |
           rustup target add aarch64-apple-darwin
 
-      - name: Prepare Windows certificate and variables
-        if: matrix.os == 'windows-latest'
-        run: |
-          echo "${{secrets.SM_CLIENT_CERT_FILE_B64 }}" | base64 --decode > /d/Certificate_pkcs12.p12
-          cat /d/Certificate_pkcs12.p12
-          echo "::set-output name=version::${GITHUB_REF#refs/tags/v}"
-          echo "SM_HOST=${{ secrets.SM_HOST }}" >> "$GITHUB_ENV"
-          echo "SM_API_KEY=${{ secrets.SM_API_KEY }}" >> "$GITHUB_ENV"
-          echo "SM_CLIENT_CERT_FILE=D:\\Certificate_pkcs12.p12" >> "$GITHUB_ENV"
-          echo "SM_CLIENT_CERT_PASSWORD=${{ secrets.SM_CLIENT_CERT_PASSWORD }}" >> "$GITHUB_ENV"
-          echo "C:\Program Files (x86)\Windows Kits\10\App Certification Kit" >> $GITHUB_PATH
-          echo "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8 Tools" >> $GITHUB_PATH
-          echo "C:\Program Files\DigiCert\DigiCert One Signing Manager Tools" >> $GITHUB_PATH
-        shell: bash
-
-      - name: Setup Windows certicate with SSM KSP
-        if: matrix.os == 'windows-latest'
-        run: |
-          curl -X GET  https://one.digicert.com/signingmanager/api-ui/v1/releases/smtools-windows-x64.msi/download -H "x-api-key:%SM_API_KEY%" -o smtools-windows-x64.msi
-          msiexec /i smtools-windows-x64.msi /quiet /qn
-          smksp_registrar.exe list
-          smctl.exe keypair ls
-          C:\Windows\System32\certutil.exe -csp "DigiCert Signing Manager KSP" -key -user
-          smksp_cert_sync.exe
-        shell: cmd
-
-      - name: Build and sign the app for the current platform
+      - name: Build the app for the current platform (no upload)
         uses: tauri-apps/tauri-action@v0
         env:
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
         with:
           args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
 
@@ -163,15 +146,68 @@ jobs:
         with:
           path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}
 
+
+  sign-windows-msi:
+    runs-on: windows-latest
+    if: github.event_name == 'release'
+    needs: [build-test-web, build-apps]
+    env:
+      VERSION_NO_V: ${{ needs.build-test-web.outputs.version }}
+    steps:
+
+      - uses: actions/download-artifact@v3
+
+      - name: Setup Certificate 
+        run: | 
+          echo "${{secrets.SM_CLIENT_CERT_FILE_B64 }}" | base64 --decode > /d/Certificate_pkcs12.p12 
+          cat /d/Certificate_pkcs12.p12 
+        shell: bash 
+
+      - name: Set variables 
+        id: variables 
+        run: | 
+          echo "::set-output name=version::${GITHUB_REF#refs/tags/v}" 
+          echo "SM_HOST=${{ secrets.SM_HOST }}" >> "$GITHUB_ENV" 
+          echo "SM_API_KEY=${{ secrets.SM_API_KEY }}" >> "$GITHUB_ENV" 
+          echo "SM_CLIENT_CERT_FILE=D:\\Certificate_pkcs12.p12" >> "$GITHUB_ENV" 
+          echo "SM_CLIENT_CERT_PASSWORD=${{ secrets.SM_CLIENT_CERT_PASSWORD }}" >> "$GITHUB_ENV" 
+          echo "C:\Program Files (x86)\Windows Kits\10\App Certification Kit" >> $GITHUB_PATH 
+          echo "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8 Tools" >> $GITHUB_PATH 
+          echo "C:\Program Files\DigiCert\DigiCert One Signing Manager Tools" >> $GITHUB_PATH 
+        shell: bash 
+
+      - name: Setup SSM KSP on windows latest 
+        run: | 
+          curl -X GET  https://one.digicert.com/signingmanager/api-ui/v1/releases/smtools-windows-x64.msi/download -H "x-api-key:%SM_API_KEY%" -o smtools-windows-x64.msi 
+          msiexec /i smtools-windows-x64.msi /quiet /qn 
+          smksp_registrar.exe list 
+          smctl.exe keypair ls 
+          C:\Windows\System32\certutil.exe -csp "DigiCert Signing Manager KSP" -key -user 
+          smksp_cert_sync.exe 
+        shell: cmd 
+
+      - name: Signing using Signtool 
+        run: | 
+          signtool.exe sign /sha1 ${{ secrets.SM_CODE_SIGNING_CERT_SHA1_HASH }} /tr http://timestamp.digicert.com /td SHA256 /fd SHA256 "artifact\msi\*.msi"
+          signtool.exe verify /v /pa "artifact\msi\*.msi"
+      
+      # TODO: for the updater, investigate if we need to also replace what's in the .zip, and what to do about the .sig file
+
+      - uses: actions/upload-artifact@v3
+        with:
+          path:  artifact/*
+
+
   publish-apps-release:
     runs-on: ubuntu-20.04
     if: github.event_name == 'release'
-    needs: [build-test-web, build-apps]
+    needs: [build-test-web, build-apps, sign-windows-msi]
     env:
       VERSION_NO_V: ${{ needs.build-test-web.outputs.version }}
       PUB_DATE: ${{ github.event.release.created_at }}
       NOTES: ${{ github.event.release.body }}
     steps:
+
       - uses: actions/download-artifact@v3
 
       - name: Generate the update static endpoint

.github/workflows/update-dev-branch.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3.5.0
       - shell: bash
         run: |
           # checkout our branch

.gitignore

@@ -22,11 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.idea
-.vscode
-src/wasm-lib/.idea
-src/wasm-lib/.vscode
-
 # rust
 src/wasm-lib/target
 src/wasm-lib/bindings

LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2023 The KittyCAD Authors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -123,24 +123,13 @@ 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 in the .json files by creating a `Bump to v{x}.{y}.{z}` PR, committing the changes from
 
 ```bash
 VERSION=x.y.z yarn run bump-jsons
 ```
 
-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 past in the following
-
-```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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.10.0",
+  "version": "0.7.0",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.9.0",
@@ -10,7 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.43",
+    "@kittycad/lib": "^0.0.37",
     "@lezer/javascript": "^1.4.7",
     "@open-rpc/client-js": "^1.8.1",
     "@react-hook/resize-observer": "^1.2.6",
@@ -27,12 +27,11 @@
     "@uiw/react-codemirror": "^4.21.13",
     "@xstate/react": "^3.2.2",
     "crypto-js": "^4.1.1",
-    "debounce-promise": "^3.1.2",
     "formik": "^2.4.3",
     "fuse.js": "^6.6.2",
     "http-server": "^14.1.1",
     "json-rpc-2.0": "^1.6.0",
-    "re-resizable": "^6.9.11",
+    "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
@@ -48,7 +47,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.4.2",
     "uuid": "^9.0.0",
-    "vitest": "^0.34.6",
+    "vitest": "^0.34.1",
     "vscode-jsonrpc": "^8.1.0",
     "vscode-languageserver-protocol": "^3.17.3",
     "wasm-pack": "^0.12.1",
@@ -63,17 +62,15 @@
     "build:local": "vite build",
     "build:both": "vite build",
     "build:both:local": "yarn build:wasm && vite build",
-    "pretest": "yarn remove-importmeta",
     "test": "vitest --mode development",
     "test:nowatch": "vitest run --mode development",
-    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests --benches)",
+    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests)",
     "test:cov": "vitest run --coverage --mode development",
-    "simpleserver:ci": "yarn pretest && http-server ./public --cors -p 3000 &",
-    "simpleserver": "yarn pretest && http-server ./public --cors -p 3000",
+    "simpleserver:ci": "http-server ./public --cors -p 3000 &",
+    "simpleserver": "http-server ./public --cors -p 3000",
     "fmt": "prettier --write ./src",
     "fmt-check": "prettier --check ./src",
-    "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-clean": "yarn wasm-prep && yarn build:wasm",
+    "build:wasm": "yarn wasm-prep && (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 && yarn remove-importmeta",
     "remove-importmeta": "sed -i 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url/window.location.origin/g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
     "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
     "lint": "eslint --fix src",
@@ -102,7 +99,7 @@
     "@babel/preset-env": "^7.22.9",
     "@tauri-apps/cli": "^1.3.1",
     "@types/crypto-js": "^4.1.1",
-    "@types/debounce-promise": "^3.1.6",
+    "@types/debounce": "^1.2.1",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/react-modal": "^3.16.0",
     "@types/uuid": "^9.0.1",
@@ -116,7 +113,7 @@
     "eslint-plugin-css-modules": "^2.11.0",
     "happy-dom": "^10.8.0",
     "husky": "^8.0.3",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.19",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.2.4",

public/expectations.md

@@ -1,42 +0,0 @@
-## Alpha Users Expectations
-
-### Welcome
-
-First off, thank you so much for your interest in being a part of the closed Alpha program! We are thrilled to have others use our product and see what you build with it (and truthfully, how you break it too).
-
-### KittyCAD Modeling App (KCMA)
-
-What we are introducing to you is our KittyCAD Modeling App (KCMA). KCMA is a CAD application that expresses a hybrid style of traditional CAD interface along with a code-CAD interface. KCMA is a great way for us to test our own APIs as well as inspire others to develop their own applications.
-
-### Why Code?
-
-Plenty of you have professional CAD experience, and may not understand why coding your model would be helpful. The "code-CAD" paradigm isn’t as popular as traditional CAD programs (SolidWorks, NX, CREO, OnShape, etc.), but it certainly has its benefits. Some benefits include:
-
-- Automation and parametric design
-- Customization and flexibility
-- Algorithmic and generative design
-- Reproducibility
-- Easier integration with other tools
-
-### Before You Use KCMA
-
-Before you dive straight into the app, we wanted to lay some expectations out for you. 
-
-- KCMA is in early development. Kurt pitched the idea back in January, and the team has been working hard on it since then. KCMA has really basic CAD features for now, but we have plenty of features on our roadmap. Most of the features that you may be currently used to in your CAD workflow today will be available down the road.
-- For a list of all scripting functions, please reference our [documentation](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/std.md). For a basic rundown of our types, please reference [this document](https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/types.md).
-- With that being said, we have created an external new features list in [GH Discussions](https://github.com/KittyCAD/modeling-app/discussions). For our current priority list, please click [here](https://github.com/KittyCAD/modeling-app/blob/main/public/roadmap.md). Please upvote any features in the GH Discussions page that you would like to see implemented first. We will prioritize the highest upvoted items or items that are foundational for other features on the list. You can also add your own, but we will review it to make sure it’s not a duplicate or it’s feasible for the current state of the app.
-- Please report any and all bugs/issues you find. Even the smallest bugs are important! You can report them in a GH Issue [here](https://github.com/KittyCAD/modeling-app/issues/new). You are more than welcome to link your GH Issue in the **bugs** section of our Discord, but if you want to discuss the bug further, please keep that in the GH Issue thread. Please include the severity of the bug in your GH Issue ticket (High, Medium, or Low). If you are having trouble deciding what severity the bug is, use this guideline:
-    - **High:** The bug is blocking you from continuing.
-        - Example: Every time I click the extrude button with two faces selected, the app crashes.
-    - **Medium:** You can find a workaround to the problem, but it increases your time spent working or makes it unenjoyable.
-        - Example: When the app is full screen on Mac, the settings are not showing properly. It works if I have the app windowed.
-    - **Low:** The bug is annoying but doesn’t affect workflow or block you from continuing (usually you can say “It would be nice if ___, but it’s not needed”)
-        - Example:  It would be nice if the camera would orient normal to the sketching surface when I select a face/plane and click “sketch”.
-- We want you all to be aware that we may reach out to you in regard to issues, bugs, problems, and satisfaction. This will typically be for further clarification so we can really nail things down.
-
-### Discord
-We will be using Discord a lot more now that the Alpha has been released to people outside of the company. Please feel free to discuss and talk with us in the **alpha users** section of the server. We highly encourage you to engage with us on Discord!
-
-### Thank You!
-
-Once again, from all of us to you, thank you for being a part of the closed Alpha. We are happy to chat with you all, hear your feedback, and see some of your projects!

src-tauri/Cargo.toml

@@ -12,18 +12,17 @@ rust-version = "1.60"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.5.0", features = [] }
+tauri-build = { version = "1.4.0", features = [] }
 
 [dependencies]
 anyhow = "1"
-kittycad = "0.2.28"
 oauth2 = "4.4.2"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.5.1", features = [ "os-all", "dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "updater", "devtools"] }
-tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+tauri = { version = "1.4.1", features = ["dialog-all", "fs-all", "http-request", "path-all", "shell-open", "shell-open-api", "updater", "devtools"] }
 tokio = { version = "1.32.0", features = ["time"] }
-toml = "0.8.2"
+toml = "0.8.0"
+tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

src-tauri/src/main.rs

@@ -6,7 +6,6 @@ use std::io::Read;
 use anyhow::Result;
 use oauth2::TokenResponse;
 use tauri::{InvokeError, Manager};
-const DEFAULT_HOST: &str = "https://api.kittycad.io";
 
 /// This command returns the a json string parse from a toml file at the path.
 #[tauri::command]
@@ -86,47 +85,6 @@ async fn login(app: tauri::AppHandle, host: &str) -> Result<String, InvokeError>
     Ok(token)
 }
 
-///This command returns the KittyCAD user info given a token.
-/// The string returned from this method is the user info as a json string.
-#[tauri::command]
-async fn get_user(
-    token: Option<String>,
-    hostname: &str,
-) -> Result<kittycad::types::User, InvokeError> {
-    // Use the host passed in if it's set.
-    // Otherwise, use the default host.
-    let host = if hostname.is_empty() {
-        DEFAULT_HOST.to_string()
-    } else {
-        hostname.to_string()
-    };
-
-    // Change the baseURL to the one we want.
-    let mut baseurl = host.to_string();
-    if !host.starts_with("http://") && !host.starts_with("https://") {
-        baseurl = format!("https://{host}");
-        if host.starts_with("localhost") {
-            baseurl = format!("http://{host}")
-        }
-    }
-    println!("Getting user info...");
-
-    // use kittycad library to fetch the user info from /user/me
-    let mut client = kittycad::Client::new(token.unwrap());
-
-    if baseurl != DEFAULT_HOST {
-        client.set_base_url(&baseurl);
-    }
-
-    let user_info: kittycad::types::User = client
-        .users()
-        .get_self()
-        .await
-        .map_err(|e| InvokeError::from_anyhow(e.into()))?;
-
-    Ok(user_info)
-}
-
 fn main() {
     tauri::Builder::default()
         .setup(|app| {
@@ -139,12 +97,7 @@ fn main() {
             }
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![
-            get_user,
-            login,
-            read_toml,
-            read_txt_file
-        ])
+        .invoke_handler(tauri::generate_handler![login, read_toml, read_txt_file])
         .plugin(tauri_plugin_fs_extra::init())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "kittycad-modeling",
-    "version": "0.10.0"
+    "version": "0.7.0"
   },
   "tauri": {
     "allowlist": {
@@ -36,9 +36,6 @@
           "https://api.dev.kittycad.io/*"
         ]
       },
-      "os": {
-        "all": true
-      },
       "shell": {
         "open": true
       },
@@ -74,9 +71,9 @@
       "shortDescription": "",
       "targets": "all",
       "windows": {
-        "certificateThumbprint": "F4C9A52FF7BC26EE5E054946F6B11DEEA94C748D",
+        "certificateThumbprint": null,
         "digestAlgorithm": "sha256",
-        "timestampUrl": "http://timestamp.digicert.com"
+        "timestampUrl": ""
       }
     },
     "security": {

src/App.test.tsx

@@ -1,15 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import { App } from './App'
 import { describe, test, vi } from 'vitest'
-import {
-  Route,
-  RouterProvider,
-  createMemoryRouter,
-  createRoutesFromElements,
-} from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import { GlobalStateProvider } from './components/GlobalStateProvider'
 import CommandBarProvider from 'components/CommandBar'
-import { BROWSER_FILE_NAME } from 'Router'
 
 let listener: ((rect: any) => void) | undefined = undefined
 ;(global as any).ResizeObserver = class ResizeObserver {
@@ -30,7 +24,7 @@ describe('App tests', () => {
       >
       return {
         ...actual,
-        useParams: () => ({ id: BROWSER_FILE_NAME }),
+        useParams: () => ({ id: 'new' }),
         useLoaderData: () => ({ code: null }),
       }
     })
@@ -47,24 +41,12 @@ describe('App tests', () => {
 })
 
 function TestWrap({ children }: { children: React.ReactNode }) {
-  // We have to use a memory router in the testing environment,
-  // and we have to use the createMemoryRouter function instead of <MemoryRouter /> as of react-router v6.4:
-  // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
-  const router = createMemoryRouter(
-    createRoutesFromElements(
-      <Route
-        path="/file/:id"
-        element={
-          <CommandBarProvider>
-            <GlobalStateProvider>{children}</GlobalStateProvider>
-          </CommandBarProvider>
-        }
-      />
-    ),
-    {
-      initialEntries: ['/file/new'],
-      initialIndex: 0,
-    }
+  // wrap in router and xState context
+  return (
+    <BrowserRouter>
+      <CommandBarProvider>
+        <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
+    </BrowserRouter>
   )
-  return <RouterProvider router={router} />
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, MouseEventHandler } from 'react'
+import { useEffect, useCallback, MouseEventHandler } from 'react'
 import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
 import { PaneType, useStore } from './useStore'
@@ -29,41 +29,32 @@ import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/mod
 import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
-import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
-import { engineCommandManager } from './lang/std/engineConnection'
-
+ 
 export function App() {
   const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
 
-  const streamRef = useRef<HTMLDivElement>(null)
   useHotKeyListener()
   const {
     setCode,
+    engineCommandManager,
     buttonDownInStream,
     openPanes,
     setOpenPanes,
     didDragInStream,
     streamDimensions,
     guiMode,
-    setGuiMode,
-    executeAst,
   } = useStore((s) => ({
     guiMode: s.guiMode,
-    setGuiMode: s.setGuiMode,
     setCode: s.setCode,
+    engineCommandManager: s.engineCommandManager,
     buttonDownInStream: s.buttonDownInStream,
     openPanes: s.openPanes,
     setOpenPanes: s.setOpenPanes,
     didDragInStream: s.didDragInStream,
     streamDimensions: s.streamDimensions,
-    executeAst: s.executeAst,
   }))
 
   const {
-    auth: {
-      context: { token },
-    },
     settings: {
       context: { showDebugPanel, onboardingStatus, cameraControls, theme },
     },
@@ -84,58 +75,13 @@ export function App() {
   useHotkeys('shift + l', () => togglePane('logs'))
   useHotkeys('shift + e', () => togglePane('kclErrors'))
   useHotkeys('shift + d', () => togglePane('debug'))
-  useHotkeys('esc', () => {
-    if (guiMode.mode === 'sketch') {
-      if (guiMode.sketchMode === 'selectFace') return
-      if (guiMode.sketchMode === 'sketchEdit') {
-        // TODO: share this with Toolbar's "Exit sketch" button
-        // exiting sketch should be done consistently across all exits
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: { type: 'edit_mode_exit' },
-        })
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: { type: 'default_camera_disable_sketch_mode' },
-        })
-        setGuiMode({ mode: 'default' })
-        // this is necessary to get the UI back into a consistent
-        // state right now, hopefully won't need to rerender
-        // when exiting sketch mode in the future
-        executeAst()
-      } else {
-        engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'set_tool',
-            tool: 'select',
-          },
-        })
-        setGuiMode({
-          mode: 'sketch',
-          sketchMode: 'sketchEdit',
-          rotation: guiMode.rotation,
-          position: guiMode.position,
-          pathToNode: guiMode.pathToNode,
-          pathId: guiMode.pathId,
-          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
-        })
-      }
-    } else {
-      setGuiMode({ mode: 'default' })
-    }
-  })
 
-  const paneOpacity = [onboardingPaths.CAMERA, onboardingPaths.STREAMING].some(
-    (p) => p === onboardingStatus
-  )
-    ? 'opacity-20'
-    : didDragInStream
-    ? 'opacity-40'
-    : ''
+  const paneOpacity =
+    onboardingStatus === onboardingPaths.CAMERA
+      ? 'opacity-20'
+      : didDragInStream
+      ? 'opacity-40'
+      : ''
 
   // Use file code loaded from disk
   // on mount, and overwrite any locally-stored code
@@ -151,11 +97,8 @@ export function App() {
     }
   }, [loadedCode, setCode])
 
-  useSetupEngineManager(streamRef, token)
-  useEngineConnectionSubscriptions()
-
   const debounceSocketSend = throttle<EngineCommand>((message) => {
-    engineCommandManager.sendSceneCommand(message)
+    engineCommandManager?.sendSceneCommand(message)
   }, 16)
   const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
     e.nativeEvent.preventDefault()
@@ -215,6 +158,7 @@ export function App() {
       } else if (interactionGuards.zoom.dragCallback(eWithButton)) {
         interaction = 'zoom'
       } else {
+        console.log('none')
         return
       }
 
@@ -232,9 +176,8 @@ export function App() {
 
   return (
     <div
-      className="h-screen overflow-hidden relative flex flex-col cursor-pointer select-none"
+      className="relative h-full flex flex-col"
       onMouseMove={handleMouseMove}
-      ref={streamRef}
     >
       <AppHeader
         className={
@@ -267,7 +210,7 @@ export function App() {
             'hover:bg-liquid-30/40 dark:hover:bg-liquid-10/40 bg-transparent transition-colors duration-100 transition-ease-out delay-100',
         }}
       >
-        <div id="code-pane" className="h-full flex flex-col justify-between">
+        <div className="h-full flex flex-col justify-between">
           <CollapsiblePanel
             title="Code"
             icon={faCode}

src/Auth.tsx

@@ -6,9 +6,9 @@ export const Auth = ({ children }: React.PropsWithChildren) => {
   const {
     auth: { state },
   } = useGlobalStateContext()
-  const isLoggingIn = state.matches('checkIfLoggedIn')
+  const isLoggedIn = state.matches('checkIfLoggedIn')
 
-  return isLoggingIn ? (
+  return isLoggedIn ? (
     <Loading>Loading KittyCAD Modeling App...</Loading>
   ) : (
     <>{children}</>

src/Router.tsx

@@ -40,6 +40,7 @@ import { ContextFrom } from 'xstate'
 import CommandBarProvider from 'components/CommandBar'
 import { TEST, VITE_KC_SENTRY_DSN } from './env'
 import * as Sentry from '@sentry/react'
+import ModelingMachineProvider from 'components/ModelingMachineProvider'
 
 if (VITE_KC_SENTRY_DSN && !TEST) {
   Sentry.init({
@@ -94,8 +95,6 @@ export const paths = {
   ) as typeof onboardingPaths,
 }
 
-export const BROWSER_FILE_NAME = 'new'
-
 export type IndexLoaderData = {
   code: string | null
   project?: ProjectWithEntryPointMetadata
@@ -131,20 +130,20 @@ const router = createBrowserRouter(
     {
       path: paths.INDEX,
       loader: () =>
-        isTauri()
-          ? redirect(paths.HOME)
-          : redirect(paths.FILE + '/' + BROWSER_FILE_NAME),
-      errorElement: <ErrorPage />,
+        isTauri() ? redirect(paths.HOME) : redirect(paths.FILE + '/new'),
     },
     {
       path: paths.FILE + '/:id',
       element: (
         <Auth>
           <Outlet />
-          <App />
+          <ModelingMachineProvider>
+            <App />
+          </ModelingMachineProvider>
           {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
         </Auth>
       ),
+      errorElement: <ErrorPage />,
       id: paths.FILE,
       loader: async ({
         request,
@@ -171,7 +170,7 @@ const router = createBrowserRouter(
           )
         }
 
-        if (params.id && params.id !== BROWSER_FILE_NAME) {
+        if (params.id && params.id !== 'new') {
           // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
           const code = await readTextFile(params.id + '/' + PROJECT_ENTRYPOINT)
           const entrypoint_metadata = await metadata(
@@ -216,7 +215,7 @@ const router = createBrowserRouter(
       ),
       loader: async () => {
         if (!isTauri()) {
-          return redirect(paths.FILE + '/' + BROWSER_FILE_NAME)
+          return redirect(paths.FILE + '/new')
         }
         const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
         const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<

src/Toolbar.module.css

@@ -47,52 +47,6 @@
   @apply hover:bg-cool-20;
 }
 
-.toolbarButtons::-webkit-scrollbar {
-  @apply h-0.5;
-}
-
-.toolbarButtons {
-  @apply flex items-center overflow-x-auto;
-  scrollbar-width: thin;
-}
-
-.toolbarButtons button {
-  @apply text-chalkboard-90 bg-chalkboard-10/50 border-chalkboard-50 whitespace-nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  @apply gap-1.5 p-0.5 pr-1;
-  @apply rounded-sm;
-}
-:global(.dark) .toolbarButtons button {
-  @apply text-chalkboard-30 bg-chalkboard-90/50 border-chalkboard-50;
-}
-.toolbarButtons button:hover {
-  @apply text-cool-90 bg-cool-10;
-}
-:global(.sketch) .toolbarButtons button:hover {
-  @apply text-fern-90 bg-fern-10;
-}
-.toolbarButtons button:disabled {
-  @apply text-chalkboard-70 bg-chalkboard-30;
-}
-.toolbarButtons button:disabled:hover {
-  @apply !bg-inherit !text-inherit cursor-not-allowed;
-}
-
-:global(.dark) .toolbarButtons button {
-  @apply text-chalkboard-20 border-chalkboard-50;
-}
-:global(.dark) .toolbarButtons button:hover {
-  @apply text-cool-10 border-chalkboard-50 bg-cool-90;
-}
-:global(.dark .sketch) .toolbarButtons button:hover {
-  @apply text-fern-10 border-chalkboard-50 bg-fern-90;
-}
-:global(.dark) .toolbarButtons button:disabled {
-  @apply text-chalkboard-40 bg-chalkboard-80;
-}
-
 :global(.dark) .popoverToggle {
   @apply hover:bg-cool-90;
 }

src/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { useStore, toolTips, ToolTip } from './useStore'
+import { useStore, toolTips, Selections } from './useStore'
 import { extrudeSketch, sketchOnExtrudedFace } from './lang/modifyAst'
 import { getNodePathFromSourceRange } from './lang/queryAst'
 import { HorzVert } from './components/Toolbar/HorzVert'
@@ -10,38 +10,13 @@ import { SetHorzVertDistance } from './components/Toolbar/SetHorzVertDistance'
 import { SetAngleLength } from './components/Toolbar/setAngleLength'
 import { SetAbsDistance } from './components/Toolbar/SetAbsDistance'
 import { SetAngleBetween } from './components/Toolbar/SetAngleBetween'
-import { Fragment, WheelEvent, useRef } from 'react'
+import { Fragment, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSearch, faX } from '@fortawesome/free-solid-svg-icons'
 import { Popover, Transition } from '@headlessui/react'
 import styles from './Toolbar.module.css'
 import { v4 as uuidv4 } from 'uuid'
 import { useAppMode } from 'hooks/useAppMode'
-import { ActionIcon } from 'components/ActionIcon'
-import { engineCommandManager } from './lang/std/engineConnection'
-
-export const sketchButtonClassnames = {
-  background:
-    'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-fern-20 dark:group-hover:bg-fern-10 dark:hover:bg-fern-10 group-disabled:bg-chalkboard-50 dark:group-disabled:bg-chalkboard-60 group-hover:group-disabled:bg-chalkboard-50 dark:group-hover:group-disabled:bg-chalkboard-50',
-  icon: 'text-fern-20 h-auto group-hover:text-fern-10 hover:text-fern-10 dark:text-chalkboard-100 dark:group-hover:text-chalkboard-100 dark:hover:text-chalkboard-100 group-disabled:bg-chalkboard-60 hover:group-disabled:text-inherit',
-}
-
-const sketchFnLabels: Record<ToolTip | 'sketch_line' | 'move', string> = {
-  sketch_line: 'Line',
-  line: 'Line',
-  move: 'Move',
-  angledLine: 'Angled Line',
-  angledLineThatIntersects: 'Angled Line That Intersects',
-  angledLineOfXLength: 'Angled Line Of X Length',
-  angledLineOfYLength: 'Angled Line Of Y Length',
-  angledLineToX: 'Angled Line To X',
-  angledLineToY: 'Angled Line To Y',
-  lineTo: 'Line to Point',
-  xLine: 'Horizontal Line',
-  yLine: 'Vertical Line',
-  xLineTo: 'Horizontal Line to Point',
-  yLineTo: 'Vertical Line to Point',
-}
 
 export const Toolbar = () => {
   const {
@@ -51,7 +26,7 @@ export const Toolbar = () => {
     ast,
     updateAst,
     programMemory,
-    executeAst,
+    engineCommandManager,
   } = useStore((s) => ({
     guiMode: s.guiMode,
     setGuiMode: s.setGuiMode,
@@ -59,27 +34,17 @@ export const Toolbar = () => {
     ast: s.ast,
     updateAst: s.updateAst,
     programMemory: s.programMemory,
-    executeAst: s.executeAst,
+    engineCommandManager: s.engineCommandManager,
   }))
   useAppMode()
-  const toolbarButtonsRef = useRef<HTMLSpanElement>(null)
 
-  function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
-    const span = toolbarButtonsRef.current
-    if (!span) {
-      return
-    }
+  useEffect(() => {
+    console.log('guiMode', guiMode)
+  }, [guiMode])
 
-    span.scrollLeft = span.scrollLeft += ev.deltaY
-  }
-
-  function ToolbarButtons({ className }: React.HTMLAttributes<HTMLElement>) {
+  function ToolbarButtons() {
     return (
-      <span
-        ref={toolbarButtonsRef}
-        onWheel={handleToolbarButtonsWheelEvent}
-        className={styles.toolbarButtons + ' ' + className}
-      >
+      <span className="overflow-x-auto">
         {guiMode.mode === 'default' && (
           <button
             onClick={() => {
@@ -88,9 +53,7 @@ export const Toolbar = () => {
                 sketchMode: 'selectFace',
               })
             }}
-            className="group"
           >
-            <ActionIcon icon="sketch" className="!p-0.5" size="md" />
             Start Sketch
           </button>
         )}
@@ -107,33 +70,33 @@ export const Toolbar = () => {
                 pathToNode,
                 programMemory
               )
-              updateAst(modifiedAst, true)
+              updateAst(modifiedAst)
             }}
-            className="group"
           >
-            <ActionIcon icon="sketch" className="!p-0.5" size="md" />
-            Sketch on Face
+            SketchOnFace
           </button>
         )}
         {guiMode.mode === 'canEditSketch' && (
           <button
             onClick={() => {
-              const pathToNode = getNodePathFromSourceRange(
-                ast,
-                selectionRanges.codeBasedSelections[0].range
-              )
+              console.log('guiMode.pathId', guiMode.pathId)
+              engineCommandManager?.sendSceneCommand({
+                type: 'modeling_cmd_req',
+                cmd_id: uuidv4(),
+                cmd: {
+                  type: 'edit_mode_enter',
+                  target: guiMode.pathId,
+                },
+              })
               setGuiMode({
                 mode: 'sketch',
-                sketchMode: 'enterSketchEdit',
-                pathToNode: pathToNode,
-                rotation: [0, 0, 0, 1],
-                position: [0, 0, 0],
-                pathId: guiMode.pathId,
+                sketchMode: 'sketchEdit',
+                pathToNode: guiMode.pathToNode,
+                rotation: guiMode.rotation,
+                position: guiMode.position,
               })
             }}
-            className="group"
           >
-            <ActionIcon icon="sketch" className="!p-0.5" size="md" />
             Edit Sketch
           </button>
         )}
@@ -150,12 +113,10 @@ export const Toolbar = () => {
                   ast,
                   pathToNode
                 )
-                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
+                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
               }}
-              className="group"
             >
-              <ActionIcon icon="extrude" className="!p-0.5" size="md" />
-              Extrude
+              ExtrudeSketch
             </button>
             <button
               onClick={() => {
@@ -169,12 +130,10 @@ export const Toolbar = () => {
                   pathToNode,
                   false
                 )
-                updateAst(modifiedAst, true, { focusPath: pathToExtrudeArg })
+                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
               }}
-              className="group"
             >
-              <ActionIcon icon="extrude" className="!p-0.5" size="md" />
-              Extrude as new
+              ExtrudeSketch (w/o pipe)
             </button>
           </>
         )}
@@ -182,29 +141,14 @@ export const Toolbar = () => {
         {guiMode.mode === 'sketch' && (
           <button
             onClick={() => {
-              engineCommandManager.sendSceneCommand({
+              engineCommandManager?.sendSceneCommand({
                 type: 'modeling_cmd_req',
                 cmd_id: uuidv4(),
                 cmd: { type: 'edit_mode_exit' },
               })
-              engineCommandManager.sendSceneCommand({
-                type: 'modeling_cmd_req',
-                cmd_id: uuidv4(),
-                cmd: { type: 'default_camera_disable_sketch_mode' },
-              })
-
               setGuiMode({ mode: 'default' })
-              executeAst()
             }}
-            className="group"
           >
-            <ActionIcon
-              icon="exit"
-              className="!p-0.5"
-              bgClassName={sketchButtonClassnames.background}
-              iconClassName={sketchButtonClassnames.icon}
-              size="md"
-            />
             Exit sketch
           </button>
         )}
@@ -223,7 +167,7 @@ export const Toolbar = () => {
               <button
                 key={sketchFnName}
                 onClick={() => {
-                  engineCommandManager.sendSceneCommand({
+                  engineCommandManager?.sendSceneCommand({
                     type: 'modeling_cmd_req',
                     cmd_id: uuidv4(),
                     cmd: {
@@ -245,25 +189,12 @@ export const Toolbar = () => {
                           sketchMode: sketchFnName,
                           waitingFirstClick: true,
                           isTooltip: true,
-                          pathId: guiMode.pathId,
                         }),
                   })
                 }}
-                className={
-                  'group ' +
-                  (guiMode.sketchMode === sketchFnName
-                    ? '!text-fern-70 !bg-fern-10 !dark:text-fern-20 !border-fern-50'
-                    : '')
-                }
               >
-                <ActionIcon
-                  icon={sketchFnName.includes('line') ? 'line' : 'move'}
-                  className="!p-0.5"
-                  bgClassName={sketchButtonClassnames.background}
-                  iconClassName={sketchButtonClassnames.icon}
-                  size="md"
-                />
-                {sketchFnLabels[sketchFnName]}
+                {sketchFnName}
+                {guiMode.sketchMode === sketchFnName && '✅'}
               </button>
             )
           })}
@@ -294,7 +225,7 @@ export const Toolbar = () => {
         <span className={styles.toolbarCap + ' ' + styles.label}>
           {guiMode.mode === 'sketch' ? '2D' : '3D'}
         </span>
-        <menu className="flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
+        <menu className="flex flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
           <ToolbarButtons />
         </menu>
         <Popover.Button
@@ -335,7 +266,7 @@ export const Toolbar = () => {
             </Popover.Button>
           </section>
           <section>
-            <ToolbarButtons className="flex-wrap" />
+            <ToolbarButtons />
           </section>
         </Popover.Panel>
       </Transition>

src/components/ActionButton.tsx

@@ -23,7 +23,10 @@ type ActionButtonAsLink = BaseActionButtonProps &
   }
 
 type ActionButtonAsExternal = BaseActionButtonProps &
-  Omit<LinkProps, keyof BaseActionButtonProps> & {
+  Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof BaseActionButtonProps
+  > & {
     Element: 'externalLink'
   }
 
@@ -66,17 +69,12 @@ export const ActionButton = (props: ActionButtonProps) => {
       )
     }
     case 'externalLink': {
-      const { Element, to, icon, children, className, ...rest } = props
+      const { Element, icon, children, className, ...rest } = props
       return (
-        <Link
-          to={to || paths.INDEX}
-          className={classNames}
-          {...rest}
-          target="_blank"
-        >
+        <a className={classNames} {...rest}>
           {icon && <ActionIcon {...icon} />}
           {children}
-        </Link>
+        </a>
       )
     }
     default: {

src/components/ActionIcon.tsx

@@ -4,7 +4,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition as BrandIconDefinition } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { CustomIcon, CustomIconName } from './CustomIcon'
 
 const iconSizes = {
   sm: 12,
@@ -14,7 +13,7 @@ const iconSizes = {
 }
 
 export interface ActionIconProps extends React.PropsWithChildren {
-  icon?: SolidIconDefinition | BrandIconDefinition | CustomIconName
+  icon?: SolidIconDefinition | BrandIconDefinition
   className?: string
   bgClassName?: string
   iconClassName?: string
@@ -29,39 +28,25 @@ export const ActionIcon = ({
   size = 'md',
   children,
 }: ActionIconProps) => {
-  // By default, we reverse the icon color and background color in dark mode
-  const computedIconClassName =
-    iconClassName ||
-    `text-liquid-20 h-auto group-hover:text-liquid-10 hover:text-liquid-10 dark:text-chalkboard-100 dark:group-hover:text-chalkboard-100 dark:hover:text-chalkboard-100 group-disabled:bg-chalkboard-50 dark:group-disabled:bg-chalkboard-60 group-hover:group-disabled:bg-chalkboard-50 dark:group-hover:group-disabled:bg-chalkboard-50`
-
-  const computedBgClassName =
-    bgClassName ||
-    `bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-liquid-20 dark:group-hover:bg-liquid-10 dark:hover:bg-liquid-10 group-disabled:bg-chalkboard-80 dark:group-disabled:bg-chalkboard-80`
-
   return (
     <div
       className={
         `p-${
           size === 'xl' ? '2' : '1'
         } w-fit inline-grid place-content-center ${className} ` +
-        computedBgClassName
+        (bgClassName ||
+          'bg-chalkboard-100 group-hover:bg-chalkboard-90 hover:bg-chalkboard-90 dark:bg-liquid-20 dark:group-hover:bg-liquid-10 dark:hover:bg-liquid-10')
       }
     >
-      {children ? (
-        children
-      ) : typeof icon === 'string' ? (
-        <CustomIcon
-          name={icon}
-          width={iconSizes[size]}
-          height={iconSizes[size]}
-          className={computedIconClassName}
-        />
-      ) : (
+      {children || (
         <FontAwesomeIcon
           icon={icon}
           width={iconSizes[size]}
           height={iconSizes[size]}
-          className={computedIconClassName}
+          className={
+            iconClassName ||
+            'text-liquid-20 h-auto group-hover:text-liquid-10 hover:text-liquid-10 dark:text-liquid-100 dark:group-hover:text-liquid-100 dark:hover:text-liquid-100'
+          }
         />
       )}
     </div>

src/components/AppHeader.tsx

@@ -29,7 +29,7 @@ export const AppHeader = ({
   return (
     <header
       className={
-        (showToolbar ? 'w-full grid ' : 'flex justify-between ') +
+        (showToolbar ? 'grid ' : 'flex justify-between ') +
         styles.header +
         ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
@@ -38,7 +38,7 @@ export const AppHeader = ({
       <ProjectSidebarMenu renderAsLink={!enableMenu} project={project} />
       {/* Toolbar if the context deems it */}
       {showToolbar && (
-        <div className="max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
+        <div className="max-w-4xl">
           <Toolbar />
         </div>
       )}

src/components/AvailableVarsHelpers.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState, useRef } from 'react'
-import { parse, BinaryPart, Value, executor } from '../lang/wasm'
+import { parser_wasm } from '../lang/abstractSyntaxTree'
+import { BinaryPart, Value } from '../lang/abstractSyntaxTreeTypes'
+import { executor } from '../lang/executor'
 import {
   createIdentifier,
   createLiteral,
@@ -8,7 +10,6 @@ import {
 } from '../lang/modifyAst'
 import { findAllPreviousVariables, PrevVariable } from '../lang/queryAst'
 import { useStore } from '../useStore'
-import { engineCommandManager } from '../lang/std/engineConnection'
 
 export const AvailableVars = ({
   onVarClick,
@@ -91,12 +92,12 @@ export function useCalc({
   newVariableInsertIndex: number
   setNewVariableName: (a: string) => void
 } {
-  const { ast, programMemory, selectionRange, defaultPlanes } = useStore(
+  const { ast, programMemory, selectionRange, engineCommandManager } = useStore(
     (s) => ({
       ast: s.ast,
       programMemory: s.programMemory,
       selectionRange: s.selectionRanges.codeBasedSelections[0].range,
-      defaultPlanes: s.defaultPlanes,
+      engineCommandManager: s.engineCommandManager,
     })
   )
   const inputRef = useRef<HTMLInputElement>(null)
@@ -139,29 +140,27 @@ export function useCalc({
   }, [ast, programMemory, selectionRange])
 
   useEffect(() => {
+    if (!engineCommandManager) return
     try {
       const code = `const __result__ = ${value}\nshow(__result__)`
-      const ast = parse(code)
+      const ast = parser_wasm(code)
       const _programMem: any = { root: {}, return: null }
       availableVarInfo.variables.forEach(({ key, value }) => {
         _programMem.root[key] = { type: 'userVal', value, __meta: [] }
       })
-      if (!defaultPlanes) return
-      executor(ast, _programMem, engineCommandManager, defaultPlanes!).then(
-        (programMemory) => {
-          const resultDeclaration = ast.body.find(
-            (a) =>
-              a.type === 'VariableDeclaration' &&
-              a.declarations?.[0]?.id?.name === '__result__'
-          )
-          const init =
-            resultDeclaration?.type === 'VariableDeclaration' &&
-            resultDeclaration?.declarations?.[0]?.init
-          const result = programMemory?.root?.__result__?.value
-          setCalcResult(typeof result === 'number' ? String(result) : 'NAN')
-          init && setValueNode(init)
-        }
-      )
+      executor(ast, _programMem, engineCommandManager).then((programMemory) => {
+        const resultDeclaration = ast.body.find(
+          (a) =>
+            a.type === 'VariableDeclaration' &&
+            a.declarations?.[0]?.id?.name === '__result__'
+        )
+        const init =
+          resultDeclaration?.type === 'VariableDeclaration' &&
+          resultDeclaration?.declarations?.[0]?.init
+        const result = programMemory?.root?.__result__?.value
+        setCalcResult(typeof result === 'number' ? String(result) : 'NAN')
+        init && setValueNode(init)
+      })
     } catch (e) {
       setCalcResult('NAN')
       setValueNode(null)

src/components/CodeMenu.tsx

@@ -1,15 +1,11 @@
 import { Menu } from '@headlessui/react'
 import { PropsWithChildren } from 'react'
-import {
-  faArrowUpRightFromSquare,
-  faEllipsis,
-} from '@fortawesome/free-solid-svg-icons'
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from './ActionIcon'
 import { useStore } from 'useStore'
 import styles from './CodeMenu.module.css'
 import { useConvertToVariable } from 'hooks/useToolbarGuards'
 import { editorShortcutMeta } from './TextEditor'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export const CodeMenu = ({ children }: PropsWithChildren) => {
   const { formatCode } = useStore((s) => ({
@@ -23,8 +19,7 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
       <div
         className="relative"
         onClick={(e) => {
-          const target = e.target as HTMLElement
-          if (e.eventPhase === 3 && target.closest('a') === null) {
+          if (e.eventPhase === 3) {
             e.stopPropagation()
             e.preventDefault()
           }
@@ -57,24 +52,6 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
               </button>
             </Menu.Item>
           )}
-          <Menu.Item>
-            <a
-              className={styles.button}
-              href="https://github.com/KittyCAD/modeling-app/blob/main/docs/kcl/std.md"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span>Read the KCL docs</span>
-              <small>
-                On GitHub
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="ml-1 align-text-top"
-                  width={12}
-                />
-              </small>
-            </a>
-          </Menu.Item>
         </Menu.Items>
       </div>
     </Menu>

src/components/CommandBar.tsx

@@ -62,7 +62,7 @@ export const CommandBarProvider = ({
 
 const CommandBar = () => {
   const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
-  useHotkeys(['meta+k', 'meta+/'], () => {
+  useHotkeys('meta+k', () => {
     if (commands.length === 0) return
     setCommandBarOpen(!commandBarOpen)
   })
@@ -221,10 +221,10 @@ const CommandBar = () => {
           <Combobox
             value={selectedCommand}
             onChange={handleCommandSelection}
-            className="relative w-full max-w-xl p-2 mx-auto border rounded shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
+            className="rounded relative mx-auto p-2 bg-chalkboard-10 dark:bg-chalkboard-100 border dark:border-chalkboard-70 max-w-xl w-full shadow-lg"
             as="div"
           >
-            <div className="flex items-center gap-2">
+            <div className="flex gap-2 items-center">
               <ActionIcon icon={faSearch} size="xl" className="rounded-sm" />
               <div>
                 {inSubCommand && (
@@ -235,7 +235,7 @@ const CommandBar = () => {
                 )}
                 <Combobox.Input
                   onChange={(event) => setQuery(event.target.value)}
-                  className="w-full bg-transparent focus:outline-none"
+                  className="bg-transparent focus:outline-none w-full"
                   onKeyDown={(event) => {
                     if (event.metaKey && event.key === 'k')
                       setCommandBarOpen(false)
@@ -264,12 +264,12 @@ const CommandBar = () => {
                 />
               </div>
             </div>
-            <Combobox.Options static className="overflow-y-auto max-h-96">
+            <Combobox.Options static className="max-h-96 overflow-y-auto">
               {filteredCommands?.map((commandResult) => (
                 <Combobox.Option
                   key={commandResult.item.name}
                   value={commandResult}
-                  className="px-2 py-1 my-2 first:mt-4 last:mb-4 ui-active:bg-liquid-10 dark:ui-active:bg-liquid-90"
+                  className="my-2 first:mt-4 last:mb-4 ui-active:bg-liquid-10 dark:ui-active:bg-liquid-90 py-1 px-2"
                 >
                   <p>{commandResult.item.name}</p>
                   {(commandResult.item as SubCommand).description && (

src/components/CustomIcon.tsx

@@ -1,161 +0,0 @@
-export type CustomIconName =
-  | 'equal'
-  | 'exit'
-  | 'extrude'
-  | 'horizontal'
-  | 'line'
-  | 'move'
-  | 'parallel'
-  | 'sketch'
-  | 'vertical'
-
-export const CustomIcon = ({
-  name,
-  ...props
-}: {
-  name: CustomIconName
-} & React.SVGProps<SVGSVGElement>) => {
-  switch (name) {
-    case 'equal':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M5 8.78V7H14.52V8.78H5ZM5 13.02V11.24H14.52V13.02H5Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'exit':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M17 10L3 10M3 10L6.5 6.5M3 10L6.5 13.5"
-            stroke="currentColor"
-          />
-        </svg>
-      )
-
-    case 'extrude':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M10 3L10.3536 3.35355L12.3536 5.35355L11.6465 6.06066L10.5 4.91421V11.5854C11.0826 11.7913 11.5 12.3469 11.5 13C11.5 13.8284 10.8284 14.5 10 14.5C9.17157 14.5 8.5 13.8284 8.5 13C8.5 12.3469 8.91741 11.7913 9.5 11.5854V4.91421L8.35356 6.06066L7.64645 5.35355L9.64645 3.35355L10 3ZM1.95887 12.3282L8 8.63644V9.80838L2.91773 12.9142L10 17.2423L17.0823 12.9142L12 9.80838V8.63644L18.0411 12.3282L19 12.9142L19 14.9683H18V13.5253L10.5 18.1087V19.9683H9.5V18.1087L2 13.5253V14.9683H1L1 12.9142L1.95887 12.3282Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'horizontal':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M4 9.5H16V11.5H4V9.5Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'line':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M15.5 6C16.3284 6 17 5.32843 17 4.5C17 3.67157 16.3284 3 15.5 3C14.6716 3 14 3.67157 14 4.5C14 4.73107 14.0522 4.94993 14.1456 5.14543L5.14543 14.1456C4.94993 14.0522 4.73107 14 4.5 14C3.67157 14 3 14.6716 3 15.5C3 16.3284 3.67157 17 4.5 17C5.32843 17 6 16.3284 6 15.5C6 15.2679 5.94729 15.0482 5.8532 14.852L14.852 5.8532C15.0482 5.94729 15.2679 6 15.5 6Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'move':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M10 2.29289L10.3536 2.64645L12.3536 4.64645L11.6465 5.35355L10.5 4.20711V8V9.50001H12L15.7929 9.50001L14.6465 8.35356L15.3536 7.64645L17.3536 9.64645L17.7071 10L17.3536 10.3536L15.3536 12.3536L14.6465 11.6465L15.7929 10.5H12H10.5V12V15.7929L11.6465 14.6464L12.3536 15.3536L10.3536 17.3536L10 17.7071L9.64645 17.3536L7.64645 15.3536L8.35356 14.6464L9.50001 15.7929V12V10.5H8.00001H4.20712L5.35357 11.6465L4.64646 12.3536L2.64646 10.3536L2.29291 10L2.64646 9.64645L4.64646 7.64645L5.35357 8.35356L4.20712 9.50001H8.00001H9.50001V8V4.20711L8.35356 5.35355L7.64645 4.64645L9.64645 2.64645L10 2.29289Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'parallel':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8 16V4H6V16H8ZM14 16V4H12V16H14Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'sketch':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M14.8037 13.4035L15.5509 14.1635L16.3682 16.8386L13.5521 16.1346L12.8186 15.3885L14.8037 13.4035ZM14.1025 12.6903L12.1175 14.6754L3.48609 5.89624C2.94588 5.34678 2.94963 4.46456 3.49448 3.91971C4.04591 3.36828 4.94112 3.37208 5.48786 3.92817L14.1025 12.6903ZM6.20094 3.22709L16.4357 13.6371L17.5003 17.1216L17.8412 18.2376L16.7091 17.9546L13.0364 17.0364L2.77301 6.59732C1.84793 5.6564 1.85434 4.14564 2.78737 3.2126C3.73167 2.2683 5.26468 2.27481 6.20094 3.22709Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-    case 'vertical':
-      return (
-        <svg
-          {...props}
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M11 4V16H9V4H11Z"
-            fill="currentColor"
-          />
-        </svg>
-      )
-  }
-}

src/components/DebugPanel.tsx

@@ -1,4 +1,5 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
+import { useStore } from '../useStore'
 import { v4 as uuidv4 } from 'uuid'
 import { EngineCommand } from '../lang/std/engineConnection'
 import { useState } from 'react'
@@ -6,7 +7,6 @@ import { ActionButton } from '../components/ActionButton'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { isReducedMotion } from 'lang/util'
 import { AstExplorer } from './AstExplorer'
-import { engineCommandManager } from '../lang/std/engineConnection'
 
 type SketchModeCmd = Extract<
   Extract<EngineCommand, { type: 'modeling_cmd_req' }>['cmd'],
@@ -14,6 +14,9 @@ type SketchModeCmd = Extract<
 >
 
 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
+  const { engineCommandManager } = useStore((s) => ({
+    engineCommandManager: s.engineCommandManager,
+  }))
   const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
     type: 'default_camera_enable_sketch_mode',
     origin: { x: 0, y: 0, z: 0 },
@@ -27,11 +30,7 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
   return (
     <CollapsiblePanel
       {...props}
-      className={
-        '!absolute overflow-hidden !h-auto bottom-5 right-5 ' + className
-      }
-      // header height, top-5, and bottom-5
-      style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
+      className={'!absolute !h-auto bottom-5 right-5 ' + className}
     >
       <section className="p-4 flex flex-col gap-4">
         <Xyz
@@ -67,18 +66,19 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
             className="w-16"
             type="checkbox"
             checked={sketchModeCmd.ortho}
-            onChange={(a) =>
+            onChange={(a) => {
+              console.log(a, (a as any).checked)
               setSketchModeCmd({
                 ...sketchModeCmd,
                 ortho: a.target.checked,
               })
-            }
+            }}
           />
         </div>
         <ActionButton
           Element="button"
           onClick={() => {
-            engineCommandManager.sendSceneCommand({
+            engineCommandManager?.sendSceneCommand({
               type: 'modeling_cmd_req',
               cmd: sketchModeCmd,
               cmd_id: uuidv4(),

src/components/DownloadAppBanner.tsx

@@ -40,12 +40,12 @@ const DownloadAppBanner = () => {
           </code>
           , and isn't backed up anywhere! Visit{' '}
           <a
-            href="https://kittycad.io/modeling-app/download"
+            href="https://github.com/KittyCAD/modeling-app/releases"
             rel="noopener noreferrer"
             target="_blank"
             className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
           >
-            our website
+            our GitHub repository
           </a>{' '}
           to download the app for the best experience.
         </p>

src/components/ErrorPage.tsx

@@ -1,60 +1,8 @@
-import { isTauri } from 'lib/isTauri'
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom'
-import { ActionButton } from './ActionButton'
-import {
-  faBug,
-  faHome,
-  faRefresh,
-  faTrash,
-} from '@fortawesome/free-solid-svg-icons'
-
 export const ErrorPage = () => {
-  let error = useRouteError()
-
-  console.error('error', error)
-
   return (
     <div className="flex flex-col items-center justify-center h-screen">
-      <section className="max-w-full xl:max-w-4xl mx-auto">
-        <h1 className="text-4xl mb-8 font-bold">
-          An unexpected error occurred
-        </h1>
-        {isRouteErrorResponse(error) && (
-          <p className="mb-8">
-            {error.status}: {error.data}
-          </p>
-        )}
-        <div className="flex justify-between gap-2 mt-6">
-          {isTauri() && (
-            <ActionButton Element="link" to={'/'} icon={{ icon: faHome }}>
-              Go Home
-            </ActionButton>
-          )}
-          <ActionButton
-            Element="button"
-            icon={{ icon: faRefresh }}
-            onClick={() => window.location.reload()}
-          >
-            Reload
-          </ActionButton>
-          <ActionButton
-            Element="button"
-            icon={{ icon: faTrash }}
-            onClick={() => {
-              window.localStorage.clear()
-            }}
-          >
-            Clear storage
-          </ActionButton>
-          <ActionButton
-            Element="externalLink"
-            icon={{ icon: faBug }}
-            to="https://github.com/KittyCAD/modeling-app/issues/new"
-          >
-            Report Bug
-          </ActionButton>
-        </div>
-      </section>
+      <h1 className="text-4xl font-bold">404</h1>
+      <p className="text-2xl font-bold">Page not found</p>
     </div>
   )
 }

src/components/ExportButton.tsx

@@ -1,17 +1,13 @@
 import { v4 as uuidv4 } from 'uuid'
+import { useStore } from '../useStore'
 import { faFileExport, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from './ActionButton'
 import Modal from 'react-modal'
 import React from 'react'
 import { useFormik } from 'formik'
 import { Models } from '@kittycad/lib'
-import { engineCommandManager } from '../lang/std/engineConnection'
-import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 
 type OutputFormat = Models['OutputFormat_type']
-type OutputTypeKey = OutputFormat['type']
-type ExtractStorageTypes<T> = T extends { storage: infer U } ? U : never
-type StorageUnion = ExtractStorageTypes<OutputFormat>
 
 interface ExportButtonProps extends React.PropsWithChildren {
   className?: {
@@ -22,19 +18,14 @@ interface ExportButtonProps extends React.PropsWithChildren {
 }
 
 export const ExportButton = ({ children, className }: ExportButtonProps) => {
+  const { engineCommandManager } = useStore((s) => ({
+    engineCommandManager: s.engineCommandManager,
+  }))
+
   const [modalIsOpen, setIsOpen] = React.useState(false)
-  const {
-    settings: {
-      state: {
-        context: { baseUnit },
-      },
-    },
-  } = useGlobalStateContext()
 
   const defaultType = 'gltf'
-  const [type, setType] = React.useState<OutputTypeKey>(defaultType)
-  const defaultStorage = 'embedded'
-  const [storage, setStorage] = React.useState<StorageUnion>(defaultStorage)
+  const [type, setType] = React.useState(defaultType)
 
   function openModal() {
     setIsOpen(true)
@@ -47,7 +38,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
   // Default to gltf and embedded.
   const initialValues: OutputFormat = {
     type: defaultType,
-    storage: defaultStorage,
+    storage: 'embedded',
     presentation: 'pretty',
   }
   const formik = useFormik({
@@ -75,18 +66,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
           },
         }
       }
-      if (values.type === 'obj' || values.type === 'stl') {
-        values.units = baseUnit
-      }
-      if (
-        values.type === 'ply' ||
-        values.type === 'stl' ||
-        values.type === 'gltf'
-      ) {
-        // Set the storage type.
-        values.storage = storage
-      }
-      engineCommandManager.sendSceneCommand({
+      engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'export',
@@ -95,7 +75,6 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
           // in the scene to export. In that case, you'd pass the IDs thru here.
           entity_ids: [],
           format: values,
-          source_unit: baseUnit,
         },
         cmd_id: uuidv4(),
       })
@@ -130,17 +109,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
                 id="type"
                 name="type"
                 onChange={(e) => {
-                  setType(e.target.value as OutputTypeKey)
-                  if (e.target.value === 'gltf') {
-                    // Set default to embedded.
-                    setStorage('embedded')
-                  } else if (e.target.value === 'ply') {
-                    // Set default to ascii.
-                    setStorage('ascii')
-                  } else if (e.target.value === 'stl') {
-                    // Set default to ascii.
-                    setStorage('ascii')
-                  }
+                  setType(e.target.value)
                   formik.handleChange(e)
                 }}
                 className="bg-chalkboard-20 dark:bg-chalkboard-90 w-full"
@@ -158,10 +127,10 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
                 <select
                   id="storage"
                   name="storage"
-                  onChange={(e) => {
-                    setStorage(e.target.value as StorageUnion)
-                    formik.handleChange(e)
-                  }}
+                  onChange={formik.handleChange}
+                  value={
+                    'storage' in formik.values ? formik.values.storage : ''
+                  }
                   className="bg-chalkboard-20 dark:bg-chalkboard-90 w-full"
                 >
                   {type === 'gltf' && (

src/components/GlobalStateProvider.tsx

@@ -24,9 +24,6 @@ import {
   StateFrom,
 } from 'xstate'
 import { useCommandsContext } from 'hooks/useCommandsContext'
-import { invoke } from '@tauri-apps/api'
-import { isTauri } from 'lib/isTauri'
-import { VITE_KC_API_BASE_URL } from 'env'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -111,7 +108,6 @@ export const GlobalStateProvider = ({
     actions: {
       goToSignInPage: () => {
         navigate(paths.SIGN_IN)
-
         logout()
       },
       goToIndexPage: () => {
@@ -153,12 +149,10 @@ export const GlobalStateProvider = ({
 export default GlobalStateProvider
 
 export function logout() {
+  const url = withBaseUrl('/logout')
   localStorage.removeItem(TOKEN_PERSIST_KEY)
-  return (
-    !isTauri() &&
-    fetch(withBaseUrl('/logout'), {
-      method: 'POST',
-      credentials: 'include',
-    })
-  )
+  return fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+  })
 }

src/components/MemoryPanel.test.tsx

@@ -1,6 +1,7 @@
 import { processMemory } from './MemoryPanel'
+import { parser_wasm } from '../lang/abstractSyntaxTree'
 import { enginelessExecutor } from '../lib/testHelpers'
-import { initPromise, parse } from '../lang/wasm'
+import { initPromise } from '../lang/rust'
 
 beforeAll(() => initPromise)
 
@@ -14,20 +15,18 @@ describe('processMemory', () => {
   }
   const otherVar = myFn(5)
 
-  const theExtrude = startSketchOn('XY')
-    |> startProfileAt([0, 0], %)
+  const theExtrude = startSketchAt([0, 0])
     |> lineTo([-2.4, myVar], %)
     |> lineTo([-0.76, otherVar], %)
     |> extrude(4, %)
 
-  const theSketch = startSketchOn('XY')
-    |> startProfileAt([0, 0], %)
+  const theSketch = startSketchAt([0, 0])
     |> lineTo([-3.35, 0.17], %)
     |> lineTo([0.98, 5.16], %)
     |> lineTo([2.15, 4.32], %)
     // |> rx(90, %)
   show(theExtrude, theSketch)`
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast, {
       root: {},
       return: null,

src/components/MemoryPanel.tsx

@@ -2,7 +2,7 @@ import ReactJson from 'react-json-view'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
 import { useStore } from '../useStore'
 import { useMemo } from 'react'
-import { ProgramMemory, Path, ExtrudeSurface } from '../lang/wasm'
+import { ProgramMemory, Path, ExtrudeSurface } from '../lang/executor'
 import { Themes } from '../lib/theme'
 
 interface MemoryPanelProps extends CollapsiblePanelProps {
@@ -24,11 +24,7 @@ export const MemoryPanel = ({
     <CollapsiblePanel {...props}>
       <div className="h-full relative">
         <div className="absolute inset-0 flex flex-col items-start">
-          <div
-            className="overflow-y-auto h-full console-tile w-full"
-            style={{ marginBottom: 36 }}
-          >
-            {/* 36px is the height of PanelHeader */}
+          <div className=" h-full console-tile w-full">
             <ReactJson
               src={ProcessedMemory}
               collapsed={1}
@@ -50,7 +46,7 @@ export const MemoryPanel = ({
 
 export const processMemory = (programMemory: ProgramMemory) => {
   const processedMemory: any = {}
-  Object.keys(programMemory?.root || {}).forEach((key) => {
+  Object.keys(programMemory.root).forEach((key) => {
     const val = programMemory.root[key]
     if (typeof val.value !== 'function') {
       if (val.type === 'SketchGroup') {

src/components/ModelingMachineProvider.tsx

@@ -0,0 +1,106 @@
+import { useMachine } from '@xstate/react'
+import React, { createContext, useRef } from 'react'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+} from 'xstate'
+import { modelingMachine } from 'machines/modelingMachine'
+import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
+import { useCodeEval } from 'hooks/useCodeEval'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+export const ModelingMachineContext = createContext(
+  {} as MachineContext<typeof modelingMachine>
+)
+
+export const ModelingMachineProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const {
+    auth: {
+      context: { token },
+    },
+  } = useGlobalStateContext()
+  const streamRef = useRef<HTMLDivElement>(null)
+  useSetupEngineManager(streamRef, token)
+  useCodeEval()
+
+  // const { commands } = useCommandsContext()
+
+  // Settings machine setup
+  // const retrievedSettings = useRef(
+  // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
+  // )
+
+  // What should we persist from modeling state? Nothing?
+  // const persistedSettings = Object.assign(
+  //   settingsMachine.initialState.context,
+  //   JSON.parse(retrievedSettings.current) as Partial<
+  //     (typeof settingsMachine)['context']
+  //   >
+  // )
+
+  const [modelingState, modelingSend] = useMachine(modelingMachine, {
+    // context: persistedSettings,
+    actions: {
+      'Modify AST': () => {},
+      'Make selection horizontal': () => {},
+      'Make selection vertical': () => {},
+      'Update code selection cursors': () => {},
+    },
+    guards: {
+      'Can make selection horizontal': () => true,
+      'Can make selection vertical': () => true,
+      'Selection contains axis': () => true,
+      'Selection contains edge': () => true,
+      'Selection contains face': () => true,
+      'Selection contains line': () => true,
+      'Selection contains point': () => true,
+      'Selection is empty': () => true,
+      'Selection is not empty': () => true,
+      'Selection is one face': () => true,
+      'Selection is one or more edges': () => true,
+    },
+    services: {
+      createSketch: async () => {},
+      createLine: async () => {},
+      createExtrude: async () => {},
+      createFillet: async () => {},
+    },
+  })
+
+  // useStateMachineCommands({
+  //   state: settingsState,
+  //   send: settingsSend,
+  //   commands,
+  //   owner: 'settings',
+  //   commandBarMeta: settingsCommandBarMeta,
+  // })
+
+  return (
+    <ModelingMachineContext.Provider
+      value={{
+        state: modelingState,
+        context: modelingState.context,
+        send: modelingSend,
+      }}
+    >
+      <div className="h-screen overflow-hidden select-none" ref={streamRef}>
+        {children}
+      </div>
+    </ModelingMachineContext.Provider>
+  )
+}
+
+export default ModelingMachineProvider

src/components/OpenFileButton.tsx

@@ -0,0 +1,42 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import { open } from '@tauri-apps/api/dialog'
+import { useStore } from '../useStore'
+
+export const OpenFileButton = () => {
+  const { setCode } = useStore((s) => ({
+    setCode: s.setCode,
+  }))
+  const handleClick = async () => {
+    const selected = await open({
+      multiple: false,
+      directory: false,
+      filters: [
+        {
+          name: 'CAD',
+          extensions: ['toml'],
+        },
+      ],
+    })
+    if (Array.isArray(selected)) {
+      // User selected multiple files
+      // We should not get here, since multiple is false.
+    } else if (selected === null) {
+      // User cancelled the selection
+      // Do nothing.
+    } else {
+      // User selected a single file
+      // We want to invoke our command to read the file.
+      const json: string = await invoke('read_toml', { path: selected })
+      const packageDetails = JSON.parse(json).package
+      if (packageDetails.main) {
+        const absPath = [
+          ...selected.split('/').slice(0, -1),
+          packageDetails.main,
+        ].join('/')
+        const file: string = await invoke('read_txt_file', { path: absPath })
+        setCode(file)
+      }
+    }
+  }
+  return <button onClick={() => handleClick()}>Open File</button>
+}

src/components/ProjectSidebarMenu.test.tsx

@@ -2,8 +2,6 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
-import { GlobalStateProvider } from './GlobalStateProvider'
-import CommandBarProvider from './CommandBar'
 
 const now = new Date()
 const projectWellFormed = {
@@ -40,11 +38,7 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders the project name', () => {
     render(
       <BrowserRouter>
-        <CommandBarProvider>
-          <GlobalStateProvider>
-            <ProjectSidebarMenu project={projectWellFormed} />
-          </GlobalStateProvider>
-        </CommandBarProvider>
+        <ProjectSidebarMenu project={projectWellFormed} />
       </BrowserRouter>
     )
 
@@ -61,11 +55,7 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders app name if given no project', () => {
     render(
       <BrowserRouter>
-        <CommandBarProvider>
-          <GlobalStateProvider>
-            <ProjectSidebarMenu />
-          </GlobalStateProvider>
-        </CommandBarProvider>
+        <ProjectSidebarMenu />
       </BrowserRouter>
     )
 
@@ -79,14 +69,7 @@ describe('ProjectSidebarMenu tests', () => {
   test('Renders as a link if set to do so', () => {
     render(
       <BrowserRouter>
-        <CommandBarProvider>
-          <GlobalStateProvider>
-            <ProjectSidebarMenu
-              project={projectWellFormed}
-              renderAsLink={true}
-            />
-          </GlobalStateProvider>
-        </CommandBarProvider>
+        <ProjectSidebarMenu project={projectWellFormed} renderAsLink={true} />
       </BrowserRouter>
     )
 

src/components/ProjectSidebarMenu.tsx

@@ -16,8 +16,8 @@ const ProjectSidebarMenu = ({
 }) => {
   return renderAsLink ? (
     <Link
-      to={paths.HOME}
-      className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
+      to={'../'}
+      className="flex items-center gap-4 my-2"
       data-testid="project-sidebar-link"
     >
       <img
@@ -26,7 +26,7 @@ const ProjectSidebarMenu = ({
         className="h-9 w-auto"
       />
       <span
-        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block"
+        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max"
         data-testid="project-sidebar-link-name"
       >
         {project?.name ? project.name : 'KittyCAD Modeling App'}
@@ -35,15 +35,15 @@ const ProjectSidebarMenu = ({
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="h-9 max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
+        className="border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
         data-testid="project-sidebar-toggle"
       >
         <img
           src="/kitt-8bit-winking.svg"
           alt="KittyCAD App"
-          className="h-full w-auto"
+          className="h-9 w-auto"
         />
-        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
+        <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max">
           {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
         </span>
       </Popover.Button>

src/components/SetAngleLengthModal.tsx

@@ -1,6 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
-import { Value } from '../lang/wasm'
+import { Value } from '../lang/abstractSyntaxTreeTypes'
 import {
   AvailableVars,
   addToInputHelper,

src/components/SetHorVertDistanceModal.tsx

@@ -1,6 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
-import { Value } from '../lang/wasm'
+import { Value } from '../lang/abstractSyntaxTreeTypes'
 import {
   AvailableVars,
   addToInputHelper,

src/components/Stream.tsx

@@ -20,15 +20,7 @@ import {
   compareVec2Epsilon,
 } from 'lang/std/sketch'
 import { getNodeFromPath } from 'lang/queryAst'
-import {
-  Program,
-  VariableDeclarator,
-  rangeTypeFix,
-  modifyAstForSketch,
-} from 'lang/wasm'
-import { KCLError } from 'lang/errors'
-import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
-import { engineCommandManager } from '../lang/std/engineConnection'
+import { Program, VariableDeclarator } from 'lang/abstractSyntaxTreeTypes'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -36,6 +28,7 @@ export const Stream = ({ className = '' }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
     mediaStream,
+    engineCommandManager,
     setButtonDownInStream,
     didDragInStream,
     setDidDragInStream,
@@ -46,10 +39,9 @@ export const Stream = ({ className = '' }) => {
     updateAst,
     setGuiMode,
     programMemory,
-    defaultPlanes,
-    currentPlane,
   } = useStore((s) => ({
     mediaStream: s.mediaStream,
+    engineCommandManager: s.engineCommandManager,
     setButtonDownInStream: s.setButtonDownInStream,
     fileId: s.fileId,
     didDragInStream: s.didDragInStream,
@@ -61,8 +53,6 @@ export const Stream = ({ className = '' }) => {
     updateAst: s.updateAst,
     setGuiMode: s.setGuiMode,
     programMemory: s.programMemory,
-    defaultPlanes: s.defaultPlanes,
-    currentPlane: s.currentPlane,
   }))
   const {
     settings: {
@@ -79,7 +69,7 @@ export const Stream = ({ className = '' }) => {
     if (!videoRef.current) return
     if (!mediaStream) return
     videoRef.current.srcObject = mediaStream
-  }, [mediaStream])
+  }, [mediaStream, engineCommandManager])
 
   const handleMouseDown: MouseEventHandler<HTMLVideoElement> = (e) => {
     if (!videoRef.current) return
@@ -113,7 +103,7 @@ export const Stream = ({ className = '' }) => {
     }
 
     if (guiMode.mode === 'sketch' && guiMode.sketchMode === ('move' as any)) {
-      engineCommandManager.sendSceneCommand({
+      engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'handle_mouse_drag_start',
@@ -127,7 +117,7 @@ export const Stream = ({ className = '' }) => {
         guiMode.sketchMode === ('sketch_line' as any)
       )
     ) {
-      engineCommandManager.sendSceneCommand({
+      engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'camera_drag_start',
@@ -145,7 +135,7 @@ export const Stream = ({ className = '' }) => {
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
     if (!cameraMouseDragGuards[cameraControls].zoom.scrollCallback(e)) return
 
-    engineCommandManager.sendSceneCommand({
+    engineCommandManager?.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd: {
         type: 'default_camera_zoom',
@@ -183,7 +173,7 @@ export const Stream = ({ className = '' }) => {
     }
 
     if (!didDragInStream) {
-      engineCommandManager.sendSceneCommand({
+      engineCommandManager?.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
           type: 'select_with_point',
@@ -220,79 +210,21 @@ export const Stream = ({ className = '' }) => {
         window: { x, y },
       }
     }
-    engineCommandManager.sendSceneCommand(command).then(async (resp) => {
-      if (!(guiMode.mode === 'sketch')) return
-
-      if (guiMode.sketchMode === 'selectFace') return
-
-      // Check if the sketch group already exists.
-      const varDec = getNodeFromPath<VariableDeclarator>(
-        ast,
-        guiMode.pathToNode,
-        'VariableDeclarator'
-      ).node
-      const variableName = varDec?.id?.name
-      const sketchGroup = programMemory.root[variableName]
-      const isEditingExistingSketch =
-        sketchGroup?.type === 'SketchGroup' && sketchGroup.value.length
-      let sketchGroupId = ''
-      if (sketchGroup && sketchGroup.type === 'SketchGroup') {
-        sketchGroupId = sketchGroup.id
-      }
-
-      if (
-        guiMode.sketchMode === ('move' as any as 'line') &&
-        command.cmd.type === 'handle_mouse_drag_end'
-      ) {
-        // Let's get the updated ast.
-        if (sketchGroupId === '') return
-        // We have a problem if we do not have an id for the sketch group.
-        if (
-          guiMode.pathId === undefined ||
-          guiMode.pathId === null ||
-          guiMode.pathId === ''
-        )
-          return
-
-        let engineId = guiMode.pathId
-
-        // Get the current plane string for plane we are on.
-        let currentPlaneString = ''
-        if (currentPlane === defaultPlanes?.xy) {
-          currentPlaneString = 'XY'
-        } else if (currentPlane === defaultPlanes?.yz) {
-          currentPlaneString = 'YZ'
-        } else if (currentPlane === defaultPlanes?.xz) {
-          currentPlaneString = 'XZ'
-        }
-
-        // Do not supporting editing/moving lines on a non-default plane.
-        // Eventually we can support this but for now we will just throw an
-        // error.
-        if (currentPlaneString === '') return
-
-        const updatedAst: Program = await modifyAstForSketch(
-          engineCommandManager,
-          ast,
-          variableName,
-          currentPlaneString,
-          engineId
-        )
-
-        updateAst(updatedAst, false)
-        return
-      }
-
+    engineCommandManager?.sendSceneCommand(command).then(async (resp) => {
       if (command?.cmd?.type !== 'mouse_click' || !ast) return
-
-      if (!(guiMode.sketchMode === ('sketch_line' as any as 'line'))) return
+      if (
+        !(
+          guiMode.mode === 'sketch' &&
+          guiMode.sketchMode === ('sketch_line' as any as 'line')
+        )
+      )
+        return
 
       if (
         resp?.data?.data?.entities_modified?.length &&
-        guiMode.waitingFirstClick &&
-        !isEditingExistingSketch
+        guiMode.waitingFirstClick
       ) {
-        const curve = await engineCommandManager.sendSceneCommand({
+        const curve = await engineCommandManager?.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
@@ -302,46 +234,8 @@ export const Stream = ({ className = '' }) => {
         })
         const coords: { x: number; y: number }[] =
           curve.data.data.control_points
-
-        // We need the normal for the plane we are on.
-        const plane = await engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'get_sketch_mode_plane',
-          },
-        })
-        const z_axis = plane.data.data.z_axis
-
-        // Get the current axis.
-        let currentAxis: 'xy' | 'xz' | 'yz' | '-xy' | '-xz' | '-yz' | null =
-          null
-        if (currentPlane === defaultPlanes?.xy) {
-          if (z_axis.z === -1) {
-            currentAxis = '-xy'
-          } else {
-            currentAxis = 'xy'
-          }
-        } else if (currentPlane === defaultPlanes?.yz) {
-          if (z_axis.x === -1) {
-            currentAxis = '-yz'
-          } else {
-            currentAxis = 'yz'
-          }
-        } else if (currentPlane === defaultPlanes?.xz) {
-          if (z_axis.y === -1) {
-            currentAxis = '-xz'
-          } else {
-            currentAxis = 'xz'
-          }
-        }
-
-        // Do not support starting a new sketch on a non-default plane.
-        if (!currentAxis) return
-
         const _addStartSketch = addStartSketch(
           ast,
-          currentAxis,
           [roundOff(coords[0].x), roundOff(coords[0].y)],
           [
             roundOff(coords[1].x - coords[0].x),
@@ -351,27 +245,17 @@ export const Stream = ({ className = '' }) => {
         const _modifiedAst = _addStartSketch.modifiedAst
         const _pathToNode = _addStartSketch.pathToNode
 
-        // We need to update the guiMode with the right pathId so that we can
-        // move lines later and send the right sketch id to the engine.
-        for (const [id, artifact] of Object.entries(
-          engineCommandManager.artifactMap
-        )) {
-          if (artifact.commandType === 'start_path') {
-            guiMode.pathId = id
-          }
-        }
-
         setGuiMode({
           ...guiMode,
           pathToNode: _pathToNode,
           waitingFirstClick: false,
         })
-        updateAst(_modifiedAst, false)
+        updateAst(_modifiedAst)
       } else if (
         resp?.data?.data?.entities_modified?.length &&
-        (!guiMode.waitingFirstClick || isEditingExistingSketch)
+        !guiMode.waitingFirstClick
       ) {
-        const curve = await engineCommandManager.sendSceneCommand({
+        const curve = await engineCommandManager?.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
@@ -406,7 +290,6 @@ export const Stream = ({ className = '' }) => {
             fnName: 'line',
             pathToNode: guiMode.pathToNode,
           }).modifiedAst
-          updateAst(_modifiedAst, false)
         } else {
           _modifiedAst = addCloseToPipe({
             node: ast,
@@ -416,18 +299,8 @@ export const Stream = ({ className = '' }) => {
           setGuiMode({
             mode: 'default',
           })
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: { type: 'edit_mode_exit' },
-          })
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: { type: 'default_camera_disable_sketch_mode' },
-          })
-          updateAst(_modifiedAst, true)
         }
+        updateAst(_modifiedAst)
       }
     })
     setDidDragInStream(false)
@@ -460,8 +333,7 @@ export const Stream = ({ className = '' }) => {
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
         onMouseMoveCapture={handleMouseMove}
-        disablePictureInPicture
-        className={`w-full h-full ${isExecuting && 'blur-md'}`}
+        className={`w-full cursor-pointer h-full ${isExecuting && 'blur-md'}`}
         style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
       />
       {isLoading && (

src/components/TextEditor.tsx

@@ -29,8 +29,8 @@ import {
 import { isOverlap, roundOff } from 'lib/utils'
 import { kclErrToDiagnostic } from 'lang/errors'
 import { CSSRuleObject } from 'tailwindcss/types/config'
+import { useModelingContext } from 'hooks/useModelingContext'
 import interact from '@replit/codemirror-interact'
-import { engineCommandManager } from '../lang/std/engineConnection'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -51,8 +51,9 @@ export const TextEditor = ({
   const pathParams = useParams()
   const {
     code,
-    deferredSetCode,
+    defferedSetCode,
     editorView,
+    engineCommandManager,
     formatCode,
     isLSPServerReady,
     selectionRanges,
@@ -60,10 +61,12 @@ export const TextEditor = ({
     setEditorView,
     setIsLSPServerReady,
     setSelectionRanges,
+    sourceRangeMap,
   } = useStore((s) => ({
     code: s.code,
-    deferredSetCode: s.deferredSetCode,
+    defferedSetCode: s.defferedSetCode,
     editorView: s.editorView,
+    engineCommandManager: s.engineCommandManager,
     formatCode: s.formatCode,
     isLSPServerReady: s.isLSPServerReady,
     selectionRanges: s.selectionRanges,
@@ -71,8 +74,14 @@ export const TextEditor = ({
     setEditorView: s.setEditorView,
     setIsLSPServerReady: s.setIsLSPServerReady,
     setSelectionRanges: s.setSelectionRanges,
+    sourceRangeMap: s.sourceRangeMap,
   }))
 
+  const {
+    context: { selectionRanges: machineSelectionRanges },
+    send,
+  } = useModelingContext()
+
   const {
     settings: {
       context: { textWrapping },
@@ -123,7 +132,7 @@ export const TextEditor = ({
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
-    deferredSetCode(value)
+    defferedSetCode(value)
     if (isTauri() && pathParams.id) {
       // Save the file to disk
       // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
@@ -171,11 +180,11 @@ export const TextEditor = ({
     )
     const idBasedSelections = codeBasedSelections
       .map(({ type, range }) => {
-        const hasOverlap = Object.entries(
-          engineCommandManager.sourceRangeMap || {}
-        ).filter(([_, sourceRange]) => {
-          return isOverlap(sourceRange, range)
-        })
+        const hasOverlap = Object.entries(sourceRangeMap).filter(
+          ([_, sourceRange]) => {
+            return isOverlap(sourceRange, range)
+          }
+        )
         if (hasOverlap.length) {
           return {
             type,
@@ -185,7 +194,7 @@ export const TextEditor = ({
       })
       .filter(Boolean) as any
 
-    engineCommandManager.cusorsSelected({
+    engineCommandManager?.cusorsSelected({
       otherSelections: [],
       idBasedSelections,
     })
@@ -194,6 +203,14 @@ export const TextEditor = ({
       otherSelections: [],
       codeBasedSelections,
     })
+
+    send({
+      type: 'Set selection',
+      data: {
+        ...machineSelectionRanges,
+        codeBasedSelections,
+      },
+    })
   }
 
   const editorExtensions = useMemo(() => {

src/components/Toolbar/EqualAngle.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/wasm'
+import { Value, VariableDeclarator } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -12,8 +12,6 @@ import {
   getTransformInfos,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
 
 export const EqualAngle = () => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
@@ -84,22 +82,14 @@ export const EqualAngle = () => {
             transformInfos,
             programMemory,
           })
-        updateAst(modifiedAst, true, {
+        updateAst(modifiedAst, {
           callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
         })
       }}
       disabled={!enableEqual}
-      title="Parallel (or equal angle)"
-      className="group"
+      title="yo dawg"
     >
-      <ActionIcon
-        icon="parallel"
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      Parallel
+      parallel
     </button>
   )
 }

src/components/Toolbar/EqualLength.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { toolTips, useStore } from '../../useStore'
-import { Value, VariableDeclarator } from '../../lang/wasm'
+import { Value, VariableDeclarator } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -12,8 +12,6 @@ import {
   getTransformInfos,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
 
 export const EqualLength = () => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
@@ -84,22 +82,14 @@ export const EqualLength = () => {
             transformInfos,
             programMemory,
           })
-        updateAst(modifiedAst, true, {
+        updateAst(modifiedAst, {
           callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
         })
       }}
       disabled={!enableEqual}
-      className="group"
-      title="Equal Length"
+      title="yo dawg"
     >
-      <ActionIcon
-        icon="equal"
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      Equal Length
+      EqualLength
     </button>
   )
 }

src/components/Toolbar/HorzVert.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { Value } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -11,8 +11,6 @@ import {
   transformAstSketchLines,
 } from '../../lang/std/sketchcombos'
 import { updateCursors } from '../../lang/util'
-import { ActionIcon } from 'components/ActionIcon'
-import { sketchButtonClassnames } from 'Toolbar'
 
 export const HorzVert = ({
   horOrVert,
@@ -63,22 +61,14 @@ export const HorzVert = ({
           programMemory,
           referenceSegName: '',
         })
-        updateAst(modifiedAst, true, {
+        updateAst(modifiedAst, {
           callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
         })
       }}
       disabled={!enableHorz}
-      className="group"
-      title={horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
+      title="yo dawg"
     >
-      <ActionIcon
-        icon={horOrVert === 'horizontal' ? 'horizontal' : 'vertical'}
-        className="!p-0.5"
-        bgClassName={sketchButtonClassnames.background}
-        iconClassName={sketchButtonClassnames.icon}
-        size="md"
-      />
-      {horOrVert === 'horizontal' ? 'Horizontal' : 'Vertical'}
+      {horOrVert === 'horizontal' ? 'Horz' : 'Vert'}
     </button>
   )
 }

src/components/Toolbar/Intersect.tsx

@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react'
 import { create } from 'react-modal-promise'
 import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import {
+  BinaryPart,
+  Value,
+  VariableDeclarator,
+} from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -150,7 +154,7 @@ export const Intersect = () => {
           initialVariableName: 'offset',
         } as any)
         if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
+          updateAst(modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         } else {
@@ -178,15 +182,14 @@ export const Intersect = () => {
             )
             _modifiedAst.body = newBody
           }
-          updateAst(_modifiedAst, true, {
+          updateAst(_modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         }
       }}
       disabled={!enable}
-      title="Set Perpendicular Distance"
     >
-      Set Perpendicular Distance
+      perpendicularDistance
     </button>
   )
 }

src/components/Toolbar/RemoveConstrainingValues.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { Value } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -65,14 +65,14 @@ export const RemoveConstrainingValues = () => {
           programMemory,
           referenceSegName: '',
         })
-        updateAst(modifiedAst, true, {
+        updateAst(modifiedAst, {
           callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
         })
       }}
       disabled={!enableHorz}
-      title="Remove Constraining Values"
+      title="yo dawg"
     >
-      Remove Constraining Values
+      RemoveConstrainingValues
     </button>
   )
 }

src/components/Toolbar/SetAbsDistance.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { create } from 'react-modal-promise'
 import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { Value } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -22,16 +22,11 @@ import { updateCursors } from '../../lang/util'
 
 const getModalInfo = create(SetAngleLengthModal as any)
 
-type ButtonType = 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
-
-const buttonLabels: Record<ButtonType, string> = {
-  xAbs: 'Set distance from X Axis',
-  yAbs: 'Set distance from Y Axis',
-  snapToYAxis: 'Snap To Y Axis',
-  snapToXAxis: 'Snap To X Axis',
-}
-
-export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
+export const SetAbsDistance = ({
+  buttonType,
+}: {
+  buttonType: 'xAbs' | 'yAbs' | 'snapToYAxis' | 'snapToXAxis'
+}) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
       guiMode: s.guiMode,
@@ -129,17 +124,16 @@ export const SetAbsDistance = ({ buttonType }: { buttonType: ButtonType }) => {
             _modifiedAst.body = newBody
           }
 
-          updateAst(_modifiedAst, true, {
+          updateAst(_modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         } catch (e) {
-          console.log('error', e)
+          console.log('e', e)
         }
       }}
       disabled={!enableAngLen}
-      title={buttonLabels[buttonType]}
     >
-      {buttonLabels[buttonType]}
+      {buttonType}
     </button>
   )
 }

src/components/Toolbar/SetAngleBetween.tsx

@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react'
 import { create } from 'react-modal-promise'
 import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import {
+  BinaryPart,
+  Value,
+  VariableDeclarator,
+} from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -109,7 +113,7 @@ export const SetAngleBetween = () => {
           initialVariableName: 'angle',
         } as any)
         if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
+          updateAst(modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         } else {
@@ -137,15 +141,14 @@ export const SetAngleBetween = () => {
             )
             _modifiedAst.body = newBody
           }
-          updateAst(_modifiedAst, true, {
+          updateAst(_modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         }
       }}
       disabled={!enable}
-      title="Set Angle Between"
     >
-      Set Angle Between
+      angleBetween
     </button>
   )
 }

src/components/Toolbar/SetHorzVertDistance.tsx

@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react'
 import { create } from 'react-modal-promise'
 import { toolTips, useStore } from '../../useStore'
-import { BinaryPart, Value, VariableDeclarator } from '../../lang/wasm'
+import {
+  BinaryPart,
+  Value,
+  VariableDeclarator,
+} from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -20,23 +24,14 @@ import { updateCursors } from '../../lang/util'
 
 const getModalInfo = create(GetInfoModal as any)
 
-type ButtonType =
-  | 'setHorzDistance'
-  | 'setVertDistance'
-  | 'alignEndsHorizontally'
-  | 'alignEndsVertically'
-
-const buttonLabels: Record<ButtonType, string> = {
-  setHorzDistance: 'Set Horizontal Distance',
-  setVertDistance: 'Set Vertical Distance',
-  alignEndsHorizontally: 'Align Ends Horizontally',
-  alignEndsVertically: 'Align Ends Vertically',
-}
-
 export const SetHorzVertDistance = ({
   buttonType,
 }: {
-  buttonType: ButtonType
+  buttonType:
+    | 'setHorzDistance'
+    | 'setVertDistance'
+    | 'alignEndsHorizontally'
+    | 'alignEndsVertically'
 }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
@@ -142,7 +137,7 @@ export const SetHorzVertDistance = ({
               constraint === 'setHorzDistance' ? 'xDis' : 'yDis',
           } as any))
         if (segName === tagInfo?.tag && value === valueUsedInTransform) {
-          updateAst(modifiedAst, true, {
+          updateAst(modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         } else {
@@ -168,15 +163,14 @@ export const SetHorzVertDistance = ({
             )
             _modifiedAst.body = newBody
           }
-          updateAst(_modifiedAst, true, {
+          updateAst(_modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         }
       }}
       disabled={!enable}
-      title={buttonLabels[buttonType]}
     >
-      {buttonLabels[buttonType]}
+      {buttonType}
     </button>
   )
 }

src/components/Toolbar/setAngleLength.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { create } from 'react-modal-promise'
 import { toolTips, useStore } from '../../useStore'
-import { Value } from '../../lang/wasm'
+import { Value } from '../../lang/abstractSyntaxTreeTypes'
 import {
   getNodePathFromSourceRange,
   getNodeFromPath,
@@ -23,17 +23,10 @@ import { updateCursors } from '../../lang/util'
 
 const getModalInfo = create(SetAngleLengthModal as any)
 
-type ButtonType = 'setAngle' | 'setLength'
-
-const buttonLabels: Record<ButtonType, string> = {
-  setAngle: 'Set Angle',
-  setLength: 'Set Length',
-}
-
 export const SetAngleLength = ({
   angleOrLength,
 }: {
-  angleOrLength: ButtonType
+  angleOrLength: 'setAngle' | 'setLength'
 }) => {
   const { guiMode, selectionRanges, ast, programMemory, updateAst, setCursor } =
     useStore((s) => ({
@@ -143,17 +136,16 @@ export const SetAngleLength = ({
             _modifiedAst.body = newBody
           }
 
-          updateAst(_modifiedAst, true, {
+          updateAst(_modifiedAst, {
             callBack: updateCursors(setCursor, selectionRanges, pathToNodeMap),
           })
         } catch (e) {
-          console.log('erorr', e)
+          console.log('e', e)
         }
       }}
       disabled={!enableAngLen}
-      title={buttonLabels[angleOrLength]}
     >
-      {buttonLabels[angleOrLength]}
+      {angleOrLength}
     </button>
   )
 }

src/components/UserSidebarMenu.test.tsx

@@ -1,11 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import UserSidebarMenu from './UserSidebarMenu'
-import {
-  Route,
-  RouterProvider,
-  createMemoryRouter,
-  createRoutesFromElements,
-} from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
 import { GlobalStateProvider } from './GlobalStateProvider'
 import CommandBarProvider from './CommandBar'
@@ -98,24 +93,11 @@ describe('UserSidebarMenu tests', () => {
 
 function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
-  // We have to use a memory router in the testing environment,
-  // and we have to use the createMemoryRouter function instead of <MemoryRouter /> as of react-router v6.4:
-  // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
-  const router = createMemoryRouter(
-    createRoutesFromElements(
-      <Route
-        path="/file/:id"
-        element={
-          <CommandBarProvider>
-            <GlobalStateProvider>{children}</GlobalStateProvider>
-          </CommandBarProvider>
-        }
-      />
-    ),
-    {
-      initialEntries: ['/file/new'],
-      initialIndex: 0,
-    }
+  return (
+    <BrowserRouter>
+      <CommandBarProvider>
+        <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
+    </BrowserRouter>
   )
-  return <RouterProvider router={router} />
 }

src/components/UserSidebarMenu.tsx

@@ -1,24 +1,17 @@
 import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
-import {
-  faBars,
-  faBug,
-  faGear,
-  faSignOutAlt,
-} from '@fortawesome/free-solid-svg-icons'
+import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Fragment, useState } from 'react'
 import { paths } from '../Router'
+import makeUrlPathRelative from '../lib/makeUrlPathRelative'
 import { Models } from '@kittycad/lib'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
-import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 
 type User = Models['User_type']
 
 const UserSidebarMenu = ({ user }: { user?: User }) => {
-  const location = useLocation()
-  const filePath = useAbsoluteFilePath()
   const displayedName = getDisplayName(user)
   const [imageLoadFailed, setImageLoadFailed] = useState(false)
   const navigate = useNavigate()
@@ -45,7 +38,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
     <Popover className="relative">
       {user?.image && !imageLoadFailed ? (
         <Popover.Button
-          className="border-0 rounded-full w-fit min-w-max p-0 focus:outline-none group"
+          className="border-0 rounded-full w-fit p-0 focus:outline-none group"
           data-testid="user-sidebar-toggle"
         >
           <div className="rounded-full border border-chalkboard-70/50 hover:border-liquid-50 group-focus:border-liquid-50 overflow-hidden">
@@ -133,30 +126,19 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     // since /settings is a nested route the sidebar doesn't close
                     // automatically when navigating to it
                     close()
-                    const targetPath = location.pathname.includes(paths.FILE)
-                      ? filePath + paths.SETTINGS
-                      : paths.HOME + paths.SETTINGS
-                    navigate(targetPath)
+                    navigate(makeUrlPathRelative(paths.SETTINGS))
                   }}
                 >
                   Settings
                 </ActionButton>
                 <ActionButton
-                  Element="externalLink"
+                  Element="link"
                   to="https://github.com/KittyCAD/modeling-app/discussions"
                   icon={{ icon: faGithub }}
                   className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
                 >
                   Request a feature
                 </ActionButton>
-                <ActionButton
-                  Element="externalLink"
-                  to="https://github.com/KittyCAD/modeling-app/issues/new"
-                  icon={{ icon: faBug }}
-                  className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
-                >
-                  Report a bug
-                </ActionButton>
                 <ActionButton
                   Element="button"
                   onClick={() => send('Log out')}

src/editor/lsp/client.ts

@@ -109,6 +109,7 @@ export default class Client extends jsrpc.JSONRPCServerAndClient {
         }
       }
       messageString += message
+      // console.log(messageString)
       return
     })
 

src/editor/lsp/plugin.ts

@@ -13,7 +13,6 @@ import {
   CompletionItemKind,
   CompletionTriggerKind,
 } from 'vscode-languageserver-protocol'
-import debounce from 'debounce-promise'
 
 import type {
   Completion,
@@ -54,11 +53,14 @@ export class LanguageServerPlugin implements PluginValue {
   private languageId: string
   private documentVersion: number
 
+  private changesTimeout: number
+
   constructor(private view: EditorView, private allowHTMLContent: boolean) {
     this.client = this.view.state.facet(client)
     this.documentUri = this.view.state.facet(documentUri)
     this.languageId = this.view.state.facet(languageId)
     this.documentVersion = 0
+    this.changesTimeout = 0
 
     this.client.attachPlugin(this)
 
@@ -69,10 +71,12 @@ export class LanguageServerPlugin implements PluginValue {
 
   update({ docChanged }: ViewUpdate) {
     if (!docChanged) return
-
-    this.sendChange({
-      documentText: this.view.state.doc.toString(),
-    })
+    if (this.changesTimeout) clearTimeout(this.changesTimeout)
+    this.changesTimeout = window.setTimeout(() => {
+      this.sendChange({
+        documentText: this.view.state.doc.toString(),
+      })
+    }, changesDelay)
   }
 
   destroy() {
@@ -95,32 +99,14 @@ export class LanguageServerPlugin implements PluginValue {
 
   async sendChange({ documentText }: { documentText: string }) {
     if (!this.client.ready) return
-
-    if (documentText.length > 5000) {
-      // Clear out the text it thinks we have, large documents will throw a stack error.
-      // This is obviously not a good fix but it works for now til we figure
-      // out the stack limits in wasm and also rewrite the parser.
-      // Since this is only for hover and completions it will be fine,
-      // completions will still work for stdlib but hover will not.
-      // That seems like a fine trade-off for a working editor for the time
-      // being.
-      documentText = ''
-    }
-
     try {
-      debounce(
-        () => {
-          return this.client.textDocumentDidChange({
-            textDocument: {
-              uri: this.documentUri,
-              version: this.documentVersion++,
-            },
-            contentChanges: [{ text: documentText }],
-          })
+      await this.client.textDocumentDidChange({
+        textDocument: {
+          uri: this.documentUri,
+          version: this.documentVersion++,
         },
-        changesDelay,
-        { leading: true }
-      )
+        contentChanges: [{ text: documentText }],
+      })
     } catch (e) {
       console.error(e)
     }

src/editor/lsp/server.ts

@@ -5,6 +5,8 @@ import init, {
 } from '../../wasm-lib/pkg/wasm_lib'
 import { FromServer, IntoServer } from './codec'
 
+let server: null | Server
+
 export default class Server {
   readonly initOutput: InitOutput
   readonly #intoServer: IntoServer
@@ -24,8 +26,12 @@ export default class Server {
     intoServer: IntoServer,
     fromServer: FromServer
   ): Promise<Server> {
-    const initOutput = await init()
-    const server = new Server(initOutput, intoServer, fromServer)
+    if (null == server) {
+      const initOutput = await init()
+      server = new Server(initOutput, intoServer, fromServer)
+    } else {
+      console.warn('Server already initialized; ignoring')
+    }
     return server
   }
 

src/hooks/useAbsoluteFilePath.ts

@@ -1,12 +0,0 @@
-import { BROWSER_FILE_NAME, IndexLoaderData, paths } from 'Router'
-import { useRouteLoaderData } from 'react-router-dom'
-
-export function useAbsoluteFilePath() {
-  const routeData = useRouteLoaderData(paths.FILE) as IndexLoaderData
-
-  return (
-    paths.FILE +
-    '/' +
-    encodeURIComponent(routeData?.project?.path || BROWSER_FILE_NAME)
-  )
-}

src/hooks/useAppMode.ts

@@ -2,138 +2,74 @@
 // Once we have xState this should be removed
 
 import { useStore, Selections } from 'useStore'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { ArtifactMap, EngineCommandManager } from 'lang/std/engineConnection'
 import { Models } from '@kittycad/lib/dist/types/src'
 import { isReducedMotion } from 'lang/util'
 import { isOverlap } from 'lib/utils'
-import { engineCommandManager } from '../lang/std/engineConnection'
-import { DefaultPlanes } from '../wasm-lib/kcl/bindings/DefaultPlanes'
-import { getNodeFromPath } from '../lang/queryAst'
-import { CallExpression, PipeExpression } from '../lang/wasm'
+
+interface DefaultPlanes {
+  xy: string
+  yz: string
+  xz: string
+}
 
 export function useAppMode() {
   const {
     guiMode,
     setGuiMode,
     selectionRanges,
+    engineCommandManager,
     selectionRangeTypeMap,
-    defaultPlanes,
-    setDefaultPlanes,
-    setCurrentPlane,
-    ast,
   } = useStore((s) => ({
     guiMode: s.guiMode,
     setGuiMode: s.setGuiMode,
     selectionRanges: s.selectionRanges,
+    engineCommandManager: s.engineCommandManager,
     selectionRangeTypeMap: s.selectionRangeTypeMap,
-    defaultPlanes: s.defaultPlanes,
-    setDefaultPlanes: s.setDefaultPlanes,
-    setCurrentPlane: s.setCurrentPlane,
-    ast: s.ast,
   }))
+  const [defaultPlanes, setDefaultPlanes] = useState<DefaultPlanes | null>(null)
   useEffect(() => {
     if (
       guiMode.mode === 'sketch' &&
       guiMode.sketchMode === 'selectFace' &&
       engineCommandManager
     ) {
-      const createAndShowPlanes = async () => {
-        let localDefaultPlanes: DefaultPlanes
-        if (!defaultPlanes) {
-          const newDefaultPlanes = await initDefaultPlanes(engineCommandManager)
-          if (!newDefaultPlanes) return
-          setDefaultPlanes(newDefaultPlanes)
-          localDefaultPlanes = newDefaultPlanes
-        } else {
-          localDefaultPlanes = defaultPlanes
-        }
-        setDefaultPlanesHidden(engineCommandManager, localDefaultPlanes, false)
+      if (!defaultPlanes) {
+        const xy = createPlane(engineCommandManager, {
+          x_axis: { x: 1, y: 0, z: 0 },
+          y_axis: { x: 0, y: 1, z: 0 },
+          color: { r: 0.7, g: 0.28, b: 0.28, a: 0.4 },
+        })
+        const yz = createPlane(engineCommandManager, {
+          x_axis: { x: 0, y: 1, z: 0 },
+          y_axis: { x: 0, y: 0, z: 1 },
+          color: { r: 0.28, g: 0.7, b: 0.28, a: 0.4 },
+        })
+        const xz = createPlane(engineCommandManager, {
+          x_axis: { x: 1, y: 0, z: 0 },
+          y_axis: { x: 0, y: 0, z: 1 },
+          color: { r: 0.28, g: 0.28, b: 0.7, a: 0.4 },
+        })
+        setDefaultPlanes({ xy, yz, xz })
+      } else {
+        hideDefaultPlanes(engineCommandManager, defaultPlanes)
       }
-      createAndShowPlanes()
     }
-    if (
-      guiMode.mode === 'sketch' &&
-      guiMode.sketchMode === 'enterSketchEdit' &&
-      engineCommandManager
-    ) {
-      const enableSketchMode = async () => {
-        let localDefaultPlanes: DefaultPlanes
-        if (!defaultPlanes) {
-          const newDefaultPlanes = await initDefaultPlanes(engineCommandManager)
-          if (!newDefaultPlanes) return
-          setDefaultPlanes(newDefaultPlanes)
-          localDefaultPlanes = newDefaultPlanes
-        } else {
-          localDefaultPlanes = defaultPlanes
-        }
-        setDefaultPlanesHidden(engineCommandManager, localDefaultPlanes, true)
-
-        const pipeExpression = getNodeFromPath<PipeExpression>(
-          ast,
-          guiMode.pathToNode,
-          'PipeExpression'
-        ).node
-        if (pipeExpression.type !== 'PipeExpression') return /// bad bad bad
-        const sketchCallExpression = pipeExpression.body.find(
-          (e) =>
-            e.type === 'CallExpression' && e.callee.name === 'startSketchOn'
-        ) as CallExpression
-        if (!sketchCallExpression) return // also bad bad bad
-        const firstArg = sketchCallExpression.arguments[0]
-        let planeId = ''
-        if (firstArg.type === 'Literal' && firstArg.value) {
-          const planeStrCleaned = firstArg.value
-            .toString()
-            .toLowerCase()
-            .replace('-', '')
-          if (
-            planeStrCleaned === 'xy' ||
-            planeStrCleaned === 'xz' ||
-            planeStrCleaned === 'yz'
-          ) {
-            planeId = localDefaultPlanes[planeStrCleaned]
-          }
-        }
-
-        if (!planeId) return // they are on some non default plane, which we don't support yet
-
-        setCurrentPlane(planeId)
-
-        await engineCommandManager.sendSceneCommand({
+    if (guiMode.mode !== 'sketch' && defaultPlanes) {
+      Object.values(defaultPlanes).forEach((planeId) => {
+        engineCommandManager?.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
-            type: 'sketch_mode_enable',
-            plane_id: planeId,
-            ortho: true,
-            animated: !isReducedMotion(),
+            type: 'object_visible',
+            object_id: planeId,
+            hidden: true,
           },
         })
-        const proms: any[] = []
-        proms.push(
-          engineCommandManager.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: {
-              type: 'edit_mode_enter',
-              target: guiMode.pathId,
-            },
-          })
-        )
-        await Promise.all(proms)
-      }
-      enableSketchMode()
-      setGuiMode({
-        ...guiMode,
-        sketchMode: 'sketchEdit',
       })
-    }
-    if (guiMode.mode !== 'sketch' && defaultPlanes) {
-      setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
-    }
-    if (guiMode.mode === 'default') {
+    } else if (guiMode.mode === 'default') {
       const pathId =
         engineCommandManager &&
         isCursorInSketchCommandRange(
@@ -171,7 +107,7 @@ export function useAppMode() {
   ])
 
   useEffect(() => {
-    const unSub = engineCommandManager.subscribeTo({
+    const unSub = engineCommandManager?.subscribeTo({
       event: 'select_with_point',
       callback: async ({ data }) => {
         if (!data.entity_id) return
@@ -180,18 +116,19 @@ export function useAppMode() {
           // user clicked something else in the scene
           return
         }
-        setCurrentPlane(data.entity_id)
-        const sketchModeResponse = await engineCommandManager.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: uuidv4(),
-          cmd: {
-            type: 'sketch_mode_enable',
-            plane_id: data.entity_id,
-            ortho: true,
-            animated: !isReducedMotion(),
-          },
-        })
-        setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
+        const sketchModeResponse = await engineCommandManager?.sendSceneCommand(
+          {
+            type: 'modeling_cmd_req',
+            cmd_id: uuidv4(),
+            cmd: {
+              type: 'sketch_mode_enable',
+              plane_id: data.entity_id,
+              ortho: true,
+              animated: !isReducedMotion(),
+            },
+          }
+        )
+        hideDefaultPlanes(engineCommandManager, defaultPlanes)
         const sketchUuid = uuidv4()
         const proms: any[] = []
         proms.push(
@@ -213,14 +150,14 @@ export function useAppMode() {
             },
           })
         )
-        await Promise.all(proms)
+        const res = await Promise.all(proms)
+        console.log('res', res)
         setGuiMode({
           mode: 'sketch',
           sketchMode: 'sketchEdit',
           rotation: [0, 0, 0, 1],
           position: [0, 0, 0],
           pathToNode: [],
-          pathId: sketchUuid,
         })
 
         console.log('sketchModeResponse', sketchModeResponse)
@@ -230,22 +167,20 @@ export function useAppMode() {
   }, [engineCommandManager, defaultPlanes])
 }
 
-async function createPlane(
+function createPlane(
   engineCommandManager: EngineCommandManager,
   {
     x_axis,
     y_axis,
     color,
-    hidden,
   }: {
     x_axis: Models['Point3d_type']
     y_axis: Models['Point3d_type']
     color: Models['Color_type']
-    hidden: boolean
   }
 ) {
   const planeId = uuidv4()
-  await engineCommandManager.sendSceneCommand({
+  engineCommandManager?.sendSceneCommand({
     type: 'modeling_cmd_req',
     cmd: {
       type: 'make_plane',
@@ -254,11 +189,10 @@ async function createPlane(
       x_axis,
       y_axis,
       clobber: false,
-      hide: hidden,
     },
     cmd_id: planeId,
   })
-  await engineCommandManager.sendSceneCommand({
+  engineCommandManager?.sendSceneCommand({
     type: 'modeling_cmd_req',
     cmd: {
       type: 'plane_set_color',
@@ -270,86 +204,40 @@ async function createPlane(
   return planeId
 }
 
-export function setDefaultPlanesHidden(
+function hideDefaultPlanes(
   engineCommandManager: EngineCommandManager,
-  defaultPlanes: DefaultPlanes,
-  hidden: boolean
+  defaultPlanes: DefaultPlanes
 ) {
   Object.values(defaultPlanes).forEach((planeId) => {
-    hidePlane(engineCommandManager, planeId, hidden)
+    engineCommandManager?.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'object_visible',
+        object_id: planeId,
+        hidden: true,
+      },
+    })
   })
 }
 
-function hidePlane(
-  engineCommandManager: EngineCommandManager,
-  planeId: string,
-  hidden: boolean
-) {
-  engineCommandManager.sendSceneCommand({
-    type: 'modeling_cmd_req',
-    cmd_id: uuidv4(),
-    cmd: {
-      type: 'object_visible',
-      object_id: planeId,
-      hidden: hidden,
-    },
-  })
-}
-
-export async function initDefaultPlanes(
-  engineCommandManager: EngineCommandManager,
-  hidePlanes?: boolean
-): Promise<DefaultPlanes | null> {
-  if (!engineCommandManager.engineConnection?.isReady()) {
-    return null
-  }
-  const xy = await createPlane(engineCommandManager, {
-    x_axis: { x: 1, y: 0, z: 0 },
-    y_axis: { x: 0, y: 1, z: 0 },
-    color: { r: 0.7, g: 0.28, b: 0.28, a: 0.4 },
-    hidden: hidePlanes ? true : false,
-  })
-  if (hidePlanes) {
-    hidePlane(engineCommandManager, xy, true)
-  }
-  const yz = await createPlane(engineCommandManager, {
-    x_axis: { x: 0, y: 1, z: 0 },
-    y_axis: { x: 0, y: 0, z: 1 },
-    color: { r: 0.28, g: 0.7, b: 0.28, a: 0.4 },
-    hidden: hidePlanes ? true : false,
-  })
-  if (hidePlanes) {
-    hidePlane(engineCommandManager, yz, true)
-  }
-  const xz = await createPlane(engineCommandManager, {
-    x_axis: { x: 1, y: 0, z: 0 },
-    y_axis: { x: 0, y: 0, z: 1 },
-    color: { r: 0.28, g: 0.28, b: 0.7, a: 0.4 },
-    hidden: hidePlanes ? true : false,
-  })
-  return { xy, yz, xz }
-}
-
 function isCursorInSketchCommandRange(
   artifactMap: ArtifactMap,
   selectionRanges: Selections
 ): string | false {
-  const overlapingEntries: [string, ArtifactMap[string]][] = Object.entries(
-    artifactMap
-  ).filter(([id, artifact]: [string, ArtifactMap[string]]) =>
-    selectionRanges.codeBasedSelections.some(
-      (selection) =>
-        Array.isArray(selection?.range) &&
-        Array.isArray(artifact?.range) &&
-        isOverlap(selection.range, artifact.range) &&
-        (artifact.commandType === 'start_path' ||
-          artifact.commandType === 'extend_path' ||
-          artifact.commandType === 'close_path')
-    )
+  const overlapingEntries = Object.entries(artifactMap || {}).filter(
+    ([id, artifact]) =>
+      selectionRanges.codeBasedSelections.some(
+        (selection) =>
+          Array.isArray(selection.range) &&
+          Array.isArray(artifact.range) &&
+          isOverlap(selection.range, artifact.range) &&
+          (artifact.commandType === 'start_path' ||
+            artifact.commandType === 'extend_path' ||
+            'close_path')
+      )
   )
-  return overlapingEntries.length && overlapingEntries[0][1].parentId
+  return overlapingEntries.length === 1 && overlapingEntries[0][1].parentId
     ? overlapingEntries[0][1].parentId
-    : overlapingEntries.find(
-        ([, artifact]) => artifact.commandType === 'start_path'
-      )?.[0] || false
+    : false
 }

src/hooks/useCodeEval.ts

@@ -0,0 +1,156 @@
+import { useEffect } from 'react'
+import { asyncParser } from '../lang/abstractSyntaxTree'
+import { _executor } from '../lang/executor'
+import { useStore } from '../useStore'
+import { KCLError } from '../lang/errors'
+
+// This recently moved out of app.tsx
+// and is our old way of thinking that whenever the code changes we need to re-execute, instead of
+// being more decisive about when and where we execute, its likey this custom hook will be
+// refactored away entirely at some point
+
+export function useCodeEval() {
+  const {
+    addLog,
+    addKCLError,
+    setAst,
+    setError,
+    setProgramMemory,
+    resetLogs,
+    resetKCLErrors,
+    setArtifactMap,
+    engineCommandManager,
+    highlightRange,
+    setHighlightRange,
+    setCursor2,
+    isStreamReady,
+    setIsExecuting,
+    defferedCode,
+  } = useStore((s) => ({
+    addLog: s.addLog,
+    defferedCode: s.defferedCode,
+    setAst: s.setAst,
+    setError: s.setError,
+    setProgramMemory: s.setProgramMemory,
+    resetLogs: s.resetLogs,
+    resetKCLErrors: s.resetKCLErrors,
+    setArtifactMap: s.setArtifactNSourceRangeMaps,
+    engineCommandManager: s.engineCommandManager,
+    highlightRange: s.highlightRange,
+    setHighlightRange: s.setHighlightRange,
+    setCursor2: s.setCursor2,
+    isStreamReady: s.isStreamReady,
+    addKCLError: s.addKCLError,
+    setIsExecuting: s.setIsExecuting,
+  }))
+  useEffect(() => {
+    if (!isStreamReady) return
+    if (!engineCommandManager) return
+    let unsubFn: any[] = []
+    const asyncWrap = async () => {
+      try {
+        if (!defferedCode) {
+          setAst({
+            start: 0,
+            end: 0,
+            body: [],
+            nonCodeMeta: {
+              noneCodeNodes: {},
+              start: null,
+            },
+          })
+          setProgramMemory({ root: {}, return: null })
+          engineCommandManager.endSession()
+          engineCommandManager.startNewSession()
+          return
+        }
+        const _ast = await asyncParser(defferedCode)
+        setAst(_ast)
+        resetLogs()
+        resetKCLErrors()
+        engineCommandManager.endSession()
+        engineCommandManager.startNewSession()
+        setIsExecuting(true)
+        const programMemory = await _executor(
+          _ast,
+          {
+            root: {
+              _0: {
+                type: 'UserVal',
+                value: 0,
+                __meta: [],
+              },
+              _90: {
+                type: 'UserVal',
+                value: 90,
+                __meta: [],
+              },
+              _180: {
+                type: 'UserVal',
+                value: 180,
+                __meta: [],
+              },
+              _270: {
+                type: 'UserVal',
+                value: 270,
+                __meta: [],
+              },
+            },
+            return: null,
+          },
+          engineCommandManager
+        )
+
+        const { artifactMap, sourceRangeMap } =
+          await engineCommandManager.waitForAllCommands(_ast, programMemory)
+        setIsExecuting(false)
+        if (programMemory !== undefined) {
+          setProgramMemory(programMemory)
+        }
+
+        setArtifactMap({ artifactMap, sourceRangeMap })
+        const unSubHover = engineCommandManager.subscribeToUnreliable({
+          event: 'highlight_set_entity',
+          callback: ({ data }) => {
+            if (data?.entity_id) {
+              const sourceRange = sourceRangeMap[data.entity_id]
+              setHighlightRange(sourceRange)
+            } else if (
+              !highlightRange ||
+              (highlightRange[0] !== 0 && highlightRange[1] !== 0)
+            ) {
+              setHighlightRange([0, 0])
+            }
+          },
+        })
+        const unSubClick = engineCommandManager.subscribeTo({
+          event: 'select_with_point',
+          callback: ({ data }) => {
+            if (!data?.entity_id) {
+              setCursor2()
+              return
+            }
+            const sourceRange = sourceRangeMap[data.entity_id]
+            setCursor2({ range: sourceRange, type: 'default' })
+          },
+        })
+        unsubFn.push(unSubHover, unSubClick)
+
+        setError()
+      } catch (e: any) {
+        setIsExecuting(false)
+        if (e instanceof KCLError) {
+          addKCLError(e)
+        } else {
+          setError('problem')
+          console.log(e)
+          addLog(e)
+        }
+      }
+    }
+    asyncWrap()
+    return () => {
+      unsubFn.forEach((fn) => fn())
+    }
+  }, [defferedCode, isStreamReady, engineCommandManager])
+}

src/hooks/useDotDotSlash.ts

@@ -1,13 +0,0 @@
-import { useLocation } from 'react-router-dom'
-
-export function useDotDotSlash(): (count?: number) => string {
-  const location = useLocation()
-  const dotDotSlash = (count = 1): string => {
-    // since we can't use relative paths (../) for windows
-    if (location.pathname === '/') return ''
-    const path = location.pathname.slice(0, location.pathname.lastIndexOf('/'))
-    if (count <= 1) return path
-    return dotDotSlash(count - 1)
-  }
-  return dotDotSlash
-}

src/hooks/useEngineConnectionSubscriptions.ts

@@ -1,45 +0,0 @@
-import { useEffect } from 'react'
-import { useStore } from 'useStore'
-import { engineCommandManager } from '../lang/std/engineConnection'
-
-export function useEngineConnectionSubscriptions() {
-  const { setCursor2, setHighlightRange, highlightRange } = useStore((s) => ({
-    setCursor2: s.setCursor2,
-    setHighlightRange: s.setHighlightRange,
-    highlightRange: s.highlightRange,
-  }))
-  useEffect(() => {
-    if (!engineCommandManager) return
-
-    const unSubHover = engineCommandManager.subscribeToUnreliable({
-      event: 'highlight_set_entity',
-      callback: ({ data }) => {
-        if (data?.entity_id) {
-          const sourceRange =
-            engineCommandManager.sourceRangeMap[data.entity_id]
-          setHighlightRange(sourceRange)
-        } else if (
-          !highlightRange ||
-          (highlightRange[0] !== 0 && highlightRange[1] !== 0)
-        ) {
-          setHighlightRange([0, 0])
-        }
-      },
-    })
-    const unSubClick = engineCommandManager.subscribeTo({
-      event: 'select_with_point',
-      callback: ({ data }) => {
-        if (!data?.entity_id) {
-          setCursor2()
-          return
-        }
-        const sourceRange = engineCommandManager.sourceRangeMap[data.entity_id]
-        setCursor2({ range: sourceRange, type: 'default' })
-      },
-    })
-    return () => {
-      unSubHover()
-      unSubClick()
-    }
-  }, [engineCommandManager, setCursor2, setHighlightRange, highlightRange])
-}

src/hooks/useModelingContext.ts

@@ -0,0 +1,6 @@
+import { ModelingMachineContext } from 'components/ModelingMachineProvider'
+import { useContext } from 'react'
+
+export const useModelingContext = () => {
+  return useContext(ModelingMachineContext)
+}

src/hooks/useSetupEngineManager.ts

@@ -1,92 +1,48 @@
-import { useLayoutEffect, useEffect, useRef } from 'react'
-import { _executor } from '../lang/wasm'
+import { useLayoutEffect } from 'react'
+import { _executor } from '../lang/executor'
 import { useStore } from '../useStore'
-import { engineCommandManager } from '../lang/std/engineConnection'
-import { deferExecution } from 'lib/utils'
+import { EngineCommandManager } from '../lang/std/engineConnection'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
   token?: string
 ) {
   const {
+    setEngineCommandManager,
     setMediaStream,
     setIsStreamReady,
     setStreamDimensions,
-    streamDimensions,
-    executeCode,
   } = useStore((s) => ({
+    setEngineCommandManager: s.setEngineCommandManager,
     setMediaStream: s.setMediaStream,
     setIsStreamReady: s.setIsStreamReady,
     setStreamDimensions: s.setStreamDimensions,
-    streamDimensions: s.streamDimensions,
-    executeCode: s.executeCode,
   }))
 
   const streamWidth = streamRef?.current?.offsetWidth
   const streamHeight = streamRef?.current?.offsetHeight
 
-  const hasSetNonZeroDimensions = useRef<boolean>(false)
-
-  useEffect(() => {
-    executeCode()
-  }, [])
-
-  useLayoutEffect(() => {
-    // Load the engine command manager once with the initial width and height,
-    // then we do not want to reload it.
-    const { width: quadWidth, height: quadHeight } = getDimensions(
-      streamWidth,
-      streamHeight
-    )
-    if (!hasSetNonZeroDimensions.current && quadHeight && quadWidth) {
-      engineCommandManager.start({
-        setMediaStream,
-        setIsStreamReady,
-        width: quadWidth,
-        height: quadHeight,
-        executeCode,
-        token,
-      })
-      setStreamDimensions({
-        streamWidth: quadWidth,
-        streamHeight: quadHeight,
-      })
-      hasSetNonZeroDimensions.current = true
-    }
-  }, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
-
-  useEffect(() => {
-    const handleResize = deferExecution(() => {
-      const { width, height } = getDimensions(
-        streamRef?.current?.offsetWidth,
-        streamRef?.current?.offsetHeight
-      )
-      if (
-        streamDimensions.streamWidth !== width ||
-        streamDimensions.streamHeight !== height
-      ) {
-        engineCommandManager.handleResize({
-          streamWidth: width,
-          streamHeight: height,
-        })
-        setStreamDimensions({
-          streamWidth: width,
-          streamHeight: height,
-        })
-      }
-    }, 500)
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-}
-
-function getDimensions(streamWidth?: number, streamHeight?: number) {
   const width = streamWidth ? streamWidth : 0
   const quadWidth = Math.round(width / 4) * 4
   const height = streamHeight ? streamHeight : 0
   const quadHeight = Math.round(height / 4) * 4
-  return { width: quadWidth, height: quadHeight }
+
+  useLayoutEffect(() => {
+    setStreamDimensions({
+      streamWidth: quadWidth,
+      streamHeight: quadHeight,
+    })
+    if (!width || !height) return
+    const eng = new EngineCommandManager({
+      setMediaStream,
+      setIsStreamReady,
+      width: quadWidth,
+      height: quadHeight,
+      token,
+    })
+    setEngineCommandManager(eng)
+    return () => {
+      eng?.tearDown()
+    }
+  }, [quadWidth, quadHeight])
 }

src/hooks/useToolbarGuards.ts

@@ -46,9 +46,9 @@ export function useConvertToVariable() {
         variableName
       )
 
-      updateAst(_modifiedAst, true)
+      updateAst(_modifiedAst)
     } catch (e) {
-      console.log('error', e)
+      console.log('e', e)
     }
   }
 

src/index.css

@@ -31,14 +31,6 @@ body.dark {
   @apply text-chalkboard-10;
 }
 
-select {
-  @apply bg-chalkboard-20;
-}
-
-.dark select {
-  @apply bg-chalkboard-90;
-}
-
 ::-webkit-scrollbar {
   @apply w-2 h-2 rounded-sm;
   @apply bg-chalkboard-20;

src/lang/abstractSyntaxTree.test.ts

@@ -1,11 +1,12 @@
+import { parser_wasm } from './abstractSyntaxTree'
 import { KCLError } from './errors'
-import { initPromise, parse } from './wasm'
+import { initPromise } from './rust'
 
 beforeAll(() => initPromise)
 
 describe('testing AST', () => {
   test('5 + 6', () => {
-    const result = parse('5 +6')
+    const result = parser_wasm('5 +6')
     delete (result as any).nonCodeMeta
     expect(result.body).toEqual([
       {
@@ -36,7 +37,7 @@ describe('testing AST', () => {
     ])
   })
   test('const myVar = 5', () => {
-    const { body } = parse('const myVar = 5')
+    const { body } = parser_wasm('const myVar = 5')
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -70,7 +71,7 @@ describe('testing AST', () => {
     const code = `const myVar = 5
 const newVar = myVar + 1
 `
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -138,11 +139,59 @@ const newVar = myVar + 1
       },
     ])
   })
+  test('using std function "log"', () => {
+    const code = `log(5, "hello", aIdentifier)`
+    const { body } = parser_wasm(code)
+    expect(body).toEqual([
+      {
+        type: 'ExpressionStatement',
+        start: 0,
+        end: 28,
+        expression: {
+          type: 'CallExpression',
+          start: 0,
+          end: 28,
+          callee: {
+            type: 'Identifier',
+            start: 0,
+            end: 3,
+            name: 'log',
+          },
+          arguments: [
+            {
+              type: 'Literal',
+              start: 4,
+              end: 5,
+              value: 5,
+              raw: '5',
+            },
+            {
+              type: 'Literal',
+              start: 7,
+              end: 14,
+              value: 'hello',
+              raw: '"hello"',
+            },
+            {
+              type: 'Identifier',
+              start: 16,
+              end: 27,
+              name: 'aIdentifier',
+            },
+          ],
+          function: {
+            type: 'InMemory',
+          },
+          optional: false,
+        },
+      },
+    ])
+  })
 })
 
 describe('testing function declaration', () => {
   test('fn funcN = () => {}', () => {
-    const { body } = parse('fn funcN = () => {}')
+    const { body } = parser_wasm('fn funcN = () => {}')
     delete (body[0] as any).declarations[0].init.body.nonCodeMeta
     expect(body).toEqual([
       {
@@ -178,7 +227,7 @@ describe('testing function declaration', () => {
     ])
   })
   test('fn funcN = (a, b) => {return a + b}', () => {
-    const { body } = parse(
+    const { body } = parser_wasm(
       ['fn funcN = (a, b) => {', '  return a + b', '}'].join('\n')
     )
     delete (body[0] as any).declarations[0].init.body.nonCodeMeta
@@ -255,7 +304,7 @@ describe('testing function declaration', () => {
   test('call expression assignment', () => {
     const code = `fn funcN = (a, b) => { return a + b }
 const myVar = funcN(1, 2)`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     delete (body[0] as any).declarations[0].init.body.nonCodeMeta
     expect(body).toEqual([
       {
@@ -387,7 +436,7 @@ describe('testing pipe operator special', () => {
   |> lineTo([1, 1], %)
   |> rx(45, %)
 `
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     delete (body[0] as any).declarations[0].init.nonCodeMeta
     expect(body).toEqual([
       {
@@ -403,7 +452,7 @@ describe('testing pipe operator special', () => {
             id: { type: 'Identifier', start: 6, end: 14, name: 'mySketch' },
             init: {
               type: 'PipeExpression',
-              start: 17,
+              start: 15,
               end: 145,
               body: [
                 {
@@ -623,7 +672,7 @@ describe('testing pipe operator special', () => {
   })
   test('pipe operator with binary expression', () => {
     let code = `const myVar = 5 + 6 |> myFunc(45, %)`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     delete (body as any)[0].declarations[0].init.nonCodeMeta
     expect(body).toEqual([
       {
@@ -644,7 +693,7 @@ describe('testing pipe operator special', () => {
             },
             init: {
               type: 'PipeExpression',
-              start: 14,
+              start: 12,
               end: 36,
               body: [
                 {
@@ -705,7 +754,7 @@ describe('testing pipe operator special', () => {
   })
   test('array expression', () => {
     let code = `const yo = [1, '2', three, 4 + 5]`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -780,7 +829,7 @@ describe('testing pipe operator special', () => {
       'const three = 3',
       "const yo = {aStr: 'str', anum: 2, identifier: three, binExp: 4 + 5}",
     ].join('\n')
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -924,7 +973,7 @@ describe('testing pipe operator special', () => {
     const code = `const yo = {key: {
   key2: 'value'
 }}`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -992,7 +1041,7 @@ describe('testing pipe operator special', () => {
   })
   test('object expression with array ast', () => {
     const code = `const yo = {key: [1, '2']}`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1056,7 +1105,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression simple', () => {
     const code = `const prop = yo.one.two`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1111,7 +1160,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression with square braces', () => {
     const code = `const prop = yo.one["two"]`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1167,7 +1216,7 @@ describe('testing pipe operator special', () => {
   })
   test('object memberExpression with two square braces literal and identifier', () => {
     const code = `const prop = yo["one"][two]`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body).toEqual([
       {
         type: 'VariableDeclaration',
@@ -1226,7 +1275,7 @@ describe('testing pipe operator special', () => {
 describe('nests binary expressions correctly', () => {
   it('works with the simple case', () => {
     const code = `const yo = 1 + 2`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1270,7 +1319,7 @@ describe('nests binary expressions correctly', () => {
   it('should nest according to precedence with multiply first', () => {
     // should be binExp { binExp { lit-1 * lit-2 } + lit}
     const code = `const yo = 1 * 2 + 3`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1327,7 +1376,7 @@ describe('nests binary expressions correctly', () => {
   it('should nest according to precedence with sum first', () => {
     // should be binExp { lit-1 + binExp { lit-2 * lit-3 } }
     const code = `const yo = 1 + 2 * 3`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect(body[0]).toEqual({
       type: 'VariableDeclaration',
       start: 0,
@@ -1383,7 +1432,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with two opperators of equal precedence', () => {
     const code = `const yo = 1 + 2 - 3`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect((body[0] as any).declarations[0].init).toEqual({
       type: 'BinaryExpression',
       start: 11,
@@ -1420,7 +1469,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with two opperators of equal (but higher) precedence', () => {
     const code = `const yo = 1 * 2 / 3`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     expect((body[0] as any).declarations[0].init).toEqual({
       type: 'BinaryExpression',
       start: 11,
@@ -1457,7 +1506,7 @@ describe('nests binary expressions correctly', () => {
   })
   it('should nest properly with longer example', () => {
     const code = `const yo = 1 + 2 * (3 - 4) / 5 + 6`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const init = (body[0] as any).declarations[0].init
     expect(init).toEqual({
       type: 'BinaryExpression',
@@ -1511,7 +1560,7 @@ const yo = { a: { b: { c: '123' } } }
 // this is a comment
 const key = 'c'`
     const nonCodeMetaInstance = {
-      type: 'NonCodeNode',
+      type: 'NoneCodeNode',
       start: code.indexOf('\n// this is a comment'),
       end: code.indexOf('const key'),
       value: {
@@ -1519,16 +1568,18 @@ const key = 'c'`
         value: 'this is a comment',
       },
     }
-    const { nonCodeMeta } = parse(code)
-    expect(nonCodeMeta.nonCodeNodes[0]).toEqual(nonCodeMetaInstance)
+    const { nonCodeMeta } = parser_wasm(code)
+    expect(nonCodeMeta.noneCodeNodes[0]).toEqual(nonCodeMetaInstance)
 
     // extra whitespace won't change it's position (0) or value (NB the start end would have changed though)
     const codeWithExtraStartWhitespace = '\n\n\n' + code
-    const { nonCodeMeta: nonCodeMeta2 } = parse(codeWithExtraStartWhitespace)
-    expect(nonCodeMeta2.nonCodeNodes[0].value).toStrictEqual(
+    const { nonCodeMeta: nonCodeMeta2 } = parser_wasm(
+      codeWithExtraStartWhitespace
+    )
+    expect(nonCodeMeta2.noneCodeNodes[0].value).toStrictEqual(
       nonCodeMetaInstance.value
     )
-    expect(nonCodeMeta2.nonCodeNodes[0].start).not.toBe(
+    expect(nonCodeMeta2.noneCodeNodes[0].start).not.toBe(
       nonCodeMetaInstance.start
     )
   })
@@ -1542,12 +1593,12 @@ const key = 'c'`
   |> close(%)
 `
 
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const indexOfSecondLineToExpression = 2
     const sketchNonCodeMeta = (body as any)[0].declarations[0].init.nonCodeMeta
-      .nonCodeNodes
+      .noneCodeNodes
     expect(sketchNonCodeMeta[indexOfSecondLineToExpression]).toEqual({
-      type: 'NonCodeNode',
+      type: 'NoneCodeNode',
       start: 106,
       end: 166,
       value: {
@@ -1566,11 +1617,11 @@ const key = 'c'`
       '  |> rx(90, %)',
     ].join('\n')
 
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const sketchNonCodeMeta = (body[0] as any).declarations[0].init.nonCodeMeta
-      .nonCodeNodes
+      .noneCodeNodes
     expect(sketchNonCodeMeta[3]).toEqual({
-      type: 'NonCodeNode',
+      type: 'NoneCodeNode',
       start: 125,
       end: 141,
       value: {
@@ -1584,7 +1635,7 @@ const key = 'c'`
 describe('test UnaryExpression', () => {
   it('should parse a unary expression in simple var dec situation', () => {
     const code = `const myVar = -min(4, 100)`
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const myVarInit = (body?.[0] as any).declarations[0]?.init
     expect(myVarInit).toEqual({
       type: 'UnaryExpression',
@@ -1610,7 +1661,7 @@ describe('test UnaryExpression', () => {
 describe('testing nested call expressions', () => {
   it('callExp in a binExp in a callExp', () => {
     const code = 'const myVar = min(100, 1 + legLen(5, 3))'
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const myVarInit = (body?.[0] as any).declarations[0]?.init
     expect(myVarInit).toEqual({
       type: 'CallExpression',
@@ -1648,7 +1699,7 @@ describe('testing nested call expressions', () => {
 describe('should recognise callExpresions in binaryExpressions', () => {
   const code = "xLineTo(segEndX('seg02', %) + 1, %)"
   it('should recognise the callExp', () => {
-    const { body } = parse(code)
+    const { body } = parser_wasm(code)
     const callExpArgs = (body?.[0] as any).expression?.arguments
     expect(callExpArgs).toEqual([
       {
@@ -1687,7 +1738,8 @@ describe('parsing errors', () => {
 
     let _theError
     try {
-      const result = expect(parse(code))
+      const result = expect(parser_wasm(code))
+      console.log('result', result)
     } catch (e) {
       _theError = e
     }

src/lang/abstractSyntaxTree.ts

@@ -0,0 +1,48 @@
+import { Program } from './abstractSyntaxTreeTypes'
+import { parse_js } from '../wasm-lib/pkg/wasm_lib'
+import { initPromise } from './rust'
+import { Token } from './tokeniser'
+import { KCLError } from './errors'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+
+export const rangeTypeFix = (ranges: number[][]): [number, number][] =>
+  ranges.map(([start, end]) => [start, end])
+
+export const parser_wasm = (code: string): Program => {
+  try {
+    const program: Program = parse_js(code)
+    return program
+  } catch (e: any) {
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
+      parsed.kind,
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
+    )
+
+    console.log(kclError)
+    throw kclError
+  }
+}
+
+export async function asyncParser(code: string): Promise<Program> {
+  await initPromise
+  try {
+    const program: Program = parse_js(code)
+    return program
+  } catch (e: any) {
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
+      parsed.kind,
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
+    )
+
+    console.log(kclError)
+    throw kclError
+  }
+}
+
+export function rangeOfToken(token: Token | undefined): [number, number][] {
+  return token === undefined ? [] : [[token.start, token.end]]
+}

src/lang/abstractSyntaxTreeTypes.ts

@@ -0,0 +1,37 @@
+export type { Program } from '../wasm-lib/kcl/bindings/Program'
+export type { Value } from '../wasm-lib/kcl/bindings/Value'
+export type { ObjectExpression } from '../wasm-lib/kcl/bindings/ObjectExpression'
+export type { MemberExpression } from '../wasm-lib/kcl/bindings/MemberExpression'
+export type { PipeExpression } from '../wasm-lib/kcl/bindings/PipeExpression'
+export type { VariableDeclaration } from '../wasm-lib/kcl/bindings/VariableDeclaration'
+export type { PipeSubstitution } from '../wasm-lib/kcl/bindings/PipeSubstitution'
+export type { Identifier } from '../wasm-lib/kcl/bindings/Identifier'
+export type { UnaryExpression } from '../wasm-lib/kcl/bindings/UnaryExpression'
+export type { BinaryExpression } from '../wasm-lib/kcl/bindings/BinaryExpression'
+export type { ReturnStatement } from '../wasm-lib/kcl/bindings/ReturnStatement'
+export type { ExpressionStatement } from '../wasm-lib/kcl/bindings/ExpressionStatement'
+export type { CallExpression } from '../wasm-lib/kcl/bindings/CallExpression'
+export type { VariableDeclarator } from '../wasm-lib/kcl/bindings/VariableDeclarator'
+export type { BinaryPart } from '../wasm-lib/kcl/bindings/BinaryPart'
+export type { Literal } from '../wasm-lib/kcl/bindings/Literal'
+export type { ArrayExpression } from '../wasm-lib/kcl/bindings/ArrayExpression'
+
+export type SyntaxType =
+  | 'Program'
+  | 'ExpressionStatement'
+  | 'BinaryExpression'
+  | 'CallExpression'
+  | 'Identifier'
+  | 'ReturnStatement'
+  | 'VariableDeclaration'
+  | 'VariableDeclarator'
+  | 'MemberExpression'
+  | 'ArrayExpression'
+  | 'ObjectExpression'
+  | 'ObjectProperty'
+  | 'FunctionExpression'
+  | 'PipeExpression'
+  | 'PipeSubstitution'
+  | 'Literal'
+  | 'NoneCodeNode'
+  | 'UnaryExpression'

src/lang/artifact.test.ts

@@ -1,4 +1,5 @@
-import { parse, initPromise } from './wasm'
+import { parser_wasm } from './abstractSyntaxTree'
+import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
 
 beforeAll(() => initPromise)
@@ -7,13 +8,12 @@ describe('testing artifacts', () => {
   // Enable rotations #152
   test('sketch artifacts', async () => {
     const code = `
-const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const mySketch001 = startSketchAt([0, 0])
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
   // |> rx(45, %)
 show(mySketch001)`
-    const programMemory = await enginelessExecutor(parse(code))
+    const programMemory = await enginelessExecutor(parser_wasm(code))
     // @ts-ignore
     const shown = programMemory?.return?.map(
       // @ts-ignore
@@ -28,7 +28,7 @@ show(mySketch001)`
           name: '',
           __geoMeta: {
             id: expect.any(String),
-            sourceRange: [46, 71],
+            sourceRange: [21, 42],
           },
         },
         value: [
@@ -38,7 +38,7 @@ show(mySketch001)`
             to: [-1.59, -1.54],
             from: [0, 0],
             __geoMeta: {
-              sourceRange: [77, 102],
+              sourceRange: [48, 73],
               id: expect.any(String),
             },
           },
@@ -48,7 +48,7 @@ show(mySketch001)`
             from: [-1.59, -1.54],
             name: '',
             __geoMeta: {
-              sourceRange: [108, 132],
+              sourceRange: [79, 103],
               id: expect.any(String),
             },
           },
@@ -56,22 +56,20 @@ show(mySketch001)`
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
         id: expect.any(String),
-        planeId: expect.any(String),
-        __meta: [{ sourceRange: [46, 71] }],
+        __meta: [{ sourceRange: [21, 42] }],
       },
     ])
   })
   test('extrude artifacts', async () => {
     // Enable rotations #152
     const code = `
-const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const mySketch001 = startSketchAt([0, 0])
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
   // |> rx(45, %)
   |> extrude(2, %)
 show(mySketch001)`
-    const programMemory = await enginelessExecutor(parse(code))
+    const programMemory = await enginelessExecutor(parser_wasm(code))
     // @ts-ignore
     const shown = programMemory?.return?.map(
       // @ts-ignore
@@ -85,7 +83,7 @@ show(mySketch001)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [46, 71] }],
+        __meta: [{ sourceRange: [21, 42] }],
       },
     ])
   })
@@ -93,8 +91,7 @@ show(mySketch001)`
     // Enable rotations #152
     // TODO #153 in order for getExtrudeWallTransform to work we need to query the engine for the location of a face.
     const code = `
-const sk1 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const sk1 = startSketchAt([0, 0])
   |> lineTo([-2.5, 0], %)
   |> lineTo({ to: [0, 10], tag: "p" }, %)
   |> lineTo([2.5, 0], %)
@@ -103,8 +100,7 @@ const sk1 = startSketchOn('XY')
   // |> ry(5, %)
 const theExtrude = extrude(2, sk1)
 // const theTransf = getExtrudeWallTransform('p', theExtrude)
-const sk2 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const sk2 = startSketchAt([0, 0])
   |> lineTo([-2.5, 0], %)
   |> lineTo({ to: [0, 3], tag: "p" }, %)
   |> lineTo([2.5, 0], %)
@@ -113,7 +109,7 @@ const sk2 = startSketchOn('XY')
 
 
 show(theExtrude, sk2)`
-    const programMemory = await enginelessExecutor(parse(code))
+    const programMemory = await enginelessExecutor(parser_wasm(code))
     // @ts-ignore
     const geos = programMemory?.return?.map(
       // @ts-ignore
@@ -127,7 +123,7 @@ show(theExtrude, sk2)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [38, 63] }],
+        __meta: [{ sourceRange: [13, 34] }],
       },
       {
         type: 'ExtrudeGroup',
@@ -136,7 +132,7 @@ show(theExtrude, sk2)`
         height: 2,
         position: [0, 0, 0],
         rotation: [0, 0, 0, 1],
-        __meta: [{ sourceRange: [356, 381] }],
+        __meta: [{ sourceRange: [302, 323] }],
       },
     ])
   })

src/lang/executor.test.ts

@@ -1,7 +1,10 @@
 import fs from 'node:fs'
 
-import { parse, ProgramMemory, SketchGroup, initPromise } from './wasm'
+import { parser_wasm } from './abstractSyntaxTree'
+import { ProgramMemory, SketchGroup } from './executor'
+import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
+import { vi } from 'vitest'
 import { KCLError } from './errors'
 
 beforeAll(() => initPromise)
@@ -41,8 +44,7 @@ const newVar = myVar + 1`
     expect(root.magicNum.value).toBe(69)
   })
   it('sketch declaration', async () => {
-    let code = `const mySketch = startSketchOn('XY')
-  |> startProfileAt([0,0], %)
+    let code = `const mySketch = startSketchAt([0,0])
   |> lineTo({to: [0,2], tag: "myPath"}, %)
   |> lineTo([2,3], %)
   |> lineTo({ to: [5,-1], tag: "rightPath" }, %)
@@ -58,7 +60,7 @@ show(mySketch)
         to: [0, 2],
         from: [0, 0],
         __geoMeta: {
-          sourceRange: [72, 109],
+          sourceRange: [43, 80],
           id: expect.any(String),
         },
         name: 'myPath',
@@ -69,7 +71,7 @@ show(mySketch)
         from: [0, 2],
         name: '',
         __geoMeta: {
-          sourceRange: [115, 131],
+          sourceRange: [86, 102],
           id: expect.any(String),
         },
       },
@@ -78,7 +80,7 @@ show(mySketch)
         to: [5, -1],
         from: [2, 3],
         __geoMeta: {
-          sourceRange: [137, 180],
+          sourceRange: [108, 151],
           id: expect.any(String),
         },
         name: 'rightPath',
@@ -88,8 +90,8 @@ show(mySketch)
     expect(_return).toEqual([
       {
         type: 'Identifier',
-        start: 203,
-        end: 211,
+        start: 174,
+        end: 182,
         name: 'mySketch',
       },
     ])
@@ -133,8 +135,7 @@ show(mySketch)
   it('execute pipe sketch into call expression', async () => {
     // Enable rotations #152
     const code = [
-      "const mySk1 = startSketchOn('XY')",
-      '  |> startProfileAt([0,0], %)',
+      'const mySk1 = startSketchAt([0,0])',
       '  |> lineTo([1,1], %)',
       '  |> lineTo({to: [0, 1], tag: "myPath"}, %)',
       '  |> lineTo([1,1], %)',
@@ -149,7 +150,7 @@ show(mySketch)
         name: '',
         __geoMeta: {
           id: expect.any(String),
-          sourceRange: [39, 63],
+          sourceRange: [14, 34],
         },
       },
       value: [
@@ -159,7 +160,7 @@ show(mySketch)
           from: [0, 0],
           name: '',
           __geoMeta: {
-            sourceRange: [69, 85],
+            sourceRange: [40, 56],
             id: expect.any(String),
           },
         },
@@ -168,7 +169,7 @@ show(mySketch)
           to: [0, 1],
           from: [1, 1],
           __geoMeta: {
-            sourceRange: [91, 129],
+            sourceRange: [62, 100],
             id: expect.any(String),
           },
           name: 'myPath',
@@ -179,7 +180,7 @@ show(mySketch)
           from: [0, 1],
           name: '',
           __geoMeta: {
-            sourceRange: [135, 151],
+            sourceRange: [106, 122],
             id: expect.any(String),
           },
         },
@@ -187,8 +188,7 @@ show(mySketch)
       position: [0, 0, 0],
       rotation: [0, 0, 0, 1],
       id: expect.any(String),
-      planeId: expect.any(String),
-      __meta: [{ sourceRange: [39, 63] }],
+      __meta: [{ sourceRange: [14, 34] }],
     })
   })
   it('execute array expression', async () => {
@@ -332,8 +332,7 @@ describe('testing math operators', () => {
   })
   it('with unaryExpression in ArrayExpression in CallExpression, checking nothing funny happens when used in a sketch', async () => {
     const code = [
-      "const part001 = startSketchOn('XY')",
-      '  |> startProfileAt([0, 0], %)',
+      'const part001 = startSketchAt([0, 0])',
       '|> line([-2.21, -legLen(5, min(3, 999))], %)',
     ].join('\n')
     const { root } = await exe(code)
@@ -345,8 +344,7 @@ describe('testing math operators', () => {
   it('test that % substitution feeds down CallExp->ArrExp->UnaryExp->CallExp', async () => {
     const code = [
       `const myVar = 3`,
-      `const part001 = startSketchOn('XY')`,
-      `  |> startProfileAt([0, 0], %)`,
+      `const part001 = startSketchAt([0, 0])`,
       `  |> line({ to: [3, 4], tag: 'seg01' }, %)`,
       `  |> line([`,
       `  min(segLen('seg01', %), myVar),`,
@@ -382,8 +380,7 @@ describe('testing math operators', () => {
 describe('Testing Errors', () => {
   it('should throw an error when a variable is not defined', async () => {
     const code = `const myVar = 5
-const theExtrude = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const theExtrude = startSketchAt([0, 0])
   |> line([-2.4, 5], %)
   |> line([-0.76], myVarZ, %)
   |> line([5,5], %)
@@ -394,7 +391,7 @@ show(theExtrude)`
       new KCLError(
         'undefined_value',
         'memory item key `myVarZ` is not defined',
-        [[129, 135]]
+        [[100, 106]]
       )
     )
   })
@@ -406,7 +403,7 @@ async function exe(
   code: string,
   programMemory: ProgramMemory = { root: {}, return: null }
 ) {
-  const ast = parse(code)
+  const ast = parser_wasm(code)
 
   const result = await enginelessExecutor(ast, programMemory)
   return result

src/lang/executor.ts

@@ -0,0 +1,81 @@
+import { Program } from './abstractSyntaxTreeTypes'
+import {
+  EngineCommandManager,
+  ArtifactMap,
+  SourceRangeMap,
+} from './std/engineConnection'
+import { ProgramReturn } from '../wasm-lib/kcl/bindings/ProgramReturn'
+import { MemoryItem } from '../wasm-lib/kcl/bindings/MemoryItem'
+import { execute_wasm } from '../wasm-lib/pkg/wasm_lib'
+import { KCLError } from './errors'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
+import { rangeTypeFix } from './abstractSyntaxTree'
+
+export type { SourceRange } from '../wasm-lib/kcl/bindings/SourceRange'
+export type { Position } from '../wasm-lib/kcl/bindings/Position'
+export type { Rotation } from '../wasm-lib/kcl/bindings/Rotation'
+export type { Path } from '../wasm-lib/kcl/bindings/Path'
+export type { SketchGroup } from '../wasm-lib/kcl/bindings/SketchGroup'
+export type { MemoryItem } from '../wasm-lib/kcl/bindings/MemoryItem'
+export type { ExtrudeSurface } from '../wasm-lib/kcl/bindings/ExtrudeSurface'
+
+export type PathToNode = [string | number, string][]
+
+interface Memory {
+  [key: string]: MemoryItem
+}
+
+export interface ProgramMemory {
+  root: Memory
+  return: ProgramReturn | null
+}
+
+export const executor = async (
+  node: Program,
+  programMemory: ProgramMemory = { root: {}, return: null },
+  engineCommandManager: EngineCommandManager,
+  // work around while the gemotry is still be stored on the frontend
+  // will be removed when the stream UI is added.
+  tempMapCallback: (a: {
+    artifactMap: ArtifactMap
+    sourceRangeMap: SourceRangeMap
+  }) => void = () => {}
+): Promise<ProgramMemory> => {
+  engineCommandManager.startNewSession()
+  const _programMemory = await _executor(
+    node,
+    programMemory,
+    engineCommandManager
+  )
+  const { artifactMap, sourceRangeMap } =
+    await engineCommandManager.waitForAllCommands(node, _programMemory)
+  tempMapCallback({ artifactMap, sourceRangeMap })
+
+  engineCommandManager.endSession()
+  return _programMemory
+}
+
+export const _executor = async (
+  node: Program,
+  programMemory: ProgramMemory = { root: {}, return: null },
+  engineCommandManager: EngineCommandManager
+): Promise<ProgramMemory> => {
+  try {
+    const memory: ProgramMemory = await execute_wasm(
+      JSON.stringify(node),
+      JSON.stringify(programMemory),
+      engineCommandManager
+    )
+    return memory
+  } catch (e: any) {
+    const parsed: RustKclError = JSON.parse(e.toString())
+    const kclError = new KCLError(
+      parsed.kind,
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
+    )
+
+    console.log(kclError)
+    throw kclError
+  }
+}

src/lang/getNodePathFromSourceRange.test.ts

@@ -1,5 +1,6 @@
 import { getNodePathFromSourceRange, getNodeFromPath } from './queryAst'
-import { Identifier, parse, initPromise } from './wasm'
+import { parser_wasm } from './abstractSyntaxTree'
+import { initPromise } from './rust'
 
 beforeAll(() => initPromise)
 
@@ -19,88 +20,11 @@ const sk3 = startSketchAt([0, 0])
       lineToSubstringIndex + subStr.length,
     ]
 
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const nodePath = getNodePathFromSourceRange(ast, sourceRange)
     const { node } = getNodeFromPath<any>(ast, nodePath)
 
     expect([node.start, node.end]).toEqual(sourceRange)
     expect(node.type).toBe('CallExpression')
   })
-  it('gets path right for function definition params', () => {
-    const code = `fn cube = (pos, scale) => {
-  const sg = startSketchAt(pos)
-    |> line([0, scale], %)
-    |> line([scale, 0], %)
-    |> line([0, -scale], %)
-
-  return sg
-}
-
-const b1 = cube([0,0], 10)`
-    const subStr = 'pos, scale'
-    const subStrIndex = code.indexOf(subStr)
-    const sourceRange: [number, number] = [
-      subStrIndex,
-      subStrIndex + 'pos'.length,
-    ]
-
-    const ast = parse(code)
-    const nodePath = getNodePathFromSourceRange(ast, sourceRange)
-    const node = getNodeFromPath<Identifier>(ast, nodePath).node
-
-    expect(nodePath).toEqual([
-      ['body', ''],
-      [0, 'index'],
-      ['declarations', 'VariableDeclaration'],
-      [0, 'index'],
-      ['init', ''],
-      ['params', 'FunctionExpression'],
-      [0, 'index'],
-    ])
-    expect(node.type).toBe('Identifier')
-    expect(node.name).toBe('pos')
-  })
-  it('gets path right for deep within function definition body', () => {
-    const code = `fn cube = (pos, scale) => {
-  const sg = startSketchAt(pos)
-    |> line([0, scale], %)
-    |> line([scale, 0], %)
-    |> line([0, -scale], %)
-
-  return sg
-}
-
-const b1 = cube([0,0], 10)`
-    const subStr = 'scale, 0'
-    const subStrIndex = code.indexOf(subStr)
-    const sourceRange: [number, number] = [
-      subStrIndex,
-      subStrIndex + 'scale'.length,
-    ]
-
-    const ast = parse(code)
-    const nodePath = getNodePathFromSourceRange(ast, sourceRange)
-    const node = getNodeFromPath<Identifier>(ast, nodePath).node
-    expect(nodePath).toEqual([
-      ['body', ''],
-      [0, 'index'],
-      ['declarations', 'VariableDeclaration'],
-      [0, 'index'],
-      ['init', ''],
-      ['body', 'FunctionExpression'],
-      ['body', 'FunctionExpression'],
-      [0, 'index'],
-      ['declarations', 'VariableDeclaration'],
-      [0, 'index'],
-      ['init', ''],
-      ['body', 'PipeExpression'],
-      [2, 'index'],
-      ['arguments', 'CallExpression'],
-      [0, 'index'],
-      ['elements', 'ArrayExpression'],
-      [0, 'index'],
-    ])
-    expect(node.type).toBe('Identifier')
-    expect(node.name).toBe('scale')
-  })
 })

src/lang/modifyAst.test.ts

@@ -1,4 +1,4 @@
-import { parse, recast, initPromise } from './wasm'
+import { parser_wasm } from './abstractSyntaxTree'
 import {
   createLiteral,
   createIdentifier,
@@ -13,6 +13,8 @@ import {
   giveSketchFnCallTag,
   moveValueIntoNewVariable,
 } from './modifyAst'
+import { recast } from './recast'
+import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
 
 beforeAll(() => initPromise)
@@ -104,13 +106,13 @@ describe('Testing addSketchTo', () => {
         body: [],
         start: 0,
         end: 0,
-        nonCodeMeta: { nonCodeNodes: {}, start: null },
+        nonCodeMeta: { noneCodeNodes: {}, start: null },
       },
       'yz'
     )
     const str = recast(result.modifiedAst)
-    expect(str).toBe(`const part001 = startSketchOn('YZ')
-  |> startProfileAt('default', %)
+    expect(str).toBe(`const part001 = startSketchAt('default')
+  |> ry(90, %)
   |> line('default', %)
 show(part001)
 `)
@@ -124,7 +126,7 @@ function giveSketchFnCallTagTestHelper(
   // giveSketchFnCallTag inputs and outputs an ast, which is very verbose for testing
   // this wrapper changes the input and output to code
   // making it more of an integration test, but easier to read the test intention is the goal
-  const ast = parse(code)
+  const ast = parser_wasm(code)
   const start = code.indexOf(searchStr)
   const range: [number, number] = [start, start + searchStr.length]
   const { modifiedAst, tag, isTagExisting } = giveSketchFnCallTag(ast, range)
@@ -133,8 +135,7 @@ function giveSketchFnCallTagTestHelper(
 }
 
 describe('Testing giveSketchFnCallTag', () => {
-  const code = `const part001 = startSketchOn('XY')
-|> startProfileAt([0, 0], %)
+  const code = `const part001 = startSketchAt([0, 0])
 |> line([-2.57, -0.13], %)
 |> line([0, 0.83], %)
 |> line([0.82, 0.34], %)
@@ -186,8 +187,7 @@ fn ghi = (x) => {
 const abc = 3
 const identifierGuy = 5
 const yo = 5 + 6
-const part001 = startSketchOn('XY')
-|> startProfileAt([-1.2, 4.83], %)
+const part001 = startSketchAt([-1.2, 4.83])
 |> line([2.8, 0], %)
 |> angledLine([100 + 100, 3.09], %)
 |> angledLine([abc, 3.09], %)
@@ -197,7 +197,7 @@ const part001 = startSketchOn('XY')
 const yo2 = hmm([identifierGuy + 5])
 show(part001)`
   it('should move a binary expression into a new variable', async () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('100 + 100') + 1
     const { modifiedAst } = moveValueIntoNewVariable(
@@ -211,7 +211,7 @@ show(part001)`
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
   it('should move a value into a new variable', async () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('2.8') + 1
     const { modifiedAst } = moveValueIntoNewVariable(
@@ -225,7 +225,7 @@ show(part001)`
     expect(newCode).toContain(`line([newVar, 0], %)`)
   })
   it('should move a callExpression into a new variable', async () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('def(')
     const { modifiedAst } = moveValueIntoNewVariable(
@@ -239,7 +239,7 @@ show(part001)`
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
   it('should move a binary expression with call expression into a new variable', async () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('jkl(') + 1
     const { modifiedAst } = moveValueIntoNewVariable(
@@ -253,7 +253,7 @@ show(part001)`
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
   it('should move a identifier into a new variable', async () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('identifierGuy +') + 1
     const { modifiedAst } = moveValueIntoNewVariable(

src/lang/modifyAst.ts

@@ -1,4 +1,4 @@
-import { Selection, ToolTip } from '../useStore'
+import { Selection, TooTip } from '../useStore'
 import {
   Program,
   CallExpression,
@@ -14,15 +14,14 @@ import {
   ObjectExpression,
   UnaryExpression,
   BinaryExpression,
-  PathToNode,
-  ProgramMemory,
-} from './wasm'
+} from './abstractSyntaxTreeTypes'
 import {
   findAllPreviousVariables,
   getNodeFromPath,
   getNodePathFromSourceRange,
   isNodeSafeToReplace,
 } from './queryAst'
+import { PathToNode, ProgramMemory } from './executor'
 import {
   addTagForSketchOnFace,
   getFirstArg,
@@ -32,26 +31,21 @@ import { isLiteralArrayOrStatic } from './std/sketchcombos'
 
 export function addStartSketch(
   node: Program,
-  axis: 'xy' | 'xz' | 'yz' | '-xy' | '-xz' | '-yz',
   start: [number, number],
   end: [number, number]
 ): { modifiedAst: Program; id: string; pathToNode: PathToNode } {
   const _node = { ...node }
   const _name = findUniqueName(node, 'part')
 
-  const startSketchOn = createCallExpressionStdLib('startSketchOn', [
-    createLiteral(axis.toUpperCase()),
-  ])
-  const startProfileAt = createCallExpressionStdLib('startProfileAt', [
+  const startSketchAt = createCallExpression('startSketchAt', [
     createArrayExpression([createLiteral(start[0]), createLiteral(start[1])]),
-    createPipeSubstitution(),
   ])
   const initialLineTo = createCallExpression('line', [
     createArrayExpression([createLiteral(end[0]), createLiteral(end[1])]),
     createPipeSubstitution(),
   ])
 
-  const pipeBody = [startSketchOn, startProfileAt, initialLineTo]
+  const pipeBody = [startSketchAt, initialLineTo]
 
   const variableDeclaration = createVariableDeclaration(
     _name,
@@ -84,11 +78,11 @@ export function addSketchTo(
   const _node = { ...node }
   const _name = name || findUniqueName(node, 'part')
 
-  const startSketchOn = createCallExpressionStdLib('startSketchOn', [
-    createLiteral(axis.toUpperCase()),
-  ])
-  const startProfileAt = createCallExpressionStdLib('startProfileAt', [
+  const startSketchAt = createCallExpressionStdLib('startSketchAt', [
     createLiteral('default'),
+  ])
+  const rotate = createCallExpression(axis === 'xz' ? 'rx' : 'ry', [
+    createLiteral(90),
     createPipeSubstitution(),
   ])
   const initialLineTo = createCallExpressionStdLib('line', [
@@ -96,7 +90,10 @@ export function addSketchTo(
     createPipeSubstitution(),
   ])
 
-  const pipeBody = [startSketchOn, startProfileAt, initialLineTo]
+  const pipeBody =
+    axis !== 'xy'
+      ? [startSketchAt, rotate, initialLineTo]
+      : [startSketchAt, initialLineTo]
 
   const variableDeclaration = createVariableDeclaration(
     _name,
@@ -308,11 +305,7 @@ export function extrudeSketch(
   }
   const name = findUniqueName(node, 'part')
   const VariableDeclaration = createVariableDeclaration(name, extrudeCall)
-  let showCallIndex = getShowIndex(_node)
-  if (showCallIndex == -1) {
-    // We didn't find a show, so let's just append everything
-    showCallIndex = _node.body.length
-  }
+  const showCallIndex = getShowIndex(_node)
   _node.body.splice(showCallIndex, 0, VariableDeclaration)
   const pathToExtrudeArg: PathToNode = [
     ['body', ''],
@@ -324,7 +317,7 @@ export function extrudeSketch(
     [0, 'index'],
   ]
   return {
-    modifiedAst: node,
+    modifiedAst: addToShow(_node, name),
     pathToNode: [...pathToNode.slice(0, -1), [showCallIndex, 'index']],
     pathToExtrudeArg,
   }
@@ -540,7 +533,7 @@ export function createPipeExpression(
     start: 0,
     end: 0,
     body,
-    nonCodeMeta: { nonCodeNodes: {}, start: null },
+    nonCodeMeta: { noneCodeNodes: {}, start: null },
   }
 }
 
@@ -642,7 +635,7 @@ export function giveSketchFnCallTag(
     createLiteral(tag || findUniqueName(ast, 'seg', 2))) as Literal
   const tagStr = String(tagValue.value)
   const newFirstArg = createFirstArg(
-    primaryCallExp.callee.name as ToolTip,
+    primaryCallExp.callee.name as TooTip,
     firstArg.val,
     tagValue
   )

src/lang/queryAst.test.ts

@@ -1,10 +1,11 @@
-import { parse, recast, initPromise } from './wasm'
+import { parser_wasm } from './abstractSyntaxTree'
 import {
   findAllPreviousVariables,
   isNodeSafeToReplace,
   isTypeInValue,
   getNodePathFromSourceRange,
 } from './queryAst'
+import { initPromise } from './rust'
 import { enginelessExecutor } from '../lib/testHelpers'
 import {
   createArrayExpression,
@@ -12,6 +13,7 @@ import {
   createLiteral,
   createPipeSubstitution,
 } from './modifyAst'
+import { recast } from './recast'
 
 beforeAll(() => initPromise)
 
@@ -26,8 +28,7 @@ const halfArmAngle = armAngle / 2
 const arrExpShouldNotBeIncluded = [1, 2, 3]
 const objExpShouldNotBeIncluded = { a: 1, b: 2, c: 3 }
 
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> yLineTo(1, %)
   |> xLine(3.84, %) // selection-range-7ish-before-this
 
@@ -35,7 +36,7 @@ const variableBelowShouldNotBeIncluded = 3
 
 show(part001)`
     const rangeStart = code.indexOf('// selection-range-7ish-before-this') - 7
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
 
     const { variables, bodyPath, insertIndex } = findAllPreviousVariables(
@@ -58,8 +59,7 @@ show(part001)`
 })
 
 describe('testing argIsNotIdentifier', () => {
-  const code = `const part001 = startSketchOn('XY')
-|> startProfileAt([-1.2, 4.83], %)
+  const code = `const part001 = startSketchAt([-1.2, 4.83])
 |> line([2.8, 0], %)
 |> angledLine([100 + 100, 3.09], %)
 |> angledLine([abc, 3.09], %)
@@ -70,7 +70,7 @@ const yo = 5 + 6
 const yo2 = hmm([identifierGuy + 5])
 show(part001)`
   it('find a safe binaryExpression', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('100 + 100') + 2
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -84,7 +84,7 @@ show(part001)`
     expect(outCode).toContain(`angledLine([replaceName, 3.09], %)`)
   })
   it('find a safe Identifier', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('abc')
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -92,7 +92,7 @@ show(part001)`
     expect(code.slice(result.value.start, result.value.end)).toBe('abc')
   })
   it('find a safe CallExpression', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('def')
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -106,7 +106,7 @@ show(part001)`
     expect(outCode).toContain(`angledLine([replaceName, 3.09], %)`)
   })
   it('find an UNsafe CallExpression, as it has a PipeSubstitution', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('ghi')
     const range: [number, number] = [rangeStart, rangeStart]
     const result = isNodeSafeToReplace(ast, range)
@@ -115,7 +115,7 @@ show(part001)`
     expect(code.slice(result.value.start, result.value.end)).toBe('ghi(%)')
   })
   it('find an UNsafe Identifier, as it is a callee', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('ine([2.8,')
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(false)
@@ -125,7 +125,7 @@ show(part001)`
     )
   })
   it("find a safe BinaryExpression that's assigned to a variable", () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('5 + 6') + 1
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -139,7 +139,7 @@ show(part001)`
     expect(outCode).toContain(`const yo = replaceName`)
   })
   it('find a safe BinaryExpression that has a CallExpression within', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('jkl') + 1
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -155,7 +155,7 @@ show(part001)`
     expect(outCode).toContain(`angledLine([replaceName, 3.09], %)`)
   })
   it('find a safe BinaryExpression within a CallExpression', () => {
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const rangeStart = code.indexOf('identifierGuy') + 1
     const result = isNodeSafeToReplace(ast, [rangeStart, rangeStart])
     expect(result.isSafe).toBe(true)
@@ -196,15 +196,14 @@ show(part001)`
 })
 
 describe('testing getNodePathFromSourceRange', () => {
-  const code = `const part001 = startSketchOn('XY')
-  |> startProfileAt([0.39, -0.05], %)
+  const code = `const part001 = startSketchAt([0.39, -0.05])
   |> line([0.94, 2.61], %)
   |> line([-0.21, -1.4], %)
 show(part001)`
   it('finds the second line when cursor is put at the end', () => {
     const searchLn = `line([0.94, 2.61], %)`
     const sourceIndex = code.indexOf(searchLn) + searchLn.length
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const result = getNodePathFromSourceRange(ast, [sourceIndex, sourceIndex])
     expect(result).toEqual([
       ['body', ''],
@@ -213,13 +212,13 @@ show(part001)`
       [0, 'index'],
       ['init', ''],
       ['body', 'PipeExpression'],
-      [2, 'index'],
+      [1, 'index'],
     ])
   })
   it('finds the last line when cursor is put at the end', () => {
     const searchLn = `line([-0.21, -1.4], %)`
     const sourceIndex = code.indexOf(searchLn) + searchLn.length
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const result = getNodePathFromSourceRange(ast, [sourceIndex, sourceIndex])
     const expected = [
       ['body', ''],
@@ -228,7 +227,7 @@ show(part001)`
       [0, 'index'],
       ['init', ''],
       ['body', 'PipeExpression'],
-      [3, 'index'],
+      [2, 'index'],
     ]
     expect(result).toEqual(expected)
     // expect similar result for start of line

src/lang/queryAst.ts

@@ -1,4 +1,5 @@
-import { Selection, ToolTip } from '../useStore'
+import { PathToNode, ProgramMemory, SketchGroup, SourceRange } from './executor'
+import { Selection, TooTip } from '../useStore'
 import {
   BinaryExpression,
   Program,
@@ -9,11 +10,7 @@ import {
   VariableDeclaration,
   ReturnStatement,
   ArrayExpression,
-  PathToNode,
-  ProgramMemory,
-  SketchGroup,
-  SourceRange,
-} from './wasm'
+} from './abstractSyntaxTreeTypes'
 import { createIdentifier, splitPathAtLastIndex } from './modifyAst'
 import { getSketchSegmentFromSourceRange } from './std/sketchConstraints'
 import { getAngle } from '../lib/utils'
@@ -242,29 +239,7 @@ function moreNodePathFromSourceRange(
     }
     return path
   }
-  if (_node.type === 'FunctionExpression' && isInRange) {
-    for (let i = 0; i < _node.params.length; i++) {
-      const param = _node.params[i]
-      if (param.start <= start && param.end >= end) {
-        path.push(['params', 'FunctionExpression'])
-        path.push([i, 'index'])
-        return moreNodePathFromSourceRange(param, sourceRange, path)
-      }
-    }
-    if (_node.body.start <= start && _node.body.end >= end) {
-      path.push(['body', 'FunctionExpression'])
-      const fnBody = _node.body.body
-      for (let i = 0; i < fnBody.length; i++) {
-        const statement = fnBody[i]
-        if (statement.start <= start && statement.end >= end) {
-          path.push(['body', 'FunctionExpression'])
-          path.push([i, 'index'])
-          return moreNodePathFromSourceRange(statement, sourceRange, path)
-        }
-      }
-    }
-  }
-  console.error('not implemented: ' + node.type)
+  console.error('not implemented')
   return path
 }
 
@@ -482,7 +457,7 @@ export function isLinesParallelAndConstrained(
     const secondaryFirstArg = getFirstArg(secondaryNode)
     const constraintType = getConstraintType(
       secondaryFirstArg.val,
-      secondaryNode.callee.name as ToolTip
+      secondaryNode.callee.name as TooTip
     )
     const constraintLevel = getConstraintLevelFromSourceRange(
       secondaryLine.range,

src/lang/recast.test.ts

@@ -1,5 +1,8 @@
-import { parse, Program, recast, initPromise } from './wasm'
+import { recast } from './recast'
+import { parser_wasm } from './abstractSyntaxTree'
+import { Program } from './abstractSyntaxTreeTypes'
 import fs from 'node:fs'
+import { initPromise } from './rust'
 
 beforeAll(() => initPromise)
 
@@ -363,6 +366,6 @@ describe('it recasts binary expression using brackets where needed', () => {
 // helpers
 
 function code2ast(code: string): { ast: Program } {
-  const ast = parse(code)
+  const ast = parser_wasm(code)
   return { ast }
 }

src/lang/recast.ts

@@ -0,0 +1,13 @@
+import { Program } from './abstractSyntaxTreeTypes'
+import { recast_wasm } from '../wasm-lib/pkg/wasm_lib'
+
+export const recast = (ast: Program): string => {
+  try {
+    const s: string = recast_wasm(JSON.stringify(ast))
+    return s
+  } catch (e) {
+    // TODO: do something real with the error.
+    console.log('recast', e)
+    throw e
+  }
+}

src/lang/rust.ts

@@ -0,0 +1,20 @@
+import init from '../wasm-lib/pkg/wasm_lib'
+
+const initialise = async () => {
+  const baseUrl =
+    typeof window === 'undefined'
+      ? 'http://127.0.0.1:3000'
+      : window.location.origin.includes('tauri://localhost')
+      ? 'tauri://localhost'
+      : window.location.origin.includes('localhost')
+      ? 'http://localhost:3000'
+      : window.location.origin && window.location.origin !== 'null'
+      ? window.location.origin
+      : 'http://localhost:3000'
+  const fullUrl = baseUrl + '/wasm_lib_bg.wasm'
+  const input = await fetch(fullUrl)
+  const buffer = await input.arrayBuffer()
+  return init(buffer)
+}
+
+export const initPromise = initialise()

src/lang/std/engineConnection.ts

@@ -1,9 +1,4 @@
-import {
-  ProgramMemory,
-  SourceRange,
-  Program,
-  VariableDeclarator,
-} from 'lang/wasm'
+import { ProgramMemory, SourceRange } from 'lang/executor'
 import { Selections } from 'useStore'
 import { VITE_KC_API_WS_MODELING_URL, VITE_KC_CONNECTION_TIMEOUT_MS } from 'env'
 import { Models } from '@kittycad/lib'
@@ -11,6 +6,7 @@ import { exportSave } from 'lib/exportSave'
 import { v4 as uuidv4 } from 'uuid'
 import * as Sentry from '@sentry/react'
 import { getNodeFromPath, getNodePathFromSourceRange } from 'lang/queryAst'
+import { Program, VariableDeclarator } from 'lang/abstractSyntaxTreeTypes'
 
 let lastMessage = ''
 
@@ -19,17 +15,9 @@ interface CommandInfo {
   range: SourceRange
   parentId?: string
 }
-
-type WebSocketResponse = Models['OkWebSocketResponseData_type']
-
 interface ResultCommand extends CommandInfo {
   type: 'result'
   data: any
-  raw: WebSocketResponse
-}
-interface FailedCommand extends CommandInfo {
-  type: 'failed'
-  errors: Models['FailureWebSocketResponse_type']['errors']
 }
 interface PendingCommand extends CommandInfo {
   type: 'pending'
@@ -38,7 +26,7 @@ interface PendingCommand extends CommandInfo {
 }
 
 export interface ArtifactMap {
-  [key: string]: ResultCommand | PendingCommand | FailedCommand
+  [key: string]: ResultCommand | PendingCommand
 }
 export interface SourceRangeMap {
   [key: string]: SourceRange
@@ -49,10 +37,7 @@ interface NewTrackArgs {
   mediaStream: MediaStream
 }
 
-// This looks funny, I know. This is needed because node and the browser
-// disagree as to the type. In a browser it's a number, but in node it's a
-// "Timeout".
-type Timeout = ReturnType<typeof setTimeout>
+type WebSocketResponse = Models['OkWebSocketResponseData_type']
 
 type ClientMetrics = Models['ClientMetrics_type']
 
@@ -65,9 +50,6 @@ export class EngineConnection {
   unreliableDataChannel?: RTCDataChannel
 
   private ready: boolean
-  private connecting: boolean
-  private dead: boolean
-  private failedConnTimeout: Timeout | null
 
   readonly url: string
   private readonly token?: string
@@ -103,9 +85,6 @@ export class EngineConnection {
     this.url = url
     this.token = token
     this.ready = false
-    this.connecting = false
-    this.dead = false
-    this.failedConnTimeout = null
     this.onWebsocketOpen = onWebsocketOpen
     this.onDataChannelOpen = onDataChannelOpen
     this.onEngineConnectionOpen = onEngineConnectionOpen
@@ -116,10 +95,7 @@ export class EngineConnection {
     // TODO(paultag): This ought to be tweakable.
     const pingIntervalMs = 10000
 
-    let pingInterval = setInterval(() => {
-      if (this.dead) {
-        clearInterval(pingInterval)
-      }
+    setInterval(() => {
       if (this.isReady()) {
         // When we're online, every 10 seconds, we'll attempt to put a 'ping'
         // command through the WebSocket connection. This will help both ends
@@ -128,24 +104,6 @@ export class EngineConnection {
         this.send({ type: 'ping' })
       }
     }, pingIntervalMs)
-
-    const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
-    let connectInterval = setInterval(() => {
-      if (this.dead) {
-        clearInterval(connectInterval)
-        return
-      }
-      if (this.isReady()) {
-        return
-      }
-      console.log('connecting via retry')
-      this.connect()
-    }, connectionTimeoutMs)
-  }
-  // isConnecting will return true when connect has been called, but the full
-  // WebRTC is not online.
-  isConnecting() {
-    return this.connecting
   }
   // isReady will return true only when the WebRTC *and* WebSocket connection
   // are connected. During setup, the WebSocket connection comes online first,
@@ -154,10 +112,6 @@ export class EngineConnection {
   isReady() {
     return this.ready
   }
-  tearDown() {
-    this.dead = true
-    this.close()
-  }
   // shouldTrace will return true when Sentry should be used to instrument
   // the Engine.
   shouldTrace() {
@@ -169,10 +123,8 @@ export class EngineConnection {
   // This will attempt the full handshake, and retry if the connection
   // did not establish.
   connect() {
-    console.log('connect was called')
-    if (this.isConnecting() || this.isReady()) {
-      return
-    }
+    // TODO(paultag): make this safe to call multiple times, and figure out
+    // when a connection is in progress (state: connecting or something).
 
     // Information on the connect transaction
 
@@ -360,11 +312,6 @@ export class EngineConnection {
             if (this.shouldTrace()) {
               iceSpan.resolve?.()
             }
-          } else if (this.pc?.iceConnectionState === 'failed') {
-            // failed is a terminal state; let's explicitly kill the
-            // connection to the server at this point.
-            console.log('failed to negotiate ice connection; restarting')
-            this.close()
           }
         })
 
@@ -409,6 +356,20 @@ export class EngineConnection {
           })
         })
       }
+
+      // TODO(paultag): This ought to be both controllable, as well as something
+      // like exponential backoff to have some grace on the backend, as well as
+      // fix responsiveness for clients that had a weird network hiccup.
+      const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
+
+      setTimeout(() => {
+        if (this.isReady()) {
+          return
+        }
+        console.log('engine connection timeout on connection, retrying')
+        this.close()
+        this.connect()
+      }, connectionTimeoutMs)
     })
 
     this.pc.addEventListener('track', (event) => {
@@ -434,6 +395,8 @@ export class EngineConnection {
 
           let videoTrack = mediaStream.getVideoTracks()[0]
           this.pc?.getStats(videoTrack).then((videoTrackStats) => {
+            // TODO(paultag): this needs type information from the KittyCAD typescript
+            // library once it's updated
             let client_metrics: ClientMetrics = {
               rtc_frames_decoded: 0,
               rtc_frames_dropped: 0,
@@ -461,13 +424,12 @@ export class EngineConnection {
                   videoTrackReport.framesReceived
                 client_metrics.rtc_frames_per_second =
                   videoTrackReport.framesPerSecond || 0
-                client_metrics.rtc_freeze_count =
-                  videoTrackReport.freezeCount || 0
+                client_metrics.rtc_freeze_count = videoTrackReport.freezeCount
                 client_metrics.rtc_jitter_sec = videoTrackReport.jitter
                 client_metrics.rtc_keyframes_decoded =
                   videoTrackReport.keyFramesDecoded
                 client_metrics.rtc_total_freezes_duration_sec =
-                  videoTrackReport.totalFreezesDuration || 0
+                  videoTrackReport.totalFreezesDuration
               } else if (videoTrackReport.type === 'transport') {
                 // videoTrackReport.bytesReceived,
                 // videoTrackReport.bytesSent,
@@ -496,11 +458,8 @@ export class EngineConnection {
 
         this.onDataChannelOpen(this)
 
-        this.ready = true
-        this.connecting = false
-        // Do this after we set the connection is ready to avoid errors when
-        // we try to send messages before the connection is ready.
         this.onEngineConnectionOpen(this)
+        this.ready = true
       })
 
       this.unreliableDataChannel.addEventListener('close', (event) => {
@@ -514,31 +473,8 @@ export class EngineConnection {
       })
     })
 
-    const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
-
-    if (this.failedConnTimeout) {
-      console.log('clearing timeout before set')
-      clearTimeout(this.failedConnTimeout)
-      this.failedConnTimeout = null
-    }
-    console.log('timeout set')
-    this.failedConnTimeout = setTimeout(() => {
-      if (this.isReady()) {
-        return
-      }
-      console.log('engine connection timeout on connection, closing')
-      this.close()
-    }, connectionTimeoutMs)
-
     this.onConnectionStarted(this)
   }
-  unreliableSend(message: object | string) {
-    // TODO(paultag): Add in logic to determine the connection state and
-    // take actions if needed?
-    this.unreliableDataChannel?.send(
-      typeof message === 'string' ? message : JSON.stringify(message)
-    )
-  }
   send(message: object | string) {
     // TODO(paultag): Add in logic to determine the connection state and
     // take actions if needed?
@@ -554,15 +490,9 @@ export class EngineConnection {
     this.pc = undefined
     this.unreliableDataChannel = undefined
     this.webrtcStatsCollector = undefined
-    if (this.failedConnTimeout) {
-      console.log('closed timeout in close')
-      clearTimeout(this.failedConnTimeout)
-      this.failedConnTimeout = null
-    }
 
     this.onClose(this)
     this.ready = false
-    this.connecting = false
   }
 }
 
@@ -593,9 +523,6 @@ export class EngineCommandManager {
   outSequence = 1
   inSequence = 1
   engineConnection?: EngineConnection
-  // Folks should realize that wait for ready does not get called _everytime_
-  // the connection resets and restarts, it only gets called the first time.
-  // Be careful what you put here.
   waitForReady: Promise<void> = new Promise(() => {})
   private resolveReady = () => {}
 
@@ -609,36 +536,19 @@ export class EngineCommandManager {
       [localUnsubscribeId: string]: (a: any) => void
     }
   } = {} as any
-
-  constructor() {
-    this.engineConnection = undefined
-  }
-
-  start({
+  constructor({
     setMediaStream,
     setIsStreamReady,
     width,
     height,
-    executeCode,
     token,
   }: {
     setMediaStream: (stream: MediaStream) => void
     setIsStreamReady: (isStreamReady: boolean) => void
     width: number
     height: number
-    executeCode: (code?: string, force?: boolean) => void
     token?: string
   }) {
-    if (width === 0 || height === 0) {
-      return
-    }
-
-    // If we already have an engine connection, just need to resize the stream.
-    if (this.engineConnection) {
-      this.handleResize({ streamWidth: width, streamHeight: height })
-      return
-    }
-
     this.waitForReady = new Promise((resolve) => {
       this.resolveReady = resolve
     })
@@ -649,32 +559,6 @@ export class EngineCommandManager {
       onEngineConnectionOpen: () => {
         this.resolveReady()
         setIsStreamReady(true)
-
-        // Make the axis gizmo.
-        // We do this after the connection opened to avoid a race condition.
-        // Connected opened is the last thing that happens when the stream
-        // is ready.
-        // We also do this here because we want to ensure we create the gizmo
-        // and execute the code everytime the stream is restarted.
-        const gizmoId = uuidv4()
-        this.sendSceneCommand({
-          type: 'modeling_cmd_req',
-          cmd_id: gizmoId,
-          cmd: {
-            type: 'make_axes_gizmo',
-            clobber: false,
-            // If true, axes gizmo will be placed in the corner of the screen.
-            // If false, it will be placed at the origin of the scene.
-            gizmo_mode: true,
-          },
-        })
-
-        // We execute the code here to make sure if the stream was to
-        // restart in a session, we want to make sure to execute the code.
-        // We force it to re-execute the code because we want to make sure
-        // the code is executed everytime the stream is restarted.
-        // We pass undefined for the code so it reads from the current state.
-        executeCode(undefined, true)
       },
       onClose: () => {
         setIsStreamReady(false)
@@ -725,12 +609,6 @@ export class EngineCommandManager {
               message.request_id
             ) {
               this.handleModelingCommand(message.resp, message.request_id)
-            } else if (
-              !message.success &&
-              message.request_id &&
-              this.artifactMap[message.request_id]
-            ) {
-              this.handleFailedModelingCommand(message)
             }
           }
         })
@@ -750,30 +628,6 @@ export class EngineCommandManager {
 
     this.engineConnection?.connect()
   }
-  handleResize({
-    streamWidth,
-    streamHeight,
-  }: {
-    streamWidth: number
-    streamHeight: number
-  }) {
-    console.log('handleResize', streamWidth, streamHeight)
-    if (!this.engineConnection?.isReady()) {
-      return
-    }
-
-    const resizeCmd: EngineCommand = {
-      type: 'modeling_cmd_req',
-      cmd_id: uuidv4(),
-      cmd: {
-        type: 'reconfigure_stream',
-        width: streamWidth,
-        height: streamHeight,
-        fps: 60,
-      },
-    }
-    this.engineConnection?.send(resizeCmd)
-  }
   handleModelingCommand(message: WebSocketResponse, id: string) {
     if (message.type !== 'modeling') {
       return
@@ -792,14 +646,12 @@ export class EngineCommandManager {
         commandType: command.commandType,
         parentId: command.parentId ? command.parentId : undefined,
         data: modelingResponse,
-        raw: message,
       }
       resolve({
         id,
         commandType: command.commandType,
         range: command.range,
         data: modelingResponse,
-        raw: message,
       })
     } else {
       this.artifactMap[id] = {
@@ -807,44 +659,11 @@ export class EngineCommandManager {
         commandType: command?.commandType,
         range: command?.range,
         data: modelingResponse,
-        raw: message,
-      }
-    }
-  }
-  handleFailedModelingCommand({
-    request_id,
-    errors,
-  }: Models['FailureWebSocketResponse_type']) {
-    const id = request_id
-    if (!id) return
-    const command = this.artifactMap[id]
-    if (command && command.type === 'pending') {
-      const resolve = command.resolve
-      this.artifactMap[id] = {
-        type: 'failed',
-        range: command.range,
-        commandType: command.commandType,
-        parentId: command.parentId ? command.parentId : undefined,
-        errors,
-      }
-      resolve({
-        id,
-        commandType: command.commandType,
-        range: command.range,
-        errors,
-      })
-    } else {
-      this.artifactMap[id] = {
-        type: 'failed',
-        range: command.range,
-        commandType: command.commandType,
-        parentId: command.parentId ? command.parentId : undefined,
-        errors,
       }
     }
   }
   tearDown() {
-    this.engineConnection?.tearDown()
+    this.engineConnection?.close()
   }
   startNewSession() {
     this.artifactMap = {}
@@ -939,14 +758,6 @@ export class EngineCommandManager {
     })
   }
   sendSceneCommand(command: EngineCommand): Promise<any> {
-    if (this.engineConnection === undefined) {
-      return Promise.resolve()
-    }
-
-    if (!this.engineConnection?.isReady()) {
-      return Promise.resolve()
-    }
-
     if (
       command.type === 'modeling_cmd_req' &&
       command.cmd.type !== lastMessage
@@ -954,6 +765,10 @@ export class EngineCommandManager {
       console.log('sending command', command.cmd.type)
       lastMessage = command.cmd.type
     }
+    if (!this.engineConnection?.isReady()) {
+      console.log('socket not ready')
+      return Promise.resolve()
+    }
     if (command.type !== 'modeling_cmd_req') return Promise.resolve()
     const cmd = command.cmd
     if (
@@ -963,7 +778,9 @@ export class EngineCommandManager {
     ) {
       cmd.sequence = this.outSequence
       this.outSequence++
-      this.engineConnection?.unreliableSend(command)
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
       return Promise.resolve()
     } else if (
       cmd.type === 'highlight_set_entity' &&
@@ -971,7 +788,9 @@ export class EngineCommandManager {
     ) {
       cmd.sequence = this.outSequence
       this.outSequence++
-      this.engineConnection?.unreliableSend(command)
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
       return Promise.resolve()
     } else if (
       cmd.type === 'mouse_move' &&
@@ -979,7 +798,9 @@ export class EngineCommandManager {
     ) {
       cmd.sequence = this.outSequence
       this.outSequence++
-      this.engineConnection?.unreliableSend(command)
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
       return Promise.resolve()
     }
     // since it's not mouse drag or highlighting send over TCP and keep track of the command
@@ -995,12 +816,10 @@ export class EngineCommandManager {
     range: SourceRange
     command: EngineCommand | string
   }): Promise<any> {
-    if (this.engineConnection === undefined) {
-      return Promise.resolve()
-    }
     this.sourceRangeMap[id] = range
 
     if (!this.engineConnection?.isReady()) {
+      console.log('socket not ready')
       return Promise.resolve()
     }
     this.engineConnection?.send(command)
@@ -1043,9 +862,6 @@ export class EngineCommandManager {
     rangeStr: string,
     commandStr: string
   ): Promise<any> {
-    if (this.engineConnection === undefined) {
-      return Promise.resolve()
-    }
     if (id === undefined) {
       throw new Error('id is undefined')
     }
@@ -1057,10 +873,7 @@ export class EngineCommandManager {
     }
     const range: SourceRange = JSON.parse(rangeStr)
 
-    // We only care about the modeling command response.
-    return this.sendModelingCommand({ id, range, command: commandStr }).then(
-      ({ raw }) => JSON.stringify(raw)
-    )
+    return this.sendModelingCommand({ id, range, command: commandStr })
   }
   commandResult(id: string): Promise<any> {
     const command = this.artifactMap[id]
@@ -1069,8 +882,6 @@ export class EngineCommandManager {
     }
     if (command.type === 'result') {
       return command.data
-    } else if (command.type === 'failed') {
-      return Promise.resolve(command.errors)
     }
     return command.promise
   }
@@ -1096,18 +907,15 @@ export class EngineCommandManager {
     }
   }
   private async fixIdMappings(ast: Program, programMemory: ProgramMemory) {
-    if (this.engineConnection === undefined) {
-      return
-    }
     /* This is a temporary solution since the cmd_ids that are sent through when
-    sending 'extend_path' ids are not used as the segment ids.
+    sending 'extend_path' ids are not used as the segment ids. 
 
     We have a way to back fill them with 'path_get_info', however this relies on one
     the sketchGroup array and the segements array returned from the server to be in
     the same length and order. plus it's super hacky, we first use the path_id to get
     the source range of the pipe expression then use the name of the variable to get
     the sketchGroup from programMemory.
-
+    
     I feel queezy about relying on all these steps to always line up.
     We have also had to pollute this EngineCommandManager class with knowledge of both the ast and programMemory
     We should get the cmd_ids to match with the segment ids and delete this method.
@@ -1135,6 +943,7 @@ export class EngineCommandManager {
     pathInfos.forEach(({ originalId, segments }) => {
       const originalArtifact = this.artifactMap[originalId]
       if (!originalArtifact || originalArtifact.type === 'pending') {
+        console.log('problem')
         return
       }
       const pipeExpPath = getNodePathFromSourceRange(
@@ -1147,20 +956,23 @@ export class EngineCommandManager {
         'VariableDeclarator'
       ).node
       if (pipeExp.type !== 'VariableDeclarator') {
+        console.log('problem', pipeExp, pipeExpPath, ast)
         return
       }
       const variableName = pipeExp.id.name
       const memoryItem = programMemory.root[variableName]
       if (!memoryItem) {
+        console.log('problem', variableName, programMemory)
         return
       } else if (memoryItem.type !== 'SketchGroup') {
+        console.log('problem', memoryItem, programMemory)
         return
       }
-
       const relevantSegments = segments.filter(
         ({ command_id }: { command_id: string | null }) => command_id
       )
       if (memoryItem.value.length !== relevantSegments.length) {
+        console.log('problem', memoryItem.value, relevantSegments)
         return
       }
       for (let i = 0; i < relevantSegments.length; i++) {
@@ -1170,13 +982,9 @@ export class EngineCommandManager {
         const artifact = this.artifactMap[oldId]
         delete this.artifactMap[oldId]
         delete this.sourceRangeMap[oldId]
-        if (artifact) {
-          this.artifactMap[engineSegment.command_id] = artifact
-          this.sourceRangeMap[engineSegment.command_id] = artifact.range
-        }
+        this.artifactMap[engineSegment.command_id] = artifact
+        this.sourceRangeMap[engineSegment.command_id] = artifact.range
       }
     })
   }
 }
-
-export const engineCommandManager = new EngineCommandManager()

src/lang/std/sketch.test.ts

@@ -6,9 +6,13 @@ import {
   getXComponent,
   addCloseToPipe,
 } from './sketch'
-import { parse, recast, initPromise } from '../wasm'
+import { parser_wasm } from '../abstractSyntaxTree'
 import { getNodePathFromSourceRange } from '../queryAst'
+import { recast } from '../recast'
 import { enginelessExecutor } from '../../lib/testHelpers'
+import { initPromise } from '../rust'
+
+beforeAll(() => initPromise)
 
 const eachQuad: [number, [number, number]][] = [
   [-315, [1, 1]],
@@ -25,8 +29,6 @@ const eachQuad: [number, [number, number]][] = [
   [675, [1, -1]],
 ]
 
-beforeAll(() => initPromise)
-
 describe('testing getYComponent', () => {
   it('should return the vertical component of a vector correctly when given angles in each quadrant (and with angles < 0, or > 360)', () => {
     const expected: [number, number][] = []
@@ -96,8 +98,7 @@ describe('testing changeSketchArguments', () => {
   const lineAfterChange = 'lineTo([2, 3], %)'
   test('changeSketchArguments', async () => {
     // Enable rotations #152
-    const genCode = (line: string) => `const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+    const genCode = (line: string) => `const mySketch001 = startSketchAt([0, 0])
   |> ${line}
   |> lineTo([0.46, -5.82], %)
 // |> rx(45, %)
@@ -105,7 +106,7 @@ show(mySketch001)
 `
     const code = genCode(lineToChange)
     const expectedCode = genCode(lineAfterChange)
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const sourceStart = code.indexOf(lineToChange)
     const { modifiedAst } = changeSketchArguments(
@@ -116,7 +117,6 @@ show(mySketch001)
       {
         mode: 'sketch',
         sketchMode: 'sketchEdit',
-        pathId: '',
         rotation: [0, 0, 0, 1],
         position: [0, 0, 0],
         pathToNode: [
@@ -138,16 +138,15 @@ describe('testing addNewSketchLn', () => {
   test('addNewSketchLn', async () => {
     // Enable rotations #152
     const code = `
-const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
 show(mySketch001)`
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const sourceStart = code.indexOf(lineToChange)
-    expect(sourceStart).toBe(95)
+    expect(sourceStart).toBe(66)
     let { modifiedAst } = addNewSketchLn({
       node: ast,
       programMemory,
@@ -162,8 +161,7 @@ show(mySketch001)`
       ],
     })
     // Enable rotations #152
-    let expectedCode = `const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+    let expectedCode = `const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
@@ -184,8 +182,7 @@ show(mySketch001)
       ],
     })
 
-    expectedCode = `const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+    expectedCode = `const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> lineTo([-1.59, -1.54], %)
   |> lineTo([0.46, -5.82], %)
@@ -200,15 +197,14 @@ describe('testing addTagForSketchOnFace', () => {
   it('needs to be in it', async () => {
     const originalLine = 'lineTo([-1.59, -1.54], %)'
     // Enable rotations #152
-    const genCode = (line: string) => `const mySketch001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+    const genCode = (line: string) => `const mySketch001 = startSketchAt([0, 0])
   // |> rx(45, %)
   |> ${line}
   |> lineTo([0.46, -5.82], %)
 show(mySketch001)
 `
     const code = genCode(originalLine)
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const programMemory = await enginelessExecutor(ast)
     const sourceStart = code.indexOf(originalLine)
     const sourceRange: [number, number] = [

src/lang/std/sketch.ts

@@ -4,6 +4,9 @@ import {
   SketchGroup,
   SourceRange,
   PathToNode,
+  MemoryItem,
+} from '../executor'
+import {
   Program,
   PipeExpression,
   CallExpression,
@@ -11,14 +14,14 @@ import {
   Value,
   Literal,
   VariableDeclaration,
-} from '../wasm'
+} from '../abstractSyntaxTreeTypes'
 import {
   getNodeFromPath,
   getNodeFromPathCurry,
   getNodePathFromSourceRange,
 } from '../queryAst'
 import { isLiteralArrayOrStatic } from './sketchcombos'
-import { GuiModes, toolTips, ToolTip } from '../../useStore'
+import { GuiModes, toolTips, TooTip } from '../../useStore'
 import { createPipeExpression, splitPathAtPipeExpression } from '../modifyAst'
 import { generateUuidFromHashSeed } from '../../lib/uuid'
 
@@ -35,6 +38,7 @@ import {
   findUniqueName,
 } from '../modifyAst'
 import { roundOff, getLength, getAngle } from '../../lib/utils'
+import { getSketchSegmentFromSourceRange } from './sketchConstraints'
 import { perpendicularDistance } from 'sketch-helpers'
 
 export type Coords2d = [number, number]
@@ -53,7 +57,7 @@ export function getCoordsFromPaths(skGroup: SketchGroup, index = 0): Coords2d {
 }
 
 export function createFirstArg(
-  sketchFn: ToolTip,
+  sketchFn: TooTip,
   val: Value | [Value, Value] | [Value, Value, Value],
   tag?: Value
 ): Value {
@@ -939,7 +943,7 @@ interface CreateLineFnCallArgs {
   programMemory: ProgramMemory
   to: [number, number]
   from: [number, number]
-  fnName: ToolTip
+  fnName: TooTip
   pathToNode: PathToNode
 }
 
@@ -1025,7 +1029,7 @@ export function replaceSketchLine({
   node: Program
   programMemory: ProgramMemory
   sourceRange: SourceRange
-  fnName: ToolTip
+  fnName: TooTip
   to: [number, number]
   from: [number, number]
   createCallback: TransformCallback
@@ -1204,7 +1208,7 @@ function getFirstArgValuesForAngleFns(callExpression: CallExpression): {
     const tag = firstArg.properties.find((p) => p.key.name === 'tag')?.value
     const angle = firstArg.properties.find((p) => p.key.name === 'angle')?.value
     const secondArgName = ['angledLineToX', 'angledLineToY'].includes(
-      callExpression?.callee?.name as ToolTip
+      callExpression?.callee?.name as TooTip
     )
       ? 'to'
       : 'length'

src/lang/std/sketchConstraints.test.ts

@@ -1,9 +1,12 @@
-import { parse, SketchGroup, recast, initPromise } from '../wasm'
+import { parser_wasm } from '../abstractSyntaxTree'
+import { SketchGroup } from '../executor'
 import {
   ConstraintType,
   getTransformInfos,
   transformAstSketchLines,
 } from './sketchcombos'
+import { recast } from '../recast'
+import { initPromise } from '../rust'
 import { getSketchSegmentFromSourceRange } from './sketchConstraints'
 import { Selection } from '../../useStore'
 import { enginelessExecutor } from '../../lib/testHelpers'
@@ -28,7 +31,7 @@ async function testingSwapSketchFnCall({
     type: 'default',
     range: [startIndex, startIndex + callToSwap.length],
   }
-  const ast = parse(inputCode)
+  const ast = parser_wasm(inputCode)
   const programMemory = await enginelessExecutor(ast)
   const selections = {
     codeBasedSelections: [range],
@@ -52,8 +55,7 @@ async function testingSwapSketchFnCall({
 
 describe('testing swaping out sketch calls with xLine/xLineTo', () => {
   const bigExampleArr = [
-    `const part001 = startSketchOn('XY')`,
-    `  |> startProfileAt([0, 0], %)`,
+    `const part001 = startSketchAt([0, 0])`,
     `  |> lineTo({ to: [1, 1], tag: 'abc1' }, %)`,
     `  |> line({ to: [-2.04, -0.7], tag: 'abc2' }, %)`,
     `  |> angledLine({`,
@@ -278,8 +280,7 @@ describe('testing swaping out sketch calls with xLine/xLineTo while keeping vari
     `const angledLineOfYLengthY = 0.89`,
     `const angledLineToXx = -1.86`,
     `const angledLineToYy = -0.76`,
-    `const part001 = startSketchOn('XY')`,
-    `  |> startProfileAt([0, 0], %)`,
+    `const part001 = startSketchAt([0, 0])`,
     // `  |> rx(90, %)`,
     `  |> lineTo([1, 1], %)`,
     `  |> line([lineX, 2.13], %)`,
@@ -373,15 +374,14 @@ describe('testing swaping out sketch calls with xLine/xLineTo while keeping vari
 
 describe('testing getSketchSegmentIndexFromSourceRange', () => {
   const code = `
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0.04], %) // segment-in-start
+const part001 = startSketchAt([0, 0.04]) // segment-in-start
   |> line([0, 0.4], %)
   |> xLine(3.48, %)
   |> line([2.14, 1.35], %) // normal-segment
   |> xLine(3.54, %)
 show(part001)`
   it('normal case works', async () => {
-    const programMemory = await enginelessExecutor(parse(code))
+    const programMemory = await enginelessExecutor(parser_wasm(code))
     const index = code.indexOf('// normal-segment') - 7
     const { __geoMeta, ...segment } = getSketchSegmentFromSourceRange(
       programMemory.root['part001'] as SketchGroup,
@@ -395,7 +395,7 @@ show(part001)`
     })
   })
   it('verify it works when the segment is in the `start` property', async () => {
-    const programMemory = await enginelessExecutor(parse(code))
+    const programMemory = await enginelessExecutor(parser_wasm(code))
     const index = code.indexOf('// segment-in-start') - 7
     const { __geoMeta, ...segment } = getSketchSegmentFromSourceRange(
       programMemory.root['part001'] as SketchGroup,

src/lang/std/sketchConstraints.ts

@@ -1,12 +1,10 @@
-import { ToolTip, toolTips } from '../../useStore'
+import { TooTip, toolTips } from '../../useStore'
 import {
   Program,
   VariableDeclarator,
   CallExpression,
-  SketchGroup,
-  SourceRange,
-  Path,
-} from '../wasm'
+} from '../abstractSyntaxTreeTypes'
+import { SketchGroup, SourceRange, Path } from '../executor'
 
 export function getSketchSegmentFromSourceRange(
   sketchGroup: SketchGroup,
@@ -69,10 +67,7 @@ export function isSketchVariablesLinked(
     return false
   const firstCallExp = // first in pipe expression or just the call expression
     init?.type === 'CallExpression' ? init : (init?.body[0] as CallExpression)
-  if (
-    !firstCallExp ||
-    !toolTips.includes(firstCallExp?.callee?.name as ToolTip)
-  )
+  if (!firstCallExp || !toolTips.includes(firstCallExp?.callee?.name as TooTip))
     return false
   // convention for sketch fns is that the second argument is the sketch group
   const secondArg = firstCallExp?.arguments[1]

src/lang/std/sketchcombos.test.ts

@@ -1,4 +1,5 @@
-import { parse, Value, recast, initPromise } from '../wasm'
+import { parser_wasm } from '../abstractSyntaxTree'
+import { Value } from '../abstractSyntaxTreeTypes'
 import {
   getConstraintType,
   getTransformInfos,
@@ -7,8 +8,10 @@ import {
   ConstraintType,
   getConstraintLevelFromSourceRange,
 } from './sketchcombos'
-import { Selections, ToolTip } from '../../useStore'
+import { initPromise } from '../rust'
+import { Selections, TooTip } from '../../useStore'
 import { enginelessExecutor } from '../../lib/testHelpers'
+import { recast } from '../../lang/recast'
 
 beforeAll(() => initPromise)
 
@@ -60,20 +63,20 @@ describe('testing getConstraintType', () => {
 function getConstraintTypeFromSourceHelper(
   code: string
 ): ReturnType<typeof getConstraintType> {
-  const ast = parse(code)
+  const ast = parser_wasm(code)
   const args = (ast.body[0] as any).expression.arguments[0].elements as [
     Value,
     Value
   ]
-  const fnName = (ast.body[0] as any).expression.callee.name as ToolTip
+  const fnName = (ast.body[0] as any).expression.callee.name as TooTip
   return getConstraintType(args, fnName)
 }
 function getConstraintTypeFromSourceHelper2(
   code: string
 ): ReturnType<typeof getConstraintType> {
-  const ast = parse(code)
+  const ast = parser_wasm(code)
   const arg = (ast.body[0] as any).expression.arguments[0] as Value
-  const fnName = (ast.body[0] as any).expression.callee.name as ToolTip
+  const fnName = (ast.body[0] as any).expression.callee.name as TooTip
   return getConstraintType(arg, fnName)
 }
 
@@ -92,8 +95,7 @@ const myVar2 = 5
 const myVar3 = 6
 const myAng = 40
 const myAng2 = 134
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> line([1, 3.82], %) // ln-should-get-tag
   |> lineTo([myVar, 1], %) // ln-lineTo-xAbsolute should use angleToMatchLengthX helper
   |> lineTo([1, myVar], %) // ln-lineTo-yAbsolute should use angleToMatchLengthY helper
@@ -129,8 +131,7 @@ const myVar2 = 5
 const myVar3 = 6
 const myAng = 40
 const myAng2 = 134
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> line({ to: [1, 3.82], tag: 'seg01' }, %) // ln-should-get-tag
   |> angledLineToX([
        -angleToMatchLengthX('seg01', myVar, %),
@@ -198,7 +199,7 @@ const part001 = startSketchOn('XY')
 show(part001)
 `
   it('should transform the ast', async () => {
-    const ast = parse(inputScript)
+    const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
       .filter((ln) => ln.includes('//'))
@@ -233,8 +234,7 @@ describe('testing transformAstForSketchLines for vertical and horizontal constra
   const inputScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> lineTo([1, 1], %)
   |> line([-6.28, 1.4], %) // select for horizontal constraint 1
   |> line([-1.07, myVar], %) // select for vertical constraint 1
@@ -262,8 +262,7 @@ show(part001)
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> lineTo([1, 1], %)
   |> xLine(-6.28, %) // select for horizontal constraint 1
   |> line([-1.07, myVar], %) // select for vertical constraint 1
@@ -287,7 +286,7 @@ const part001 = startSketchOn('XY')
   |> angledLineToY([301, myVar], %) // select for vertical constraint 10
 show(part001)
 `
-    const ast = parse(inputScript)
+    const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
       .filter((ln) => ln.includes('// select for horizontal constraint'))
@@ -321,8 +320,7 @@ show(part001)
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> lineTo([1, 1], %)
   |> line([-6.28, 1.4], %) // select for horizontal constraint 1
   |> yLine(myVar, %) // select for vertical constraint 1
@@ -346,7 +344,7 @@ const part001 = startSketchOn('XY')
   |> yLineTo(myVar, %) // select for vertical constraint 10
 show(part001)
 `
-    const ast = parse(inputScript)
+    const ast = parser_wasm(inputScript)
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
       .filter((ln) => ln.includes('// select for vertical constraint'))
@@ -381,8 +379,7 @@ show(part001)
 describe('testing transformAstForSketchLines for vertical and horizontal distance constraints', () => {
   describe('testing setHorzDistance for line', () => {
     const inputScript = `const myVar = 1
-const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+const part001 = startSketchAt([0, 0])
   |> line([0.31, 1.67], %) // base selection
   |> line([0.45, 1.46], %)
   |> line([0.45, 1.46], %) // free
@@ -438,7 +435,7 @@ async function helperThing(
   linesOfInterest: string[],
   constraint: ConstraintType
 ): Promise<string> {
-  const ast = parse(inputScript)
+  const ast = parser_wasm(inputScript)
   const selectionRanges: Selections['codeBasedSelections'] = inputScript
     .split('\n')
     .filter((ln) =>
@@ -483,8 +480,7 @@ const baseThickHalf = baseThick / 2
 const halfHeight = totalHeight / 2
 const halfArmAngle = armAngle / 2
 
-const part001 = startSketchOn('XY')
-  |> startProfileAt([-0.01, -0.05], %)
+const part001 = startSketchAt([-0.01, -0.05])
   |> line([0.01, 0.94 + 0], %) // partial
   |> xLine(3.03, %) // partial
   |> angledLine({
@@ -502,7 +498,7 @@ const part001 = startSketchOn('XY')
   |> xLine(-3.43 + 0, %) // full
   |> angledLineOfXLength([243 + 0, 1.2 + 0], %) // full
 show(part001)`
-    const ast = parse(code)
+    const ast = parser_wasm(code)
     const constraintLevels: ReturnType<
       typeof getConstraintLevelFromSourceRange
     >[] = ['full', 'partial', 'free']

src/lang/std/sketchcombos.ts

@@ -1,14 +1,12 @@
 import { TransformCallback } from './stdTypes'
-import { Selections, toolTips, ToolTip, Selection } from '../../useStore'
+import { Selections, toolTips, TooTip, Selection } from '../../useStore'
 import {
   CallExpression,
   Program,
   Value,
   BinaryPart,
   VariableDeclarator,
-  PathToNode,
-  ProgramMemory,
-} from '../wasm'
+} from '../abstractSyntaxTreeTypes'
 import {
   getNodeFromPath,
   getNodeFromPathCurry,
@@ -27,8 +25,10 @@ import {
   giveSketchFnCallTag,
 } from '../modifyAst'
 import { createFirstArg, getFirstArg, replaceSketchLine } from './sketch'
+import { PathToNode, ProgramMemory } from '../executor'
 import { getSketchSegmentFromSourceRange } from './sketchConstraints'
 import { getAngle, roundOff, normaliseAngle } from '../../lib/utils'
+import { MemoryItem } from 'wasm-lib/kcl/bindings/MemoryItem'
 
 type LineInputsType =
   | 'xAbsolute'
@@ -54,7 +54,7 @@ export type ConstraintType =
   | 'setAngleBetween'
 
 function createCallWrapper(
-  a: ToolTip,
+  a: TooTip,
   val: [Value, Value] | Value,
   tag?: Value,
   valueUsedInTransform?: number
@@ -101,7 +101,7 @@ function intersectCallWrapper({
 }
 
 export type TransformInfo = {
-  tooltip: ToolTip
+  tooltip: TooTip
   createNode: (a: {
     varValA: Value // x / angle
     varValB: Value // y / length or x y for angledLineOfXlength etc
@@ -112,7 +112,7 @@ export type TransformInfo = {
 }
 
 type TransformMap = {
-  [key in ToolTip]?: {
+  [key in TooTip]?: {
     [key in LineInputsType | 'free']?: {
       [key in ConstraintType]?: TransformInfo
     }
@@ -1095,12 +1095,12 @@ export function getRemoveConstraintsTransform(
   sketchFnExp: CallExpression,
   constraintType: ConstraintType
 ): TransformInfo | false {
-  let name = sketchFnExp.callee.name as ToolTip
+  let name = sketchFnExp.callee.name as TooTip
   if (!toolTips.includes(name)) {
     return false
   }
   const xyLineMap: {
-    [key in ToolTip]?: ToolTip
+    [key in TooTip]?: TooTip
   } = {
     xLine: 'line',
     yLine: 'line',
@@ -1167,12 +1167,12 @@ function getTransformMapPath(
   constraintType: ConstraintType
 ):
   | {
-      toolTip: ToolTip
+      toolTip: TooTip
       lineInputType: LineInputsType | 'free'
       constraintType: ConstraintType
     }
   | false {
-  const name = sketchFnExp.callee.name as ToolTip
+  const name = sketchFnExp.callee.name as TooTip
   if (!toolTips.includes(name)) {
     return false
   }
@@ -1225,7 +1225,7 @@ export function getTransformInfo(
 
 export function getConstraintType(
   val: Value | [Value, Value] | [Value, Value, Value],
-  fnName: ToolTip
+  fnName: TooTip
 ): LineInputsType | null {
   // this function assumes that for two val sketch functions that one arg is locked down not both
   // and for one val sketch functions that the arg is NOT locked down
@@ -1279,7 +1279,7 @@ export function getTransformInfos(
     }) as TransformInfo[]
     return theTransforms
   } catch (error) {
-    console.log('error', error)
+    console.log(error)
     return []
   }
 }
@@ -1445,7 +1445,7 @@ export function transformAstSketchLines({
         programMemory,
         sourceRange: range,
         referencedSegment,
-        fnName: transformTo || (callExp.callee.name as ToolTip),
+        fnName: transformTo || (callExp.callee.name as TooTip),
         to,
         from,
         createCallback: callBack({
@@ -1511,7 +1511,7 @@ export function getConstraintLevelFromSourceRange(
     getNodePathFromSourceRange(ast, cursorRange),
     'CallExpression'
   )
-  const name = sketchFnExp?.callee?.name as ToolTip
+  const name = sketchFnExp?.callee?.name as TooTip
   if (!toolTips.includes(name)) return 'free'
 
   const firstArg = getFirstArg(sketchFnExp)

src/lang/std/std.test.ts

@@ -1,12 +1,12 @@
-import { parse, initPromise } from '../wasm'
+import { parser_wasm } from '../abstractSyntaxTree'
 import { enginelessExecutor } from '../../lib/testHelpers'
+import { initPromise } from '../rust'
 
 beforeAll(() => initPromise)
 
 describe('testing angledLineThatIntersects', () => {
   it('angledLineThatIntersects should intersect with another line', async () => {
-    const code = (offset: string) => `const part001 = startSketchOn('XY')
-  |> startProfileAt([0, 0], %)
+    const code = (offset: string) => `const part001 = startSketchAt([0, 0])
   |> lineTo({to:[2, 2], tag: "yo"}, %)
   |> lineTo([3, 1], %)
   |> angledLineThatIntersects({
@@ -17,9 +17,9 @@ describe('testing angledLineThatIntersects', () => {
 }, %)
 const intersect = segEndX('yo2', part001)
 show(part001)`
-    const { root } = await enginelessExecutor(parse(code('-1')))
+    const { root } = await enginelessExecutor(parser_wasm(code('-1')))
     expect(root.intersect.value).toBe(1 + Math.sqrt(2))
-    const { root: noOffset } = await enginelessExecutor(parse(code('0')))
+    const { root: noOffset } = await enginelessExecutor(parser_wasm(code('0')))
     expect(noOffset.intersect.value).toBeCloseTo(1)
   })
 })

src/lang/std/stdTypes.ts

@@ -1,12 +1,7 @@
-import {
-  ProgramMemory,
-  Path,
-  SourceRange,
-  Program,
-  Value,
-  PathToNode,
-} from '../wasm'
-import { ToolTip } from '../../useStore'
+import { ProgramMemory, Path, SourceRange } from '../executor'
+import { Program, Value } from '../abstractSyntaxTreeTypes'
+import { TooTip } from '../../useStore'
+import { PathToNode } from '../executor'
 import { EngineCommandManager } from './engineConnection'
 
 export interface InternalFirstArg {
@@ -50,7 +45,7 @@ export type TransformCallback = (
 }
 
 export type SketchCallTransfromMap = {
-  [key in ToolTip]: TransformCallback
+  [key in TooTip]: TransformCallback
 }
 
 export interface SketchLineHelper {

src/lang/tokeniser.test.ts

@@ -1,4 +1,5 @@
-import { lexer, initPromise } from './wasm'
+import { lexer, asyncLexer } from './tokeniser'
+import { initPromise } from './rust'
 
 beforeAll(() => initPromise)
 
@@ -9,9 +10,9 @@ describe('testing lexer', () => {
     const code3 = `const yo = 45 /* this is a comment
 const ya = 6 */
 const yi=45`
-    expect(lexer(code)).toEqual(lexer(code))
-    expect(lexer(code2)).toEqual(lexer(code2))
-    expect(lexer(code3)).toEqual(lexer(code3))
+    expect(await asyncLexer(code)).toEqual(lexer(code))
+    expect(await asyncLexer(code2)).toEqual(lexer(code2))
+    expect(await asyncLexer(code3)).toEqual(lexer(code3))
   })
   it('test lexer', () => {
     expect(stringSummaryLexer('1  + 2')).toEqual([

src/lang/tokeniser.ts

@@ -0,0 +1,28 @@
+import { lexer_js } from '../wasm-lib/pkg/wasm_lib'
+import { initPromise } from './rust'
+import { Token } from '../wasm-lib/kcl/bindings/Token'
+
+export type { Token } from '../wasm-lib/kcl/bindings/Token'
+
+export async function asyncLexer(str: string): Promise<Token[]> {
+  await initPromise
+  try {
+    const tokens: Token[] = lexer_js(str)
+    return tokens
+  } catch (e) {
+    // TODO: do something real with the error.
+    console.log('lexer', e)
+    throw e
+  }
+}
+
+export function lexer(str: string): Token[] {
+  try {
+    const tokens: Token[] = lexer_js(str)
+    return tokens
+  } catch (e) {
+    // TODO: do something real with the error.
+    console.log('lexer', e)
+    throw e
+  }
+}

src/lang/util.ts

@@ -1,5 +1,6 @@
 import { Selections, StoreState } from '../useStore'
-import { Program, PathToNode } from './wasm'
+import { Program } from './abstractSyntaxTreeTypes'
+import { PathToNode } from './executor'
 import { getNodeFromPath } from './queryAst'
 
 export function updateCursors(