Bump to v0.4.0 (#413 )

Add macOS universal release builds (#408 )
* Add macOS universal release builds Fixes #397 * Change macos to universal-apple-darwin * Upload universal-apple-darwin/release * Clean up * Clean up
2023-09-07 20:04:04 -04:00 · 2023-09-07 19:19:58 -04:00 · 2023-09-06 21:56:10 -07:00 · 2023-09-07 04:11:46 +00:00 · 2023-09-06 19:34:47 -07:00 · 2023-09-07 01:49:11 +00:00
132 changed files with 32727 additions and 20897 deletions
--- a/.env.development
+++ b/.env.development
@ -1,4 +1,7 @@
 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_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=5000
+VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS=0
+VITE_KC_SENTRY_DSN=
--- a/.env.production
+++ b/.env.production
@ -1,4 +1,7 @@
 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=15000
+VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS=30000
+VITE_KC_SENTRY_DSN=https://a814f2f66734989a90367f48feee28ca@o1042111.ingest.sentry.io/4505789425844224
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +1 @@
-src/wasm-lib/pkg/wasm_lib.js
+src/wasm-lib/*
--- a/.github/workflows/cargo-build.yml
+++ b/.github/workflows/cargo-build.yml
@ -43,7 +43,5 @@ jobs:
      - name: Run cargo build
        run: |
          cd "${{ matrix.dir }}"
-          cargo build --all --no-default-features --features noweb
-          cargo build --all --no-default-features --features web
          cargo build --all
        shell: bash
--- a/.github/workflows/cargo-test.yml
+++ b/.github/workflows/cargo-test.yml
@ -45,4 +45,7 @@ jobs:
        shell: bash
        run: |-
          cd "${{ matrix.dir }}"
-          cargo llvm-cov nextest --lcov --output-path lcov.info --test-threads=1 --no-fail-fast
+          cargo test --all
+        env:
+          KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
+
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -13,17 +13,31 @@ jobs:
  check-format:
    runs-on: 'ubuntu-20.04'
    steps:
-
      - uses: actions/checkout@v3
-
      - uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
-
+          cache: 'yarn'
      - run: yarn install
-
      - run: yarn fmt-check

+  check-types:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn install
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"
+
+      - run: yarn build:wasm
+      - run: yarn tsc
+

  build-test-web:
    runs-on: ubuntu-20.04
@ -36,12 +50,15 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
+          cache: 'yarn'

      - run: yarn install

-      - run: yarn build:wasm
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"

-      - run: yarn tsc
+      - run: yarn build:wasm

      - run: yarn simpleserver:ci

@ -49,14 +66,12 @@ jobs:

      - run: yarn test:cov

-      - run: yarn test:rust
-      
      - id: export_version
        run: echo "version=`cat package.json | jq -r '.version'`" >> "$GITHUB_OUTPUT"


  build-apps:
-    needs: [check-format, build-test-web]
+    needs: [check-format, build-test-web, check-types]
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
@ -87,6 +102,10 @@ jobs:
        with:
          workspaces: './src-tauri -> target'

+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: "./src/wasm-lib"
+
      - name: wasm prep
        shell: bash
        run: |
@ -110,15 +129,22 @@ jobs:
      - name: Fix format
        run: yarn fmt

+      - name: install apple silicon target mac
+        if: matrix.os == 'macos-latest'
+        run: |
+          rustup target add aarch64-apple-darwin
+
      - 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 }}
+        with:
+          args: ${{ matrix.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}

      - uses: actions/upload-artifact@v3
        with:
-          path: src-tauri/target/release/bundle/*/*
+          path: ${{ matrix.os == 'macos-latest' && 'src-tauri/target/universal-apple-darwin/release/bundle/*/*' || 'src-tauri/target/release/bundle/*/*' }}


  publish-apps-release:
@ -133,8 +159,7 @@ jobs:

      - name: Generate the update static endpoint
        run: |
-          ls -l artifact
-          ls -l artifact/*
+          ls -l artifact/*/*itty*
          DARWIN_SIG=`cat artifact/macos/*.app.tar.gz.sig`
          LINUX_SIG=`cat artifact/appimage/*.AppImage.tar.gz.sig`
          WINDOWS_SIG=`cat artifact/nsis/*.nsis.zip.sig`
@ -142,11 +167,11 @@ jobs:
          jq --null-input \
            --arg version "v${VERSION_NO_V}" \
            --arg darwin_sig "$DARWIN_SIG" \
-            --arg darwin_url "$RELEASE_DIR/macos/kittycad-modeling-app.app.tar.gz" \
+            --arg darwin_url "$RELEASE_DIR/macos/KittyCAD%20Modeling.app.tar.gz" \
            --arg linux_sig "$LINUX_SIG" \
-            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling-app_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
+            --arg linux_url "$RELEASE_DIR/appimage/kittycad-modeling_${VERSION_NO_V}_amd64.AppImage.tar.gz" \
            --arg windows_sig "$WINDOWS_SIG" \
-            --arg windows_url "$RELEASE_DIR/nsis/kittycad-modeling-app_${VERSION_NO_V}_x64-setup.nsis.zip" \
+            --arg windows_url "$RELEASE_DIR/nsis/KittyCAD%20Modeling_${VERSION_NO_V}_x64-setup.nsis.zip" \
            '{
              "version": $version,
              "platforms": {
@ -154,6 +179,10 @@ jobs:
                  "signature": $darwin_sig,
                  "url": $darwin_url
                },
+                "darwin-aarch64": {
+                  "signature": $darwin_sig,
+                  "url": $darwin_url
+                },
                "linux-x86_64": {
                  "signature": $linux_sig,
                  "url": $linux_url
@ -180,7 +209,7 @@ jobs:
        uses: google-github-actions/upload-cloud-storage@v1.0.3
        with:
          path: artifact
-          glob: '*/kittycad-modeling-app*'
+          glob: '*/*itty*'
          parent: false
          destination: dl.kittycad.io/releases/modeling-app/v${{ env.VERSION_NO_V }}

@ -189,3 +218,8 @@ jobs:
        with:
          path: last_update.json
          destination: dl.kittycad.io/releases/modeling-app
+
+      - name: Upload release files to Github
+        uses: softprops/action-gh-release@v1
+        with:
+          files: artifact/*/*itty*
--- a/.gitignore
+++ b/.gitignore
@ -25,5 +25,6 @@ yarn-error.log*
 # rust
 src/wasm-lib/target
 src/wasm-lib/bindings
+src/wasm-lib/kcl/bindings
 public/wasm_lib_bg.wasm
 src/wasm-lib/lcov.info
--- a/.prettierignore
+++ b/.prettierignore
@ -5,3 +5,5 @@ coverage
 # Ignore Rust projects:
 *.rs
 target
+src/wasm-lib/pkg
+src/wasm-lib/kcl/bindings
--- a/README.md
+++ b/README.md
@ -86,3 +86,24 @@ The PR may serve as a place to discuss the human-readable changelog and extra QA
 3. Create a new release and tag pointing to the bump version commit using semantic versioning `v{x}.{y}.{z}`

 4. A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, uploading artifacts to the release
+
+## Fuzzing the parser
+
+Make sure you install cargo fuzz:
+
+```bash
+$ cargo install cargo-fuzz
+```
+
+```bash
+$ cd src/wasm-lib/kcl
+
+# list the fuzz targets
+$ cargo fuzz list
+
+# run the parser fuzzer
+$ cargo +nightly fuzz run parser
+```
+
+For more information on fuzzing you can check out 
+[this guide](https://rust-fuzz.github.io/book/cargo-fuzz.html).
--- a/docs/kcl.json
+++ b/docs/kcl.json
--- a/docs/kcl.md
+++ b/docs/kcl.md
--- a/package.json
+++ b/package.json
@ -1,28 +1,35 @@
 {
  "name": "untitled-app",
-  "version": "0.1.0",
+  "version": "0.4.0",
  "private": true,
  "dependencies": {
+    "@codemirror/autocomplete": "^6.9.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.13",
-    "@kittycad/lib": "^0.0.34",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@kittycad/lib": "^0.0.36",
+    "@lezer/javascript": "^1.4.7",
+    "@open-rpc/client-js": "^1.8.1",
    "@react-hook/resize-observer": "^1.2.6",
+    "@sentry/react": "^7.65.0",
    "@tauri-apps/api": "^1.3.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
+    "@ts-stack/markdown": "^1.5.0",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
-    "@uiw/codemirror-extensions-langs": "^4.21.9",
-    "@uiw/react-codemirror": "^4.15.1",
+    "@uiw/react-codemirror": "^4.21.13",
    "@xstate/react": "^3.2.2",
    "crypto-js": "^4.1.1",
    "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.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@ -40,6 +47,8 @@
    "typescript": "^4.4.2",
    "uuid": "^9.0.0",
    "vitest": "^0.34.1",
+    "vscode-jsonrpc": "^8.1.0",
+    "vscode-languageserver-protocol": "^3.17.3",
    "wasm-pack": "^0.12.1",
    "web-vitals": "^2.1.0",
    "ws": "^8.13.0",
@ -54,15 +63,15 @@
    "build:both:local": "yarn build:wasm && vite build",
    "test": "vitest --mode development",
    "test:nowatch": "vitest run --mode development",
-    "test:rust": "(cd src/wasm-lib && cargo test && cargo clippy)",
+    "test:rust": "(cd src/wasm-lib && cargo test --all && cargo clippy --all --tests)",
    "test:cov": "vitest run --coverage --mode development",
    "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": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg --no-default-features --features web && cargo test --all) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
+    "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//g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url//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/bindings",
+    "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg && rm -rf src/wasm-lib/kcl/bindings",
    "lint": "eslint --fix src",
    "bump-jsons": "echo \"$(jq --arg v \"$VERSION\" '.version=$v' package.json --indent 2)\" > package.json && echo \"$(jq --arg v \"$VERSION\" '.package.version=$v' src-tauri/tauri.conf.json --indent 2)\" > src-tauri/tauri.conf.json"
  },
@ -89,6 +98,7 @@
    "@babel/preset-env": "^7.22.9",
    "@tauri-apps/cli": "^1.3.1",
    "@types/crypto-js": "^4.1.1",
+    "@types/debounce": "^1.2.1",
    "@types/isomorphic-fetch": "^0.0.36",
    "@types/react-modal": "^3.16.0",
    "@types/uuid": "^9.0.1",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -648,6 +648,12 @@ dependencies = [
 "cfg-if",
 ]

+[[package]]
+name = "equivalent"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5"
+
 [[package]]
 name = "errno"
 version = "0.3.1"
@ -1150,7 +1156,7 @@ dependencies = [
 "futures-sink",
 "futures-util",
 "http",
- "indexmap",
+ "indexmap 1.9.3",
 "slab",
 "tokio",
 "tokio-util",
@ -1163,6 +1169,12 @@ version = "0.12.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"

+[[package]]
+name = "hashbrown"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c6201b9ff9fd90a5a3bac2e56a830d0caa509576f0e503818ee82c181b3437a"
+
 [[package]]
 name = "heck"
 version = "0.3.3"
@ -1378,7 +1390,18 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
 dependencies = [
 "autocfg",
- "hashbrown",
+ "hashbrown 0.12.3",
+ "serde",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5477fe2230a79769d8dc68e0eabf5437907c0457a5614a9e8dddb67f65eb65d"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.14.0",
 "serde",
 ]

@ -1628,6 +1651,12 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"

+[[package]]
+name = "minisign-verify"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "933dca44d65cdd53b355d0b73d380a2ff5da71f87f036053188bf1eab6a19881"
+
 [[package]]
 name = "miniz_oxide"
 version = "0.6.2"
@ -2122,7 +2151,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9bd9647b268a3d3e14ff09c23201133a62589c658db02bb7388c7246aafe0590"
 dependencies = [
 "base64 0.21.2",
- "indexmap",
+ "indexmap 1.9.3",
 "line-wrap",
 "quick-xml",
 "serde",
@ -2695,14 +2724,15 @@ dependencies = [

 [[package]]
 name = "serde_with"
-version = "2.3.3"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "07ff71d2c147a7b57362cead5e22f772cd52f6ab31cfcd9edcd7f6aeb2a0afbe"
+checksum = "1402f54f9a3b9e2efe71c1cea24e648acce55887983553eeb858cf3115acfd49"
 dependencies = [
- "base64 0.13.1",
+ "base64 0.21.2",
 "chrono",
 "hex",
- "indexmap",
+ "indexmap 1.9.3",
+ "indexmap 2.0.0",
 "serde",
 "serde_json",
 "serde_with_macros",
@ -2711,9 +2741,9 @@ dependencies = [

 [[package]]
 name = "serde_with_macros"
-version = "2.3.3"
+version = "3.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "881b6f881b17d13214e5d494c939ebab463d01264ce1811e9d4ac3a882e7695f"
+checksum = "9197f1ad0e3c173a0222d3c4404fb04c3afe87e962bcb327af73e8301fa203c7"
 dependencies = [
 "darling",
 "proc-macro2",
@ -3022,6 +3052,7 @@ checksum = "d42ba3a2e8556722f31336a0750c10dbb6a81396a1c452977f515da83f69f842"
 dependencies = [
 "anyhow",
 "attohttpc",
+ "base64 0.21.2",
 "cocoa",
 "dirs-next",
 "embed_plist",
@ -3034,6 +3065,7 @@ dependencies = [
 "heck 0.4.1",
 "http",
 "ignore",
+ "minisign-verify",
 "objc",
 "once_cell",
 "open",
@ -3055,19 +3087,21 @@ dependencies = [
 "tauri-utils",
 "tempfile",
 "thiserror",
+ "time",
 "tokio",
 "url",
 "uuid",
 "webkit2gtk",
 "webview2-com",
 "windows 0.39.0",
+ "zip",
 ]

 [[package]]
 name = "tauri-build"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "929b3bd1248afc07b63e33a6a53c3f82c32d0b0a5e216e4530e94c467e019389"
+checksum = "7d2edd6a259b5591c8efdeb9d5702cb53515b82a6affebd55c7fd6d3a27b7d1b"
 dependencies = [
 "anyhow",
 "cargo_toml",
@ -3078,7 +3112,6 @@ dependencies = [
 "serde_json",
 "tauri-utils",
 "tauri-winres",
- "winnow",
 ]

 [[package]]
@ -3176,12 +3209,13 @@ dependencies = [

 [[package]]
 name = "tauri-utils"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a6f9c2dafef5cbcf52926af57ce9561bd33bb41d7394f8bb849c0330260d864"
+checksum = "03fc02bb6072bb397e1d473c6f76c953cda48b4a2d0cce605df284aa74a12e84"
 dependencies = [
 "brotli",
 "ctor",
+ "dunce",
 "glob",
 "heck 0.4.1",
 "html5ever",
@ -3397,7 +3431,7 @@ version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "56c59d8dd7d0dcbc6428bf7aa2f0e823e26e43b3c9aca15bbc9475d23e5fa12b"
 dependencies = [
- "indexmap",
+ "indexmap 1.9.3",
 "nom8",
 "serde",
 "serde_spanned",
@ -3410,7 +3444,7 @@ version = "0.19.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "239410c8609e8125456927e6707163a3b1fdb40561e4b803bc041f466ccfdc13"
 dependencies = [
- "indexmap",
+ "indexmap 1.9.3",
 "serde",
 "serde_spanned",
 "toml_datetime 0.6.2",
@ -4228,3 +4262,14 @@ checksum = "6d1526bbe5aaeb5eb06885f4d987bcdfa5e23187055de9b83fe00156a821fabc"
 dependencies = [
 "libc",
 ]
+
+[[package]]
+name = "zip"
+version = "0.6.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "760394e246e4c28189f19d488c058bf16f564016aefac5d32bb1f3b51d5e9261"
+dependencies = [
+ "byteorder",
+ "crc32fast",
+ "crossbeam-utils",
+]
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -12,14 +12,14 @@ 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.3.0", features = [] }
+tauri-build = { version = "1.4.0", features = [] }

 [dependencies]
 anyhow = "1"
 oauth2 = "4.4.1"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-tauri = { version = "1.3.0", features = [ "path-all", "dialog-all", "fs-all", "http-request", "shell-open", "shell-open-api"] }
+tauri = { version = "1.3.0", features = [ "updater", "path-all", "dialog-all", "fs-all", "http-request", "shell-open", "shell-open-api"] }
 tokio = { version = "1.29.1", features = ["time"] }
 toml = "0.6.0"
 tauri-plugin-fs-extra = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -7,8 +7,8 @@
    "distDir": "../build"
  },
  "package": {
-    "productName": "kittycad-modeling-app",
-    "version": "0.1.0"
+    "productName": "kittycad-modeling",
+    "version": "0.4.0"
  },
  "tauri": {
    "allowlist": {
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@ -0,0 +1,7 @@
+
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "package": {
+    "productName": "KittyCAD Modeling"
+  }
+}
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@ -0,0 +1,7 @@
+
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "package": {
+    "productName": "KittyCAD Modeling"
+  }
+}
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@ -2,7 +2,8 @@ import { render, screen } from '@testing-library/react'
 import { App } from './App'
 import { describe, test, vi } from 'vitest'
 import { BrowserRouter } from 'react-router-dom'
-import { GlobalStateProvider } from './hooks/useAuthMachine'
+import { GlobalStateProvider } from './components/GlobalStateProvider'
+import CommandBarProvider from 'components/CommandBar'

 let listener: ((rect: any) => void) | undefined = undefined
 ;(global as any).ResizeObserver = class ResizeObserver {
@ -43,7 +44,9 @@ function TestWrap({ children }: { children: React.ReactNode }) {
  // wrap in router and xState context
  return (
    <BrowserRouter>
-      <GlobalStateProvider>{children}</GlobalStateProvider>
+      <CommandBarProvider>
+        <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
    </BrowserRouter>
  )
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -10,21 +10,23 @@ import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
 import { asyncParser } from './lang/abstractSyntaxTree'
 import { _executor } from './lang/executor'
-import CodeMirror from '@uiw/react-codemirror'
-import { langs } from '@uiw/codemirror-extensions-langs'
+import CodeMirror, { Extension } from '@uiw/react-codemirror'
 import { linter, lintGutter } from '@codemirror/lint'
-import { ViewUpdate } from '@codemirror/view'
+import { ViewUpdate, EditorView } from '@codemirror/view'
 import {
  lineHighlightField,
  addLineHighlight,
 } from './editor/highlightextension'
-import { PaneType, Selections, Themes, useStore } from './useStore'
+import { PaneType, Selections, useStore } from './useStore'
+import Server from './editor/lsp/server'
+import Client from './editor/lsp/client'
 import { Logs, KCLErrors } from './components/Logs'
 import { CollapsiblePanel } from './components/CollapsiblePanel'
 import { MemoryPanel } from './components/MemoryPanel'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
+import { FromServer, IntoServer } from './editor/lsp/codec'
 import {
  EngineCommand,
  EngineCommandManager,
@ -41,14 +43,18 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook'
 import { TEST } from './env'
 import { getNormalisedCoordinates } from './lib/utils'
-import { getSystemTheme } from './lib/getSystemTheme'
+import { Themes, getSystemTheme } from './lib/theme'
 import { isTauri } from './lib/isTauri'
 import { useLoaderData, useParams } from 'react-router-dom'
 import { writeTextFile } from '@tauri-apps/api/fs'
 import { PROJECT_ENTRYPOINT } from './lib/tauriFS'
 import { IndexLoaderData } from './Router'
 import { toast } from 'react-hot-toast'
-import { useAuthMachine } from './hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { onboardingPaths } from 'routes/Onboarding'
+import { LanguageServerClient } from 'editor/lsp'
+import kclLanguage from 'editor/lsp/language'
+import { CSSRuleObject } from 'tailwindcss/types/config'

 export function App() {
  const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
@ -73,23 +79,20 @@ export function App() {
    setArtifactMap,
    engineCommandManager,
    setEngineCommandManager,
+    highlightRange,
    setHighlightRange,
    setCursor2,
    sourceRangeMap,
    setMediaStream,
    setIsStreamReady,
    isStreamReady,
+    isLSPServerReady,
+    setIsLSPServerReady,
    isMouseDownInStream,
-    cmdId,
-    setCmdId,
    formatCode,
-    debugPanel,
-    theme,
    openPanes,
    setOpenPanes,
-    onboardingStatus,
    didDragInStream,
-    setDidDragInStream,
    setStreamDimensions,
    streamDimensions,
  } = useStore((s) => ({
@ -110,6 +113,7 @@ export function App() {
    setArtifactMap: s.setArtifactNSourceRangeMaps,
    engineCommandManager: s.engineCommandManager,
    setEngineCommandManager: s.setEngineCommandManager,
+    highlightRange: s.highlightRange,
    setHighlightRange: s.setHighlightRange,
    isShiftDown: s.isShiftDown,
    setCursor: s.setCursor,
@ -118,22 +122,26 @@ export function App() {
    setMediaStream: s.setMediaStream,
    isStreamReady: s.isStreamReady,
    setIsStreamReady: s.setIsStreamReady,
+    isLSPServerReady: s.isLSPServerReady,
+    setIsLSPServerReady: s.setIsLSPServerReady,
    isMouseDownInStream: s.isMouseDownInStream,
-    cmdId: s.cmdId,
-    setCmdId: s.setCmdId,
    formatCode: s.formatCode,
-    debugPanel: s.debugPanel,
    addKCLError: s.addKCLError,
-    theme: s.theme,
    openPanes: s.openPanes,
    setOpenPanes: s.setOpenPanes,
-    onboardingStatus: s.onboardingStatus,
    didDragInStream: s.didDragInStream,
-    setDidDragInStream: s.setDidDragInStream,
    setStreamDimensions: s.setStreamDimensions,
    streamDimensions: s.streamDimensions,
  }))
-  const [token] = useAuthMachine((s) => s?.context?.token)
+
+  const {
+    auth: {
+      context: { token },
+    },
+    settings: {
+      context: { showDebugPanel, theme, onboardingStatus, textWrapping },
+    },
+  } = useGlobalStateContext()

  const editorTheme = theme === Themes.System ? getSystemTheme() : theme

@ -152,7 +160,7 @@ export function App() {
  useHotkeys('shift + d', () => togglePane('debug'))

  const paneOpacity =
-    onboardingStatus === 'camera'
+    onboardingStatus === onboardingPaths.CAMERA
      ? 'opacity-20'
      : didDragInStream
      ? 'opacity-40'
@ -246,13 +254,12 @@ export function App() {
      codeBasedSelections,
    })
  }
-  const pixelDensity = window.devicePixelRatio
  const streamWidth = streamRef?.current?.offsetWidth
  const streamHeight = streamRef?.current?.offsetHeight

-  const width = streamWidth ? streamWidth * pixelDensity : 0
+  const width = streamWidth ? streamWidth : 0
  const quadWidth = Math.round(width / 4) * 4
-  const height = streamHeight ? streamHeight * pixelDensity : 0
+  const height = streamHeight ? streamHeight : 0
  const quadHeight = Math.round(height / 4) * 4

  useLayoutEffect(() => {
@ -276,6 +283,8 @@ export function App() {

  useEffect(() => {
    if (!isStreamReady) return
+    if (!engineCommandManager) return
+    let unsubFn: any[] = []
    const asyncWrap = async () => {
      try {
        if (!code) {
@ -286,11 +295,8 @@ export function App() {
        setAst(_ast)
        resetLogs()
        resetKCLErrors()
-        if (engineCommandManager) {
-          engineCommandManager.endSession()
-          engineCommandManager.startNewSession()
-        }
-        if (!engineCommandManager) return
+        engineCommandManager.endSession()
+        engineCommandManager.startNewSession()
        const programMemory = await _executor(
          _ast,
          {
@ -324,22 +330,32 @@ export function App() {
          await engineCommandManager.waitForAllCommands()

        setArtifactMap({ artifactMap, sourceRangeMap })
-        engineCommandManager.onHover((id) => {
-          if (!id) {
-            setHighlightRange([0, 0])
-          } else {
-            const sourceRange = sourceRangeMap[id]
-            setHighlightRange(sourceRange)
-          }
+        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])
+            }
+          },
        })
-        engineCommandManager.onClick((selections) => {
-          if (!selections) {
-            setCursor2()
-            return
-          }
-          const { id, type } = selections
-          setCursor2({ range: sourceRangeMap[id], type })
+        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)
        if (programMemory !== undefined) {
          setProgramMemory(programMemory)
        }
@ -356,7 +372,10 @@ export function App() {
      }
    }
    asyncWrap()
-  }, [code, isStreamReady])
+    return () => {
+      unsubFn.forEach((fn) => fn())
+    }
+  }, [code, isStreamReady, engineCommandManager])

  const debounceSocketSend = throttle<EngineCommand>((message) => {
    engineCommandManager?.sendSceneCommand(message)
@ -370,9 +389,6 @@ export function App() {
    nativeEvent,
  }) => {
    nativeEvent.preventDefault()
-    if (isMouseDownInStream) {
-      setDidDragInStream(true)
-    }

    const { x, y } = getNormalisedCoordinates({
      clientX,
@ -384,9 +400,8 @@ export function App() {
    const interaction = ctrlKey ? 'zoom' : shiftKey ? 'pan' : 'rotate'

    const newCmdId = uuidv4()
-    setCmdId(newCmdId)

-    if (cmdId && isMouseDownInStream) {
+    if (isMouseDownInStream) {
      debounceSocketSend({
        type: 'modeling_cmd_req',
        cmd: {
@ -408,15 +423,63 @@ export function App() {
    }
  }

-  const extraExtensions = useMemo(() => {
-    if (TEST) return []
-    return [
-      lintGutter(),
-      linter((_view) => {
-        return kclErrToDiagnostic(useStore.getState().kclErrors)
-      }),
-    ]
-  }, [])
+  // So this is a bit weird, we need to initialize the lsp server and client.
+  // But the server happens async so we break this into two parts.
+  // Below is the client and server promise.
+  const { lspClient } = useMemo(() => {
+    const intoServer: IntoServer = new IntoServer()
+    const fromServer: FromServer = FromServer.create()
+    const client = new Client(fromServer, intoServer)
+    if (!TEST) {
+      Server.initialize(intoServer, fromServer).then((lspServer) => {
+        lspServer.start()
+        setIsLSPServerReady(true)
+      })
+    }
+
+    const lspClient = new LanguageServerClient({ client })
+    return { lspClient }
+  }, [setIsLSPServerReady])
+
+  // Here we initialize the plugin which will start the client.
+  // When we have multi-file support the name of the file will be a dep of
+  // this use memo, as well as the directory structure, which I think is
+  // a good setup becuase it will restart the client but not the server :)
+  // We do not want to restart the server, its just wasteful.
+  const kclLSP = useMemo(() => {
+    let plugin = null
+    if (isLSPServerReady && !TEST) {
+      // Set up the lsp plugin.
+      const lsp = kclLanguage({
+        // When we have more than one file, we'll need to change this.
+        documentUri: `file:///we-just-have-one-file-for-now.kcl`,
+        workspaceFolders: null,
+        client: lspClient,
+      })
+
+      plugin = lsp
+    }
+    return plugin
+  }, [lspClient, isLSPServerReady])
+
+  const editorExtensions = useMemo(() => {
+    const extensions = [lineHighlightField] as Extension[]
+
+    if (kclLSP) extensions.push(kclLSP)
+
+    // These extensions have proven to mess with vitest
+    if (!TEST) {
+      extensions.push(
+        lintGutter(),
+        linter((_view) => {
+          return kclErrToDiagnostic(useStore.getState().kclErrors)
+        })
+      )
+      if (textWrapping === 'On') extensions.push(EditorView.lineWrapping)
+    }
+
+    return extensions
+  }, [kclLSP, textWrapping])

  return (
    <div
@ -471,15 +534,15 @@ export function App() {
                format
              </button>
            </div>
-            <div id="code-mirror-override">
+            <div
+              id="code-mirror-override"
+              className="full-height-subtract"
+              style={{ '--height-subtract': '4.25rem' } as CSSRuleObject}
+            >
              <CodeMirror
                className="h-full"
                value={code}
-                extensions={[
-                  langs.javascript({ jsx: true }),
-                  lineHighlightField,
-                  ...extraExtensions,
-                ]}
+                extensions={editorExtensions}
                onChange={onChange}
                onUpdate={onUpdate}
                theme={editorTheme}
@ -510,7 +573,7 @@ export function App() {
        </div>
      </Resizable>
      <Stream className="absolute inset-0 z-0" />
-      {debugPanel && (
+      {showDebugPanel && (
        <DebugPanel
          title="Debug"
          className={
--- a/src/Auth.tsx
+++ b/src/Auth.tsx
@ -1,9 +1,12 @@
 import Loading from './components/Loading'
-import { useAuthMachine } from './hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'

 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {
-  const [isLoggedIn] = useAuthMachine((s) => s.matches('checkIfLoggedIn'))
+  const {
+    auth: { state },
+  } = useGlobalStateContext()
+  const isLoggedIn = state.matches('checkIfLoggedIn')

  return isLoggedIn ? (
    <Loading>Loading KittyCAD Modeling App...</Loading>
--- a/src/Router.tsx
+++ b/src/Router.tsx
@ -3,8 +3,15 @@ import {
  createBrowserRouter,
  Outlet,
  redirect,
+  useLocation,
  RouterProvider,
 } from 'react-router-dom'
+import {
+  matchRoutes,
+  createRoutesFromChildren,
+  useNavigationType,
+} from 'react-router'
+import { useEffect } from 'react'
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
 import Onboarding, {
@ -24,7 +31,47 @@ import {
 } from './lib/tauriFS'
 import { metadata, type Metadata } from 'tauri-plugin-fs-extra-api'
 import DownloadAppBanner from './components/DownloadAppBanner'
-import { GlobalStateProvider } from './hooks/useAuthMachine'
+import { GlobalStateProvider } from './components/GlobalStateProvider'
+import {
+  SETTINGS_PERSIST_KEY,
+  settingsMachine,
+} from './machines/settingsMachine'
+import { ContextFrom } from 'xstate'
+import CommandBarProvider from 'components/CommandBar'
+import { TEST, VITE_KC_SENTRY_DSN } from './env'
+import * as Sentry from '@sentry/react'
+
+if (VITE_KC_SENTRY_DSN && !TEST) {
+  Sentry.init({
+    dsn: VITE_KC_SENTRY_DSN,
+    // TODO(paultag): pass in the right env here.
+    // environment: "production",
+    integrations: [
+      new Sentry.BrowserTracing({
+        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+          useEffect,
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes
+        ),
+      }),
+      new Sentry.Replay(),
+    ],
+
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    tracesSampleRate: 1.0,
+
+    // TODO: Add in kittycad.io endpoints
+    tracePropagationTargets: ['localhost'],
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  })
+}

 const prependRoutes =
  (routesObject: Record<string, string>) => (prepend: string) => {
@ -68,7 +115,11 @@ const addGlobalContextToElements = (
    'element' in route
      ? {
          ...route,
-          element: <GlobalStateProvider>{route.element}</GlobalStateProvider>,
+          element: (
+            <CommandBarProvider>
+              <GlobalStateProvider>{route.element}</GlobalStateProvider>
+            </CommandBarProvider>
+          ),
        }
      : route
  )
@ -95,26 +146,25 @@ const router = createBrowserRouter(
        request,
        params,
      }): Promise<IndexLoaderData | Response> => {
-        const store = localStorage.getItem('store')
-        if (store === null) {
-          return redirect(paths.ONBOARDING.INDEX)
-        } else {
-          const status = JSON.parse(store).state.onboardingStatus || ''
-          const notEnRouteToOnboarding =
-            !request.url.includes(paths.ONBOARDING.INDEX) &&
-            request.method === 'GET'
-          // '' is the initial state, 'done' and 'dismissed' are the final states
-          const hasValidOnboardingStatus =
-            (status !== undefined && status.length === 0) ||
-            !(status === 'done' || status === 'dismissed')
-          const shouldRedirectToOnboarding =
-            notEnRouteToOnboarding && hasValidOnboardingStatus
+        const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
+        const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<
+          ContextFrom<typeof settingsMachine>
+        >

-          if (shouldRedirectToOnboarding) {
-            return redirect(
-              makeUrlPathRelative(paths.ONBOARDING.INDEX) + status
-            )
-          }
+        const status = persistedSettings.onboardingStatus || ''
+        const notEnRouteToOnboarding = !request.url.includes(
+          paths.ONBOARDING.INDEX
+        )
+        // '' is the initial state, 'done' and 'dismissed' are the final states
+        const hasValidOnboardingStatus =
+          status.length === 0 || !(status === 'done' || status === 'dismissed')
+        const shouldRedirectToOnboarding =
+          notEnRouteToOnboarding && hasValidOnboardingStatus
+
+        if (shouldRedirectToOnboarding) {
+          return redirect(
+            makeUrlPathRelative(paths.ONBOARDING.INDEX) + status.slice(1)
+          )
        }

        if (params.id && params.id !== 'new') {
@ -164,9 +214,23 @@ const router = createBrowserRouter(
        if (!isTauri()) {
          return redirect(paths.FILE + '/new')
        }
-
-        const projectDir = await initializeProjectDirectory()
-        const projectsNoMeta = (await readDir(projectDir.dir)).filter(
+        const fetchedStorage = localStorage?.getItem(SETTINGS_PERSIST_KEY)
+        const persistedSettings = JSON.parse(fetchedStorage || '{}') as Partial<
+          ContextFrom<typeof settingsMachine>
+        >
+        const projectDir = await initializeProjectDirectory(
+          persistedSettings.defaultDirectory || ''
+        )
+        if (projectDir !== persistedSettings.defaultDirectory) {
+          localStorage.setItem(
+            SETTINGS_PERSIST_KEY,
+            JSON.stringify({
+              ...persistedSettings,
+              defaultDirectory: projectDir,
+            })
+          )
+        }
+        const projectsNoMeta = (await readDir(projectDir)).filter(
          isProjectDirectory
        )
        const projects = await Promise.all(
--- a/src/Toolbar.module.css
+++ b/src/Toolbar.module.css
@ -0,0 +1,60 @@
+.toolbarWrapper {
+  @apply relative;
+}
+
+.toolbar {
+  @apply flex gap-4 items-center rounded-full;
+  @apply border border-cool-20/30 bg-cool-10/50;
+}
+
+:global(.dark) .toolbar {
+  @apply border-cool-100/50 bg-cool-120/50;
+}
+
+:global(.sketch) .toolbar {
+  @apply border-fern-20/20 bg-fern-10/20;
+}
+
+:global(.dark .sketch) .toolbar {
+  @apply border-fern-120/50 bg-fern-100/30;
+}
+
+.toolbarCap {
+  @apply text-sm font-bold;
+  @apply bg-cool-20/50 text-cool-100;
+}
+
+:global(.dark) .toolbarCap {
+  @apply bg-cool-90/50 text-cool-30;
+}
+
+:global(.sketch) .toolbarCap {
+  @apply bg-fern-20/50 text-fern-100;
+}
+
+:global(.dark .sketch) .toolbarCap {
+  @apply bg-fern-90/50 text-fern-30;
+}
+
+.label {
+  @apply self-stretch flex items-center px-4 py-1;
+  @apply rounded-l-full;
+}
+
+.popoverToggle {
+  @apply self-stretch m-0 flex items-center px-4 py-1;
+  @apply rounded-r-full border-none;
+  @apply hover:bg-cool-20;
+}
+
+:global(.dark) .popoverToggle {
+  @apply hover:bg-cool-90;
+}
+
+:global(.sketch) .popoverToggle {
+  @apply hover:bg-fern-20;
+}
+
+:global(.dark .sketch) .popoverToggle {
+  @apply hover:bg-fern-90;
+}
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@ -11,6 +11,11 @@ import { SetAngleLength } from './components/Toolbar/setAngleLength'
 import { ConvertToVariable } from './components/Toolbar/ConvertVariable'
 import { SetAbsDistance } from './components/Toolbar/SetAbsDistance'
 import { SetAngleBetween } from './components/Toolbar/SetAngleBetween'
+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'

 export const Toolbar = () => {
  const {
@ -29,72 +34,26 @@ export const Toolbar = () => {
    programMemory: s.programMemory,
  }))

-  return (
-    <div>
-      {guiMode.mode === 'default' && (
-        <button
-          onClick={() => {
-            setGuiMode({
-              mode: 'sketch',
-              sketchMode: 'selectFace',
-            })
-          }}
-        >
-          Start Sketch
-        </button>
-      )}
-      {guiMode.mode === 'canEditExtrude' && (
-        <button
-          onClick={() => {
-            if (!ast) return
-            const pathToNode = getNodePathFromSourceRange(
-              ast,
-              selectionRanges.codeBasedSelections[0].range
-            )
-            const { modifiedAst } = sketchOnExtrudedFace(
-              ast,
-              pathToNode,
-              programMemory
-            )
-            updateAst(modifiedAst)
-          }}
-        >
-          SketchOnFace
-        </button>
-      )}
-      {(guiMode.mode === 'canEditSketch' || false) && (
-        <button
-          onClick={() => {
-            setGuiMode({
-              mode: 'sketch',
-              sketchMode: 'sketchEdit',
-              pathToNode: guiMode.pathToNode,
-              rotation: guiMode.rotation,
-              position: guiMode.position,
-            })
-          }}
-        >
-          Edit Sketch
-        </button>
-      )}
-      {guiMode.mode === 'canEditSketch' && (
-        <>
+  useEffect(() => {
+    console.log('guiMode', guiMode)
+  }, [guiMode])
+
+  function ToolbarButtons() {
+    return (
+      <>
+        {guiMode.mode === 'default' && (
          <button
            onClick={() => {
-              if (!ast) return
-              const pathToNode = getNodePathFromSourceRange(
-                ast,
-                selectionRanges.codeBasedSelections[0].range
-              )
-              const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
-                ast,
-                pathToNode
-              )
-              updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+              setGuiMode({
+                mode: 'sketch',
+                sketchMode: 'selectFace',
+              })
            }}
          >
-            ExtrudeSketch
+            Start Sketch
          </button>
+        )}
+        {guiMode.mode === 'canEditExtrude' && (
          <button
            onClick={() => {
              if (!ast) return
@ -102,77 +61,182 @@ export const Toolbar = () => {
                ast,
                selectionRanges.codeBasedSelections[0].range
              )
-              const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
+              const { modifiedAst } = sketchOnExtrudedFace(
                ast,
                pathToNode,
-                false
+                programMemory
              )
-              updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+              updateAst(modifiedAst)
            }}
          >
-            ExtrudeSketch (w/o pipe)
+            SketchOnFace
          </button>
-        </>
-      )}
-
-      {guiMode.mode === 'sketch' && (
-        <button onClick={() => setGuiMode({ mode: 'default' })}>
-          Exit sketch
-        </button>
-      )}
-      {toolTips
-        .filter(
-          // (sketchFnName) => !['angledLineThatIntersects'].includes(sketchFnName)
-          (sketchFnName) => ['line'].includes(sketchFnName)
-        )
-        .map((sketchFnName) => {
-          if (
-            guiMode.mode !== 'sketch' ||
-            !('isTooltip' in guiMode || guiMode.sketchMode === 'sketchEdit')
-          )
-            return null
-          return (
+        )}
+        {(guiMode.mode === 'canEditSketch' || false) && (
+          <button
+            onClick={() => {
+              setGuiMode({
+                mode: 'sketch',
+                sketchMode: 'sketchEdit',
+                pathToNode: guiMode.pathToNode,
+                rotation: guiMode.rotation,
+                position: guiMode.position,
+              })
+            }}
+          >
+            Edit Sketch
+          </button>
+        )}
+        {guiMode.mode === 'canEditSketch' && (
+          <>
            <button
-              key={sketchFnName}
-              onClick={() =>
-                setGuiMode({
-                  ...guiMode,
-                  ...(guiMode.sketchMode === sketchFnName
-                    ? {
-                        sketchMode: 'sketchEdit',
-                        // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
-                      }
-                    : {
-                        sketchMode: sketchFnName,
-                        isTooltip: true,
-                      }),
-                })
-              }
+              onClick={() => {
+                if (!ast) return
+                const pathToNode = getNodePathFromSourceRange(
+                  ast,
+                  selectionRanges.codeBasedSelections[0].range
+                )
+                const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
+                  ast,
+                  pathToNode
+                )
+                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+              }}
            >
-              {sketchFnName}
-              {guiMode.sketchMode === sketchFnName && '✅'}
+              ExtrudeSketch
            </button>
+            <button
+              onClick={() => {
+                if (!ast) return
+                const pathToNode = getNodePathFromSourceRange(
+                  ast,
+                  selectionRanges.codeBasedSelections[0].range
+                )
+                const { modifiedAst, pathToExtrudeArg } = extrudeSketch(
+                  ast,
+                  pathToNode,
+                  false
+                )
+                updateAst(modifiedAst, { focusPath: pathToExtrudeArg })
+              }}
+            >
+              ExtrudeSketch (w/o pipe)
+            </button>
+          </>
+        )}
+
+        {guiMode.mode === 'sketch' && (
+          <button onClick={() => setGuiMode({ mode: 'default' })}>
+            Exit sketch
+          </button>
+        )}
+        {toolTips
+          .filter(
+            // (sketchFnName) => !['angledLineThatIntersects'].includes(sketchFnName)
+            (sketchFnName) => ['line'].includes(sketchFnName)
          )
-        })}
-      <br></br>
-      <ConvertToVariable />
-      <HorzVert horOrVert="horizontal" />
-      <HorzVert horOrVert="vertical" />
-      <EqualLength />
-      <EqualAngle />
-      <SetHorzVertDistance buttonType="alignEndsVertically" />
-      <SetHorzVertDistance buttonType="setHorzDistance" />
-      <SetAbsDistance buttonType="snapToYAxis" />
-      <SetAbsDistance buttonType="xAbs" />
-      <SetHorzVertDistance buttonType="alignEndsHorizontally" />
-      <SetAbsDistance buttonType="snapToXAxis" />
-      <SetHorzVertDistance buttonType="setVertDistance" />
-      <SetAbsDistance buttonType="yAbs" />
-      <SetAngleLength angleOrLength="setAngle" />
-      <SetAngleLength angleOrLength="setLength" />
-      <Intersect />
-      <RemoveConstrainingValues />
-      <SetAngleBetween />
-    </div>
+          .map((sketchFnName) => {
+            if (
+              guiMode.mode !== 'sketch' ||
+              !('isTooltip' in guiMode || guiMode.sketchMode === 'sketchEdit')
+            )
+              return null
+            return (
+              <button
+                key={sketchFnName}
+                onClick={() =>
+                  setGuiMode({
+                    ...guiMode,
+                    ...(guiMode.sketchMode === sketchFnName
+                      ? {
+                          sketchMode: 'sketchEdit',
+                          // todo: ...guiMod is adding isTooltip: true, will probably just fix with xstate migtaion
+                        }
+                      : {
+                          sketchMode: sketchFnName,
+                          isTooltip: true,
+                        }),
+                  })
+                }
+              >
+                {sketchFnName}
+                {guiMode.sketchMode === sketchFnName && '✅'}
+              </button>
+            )
+          })}
+        <ConvertToVariable />
+        <HorzVert horOrVert="horizontal" />
+        <HorzVert horOrVert="vertical" />
+        <EqualLength />
+        <EqualAngle />
+        <SetHorzVertDistance buttonType="alignEndsVertically" />
+        <SetHorzVertDistance buttonType="setHorzDistance" />
+        <SetAbsDistance buttonType="snapToYAxis" />
+        <SetAbsDistance buttonType="xAbs" />
+        <SetHorzVertDistance buttonType="alignEndsHorizontally" />
+        <SetAbsDistance buttonType="snapToXAxis" />
+        <SetHorzVertDistance buttonType="setVertDistance" />
+        <SetAbsDistance buttonType="yAbs" />
+        <SetAngleLength angleOrLength="setAngle" />
+        <SetAngleLength angleOrLength="setLength" />
+        <Intersect />
+        <RemoveConstrainingValues />
+        <SetAngleBetween />
+      </>
+    )
+  }
+
+  return (
+    <Popover className={styles.toolbarWrapper + ' ' + guiMode.mode}>
+      <div className={styles.toolbar}>
+        <span className={styles.toolbarCap + ' ' + styles.label}>
+          {guiMode.mode === 'sketch' ? '2D' : '3D'}
+        </span>
+        <menu className="flex flex-1 gap-2 py-0.5 overflow-hidden whitespace-nowrap">
+          <ToolbarButtons />
+        </menu>
+        <Popover.Button
+          className={styles.toolbarCap + ' ' + styles.popoverToggle}
+        >
+          <FontAwesomeIcon icon={faSearch} />
+        </Popover.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <Popover.Overlay className="fixed inset-0 bg-chalkboard-110/20 dark:bg-chalkboard-110/50" />
+      </Transition>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="opacity-0 translate-y-1 scale-95"
+        enterTo="opacity-100 translate-y-0 scale-100"
+        leave="transition ease-out duration-75"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-2"
+      >
+        <Popover.Panel className="absolute top-0 w-screen max-w-xl left-1/2 -translate-x-1/2 flex flex-col gap-8 bg-chalkboard-10 dark:bg-chalkboard-100 p-5 rounded border border-chalkboard-20/30 dark:border-chalkboard-70/50">
+          <section className="flex justify-between items-center">
+            <p
+              className={`${styles.toolbarCap} ${styles.label} !self-center rounded-r-full w-fit`}
+            >
+              You're in {guiMode.mode === 'sketch' ? '2D' : '3D'}
+            </p>
+            <Popover.Button className="p-2 flex items-center justify-center rounded-sm bg-chalkboard-20 text-chalkboard-110 dark:bg-chalkboard-70 dark:text-chalkboard-20 border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-60">
+              <FontAwesomeIcon icon={faX} className="w-4 h-4" />
+            </Popover.Button>
+          </section>
+          <section>
+            <ToolbarButtons />
+          </section>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
  )
 }
--- a/src/components/ActionIcon.tsx
+++ b/src/components/ActionIcon.tsx
@ -8,11 +8,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 const iconSizes = {
  sm: 12,
  md: 14.4,
-  lg: 18,
+  lg: 20,
+  xl: 28,
 }

 export interface ActionIconProps extends React.PropsWithChildren {
  icon?: SolidIconDefinition | BrandIconDefinition
+  className?: string
  bgClassName?: string
  iconClassName?: string
  size?: keyof typeof iconSizes
@ -20,6 +22,7 @@ export interface ActionIconProps extends React.PropsWithChildren {

 export const ActionIcon = ({
  icon = faCircleExclamation,
+  className,
  bgClassName,
  iconClassName,
  size = 'md',
@ -28,7 +31,9 @@ export const ActionIcon = ({
  return (
    <div
      className={
-        'p-1 w-fit inline-grid place-content-center ' +
+        `p-${
+          size === 'xl' ? '2' : '1'
+        } w-fit inline-grid place-content-center ${className} ` +
        (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')
      }
@ -40,7 +45,7 @@ export const ActionIcon = ({
          height={iconSizes[size]}
          className={
            iconClassName ||
-            'text-liquid-20 group-hover:text-liquid-10 hover:text-liquid-10 dark:text-liquid-100 dark:group-hover:text-liquid-100 dark:hover:text-liquid-100'
+            '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'
          }
        />
      )}
--- a/src/components/AppHeader.module.css
+++ b/src/components/AppHeader.module.css
@ -0,0 +1,7 @@
+/*
+  Some CSS cannot be represented
+  in Tailwind, such as complex grid layouts.
+ */
+.header {
+  grid-template-columns: 1fr auto 1fr;
+}
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@ -2,7 +2,8 @@ import { Toolbar } from '../Toolbar'
 import UserSidebarMenu from './UserSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
-import { useAuthMachine } from '../hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import styles from './AppHeader.module.css'

 interface AppHeaderProps extends React.PropsWithChildren {
  showToolbar?: boolean
@ -18,12 +19,18 @@ export const AppHeader = ({
  className = '',
  enableMenu = false,
 }: AppHeaderProps) => {
-  const [user] = useAuthMachine((s) => s?.context?.user)
+  const {
+    auth: {
+      context: { user },
+    },
+  } = useGlobalStateContext()

  return (
    <header
      className={
-        'overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/50 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 flex justify-between items-center ' +
+        (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
      }
    >
@ -35,7 +42,11 @@ export const AppHeader = ({
        </div>
      )}
      {/* If there are children, show them, otherwise show User menu */}
-      {children || <UserSidebarMenu user={user} />}
+      {children || (
+        <div className="ml-auto">
+          <UserSidebarMenu user={user} />
+        </div>
+      )}
    </header>
  )
 }
--- a/src/components/CollapsiblePanel.module.css
+++ b/src/components/CollapsiblePanel.module.css
@ -1,10 +1,10 @@
 .panel {
-  @apply relative overflow-auto z-0;
-  @apply bg-chalkboard-20/40;
+  @apply relative z-0;
+  @apply bg-chalkboard-10/70 backdrop-blur-sm;
 }

 :global(.dark) .panel {
-  @apply bg-chalkboard-110/50;
+  @apply bg-chalkboard-110/50 backdrop-blur-0;
 }

 .header {
--- a/src/components/CommandBar.tsx
+++ b/src/components/CommandBar.tsx
@ -0,0 +1,290 @@
+import { Combobox, Dialog, Transition } from '@headlessui/react'
+import {
+  Dispatch,
+  Fragment,
+  SetStateAction,
+  createContext,
+  useState,
+} from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { ActionIcon } from './ActionIcon'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import Fuse from 'fuse.js'
+import { Command, SubCommand } from '../lib/commands'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+
+export type SortedCommand = {
+  item: Partial<Command | SubCommand> & { name: string }
+}
+
+export const CommandsContext = createContext(
+  {} as {
+    commands: Command[]
+    addCommands: (commands: Command[]) => void
+    removeCommands: (commands: Command[]) => void
+    commandBarOpen: boolean
+    setCommandBarOpen: Dispatch<SetStateAction<boolean>>
+  }
+)
+
+export const CommandBarProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const [commands, internalSetCommands] = useState([] as Command[])
+  const [commandBarOpen, setCommandBarOpen] = useState(false)
+
+  const addCommands = (newCommands: Command[]) => {
+    internalSetCommands((prevCommands) => [...newCommands, ...prevCommands])
+  }
+  const removeCommands = (newCommands: Command[]) => {
+    internalSetCommands((prevCommands) =>
+      prevCommands.filter((command) => !newCommands.includes(command))
+    )
+  }
+
+  return (
+    <CommandsContext.Provider
+      value={{
+        commands,
+        addCommands,
+        removeCommands,
+        commandBarOpen,
+        setCommandBarOpen,
+      }}
+    >
+      {children}
+      <CommandBar />
+    </CommandsContext.Provider>
+  )
+}
+
+const CommandBar = () => {
+  const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
+  useHotkeys('meta+k', () => {
+    if (commands.length === 0) return
+    setCommandBarOpen(!commandBarOpen)
+  })
+
+  const [selectedCommand, setSelectedCommand] = useState<SortedCommand | null>(
+    null
+  )
+  // keep track of the current subcommand index
+  const [subCommandIndex, setSubCommandIndex] = useState<number>()
+  const [subCommandData, setSubCommandData] = useState<{
+    [key: string]: string
+  }>({})
+
+  // if the subcommand index is null, we're not in a subcommand
+  const inSubCommand =
+    selectedCommand &&
+    'meta' in selectedCommand.item &&
+    selectedCommand.item.meta?.args !== undefined &&
+    subCommandIndex !== undefined
+  const currentSubCommand =
+    inSubCommand && 'meta' in selectedCommand.item
+      ? selectedCommand.item.meta?.args[subCommandIndex]
+      : undefined
+
+  const [query, setQuery] = useState('')
+
+  const availableCommands =
+    inSubCommand && currentSubCommand
+      ? currentSubCommand.type === 'string'
+        ? query
+          ? [{ name: query }]
+          : currentSubCommand.options
+        : currentSubCommand.options
+      : commands
+
+  const fuse = new Fuse(availableCommands || [], {
+    keys: ['name', 'description'],
+  })
+
+  const filteredCommands = query
+    ? fuse.search(query)
+    : availableCommands?.map((c) => ({ item: c } as SortedCommand))
+
+  function clearState() {
+    setQuery('')
+    setCommandBarOpen(false)
+    setSelectedCommand(null)
+    setSubCommandIndex(undefined)
+    setSubCommandData({})
+  }
+
+  function handleCommandSelection(entry: SortedCommand) {
+    // If we have subcommands and have not yet gathered all the
+    // data required from them, set the selected command to the
+    // current command and increment the subcommand index
+    if (selectedCommand === null && 'meta' in entry.item && entry.item.meta) {
+      setSelectedCommand(entry)
+      setSubCommandIndex(0)
+      setQuery('')
+      return
+    }
+
+    const { item } = entry
+    // If we have just selected a command with no subcommands, run it
+    const isCommandWithoutSubcommands =
+      'callback' in item && !('meta' in item && item.meta)
+    if (isCommandWithoutSubcommands) {
+      if (item.callback === undefined) return
+      item.callback()
+      setCommandBarOpen(false)
+      return
+    }
+
+    // If we have subcommands and have not yet gathered all the
+    // data required from them, set the selected command to the
+    // current command and increment the subcommand index
+    if (
+      selectedCommand &&
+      subCommandIndex !== undefined &&
+      'meta' in selectedCommand.item
+    ) {
+      const subCommand = selectedCommand.item.meta?.args[subCommandIndex]
+
+      if (subCommand) {
+        const newSubCommandData = {
+          ...subCommandData,
+          [subCommand.name]: item.name,
+        }
+        const newSubCommandIndex = subCommandIndex + 1
+
+        // If we have subcommands and have gathered all the data required
+        // from them, run the command with the gathered data
+        if (
+          selectedCommand.item.callback &&
+          selectedCommand.item.meta?.args.length === newSubCommandIndex
+        ) {
+          selectedCommand.item.callback(newSubCommandData)
+          setCommandBarOpen(false)
+        } else {
+          // Otherwise, set the subcommand data and increment the subcommand index
+          setSubCommandData(newSubCommandData)
+          setSubCommandIndex(newSubCommandIndex)
+          setQuery('')
+        }
+      }
+    }
+  }
+
+  function getDisplayValue(command: Command) {
+    if (command.meta?.displayValue === undefined || !command.meta.args)
+      return command.name
+    return command.meta?.displayValue(
+      command.meta.args.map((c) =>
+        subCommandData[c.name] ? subCommandData[c.name] : `<${c.name}>`
+      )
+    )
+  }
+
+  return (
+    <Transition.Root
+      show={
+        commandBarOpen &&
+        availableCommands?.length !== undefined &&
+        availableCommands.length > 0
+      }
+      as={Fragment}
+      afterLeave={() => clearState()}
+    >
+      <Dialog
+        onClose={() => {
+          setCommandBarOpen(false)
+          clearState()
+        }}
+        className="fixed inset-0 z-40 overflow-y-auto p-4 pt-[25vh]"
+      >
+        <Transition.Child
+          enter="duration-100 ease-out"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="duration-75 ease-in"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          as={Fragment}
+        >
+          <Dialog.Overlay className="fixed inset-0 bg-chalkboard-10/70 dark:bg-chalkboard-110/50" />
+        </Transition.Child>
+        <Transition.Child
+          enter="duration-100 ease-out"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="duration-75 ease-in"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+          as={Fragment}
+        >
+          <Combobox
+            value={selectedCommand}
+            onChange={handleCommandSelection}
+            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 gap-2 items-center">
+              <ActionIcon icon={faSearch} size="xl" className="rounded-sm" />
+              <div>
+                {inSubCommand && (
+                  <p className="text-liquid-70 dark:text-liquid-30">
+                    {selectedCommand.item &&
+                      getDisplayValue(selectedCommand.item as Command)}
+                  </p>
+                )}
+                <Combobox.Input
+                  onChange={(event) => setQuery(event.target.value)}
+                  className="bg-transparent focus:outline-none w-full"
+                  onKeyDown={(event) => {
+                    if (event.metaKey && event.key === 'k')
+                      setCommandBarOpen(false)
+                    if (
+                      inSubCommand &&
+                      event.key === 'Backspace' &&
+                      !event.currentTarget.value
+                    ) {
+                      setSubCommandIndex(subCommandIndex - 1)
+                      setSelectedCommand(null)
+                    }
+                  }}
+                  displayValue={(command: SortedCommand) =>
+                    command !== null ? command.item.name : ''
+                  }
+                  placeholder={
+                    inSubCommand
+                      ? `Enter <${currentSubCommand?.name}>`
+                      : 'Search for a command'
+                  }
+                  value={query}
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  spellCheck="false"
+                />
+              </div>
+            </div>
+            <Combobox.Options static className="max-h-96 overflow-y-auto">
+              {filteredCommands?.map((commandResult) => (
+                <Combobox.Option
+                  key={commandResult.item.name}
+                  value={commandResult}
+                  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 && (
+                    <p className="mt-0.5 text-liquid-70 dark:text-liquid-30 text-sm">
+                      {(commandResult.item as SubCommand).description}
+                    </p>
+                  )}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Combobox>
+        </Transition.Child>
+      </Dialog>
+    </Transition.Root>
+  )
+}
+
+export default CommandBarProvider
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@ -39,7 +39,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
  const initialValues: OutputFormat = {
    type: defaultType,
    storage: 'embedded',
-    presentation: 'compact',
+    presentation: 'pretty',
  }
  const formik = useFormik({
    initialValues,
@ -83,8 +83,6 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
    },
  })

-  const yo = formik.values
-
  return (
    <>
      <ActionButton
--- a/src/components/GlobalStateProvider.tsx
+++ b/src/components/GlobalStateProvider.tsx
@ -0,0 +1,158 @@
+import { useMachine } from '@xstate/react'
+import { useNavigate } from 'react-router-dom'
+import { paths } from '../Router'
+import {
+  authCommandBarMeta,
+  authMachine,
+  TOKEN_PERSIST_KEY,
+} from '../machines/authMachine'
+import withBaseUrl from '../lib/withBaseURL'
+import React, { createContext, useEffect, useRef } from 'react'
+import useStateMachineCommands from '../hooks/useStateMachineCommands'
+import {
+  SETTINGS_PERSIST_KEY,
+  settingsCommandBarMeta,
+  settingsMachine,
+} from 'machines/settingsMachine'
+import { toast } from 'react-hot-toast'
+import { setThemeClass, Themes } from 'lib/theme'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+} from 'xstate'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+type GlobalContext = {
+  auth: MachineContext<typeof authMachine>
+  settings: MachineContext<typeof settingsMachine>
+}
+
+export const GlobalStateContext = createContext({} as GlobalContext)
+
+export const GlobalStateProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const navigate = useNavigate()
+  const { commands } = useCommandsContext()
+
+  // Settings machine setup
+  const retrievedSettings = useRef(
+    localStorage?.getItem(SETTINGS_PERSIST_KEY) || '{}'
+  )
+  const persistedSettings = Object.assign(
+    settingsMachine.initialState.context,
+    JSON.parse(retrievedSettings.current) as Partial<
+      (typeof settingsMachine)['context']
+    >
+  )
+
+  const [settingsState, settingsSend] = useMachine(settingsMachine, {
+    context: persistedSettings,
+    actions: {
+      toastSuccess: (context, event) => {
+        const truncatedNewValue =
+          'data' in event && event.data instanceof Object
+            ? (context[Object.keys(event.data)[0] as keyof typeof context]
+                .toString()
+                .substring(0, 28) as any)
+            : undefined
+        toast.success(
+          event.type +
+            (truncatedNewValue
+              ? ` to "${truncatedNewValue}${
+                  truncatedNewValue.length === 28 ? '...' : ''
+                }"`
+              : '')
+        )
+      },
+    },
+  })
+
+  useStateMachineCommands({
+    state: settingsState,
+    send: settingsSend,
+    commands,
+    owner: 'settings',
+    commandBarMeta: settingsCommandBarMeta,
+  })
+
+  // Listen for changes to the system theme and update the app theme accordingly
+  // This is only done if the theme setting is set to 'system'.
+  // It can't be done in XState (in an invoked callback, for example)
+  // because there doesn't seem to be a good way to listen to
+  // events outside of the machine that also depend on the machine's context
+  useEffect(() => {
+    const matcher = window.matchMedia('(prefers-color-scheme: dark)')
+    const listener = (e: MediaQueryListEvent) => {
+      if (settingsState.context.theme !== 'system') return
+      setThemeClass(e.matches ? Themes.Dark : Themes.Light)
+    }
+
+    matcher.addEventListener('change', listener)
+    return () => matcher.removeEventListener('change', listener)
+  }, [settingsState.context])
+
+  // Auth machine setup
+  const [authState, authSend] = useMachine(authMachine, {
+    actions: {
+      goToSignInPage: () => {
+        navigate(paths.SIGN_IN)
+        logout()
+      },
+      goToIndexPage: () => {
+        if (window.location.pathname.includes(paths.SIGN_IN)) {
+          navigate(paths.INDEX)
+        }
+      },
+    },
+  })
+
+  useStateMachineCommands({
+    state: authState,
+    send: authSend,
+    commands,
+    commandBarMeta: authCommandBarMeta,
+    owner: 'auth',
+  })
+
+  return (
+    <GlobalStateContext.Provider
+      value={{
+        auth: {
+          state: authState,
+          context: authState.context,
+          send: authSend,
+        },
+        settings: {
+          state: settingsState,
+          context: settingsState.context,
+          send: settingsSend,
+        },
+      }}
+    >
+      {children}
+    </GlobalStateContext.Provider>
+  )
+}
+
+export default GlobalStateProvider
+
+export function logout() {
+  const url = withBaseUrl('/logout')
+  localStorage.removeItem(TOKEN_PERSIST_KEY)
+  return fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+  })
+}
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@ -1,7 +1,8 @@
 import ReactJson from 'react-json-view'
 import { useEffect } from 'react'
-import { Themes, useStore } from '../useStore'
+import { useStore } from '../useStore'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
+import { Themes } from '../lib/theme'

 const ReactJsonTypeHack = ReactJson as any

--- a/src/components/MemoryPanel.tsx
+++ b/src/components/MemoryPanel.tsx
@ -1,8 +1,9 @@
 import ReactJson from 'react-json-view'
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { Themes, useStore } from '../useStore'
+import { useStore } from '../useStore'
 import { useMemo } from 'react'
 import { ProgramMemory } from '../lang/executor'
+import { Themes } from '../lib/theme'

 interface MemoryPanelProps extends CollapsiblePanelProps {
  theme?: Exclude<Themes, Themes.System>
--- a/src/components/ProjectSidebarMenu.tsx
+++ b/src/components/ProjectSidebarMenu.tsx
@ -1,10 +1,11 @@
-import { Popover } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
 import { ProjectWithEntryPointMetadata, paths } from '../Router'
 import { isTauri } from '../lib/isTauri'
 import { Link } from 'react-router-dom'
 import { ExportButton } from './ExportButton'
+import { Fragment } from 'react'

 const ProjectSidebarMenu = ({
  project,
@ -34,7 +35,7 @@ const ProjectSidebarMenu = ({
  ) : (
    <Popover className="relative">
      <Popover.Button
-        className="border-0 px-1 pr-2 pl-0 flex items-center gap-4 focus:outline-none focus:ring-2 focus: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
@ -46,54 +47,77 @@ const ProjectSidebarMenu = ({
          {isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
        </span>
      </Popover.Button>
-      <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      <Transition
+        enter="duration-200 ease-out"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="duration-100 ease-in"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as={Fragment}
+      >
+        <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      </Transition>

-      <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 shadow-md rounded-r-lg overflow-hidden">
-        <div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
-          <img
-            src="/kitt-8bit-winking.svg"
-            alt="KittyCAD App"
-            className="h-9 w-auto"
-          />
+      <Transition
+        enter="duration-100 ease-out"
+        enterFrom="opacity-0 -translate-x-1/4"
+        enterTo="opacity-100 translate-x-0"
+        leave="duration-75 ease-in"
+        leaveFrom="opacity-100 translate-x-0"
+        leaveTo="opacity-0 -translate-x-4"
+        as={Fragment}
+      >
+        <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg overflow-hidden">
+          <div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
+            <img
+              src="/kitt-8bit-winking.svg"
+              alt="KittyCAD App"
+              className="h-9 w-auto"
+            />

-          <div>
-            <p
-              className="m-0 text-energy-10 text-mono"
-              data-testid="projectName"
-            >
-              {project?.name ? project.name : 'KittyCAD Modeling App'}
-            </p>
-            {project?.entrypoint_metadata && (
-              <p className="m-0 text-energy-40 text-xs" data-testid="createdAt">
-                Created{' '}
-                {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
+            <div>
+              <p
+                className="m-0 text-energy-10 text-mono"
+                data-testid="projectName"
+              >
+                {project?.name ? project.name : 'KittyCAD Modeling App'}
              </p>
+              {project?.entrypoint_metadata && (
+                <p
+                  className="m-0 text-energy-40 text-xs"
+                  data-testid="createdAt"
+                >
+                  Created{' '}
+                  {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="p-4 flex flex-col gap-2">
+            <ExportButton
+              className={{
+                button:
+                  'border-transparent dark:border-transparent dark:hover:border-energy-60',
+              }}
+            >
+              Export Model
+            </ExportButton>
+            {isTauri() && (
+              <ActionButton
+                Element="link"
+                to={paths.HOME}
+                icon={{
+                  icon: faHome,
+                }}
+                className="border-transparent dark:border-transparent dark:hover:border-energy-60"
+              >
+                Go to Home
+              </ActionButton>
            )}
          </div>
-        </div>
-        <div className="p-4 flex flex-col gap-2">
-          <ExportButton
-            className={{
-              button:
-                'border-transparent dark:border-transparent dark:hover:border-energy-60',
-            }}
-          >
-            Export Model
-          </ExportButton>
-          {isTauri() && (
-            <ActionButton
-              Element="link"
-              to={paths.HOME}
-              icon={{
-                icon: faHome,
-              }}
-              className="border-transparent dark:border-transparent dark:hover:border-energy-60"
-            >
-              Go to Home
-            </ActionButton>
-          )}
-        </div>
-      </Popover.Panel>
+        </Popover.Panel>
+      </Transition>
    </Popover>
  )
 }
--- a/src/components/Stream.tsx
+++ b/src/components/Stream.tsx
@ -12,12 +12,12 @@ import Loading from './Loading'

 export const Stream = ({ className = '' }) => {
  const [isLoading, setIsLoading] = useState(true)
+  const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
  const videoRef = useRef<HTMLVideoElement>(null)
  const {
    mediaStream,
    engineCommandManager,
    setIsMouseDownInStream,
-    setCmdId,
    didDragInStream,
    setDidDragInStream,
    streamDimensions,
@ -27,7 +27,6 @@ export const Stream = ({ className = '' }) => {
    isMouseDownInStream: s.isMouseDownInStream,
    setIsMouseDownInStream: s.setIsMouseDownInStream,
    fileId: s.fileId,
-    setCmdId: s.setCmdId,
    didDragInStream: s.didDragInStream,
    setDidDragInStream: s.setDidDragInStream,
    streamDimensions: s.streamDimensions,
@ -59,7 +58,6 @@ export const Stream = ({ className = '' }) => {
    console.log('click', x, y)

    const newId = uuidv4()
-    setCmdId(newId)

    const interaction = ctrlKey ? 'pan' : 'rotate'

@ -74,6 +72,7 @@ export const Stream = ({ className = '' }) => {
    })

    setIsMouseDownInStream(true)
+    setClickCoords({ x, y })
  }

  const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
@ -127,6 +126,19 @@ export const Stream = ({ className = '' }) => {
      })
    }
    setDidDragInStream(false)
+    setClickCoords(undefined)
+  }
+
+  const handleMouseMove: MouseEventHandler<HTMLVideoElement> = (e) => {
+    if (!clickCoords) return
+
+    const delta =
+      ((clickCoords.x - e.clientX) ** 2 + (clickCoords.y - e.clientY) ** 2) **
+      0.5
+
+    if (delta > 5 && !didDragInStream) {
+      setDidDragInStream(true)
+    }
  }

  return (
@ -142,6 +154,7 @@ export const Stream = ({ className = '' }) => {
        onContextMenuCapture={(e) => e.preventDefault()}
        onWheel={handleScroll}
        onPlay={() => setIsLoading(false)}
+        onMouseMoveCapture={handleMouseMove}
        className="w-full h-full"
      />
      {isLoading && (
--- a/src/components/UserSidebarMenu.test.tsx
+++ b/src/components/UserSidebarMenu.test.tsx
@ -2,7 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import UserSidebarMenu from './UserSidebarMenu'
 import { BrowserRouter } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
-import { GlobalStateProvider } from '../hooks/useAuthMachine'
+import { GlobalStateProvider } from './GlobalStateProvider'
+import CommandBarProvider from './CommandBar'

 type User = Models['User_type']

@ -94,7 +95,9 @@ function TestWrap({ children }: { children: React.ReactNode }) {
  // wrap in router and xState context
  return (
    <BrowserRouter>
-      <GlobalStateProvider>{children}</GlobalStateProvider>
+      <CommandBarProvider>
+        <GlobalStateProvider>{children}</GlobalStateProvider>
+      </CommandBarProvider>
    </BrowserRouter>
  )
 }
--- a/src/components/UserSidebarMenu.tsx
+++ b/src/components/UserSidebarMenu.tsx
@ -1,13 +1,13 @@
-import { Popover } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import { paths } from '../Router'
 import makeUrlPathRelative from '../lib/makeUrlPathRelative'
-import { useAuthMachine } from '../hooks/useAuthMachine'
 import { Models } from '@kittycad/lib'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'

 type User = Models['User_type']

@ -15,7 +15,9 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
  const displayedName = getDisplayName(user)
  const [imageLoadFailed, setImageLoadFailed] = useState(false)
  const navigate = useNavigate()
-  const [_, send] = useAuthMachine()
+  const {
+    auth: { send },
+  } = useGlobalStateContext()

  // Fallback logic for displaying user's "name":
  // 1. user.name
@ -59,82 +61,102 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
          Menu
        </ActionButton>
      )}
-      <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      <Transition
+        enter="duration-200 ease-out"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="duration-100 ease-in"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as={Fragment}
+      >
+        <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+      </Transition>

-      <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 shadow-md rounded-l-lg overflow-hidden">
-        {({ close }) => (
-          <>
-            {user && (
-              <div className="flex items-center gap-4 px-4 py-3 bg-liquid-100">
-                {user.image && !imageLoadFailed && (
-                  <div className="rounded-full shadow-inner overflow-hidden">
-                    <img
-                      src={user.image}
-                      alt={user.name || ''}
-                      className="h-8 w-8"
-                      referrerPolicy="no-referrer"
-                      onError={() => setImageLoadFailed(true)}
-                    />
-                  </div>
-                )}
-
-                <div>
-                  <p
-                    className="m-0 text-liquid-10 text-mono"
-                    data-testid="username"
-                  >
-                    {displayedName || ''}
-                  </p>
-                  {displayedName !== user.email && (
-                    <p
-                      className="m-0 text-liquid-40 text-xs"
-                      data-testid="email"
-                    >
-                      {user.email}
-                    </p>
+      <Transition
+        enter="duration-100 ease-out"
+        enterFrom="opacity-0 translate-x-1/4"
+        enterTo="opacity-100 translate-x-0"
+        leave="duration-75 ease-in"
+        leaveFrom="opacity-100 translate-x-0"
+        leaveTo="opacity-0 translate-x-4"
+        as={Fragment}
+      >
+        <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 dark:border-liquid-100/50 shadow-md rounded-l-lg overflow-hidden">
+          {({ close }) => (
+            <>
+              {user && (
+                <div className="flex items-center gap-4 px-4 py-3 bg-liquid-100">
+                  {user.image && !imageLoadFailed && (
+                    <div className="rounded-full shadow-inner overflow-hidden">
+                      <img
+                        src={user.image}
+                        alt={user.name || ''}
+                        className="h-8 w-8"
+                        referrerPolicy="no-referrer"
+                        onError={() => setImageLoadFailed(true)}
+                      />
+                    </div>
                  )}
+
+                  <div>
+                    <p
+                      className="m-0 text-liquid-10 text-mono"
+                      data-testid="username"
+                    >
+                      {displayedName || ''}
+                    </p>
+                    {displayedName !== user.email && (
+                      <p
+                        className="m-0 text-liquid-40 text-xs"
+                        data-testid="email"
+                      >
+                        {user.email}
+                      </p>
+                    )}
+                  </div>
                </div>
+              )}
+              <div className="p-4 flex flex-col gap-2">
+                <ActionButton
+                  Element="button"
+                  icon={{ icon: faGear }}
+                  className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
+                  onClick={() => {
+                    // since /settings is a nested route the sidebar doesn't close
+                    // automatically when navigating to it
+                    close()
+                    navigate(makeUrlPathRelative(paths.SETTINGS))
+                  }}
+                >
+                  Settings
+                </ActionButton>
+                <ActionButton
+                  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="button"
+                  onClick={() => send('Log out')}
+                  icon={{
+                    icon: faSignOutAlt,
+                    bgClassName: 'bg-destroy-80',
+                    iconClassName:
+                      'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
+                  }}
+                  className="border-transparent dark:border-transparent hover:border-destroy-40 dark:hover:border-destroy-60"
+                >
+                  Sign out
+                </ActionButton>
              </div>
-            )}
-            <div className="p-4 flex flex-col gap-2">
-              <ActionButton
-                Element="button"
-                icon={{ icon: faGear }}
-                className="border-transparent dark:border-transparent dark:hover:border-liquid-60"
-                onClick={() => {
-                  // since /settings is a nested route the sidebar doesn't close
-                  // automatically when navigating to it
-                  close()
-                  navigate(makeUrlPathRelative(paths.SETTINGS))
-                }}
-              >
-                Settings
-              </ActionButton>
-              <ActionButton
-                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="button"
-                onClick={() => send('logout')}
-                icon={{
-                  icon: faSignOutAlt,
-                  bgClassName: 'bg-destroy-80',
-                  iconClassName:
-                    'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10',
-                }}
-                className="border-transparent dark:border-transparent hover:border-destroy-40 dark:hover:border-destroy-60"
-              >
-                Sign out
-              </ActionButton>
-            </div>
-          </>
-        )}
-      </Popover.Panel>
+            </>
+          )}
+        </Popover.Panel>
+      </Transition>
    </Popover>
  )
 }
--- a/src/editor/lsp/client.ts
+++ b/src/editor/lsp/client.ts
@ -0,0 +1,185 @@
+import * as jsrpc from 'json-rpc-2.0'
+import * as LSP from 'vscode-languageserver-protocol'
+
+import {
+  registerServerCapability,
+  unregisterServerCapability,
+} from './server-capability-registration'
+import { Codec, FromServer, IntoServer } from './codec'
+
+const client_capabilities: LSP.ClientCapabilities = {
+  textDocument: {
+    hover: {
+      dynamicRegistration: true,
+      contentFormat: ['plaintext', 'markdown'],
+    },
+    moniker: {},
+    synchronization: {
+      dynamicRegistration: true,
+      willSave: false,
+      didSave: false,
+      willSaveWaitUntil: false,
+    },
+    completion: {
+      dynamicRegistration: true,
+      completionItem: {
+        snippetSupport: false,
+        commitCharactersSupport: true,
+        documentationFormat: ['plaintext', 'markdown'],
+        deprecatedSupport: false,
+        preselectSupport: false,
+      },
+      contextSupport: false,
+    },
+    signatureHelp: {
+      dynamicRegistration: true,
+      signatureInformation: {
+        documentationFormat: ['plaintext', 'markdown'],
+      },
+    },
+    declaration: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    definition: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    typeDefinition: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+    implementation: {
+      dynamicRegistration: true,
+      linkSupport: true,
+    },
+  },
+  workspace: {
+    didChangeConfiguration: {
+      dynamicRegistration: true,
+    },
+  },
+}
+
+export default class Client extends jsrpc.JSONRPCServerAndClient {
+  afterInitializedHooks: (() => Promise<void>)[] = []
+  #fromServer: FromServer
+  private serverCapabilities: LSP.ServerCapabilities<any> = {}
+
+  constructor(fromServer: FromServer, intoServer: IntoServer) {
+    super(
+      new jsrpc.JSONRPCServer(),
+      new jsrpc.JSONRPCClient(async (json: jsrpc.JSONRPCRequest) => {
+        const encoded = Codec.encode(json)
+        intoServer.enqueue(encoded)
+        if (null != json.id) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          const response = await fromServer.responses.get(json.id)!
+          this.client.receive(response as jsrpc.JSONRPCResponse)
+        }
+      })
+    )
+    this.#fromServer = fromServer
+  }
+
+  async start(): Promise<void> {
+    // process "window/logMessage": client <- server
+    this.addMethod(LSP.LogMessageNotification.type.method, (params) => {
+      const { type, message } = params as {
+        type: LSP.MessageType
+        message: string
+      }
+      let messageString = ''
+      switch (type) {
+        case LSP.MessageType.Error: {
+          messageString += '[error] '
+          break
+        }
+        case LSP.MessageType.Warning: {
+          messageString += ' [warn] '
+          break
+        }
+        case LSP.MessageType.Info: {
+          messageString += ' [info] '
+          break
+        }
+        case LSP.MessageType.Log: {
+          messageString += '  [log] '
+          break
+        }
+      }
+      messageString += message
+      // console.log(messageString)
+      return
+    })
+
+    // process "client/registerCapability": client <- server
+    this.addMethod(LSP.RegistrationRequest.type.method, (params) => {
+      // Register a server capability.
+      params.registrations.forEach(
+        (capabilityRegistration: LSP.Registration) => {
+          this.serverCapabilities = registerServerCapability(
+            this.serverCapabilities,
+            capabilityRegistration
+          )
+        }
+      )
+    })
+
+    // process "client/unregisterCapability": client <- server
+    this.addMethod(LSP.UnregistrationRequest.type.method, (params) => {
+      // Unregister a server capability.
+      params.unregisterations.forEach(
+        (capabilityUnregistration: LSP.Unregistration) => {
+          this.serverCapabilities = unregisterServerCapability(
+            this.serverCapabilities,
+            capabilityUnregistration
+          )
+        }
+      )
+    })
+
+    // request "initialize": client <-> server
+    const { capabilities } = await this.request(
+      LSP.InitializeRequest.type.method,
+      {
+        processId: null,
+        clientInfo: {
+          name: 'kcl-language-client',
+        },
+        capabilities: client_capabilities,
+        rootUri: null,
+      } as LSP.InitializeParams
+    )
+
+    this.serverCapabilities = capabilities
+
+    // notify "initialized": client --> server
+    this.notify(LSP.InitializedNotification.type.method, {})
+
+    await Promise.all(
+      this.afterInitializedHooks.map((f: () => Promise<void>) => f())
+    )
+    await Promise.all([this.processNotifications(), this.processRequests()])
+  }
+
+  getServerCapabilities(): LSP.ServerCapabilities<any> {
+    return this.serverCapabilities
+  }
+
+  async processNotifications(): Promise<void> {
+    for await (const notification of this.#fromServer.notifications) {
+      await this.receiveAndSend(notification)
+    }
+  }
+
+  async processRequests(): Promise<void> {
+    for await (const request of this.#fromServer.requests) {
+      await this.receiveAndSend(request)
+    }
+  }
+
+  pushAfterInitializeHook(...hooks: (() => Promise<void>)[]): void {
+    this.afterInitializedHooks.push(...hooks)
+  }
+}
--- a/src/editor/lsp/codec.ts
+++ b/src/editor/lsp/codec.ts
@ -0,0 +1,53 @@
+import * as jsrpc from 'json-rpc-2.0'
+import * as vsrpc from 'vscode-jsonrpc'
+
+import Bytes from './codec/bytes'
+import StreamDemuxer from './codec/demuxer'
+import Headers from './codec/headers'
+import Queue from './codec/queue'
+import Tracer from './tracer'
+
+export const encoder = new TextEncoder()
+export const decoder = new TextDecoder()
+
+export class Codec {
+  static encode(
+    json: jsrpc.JSONRPCRequest | jsrpc.JSONRPCResponse
+  ): Uint8Array {
+    const message = JSON.stringify(json)
+    const delimited = Headers.add(message)
+    return Bytes.encode(delimited)
+  }
+
+  static decode<T>(data: Uint8Array): T {
+    const delimited = Bytes.decode(data)
+    const message = Headers.remove(delimited)
+    return JSON.parse(message) as T
+  }
+}
+
+// FIXME: tracing effiency
+export class IntoServer
+  extends Queue<Uint8Array>
+  implements AsyncGenerator<Uint8Array, never, void>
+{
+  enqueue(item: Uint8Array): void {
+    Tracer.client(Headers.remove(decoder.decode(item)))
+    super.enqueue(item)
+  }
+}
+
+export interface FromServer extends WritableStream<Uint8Array> {
+  readonly responses: {
+    get(key: number | string): null | Promise<vsrpc.ResponseMessage>
+  }
+  readonly notifications: AsyncGenerator<vsrpc.NotificationMessage, never, void>
+  readonly requests: AsyncGenerator<vsrpc.RequestMessage, never, void>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace FromServer {
+  export function create(): FromServer {
+    return new StreamDemuxer()
+  }
+}
--- a/src/editor/lsp/codec/bytes.ts
+++ b/src/editor/lsp/codec/bytes.ts
@ -0,0 +1,27 @@
+import { encoder, decoder } from '../codec'
+
+export default class Bytes {
+  static encode(input: string): Uint8Array {
+    return encoder.encode(input)
+  }
+
+  static decode(input: Uint8Array): string {
+    return decoder.decode(input)
+  }
+
+  static append<
+    T extends { length: number; set(arr: T, offset: number): void }
+  >(constructor: { new (length: number): T }, ...arrays: T[]) {
+    let totalLength = 0
+    for (const arr of arrays) {
+      totalLength += arr.length
+    }
+    const result = new constructor(totalLength)
+    let offset = 0
+    for (const arr of arrays) {
+      result.set(arr, offset)
+      offset += arr.length
+    }
+    return result
+  }
+}
--- a/src/editor/lsp/codec/demuxer.ts
+++ b/src/editor/lsp/codec/demuxer.ts
@ -0,0 +1,82 @@
+import * as vsrpc from 'vscode-jsonrpc'
+
+import Bytes from './bytes'
+import PromiseMap from './map'
+import Queue from './queue'
+import Tracer from '../tracer'
+
+export default class StreamDemuxer extends Queue<Uint8Array> {
+  readonly responses: PromiseMap<number | string, vsrpc.ResponseMessage> =
+    new PromiseMap()
+  readonly notifications: Queue<vsrpc.NotificationMessage> =
+    new Queue<vsrpc.NotificationMessage>()
+  readonly requests: Queue<vsrpc.RequestMessage> =
+    new Queue<vsrpc.RequestMessage>()
+
+  readonly #start: Promise<void>
+
+  constructor() {
+    super()
+    this.#start = this.start()
+  }
+
+  private async start(): Promise<void> {
+    let contentLength: null | number = null
+    let buffer = new Uint8Array()
+
+    for await (const bytes of this) {
+      buffer = Bytes.append(Uint8Array, buffer, bytes)
+      while (buffer.length > 0) {
+        // check if the content length is known
+        if (null == contentLength) {
+          // if not, try to match the prefixed headers
+          const match = Bytes.decode(buffer).match(
+            /^Content-Length:\s*(\d+)\s*/
+          )
+          if (null == match) continue
+
+          // try to parse the content-length from the headers
+          const length = parseInt(match[1])
+          if (isNaN(length)) throw new Error('invalid content length')
+
+          // slice the headers since we now have the content length
+          buffer = buffer.slice(match[0].length)
+
+          // set the content length
+          contentLength = length
+        }
+
+        // if the buffer doesn't contain a full message; await another iteration
+        if (buffer.length < contentLength) continue
+
+        // Get just the slice of the buffer that is our content length.
+        const slice = buffer.slice(0, contentLength)
+
+        // decode buffer to a string
+        const delimited = Bytes.decode(slice)
+
+        // reset the buffer
+        buffer = buffer.slice(contentLength)
+        // reset the contentLength
+        contentLength = null
+
+        const message = JSON.parse(delimited) as vsrpc.Message
+        Tracer.server(message)
+
+        // demux the message stream
+        if (vsrpc.Message.isResponse(message) && null != message.id) {
+          this.responses.set(message.id, message)
+          continue
+        }
+        if (vsrpc.Message.isNotification(message)) {
+          this.notifications.enqueue(message)
+          continue
+        }
+        if (vsrpc.Message.isRequest(message)) {
+          this.requests.enqueue(message)
+          continue
+        }
+      }
+    }
+  }
+}
--- a/src/editor/lsp/codec/headers.ts
+++ b/src/editor/lsp/codec/headers.ts
@ -0,0 +1,9 @@
+export default class Headers {
+  static add(message: string): string {
+    return `Content-Length: ${message.length}\r\n\r\n${message}`
+  }
+
+  static remove(delimited: string): string {
+    return delimited.replace(/^Content-Length:\s*\d+\s*/, '')
+  }
+}
--- a/src/editor/lsp/codec/map.ts
+++ b/src/editor/lsp/codec/map.ts
@ -0,0 +1,72 @@
+export default class PromiseMap<K, V extends { toString(): string }> {
+  #map: Map<K, PromiseMap.Entry<V>> = new Map()
+
+  get(key: K & { toString(): string }): null | Promise<V> {
+    let initialized: PromiseMap.Entry<V>
+    // if the entry doesn't exist, set it
+    if (!this.#map.has(key)) {
+      initialized = this.#set(key)
+    } else {
+      // otherwise return the entry
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      initialized = this.#map.get(key)!
+    }
+    // if the entry is a pending promise, return it
+    if (initialized.status === 'pending') {
+      return initialized.promise
+    } else {
+      // otherwise return null
+      return null
+    }
+  }
+
+  #set(key: K, value?: V): PromiseMap.Entry<V> {
+    if (this.#map.has(key)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return this.#map.get(key)!
+    }
+    // placeholder resolver for entry
+    let resolve = (item: V) => {
+      void item
+    }
+    // promise for entry (which assigns the resolver
+    const promise = new Promise<V>((resolver) => {
+      resolve = resolver
+    })
+    // the initialized entry
+    const initialized: PromiseMap.Entry<V> = {
+      status: 'pending',
+      resolve,
+      promise,
+    }
+    if (null != value) {
+      initialized.resolve(value)
+    }
+    // set the entry
+    this.#map.set(key, initialized)
+    return initialized
+  }
+
+  set(key: K & { toString(): string }, value: V): this {
+    const initialized = this.#set(key, value)
+    // if the promise is pending ...
+    if (initialized.status === 'pending') {
+      // ... set the entry status to resolved to free the promise
+      this.#map.set(key, { status: 'resolved' })
+      // ... and resolve the promise with the given value
+      initialized.resolve(value)
+    }
+    return this
+  }
+
+  get size(): number {
+    return this.#map.size
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace PromiseMap {
+  export type Entry<V> =
+    | { status: 'pending'; resolve: (item: V) => void; promise: Promise<V> }
+    | { status: 'resolved' }
+}
--- a/src/editor/lsp/codec/queue.ts
+++ b/src/editor/lsp/codec/queue.ts
@ -0,0 +1,113 @@
+export default class Queue<T>
+  implements WritableStream<T>, AsyncGenerator<T, never, void>
+{
+  readonly #promises: Promise<T>[] = []
+  readonly #resolvers: ((item: T) => void)[] = []
+  readonly #observers: ((item: T) => void)[] = []
+
+  #closed = false
+  #locked = false
+  readonly #stream: WritableStream<T>
+
+  static #__add<X>(
+    promises: Promise<X>[],
+    resolvers: ((item: X) => void)[]
+  ): void {
+    promises.push(
+      new Promise((resolve) => {
+        resolvers.push(resolve)
+      })
+    )
+  }
+
+  static #__enqueue<X>(
+    closed: boolean,
+    promises: Promise<X>[],
+    resolvers: ((item: X) => void)[],
+    item: X
+  ): void {
+    if (!closed) {
+      if (!resolvers.length) Queue.#__add(promises, resolvers)
+      const resolve = resolvers.shift()! // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      resolve(item)
+    }
+  }
+
+  constructor() {
+    const closed = this.#closed
+    const promises = this.#promises
+    const resolvers = this.#resolvers
+    this.#stream = new WritableStream({
+      write(item: T): void {
+        Queue.#__enqueue(closed, promises, resolvers, item)
+      },
+    })
+  }
+
+  #add(): void {
+    return Queue.#__add(this.#promises, this.#resolvers)
+  }
+
+  enqueue(item: T): void {
+    return Queue.#__enqueue(this.#closed, this.#promises, this.#resolvers, item)
+  }
+
+  dequeue(): Promise<T> {
+    if (!this.#promises.length) this.#add()
+    const item = this.#promises.shift()! // eslint-disable-line @typescript-eslint/no-non-null-assertion
+    return item
+  }
+
+  isEmpty(): boolean {
+    return !this.#promises.length
+  }
+
+  isBlocked(): boolean {
+    return !!this.#resolvers.length
+  }
+
+  get length(): number {
+    return this.#promises.length - this.#resolvers.length
+  }
+
+  async next(): Promise<IteratorResult<T, never>> {
+    const done = false
+    const value = await this.dequeue()
+    for (const observer of this.#observers) {
+      observer(value)
+    }
+    return { done, value }
+  }
+
+  return(): Promise<IteratorResult<T, never>> {
+    return new Promise(() => {
+      // empty
+    })
+  }
+
+  throw(err: Error): Promise<IteratorResult<T, never>> {
+    return new Promise((_resolve, reject) => {
+      reject(err)
+    })
+  }
+
+  [Symbol.asyncIterator](): AsyncGenerator<T, never, void> {
+    return this
+  }
+
+  get locked(): boolean {
+    return this.#stream.locked
+  }
+
+  abort(reason?: Error): Promise<void> {
+    return this.#stream.abort(reason)
+  }
+
+  close(): Promise<void> {
+    return this.#stream.close()
+  }
+
+  getWriter(): WritableStreamDefaultWriter<T> {
+    return this.#stream.getWriter()
+  }
+}
--- a/src/editor/lsp/index.ts
+++ b/src/editor/lsp/index.ts
@ -0,0 +1,151 @@
+import type * as LSP from 'vscode-languageserver-protocol'
+import Client from './client'
+import { LanguageServerPlugin } from './plugin'
+import { SemanticToken, deserializeTokens } from './semantic_tokens'
+
+// https://microsoft.github.io/language-server-protocol/specifications/specification-current/
+
+// Client to server then server to client
+interface LSPRequestMap {
+  initialize: [LSP.InitializeParams, LSP.InitializeResult]
+  'textDocument/hover': [LSP.HoverParams, LSP.Hover]
+  'textDocument/completion': [
+    LSP.CompletionParams,
+    LSP.CompletionItem[] | LSP.CompletionList | null
+  ]
+  'textDocument/semanticTokens/full': [
+    LSP.SemanticTokensParams,
+    LSP.SemanticTokens
+  ]
+}
+
+// Client to server
+interface LSPNotifyMap {
+  initialized: LSP.InitializedParams
+  'textDocument/didChange': LSP.DidChangeTextDocumentParams
+  'textDocument/didOpen': LSP.DidOpenTextDocumentParams
+}
+
+// Server to client
+interface LSPEventMap {
+  'textDocument/publishDiagnostics': LSP.PublishDiagnosticsParams
+}
+
+export type Notification = {
+  [key in keyof LSPEventMap]: {
+    jsonrpc: '2.0'
+    id?: null | undefined
+    method: key
+    params: LSPEventMap[key]
+  }
+}[keyof LSPEventMap]
+
+export interface LanguageServerClientOptions {
+  client: Client
+}
+
+export class LanguageServerClient {
+  private client: Client
+
+  public ready: boolean
+
+  private plugins: LanguageServerPlugin[]
+
+  public initializePromise: Promise<void>
+
+  private isUpdatingSemanticTokens: boolean = false
+  private semanticTokens: SemanticToken[] = []
+
+  constructor(options: LanguageServerClientOptions) {
+    this.plugins = []
+    this.client = options.client
+
+    this.ready = false
+
+    this.initializePromise = this.initialize()
+  }
+
+  async initialize() {
+    // Start the client in the background.
+    this.client.start()
+
+    this.ready = true
+  }
+
+  getServerCapabilities(): LSP.ServerCapabilities<any> {
+    return this.client.getServerCapabilities()
+  }
+
+  close() {}
+
+  textDocumentDidOpen(params: LSP.DidOpenTextDocumentParams) {
+    this.notify('textDocument/didOpen', params)
+
+    this.updateSemanticTokens(params.textDocument.uri)
+  }
+
+  textDocumentDidChange(params: LSP.DidChangeTextDocumentParams) {
+    this.notify('textDocument/didChange', params)
+    this.updateSemanticTokens(params.textDocument.uri)
+  }
+
+  async updateSemanticTokens(uri: string) {
+    // Make sure we can only run, if we aren't already running.
+    if (!this.isUpdatingSemanticTokens) {
+      this.isUpdatingSemanticTokens = true
+
+      const result = await this.request('textDocument/semanticTokens/full', {
+        textDocument: {
+          uri,
+        },
+      })
+
+      this.semanticTokens = deserializeTokens(
+        result.data,
+        this.getServerCapabilities().semanticTokensProvider
+      )
+
+      this.isUpdatingSemanticTokens = false
+    }
+  }
+
+  getSemanticTokens(): SemanticToken[] {
+    return this.semanticTokens
+  }
+
+  async textDocumentHover(params: LSP.HoverParams) {
+    return await this.request('textDocument/hover', params)
+  }
+
+  async textDocumentCompletion(params: LSP.CompletionParams) {
+    return await this.request('textDocument/completion', params)
+  }
+
+  attachPlugin(plugin: LanguageServerPlugin) {
+    this.plugins.push(plugin)
+  }
+
+  detachPlugin(plugin: LanguageServerPlugin) {
+    const i = this.plugins.indexOf(plugin)
+    if (i === -1) return
+    this.plugins.splice(i, 1)
+  }
+
+  private request<K extends keyof LSPRequestMap>(
+    method: K,
+    params: LSPRequestMap[K][0]
+  ): Promise<LSPRequestMap[K][1]> {
+    return this.client.request(method, params) as Promise<LSPRequestMap[K][1]>
+  }
+
+  private notify<K extends keyof LSPNotifyMap>(
+    method: K,
+    params: LSPNotifyMap[K]
+  ): void {
+    return this.client.notify(method, params)
+  }
+
+  private processNotification(notification: Notification) {
+    for (const plugin of this.plugins) plugin.processNotification(notification)
+  }
+}
--- a/src/editor/lsp/language.ts
+++ b/src/editor/lsp/language.ts
@ -0,0 +1,36 @@
+// Code mirror language implementation for kcl.
+
+import {
+  Language,
+  defineLanguageFacet,
+  LanguageSupport,
+} from '@codemirror/language'
+import { LanguageServerClient } from '.'
+import { kclPlugin } from './plugin'
+import type * as LSP from 'vscode-languageserver-protocol'
+import { parser as jsParser } from '@lezer/javascript'
+
+const data = defineLanguageFacet({})
+
+export interface LanguageOptions {
+  workspaceFolders: LSP.WorkspaceFolder[] | null
+  documentUri: string
+  client: LanguageServerClient
+}
+
+export default function kclLanguage(options: LanguageOptions): LanguageSupport {
+  // For now let's use the javascript parser.
+  // It works really well and has good syntax highlighting.
+  // We can use our lsp for the rest.
+  const lang = new Language(data, jsParser, [], 'kcl')
+
+  // Create our supporting extension.
+  const kclLsp = kclPlugin({
+    documentUri: options.documentUri,
+    workspaceFolders: options.workspaceFolders,
+    allowHTMLContent: true,
+    client: options.client,
+  })
+
+  return new LanguageSupport(lang, [kclLsp])
+}
--- a/src/editor/lsp/parser.ts
+++ b/src/editor/lsp/parser.ts
@ -0,0 +1,168 @@
+// Extends the codemirror Parser for kcl.
+
+import {
+  Parser,
+  Input,
+  TreeFragment,
+  PartialParse,
+  Tree,
+  NodeType,
+  NodeSet,
+} from '@lezer/common'
+import { LanguageServerClient } from '.'
+import { posToOffset } from './plugin'
+import { SemanticToken } from './semantic_tokens'
+import { DocInput } from '@codemirror/language'
+import { tags, styleTags } from '@lezer/highlight'
+
+export default class KclParser extends Parser {
+  private client: LanguageServerClient
+
+  constructor(client: LanguageServerClient) {
+    super()
+    this.client = client
+  }
+
+  createParse(
+    input: Input,
+    fragments: readonly TreeFragment[],
+    ranges: readonly { from: number; to: number }[]
+  ): PartialParse {
+    let parse: PartialParse = new Context(this, input, fragments, ranges)
+    return parse
+  }
+
+  getTokenTypes(): string[] {
+    return this.client.getServerCapabilities().semanticTokensProvider!.legend
+      .tokenTypes
+  }
+
+  getSemanticTokens(): SemanticToken[] {
+    return this.client.getSemanticTokens()
+  }
+}
+
+class Context implements PartialParse {
+  private parser: KclParser
+  private input: DocInput
+  private fragments: readonly TreeFragment[]
+  private ranges: readonly { from: number; to: number }[]
+
+  private nodeTypes: { [key: string]: NodeType }
+  stoppedAt: number = 0
+
+  private semanticTokens: SemanticToken[] = []
+  private currentLine: number = 0
+  private currentColumn: number = 0
+  private nodeSet: NodeSet
+
+  constructor(
+    /// The parser configuration used.
+    parser: KclParser,
+    input: Input,
+    fragments: readonly TreeFragment[],
+    ranges: readonly { from: number; to: number }[]
+  ) {
+    this.parser = parser
+    this.input = input as DocInput
+    this.fragments = fragments
+    this.ranges = ranges
+
+    // Iterate over the semantic token types and create a node type for each.
+    this.nodeTypes = {}
+    let nodeArray: NodeType[] = []
+    this.parser.getTokenTypes().forEach((tokenType, index) => {
+      const nodeType = NodeType.define({
+        id: index,
+        name: tokenType,
+        // props: [this.styleTags],
+      })
+      this.nodeTypes[tokenType] = nodeType
+      nodeArray.push(nodeType)
+    })
+
+    this.semanticTokens = this.parser.getSemanticTokens()
+    const styles = styleTags({
+      number: tags.number,
+      variable: tags.variableName,
+      operator: tags.operator,
+      keyword: tags.keyword,
+      string: tags.string,
+      comment: tags.comment,
+      function: tags.function(tags.variableName),
+    })
+    this.nodeSet = new NodeSet(nodeArray).extend(styles)
+  }
+
+  get parsedPos(): number {
+    return 0
+  }
+
+  advance(): Tree | null {
+    if (this.semanticTokens.length === 0) {
+      return new Tree(NodeType.none, [], [], 0)
+    }
+    const tree = this.createTree(this.semanticTokens[0], 0)
+    this.stoppedAt = this.input.doc.length
+    return tree
+  }
+
+  createTree(token: SemanticToken, index: number): Tree {
+    const changedLine = token.delta_line !== 0
+    this.currentLine += token.delta_line
+    if (changedLine) {
+      this.currentColumn = 0
+    }
+    this.currentColumn += token.delta_start
+
+    // Let's get our position relative to the start of the file.
+    let currentPosition = posToOffset(this.input.doc, {
+      line: this.currentLine,
+      character: this.currentColumn,
+    })
+
+    const nodeType = this.nodeSet.types[this.nodeTypes[token.token_type].id]
+
+    if (currentPosition === undefined) {
+      // This is bad and weird.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    if (index >= this.semanticTokens.length - 1) {
+      // We have no children.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    const nextIndex = index + 1
+    const nextToken = this.semanticTokens[nextIndex]
+    const changedLineNext = nextToken.delta_line !== 0
+    const nextLine = this.currentLine + nextToken.delta_line
+    const nextColumn = changedLineNext
+      ? nextToken.delta_start
+      : this.currentColumn + nextToken.delta_start
+    const nextPosition = posToOffset(this.input.doc, {
+      line: nextLine,
+      character: nextColumn,
+    })
+
+    if (nextPosition === undefined) {
+      // This is bad and weird.
+      return new Tree(nodeType, [], [], token.length)
+    }
+
+    // Let's get the
+
+    return new Tree(
+      nodeType,
+      [this.createTree(nextToken, nextIndex)],
+
+      // The positions (offsets relative to the start of this tree) of the children.
+      [nextPosition - currentPosition],
+      token.length
+    )
+  }
+
+  stopAt(pos: number) {
+    this.stoppedAt = pos
+  }
+}
--- a/src/editor/lsp/plugin.ts
+++ b/src/editor/lsp/plugin.ts
@ -0,0 +1,360 @@
+import { autocompletion, completeFromList } from '@codemirror/autocomplete'
+import { setDiagnostics } from '@codemirror/lint'
+import { Facet } from '@codemirror/state'
+import {
+  EditorView,
+  ViewPlugin,
+  Tooltip,
+  hoverTooltip,
+  tooltips,
+} from '@codemirror/view'
+import {
+  DiagnosticSeverity,
+  CompletionItemKind,
+  CompletionTriggerKind,
+} from 'vscode-languageserver-protocol'
+
+import type {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete'
+import type { PublishDiagnosticsParams } from 'vscode-languageserver-protocol'
+import type { ViewUpdate, PluginValue } from '@codemirror/view'
+import type { Text } from '@codemirror/state'
+import type * as LSP from 'vscode-languageserver-protocol'
+import { LanguageServerClient, Notification } from '.'
+import { Marked } from '@ts-stack/markdown'
+
+const changesDelay = 500
+
+const CompletionItemKindMap = Object.fromEntries(
+  Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
+) as Record<CompletionItemKind, string>
+
+const useLast = (values: readonly any[]) => values.reduce((_, v) => v, '')
+const documentUri = Facet.define<string, string>({ combine: useLast })
+const languageId = Facet.define<string, string>({ combine: useLast })
+const client = Facet.define<LanguageServerClient, LanguageServerClient>({
+  combine: useLast,
+})
+
+export interface LanguageServerOptions {
+  workspaceFolders: LSP.WorkspaceFolder[] | null
+  documentUri: string
+  allowHTMLContent: boolean
+  client: LanguageServerClient
+}
+
+export class LanguageServerPlugin implements PluginValue {
+  public client: LanguageServerClient
+
+  private documentUri: string
+  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)
+
+    this.initialize({
+      documentText: this.view.state.doc.toString(),
+    })
+  }
+
+  update({ docChanged }: ViewUpdate) {
+    if (!docChanged) return
+    if (this.changesTimeout) clearTimeout(this.changesTimeout)
+    this.changesTimeout = window.setTimeout(() => {
+      this.sendChange({
+        documentText: this.view.state.doc.toString(),
+      })
+    }, changesDelay)
+  }
+
+  destroy() {
+    this.client.detachPlugin(this)
+  }
+
+  async initialize({ documentText }: { documentText: string }) {
+    if (this.client.initializePromise) {
+      await this.client.initializePromise
+    }
+    this.client.textDocumentDidOpen({
+      textDocument: {
+        uri: this.documentUri,
+        languageId: this.languageId,
+        text: documentText,
+        version: this.documentVersion,
+      },
+    })
+  }
+
+  async sendChange({ documentText }: { documentText: string }) {
+    if (!this.client.ready) return
+    try {
+      await this.client.textDocumentDidChange({
+        textDocument: {
+          uri: this.documentUri,
+          version: this.documentVersion++,
+        },
+        contentChanges: [{ text: documentText }],
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  requestDiagnostics(view: EditorView) {
+    this.sendChange({ documentText: view.state.doc.toString() })
+  }
+
+  async requestHoverTooltip(
+    view: EditorView,
+    { line, character }: { line: number; character: number }
+  ): Promise<Tooltip | null> {
+    if (
+      !this.client.ready ||
+      !this.client.getServerCapabilities().hoverProvider
+    )
+      return null
+
+    this.sendChange({ documentText: view.state.doc.toString() })
+    const result = await this.client.textDocumentHover({
+      textDocument: { uri: this.documentUri },
+      position: { line, character },
+    })
+    if (!result) return null
+    const { contents, range } = result
+    let pos = posToOffset(view.state.doc, { line, character })!
+    let end: number | undefined
+    if (range) {
+      pos = posToOffset(view.state.doc, range.start)!
+      end = posToOffset(view.state.doc, range.end)
+    }
+    if (pos === null) return null
+    const dom = document.createElement('div')
+    dom.classList.add('documentation')
+    if (this.allowHTMLContent) dom.innerHTML = formatContents(contents)
+    else dom.textContent = formatContents(contents)
+    return { pos, end, create: (view) => ({ dom }), above: true }
+  }
+
+  async requestCompletion(
+    context: CompletionContext,
+    { line, character }: { line: number; character: number },
+    {
+      triggerKind,
+      triggerCharacter,
+    }: {
+      triggerKind: CompletionTriggerKind
+      triggerCharacter: string | undefined
+    }
+  ): Promise<CompletionResult | null> {
+    if (
+      !this.client.ready ||
+      !this.client.getServerCapabilities().completionProvider
+    )
+      return null
+
+    this.sendChange({
+      documentText: context.state.doc.toString(),
+    })
+
+    const result = await this.client.textDocumentCompletion({
+      textDocument: { uri: this.documentUri },
+      position: { line, character },
+      context: {
+        triggerKind,
+        triggerCharacter,
+      },
+    })
+
+    if (!result) return null
+
+    const items = 'items' in result ? result.items : result
+
+    let options = items.map(
+      ({
+        detail,
+        label,
+        labelDetails,
+        kind,
+        textEdit,
+        documentation,
+        deprecated,
+        insertText,
+        insertTextFormat,
+        sortText,
+        filterText,
+      }) => {
+        const completion: Completion & {
+          filterText: string
+          sortText?: string
+          apply: string
+        } = {
+          label,
+          detail: labelDetails ? labelDetails.detail : detail,
+          apply: label,
+          type: kind && CompletionItemKindMap[kind].toLowerCase(),
+          sortText: sortText ?? label,
+          filterText: filterText ?? label,
+        }
+        if (documentation) {
+          completion.info = () => {
+            const htmlString = formatContents(documentation)
+            const htmlNode = document.createElement('div')
+            htmlNode.style.display = 'contents'
+            htmlNode.innerHTML = htmlString
+            return { dom: htmlNode }
+          }
+        }
+
+        return completion
+      }
+    )
+
+    return completeFromList(options)(context)
+  }
+
+  processNotification(notification: Notification) {
+    try {
+      switch (notification.method) {
+        case 'textDocument/publishDiagnostics':
+          this.processDiagnostics(notification.params)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  processDiagnostics(params: PublishDiagnosticsParams) {
+    if (params.uri !== this.documentUri) return
+
+    const diagnostics = params.diagnostics
+      .map(({ range, message, severity }) => ({
+        from: posToOffset(this.view.state.doc, range.start)!,
+        to: posToOffset(this.view.state.doc, range.end)!,
+        severity: (
+          {
+            [DiagnosticSeverity.Error]: 'error',
+            [DiagnosticSeverity.Warning]: 'warning',
+            [DiagnosticSeverity.Information]: 'info',
+            [DiagnosticSeverity.Hint]: 'info',
+          } as const
+        )[severity!],
+        message,
+      }))
+      .filter(
+        ({ from, to }) =>
+          from !== null && to !== null && from !== undefined && to !== undefined
+      )
+      .sort((a, b) => {
+        switch (true) {
+          case a.from < b.from:
+            return -1
+          case a.from > b.from:
+            return 1
+        }
+        return 0
+      })
+
+    this.view.dispatch(setDiagnostics(this.view.state, diagnostics))
+  }
+}
+
+export function kclPlugin(options: LanguageServerOptions) {
+  let plugin: LanguageServerPlugin | null = null
+
+  return [
+    client.of(options.client),
+    documentUri.of(options.documentUri),
+    languageId.of('kcl'),
+    ViewPlugin.define(
+      (view) =>
+        (plugin = new LanguageServerPlugin(view, options.allowHTMLContent))
+    ),
+    hoverTooltip(
+      (view, pos) =>
+        plugin?.requestHoverTooltip(view, offsetToPos(view.state.doc, pos)) ??
+        null
+    ),
+    tooltips({
+      position: 'absolute',
+    }),
+    autocompletion({
+      override: [
+        async (context) => {
+          if (plugin == null) return null
+
+          const { state, pos, explicit } = context
+          const line = state.doc.lineAt(pos)
+          let trigKind: CompletionTriggerKind = CompletionTriggerKind.Invoked
+          let trigChar: string | undefined
+          if (
+            !explicit &&
+            plugin.client
+              .getServerCapabilities()
+              .completionProvider?.triggerCharacters?.includes(
+                line.text[pos - line.from - 1]
+              )
+          ) {
+            trigKind = CompletionTriggerKind.TriggerCharacter
+            trigChar = line.text[pos - line.from - 1]
+          }
+          if (
+            trigKind === CompletionTriggerKind.Invoked &&
+            !context.matchBefore(/\w+$/)
+          ) {
+            return null
+          }
+          return await plugin.requestCompletion(
+            context,
+            offsetToPos(state.doc, pos),
+            {
+              triggerKind: trigKind,
+              triggerCharacter: trigChar,
+            }
+          )
+        },
+      ],
+    }),
+  ]
+}
+
+export function posToOffset(
+  doc: Text,
+  pos: { line: number; character: number }
+): number | undefined {
+  if (pos.line >= doc.lines) return
+  const offset = doc.line(pos.line + 1).from + pos.character
+  if (offset > doc.length) return
+  return offset
+}
+
+function offsetToPos(doc: Text, offset: number) {
+  const line = doc.lineAt(offset)
+  return {
+    line: line.number - 1,
+    character: offset - line.from,
+  }
+}
+
+function formatContents(
+  contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[]
+): string {
+  if (Array.isArray(contents)) {
+    return contents.map((c) => formatContents(c) + '\n\n').join('')
+  } else if (typeof contents === 'string') {
+    return Marked.parse(contents)
+  } else {
+    return Marked.parse(contents.value)
+  }
+}
--- a/src/editor/lsp/semantic_tokens.ts
+++ b/src/editor/lsp/semantic_tokens.ts
@ -0,0 +1,51 @@
+import type * as LSP from 'vscode-languageserver-protocol'
+
+export class SemanticToken {
+  delta_line: number
+  delta_start: number
+  length: number
+  token_type: string
+  token_modifiers_bitset: string
+
+  constructor(
+    delta_line = 0,
+    delta_start = 0,
+    length = 0,
+    token_type = '',
+    token_modifiers_bitset = ''
+  ) {
+    this.delta_line = delta_line
+    this.delta_start = delta_start
+    this.length = length
+    this.token_type = token_type
+    this.token_modifiers_bitset = token_modifiers_bitset
+  }
+}
+
+export function deserializeTokens(
+  data: number[],
+  semanticTokensProvider?: LSP.SemanticTokensOptions
+): SemanticToken[] {
+  if (!semanticTokensProvider) {
+    return []
+  }
+  // Check if data length is divisible by 5
+  if (data.length % 5 !== 0) {
+    throw new Error('Length is not divisible by 5')
+  }
+
+  const tokens = []
+  for (let i = 0; i < data.length; i += 5) {
+    tokens.push(
+      new SemanticToken(
+        data[i],
+        data[i + 1],
+        data[i + 2],
+        semanticTokensProvider.legend.tokenTypes[data[i + 3]],
+        semanticTokensProvider.legend.tokenModifiers[data[i + 4]]
+      )
+    )
+  }
+
+  return tokens
+}
--- a/src/editor/lsp/server-capability-registration.ts
+++ b/src/editor/lsp/server-capability-registration.ts
@ -0,0 +1,80 @@
+import {
+  Registration,
+  ServerCapabilities,
+  Unregistration,
+} from 'vscode-languageserver-protocol'
+
+interface IFlexibleServerCapabilities extends ServerCapabilities {
+  [key: string]: any
+}
+
+interface IMethodServerCapabilityProviderDictionary {
+  [key: string]: string
+}
+
+const ServerCapabilitiesProviders: IMethodServerCapabilityProviderDictionary = {
+  'textDocument/hover': 'hoverProvider',
+  'textDocument/completion': 'completionProvider',
+  'textDocument/signatureHelp': 'signatureHelpProvider',
+  'textDocument/definition': 'definitionProvider',
+  'textDocument/typeDefinition': 'typeDefinitionProvider',
+  'textDocument/implementation': 'implementationProvider',
+  'textDocument/references': 'referencesProvider',
+  'textDocument/documentHighlight': 'documentHighlightProvider',
+  'textDocument/documentSymbol': 'documentSymbolProvider',
+  'textDocument/workspaceSymbol': 'workspaceSymbolProvider',
+  'textDocument/codeAction': 'codeActionProvider',
+  'textDocument/codeLens': 'codeLensProvider',
+  'textDocument/documentFormatting': 'documentFormattingProvider',
+  'textDocument/documentRangeFormatting': 'documentRangeFormattingProvider',
+  'textDocument/documentOnTypeFormatting': 'documentOnTypeFormattingProvider',
+  'textDocument/rename': 'renameProvider',
+  'textDocument/documentLink': 'documentLinkProvider',
+  'textDocument/color': 'colorProvider',
+  'textDocument/foldingRange': 'foldingRangeProvider',
+  'textDocument/declaration': 'declarationProvider',
+  'textDocument/executeCommand': 'executeCommandProvider',
+}
+
+function registerServerCapability(
+  serverCapabilities: ServerCapabilities,
+  registration: Registration
+): ServerCapabilities {
+  const serverCapabilitiesCopy = JSON.parse(
+    JSON.stringify(serverCapabilities)
+  ) as IFlexibleServerCapabilities
+  const { method, registerOptions } = registration
+  const providerName = ServerCapabilitiesProviders[method]
+
+  if (providerName) {
+    if (!registerOptions) {
+      serverCapabilitiesCopy[providerName] = true
+    } else {
+      serverCapabilitiesCopy[providerName] = Object.assign(
+        {},
+        JSON.parse(JSON.stringify(registerOptions))
+      )
+    }
+  } else {
+    throw new Error('Could not register server capability.')
+  }
+
+  return serverCapabilitiesCopy
+}
+
+function unregisterServerCapability(
+  serverCapabilities: ServerCapabilities,
+  unregistration: Unregistration
+): ServerCapabilities {
+  const serverCapabilitiesCopy = JSON.parse(
+    JSON.stringify(serverCapabilities)
+  ) as IFlexibleServerCapabilities
+  const { method } = unregistration
+  const providerName = ServerCapabilitiesProviders[method]
+
+  delete serverCapabilitiesCopy[providerName]
+
+  return serverCapabilitiesCopy
+}
+
+export { registerServerCapability, unregisterServerCapability }
--- a/src/editor/lsp/server.ts
+++ b/src/editor/lsp/server.ts
@ -0,0 +1,42 @@
+import init, {
+  InitOutput,
+  lsp_run,
+  ServerConfig,
+} 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
+  readonly #fromServer: FromServer
+
+  private constructor(
+    initOutput: InitOutput,
+    intoServer: IntoServer,
+    fromServer: FromServer
+  ) {
+    this.initOutput = initOutput
+    this.#intoServer = intoServer
+    this.#fromServer = fromServer
+  }
+
+  static async initialize(
+    intoServer: IntoServer,
+    fromServer: FromServer
+  ): Promise<Server> {
+    if (null == server) {
+      const initOutput = await init()
+      server = new Server(initOutput, intoServer, fromServer)
+    } else {
+      console.warn('Server already initialized; ignoring')
+    }
+    return server
+  }
+
+  async start(): Promise<void> {
+    const config = new ServerConfig(this.#intoServer, this.#fromServer)
+    await lsp_run(config)
+  }
+}
--- a/src/editor/lsp/tracer.ts
+++ b/src/editor/lsp/tracer.ts
@ -0,0 +1,21 @@
+import { Message } from 'vscode-languageserver-protocol'
+
+const env = import.meta.env.MODE
+
+export default class Tracer {
+  static client(message: string): void {
+    // These are really noisy, so we have a special env var for them.
+    if (env === 'lsp_tracing') {
+      console.log('lsp client message', message)
+    }
+  }
+
+  static server(input: string | Message): void {
+    // These are really noisy, so we have a special env var for them.
+    if (env === 'lsp_tracing') {
+      const message: string =
+        typeof input === 'string' ? input : JSON.stringify(input)
+      console.log('lsp server message', message)
+    }
+  }
+}
--- a/src/env.ts
+++ b/src/env.ts
@ -8,6 +8,9 @@ export const VITE_KC_API_WS_MODELING_URL = import.meta.env
  .VITE_KC_API_WS_MODELING_URL
 export const VITE_KC_API_BASE_URL = import.meta.env.VITE_KC_API_BASE_URL
 export const VITE_KC_SITE_BASE_URL = import.meta.env.VITE_KC_SITE_BASE_URL
+export const VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS = import.meta.env
+  .VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS
 export const VITE_KC_CONNECTION_TIMEOUT_MS = import.meta.env
  .VITE_KC_CONNECTION_TIMEOUT_MS
+export const VITE_KC_SENTRY_DSN = import.meta.env.VITE_KC_SENTRY_DSN
 export const TEST = import.meta.env.TEST
--- a/src/hooks/useAuthMachine.tsx
+++ b/src/hooks/useAuthMachine.tsx
@ -1,54 +0,0 @@
-import { createActorContext } from '@xstate/react'
-import { useNavigate } from 'react-router-dom'
-import { paths } from '../Router'
-import { authMachine, TOKEN_PERSIST_KEY } from '../lib/authMachine'
-import withBaseUrl from '../lib/withBaseURL'
-
-export const AuthMachineContext = createActorContext(authMachine)
-
-export const GlobalStateProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const navigate = useNavigate()
-  return (
-    <AuthMachineContext.Provider
-      machine={() =>
-        authMachine.withConfig({
-          actions: {
-            goToSignInPage: () => {
-              navigate(paths.SIGN_IN)
-              logout()
-            },
-            goToIndexPage: () => navigate(paths.INDEX),
-          },
-        })
-      }
-    >
-      {children}
-    </AuthMachineContext.Provider>
-  )
-}
-
-export function useAuthMachine<T>(
-  selector: (
-    state: Parameters<Parameters<typeof AuthMachineContext.useSelector>[0]>[0]
-  ) => T = () => null as T
-): [T, ReturnType<typeof AuthMachineContext.useActor>[1]] {
-  // useActor api normally `[state, send] = useActor`
-  // we're only interested in send because of the selector
-  const send = AuthMachineContext.useActor()[1]
-
-  const selection = AuthMachineContext.useSelector(selector)
-  return [selection, send]
-}
-
-export function logout() {
-  const url = withBaseUrl('/logout')
-  localStorage.removeItem(TOKEN_PERSIST_KEY)
-  return fetch(url, {
-    method: 'POST',
-    credentials: 'include',
-  })
-}
--- a/src/hooks/useCommandsContext.ts
+++ b/src/hooks/useCommandsContext.ts
@ -0,0 +1,6 @@
+import { CommandsContext } from 'components/CommandBar'
+import { useContext } from 'react'
+
+export const useCommandsContext = () => {
+  return useContext(CommandsContext)
+}
--- a/src/hooks/useGlobalStateContext.ts
+++ b/src/hooks/useGlobalStateContext.ts
@ -0,0 +1,6 @@
+import { GlobalStateContext } from 'components/GlobalStateProvider'
+import { useContext } from 'react'
+
+export const useGlobalStateContext = () => {
+  return useContext(GlobalStateContext)
+}
--- a/src/hooks/useStateMachineCommands.ts
+++ b/src/hooks/useStateMachineCommands.ts
@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { AnyStateMachine, StateFrom } from 'xstate'
+import { Command, CommandBarMeta, createMachineCommand } from '../lib/commands'
+import { useCommandsContext } from './useCommandsContext'
+
+interface UseStateMachineCommandsArgs<T extends AnyStateMachine> {
+  state: StateFrom<T>
+  send: Function
+  commandBarMeta?: CommandBarMeta
+  commands: Command[]
+  owner: string
+}
+
+export default function useStateMachineCommands<T extends AnyStateMachine>({
+  state,
+  send,
+  commandBarMeta,
+  owner,
+}: UseStateMachineCommandsArgs<T>) {
+  const { addCommands, removeCommands } = useCommandsContext()
+
+  useEffect(() => {
+    const newCommands = state.nextEvents
+      .filter((e) => !['done.', 'error.'].some((n) => e.includes(n)))
+      .map((type) =>
+        createMachineCommand<T>({
+          type,
+          state,
+          send,
+          commandBarMeta,
+          owner,
+        })
+      )
+      .filter((c) => c !== null) as Command[]
+
+    addCommands(newCommands)
+
+    return () => {
+      removeCommands(newCommands)
+    }
+  }, [state])
+}
--- a/src/hooks/useTauriBoot.ts
+++ b/src/hooks/useTauriBoot.ts
@ -1,67 +0,0 @@
-import { useEffect } from 'react'
-import { useStore } from '../useStore'
-import { parse } from 'toml'
-import {
-  createDir,
-  BaseDirectory,
-  readDir,
-  readTextFile,
-} from '@tauri-apps/api/fs'
-
-export const useTauriBoot = () => {
-  const { defaultDir, setDefaultDir, setHomeMenuItems } = useStore((s) => ({
-    defaultDir: s.defaultDir,
-    setDefaultDir: s.setDefaultDir,
-    setHomeMenuItems: s.setHomeMenuItems,
-  }))
-  useEffect(() => {
-    const isTauri = (window as any).__TAURI__
-    if (!isTauri) return
-    const run = async () => {
-      if (!defaultDir.base) {
-        createDir('puffin-projects/example', {
-          dir: BaseDirectory.Home,
-          recursive: true,
-        })
-        setDefaultDir({
-          base: BaseDirectory.Home,
-          dir: 'puffin-projects',
-        })
-      } else {
-        const directoryResult = await readDir(defaultDir.dir, {
-          dir: defaultDir.base,
-          recursive: true,
-        })
-        const puffinProjects = directoryResult.filter(
-          (file) =>
-            !file?.name?.startsWith('.') &&
-            file?.children?.find((child) => child?.name === 'wax.toml')
-        )
-
-        const tomlFiles = await Promise.all(
-          puffinProjects.map(async (file) => {
-            const parsedToml = parse(
-              await readTextFile(`${file.path}/wax.toml`, {
-                dir: defaultDir.base,
-              })
-            )
-            const mainPath = parsedToml?.package?.main
-            const projectName = parsedToml?.package?.name
-            return {
-              file,
-              mainPath,
-              projectName,
-            }
-          })
-        )
-        setHomeMenuItems(
-          tomlFiles.map(({ file, mainPath, projectName }) => ({
-            name: projectName,
-            path: mainPath ? `${file.path}/${mainPath}` : file.path,
-          }))
-        )
-      }
-    }
-    run()
-  }, [])
-}
--- a/src/index.css
+++ b/src/index.css
@ -82,12 +82,36 @@ code {
    monospace;
 }

+.full-height-subtract {
+  --height-subtract: 2.25rem;
+  height: 100%;
+  max-height: calc(100% - var(--height-subtract));
+}
+
 #code-mirror-override .cm-editor {
-  @apply bg-transparent;
+  @apply h-full bg-transparent;
+}
+
+#code-mirror-override .cm-scroller {
+  @apply h-full;
+}
+
+#code-mirror-override .cm-scroller::-webkit-scrollbar {
+  @apply h-0;
+}
+
+#code-mirror-override .cm-activeLine,
+#code-mirror-override .cm-activeLineGutter {
+  @apply bg-liquid-10/50;
+}
+
+.dark #code-mirror-override .cm-activeLine,
+.dark #code-mirror-override .cm-activeLineGutter {
+  @apply bg-liquid-80/50;
 }

 #code-mirror-override .cm-gutters {
-  @apply bg-chalkboard-10/50;
+  @apply bg-chalkboard-10/30;
 }

 .dark #code-mirror-override .cm-gutters {
@ -99,16 +123,68 @@ code {
 }
 #code-mirror-override .cm-cursor {
  display: block;
-  width: 200px;
-  background: linear-gradient(
-    to right,
-    rgb(0, 55, 94) 0%,
-    #0084e2ff 2%,
-    #0084e255 5%,
-    transparent 100%
-  );
+  width: 1ch;
+  @apply bg-liquid-40 mix-blend-multiply;
+
+  animation: blink 2s ease-out infinite;
+}
+
+.dark #code-mirror-override .cm-cursor {
+  @apply bg-liquid-50;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.75;
+  }
 }

 .react-json-view {
  @apply bg-transparent !important;
 }
+
+#code-mirror-override .cm-tooltip {
+  @apply text-xs shadow-md;
+  @apply bg-chalkboard-10 text-chalkboard-80;
+  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
+}
+
+.dark #code-mirror-override .cm-tooltip {
+  @apply bg-chalkboard-110 text-chalkboard-40;
+  @apply border-chalkboard-70/20 border-l-liquid-70;
+}
+
+#code-mirror-override .cm-tooltip-hover {
+  @apply py-1 px-2 w-max max-w-md;
+}
+
+#code-mirror-override .cm-completionInfo {
+  @apply px-4 rounded-l-none;
+  @apply bg-chalkboard-10 text-liquid-90;
+  @apply border-liquid-40/30;
+}
+
+.dark #code-mirror-override .cm-completionInfo {
+  @apply bg-liquid-120 text-liquid-50;
+  @apply border-liquid-90/60;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li {
+  @apply px-2 py-1;
+}
+#code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
+  @apply bg-liquid-10 text-liquid-110;
+}
+.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
+  @apply bg-liquid-100 text-liquid-20;
+}
+
+#code-mirror-override .cm-content {
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -2,23 +2,10 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import reportWebVitals from './reportWebVitals'
 import { Toaster } from 'react-hot-toast'
-import { Themes, useStore } from './useStore'
 import { Router } from './Router'
 import { HotkeysProvider } from 'react-hotkeys-hook'
-import { getSystemTheme } from './lib/getSystemTheme'

 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-function setThemeClass(state: Partial<{ theme: Themes }>) {
-  const systemTheme = state.theme === Themes.System && getSystemTheme()
-  if (state.theme === Themes.Dark || systemTheme === Themes.Dark) {
-    document.body.classList.add('dark')
-  } else {
-    document.body.classList.remove('dark')
-  }
-}
-const { theme } = useStore.getState()
-setThemeClass({ theme })
-useStore.subscribe(setThemeClass)

 root.render(
  <HotkeysProvider>
--- a/src/lang/abstractSyntaxTree.test.ts
+++ b/src/lang/abstractSyntaxTree.test.ts
@ -179,6 +179,9 @@ const newVar = myVar + 1
              name: 'aIdentifier',
            },
          ],
+          function: {
+            type: 'InMemory',
+          },
          optional: false,
        },
      },
@ -211,7 +214,6 @@ describe('testing function declaration', () => {
              type: 'FunctionExpression',
              start: 11,
              end: 19,
-              id: null,
              params: [],
              body: {
                start: 17,
@ -250,7 +252,6 @@ describe('testing function declaration', () => {
              type: 'FunctionExpression',
              start: 11,
              end: 39,
-              id: null,
              params: [
                {
                  type: 'Identifier',
@ -326,7 +327,6 @@ const myVar = funcN(1, 2)`
              type: 'FunctionExpression',
              start: 11,
              end: 37,
-              id: null,
              params: [
                {
                  type: 'Identifier',
@ -416,6 +416,9 @@ const myVar = funcN(1, 2)`
                  raw: '2',
                },
              ],
+              function: {
+                type: 'InMemory',
+              },
              optional: false,
            },
          },
@ -485,6 +488,7 @@ describe('testing pipe operator special', () => {
                      ],
                    },
                  ],
+                  function: expect.any(Object),
                  optional: false,
                },
                {
@ -521,6 +525,7 @@ describe('testing pipe operator special', () => {
                    },
                    { type: 'PipeSubstitution', start: 59, end: 60 },
                  ],
+                  function: expect.any(Object),
                  optional: false,
                },
                {
@ -593,6 +598,7 @@ describe('testing pipe operator special', () => {
                    },
                    { type: 'PipeSubstitution', start: 105, end: 106 },
                  ],
+                  function: expect.any(Object),
                  optional: false,
                },
                {
@ -629,6 +635,7 @@ describe('testing pipe operator special', () => {
                    },
                    { type: 'PipeSubstitution', start: 128, end: 129 },
                  ],
+                  function: expect.any(Object),
                  optional: false,
                },
                {
@ -651,6 +658,9 @@ describe('testing pipe operator special', () => {
                    },
                    { type: 'PipeSubstitution', start: 143, end: 144 },
                  ],
+                  function: {
+                    type: 'InMemory',
+                  },
                  optional: false,
                },
              ],
@ -730,6 +740,9 @@ describe('testing pipe operator special', () => {
                      end: 35,
                    },
                  ],
+                  function: {
+                    type: 'InMemory',
+                  },
                  optional: false,
                },
              ],
@ -1550,7 +1563,10 @@ const key = 'c'`
      type: 'NoneCodeNode',
      start: code.indexOf('\n// this is a comment'),
      end: code.indexOf('const key'),
-      value: '\n// this is a comment\n',
+      value: {
+        type: 'blockComment',
+        value: 'this is a comment',
+      },
    }
    const { nonCodeMeta } = parser_wasm(code)
    expect(nonCodeMeta.noneCodeNodes[0]).toEqual(nonCodeMetaInstance)
@ -1560,7 +1576,9 @@ const key = 'c'`
    const { nonCodeMeta: nonCodeMeta2 } = parser_wasm(
      codeWithExtraStartWhitespace
    )
-    expect(nonCodeMeta2.noneCodeNodes[0].value).toBe(nonCodeMetaInstance.value)
+    expect(nonCodeMeta2.noneCodeNodes[0].value).toStrictEqual(
+      nonCodeMetaInstance.value
+    )
    expect(nonCodeMeta2.noneCodeNodes[0].start).not.toBe(
      nonCodeMetaInstance.start
    )
@ -1583,7 +1601,10 @@ const key = 'c'`
      type: 'NoneCodeNode',
      start: 106,
      end: 166,
-      value: ' /* this is\n      a comment\n      spanning a few lines */\n  ',
+      value: {
+        type: 'blockComment',
+        value: 'this is\n      a comment\n      spanning a few lines',
+      },
    })
  })
  it('comments in a pipe expression', () => {
@ -1603,7 +1624,10 @@ const key = 'c'`
      type: 'NoneCodeNode',
      start: 125,
      end: 141,
-      value: '\n// a comment\n  ',
+      value: {
+        type: 'blockComment',
+        value: 'a comment',
+      },
    })
  })
 })
@ -1627,6 +1651,7 @@ describe('test UnaryExpression', () => {
          { type: 'Literal', start: 19, end: 20, value: 4, raw: '4' },
          { type: 'Literal', start: 22, end: 25, value: 100, raw: '100' },
        ],
+        function: expect.any(Object),
        optional: false,
      },
    })
@ -1660,10 +1685,12 @@ describe('testing nested call expressions', () => {
              { type: 'Literal', start: 34, end: 35, value: 5, raw: '5' },
              { type: 'Literal', start: 37, end: 38, value: 3, raw: '3' },
            ],
+            function: expect.any(Object),
            optional: false,
          },
        },
      ],
+      function: expect.any(Object),
      optional: false,
    })
  })
@ -1695,6 +1722,7 @@ describe('should recognise callExpresions in binaryExpressions', () => {
            },
            { type: 'PipeSubstitution', start: 25, end: 26 },
          ],
+          function: expect.any(Object),
          optional: false,
        },
        right: { type: 'Literal', value: 1, raw: '1', start: 30, end: 31 },
--- a/src/lang/abstractSyntaxTree.ts
+++ b/src/lang/abstractSyntaxTree.ts
@ -3,7 +3,7 @@ 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/bindings/KclError'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'

 export const rangeTypeFix = (ranges: number[][]): [number, number][] =>
  ranges.map(([start, end]) => [start, end])
@ -16,10 +16,8 @@ export const parser_wasm = (code: string): Program => {
    const parsed: RustKclError = JSON.parse(e.toString())
    const kclError = new KCLError(
      parsed.kind,
-      parsed.kind === 'invalid_expression' ? parsed.kind : parsed.msg,
-      parsed.kind === 'invalid_expression'
-        ? [[parsed.start, parsed.end]]
-        : rangeTypeFix(parsed.sourceRanges)
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
    )

    console.log(kclError)
@ -36,10 +34,8 @@ export async function asyncParser(code: string): Promise<Program> {
    const parsed: RustKclError = JSON.parse(e.toString())
    const kclError = new KCLError(
      parsed.kind,
-      parsed.kind === 'invalid_expression' ? parsed.kind : parsed.msg,
-      parsed.kind === 'invalid_expression'
-        ? [[parsed.start, parsed.end]]
-        : rangeTypeFix(parsed.sourceRanges)
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
    )

    console.log(kclError)
--- a/src/lang/abstractSyntaxTreeTypes.ts
+++ b/src/lang/abstractSyntaxTreeTypes.ts
@ -1,20 +1,20 @@
-export type { Program } from '../wasm-lib/bindings/Program'
-export type { Value } from '../wasm-lib/bindings/Value'
-export type { ObjectExpression } from '../wasm-lib/bindings/ObjectExpression'
-export type { MemberExpression } from '../wasm-lib/bindings/MemberExpression'
-export type { PipeExpression } from '../wasm-lib/bindings/PipeExpression'
-export type { VariableDeclaration } from '../wasm-lib/bindings/VariableDeclaration'
-export type { PipeSubstitution } from '../wasm-lib/bindings/PipeSubstitution'
-export type { Identifier } from '../wasm-lib/bindings/Identifier'
-export type { UnaryExpression } from '../wasm-lib/bindings/UnaryExpression'
-export type { BinaryExpression } from '../wasm-lib/bindings/BinaryExpression'
-export type { ReturnStatement } from '../wasm-lib/bindings/ReturnStatement'
-export type { ExpressionStatement } from '../wasm-lib/bindings/ExpressionStatement'
-export type { CallExpression } from '../wasm-lib/bindings/CallExpression'
-export type { VariableDeclarator } from '../wasm-lib/bindings/VariableDeclarator'
-export type { BinaryPart } from '../wasm-lib/bindings/BinaryPart'
-export type { Literal } from '../wasm-lib/bindings/Literal'
-export type { ArrayExpression } from '../wasm-lib/bindings/ArrayExpression'
+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'
--- a/src/lang/errors.ts
+++ b/src/lang/errors.ts
@ -1,5 +1,5 @@
 import { Diagnostic } from '@codemirror/lint'
-import { KclError as RustKclError } from '../wasm-lib/bindings/KclError'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'

 type ExtractKind<T> = T extends { kind: infer K } ? K : never
 export class KCLError {
--- a/src/lang/executor.ts
+++ b/src/lang/executor.ts
@ -4,10 +4,10 @@ import {
  ArtifactMap,
  SourceRangeMap,
 } from './std/engineConnection'
-import { ProgramReturn } from '../wasm-lib/bindings/ProgramReturn'
+import { ProgramReturn } from '../wasm-lib/kcl/bindings/ProgramReturn'
 import { execute_wasm } from '../wasm-lib/pkg/wasm_lib'
 import { KCLError } from './errors'
-import { KclError as RustKclError } from '../wasm-lib/bindings/KclError'
+import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
 import { rangeTypeFix } from './abstractSyntaxTree'

 export type SourceRange = [number, number]
@ -146,10 +146,8 @@ export const _executor = async (
    const parsed: RustKclError = JSON.parse(e.toString())
    const kclError = new KCLError(
      parsed.kind,
-      parsed.kind === 'invalid_expression' ? parsed.kind : parsed.msg,
-      parsed.kind === 'invalid_expression'
-        ? [[parsed.start, parsed.end]]
-        : rangeTypeFix(parsed.sourceRanges)
+      parsed.msg,
+      rangeTypeFix(parsed.sourceRanges)
    )

    console.log(kclError)
--- a/src/lang/modifyAst.ts
+++ b/src/lang/modifyAst.ts
@ -36,14 +36,14 @@ export function addSketchTo(
  const _node = { ...node }
  const _name = name || findUniqueName(node, 'part')

-  const startSketchAt = createCallExpression('startSketchAt', [
+  const startSketchAt = createCallExpressionStdLib('startSketchAt', [
    createLiteral('default'),
  ])
  const rotate = createCallExpression(axis === 'xz' ? 'rx' : 'ry', [
    createLiteral(90),
    createPipeSubstitution(),
  ])
-  const initialLineTo = createCallExpression('line', [
+  const initialLineTo = createCallExpressionStdLib('line', [
    createLiteral('default'),
    createPipeSubstitution(),
  ])
@ -112,7 +112,9 @@ function addToShow(node: Program, name: string): Program {
  const dumbyStartend = { start: 0, end: 0 }
  const showCallIndex = getShowIndex(_node)
  if (showCallIndex === -1) {
-    const showCall = createCallExpression('show', [createIdentifier(name)])
+    const showCall = createCallExpressionStdLib('show', [
+      createIdentifier(name),
+    ])
    const showExpressionStatement: ExpressionStatement = {
      type: 'ExpressionStatement',
      ...dumbyStartend,
@ -124,7 +126,7 @@ function addToShow(node: Program, name: string): Program {
  const showCall = { ..._node.body[showCallIndex] } as ExpressionStatement
  const showCallArgs = (showCall.expression as CallExpression).arguments
  const newShowCallArgs: Value[] = [...showCallArgs, createIdentifier(name)]
-  const newShowExpression = createCallExpression('show', newShowCallArgs)
+  const newShowExpression = createCallExpressionStdLib('show', newShowCallArgs)

  _node.body[showCallIndex] = {
    ...showCall,
@ -225,7 +227,7 @@ export function extrudeSketch(
  const { node: variableDeclorator, shallowPath: pathToDecleration } =
    getNodeFromPath<VariableDeclarator>(_node, pathToNode, 'VariableDeclarator')

-  const extrudeCall = createCallExpression('extrude', [
+  const extrudeCall = createCallExpressionStdLib('extrude', [
    createLiteral(4),
    shouldPipe
      ? createPipeSubstitution()
@ -313,15 +315,15 @@ export function sketchOnExtrudedFace(
  const newSketch = createVariableDeclaration(
    newSketchName,
    createPipeExpression([
-      createCallExpression('startSketchAt', [
+      createCallExpressionStdLib('startSketchAt', [
        createArrayExpression([createLiteral(0), createLiteral(0)]),
      ]),
-      createCallExpression('lineTo', [
+      createCallExpressionStdLib('lineTo', [
        createArrayExpression([createLiteral(1), createLiteral(1)]),
        createPipeSubstitution(),
      ]),
      createCallExpression('transform', [
-        createCallExpression('getExtrudeWallTransform', [
+        createCallExpressionStdLib('getExtrudeWallTransform', [
          createLiteral(tag),
          createIdentifier(oldSketchName),
        ]),
@ -414,6 +416,40 @@ export function createPipeSubstitution(): PipeSubstitution {
  }
 }

+export function createCallExpressionStdLib(
+  name: string,
+  args: CallExpression['arguments']
+): CallExpression {
+  return {
+    type: 'CallExpression',
+    start: 0,
+    end: 0,
+    callee: {
+      type: 'Identifier',
+      start: 0,
+      end: 0,
+      name,
+    },
+    function: {
+      type: 'StdLib',
+      func: {
+        // We only need the name here to map it back when it serializes
+        // to rust, don't worry about the rest.
+        name,
+        summary: '',
+        description: '',
+        tags: [],
+        returnValue: { type: '', required: false, name: '', schema: {} },
+        args: [],
+        unpublished: false,
+        deprecated: false,
+      },
+    },
+    optional: false,
+    arguments: args,
+  }
+}
+
 export function createCallExpression(
  name: string,
  args: CallExpression['arguments']
@ -428,6 +464,9 @@ export function createCallExpression(
      end: 0,
      name,
    },
+    function: {
+      type: 'InMemory',
+    },
    optional: false,
    arguments: args,
  }
--- a/src/lang/recast.test.ts
+++ b/src/lang/recast.test.ts
@ -45,8 +45,7 @@ const newVar = myVar + 1`
    expect(recasted).toBe(code.trim())
  })
  it('test with function call', () => {
-    const code = `
-const myVar = "hello"
+    const code = `const myVar = "hello"
 log(5, myVar)`
    const { ast } = code2ast(code)
    const recasted = recast(ast)
@ -71,8 +70,7 @@ log(5, myVar)`
  |> lineTo({ to: [1, 0], tag: "rightPath" }, %)
  |> close(%)

-show(mySketch)
-`
+show(mySketch)`
    const { ast } = code2ast(code)
    const recasted = recast(ast)
    expect(recasted).toBe(code.trim())
@ -186,8 +184,7 @@ const myVar2 = yo['a'][key2].c`

 describe('testing recasting with comments and whitespace', () => {
  it('code with comments', () => {
-    const code = `
-const yo = { a: { b: { c: '123' } } }
+    const code = `const yo = { a: { b: { c: '123' } } }
 // this is a comment
 const key = 'c'`

@ -197,20 +194,18 @@ const key = 'c'`
    expect(recasted).toBe(code)
  })
  it('code with comment and extra lines', () => {
-    const code = `
-const yo = 'c' /* this is
+    const code = `const yo = 'c'
+
+/* this is
 a
 comment */
-
 const yo = 'bing'`
    const { ast } = code2ast(code)
    const recasted = recast(ast)
    expect(recasted).toBe(code)
  })
  it('comments at the start and end', () => {
-    const code = `
-// this is a comment
-
+    const code = `// this is a comment
 const yo = { a: { b: { c: '123' } } }
 const key = 'c'

@ -220,12 +215,12 @@ const key = 'c'
    expect(recasted).toBe(code)
  })
  it('comments in a fn block', () => {
-    const code = `
-const myFn = () => {
+    const code = `const myFn = () => {
  // this is a comment
-  const yo = { a: { b: { c: '123' } } } /* block
-  comment */
+  const yo = { a: { b: { c: '123' } } }

+  /* block
+  comment */
  const key = 'c'
  // this is also a comment
 }`
@ -269,7 +264,21 @@ const mySk1 = startSketchAt([0, 0])
  */`
    const { ast } = code2ast(code)
    const recasted = recast(ast)
-    expect(recasted).toBe(code)
+    expect(recasted).toBe(`// comment at start
+const mySk1 = startSketchAt([0, 0])
+  |> lineTo([1, 1], %)
+  // comment here
+  |> lineTo({ to: [0, 1], tag: 'myTag' }, %)
+  |> lineTo([1, 1], %)
+  /* and
+  here
+
+a comment between pipe expression statements */
+  |> rx(90, %)
+  // and another with just white space between others below
+  |> ry(45, %)
+  |> rx(45, %)
+// one more for good measure`)
  })
 })

@ -295,7 +304,7 @@ describe('testing call Expressions in BinaryExpressions and UnaryExpressions', (
  it('with unaryExpression in sketch situation', () => {
    const code = [
      'const part001 = startSketchAt([0, 0])',
-      '|> line([-2.21, -legLen(5, min(3, 999))], %)',
+      '  |> line([-2.21, -legLen(5, min(3, 999))], %)',
    ].join('\n')
    const { ast } = code2ast(code)
    const recasted = recast(ast)
@ -309,10 +318,10 @@ describe('it recasts wrapped object expressions in pipe bodies with correct inde
  |> line({ to: [0.62, 4.15], tag: 'seg01' }, %)
  |> line([2.77, -1.24], %)
  |> angledLineThatIntersects({
-      angle: 201,
-      offset: -1.35,
-      intersectTag: 'seg01'
-    }, %)
+       angle: 201,
+       offset: -1.35,
+       intersectTag: 'seg01'
+     }, %)
  |> line([-0.42, -1.72], %)
 show(part001)`
    const { ast } = code2ast(code)
--- a/src/lang/std/engineConnection.ts
+++ b/src/lang/std/engineConnection.ts
@ -1,9 +1,14 @@
 import { SourceRange } from 'lang/executor'
 import { Selections } from 'useStore'
-import { VITE_KC_API_WS_MODELING_URL, VITE_KC_CONNECTION_TIMEOUT_MS } from 'env'
+import {
+  VITE_KC_API_WS_MODELING_URL,
+  VITE_KC_CONNECTION_TIMEOUT_MS,
+  VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS,
+} from 'env'
 import { Models } from '@kittycad/lib'
 import { exportSave } from 'lib/exportSave'
 import { v4 as uuidv4 } from 'uuid'
+import * as Sentry from '@sentry/react'

 interface ResultCommand {
  type: 'result'
@ -22,16 +27,6 @@ export interface SourceRangeMap {
  [key: string]: SourceRange
 }

-interface SelectionsArgs {
-  id: string
-  type: Selections['codeBasedSelections'][number]['type']
-}
-
-interface CursorSelectionsArgs {
-  otherSelections: Selections['otherSelections']
-  idBasedSelections: { type: string; id: string }[]
-}
-
 interface NewTrackArgs {
  conn: EngineConnection
  mediaStream: MediaStream
@ -45,7 +40,7 @@ type WebSocketResponse = Models['OkWebSocketResponseData_type']
 export class EngineConnection {
  websocket?: WebSocket
  pc?: RTCPeerConnection
-  lossyDataChannel?: RTCDataChannel
+  unreliableDataChannel?: RTCDataChannel

  private ready: boolean

@ -107,6 +102,11 @@ export class EngineConnection {
  isReady() {
    return this.ready
  }
+  // shouldTrace will return true when Sentry should be used to instrument
+  // the Engine.
+  shouldTrace() {
+    return Sentry.getCurrentHub()?.getClient()?.getOptions()?.sendClientReports
+  }
  // connect will attempt to connect to the Engine over a WebSocket, and
  // establish the WebRTC connections.
  //
@ -116,6 +116,44 @@ export class EngineConnection {
    // 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
+
+    class SpanPromise {
+      span: Sentry.Span
+      promise: Promise<void>
+      resolve?: (v: void) => void
+
+      constructor(span: Sentry.Span) {
+        this.span = span
+        this.promise = new Promise((resolve) => {
+          this.resolve = (v: void) => {
+            // here we're going to invoke finish before resolving the
+            // promise so that a `.then()` will order strictly after
+            // all spans have -- for sure -- been resolved, rather than
+            // doing a `then` on this promise.
+            this.span.finish()
+            resolve(v)
+          }
+        })
+      }
+    }
+
+    let webrtcMediaTransaction: Sentry.Transaction
+    let websocketSpan: SpanPromise
+    let mediaTrackSpan: SpanPromise
+    let dataChannelSpan: SpanPromise
+    let handshakeSpan: SpanPromise
+    let iceSpan: SpanPromise
+
+    if (this.shouldTrace()) {
+      webrtcMediaTransaction = Sentry.startTransaction({
+        name: 'webrtc-media',
+      })
+      websocketSpan = new SpanPromise(
+        webrtcMediaTransaction.startChild({ op: 'websocket' })
+      )
+    }
+
    this.websocket = new WebSocket(this.url, [])
    this.websocket.binaryType = 'arraybuffer'

@ -129,6 +167,37 @@ export class EngineConnection {
    })

    this.websocket.addEventListener('open', (event) => {
+      if (this.shouldTrace()) {
+        websocketSpan.resolve?.()
+
+        handshakeSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({ op: 'handshake' })
+        )
+        iceSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({ op: 'ice' })
+        )
+        dataChannelSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({
+            op: 'data-channel',
+          })
+        )
+        mediaTrackSpan = new SpanPromise(
+          webrtcMediaTransaction.startChild({
+            op: 'media-track',
+          })
+        )
+      }
+
+      Promise.all([
+        handshakeSpan.promise,
+        iceSpan.promise,
+        dataChannelSpan.promise,
+        mediaTrackSpan.promise,
+      ]).then(() => {
+        console.log('All spans finished, reporting')
+        webrtcMediaTransaction?.finish()
+      })
+
      this.onWebsocketOpen(this)
    })

@ -162,7 +231,7 @@ export class EngineConnection {
        } else {
          console.error(`Error from server:`)
        }
-        message.errors.forEach((error) => {
+        message?.errors?.forEach((error) => {
          console.error(` - ${error.error_code}: ${error.message}`)
        })
        return
@ -191,6 +260,13 @@ export class EngineConnection {
              sdp: answer.sdp,
            })
          )
+
+          if (this.shouldTrace()) {
+            // When both ends have a local and remote SDP, we've been able to
+            // set up successfully. We'll still need to find the right ICE
+            // servers, but this is hand-shook.
+            handshakeSpan.resolve?.()
+          }
        }
      } else if (resp.type === 'trickle_ice') {
        let candidate = resp.data?.candidate
@ -220,9 +296,9 @@ export class EngineConnection {
        // PeerConnection and waiting for events to fire our callbacks.

        this.pc.addEventListener('connectionstatechange', (event) => {
-          // if (this.pc?.iceConnectionState === 'disconnected') {
-          //   this.close()
-          // }
+          if (this.pc?.iceConnectionState === 'connected') {
+            iceSpan.resolve?.()
+          }
        })

        this.pc.addEventListener('icecandidate', (event) => {
@ -272,8 +348,142 @@ export class EngineConnection {
    })

    this.pc.addEventListener('track', (event) => {
-      console.log('received track', event)
      const mediaStream = event.streams[0]
+
+      if (this.shouldTrace()) {
+        let mediaStreamTrack = mediaStream.getVideoTracks()[0]
+        mediaStreamTrack.addEventListener('unmute', () => {
+          // let settings = mediaStreamTrack.getSettings()
+          // mediaTrackSpan.span.setTag("fps", settings.frameRate)
+          // mediaTrackSpan.span.setTag("width", settings.width)
+          // mediaTrackSpan.span.setTag("height", settings.height)
+          mediaTrackSpan.resolve?.()
+        })
+      }
+
+      // Set up the background thread to keep an eye on statistical
+      // information about the WebRTC media stream from the server to
+      // us. We'll also eventually want more global statistical information,
+      // but this will give us a baseline.
+      if (parseInt(VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS) !== 0) {
+        setInterval(() => {
+          if (this.pc === undefined) {
+            return
+          }
+          if (!this.shouldTrace()) {
+            return
+          }
+
+          // Use the WebRTC Statistics API to collect statistical information
+          // about the WebRTC connection we're using to report to Sentry.
+          mediaStream.getVideoTracks().forEach((videoTrack) => {
+            let trackStats = new Map<string, any>()
+            this.pc?.getStats(videoTrack).then((videoTrackStats) => {
+              // Sentry only allows 10 metrics per transaction. We're going
+              // to have to pick carefully here, eventually send like a prom
+              // file or something to the peer.
+
+              const transaction = Sentry.startTransaction({
+                name: 'webrtc-stats',
+              })
+              videoTrackStats.forEach((videoTrackReport) => {
+                if (videoTrackReport.type === 'inbound-rtp') {
+                  // RTC Stream Info
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.framesDecoded',
+                  //   videoTrackReport.framesDecoded,
+                  //   'frame'
+                  // )
+                  transaction.setMeasurement(
+                    'rtcFramesDropped',
+                    videoTrackReport.framesDropped,
+                    ''
+                  )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.framesReceived',
+                  //   videoTrackReport.framesReceived,
+                  //   'frame'
+                  // )
+                  transaction.setMeasurement(
+                    'rtcFramesPerSecond',
+                    videoTrackReport.framesPerSecond,
+                    'fps'
+                  )
+                  transaction.setMeasurement(
+                    'rtcFreezeCount',
+                    videoTrackReport.freezeCount,
+                    ''
+                  )
+                  transaction.setMeasurement(
+                    'rtcJitter',
+                    videoTrackReport.jitter,
+                    'second'
+                  )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.jitterBufferDelay',
+                  //   videoTrackReport.jitterBufferDelay,
+                  //   ''
+                  // )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.jitterBufferEmittedCount',
+                  //   videoTrackReport.jitterBufferEmittedCount,
+                  //   ''
+                  // )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.jitterBufferMinimumDelay',
+                  //   videoTrackReport.jitterBufferMinimumDelay,
+                  //   ''
+                  // )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.jitterBufferTargetDelay',
+                  //   videoTrackReport.jitterBufferTargetDelay,
+                  //   ''
+                  // )
+                  transaction.setMeasurement(
+                    'rtcKeyFramesDecoded',
+                    videoTrackReport.keyFramesDecoded,
+                    ''
+                  )
+                  transaction.setMeasurement(
+                    'rtcTotalFreezesDuration',
+                    videoTrackReport.totalFreezesDuration,
+                    'second'
+                  )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.totalInterFrameDelay',
+                  //   videoTrackReport.totalInterFrameDelay,
+                  //   ''
+                  // )
+                  transaction.setMeasurement(
+                    'rtcTotalPausesDuration',
+                    videoTrackReport.totalPausesDuration,
+                    'second'
+                  )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.totalProcessingDelay',
+                  //   videoTrackReport.totalProcessingDelay,
+                  //   'second'
+                  // )
+                } else if (videoTrackReport.type === 'transport') {
+                  // // Bytes i/o
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.bytesReceived',
+                  //   videoTrackReport.bytesReceived,
+                  //   'byte'
+                  // )
+                  // transaction.setMeasurement(
+                  //   'mediaStreamTrack.bytesSent',
+                  //   videoTrackReport.bytesSent,
+                  //   'byte'
+                  // )
+                }
+              })
+              transaction?.finish()
+            })
+          })
+        }, VITE_KC_CONNECTION_WEBRTC_REPORT_STATS_MS)
+      }
+
      this.onNewTrack({
        conn: this,
        mediaStream: mediaStream,
@ -285,45 +495,48 @@ export class EngineConnection {
    let connectionStarted = new Date()

    this.pc.addEventListener('datachannel', (event) => {
-      this.lossyDataChannel = event.channel
+      this.unreliableDataChannel = event.channel

-      console.log('accepted lossy data channel', event.channel.label)
-      this.lossyDataChannel.addEventListener('open', (event) => {
-        console.log('lossy data channel opened', event)
+      console.log('accepted unreliable data channel', event.channel.label)
+      this.unreliableDataChannel.addEventListener('open', (event) => {
+        console.log('unreliable data channel opened', event)
+        if (this.shouldTrace()) {
+          dataChannelSpan.resolve?.()
+        }

        this.onDataChannelOpen(this)

-        let timeToConnectMs = new Date().getTime() - connectionStarted.getTime()
-        console.log(`engine connection time to connect: ${timeToConnectMs}ms`)
        this.onEngineConnectionOpen(this)
        this.ready = true
      })

-      this.lossyDataChannel.addEventListener('close', (event) => {
-        console.log('lossy data channel closed')
+      this.unreliableDataChannel.addEventListener('close', (event) => {
+        console.log('unreliable data channel closed')
        this.close()
      })

-      this.lossyDataChannel.addEventListener('error', (event) => {
-        console.log('lossy data channel error')
+      this.unreliableDataChannel.addEventListener('error', (event) => {
+        console.log('unreliable data channel error')
        this.close()
      })
    })

    this.onConnectionStarted(this)
  }
-  send(message: object) {
+  send(message: object | string) {
    // TODO(paultag): Add in logic to determine the connection state and
    // take actions if needed?
-    this.websocket?.send(JSON.stringify(message))
+    this.websocket?.send(
+      typeof message === 'string' ? message : JSON.stringify(message)
+    )
  }
  close() {
    this.websocket?.close()
    this.pc?.close()
-    this.lossyDataChannel?.close()
+    this.unreliableDataChannel?.close()
    this.websocket = undefined
    this.pc = undefined
-    this.lossyDataChannel = undefined
+    this.unreliableDataChannel = undefined

    this.onClose(this)
    this.ready = false
@ -331,6 +544,23 @@ export class EngineConnection {
 }

 export type EngineCommand = Models['WebSocketRequest_type']
+type ModelTypes = Models['OkModelingCmdResponse_type']['type']
+
+type UnreliableResponses = Extract<
+  Models['OkModelingCmdResponse_type'],
+  { type: 'highlight_set_entity' }
+>
+interface UnreliableSubscription<T extends UnreliableResponses['type']> {
+  event: T
+  callback: (data: Extract<UnreliableResponses, { type: T }>) => void
+}
+
+interface Subscription<T extends ModelTypes> {
+  event: T
+  callback: (
+    data: Extract<Models['OkModelingCmdResponse_type'], { type: T }>
+  ) => void
+}

 export class EngineCommandManager {
  artifactMap: ArtifactMap = {}
@ -340,10 +570,17 @@ export class EngineCommandManager {
  engineConnection?: EngineConnection
  waitForReady: Promise<void> = new Promise(() => {})
  private resolveReady = () => {}
-  onHoverCallback: (id?: string) => void = () => {}
-  onClickCallback: (selection?: SelectionsArgs) => void = () => {}
-  onCursorsSelectedCallback: (selections: CursorSelectionsArgs) => void =
-    () => {}
+
+  subscriptions: {
+    [event: string]: {
+      [localUnsubscribeId: string]: (a: any) => void
+    }
+  } = {} as any
+  unreliableSubscriptions: {
+    [event: string]: {
+      [localUnsubscribeId: string]: (a: any) => void
+    }
+  } = {} as any
  constructor({
    setMediaStream,
    setIsStreamReady,
@ -373,20 +610,28 @@ export class EngineCommandManager {
      },
      onConnectionStarted: (engineConnection) => {
        engineConnection?.pc?.addEventListener('datachannel', (event) => {
-          let lossyDataChannel = event.channel
+          let unreliableDataChannel = event.channel

-          lossyDataChannel.addEventListener('message', (event) => {
-            const result: Models['OkModelingCmdResponse_type'] = JSON.parse(
-              event.data
+          unreliableDataChannel.addEventListener('message', (event) => {
+            const result: UnreliableResponses = JSON.parse(event.data)
+            Object.values(
+              this.unreliableSubscriptions[result.type] || {}
+            ).forEach(
+              // TODO: There is only one response that uses the unreliable channel atm,
+              // highlight_set_entity, if there are more it's likely they will all have the same
+              // sequence logic, but I'm not sure if we use a single global sequence or a sequence
+              // per unreliable subscription.
+              (callback) => {
+                if (
+                  result?.data?.sequence &&
+                  result?.data.sequence > this.inSequence &&
+                  result.type === 'highlight_set_entity'
+                ) {
+                  this.inSequence = result.data.sequence
+                  callback(result)
+                }
+              }
            )
-            if (
-              result.type === 'highlight_set_entity' &&
-              result?.data?.sequence &&
-              result.data.sequence > this.inSequence
-            ) {
-              this.onHoverCallback(result.data.entity_id)
-              this.inSequence = result.data.sequence
-            }
          })
        })

@ -418,8 +663,8 @@ export class EngineCommandManager {

        mediaStream.getVideoTracks()[0].addEventListener('mute', () => {
          console.log('peer is not sending video to us')
-          this.engineConnection?.close()
-          this.engineConnection?.connect()
+          // this.engineConnection?.close()
+          // this.engineConnection?.connect()
        })

        setMediaStream(mediaStream)
@ -433,18 +678,11 @@ export class EngineCommandManager {
      return
    }
    const modelingResponse = message.data.modeling_response
+    Object.values(this.subscriptions[modelingResponse.type] || {}).forEach(
+      (callback) => callback(modelingResponse)
+    )

    const command = this.artifactMap[id]
-    if (modelingResponse.type === 'select_with_point') {
-      if (modelingResponse?.data?.entity_id) {
-        this.onClickCallback({
-          id: modelingResponse?.data?.entity_id,
-          type: 'default',
-        })
-      } else {
-        this.onClickCallback()
-      }
-    }
    if (command && command.type === 'pending') {
      const resolve = command.resolve
      this.artifactMap[id] = {
@ -453,6 +691,7 @@ export class EngineCommandManager {
      }
      resolve({
        id,
+        data: modelingResponse,
      })
    } else {
      this.artifactMap[id] = {
@ -468,21 +707,49 @@ export class EngineCommandManager {
    this.artifactMap = {}
    this.sourceRangeMap = {}
  }
+  subscribeTo<T extends ModelTypes>({
+    event,
+    callback,
+  }: Subscription<T>): () => void {
+    const localUnsubscribeId = uuidv4()
+    const otherEventCallbacks = this.subscriptions[event]
+    if (otherEventCallbacks) {
+      otherEventCallbacks[localUnsubscribeId] = callback
+    } else {
+      this.subscriptions[event] = {
+        [localUnsubscribeId]: callback,
+      }
+    }
+    return () => this.unSubscribeTo(event, localUnsubscribeId)
+  }
+  private unSubscribeTo(event: ModelTypes, id: string) {
+    delete this.subscriptions[event][id]
+  }
+  subscribeToUnreliable<T extends UnreliableResponses['type']>({
+    event,
+    callback,
+  }: UnreliableSubscription<T>): () => void {
+    const localUnsubscribeId = uuidv4()
+    const otherEventCallbacks = this.unreliableSubscriptions[event]
+    if (otherEventCallbacks) {
+      otherEventCallbacks[localUnsubscribeId] = callback
+    } else {
+      this.unreliableSubscriptions[event] = {
+        [localUnsubscribeId]: callback,
+      }
+    }
+    return () => this.unSubscribeToUnreliable(event, localUnsubscribeId)
+  }
+  private unSubscribeToUnreliable(
+    event: UnreliableResponses['type'],
+    id: string
+  ) {
+    delete this.unreliableSubscriptions[event][id]
+  }
  endSession() {
    // this.websocket?.close()
    // socket.off('command')
  }
-  onHover(callback: (id?: string) => void) {
-    // It's when the user hovers over a part in the 3d scene, and so the engine should tell the
-    // frontend about that (with it's id) so that the FE can highlight code associated with that id
-    this.onHoverCallback = callback
-  }
-  onClick(callback: (selection?: SelectionsArgs) => void) {
-    // It's when the user clicks on a part in the 3d scene, and so the engine should tell the
-    // frontend about that (with it's id) so that the FE can put the user's cursor on the right
-    // line of code
-    this.onClickCallback = callback
-  }
  cusorsSelected(selections: {
    otherSelections: Selections['otherSelections']
    idBasedSelections: { type: string; id: string }[]
@ -507,32 +774,38 @@ export class EngineCommandManager {
      cmd_id: uuidv4(),
    })
  }
-  sendSceneCommand(command: EngineCommand) {
+  sendSceneCommand(command: EngineCommand): Promise<any> {
    if (!this.engineConnection?.isReady()) {
      console.log('socket not ready')
-      return
+      return Promise.resolve()
    }
-    if (command.type !== 'modeling_cmd_req') return
+    if (command.type !== 'modeling_cmd_req') return Promise.resolve()
    const cmd = command.cmd
    if (
      cmd.type === 'camera_drag_move' &&
-      this.engineConnection?.lossyDataChannel
+      this.engineConnection?.unreliableDataChannel
    ) {
      cmd.sequence = this.outSequence
      this.outSequence++
-      this.engineConnection?.lossyDataChannel?.send(JSON.stringify(command))
-      return
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
+      return Promise.resolve()
    } else if (
      cmd.type === 'highlight_set_entity' &&
-      this.engineConnection?.lossyDataChannel
+      this.engineConnection?.unreliableDataChannel
    ) {
      cmd.sequence = this.outSequence
      this.outSequence++
-      this.engineConnection?.lossyDataChannel?.send(JSON.stringify(command))
-      return
+      this.engineConnection?.unreliableDataChannel?.send(
+        JSON.stringify(command)
+      )
+      return Promise.resolve()
    }
    console.log('sending command', command)
+    // since it's not mouse drag or highlighting send over TCP and keep track of the command
    this.engineConnection?.send(command)
+    return this.handlePendingCommand(command.cmd_id)
  }
  sendModelingCommand({
    id,
@ -541,15 +814,18 @@ export class EngineCommandManager {
  }: {
    id: string
    range: SourceRange
-    command: EngineCommand
+    command: EngineCommand | string
  }): Promise<any> {
    this.sourceRangeMap[id] = range

    if (!this.engineConnection?.isReady()) {
      console.log('socket not ready')
-      return new Promise(() => {})
+      return Promise.resolve()
    }
    this.engineConnection?.send(command)
+    return this.handlePendingCommand(id)
+  }
+  handlePendingCommand(id: string) {
    let resolve: (val: any) => void = () => {}
    const promise = new Promise((_resolve, reject) => {
      resolve = _resolve
@ -575,10 +851,9 @@ export class EngineCommandManager {
    if (commandStr === undefined) {
      throw new Error('commandStr is undefined')
    }
-    const command: EngineCommand = JSON.parse(commandStr)
    const range: SourceRange = JSON.parse(rangeStr)

-    return this.sendModelingCommand({ id, range, command })
+    return this.sendModelingCommand({ id, range, command: commandStr })
  }
  commandResult(id: string): Promise<any> {
    const command = this.artifactMap[id]
--- a/src/lang/std/sketch.test.ts
+++ b/src/lang/std/sketch.test.ts
@ -97,11 +97,10 @@ describe('testing changeSketchArguments', () => {
  const lineAfterChange = 'lineTo([2, 3], %)'
  test('changeSketchArguments', async () => {
    // Enable rotations #152
-    const genCode = (line: string) => `
-const mySketch001 = startSketchAt([0, 0])
-    |> ${line}
-    |> lineTo([0.46, -5.82], %)
-    // |> rx(45, %)
+    const genCode = (line: string) => `const mySketch001 = startSketchAt([0, 0])
+  |> ${line}
+  |> lineTo([0.46, -5.82], %)
+// |> rx(45, %)
 show(mySketch001)`
    const code = genCode(lineToChange)
    const expectedCode = genCode(lineAfterChange)
@ -160,8 +159,7 @@ show(mySketch001)`
      ],
    })
    // Enable rotations #152
-    const expectedCode = `
-const mySketch001 = startSketchAt([0, 0])
+    const expectedCode = `const mySketch001 = startSketchAt([0, 0])
  // |> rx(45, %)
  |> lineTo([-1.59, -1.54], %)
  |> lineTo([0.46, -5.82], %)
@ -175,12 +173,11 @@ 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 = startSketchAt([0, 0])
-    // |> rx(45, %)
-    |> ${line}
-    |> lineTo([0.46, -5.82], %)
-  show(mySketch001)`
+    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 = parser_wasm(code)
    const programMemory = await enginelessExecutor(ast)
--- a/src/lang/std/sketchConstraints.test.ts
+++ b/src/lang/std/sketchConstraints.test.ts
@ -59,20 +59,20 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
    `  |> lineTo({ to: [1, 1], tag: 'abc1' }, %)`,
    `  |> line({ to: [-2.04, -0.7], tag: 'abc2' }, %)`,
    `  |> angledLine({`,
-    `      angle: 157,`,
-    `      length: 1.69,`,
-    `      tag: 'abc3'`,
-    `    }, %)`,
+    `       angle: 157,`,
+    `       length: 1.69,`,
+    `       tag: 'abc3'`,
+    `     }, %)`,
    `  |> angledLineOfXLength({`,
-    `      angle: 217,`,
-    `      length: 0.86,`,
-    `      tag: 'abc4'`,
-    `    }, %)`,
+    `       angle: 217,`,
+    `       length: 0.86,`,
+    `       tag: 'abc4'`,
+    `     }, %)`,
    `  |> angledLineOfYLength({`,
-    `      angle: 104,`,
-    `      length: 1.58,`,
-    `      tag: 'abc5'`,
-    `    }, %)`,
+    `       angle: 104,`,
+    `       length: 1.58,`,
+    `       tag: 'abc5'`,
+    `     }, %)`,
    `  |> angledLineToX({ angle: 55, to: -2.89, tag: 'abc6' }, %)`,
    `  |> angledLineToY({ angle: 330, to: 2.53, tag: 'abc7' }, %)`,
    `  |> xLine({ length: 1.47, tag: 'abc8' }, %)`,
@ -144,10 +144,10 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
      inputCode: bigExample,
      callToSwap: [
        `angledLine({`,
-        `      angle: 157,`,
-        `      length: 1.69,`,
-        `      tag: 'abc3'`,
-        `    }, %)`,
+        `       angle: 157,`,
+        `       length: 1.69,`,
+        `       tag: 'abc3'`,
+        `     }, %)`,
      ].join('\n'),
      constraintType: 'horizontal',
    })
@ -172,10 +172,10 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
      inputCode: bigExample,
      callToSwap: [
        `angledLineOfXLength({`,
-        `      angle: 217,`,
-        `      length: 0.86,`,
-        `      tag: 'abc4'`,
-        `    }, %)`,
+        `       angle: 217,`,
+        `       length: 0.86,`,
+        `       tag: 'abc4'`,
+        `     }, %)`,
      ].join('\n'),
      constraintType: 'horizontal',
    })
@ -201,10 +201,10 @@ describe('testing swaping out sketch calls with xLine/xLineTo', () => {
      inputCode: bigExample,
      callToSwap: [
        `angledLineOfYLength({`,
-        `      angle: 104,`,
-        `      length: 1.58,`,
-        `      tag: 'abc5'`,
-        `    }, %)`,
+        `       angle: 104,`,
+        `       length: 1.58,`,
+        `       tag: 'abc5'`,
+        `     }, %)`,
      ].join('\n'),
      constraintType: 'vertical',
    })
--- a/src/lang/std/sketchcombos.test.ts
+++ b/src/lang/std/sketchcombos.test.ts
@ -133,64 +133,64 @@ const myAng2 = 134
 const part001 = startSketchAt([0, 0])
  |> line({ to: [1, 3.82], tag: 'seg01' }, %) // ln-should-get-tag
  |> angledLineToX([
-      -angleToMatchLengthX('seg01', myVar, %),
-      myVar
-    ], %) // ln-lineTo-xAbsolute should use angleToMatchLengthX helper
+       -angleToMatchLengthX('seg01', myVar, %),
+       myVar
+     ], %) // ln-lineTo-xAbsolute should use angleToMatchLengthX helper
  |> angledLineToY([
-      -angleToMatchLengthY('seg01', myVar, %),
-      myVar
-    ], %) // ln-lineTo-yAbsolute should use angleToMatchLengthY helper
+       -angleToMatchLengthY('seg01', myVar, %),
+       myVar
+     ], %) // ln-lineTo-yAbsolute should use angleToMatchLengthY helper
  |> angledLine([45, segLen('seg01', %)], %) // ln-lineTo-free should become angledLine
  |> angledLine([45, segLen('seg01', %)], %) // ln-angledLineToX-free should become angledLine
  |> angledLine([myAng, segLen('seg01', %)], %) // ln-angledLineToX-angle should become angledLine
  |> angledLineToX([
-      angleToMatchLengthX('seg01', myVar2, %),
-      myVar2
-    ], %) // ln-angledLineToX-xAbsolute should use angleToMatchLengthX to get angle
+       angleToMatchLengthX('seg01', myVar2, %),
+       myVar2
+     ], %) // ln-angledLineToX-xAbsolute should use angleToMatchLengthX to get angle
  |> angledLine([-45, segLen('seg01', %)], %) // ln-angledLineToY-free should become angledLine
  |> angledLine([myAng2, segLen('seg01', %)], %) // ln-angledLineToY-angle should become angledLine
  |> angledLineToY([
-      angleToMatchLengthY('seg01', myVar3, %),
-      myVar3
-    ], %) // ln-angledLineToY-yAbsolute should use angleToMatchLengthY to get angle
+       angleToMatchLengthY('seg01', myVar3, %),
+       myVar3
+     ], %) // ln-angledLineToY-yAbsolute should use angleToMatchLengthY to get angle
  |> line([
-      min(segLen('seg01', %), myVar),
-      legLen(segLen('seg01', %), myVar)
-    ], %) // ln-should use legLen for y
+       min(segLen('seg01', %), myVar),
+       legLen(segLen('seg01', %), myVar)
+     ], %) // ln-should use legLen for y
  |> line([
-      min(segLen('seg01', %), myVar),
-      -legLen(segLen('seg01', %), myVar)
-    ], %) // ln-legLen but negative
+       min(segLen('seg01', %), myVar),
+       -legLen(segLen('seg01', %), myVar)
+     ], %) // ln-legLen but negative
  |> angledLine([-112, segLen('seg01', %)], %) // ln-should become angledLine
  |> angledLine([myVar, segLen('seg01', %)], %) // ln-use segLen for secound arg
  |> angledLine([45, segLen('seg01', %)], %) // ln-segLen again
  |> angledLine([54, segLen('seg01', %)], %) // ln-should be transformed to angledLine
  |> angledLineOfXLength([
-      legAngX(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-should use legAngX to calculate angle
+       legAngX(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-should use legAngX to calculate angle
  |> angledLineOfXLength([
-      180 + legAngX(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-same as above but should have + 180 to match original quadrant
+       180 + legAngX(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-same as above but should have + 180 to match original quadrant
  |> line([
-      legLen(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-legLen again but yRelative
+       legLen(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-legLen again but yRelative
  |> line([
-      -legLen(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-negative legLen yRelative
+       -legLen(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-negative legLen yRelative
  |> angledLine([58, segLen('seg01', %)], %) // ln-angledLineOfYLength-free should become angledLine
  |> angledLine([myAng, segLen('seg01', %)], %) // ln-angledLineOfYLength-angle should become angledLine
  |> angledLineOfXLength([
-      legAngY(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-angledLineOfYLength-yRelative use legAngY
+       legAngY(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-angledLineOfYLength-yRelative use legAngY
  |> angledLineOfXLength([
-      270 + legAngY(segLen('seg01', %), myVar),
-      min(segLen('seg01', %), myVar)
-    ], %) // ln-angledLineOfYLength-yRelative with angle > 90 use binExp
+       270 + legAngY(segLen('seg01', %), myVar),
+       min(segLen('seg01', %), myVar)
+     ], %) // ln-angledLineOfYLength-yRelative with angle > 90 use binExp
  |> xLine(segLen('seg01', %), %) // ln-xLine-free should sub in segLen
  |> yLine(segLen('seg01', %), %) // ln-yLine-free should sub in segLen
  |> xLine(segLen('seg01', %), %) // ln-xLineTo-free should convert to xLine
@ -406,9 +406,9 @@ show(part001)`
        'setVertDistance'
      )
      expect(expectedCode).toContain(`|> lineTo([
-      lastSegX(%) + myVar,
-      segEndY('seg01', %) + 2.93
-    ], %) // xRelative`)
+       lastSegX(%) + myVar,
+       segEndY('seg01', %) + 2.93
+     ], %) // xRelative`)
    })
    it('testing for yRelative to horizontal distance', async () => {
      const expectedCode = await helperThing(
@ -417,9 +417,9 @@ show(part001)`
        'setHorzDistance'
      )
      expect(expectedCode).toContain(`|> lineTo([
-      segEndX('seg01', %) + 2.6,
-      lastSegY(%) + myVar
-    ], %) // yRelative`)
+       segEndX('seg01', %) + 2.6,
+       lastSegY(%) + myVar
+     ], %) // yRelative`)
    })
  })
 })
--- a/src/lang/tokeniser.test.ts
+++ b/src/lang/tokeniser.test.ts
@ -110,7 +110,7 @@ const yi=45`
      "brace        ')'        from 17  to 18",
    ])
    expect(stringSummaryLexer('fn funcName = (param1, param2) => {}')).toEqual([
-      "word         'fn'       from 0   to 2",
+      "keyword      'fn'       from 0   to 2",
      "whitespace   ' '        from 2   to 3",
      "word         'funcName' from 3   to 11",
      "whitespace   ' '        from 11  to 12",
@ -203,7 +203,7 @@ const yi=45`
  it('testing array declaration', () => {
    const result = stringSummaryLexer(`const yo = [1, 2]`)
    expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
      "whitespace   ' '        from 5   to 6",
      "word         'yo'       from 6   to 8",
      "whitespace   ' '        from 8   to 9",
@ -220,7 +220,7 @@ const yi=45`
  it('testing object declaration', () => {
    const result = stringSummaryLexer(`const yo = {key: 'value'}`)
    expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
      "whitespace   ' '        from 5   to 6",
      "word         'yo'       from 6   to 8",
      "whitespace   ' '        from 8   to 9",
@ -241,7 +241,7 @@ const prop2 = yo['key']
 const key = 'key'
 const prop3 = yo[key]`)
    expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
      "whitespace   ' '        from 5   to 6",
      "word         'yo'       from 6   to 8",
      "whitespace   ' '        from 8   to 9",
@ -254,7 +254,7 @@ const prop3 = yo[key]`)
      "string       ''value''  from 17  to 24",
      "brace        '}'        from 24  to 25",
      "whitespace   '\n'        from 25  to 26",
-      "word         'const'    from 26  to 31",
+      "keyword      'const'    from 26  to 31",
      "whitespace   ' '        from 31  to 32",
      "word         'prop'     from 32  to 36",
      "whitespace   ' '        from 36  to 37",
@ -264,7 +264,7 @@ const prop3 = yo[key]`)
      "period       '.'        from 41  to 42",
      "word         'key'      from 42  to 45",
      "whitespace   '\n'        from 45  to 46",
-      "word         'const'    from 46  to 51",
+      "keyword      'const'    from 46  to 51",
      "whitespace   ' '        from 51  to 52",
      "word         'prop2'    from 52  to 57",
      "whitespace   ' '        from 57  to 58",
@ -275,7 +275,7 @@ const prop3 = yo[key]`)
      "string       ''key''    from 63  to 68",
      "brace        ']'        from 68  to 69",
      "whitespace   '\n'        from 69  to 70",
-      "word         'const'    from 70  to 75",
+      "keyword      'const'    from 70  to 75",
      "whitespace   ' '        from 75  to 76",
      "word         'key'      from 76  to 79",
      "whitespace   ' '        from 79  to 80",
@ -283,7 +283,7 @@ const prop3 = yo[key]`)
      "whitespace   ' '        from 81  to 82",
      "string       ''key''    from 82  to 87",
      "whitespace   '\n'        from 87  to 88",
-      "word         'const'    from 88  to 93",
+      "keyword      'const'    from 88  to 93",
      "whitespace   ' '        from 93  to 94",
      "word         'prop3'    from 94  to 99",
      "whitespace   ' '        from 99  to 100",
@ -299,7 +299,7 @@ const prop3 = yo[key]`)
    const result = stringSummaryLexer(`const yo = 45 // this is a comment
 const yo = 6`)
    expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
      "whitespace   ' '        from 5   to 6",
      "word         'yo'       from 6   to 8",
      "whitespace   ' '        from 8   to 9",
@ -307,9 +307,9 @@ const yo = 6`)
      "whitespace   ' '        from 10  to 11",
      "number       '45'       from 11  to 13",
      "whitespace   ' '        from 13  to 14",
-      "linecomment  '// this is a comment' from 14  to 34",
+      "lineComment  '// this is a comment' from 14  to 34",
      "whitespace   '\n'        from 34  to 35",
-      "word         'const'    from 35  to 40",
+      "keyword      'const'    from 35  to 40",
      "whitespace   ' '        from 40  to 41",
      "word         'yo'       from 41  to 43",
      "whitespace   ' '        from 43  to 44",
@ -328,9 +328,9 @@ const yo=45`)
      "string       ''hi''     from 4   to 8",
      "brace        ')'        from 8   to 9",
      "whitespace   '\n'        from 9   to 10",
-      "linecomment  '// comment on a line by itself' from 10  to 40",
+      "lineComment  '// comment on a line by itself' from 10  to 40",
      "whitespace   '\n'        from 40  to 41",
-      "word         'const'    from 41  to 46",
+      "keyword      'const'    from 41  to 46",
      "whitespace   ' '        from 46  to 47",
      "word         'yo'       from 47  to 49",
      "operator     '='        from 49  to 50",
@ -342,7 +342,7 @@ const yo=45`)
 const ya = 6 */
 const yi=45`)
    expect(result).toEqual([
-      "word         'const'    from 0   to 5",
+      "keyword      'const'    from 0   to 5",
      "whitespace   ' '        from 5   to 6",
      "word         'yo'       from 6   to 8",
      "whitespace   ' '        from 8   to 9",
@ -350,10 +350,10 @@ const yi=45`)
      "whitespace   ' '        from 10  to 11",
      "number       '45'       from 11  to 13",
      "whitespace   ' '        from 13  to 14",
-      `blockcomment '/* this is a comment
+      `blockComment '/* this is a comment
 const ya = 6 */' from 14  to 50`,
      "whitespace   '\n'        from 50  to 51",
-      "word         'const'    from 51  to 56",
+      "keyword      'const'    from 51  to 56",
      "whitespace   ' '        from 56  to 57",
      "word         'yi'       from 57  to 59",
      "operator     '='        from 59  to 60",
--- a/src/lang/tokeniser.ts
+++ b/src/lang/tokeniser.ts
@ -1,8 +1,8 @@
 import { lexer_js } from '../wasm-lib/pkg/wasm_lib'
 import { initPromise } from './rust'
-import { Token } from '../wasm-lib/bindings/Token'
+import { Token } from '../wasm-lib/kcl/bindings/Token'

-export type { Token } from '../wasm-lib/bindings/Token'
+export type { Token } from '../wasm-lib/kcl/bindings/Token'

 export async function asyncLexer(str: string): Promise<Token[]> {
  await initPromise
--- a/src/lib/commands.ts
+++ b/src/lib/commands.ts
@ -0,0 +1,124 @@
+import { AnyStateMachine, EventFrom, StateFrom } from 'xstate'
+import { isTauri } from './isTauri'
+
+type InitialCommandBarMetaArg = {
+  name: string
+  type: 'string' | 'select'
+  description?: string
+  defaultValue?: string
+  options: string | Array<{ name: string }>
+}
+
+type Platform = 'both' | 'web' | 'desktop'
+
+export type CommandBarMeta = {
+  [key: string]:
+    | {
+        displayValue: (args: string[]) => string
+        args: InitialCommandBarMetaArg[]
+        hide?: Platform
+      }
+    | {
+        hide?: Platform
+      }
+}
+
+export type Command = {
+  owner: string
+  name: string
+  callback: Function
+  meta?: {
+    displayValue(args: string[]): string | string
+    args: SubCommand[]
+  }
+}
+
+export type SubCommand = {
+  name: string
+  type: 'select' | 'string'
+  description?: string
+  options?: Partial<{ name: string }>[]
+}
+
+interface CommandBarArgs<T extends AnyStateMachine> {
+  type: EventFrom<T>['type']
+  state: StateFrom<T>
+  commandBarMeta?: CommandBarMeta
+  send: Function
+  owner: string
+}
+
+export function createMachineCommand<T extends AnyStateMachine>({
+  type,
+  state,
+  commandBarMeta,
+  send,
+  owner,
+}: CommandBarArgs<T>): Command | null {
+  const lookedUpMeta = commandBarMeta && commandBarMeta[type]
+  if (lookedUpMeta && 'hide' in lookedUpMeta) {
+    const { hide } = lookedUpMeta
+    if (hide === 'both') return null
+    else if (hide === 'desktop' && isTauri()) return null
+    else if (hide === 'web' && !isTauri()) return null
+  }
+  let replacedArgs
+
+  if (lookedUpMeta && 'args' in lookedUpMeta) {
+    replacedArgs = lookedUpMeta.args.map((arg) => {
+      const optionsFromContext = state.context[
+        arg.options as keyof typeof state.context
+      ] as { name: string }[] | string | undefined
+      const defaultValueFromContext = state.context[
+        arg.defaultValue as keyof typeof state.context
+      ] as string | undefined
+
+      const options =
+        arg.options instanceof Array
+          ? arg.options.map((o) => ({
+              ...o,
+              description:
+                defaultValueFromContext === o.name ? '(current)' : '',
+            }))
+          : !optionsFromContext || typeof optionsFromContext === 'string'
+          ? [
+              {
+                name: optionsFromContext,
+                description: arg.description || '',
+              },
+            ]
+          : optionsFromContext.map((o) => ({
+              name: o.name || '',
+              description: arg.description || '',
+            }))
+
+      return {
+        ...arg,
+        options,
+      }
+    }) as any[]
+  }
+
+  // We have to recreate this object every time,
+  // otherwise we'll have stale state in the CommandBar
+  // after completing our first action
+  const meta = lookedUpMeta
+    ? {
+        ...lookedUpMeta,
+        args: replacedArgs,
+      }
+    : undefined
+
+  return {
+    name: type,
+    owner,
+    callback: (data: EventFrom<T, typeof type>) => {
+      if (data !== undefined && data !== null) {
+        send(type, { data })
+      } else {
+        send(type)
+      }
+    },
+    meta: meta as any,
+  }
+}
--- a/src/lib/fetcher.ts
+++ b/src/lib/fetcher.ts
@ -1,16 +1,13 @@
-import { useAuthMachine } from '../hooks/useAuthMachine'
+export default function fetcher(input: RequestInfo, init: RequestInit = {}) {
+  const fetcherWithToken = async (token?: string): Promise<JSON> => {
+    const headers = { ...init.headers } as Record<string, string>
+    if (token) {
+      headers.Authorization = `Bearer ${token}`
+    }

-export default async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init: RequestInit = {}
-): Promise<JSON> {
-  const [token] = useAuthMachine((s) => s?.context?.token)
-  const headers = { ...init.headers } as Record<string, string>
-  if (token) {
-    headers.Authorization = `Bearer ${token}`
+    const credentials = 'include' as RequestCredentials
+    const res = await fetch(input, { ...init, credentials, headers })
+    return res.json()
  }
-
-  const credentials = 'include' as RequestCredentials
-  const res = await fetch(input, { ...init, credentials, headers })
-  return res.json()
+  return fetcherWithToken
 }
--- a/src/lib/getSystemTheme.ts
+++ b/src/lib/getSystemTheme.ts
@ -1,9 +0,0 @@
-import { Themes } from '../useStore'
-
-export function getSystemTheme(): Exclude<Themes, 'system'> {
-  return typeof window !== 'undefined' &&
-    'matchMedia' in window &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? Themes.Dark
-    : Themes.Light
-}
--- a/src/lib/sorting.ts
+++ b/src/lib/sorting.ts
@ -0,0 +1,64 @@
+import {
+  faArrowDown,
+  faArrowUp,
+  faCircleDot,
+} from '@fortawesome/free-solid-svg-icons'
+import { ProjectWithEntryPointMetadata } from '../Router'
+
+const DESC = ':desc'
+
+export function getSortIcon(currentSort: string, newSort: string) {
+  if (currentSort === newSort) {
+    return faArrowUp
+  } else if (currentSort === newSort + DESC) {
+    return faArrowDown
+  }
+  return faCircleDot
+}
+
+export function getNextSearchParams(currentSort: string, newSort: string) {
+  if (currentSort === null || !currentSort)
+    return { sort_by: newSort + (newSort !== 'modified' ? DESC : '') }
+  if (currentSort.includes(newSort) && !currentSort.includes(DESC))
+    return { sort_by: '' }
+  return {
+    sort_by: newSort + (currentSort.includes(DESC) ? '' : DESC),
+  }
+}
+
+export function getSortFunction(sortBy: string) {
+  const sortByName = (
+    a: ProjectWithEntryPointMetadata,
+    b: ProjectWithEntryPointMetadata
+  ) => {
+    if (a.name && b.name) {
+      return sortBy.includes('desc')
+        ? a.name.localeCompare(b.name)
+        : b.name.localeCompare(a.name)
+    }
+    return 0
+  }
+
+  const sortByModified = (
+    a: ProjectWithEntryPointMetadata,
+    b: ProjectWithEntryPointMetadata
+  ) => {
+    if (
+      a.entrypoint_metadata?.modifiedAt &&
+      b.entrypoint_metadata?.modifiedAt
+    ) {
+      return !sortBy || sortBy.includes('desc')
+        ? b.entrypoint_metadata.modifiedAt.getTime() -
+            a.entrypoint_metadata.modifiedAt.getTime()
+        : a.entrypoint_metadata.modifiedAt.getTime() -
+            b.entrypoint_metadata.modifiedAt.getTime()
+    }
+    return 0
+  }
+
+  if (sortBy?.includes('name')) {
+    return sortByName
+  } else {
+    return sortByModified
+  }
+}
--- a/src/lib/tauriFS.ts
+++ b/src/lib/tauriFS.ts
@ -1,6 +1,11 @@
-import { FileEntry, createDir, exists, writeTextFile } from '@tauri-apps/api/fs'
+import {
+  FileEntry,
+  createDir,
+  exists,
+  readDir,
+  writeTextFile,
+} from '@tauri-apps/api/fs'
 import { documentDir } from '@tauri-apps/api/path'
-import { useStore } from '../useStore'
 import { isTauri } from './isTauri'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import { metadata } from 'tauri-plugin-fs-extra-api'
@ -12,35 +17,31 @@ const INDEX_IDENTIFIER = '$n' // $nn.. will pad the number with 0s
 export const MAX_PADDING = 7

 // Initializes the project directory and returns the path
-export async function initializeProjectDirectory() {
+export async function initializeProjectDirectory(directory: string) {
  if (!isTauri()) {
    throw new Error(
      'initializeProjectDirectory() can only be called from a Tauri app'
    )
  }
-  const { defaultDir: projectDir, setDefaultDir } = useStore.getState()

-  if (projectDir && projectDir.dir.length > 0) {
-    const dirExists = await exists(projectDir.dir)
+  if (directory) {
+    const dirExists = await exists(directory)
    if (!dirExists) {
-      await createDir(projectDir.dir, { recursive: true })
+      await createDir(directory, { recursive: true })
    }
-    return projectDir
+    return directory
  }

-  const appData = await documentDir()
+  const docDirectory = await documentDir()

-  const INITIAL_DEFAULT_DIR = {
-    dir: appData + PROJECT_FOLDER,
-  }
+  const INITIAL_DEFAULT_DIR = docDirectory + PROJECT_FOLDER

-  const defaultDirExists = await exists(INITIAL_DEFAULT_DIR.dir)
+  const defaultDirExists = await exists(INITIAL_DEFAULT_DIR)

  if (!defaultDirExists) {
-    await createDir(INITIAL_DEFAULT_DIR.dir, { recursive: true })
+    await createDir(INITIAL_DEFAULT_DIR, { recursive: true })
  }

-  setDefaultDir(INITIAL_DEFAULT_DIR)
  return INITIAL_DEFAULT_DIR
 }

@ -51,6 +52,25 @@ export function isProjectDirectory(fileOrDir: Partial<FileEntry>) {
  )
 }

+// Read the contents of a directory
+// and return the valid projects
+export async function getProjectsInDir(projectDir: string) {
+  const readProjects = (
+    await readDir(projectDir, {
+      recursive: true,
+    })
+  ).filter(isProjectDirectory)
+
+  const projectsWithMetadata = await Promise.all(
+    readProjects.map(async (p) => ({
+      entrypoint_metadata: await metadata(p.path + '/' + PROJECT_ENTRYPOINT),
+      ...p,
+    }))
+  )
+
+  return projectsWithMetadata
+}
+
 // Creates a new file in the default directory with the default project name
 // Returns the path to the new file
 export async function createNewProject(
--- a/src/lib/testHelpers.ts
+++ b/src/lib/testHelpers.ts
@ -39,7 +39,6 @@ class MockEngineCommandManager {
    if (commandStr === undefined) {
      throw new Error('commandStr is undefined')
    }
-    console.log('sendModelingCommandFromWasm', id, rangeStr, commandStr)
    const command: EngineCommand = JSON.parse(commandStr)
    const range: SourceRange = JSON.parse(rangeStr)

--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@ -0,0 +1,23 @@
+export enum Themes {
+  Light = 'light',
+  Dark = 'dark',
+  System = 'system',
+}
+
+// Get the theme from the system settings manually
+export function getSystemTheme(): Exclude<Themes, 'system'> {
+  return typeof window !== 'undefined' && 'matchMedia' in window
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? Themes.Dark
+      : Themes.Light
+    : Themes.Light
+}
+
+// Set the theme class on the body element
+export function setThemeClass(theme: Themes) {
+  if (theme === Themes.Dark) {
+    document.body.classList.add('dark')
+  } else {
+    document.body.classList.remove('dark')
+  }
+}
--- a/src/machines/authMachine.ts
+++ b/src/machines/authMachine.ts
@ -1,6 +1,24 @@
 import { createMachine, assign } from 'xstate'
 import { Models } from '@kittycad/lib'
 import withBaseURL from '../lib/withBaseURL'
+import { CommandBarMeta } from '../lib/commands'
+
+const SKIP_AUTH =
+  import.meta.env.VITE_KC_SKIP_AUTH === 'true' && import.meta.env.DEV
+const LOCAL_USER: Models['User_type'] = {
+  id: '8675309',
+  name: 'Test User',
+  email: 'kittycad.sidebar.test@example.com',
+  image: 'https://placekitten.com/200/200',
+  created_at: 'yesteryear',
+  updated_at: 'today',
+  company: 'Test Company',
+  discord: 'Test User#1234',
+  github: 'testuser',
+  phone: '555-555-5555',
+  first_name: 'Test',
+  last_name: 'User',
+}

 export interface UserContext {
  user?: Models['User_type']
@ -9,16 +27,22 @@ export interface UserContext {

 export type Events =
  | {
-      type: 'logout'
+      type: 'Log out'
    }
  | {
-      type: 'tryLogin'
+      type: 'Log in'
      token?: string
    }

 export const TOKEN_PERSIST_KEY = 'TOKEN_PERSIST_KEY'
 const persistedToken = localStorage?.getItem(TOKEN_PERSIST_KEY) || ''

+export const authCommandBarMeta: CommandBarMeta = {
+  'Log in': {
+    hide: 'both',
+  },
+}
+
 export const authMachine = createMachine<UserContext, Events>(
  {
    id: 'Auth',
@ -50,7 +74,7 @@ export const authMachine = createMachine<UserContext, Events>(
      loggedIn: {
        entry: ['goToIndexPage'],
        on: {
-          logout: {
+          'Log out': {
            target: 'loggedOut',
          },
        },
@ -58,10 +82,10 @@ export const authMachine = createMachine<UserContext, Events>(
      loggedOut: {
        entry: ['goToSignInPage'],
        on: {
-          tryLogin: {
+          'Log in': {
            target: 'checkIfLoggedIn',
            actions: assign({
-              token: (context, event) => {
+              token: (_, event) => {
                const token = event.token || ''
                localStorage.setItem(TOKEN_PERSIST_KEY, token)
                return token
@ -71,10 +95,12 @@ export const authMachine = createMachine<UserContext, Events>(
        },
      },
    },
-    schema: { events: {} as { type: 'logout' } | { type: 'tryLogin' } },
+    schema: { events: {} as { type: 'Log out' } | { type: 'Log in' } },
    predictableActionArguments: true,
    preserveActionOrder: true,
-    context: { token: persistedToken },
+    context: {
+      token: persistedToken,
+    },
  },
  {
    actions: {},
@ -91,12 +117,17 @@ async function getUser(context: UserContext) {
  }
  if (!context.token && '__TAURI__' in window) throw 'not log in'
  if (context.token) headers['Authorization'] = `Bearer ${context.token}`
-  const response = await fetch(url, {
-    method: 'GET',
-    credentials: 'include',
-    headers,
-  })
-  const user = await response.json()
-  if ('error_code' in user) throw new Error(user.message)
-  return user
+  if (SKIP_AUTH) return LOCAL_USER
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      credentials: 'include',
+      headers,
+    })
+    const user = await response.json()
+    if ('error_code' in user) throw new Error(user.message)
+    return user
+  } catch (e) {
+    console.error(e)
+  }
 }
--- a/src/machines/homeMachine.ts
+++ b/src/machines/homeMachine.ts
@ -0,0 +1,218 @@
+import { assign, createMachine } from 'xstate'
+import { ProjectWithEntryPointMetadata } from '../Router'
+import { CommandBarMeta } from '../lib/commands'
+
+export const homeCommandMeta: CommandBarMeta = {
+  'Create project': {
+    displayValue: (args: string[]) => `Create project "${args[0]}"`,
+    args: [
+      {
+        name: 'name',
+        type: 'string',
+        description: '(default)',
+        options: 'defaultProjectName',
+      },
+    ],
+  },
+  'Open project': {
+    displayValue: (args: string[]) => `Open project "${args[0]}"`,
+    args: [
+      {
+        name: 'name',
+        type: 'select',
+        options: 'projects',
+      },
+    ],
+  },
+  'Delete project': {
+    displayValue: (args: string[]) => `Delete project "${args[0]}"`,
+    args: [
+      {
+        name: 'name',
+        type: 'select',
+        options: 'projects',
+      },
+    ],
+  },
+  'Rename project': {
+    displayValue: (args: string[]) =>
+      `Rename project "${args[0]}" to "${args[1]}"`,
+    args: [
+      {
+        name: 'oldName',
+        type: 'select',
+        options: 'projects',
+      },
+      {
+        name: 'newName',
+        type: 'string',
+        description: '(default)',
+        options: 'defaultProjectName',
+      },
+    ],
+  },
+  assign: {
+    hide: 'both',
+  },
+}
+
+export const homeMachine = createMachine(
+  {
+    /** @xstate-layout N4IgpgJg5mDOIC5QAkD2BbMACdBDAxgBYCWAdmAHTK6xampYAOATqgFZj4AusAxAMLMwuLthbtOXANoAGALqJQjVLGJdiqUopAAPRAHYAbPooAWABwBGUwE5zAJgeGArM-MAaEAE9EN0wGYKGX97GX1nGVNDS0MbfwBfeM80TBwCEnIqGiZWDm4+ACUwUlxU8TzpeW1lVXVNbT0EcJNg02d-fzt7fU77Tx8EQ0iKCPtnfUsjGRtLGXtE5IxsPCIySmpacsk+QWFRHIluWQUkEBq1DS1TxqN7ChjzOxtXf0t7a37EcwsRibH-ZzRezA8wLEApZbpNZZTa5ba8AAiYAANmB9lsjlVTuc6ldQDdDOYKP5bm0os5TDJDJ8mlEzPpzIZHA4bO9umCIWlVpkNgcKnwAPKMYp8yTHaoqC71a6IEmBUz6BkWZzWDq2Uw0qzOIJAwz+PXWfSmeZJcFLLkZSi7ERkKCi7i8CCaShkABuqAA1pR8EIRGAALQYyonJSS3ENRDA2wUeyvd6dPVhGw0-RhGOp8IA8xGFkc80rS0Ua3qUh2oO8MDMVjMCiMZEiABmqGY6AoPr2AaD4uxYcuEYQoQpQWNNjsMnMgLGKbT3TC7TcOfsNjzqQL0KKJXQtvtXEdzoobs9lCEm87cMxIbOvel+MQqtMQRmS5ks31sZpAUsZkcIX+cQZJIrpC3KUBupTbuWlbVrW9ZcE2LYUCepRnocwYSrUfYyggbzvBQ+jMq49imLYwTUt4iCft+5i-u0-7UfoQEWtCSKoiWZbnruTqZIeXoUBAKJoihFTdqGGE3rod7UdqsQTI8hiGAqrIauRA7RvYeoqhO1jtAqjFrpkLFohBHEVlWzYwY2zatvxrFCWKWKiVKeISdh4yBJE-jGs4fhhA4zg0kRNgxhplhaW0nn4XpUKZEUuAQMZqF8FxLqkO6vG+hAgYcbAIlXmJzmNERdy0RYNiKgpthxDSEU6q8MSTJYjWGFFIEULF8WljuSX7jxx7CJlQY5ZYl44pht4IP61gyPc8njt0lIuH51UKrVVITEyMy2C1hbtQl-KmdBdaWQhGVZYluWjeJjSTf402shMEyuEyljPAFL0UNmMiuN86lWHMiSmvQ-HwKcnL6WA6FOf2k3mESMRDA4RpUm4U4qf6gSEt0QIvvqfjOCaiyrtF6zZPQXWQ+GWFlUEsbmNMf1TV9NLeXDcqRIySnNaaYPEzC5M9vl-b+IyFCjupryPF9jKWP5Kks-cbMWLERHRNt0LFntkgU2NLk4dqsz43YsTK++Kk2C+MbTOOcxzOMrhqzFxTgZ1Qba1dd6BUE1jGsLMxxK9KlDNqm3tMLUQvqYlgO5QhlsTubsFXesTTUuPTfHExshDS0RftRftGgEnTZtHbX9Zr+QJ-2S4Y3qnmTC+4tMyp1EfeOnmeQqdOhyXQrFOXXCV1hCkmLDOnBJYvRRDSsyRzGjiKj0lKdAkANAA */
+    id: 'Home machine',
+
+    initial: 'Reading projects',
+
+    context: {
+      projects: [] as ProjectWithEntryPointMetadata[],
+      defaultProjectName: '',
+      defaultDirectory: '',
+    },
+
+    on: {
+      assign: {
+        actions: assign((_, event) => ({
+          ...event.data,
+        })),
+        target: '.Reading projects',
+      },
+    },
+    states: {
+      'Has no projects': {
+        on: {
+          'Create project': {
+            target: 'Creating project',
+          },
+        },
+      },
+
+      'Has projects': {
+        on: {
+          'Rename project': {
+            target: 'Renaming project',
+          },
+
+          'Create project': {
+            target: 'Creating project',
+          },
+
+          'Delete project': {
+            target: 'Deleting project',
+          },
+
+          'Open project': {
+            target: 'Opening project',
+          },
+        },
+      },
+
+      'Creating project': {
+        invoke: {
+          id: 'create-project',
+          src: 'createProject',
+          onDone: [
+            {
+              target: 'Reading projects',
+              actions: ['toastSuccess'],
+            },
+          ],
+          onError: [
+            {
+              target: 'Reading projects',
+              actions: ['toastError'],
+            },
+          ],
+        },
+      },
+
+      'Renaming project': {
+        invoke: {
+          id: 'rename-project',
+          src: 'renameProject',
+          onDone: [
+            {
+              target: '#Home machine.Reading projects',
+              actions: ['toastSuccess'],
+            },
+          ],
+          onError: [
+            {
+              target: '#Home machine.Reading projects',
+              actions: ['toastError'],
+            },
+          ],
+        },
+      },
+
+      'Deleting project': {
+        invoke: {
+          id: 'delete-project',
+          src: 'deleteProject',
+          onDone: [
+            {
+              actions: ['toastSuccess'],
+              target: '#Home machine.Reading projects',
+            },
+          ],
+          onError: {
+            actions: ['toastError'],
+            target: '#Home machine.Has projects',
+          },
+        },
+      },
+
+      'Reading projects': {
+        invoke: {
+          id: 'read-projects',
+          src: 'readProjects',
+          onDone: [
+            {
+              cond: 'Has at least 1 project',
+              target: 'Has projects',
+              actions: ['setProjects'],
+            },
+            {
+              target: 'Has no projects',
+              actions: ['setProjects'],
+            },
+          ],
+          onError: [
+            {
+              target: 'Has no projects',
+              actions: ['toastError'],
+            },
+          ],
+        },
+      },
+
+      'Opening project': {
+        entry: ['navigateToProject'],
+      },
+    },
+
+    schema: {
+      events: {} as
+        | { type: 'Open project'; data: { name: string } }
+        | { type: 'Rename project'; data: { oldName: string; newName: string } }
+        | { type: 'Create project'; data: { name: string } }
+        | { type: 'Delete project'; data: { name: string } }
+        | { type: 'navigate'; data: { name: string } }
+        | {
+            type: 'done.invoke.read-projects'
+            data: ProjectWithEntryPointMetadata[]
+          }
+        | { type: 'assign'; data: { [key: string]: any } },
+    },
+
+    predictableActionArguments: true,
+    preserveActionOrder: true,
+    tsTypes: {} as import('./homeMachine.typegen').Typegen0,
+  },
+  {
+    actions: {
+      setProjects: assign((_, event) => {
+        return { projects: event.data as ProjectWithEntryPointMetadata[] }
+      }),
+    },
+  }
+)
--- a/src/machines/homeMachine.typegen.ts
+++ b/src/machines/homeMachine.typegen.ts
@ -0,0 +1,99 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true
+  internalEvents: {
+    'done.invoke.create-project': {
+      type: 'done.invoke.create-project'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'done.invoke.delete-project': {
+      type: 'done.invoke.delete-project'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'done.invoke.read-projects': {
+      type: 'done.invoke.read-projects'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'done.invoke.rename-project': {
+      type: 'done.invoke.rename-project'
+      data: unknown
+      __tip: 'See the XState TS docs to learn how to strongly type this.'
+    }
+    'error.platform.create-project': {
+      type: 'error.platform.create-project'
+      data: unknown
+    }
+    'error.platform.delete-project': {
+      type: 'error.platform.delete-project'
+      data: unknown
+    }
+    'error.platform.read-projects': {
+      type: 'error.platform.read-projects'
+      data: unknown
+    }
+    'error.platform.rename-project': {
+      type: 'error.platform.rename-project'
+      data: unknown
+    }
+    'xstate.init': { type: 'xstate.init' }
+  }
+  invokeSrcNameMap: {
+    createProject: 'done.invoke.create-project'
+    deleteProject: 'done.invoke.delete-project'
+    readProjects: 'done.invoke.read-projects'
+    renameProject: 'done.invoke.rename-project'
+  }
+  missingImplementations: {
+    actions: 'navigateToProject' | 'toastError' | 'toastSuccess'
+    delays: never
+    guards: 'Has at least 1 project'
+    services:
+      | 'createProject'
+      | 'deleteProject'
+      | 'readProjects'
+      | 'renameProject'
+  }
+  eventsCausingActions: {
+    navigateToProject: 'Open project'
+    setProjects: 'done.invoke.read-projects'
+    toastError:
+      | 'error.platform.create-project'
+      | 'error.platform.delete-project'
+      | 'error.platform.read-projects'
+      | 'error.platform.rename-project'
+    toastSuccess:
+      | 'done.invoke.create-project'
+      | 'done.invoke.delete-project'
+      | 'done.invoke.rename-project'
+  }
+  eventsCausingDelays: {}
+  eventsCausingGuards: {
+    'Has at least 1 project': 'done.invoke.read-projects'
+  }
+  eventsCausingServices: {
+    createProject: 'Create project'
+    deleteProject: 'Delete project'
+    readProjects:
+      | 'assign'
+      | 'done.invoke.create-project'
+      | 'done.invoke.delete-project'
+      | 'done.invoke.rename-project'
+      | 'error.platform.create-project'
+      | 'error.platform.rename-project'
+      | 'xstate.init'
+    renameProject: 'Rename project'
+  }
+  matchesStates:
+    | 'Creating project'
+    | 'Deleting project'
+    | 'Has no projects'
+    | 'Has projects'
+    | 'Opening project'
+    | 'Reading projects'
+    | 'Renaming project'
+  tags: never
+}
--- a/src/machines/settingsMachine.ts
+++ b/src/machines/settingsMachine.ts
@ -0,0 +1,231 @@
+import { assign, createMachine } from 'xstate'
+import { BaseUnit, baseUnitsUnion } from '../useStore'
+import { CommandBarMeta } from '../lib/commands'
+import { Themes, getSystemTheme, setThemeClass } from '../lib/theme'
+
+export enum UnitSystem {
+  Imperial = 'imperial',
+  Metric = 'metric',
+}
+
+export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY'
+
+export const settingsCommandBarMeta: CommandBarMeta = {
+  'Set Theme': {
+    displayValue: (args: string[]) => 'Change the app theme',
+    args: [
+      {
+        name: 'theme',
+        type: 'select',
+        defaultValue: 'theme',
+        options: Object.values(Themes).map((v) => ({ name: v })) as {
+          name: string
+        }[],
+      },
+    ],
+  },
+  'Set Default Project Name': {
+    displayValue: (args: string[]) => 'Set a new default project name',
+    hide: 'web',
+    args: [
+      {
+        name: 'defaultProjectName',
+        type: 'string',
+        description: '(default)',
+        defaultValue: 'defaultProjectName',
+        options: 'defaultProjectName',
+      },
+    ],
+  },
+  'Set Default Directory': {
+    hide: 'both',
+  },
+  'Set Unit System': {
+    displayValue: (args: string[]) => 'Set your default unit system',
+    args: [
+      {
+        name: 'unitSystem',
+        type: 'select',
+        defaultValue: 'unitSystem',
+        options: [{ name: UnitSystem.Imperial }, { name: UnitSystem.Metric }],
+      },
+    ],
+  },
+  'Set Base Unit': {
+    displayValue: (args: string[]) => 'Set your default base unit',
+    args: [
+      {
+        name: 'baseUnit',
+        type: 'select',
+        defaultValue: 'baseUnit',
+        options: Object.values(baseUnitsUnion).map((v) => ({ name: v })),
+      },
+    ],
+  },
+  'Set Text Wrapping': {
+    displayValue: (args: string[]) => 'Set whether text in the editor wraps',
+    args: [
+      {
+        name: 'textWrapping',
+        type: 'select',
+        defaultValue: 'textWrapping',
+        options: [{ name: 'On' }, { name: 'Off' }],
+      },
+    ],
+  },
+  'Set Onboarding Status': {
+    hide: 'both',
+  },
+}
+
+export const settingsMachine = createMachine(
+  {
+    /** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlTQAIAVACzAFswBtABgF1FQAHAe1iYsfbNxAAPRAA42+AEwB2KQFYAzGznKAnADZli1QBoQAT2kBGKfm37lOned3nzqgL6vjlLLgJFSFdCoAETAAMwBDAFdiagAFACc+ACswAGNqADlw5nYuJBB+QWFRfMkEABY5fDYa2rra83LjMwQdLWV8BXLyuxlVLU1Ld090bzxCEnJKYLComODMeLS0PniTXLFCoUwRMTK7fC1zNql7NgUjtnKjU0RlBSqpLVUVPVUda60tYZAvHHG-FNAgBVbBCKjIEywNBMDb5LbFPaILqdfRSORsS4qcxXZqIHqyK6qY4XOxsGTKco-P4+Cb+aYAIXCsDAVFBQjhvAE212pWkskUKnUml0+gUNxaqkU+EccnKF1UCnucnMcjcHl+o3+vkmZBofCgUFIMwARpEoFRYuFsGBiJyCtzEXzWrJlGxlKdVFKvfY1XiEBjyvhVOVzBdzu13pYFNStbTAQFqAB5bAmvjheIQf4QtDhNCRWD2hE7EqgfayHTEh7lHQNSxSf1Scz4cpHHFyFVujTKczuDXYPgQOBiGl4TaOktIhAAWg6X3nC4Xp39050sYw2rpYHHRUnztVhPJqmUlIGbEriv9WhrLZ6uibHcqUr7riAA */
+    id: 'Settings',
+    predictableActionArguments: true,
+    context: {
+      theme: Themes.System,
+      defaultProjectName: '',
+      unitSystem: UnitSystem.Imperial,
+      baseUnit: 'in' as BaseUnit,
+      defaultDirectory: '',
+      textWrapping: 'On' as 'On' | 'Off',
+      showDebugPanel: false,
+      onboardingStatus: '',
+    },
+    initial: 'idle',
+    states: {
+      idle: {
+        entry: ['setThemeClass'],
+        on: {
+          'Set Theme': {
+            actions: [
+              assign({
+                theme: (_, event) => event.data.theme,
+              }),
+              'persistSettings',
+              'toastSuccess',
+              'setThemeClass',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Default Project Name': {
+            actions: [
+              assign({
+                defaultProjectName: (_, event) => event.data.defaultProjectName,
+              }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Default Directory': {
+            actions: [
+              assign({
+                defaultDirectory: (_, event) => event.data.defaultDirectory,
+              }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Unit System': {
+            actions: [
+              assign({
+                unitSystem: (_, event) => event.data.unitSystem,
+                baseUnit: (_, event) =>
+                  event.data.unitSystem === 'imperial' ? 'in' : 'mm',
+              }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Base Unit': {
+            actions: [
+              assign({ baseUnit: (_, event) => event.data.baseUnit }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Text Wrapping': {
+            actions: [
+              assign({
+                textWrapping: (_, event) => event.data.textWrapping,
+              }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Toggle Debug Panel': {
+            actions: [
+              assign({
+                showDebugPanel: (context) => {
+                  return !context.showDebugPanel
+                },
+              }),
+              'persistSettings',
+              'toastSuccess',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+          'Set Onboarding Status': {
+            actions: [
+              assign({
+                onboardingStatus: (_, event) => event.data.onboardingStatus,
+              }),
+              'persistSettings',
+            ],
+            target: 'idle',
+            internal: true,
+          },
+        },
+      },
+    },
+    tsTypes: {} as import('./settingsMachine.typegen').Typegen0,
+    schema: {
+      events: {} as
+        | { type: 'Set Theme'; data: { theme: Themes } }
+        | {
+            type: 'Set Default Project Name'
+            data: { defaultProjectName: string }
+          }
+        | { type: 'Set Default Directory'; data: { defaultDirectory: string } }
+        | {
+            type: 'Set Unit System'
+            data: { unitSystem: UnitSystem }
+          }
+        | { type: 'Set Base Unit'; data: { baseUnit: BaseUnit } }
+        | { type: 'Set Text Wrapping'; data: { textWrapping: 'On' | 'Off' } }
+        | { type: 'Set Onboarding Status'; data: { onboardingStatus: string } }
+        | { type: 'Toggle Debug Panel' },
+    },
+  },
+  {
+    actions: {
+      persistSettings: (context) => {
+        try {
+          localStorage.setItem(SETTINGS_PERSIST_KEY, JSON.stringify(context))
+        } catch (e) {
+          console.error(e)
+        }
+      },
+      setThemeClass: (context, event) => {
+        const currentTheme =
+          event.type === 'Set Theme' ? event.data.theme : context.theme
+        setThemeClass(
+          currentTheme === Themes.System ? getSystemTheme() : currentTheme
+        )
+      },
+    },
+  }
+)
--- a/src/machines/settingsMachine.typegen.ts
+++ b/src/machines/settingsMachine.typegen.ts
@ -0,0 +1,49 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true
+  internalEvents: {
+    'xstate.init': { type: 'xstate.init' }
+  }
+  invokeSrcNameMap: {}
+  missingImplementations: {
+    actions: 'toastSuccess'
+    delays: never
+    guards: never
+    services: never
+  }
+  eventsCausingActions: {
+    persistSettings:
+      | 'Set Base Unit'
+      | 'Set Default Directory'
+      | 'Set Default Project Name'
+      | 'Set Onboarding Status'
+      | 'Set Text Wrapping'
+      | 'Set Theme'
+      | 'Set Unit System'
+      | 'Toggle Debug Panel'
+    setThemeClass:
+      | 'Set Base Unit'
+      | 'Set Default Directory'
+      | 'Set Default Project Name'
+      | 'Set Onboarding Status'
+      | 'Set Text Wrapping'
+      | 'Set Theme'
+      | 'Set Unit System'
+      | 'Toggle Debug Panel'
+      | 'xstate.init'
+    toastSuccess:
+      | 'Set Base Unit'
+      | 'Set Default Directory'
+      | 'Set Default Project Name'
+      | 'Set Text Wrapping'
+      | 'Set Theme'
+      | 'Set Unit System'
+      | 'Toggle Debug Panel'
+  }
+  eventsCausingDelays: {}
+  eventsCausingGuards: {}
+  eventsCausingServices: {}
+  matchesStates: 'idle'
+  tags: never
+}
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@ -1,93 +1,139 @@
-import { FormEvent, useCallback, useEffect, useState } from 'react'
-import { readDir, removeDir, renameFile } from '@tauri-apps/api/fs'
+import { FormEvent, useEffect } from 'react'
+import { removeDir, renameFile } from '@tauri-apps/api/fs'
 import {
  createNewProject,
  getNextProjectIndex,
  interpolateProjectNameWithIndex,
  doesProjectNameNeedInterpolated,
-  isProjectDirectory,
-  PROJECT_ENTRYPOINT,
+  getProjectsInDir,
 } from '../lib/tauriFS'
 import { ActionButton } from '../components/ActionButton'
-import {
-  faArrowDown,
-  faArrowUp,
-  faCircleDot,
-  faPlus,
-} from '@fortawesome/free-solid-svg-icons'
-import { useStore } from '../useStore'
+import { faArrowDown, faPlus } from '@fortawesome/free-solid-svg-icons'
 import { toast } from 'react-hot-toast'
 import { AppHeader } from '../components/AppHeader'
 import ProjectCard from '../components/ProjectCard'
-import { useLoaderData, useSearchParams } from 'react-router-dom'
+import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import { ProjectWithEntryPointMetadata, HomeLoaderData } from '../Router'
 import Loading from '../components/Loading'
-import { metadata } from 'tauri-plugin-fs-extra-api'
-
-const DESC = ':desc'
+import { useMachine } from '@xstate/react'
+import { homeCommandMeta, homeMachine } from '../machines/homeMachine'
+import { ContextFrom, EventFrom } from 'xstate'
+import { paths } from '../Router'
+import {
+  getNextSearchParams,
+  getSortFunction,
+  getSortIcon,
+} from '../lib/sorting'
+import useStateMachineCommands from '../hooks/useStateMachineCommands'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { useCommandsContext } from 'hooks/useCommandsContext'

 // This route only opens in the Tauri desktop context for now,
 // as defined in Router.tsx, so we can use the Tauri APIs and types.
 const Home = () => {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const sort = searchParams.get('sort_by') ?? 'modified:desc'
+  const { commands, setCommandBarOpen } = useCommandsContext()
+  const navigate = useNavigate()
  const { projects: loadedProjects } = useLoaderData() as HomeLoaderData
-  const [isLoading, setIsLoading] = useState(true)
-  const [projects, setProjects] = useState(loadedProjects || [])
-  const { defaultDir, defaultProjectName } = useStore((s) => ({
-    defaultDir: s.defaultDir,
-    defaultProjectName: s.defaultProjectName,
-  }))
+  const {
+    settings: {
+      context: { defaultDirectory, defaultProjectName },
+    },
+  } = useGlobalStateContext()

-  const modifiedSelected = sort?.includes('modified') || !sort || sort === null
+  const [state, send] = useMachine(homeMachine, {
+    context: {
+      projects: loadedProjects,
+      defaultProjectName,
+      defaultDirectory,
+    },
+    actions: {
+      navigateToProject: (
+        context: ContextFrom<typeof homeMachine>,
+        event: EventFrom<typeof homeMachine>
+      ) => {
+        if (event.data && 'name' in event.data) {
+          setCommandBarOpen(false)
+          navigate(
+            `${paths.FILE}/${encodeURIComponent(
+              context.defaultDirectory + '/' + event.data.name
+            )}`
+          )
+        }
+      },
+      toastSuccess: (_, event) => toast.success((event.data || '') + ''),
+      toastError: (_, event) => toast.error((event.data || '') + ''),
+    },
+    services: {
+      readProjects: async (context: ContextFrom<typeof homeMachine>) =>
+        getProjectsInDir(context.defaultDirectory),
+      createProject: async (
+        context: ContextFrom<typeof homeMachine>,
+        event: EventFrom<typeof homeMachine, 'Create project'>
+      ) => {
+        let name =
+          event.data && 'name' in event.data
+            ? event.data.name
+            : defaultProjectName
+        if (doesProjectNameNeedInterpolated(name)) {
+          const nextIndex = await getNextProjectIndex(name, projects)
+          name = interpolateProjectNameWithIndex(name, nextIndex)
+        }

-  const refreshProjects = useCallback(
-    async (projectDir = defaultDir) => {
-      const readProjects = (
-        await readDir(projectDir.dir, {
+        await createNewProject(context.defaultDirectory + '/' + name)
+        return `Successfully created "${name}"`
+      },
+      renameProject: async (
+        context: ContextFrom<typeof homeMachine>,
+        event: EventFrom<typeof homeMachine, 'Rename project'>
+      ) => {
+        const { oldName, newName } = event.data
+        let name = newName ? newName : context.defaultProjectName
+        if (doesProjectNameNeedInterpolated(name)) {
+          const nextIndex = await getNextProjectIndex(name, projects)
+          name = interpolateProjectNameWithIndex(name, nextIndex)
+        }
+
+        await renameFile(
+          context.defaultDirectory + '/' + oldName,
+          context.defaultDirectory + '/' + name
+        )
+        return `Successfully renamed "${oldName}" to "${name}"`
+      },
+      deleteProject: async (
+        context: ContextFrom<typeof homeMachine>,
+        event: EventFrom<typeof homeMachine, 'Delete project'>
+      ) => {
+        await removeDir(context.defaultDirectory + '/' + event.data.name, {
          recursive: true,
        })
-      ).filter(isProjectDirectory)
-
-      const projectsWithMetadata = await Promise.all(
-        readProjects.map(async (p) => ({
-          entrypoint_metadata: await metadata(
-            p.path + '/' + PROJECT_ENTRYPOINT
-          ),
-          ...p,
-        }))
-      )
-
-      setProjects(projectsWithMetadata)
+        return `Successfully deleted "${event.data.name}"`
+      },
    },
-    [defaultDir, setProjects]
-  )
+    guards: {
+      'Has at least 1 project': (_, event: EventFrom<typeof homeMachine>) => {
+        if (event.type !== 'done.invoke.read-projects') return false
+        return event?.data?.length ? event.data?.length >= 1 : false
+      },
+    },
+  })
+  const { projects } = state.context
+  const [searchParams, setSearchParams] = useSearchParams()
+  const sort = searchParams.get('sort_by') ?? 'modified:desc'
+
+  const isSortByModified = sort?.includes('modified') || !sort || sort === null
+
+  useStateMachineCommands<typeof homeMachine>({
+    commands,
+    send,
+    state,
+    commandBarMeta: homeCommandMeta,
+    owner: 'home',
+  })

  useEffect(() => {
-    refreshProjects(defaultDir).then(() => {
-      setIsLoading(false)
-    })
-  }, [setIsLoading, refreshProjects, defaultDir])
-
-  async function handleNewProject() {
-    let projectName = defaultProjectName
-    if (doesProjectNameNeedInterpolated(projectName)) {
-      const nextIndex = await getNextProjectIndex(defaultProjectName, projects)
-      projectName = interpolateProjectNameWithIndex(
-        defaultProjectName,
-        nextIndex
-      )
-    }
-
-    await createNewProject(defaultDir.dir + '/' + projectName).catch((err) => {
-      console.error('Error creating project:', err)
-      toast.error('Error creating project')
-    })
-
-    await refreshProjects()
-    toast.success('Project created')
-  }
+    send({ type: 'assign', data: { defaultProjectName, defaultDirectory } })
+  }, [defaultDirectory, defaultProjectName, send])

  async function handleRenameProject(
    e: FormEvent<HTMLFormElement>,
@ -96,85 +142,14 @@ const Home = () => {
    const { newProjectName } = Object.fromEntries(
      new FormData(e.target as HTMLFormElement)
    )
-    if (newProjectName && project.name && newProjectName !== project.name) {
-      const dir = project.path?.slice(0, project.path?.lastIndexOf('/'))
-      await renameFile(project.path, dir + '/' + newProjectName).catch(
-        (err) => {
-          console.error('Error renaming project:', err)
-          toast.error('Error renaming project')
-        }
-      )

-      await refreshProjects()
-      toast.success('Project renamed')
-    }
+    send('Rename project', {
+      data: { oldName: project.name, newName: newProjectName },
+    })
  }

  async function handleDeleteProject(project: ProjectWithEntryPointMetadata) {
-    if (project.path) {
-      await removeDir(project.path, { recursive: true }).catch((err) => {
-        console.error('Error deleting project:', err)
-        toast.error('Error deleting project')
-      })
-
-      await refreshProjects()
-      toast.success('Project deleted')
-    }
-  }
-
-  function getSortIcon(sortBy: string) {
-    if (sort === sortBy) {
-      return faArrowUp
-    } else if (sort === sortBy + DESC) {
-      return faArrowDown
-    }
-    return faCircleDot
-  }
-
-  function getNextSearchParams(sortBy: string) {
-    if (sort === null || !sort)
-      return { sort_by: sortBy + (sortBy !== 'modified' ? DESC : '') }
-    if (sort.includes(sortBy) && !sort.includes(DESC)) return { sort_by: '' }
-    return {
-      sort_by: sortBy + (sort.includes(DESC) ? '' : DESC),
-    }
-  }
-
-  function getSortFunction(sortBy: string) {
-    const sortByName = (
-      a: ProjectWithEntryPointMetadata,
-      b: ProjectWithEntryPointMetadata
-    ) => {
-      if (a.name && b.name) {
-        return sortBy.includes('desc')
-          ? a.name.localeCompare(b.name)
-          : b.name.localeCompare(a.name)
-      }
-      return 0
-    }
-
-    const sortByModified = (
-      a: ProjectWithEntryPointMetadata,
-      b: ProjectWithEntryPointMetadata
-    ) => {
-      if (
-        a.entrypoint_metadata?.modifiedAt &&
-        b.entrypoint_metadata?.modifiedAt
-      ) {
-        return !sortBy || sortBy.includes('desc')
-          ? b.entrypoint_metadata.modifiedAt.getTime() -
-              a.entrypoint_metadata.modifiedAt.getTime()
-          : a.entrypoint_metadata.modifiedAt.getTime() -
-              b.entrypoint_metadata.modifiedAt.getTime()
-      }
-      return 0
-    }
-
-    if (sortBy?.includes('name')) {
-      return sortByName
-    } else {
-      return sortByModified
-    }
+    send('Delete project', { data: { name: project.name || '' } })
  }

  return (
@ -191,9 +166,9 @@ const Home = () => {
                  ? 'text-chalkboard-80 dark:text-chalkboard-40'
                  : ''
              }
-              onClick={() => setSearchParams(getNextSearchParams('name'))}
+              onClick={() => setSearchParams(getNextSearchParams(sort, 'name'))}
              icon={{
-                icon: getSortIcon('name'),
+                icon: getSortIcon(sort, 'name'),
                bgClassName: !sort?.includes('name')
                  ? 'bg-liquid-50 dark:bg-liquid-70'
                  : '',
@ -207,17 +182,19 @@ const Home = () => {
            <ActionButton
              Element="button"
              className={
-                !modifiedSelected
+                !isSortByModified
                  ? 'text-chalkboard-80 dark:text-chalkboard-40'
                  : ''
              }
-              onClick={() => setSearchParams(getNextSearchParams('modified'))}
+              onClick={() =>
+                setSearchParams(getNextSearchParams(sort, 'modified'))
+              }
              icon={{
-                icon: sort ? getSortIcon('modified') : faArrowDown,
-                bgClassName: !modifiedSelected
+                icon: sort ? getSortIcon(sort, 'modified') : faArrowDown,
+                bgClassName: !isSortByModified
                  ? 'bg-liquid-50 dark:bg-liquid-70'
                  : '',
-                iconClassName: !modifiedSelected
+                iconClassName: !isSortByModified
                  ? 'text-liquid-80 dark:text-liquid-30'
                  : '',
              }}
@ -230,11 +207,11 @@ const Home = () => {
          <p className="my-4 text-sm text-chalkboard-80 dark:text-chalkboard-30">
            Are being saved at{' '}
            <code className="text-liquid-80 dark:text-liquid-30">
-              {defaultDir.dir}
+              {defaultDirectory}
            </code>
            , which you can change in your <Link to="settings">Settings</Link>.
          </p>
-          {isLoading ? (
+          {state.matches('Reading projects') ? (
            <Loading>Loading your Projects...</Loading>
          ) : (
            <>
@ -256,7 +233,7 @@ const Home = () => {
              )}
              <ActionButton
                Element="button"
-                onClick={handleNewProject}
+                onClick={() => send('Create project')}
                icon={{ icon: faPlus }}
              >
                New file
--- a/src/routes/Onboarding/Camera.tsx
+++ b/src/routes/Onboarding/Camera.tsx
@ -20,9 +20,25 @@ export default function Units() {
      >
        <h1 className="text-2xl font-bold">Camera</h1>
        <p className="mt-6">
-          Moving the camera is easy. Just click and drag anywhere in the scene
-          to rotate the camera, or hold down the <kbd>Ctrl</kbd> key and drag to
-          pan the camera.
+          Moving the camera is easy! The controls are as you might expect:
+        </p>
+        <ul className="list-disc list-outside ms-8 mb-4">
+          <li>Click and drag anywhere in the scene to rotate the camera</li>
+          <li>
+            Hold down the <kbd>Shift</kbd> key while clicking and dragging to
+            pan the camera
+          </li>
+          <li>
+            Hold down the <kbd>Ctrl</kbd> key while dragging to zoom. You can
+            also use the scroll wheel to zoom in and out.
+          </li>
+        </ul>
+        <p>
+          What you're seeing here is just a video, and your interactions are
+          being sent to our Geometry Engine API, which sends back video frames
+          in real time. How cool is that? It means that you can use KittyCAD
+          Modeling App (or whatever you want to build) on any device, even a
+          cheap laptop with no graphics card!
        </p>
        <div className="flex justify-between mt-6">
          <ActionButton
--- a/src/routes/Onboarding/Units.tsx
+++ b/src/routes/Onboarding/Units.tsx
@ -1,34 +1,21 @@
 import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { baseUnits, useStore } from '../../useStore'
+import { BaseUnit, baseUnits } from '../../useStore'
 import { ActionButton } from '../../components/ActionButton'
 import { SettingsSection } from '../Settings'
 import { Toggle } from '../../components/Toggle/Toggle'
-import { useState } from 'react'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { UnitSystem } from 'machines/settingsMachine'

 export default function Units() {
  const dismiss = useDismiss()
  const next = useNextClick(onboardingPaths.CAMERA)
  const {
-    defaultUnitSystem: ogDefaultUnitSystem,
-    setDefaultUnitSystem: saveDefaultUnitSystem,
-    defaultBaseUnit: ogDefaultBaseUnit,
-    setDefaultBaseUnit: saveDefaultBaseUnit,
-  } = useStore((s) => ({
-    defaultUnitSystem: s.defaultUnitSystem,
-    setDefaultUnitSystem: s.setDefaultUnitSystem,
-    defaultBaseUnit: s.defaultBaseUnit,
-    setDefaultBaseUnit: s.setDefaultBaseUnit,
-  }))
-  const [defaultUnitSystem, setDefaultUnitSystem] =
-    useState(ogDefaultUnitSystem)
-  const [defaultBaseUnit, setDefaultBaseUnit] = useState(ogDefaultBaseUnit)
-
-  function handleNextClick() {
-    saveDefaultUnitSystem(defaultUnitSystem)
-    saveDefaultBaseUnit(defaultBaseUnit)
-    next()
-  }
+    settings: {
+      send,
+      context: { unitSystem, baseUnit },
+    },
+  } = useGlobalStateContext()

  return (
    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
@ -42,10 +29,16 @@ export default function Units() {
            offLabel="Imperial"
            onLabel="Metric"
            name="settings-units"
-            checked={defaultUnitSystem === 'metric'}
-            onChange={(e) =>
-              setDefaultUnitSystem(e.target.checked ? 'metric' : 'imperial')
-            }
+            checked={unitSystem === UnitSystem.Metric}
+            onChange={(e) => {
+              const newUnitSystem = e.target.checked
+                ? UnitSystem.Metric
+                : UnitSystem.Imperial
+              send({
+                type: 'Set Unit System',
+                data: { unitSystem: newUnitSystem },
+              })
+            }}
          />
        </SettingsSection>
        <SettingsSection
@ -55,10 +48,15 @@ export default function Units() {
          <select
            id="base-unit"
            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
-            value={defaultBaseUnit}
-            onChange={(e) => setDefaultBaseUnit(e.target.value)}
+            value={baseUnit}
+            onChange={(e) => {
+              send({
+                type: 'Set Base Unit',
+                data: { baseUnit: e.target.value as BaseUnit },
+              })
+            }}
          >
-            {baseUnits[defaultUnitSystem].map((unit) => (
+            {baseUnits[unitSystem].map((unit) => (
              <option key={unit} value={unit}>
                {unit}
              </option>
@ -81,7 +79,7 @@ export default function Units() {
          </ActionButton>
          <ActionButton
            Element="button"
-            onClick={handleNextClick}
+            onClick={next}
            icon={{ icon: faArrowRight }}
          >
            Next: Camera
--- a/src/routes/Onboarding/index.tsx
+++ b/src/routes/Onboarding/index.tsx
@ -1,13 +1,12 @@
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Outlet, useNavigate } from 'react-router-dom'
-import { useStore } from '../../useStore'
-
 import Introduction from './Introduction'
 import Units from './Units'
 import Camera from './Camera'
 import Sketching from './Sketching'
 import { useCallback } from 'react'
 import makeUrlPathRelative from '../../lib/makeUrlPathRelative'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'

 export const onboardingPaths = {
  INDEX: '/',
@ -36,29 +35,35 @@ export const onboardingRoutes = [
 ]

 export function useNextClick(newStatus: string) {
-  const { setOnboardingStatus } = useStore((s) => ({
-    setOnboardingStatus: s.setOnboardingStatus,
-  }))
+  const {
+    settings: { send },
+  } = useGlobalStateContext()
  const navigate = useNavigate()

  return useCallback(() => {
-    setOnboardingStatus(newStatus)
+    send({
+      type: 'Set Onboarding Status',
+      data: { onboardingStatus: newStatus },
+    })
    navigate((newStatus !== onboardingPaths.UNITS ? '..' : '.') + newStatus)
-  }, [newStatus, setOnboardingStatus, navigate])
+  }, [newStatus, send, navigate])
 }

 export function useDismiss() {
-  const { setOnboardingStatus } = useStore((s) => ({
-    setOnboardingStatus: s.setOnboardingStatus,
-  }))
+  const {
+    settings: { send },
+  } = useGlobalStateContext()
  const navigate = useNavigate()

  return useCallback(
    (path: string) => {
-      setOnboardingStatus('dismissed')
+      send({
+        type: 'Set Onboarding Status',
+        data: { onboardingStatus: 'dismissed' },
+      })
      navigate(path)
    },
-    [setOnboardingStatus, navigate]
+    [send, navigate]
  )
 }

--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@ -6,59 +6,48 @@ import {
 import { ActionButton } from '../components/ActionButton'
 import { AppHeader } from '../components/AppHeader'
 import { open } from '@tauri-apps/api/dialog'
-import { Themes, baseUnits, useStore } from '../useStore'
-import { useRef } from 'react'
-import { toast } from 'react-hot-toast'
+import { BaseUnit, baseUnits } from '../useStore'
 import { Toggle } from '../components/Toggle/Toggle'
-import { useNavigate, useRouteLoaderData } from 'react-router-dom'
+import { useLocation, useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { IndexLoaderData, paths } from '../Router'
+import { Themes } from '../lib/theme'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { UnitSystem } from 'machines/settingsMachine'

 export const Settings = () => {
  const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData
  const navigate = useNavigate()
+  const location = useLocation()
  useHotkeys('esc', () => navigate('../'))
  const {
-    defaultDir,
-    setDefaultDir,
-    defaultProjectName,
-    setDefaultProjectName,
-    defaultUnitSystem,
-    setDefaultUnitSystem,
-    defaultBaseUnit,
-    setDefaultBaseUnit,
-    setDebugPanel,
-    debugPanel,
-    setOnboardingStatus,
-    theme,
-    setTheme,
-  } = useStore((s) => ({
-    defaultDir: s.defaultDir,
-    setDefaultDir: s.setDefaultDir,
-    defaultProjectName: s.defaultProjectName,
-    setDefaultProjectName: s.setDefaultProjectName,
-    defaultUnitSystem: s.defaultUnitSystem,
-    setDefaultUnitSystem: s.setDefaultUnitSystem,
-    defaultBaseUnit: s.defaultBaseUnit,
-    setDefaultBaseUnit: s.setDefaultBaseUnit,
-    setDebugPanel: s.setDebugPanel,
-    debugPanel: s.debugPanel,
-    setOnboardingStatus: s.setOnboardingStatus,
-    theme: s.theme,
-    setTheme: s.setTheme,
-  }))
-  const ogDefaultDir = useRef(defaultDir)
-  const ogDefaultProjectName = useRef(defaultProjectName)
+    settings: {
+      send,
+      state: {
+        context: {
+          defaultProjectName,
+          showDebugPanel,
+          defaultDirectory,
+          unitSystem,
+          baseUnit,
+          theme,
+        },
+      },
+    },
+  } = useGlobalStateContext()

  async function handleDirectorySelection() {
    const newDirectory = await open({
      directory: true,
-      defaultPath: (defaultDir.base || '') + (defaultDir.dir || paths.INDEX),
+      defaultPath: defaultDirectory || paths.INDEX,
      title: 'Choose a new default directory',
    })

    if (newDirectory && newDirectory !== null && !Array.isArray(newDirectory)) {
-      setDefaultDir({ base: defaultDir.base, dir: newDirectory })
+      send({
+        type: 'Set Default Directory',
+        data: { defaultDirectory: newDirectory },
+      })
    }
  }

@ -102,18 +91,8 @@ export const Settings = () => {
              <div className="w-full flex gap-4 p-1 rounded border border-chalkboard-30">
                <input
                  className="flex-1 px-2 bg-transparent"
-                  value={defaultDir.dir}
-                  onChange={(e) => {
-                    setDefaultDir({
-                      base: defaultDir.base,
-                      dir: e.target.value,
-                    })
-                  }}
-                  onBlur={() => {
-                    ogDefaultDir.current.dir !== defaultDir.dir &&
-                      toast.success('Default directory updated')
-                    ogDefaultDir.current.dir = defaultDir.dir
-                  }}
+                  value={defaultDirectory}
+                  disabled
                />
                <ActionButton
                  Element="button"
@ -137,15 +116,15 @@ export const Settings = () => {
            >
              <input
                className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
-                value={defaultProjectName}
-                onChange={(e) => {
-                  setDefaultProjectName(e.target.value)
-                }}
-                onBlur={() => {
-                  ogDefaultProjectName.current !== defaultProjectName &&
-                    toast.success('Default project name updated')
-                  ogDefaultProjectName.current = defaultProjectName
+                defaultValue={defaultProjectName}
+                onBlur={(e) => {
+                  send({
+                    type: 'Set Default Project Name',
+                    data: { defaultProjectName: e.target.value },
+                  })
                }}
+                autoCapitalize="off"
+                autoComplete="off"
              />
            </SettingsSection>
          </>
@ -158,12 +137,15 @@ export const Settings = () => {
            offLabel="Imperial"
            onLabel="Metric"
            name="settings-units"
-            checked={defaultUnitSystem === 'metric'}
+            checked={unitSystem === UnitSystem.Metric}
            onChange={(e) => {
-              const newUnitSystem = e.target.checked ? 'metric' : 'imperial'
-              setDefaultUnitSystem(newUnitSystem)
-              setDefaultBaseUnit(baseUnits[newUnitSystem][0])
-              toast.success('Unit system set to ' + newUnitSystem)
+              const newUnitSystem = e.target.checked
+                ? UnitSystem.Metric
+                : UnitSystem.Imperial
+              send({
+                type: 'Set Unit System',
+                data: { unitSystem: newUnitSystem },
+              })
            }}
          />
        </SettingsSection>
@ -174,13 +156,15 @@ export const Settings = () => {
          <select
            id="base-unit"
            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
-            value={defaultBaseUnit}
+            value={baseUnit}
            onChange={(e) => {
-              setDefaultBaseUnit(e.target.value)
-              toast.success('Base unit changed to ' + e.target.value)
+              send({
+                type: 'Set Base Unit',
+                data: { baseUnit: e.target.value as BaseUnit },
+              })
            }}
          >
-            {baseUnits[defaultUnitSystem].map((unit) => (
+            {baseUnits[unitSystem as keyof typeof baseUnits].map((unit) => (
              <option key={unit} value={unit}>
                {unit}
              </option>
@ -193,12 +177,9 @@ export const Settings = () => {
        >
          <Toggle
            name="settings-debug-panel"
-            checked={debugPanel}
+            checked={showDebugPanel}
            onChange={(e) => {
-              setDebugPanel(e.target.checked)
-              toast.success(
-                'Debug panel toggled ' + (e.target.checked ? 'on' : 'off')
-              )
+              send('Toggle Debug Panel')
            }}
          />
        </SettingsSection>
@ -211,12 +192,10 @@ export const Settings = () => {
            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
            value={theme}
            onChange={(e) => {
-              setTheme(e.target.value as Themes)
-              toast.success(
-                'Theme changed to ' +
-                  e.target.value.slice(0, 1).toLocaleUpperCase() +
-                  e.target.value.slice(1)
-              )
+              send({
+                type: 'Set Theme',
+                data: { theme: e.target.value as Themes },
+              })
            }}
          >
            {Object.entries(Themes).map(([label, value]) => (
@ -226,21 +205,26 @@ export const Settings = () => {
            ))}
          </select>
        </SettingsSection>
-        <SettingsSection
-          title="Onboarding"
-          description="Replay the onboarding process"
-        >
-          <ActionButton
-            Element="button"
-            onClick={() => {
-              setOnboardingStatus('')
-              navigate('..' + paths.ONBOARDING.INDEX)
-            }}
-            icon={{ icon: faArrowRotateBack }}
+        {location.pathname.includes(paths.FILE) && (
+          <SettingsSection
+            title="Onboarding"
+            description="Replay the onboarding process"
          >
-            Replay Onboarding
-          </ActionButton>
-        </SettingsSection>
+            <ActionButton
+              Element="button"
+              onClick={() => {
+                send({
+                  type: 'Set Onboarding Status',
+                  data: { onboardingStatus: '' },
+                })
+                navigate('..' + paths.ONBOARDING.INDEX)
+              }}
+              icon={{ icon: faArrowRotateBack }}
+            >
+              Replay Onboarding
+            </ActionButton>
+          </SettingsSection>
+        )}
      </div>
    </div>
  )
--- a/src/routes/SignIn.tsx
+++ b/src/routes/SignIn.tsx
@ -1,20 +1,22 @@
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../components/ActionButton'
 import { isTauri } from '../lib/isTauri'
-import { Themes, useStore } from '../useStore'
 import { invoke } from '@tauri-apps/api/tauri'
-import { useNavigate } from 'react-router-dom'
 import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
-import { getSystemTheme } from '../lib/getSystemTheme'
+import { Themes, getSystemTheme } from '../lib/theme'
 import { paths } from '../Router'
-import { useAuthMachine } from '../hooks/useAuthMachine'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'

 const SignIn = () => {
-  const navigate = useNavigate()
-  const { theme } = useStore((s) => ({
-    theme: s.theme,
-  }))
-  const [_, send] = useAuthMachine()
+  const {
+    auth: { send },
+    settings: {
+      state: {
+        context: { theme },
+      },
+    },
+  } = useGlobalStateContext()
+
  const appliedTheme = theme === Themes.System ? getSystemTheme() : theme
  const signInTauri = async () => {
    // We want to invoke our command to login via device auth.
@ -22,7 +24,7 @@ const SignIn = () => {
      const token: string = await invoke('login', {
        host: VITE_KC_API_BASE_URL,
      })
-      send({ type: 'tryLogin', token })
+      send({ type: 'Log in', token })
    } catch (error) {
      console.error('login button', error)
    }
--- a/src/useStore.ts
+++ b/src/useStore.ts
@ -13,7 +13,6 @@ import {
 } from './lang/executor'
 import { recast } from './lang/recast'
 import { EditorSelection } from '@codemirror/state'
-import { BaseDirectory } from '@tauri-apps/api/fs'
 import {
  ArtifactMap,
  SourceRangeMap,
@ -95,24 +94,22 @@ export type GuiModes =
      position: Position
    }

-type UnitSystem = 'imperial' | 'metric'
-export enum Themes {
-  Light = 'light',
-  Dark = 'dark',
-  System = 'system',
-}
-
-export const baseUnits: Record<UnitSystem, string[]> = {
+export const baseUnits = {
  imperial: ['in', 'ft'],
  metric: ['mm', 'cm', 'm'],
-}
+} as const

-interface DefaultDir {
-  base?: BaseDirectory
-  dir: string
-}
+export type BaseUnit = 'in' | 'ft' | 'mm' | 'cm' | 'm'

-export type PaneType = 'code' | 'variables' | 'debug' | 'kclErrors' | 'logs'
+export const baseUnitsUnion = Object.values(baseUnits).flatMap((v) => v)
+
+export type PaneType =
+  | 'code'
+  | 'variables'
+  | 'debug'
+  | 'kclErrors'
+  | 'logs'
+  | 'lspMessages'

 export interface StoreState {
  editorView: EditorView | null
@ -167,12 +164,12 @@ export interface StoreState {
  setMediaStream: (mediaStream: MediaStream) => void
  isStreamReady: boolean
  setIsStreamReady: (isStreamReady: boolean) => void
+  isLSPServerReady: boolean
+  setIsLSPServerReady: (isLSPServerReady: boolean) => void
  isMouseDownInStream: boolean
  setIsMouseDownInStream: (isMouseDownInStream: boolean) => void
  didDragInStream: boolean
  setDidDragInStream: (didDragInStream: boolean) => void
-  cmdId?: string
-  setCmdId: (cmdId: string) => void
  fileId: string
  setFileId: (fileId: string) => void
  streamDimensions: { streamWidth: number; streamHeight: number }
@ -181,21 +178,8 @@ export interface StoreState {
    streamHeight: number
  }) => void

-  // tauri specific app settings
-  defaultDir: DefaultDir
-  setDefaultDir: (dir: DefaultDir) => void
-  defaultProjectName: string
-  setDefaultProjectName: (defaultProjectName: string) => void
-  defaultUnitSystem: UnitSystem
-  setDefaultUnitSystem: (defaultUnitSystem: UnitSystem) => void
-  defaultBaseUnit: string
-  setDefaultBaseUnit: (defaultBaseUnit: string) => void
  showHomeMenu: boolean
  setHomeShowMenu: (showMenu: boolean) => void
-  onboardingStatus: string
-  setOnboardingStatus: (status: string) => void
-  theme: Themes
-  setTheme: (theme: Themes) => void
  isBannerDismissed: boolean
  setBannerDismissed: (isBannerDismissed: boolean) => void
  openPanes: PaneType[]
@ -205,8 +189,6 @@ export interface StoreState {
    path: string
  }[]
  setHomeMenuItems: (items: { name: string; path: string }[]) => void
-  debugPanel: boolean
-  setDebugPanel: (debugPanel: boolean) => void
 }

 let pendingAstUpdates: number[] = []
@ -365,6 +347,8 @@ export const useStore = create<StoreState>()(
      setMediaStream: (mediaStream) => set({ mediaStream }),
      isStreamReady: false,
      setIsStreamReady: (isStreamReady) => set({ isStreamReady }),
+      isLSPServerReady: false,
+      setIsLSPServerReady: (isLSPServerReady) => set({ isLSPServerReady }),
      isMouseDownInStream: false,
      setIsMouseDownInStream: (isMouseDownInStream) => {
        set({ isMouseDownInStream })
@ -374,8 +358,6 @@ export const useStore = create<StoreState>()(
        set({ didDragInStream })
      },
      // For stream event handling
-      cmdId: undefined,
-      setCmdId: (cmdId) => set({ cmdId }),
      fileId: '',
      setFileId: (fileId) => set({ fileId }),
      streamDimensions: { streamWidth: 1280, streamHeight: 720 },
@ -385,18 +367,6 @@ export const useStore = create<StoreState>()(
      defaultDir: {
        dir: '',
      },
-      setDefaultDir: (dir) => set({ defaultDir: dir }),
-      defaultProjectName: 'new-project-$nnn',
-      setDefaultProjectName: (defaultProjectName) =>
-        set({ defaultProjectName }),
-      defaultUnitSystem: 'imperial',
-      setDefaultUnitSystem: (defaultUnitSystem) => set({ defaultUnitSystem }),
-      defaultBaseUnit: 'in',
-      setDefaultBaseUnit: (defaultBaseUnit) => set({ defaultBaseUnit }),
-      onboardingStatus: '',
-      setOnboardingStatus: (onboardingStatus) => set({ onboardingStatus }),
-      theme: Themes.System,
-      setTheme: (theme) => set({ theme }),
      isBannerDismissed: false,
      setBannerDismissed: (isBannerDismissed) => set({ isBannerDismissed }),
      openPanes: ['code'],
@ -405,25 +375,13 @@ export const useStore = create<StoreState>()(
      setHomeShowMenu: (showHomeMenu) => set({ showHomeMenu }),
      homeMenuItems: [],
      setHomeMenuItems: (homeMenuItems) => set({ homeMenuItems }),
-      debugPanel: false,
-      setDebugPanel: (debugPanel) => set({ debugPanel }),
    }),
    {
      name: 'store',
      partialize: (state) =>
        Object.fromEntries(
          Object.entries(state).filter(([key]) =>
-            [
-              'code',
-              'defaultDir',
-              'defaultProjectName',
-              'defaultUnitSystem',
-              'defaultBaseUnit',
-              'debugPanel',
-              'onboardingStatus',
-              'theme',
-              'openPanes',
-            ].includes(key)
+            ['code', 'openPanes'].includes(key)
          )
        ),
    }
--- a/src/wasm-lib/Cargo.lock
+++ b/src/wasm-lib/Cargo.lock
@ -27,6 +27,18 @@ version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"

+[[package]]
+name = "ahash"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2c99f64d1e06488f620f932677e24bc6e2897582980441ae90a671415bd7ec2f"
+dependencies = [
+ "cfg-if",
+ "getrandom",
+ "once_cell",
+ "version_check",
+]
+
 [[package]]
 name = "aho-corasick"
 version = "1.0.4"
@ -51,6 +63,54 @@ dependencies = [
 "libc",
 ]

+[[package]]
+name = "anstream"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f58811cfac344940f1a400b6e6231ce35171f614f26439e80f8c1465c5cc0c"
+dependencies = [
+ "anstyle",
+ "anstyle-parse",
+ "anstyle-query",
+ "anstyle-wincon",
+ "colorchoice",
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15c4c2c83f81532e5845a733998b6971faca23490340a418e9b72a3ec9de12ea"
+
+[[package]]
+name = "anstyle-parse"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "938874ff5980b03a87c5524b3ae5b59cf99b1d6bc836848df7bc5ada9643c333"
+dependencies = [
+ "utf8parse",
+]
+
+[[package]]
+name = "anstyle-query"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ca11d4be1bab0c8bc8734a9aa7bf4ee8316d462a08c6ac5052f888fef5b494b"
+dependencies = [
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "anstyle-wincon"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58f54d10c6dfa51283a066ceab3ec1ab78d13fae00aa49243a45e4571fb79dfd"
+dependencies = [
+ "anstyle",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.75"
@ -66,6 +126,22 @@ version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bddcadddf5e9015d310179a59bb28c4d4b9920ad0f11e8e14dbadf654890c9a6"

+[[package]]
+name = "async-codec-lite"
+version = "0.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2527c30e3972d8ff366b353125dae828c4252a154dbe6063684f6c5e014760a3"
+dependencies = [
+ "anyhow",
+ "bytes",
+ "futures-core",
+ "futures-io",
+ "futures-sink",
+ "log",
+ "pin-project-lite",
+ "thiserror",
+]
+
 [[package]]
 name = "async-trait"
 version = "0.1.73"
@ -88,6 +164,18 @@ dependencies = [
 "winapi",
 ]

+[[package]]
+name = "auto_impl"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fee3da8ef1276b0bee5dd1c7258010d8fffd31801447323115a25560e1327b89"
+dependencies = [
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "autocfg"
 version = "1.1.0"
@ -109,6 +197,12 @@ dependencies = [
 "rustc-demangle",
 ]

+[[package]]
+name = "base64"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e1b586273c5702936fe7b7d6896644d8be71e6314cfe09d3167c95f712589e8"
+
 [[package]]
 name = "base64"
 version = "0.21.2"
@ -147,6 +241,18 @@ version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4682ae6287fcf752ecaabbfcc7b6f9b72aa33933dc23a554d853aea8eea8635"

+[[package]]
+name = "bitvec"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bc2832c24239b0141d5674bb9174f9d68a8b5b3f2753311927c172ca46f7e9c"
+dependencies = [
+ "funty",
+ "radium",
+ "tap",
+ "wyz",
+]
+
 [[package]]
 name = "block-buffer"
 version = "0.10.4"
@ -156,6 +262,28 @@ dependencies = [
 "generic-array",
 ]

+[[package]]
+name = "bson"
+version = "2.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58da0ae1e701ea752cc46c1bb9f39d5ecefc7395c3ecd526261a566d4f16e0c2"
+dependencies = [
+ "ahash",
+ "base64 0.13.1",
+ "bitvec",
+ "chrono",
+ "hex",
+ "indexmap 1.9.3",
+ "js-sys",
+ "once_cell",
+ "rand",
+ "serde",
+ "serde_bytes",
+ "serde_json",
+ "time 0.3.27",
+ "uuid",
+]
+
 [[package]]
 name = "bumpalo"
 version = "3.13.0"
@ -216,8 +344,8 @@ checksum = "4ea181bf566f71cb9a5d17a59e1871af638180a18fb0035c92ae62b705207123"
 dependencies = [
 "atty",
 "bitflags 1.3.2",
- "clap_derive",
- "clap_lex",
+ "clap_derive 3.2.25",
+ "clap_lex 0.2.4",
 "indexmap 1.9.3",
 "once_cell",
 "strsim",
@ -226,6 +354,30 @@ dependencies = [
 "unicase",
 ]

+[[package]]
+name = "clap"
+version = "4.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a13b88d2c62ff462f88e4a121f17a82c1af05693a2f192b5c38d14de73c19f6"
+dependencies = [
+ "clap_builder",
+ "clap_derive 4.4.2",
+]
+
+[[package]]
+name = "clap_builder"
+version = "4.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2bb9faaa7c2ef94b2743a21f5a29e6f0010dff4caa69ac8e9d6cf8b6fa74da08"
+dependencies = [
+ "anstream",
+ "anstyle",
+ "clap_lex 0.5.1",
+ "strsim",
+ "unicase",
+ "unicode-width",
+]
+
 [[package]]
 name = "clap_derive"
 version = "3.2.25"
@ -239,6 +391,18 @@ dependencies = [
 "syn 1.0.109",
 ]

+[[package]]
+name = "clap_derive"
+version = "4.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0862016ff20d69b84ef8247369fabf5c008a7417002411897d40ee1f4532b873"
+dependencies = [
+ "heck",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.29",
+]
+
 [[package]]
 name = "clap_lex"
 version = "0.2.4"
@ -248,6 +412,18 @@ dependencies = [
 "os_str_bytes",
 ]

+[[package]]
+name = "clap_lex"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd7cc57abe963c6d3b9d8be5b06ba7c8957a930305ca90304f24ef040aa6f961"
+
+[[package]]
+name = "colorchoice"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "acbf1af155f9b9ef647e42cdc158db4b64a1b61f743629225fde6f3e0be2a7c7"
+
 [[package]]
 name = "colored"
 version = "2.0.4"
@ -281,6 +457,16 @@ dependencies = [
 "unicode-segmentation",
 ]

+[[package]]
+name = "core-foundation"
+version = "0.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "194a7a9e6de53fa55116934067c844d9d749312f75c6f6d0980e8c252f8c2146"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "core-foundation-sys"
 version = "0.8.4"
@ -325,6 +511,19 @@ dependencies = [
 "typenum",
 ]

+[[package]]
+name = "dashmap"
+version = "5.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "978747c1d849a7d2ee5e8adc0159961c48fb7e5db2f06af6723b80123bb53856"
+dependencies = [
+ "cfg-if",
+ "hashbrown 0.14.0",
+ "lock_api",
+ "once_cell",
+ "parking_lot_core",
+]
+
 [[package]]
 name = "data-encoding"
 version = "2.4.0"
@ -339,7 +538,7 @@ checksum = "f2696e8a945f658fd14dc3b87242e6b80cd0f36ff04ea560fa39082368847946"

 [[package]]
 name = "derive-docs"
-version = "0.1.0"
+version = "0.1.3"
 dependencies = [
 "convert_case",
 "expectorate",
@ -352,6 +551,20 @@ dependencies = [
 "syn 2.0.29",
 ]

+[[package]]
+name = "derive-docs"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5fe5c5ea065cfabc5a7c5e8ed616e369fbf108c4be01e0e5609bc9846a732664"
+dependencies = [
+ "convert_case",
+ "proc-macro2",
+ "quote",
+ "serde",
+ "serde_tokenstream",
+ "syn 2.0.29",
+]
+
 [[package]]
 name = "diff"
 version = "0.1.13"
@ -488,6 +701,12 @@ dependencies = [
 "unicode-segmentation",
 ]

+[[package]]
+name = "funty"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
+
 [[package]]
 name = "futures"
 version = "0.3.28"
@ -606,28 +825,6 @@ version = "0.28.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6fb8d784f27acf97159b40fc4db5ecd8aa23b9ad5ef69cdd136d3bc80665f0c0"

-[[package]]
-name = "gloo-events"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "27c26fb45f7c385ba980f5fa87ac677e363949e065a083722697ef1b2cc91e41"
-dependencies = [
- "wasm-bindgen",
- "web-sys",
-]
-
-[[package]]
-name = "gloo-file"
-version = "0.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
-dependencies = [
- "gloo-events",
- "js-sys",
- "wasm-bindgen",
- "web-sys",
-]
-
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@ -693,6 +890,12 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "443144c8cdadd93ebf52ddb4056d257f5b52c04d3c804e657d19eb73fc33668b"

+[[package]]
+name = "hex"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
+
 [[package]]
 name = "home"
 version = "0.5.5"
@ -854,6 +1057,15 @@ dependencies = [
 "either",
 ]

+[[package]]
+name = "itertools"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1c173a5686ce8bfa551b3563d0c2170bf24ca44da99c7ca4bfdab5418c3fe57"
+dependencies = [
+ "either",
+]
+
 [[package]]
 name = "itoa"
 version = "1.0.9"
@ -881,21 +1093,54 @@ dependencies = [
 ]

 [[package]]
-name = "kittycad"
-version = "0.2.19"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0443a9f76cee80d5a43d076028d3ce39d2f6f6b66fc5c1a0ce24f8d7caf733b9"
+name = "kcl-lib"
+version = "0.1.24"
 dependencies = [
 "anyhow",
- "base64",
+ "bson",
+ "clap 4.4.2",
+ "dashmap",
+ "derive-docs 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)",
+ "expectorate",
+ "futures",
+ "itertools 0.11.0",
+ "js-sys",
+ "kittycad",
+ "lazy_static",
+ "parse-display",
+ "pretty_assertions",
+ "regex",
+ "reqwest",
+ "schemars",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "tokio",
+ "tokio-tungstenite",
+ "tower-lsp",
+ "ts-rs-json-value",
+ "uuid",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+]
+
+[[package]]
+name = "kittycad"
+version = "0.2.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8b33e5df8f82b97e5f5af94ff1400ae37449d0f5f1bb79acedf17cf2193680f"
+dependencies = [
+ "anyhow",
+ "base64 0.21.2",
 "bytes",
 "chrono",
 "data-encoding",
- "itertools",
+ "itertools 0.10.5",
 "parse-display",
 "phonenumber",
 "schemars",
 "serde",
+ "serde_bytes",
 "serde_json",
 "thiserror",
 "url",
@ -954,6 +1199,19 @@ dependencies = [
 "linked-hash-map",
 ]

+[[package]]
+name = "lsp-types"
+version = "0.94.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c66bfd44a06ae10647fe3f8214762e9369fd4248df1350924b4ef9e770a85ea1"
+dependencies = [
+ "bitflags 1.3.2",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "url",
+]
+
 [[package]]
 name = "memchr"
 version = "2.5.0"
@ -1106,7 +1364,7 @@ dependencies = [
 "Inflector",
 "anyhow",
 "chrono",
- "clap",
+ "clap 3.2.25",
 "data-encoding",
 "format_serde_error",
 "futures-util",
@ -1151,6 +1409,12 @@ dependencies = [
 "serde_json",
 ]

+[[package]]
+name = "openssl-probe"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
+
 [[package]]
 name = "os_str_bytes"
 version = "6.5.1"
@ -1231,7 +1495,7 @@ dependencies = [
 "bincode",
 "either",
 "fnv",
- "itertools",
+ "itertools 0.10.5",
 "lazy_static",
 "nom",
 "quick-xml",
@ -1243,10 +1507,30 @@ dependencies = [
 ]

 [[package]]
-name = "pin-project-lite"
-version = "0.2.12"
+name = "pin-project"
+version = "1.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12cc1b0bf1727a77a54b6654e7b5f1af8604923edc8b81885f8ec92f9e3f0a05"
+checksum = "fda4ed1c6c173e3fc7a83629421152e01d7b1f9b7f65fb301e490e8cfc656422"
+dependencies = [
+ "pin-project-internal",
+]
+
+[[package]]
+name = "pin-project-internal"
+version = "1.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4359fd9c9171ec6e8c62926d6faaf553a8dc3f64e1507e76da7911b4f6a04405"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.29",
+]
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8afb450f006bf6385ca15ef45d71d2288452bc3683ce2e2cacc0d18e4be60b58"

 [[package]]
 name = "pin-utils"
@ -1321,6 +1605,12 @@ dependencies = [
 "proc-macro2",
 ]

+[[package]]
+name = "radium"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc33ff2d4973d518d823d61aa239014831e521c75da58e3df4840d3f47749d09"
+
 [[package]]
 name = "rand"
 version = "0.8.5"
@ -1433,7 +1723,7 @@ version = "0.11.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3e9ad3fe7488d7e34558a2033d45a0c90b72d97b4f80705666fea71472e2e6a1"
 dependencies = [
- "base64",
+ "base64 0.21.2",
 "bytes",
 "encoding_rs",
 "futures-core",
@ -1519,9 +1809,9 @@ dependencies = [

 [[package]]
 name = "rustix"
-version = "0.38.8"
+version = "0.38.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19ed4fa021d81c8392ce04db050a3da9a60299050b7ae1cf482d862b54a7218f"
+checksum = "9bfe0f2582b4931a45d1fa608f8a8722e8b3c7ac54dd6d5f3b3212791fedef49"
 dependencies = [
 "bitflags 2.4.0",
 "errno",
@ -1542,13 +1832,25 @@ dependencies = [
 "sct",
 ]

+[[package]]
+name = "rustls-native-certs"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a9aace74cb666635c918e9c12bc0d348266037aa8eb599b5cba565709a8dff00"
+dependencies = [
+ "openssl-probe",
+ "rustls-pemfile",
+ "schannel",
+ "security-framework",
+]
+
 [[package]]
 name = "rustls-pemfile"
 version = "1.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2d3987094b1d07b653b7dfdc3f70ce9a1da9c51ac18c1b06b662e4f9a0e9f4b2"
 dependencies = [
- "base64",
+ "base64 0.21.2",
 ]

 [[package]]
@ -1583,10 +1885,19 @@ dependencies = [
 ]

 [[package]]
-name = "schemars"
-version = "0.8.12"
+name = "schannel"
+version = "0.1.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02c613288622e5f0c3fdc5dbd4db1c5fbe752746b1d1a56a0630b78fd00de44f"
+checksum = "0c3733bf4cf7ea0880754e19cb5a462007c4a8c1914bff372ccc95b464f1df88"
+dependencies = [
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "schemars"
+version = "0.8.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "763f8cd0d4c71ed8389c90cb8100cba87e763bd01a8e614d4f0af97bcd50a161"
 dependencies = [
 "bigdecimal",
 "bytes",
@ -1601,9 +1912,9 @@ dependencies = [

 [[package]]
 name = "schemars_derive"
-version = "0.8.12"
+version = "0.8.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "109da1e6b197438deb6db99952990c7f959572794b80ff93707d55a232545e7c"
+checksum = "ec0f696e21e10fa546b7ffb1c9672c6de8fbc7a81acf59524386d8639bf12737"
 dependencies = [
 "proc-macro2",
 "quote",
@ -1627,6 +1938,29 @@ dependencies = [
 "untrusted",
 ]

+[[package]]
+name = "security-framework"
+version = "2.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b64fb303737d99b81884b2c63433e9ae28abebe5eb5045dcdd175dc2ecf4de"
+dependencies = [
+ "bitflags 1.3.2",
+ "core-foundation",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
+[[package]]
+name = "security-framework-sys"
+version = "2.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e932934257d3b408ed8f30db49d85ea163bfe74961f017f405b025af298f0c7a"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "semver"
 version = "0.11.0"
@ -1647,18 +1981,27 @@ dependencies = [

 [[package]]
 name = "serde"
-version = "1.0.186"
+version = "1.0.187"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f5db24220c009de9bd45e69fb2938f4b6d2df856aa9304ce377b3180f83b7c1"
+checksum = "30a7fe14252655bd1e578af19f5fa00fe02fd0013b100ca6b49fde31c41bae4c"
 dependencies = [
 "serde_derive",
 ]

 [[package]]
-name = "serde_derive"
-version = "1.0.186"
+name = "serde_bytes"
+version = "0.11.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ad697f7e0b65af4983a4ce8f56ed5b357e8d3c36651bf6a7e13639c17b8e670"
+checksum = "ab33ec92f677585af6d88c65593ae2375adde54efdbf16d597f2cbc7a6d368ff"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.187"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e46b2a6ca578b3f1d4501b12f78ed4692006d79d82a1a7c561c12dbc3d625eb8"
 dependencies = [
 "proc-macro2",
 "quote",
@ -1682,11 +2025,23 @@ version = "1.0.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "693151e1ac27563d6dbcec9dee9fbd5da8539b20fa14ad3752b2e6d363ace360"
 dependencies = [
+ "indexmap 2.0.0",
 "itoa",
 "ryu",
 "serde",
 ]

+[[package]]
+name = "serde_repr"
+version = "0.1.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8725e1dfadb3a50f7e5ce0b1a540466f6ed3fe7a0fca2ac2b8b831d31316bd00"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.29",
+]
+
 [[package]]
 name = "serde_tokenstream"
 version = "0.2.0"
@ -1779,9 +2134,9 @@ checksum = "8347046d4ebd943127157b94d63abb990fcf729dc4e9978927fdf4ac3c998d06"

 [[package]]
 name = "slog-async"
-version = "2.7.0"
+version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "766c59b252e62a34651412870ff55d8c4e6d04df19b43eecb2703e417b097ffe"
+checksum = "72c8038f898a2c79507940990f05386455b3a317d8f18d4caea7cbc3d5096b84"
 dependencies = [
 "crossbeam-channel",
 "slog",
@ -1925,6 +2280,12 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f764005d11ee5f36500a149ace24e00e3da98b0158b3e2d53a7495660d3f4d60"

+[[package]]
+name = "tap"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369"
+
 [[package]]
 name = "task-local-extensions"
 version = "0.1.4"
@ -2110,7 +2471,10 @@ checksum = "2b2dbec703c26b00d74844519606ef15d09a7d6857860f84ad223dec002ddea2"
 dependencies = [
 "futures-util",
 "log",
+ "rustls",
+ "rustls-native-certs",
 "tokio",
+ "tokio-rustls",
 "tungstenite",
 ]

@ -2150,6 +2514,61 @@ dependencies = [
 "walkdir",
 ]

+[[package]]
+name = "tower"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8fa9be0de6cf49e536ce1851f987bd21a43b771b09473c3549a6c853db37c1c"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project",
+ "pin-project-lite",
+ "tower-layer",
+ "tower-service",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c20c8dbed6283a09604c3e69b4b7eeb54e298b8a600d4d5ecb5ad39de609f1d0"
+
+[[package]]
+name = "tower-lsp"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4ba052b54a6627628d9b3c34c176e7eda8359b7da9acd497b9f20998d118508"
+dependencies = [
+ "async-codec-lite",
+ "async-trait",
+ "auto_impl",
+ "bytes",
+ "dashmap",
+ "futures",
+ "httparse",
+ "lsp-types",
+ "memchr",
+ "serde",
+ "serde_json",
+ "tokio",
+ "tokio-util",
+ "tower",
+ "tower-lsp-macros",
+ "tracing",
+]
+
+[[package]]
+name = "tower-lsp-macros"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84fd902d4e0b9a4b27f2f440108dc034e1758628a9b702f8ec61ad66355422fa"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.29",
+]
+
 [[package]]
 name = "tower-service"
 version = "0.3.2"
@ -2164,9 +2583,21 @@ checksum = "8ce8c33a8d48bd45d624a6e523445fd21ec13d3653cd51f681abf67418f54eb8"
 dependencies = [
 "cfg-if",
 "pin-project-lite",
+ "tracing-attributes",
 "tracing-core",
 ]

+[[package]]
+name = "tracing-attributes"
+version = "0.1.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f4f31f56159e98206da9efd823404b79b6ef3143b4a7ab76e67b1751b25a4ab"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.29",
+]
+
 [[package]]
 name = "tracing-core"
 version = "0.1.31"
@ -2192,10 +2623,12 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3528ecfd12c466c6f163363caf2d02a71161dd5e1cc6ae7b34207ea2d42d81ed"

 [[package]]
-name = "ts-rs"
-version = "7.0.0"
-source = "git+https://github.com/kittycad/ts-rs.git?branch=serde_json#94e2a19c41194e47009fafc7b5a2c28ae544a6e8"
+name = "ts-rs-json-value"
+version = "7.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7a6c8eccea9e885ef26336d58ef9ae48b22d7ae3e503422af1902240616d1f6"
 dependencies = [
+ "schemars",
 "serde_json",
 "thiserror",
 "ts-rs-macros",
@ -2205,7 +2638,8 @@ dependencies = [
 [[package]]
 name = "ts-rs-macros"
 version = "7.0.0"
-source = "git+https://github.com/kittycad/ts-rs.git?branch=serde_json#94e2a19c41194e47009fafc7b5a2c28ae544a6e8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a6f41cc0aeb7a4a55730188e147d3795a7349b501f8334697fd37629b896cdc2"
 dependencies = [
 "Inflector",
 "proc-macro2",
@ -2227,6 +2661,7 @@ dependencies = [
 "httparse",
 "log",
 "rand",
+ "rustls",
 "sha1",
 "thiserror",
 "url",
@ -2317,6 +2752,12 @@ version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"

+[[package]]
+name = "utf8parse"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
+
 [[package]]
 name = "uuid"
 version = "1.4.1"
@ -2397,6 +2838,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c02dbc21516f9f1f04f187958890d7e6026df8d16540b7ad9492bc34a67cea03"
 dependencies = [
 "cfg-if",
+ "futures-core",
 "js-sys",
 "wasm-bindgen",
 "web-sys",
@ -2435,32 +2877,31 @@ checksum = "ca6ad05a4870b2bf5fe995117d3728437bd27d7cd5f06f13c17443ef369775a1"
 name = "wasm-lib"
 version = "0.1.0"
 dependencies = [
- "anyhow",
- "backtrace",
- "bincode",
- "derive-docs",
- "expectorate",
+ "bson",
 "futures",
- "gloo-file",
 "gloo-utils",
- "http",
- "httparse",
 "js-sys",
+ "kcl-lib",
 "kittycad",
- "lazy_static",
- "parse-display",
- "pretty_assertions",
- "regex",
- "schemars",
- "serde",
 "serde_json",
- "thiserror",
- "tokio",
- "tokio-tungstenite",
- "ts-rs",
- "uuid",
+ "tower-lsp",
 "wasm-bindgen",
 "wasm-bindgen-futures",
+ "wasm-streams",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-streams"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4609d447824375f43e1ffbc051b50ad8f4b3ae8219680c94452ea05eb240ac7"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
 ]

 [[package]]
@ -2661,6 +3102,15 @@ dependencies = [
 "windows-sys 0.48.0",
 ]

+[[package]]
+name = "wyz"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05f360fc0b24296329c78fda852a1e9ae82de9cf7b27dae4b7f62f118f77b9ed"
+dependencies = [
+ "tap",
+]
+
 [[package]]
 name = "yaml-rust"
 version = "0.4.5"
--- a/src/wasm-lib/Cargo.toml
+++ b/src/wasm-lib/Cargo.toml
@ -8,46 +8,36 @@ edition = "2021"
 crate-type = ["cdylib"]

 [dependencies]
-anyhow = "1.0.75"
-backtrace = "0.3"
-bincode = "1.3.3"
-derive-docs = { path = "derive-docs" }
-futures = { version = "0.3.28", optional = true }
-gloo-file = { version = "0.3.0", optional = true }
+bson = { version = "2.7.0", features = ["uuid-1", "chrono"] }
 gloo-utils = "0.2.0"
-http = "0.2.9"
-httparse = { version = "1.8.0", optional = true }
-js-sys = { version = "0.3.64", optional = true }
-kittycad = { version = "0.2.15", default-features = false, features = ["js"] }
-lazy_static = "1.4.0"
-parse-display = "0.8.2"
-regex = "1.7.1"
-schemars = { version = "0.8", features = ["url", "uuid1"] }
-serde = {version = "1.0.152", features = ["derive"] }
+kcl-lib = { path = "kcl" }
+kittycad = { version = "0.2.23", default-features = false, features = ["js"] }
 serde_json = "1.0.93"
-thiserror = "1.0.47"
-tokio = { version = "1.32.0", features = ["full"], optional = true }
-tokio-tungstenite = { version = "0.20.0", optional = true }
-ts-rs = { git = "https://github.com/kittycad/ts-rs.git", branch = "serde_json", features = ["serde-json-impl", "uuid-impl"] }
-uuid = { version = "1.4.1", features = ["v4", "js", "serde"] }
 wasm-bindgen = "0.2.87"
 wasm-bindgen-futures = "0.4.37"

+[target.'cfg(target_arch = "wasm32")'.dependencies]
+futures = "0.3.28"
+js-sys = "0.3.64"
+tower-lsp = { version = "0.20.0", default-features = false, features = ["runtime-agnostic"] }
+wasm-bindgen-futures = { version = "0.4.37", features = ["futures-core-03-stream"] }
+wasm-streams = "0.3.0"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
+version = "0.3.57"
+features = [
+  "console",
+  "HtmlTextAreaElement",
+  "ReadableStream",
+  "WritableStream",
+]
+
 [profile.release]
 panic = "abort"
 debug = true

-[dev-dependencies]
-expectorate = "1.0.7"
-pretty_assertions = "1.4.0"
-tokio = { version = "1.32.0", features = ["rt-multi-thread", "macros", "time"] }
-
-[features]
-default = ["web"]
-web = ["dep:gloo-file", "dep:js-sys"]
-noweb = ["dep:futures", "dep:httparse", "dep:tokio", "dep:tokio-tungstenite"]
-
 [workspace]
 members = [
-	"derive-docs"
+	"derive-docs",
+	"kcl",
 ]
--- a/src/wasm-lib/derive-docs/Cargo.toml
+++ b/src/wasm-lib/derive-docs/Cargo.toml
@ -1,8 +1,9 @@
 [package]
 name = "derive-docs"
 description = "A tool for generating documentation from Rust derive macros"
-version = "0.1.0"
+version = "0.1.3"
 edition = "2021"
+license = "MIT"

 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

--- a/src/wasm-lib/derive-docs/src/lib.rs
+++ b/src/wasm-lib/derive-docs/src/lib.rs
@ -35,10 +35,7 @@ struct StdlibMetadata {
 }

 #[proc_macro_attribute]
-pub fn stdlib(
-    attr: proc_macro::TokenStream,
-    item: proc_macro::TokenStream,
-) -> proc_macro::TokenStream {
+pub fn stdlib(attr: proc_macro::TokenStream, item: proc_macro::TokenStream) -> proc_macro::TokenStream {
    do_output(do_stdlib(attr.into(), item.into()))
 }

@ -50,9 +47,7 @@ fn do_stdlib(
    do_stdlib_inner(metadata, attr, item)
 }

-fn do_output(
-    res: Result<(proc_macro2::TokenStream, Vec<Error>), Error>,
-) -> proc_macro::TokenStream {
+fn do_output(res: Result<(proc_macro2::TokenStream, Vec<Error>), Error>) -> proc_macro::TokenStream {
    match res {
        Err(err) => err.to_compile_error().into(),
        Ok((stdlib_docs, errors)) => {
@ -200,18 +195,16 @@ fn do_stdlib_inner(
                    continue;
                }
            },
-        };
+        }
+        .trim_start_matches('_')
+        .to_string();

        let ty = match arg {
            syn::FnArg::Receiver(pat) => pat.ty.as_ref().into_token_stream(),
            syn::FnArg::Typed(pat) => pat.ty.as_ref().into_token_stream(),
        };

-        let ty_string = ty
-            .to_string()
-            .replace('&', "")
-            .replace("mut", "")
-            .replace(' ', "");
+        let ty_string = ty.to_string().replace('&', "").replace("mut", "").replace(' ', "");
        let ty_string = ty_string.trim().to_string();
        let ty_ident = if ty_string.starts_with("Vec<") {
            let ty_string = ty_string.trim_start_matches("Vec<").trim_end_matches('>');
@ -256,15 +249,21 @@ fn do_stdlib_inner(
        .replace("-> ", "")
        .replace("Result < ", "")
        .replace(", KclError >", "");
-    let ret_ty_string = ret_ty_string.trim().to_string();
-    let ret_ty_ident = format_ident!("{}", ret_ty_string);
-    let ret_ty_string = clean_type(&ret_ty_string);
-    let return_type = quote! {
-        #docs_crate::StdLibFnArg {
-            name: "".to_string(),
-            type_: #ret_ty_string.to_string(),
-            schema: #ret_ty_ident::json_schema(&mut generator),
-            required: true,
+    let return_type = if !ret_ty_string.is_empty() {
+        let ret_ty_string = ret_ty_string.trim().to_string();
+        let ret_ty_ident = format_ident!("{}", ret_ty_string);
+        let ret_ty_string = clean_type(&ret_ty_string);
+        quote! {
+            Some(#docs_crate::StdLibFnArg {
+                name: "".to_string(),
+                type_: #ret_ty_string.to_string(),
+                schema: #ret_ty_ident::json_schema(&mut generator),
+                required: true,
+            })
+        }
+    } else {
+        quote! {
+            None
        }
    };

@ -284,6 +283,8 @@ fn do_stdlib_inner(
        // ... a struct type called `#name_ident` that has no members
        #[allow(non_camel_case_types, missing_docs)]
        #description_doc_comment
+        #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, schemars::JsonSchema, ts_rs::TS)]
+        #[ts(export)]
        pub(crate) struct #name_ident {}
        // ... a constant of type `#name` whose identifier is also #name_ident
        #[allow(non_upper_case_globals, missing_docs)]
@ -316,7 +317,7 @@ fn do_stdlib_inner(
                vec![#(#arg_types),*]
            }

-            fn return_value(&self) -> #docs_crate::StdLibFnArg {
+            fn return_value(&self) -> Option<#docs_crate::StdLibFnArg> {
                let mut settings = schemars::gen::SchemaSettings::openapi3();
                settings.inline_subschemas = true;
                let mut generator = schemars::gen::SchemaGenerator::new(settings);
@ -335,6 +336,10 @@ fn do_stdlib_inner(
            fn std_lib_fn(&self) -> crate::std::StdFn {
                #fn_name_ident
            }
+
+            fn clone_box(&self) -> Box<dyn #docs_crate::StdLibFn> {
+                Box::new(self.clone())
+            }
        }

        #item
@ -370,8 +375,7 @@ fn extract_doc_from_attrs(attrs: &[syn::Attribute]) -> (Option<String>, Option<S
        if let syn::Meta::NameValue(nv) = &attr.meta {
            if nv.path.is_ident(&doc) {
                if let syn::Expr::Lit(syn::ExprLit {
-                    lit: syn::Lit::Str(s),
-                    ..
+                    lit: syn::Lit::Str(s), ..
                }) = &nv.value
                {
                    return normalize_comment_string(s.value());
@ -508,10 +512,7 @@ mod tests {
        let _expected = quote! {};

        assert!(errors.is_empty());
-        expectorate::assert_contents(
-            "tests/lineTo.gen",
-            &openapitor::types::get_text_fmt(&item).unwrap(),
-        );
+        expectorate::assert_contents("tests/lineTo.gen", &openapitor::types::get_text_fmt(&item).unwrap());
    }

    #[test]
@ -540,9 +541,27 @@ mod tests {
        let _expected = quote! {};

        assert!(errors.is_empty());
-        expectorate::assert_contents(
-            "tests/min.gen",
-            &openapitor::types::get_text_fmt(&item).unwrap(),
-        );
+        expectorate::assert_contents("tests/min.gen", &openapitor::types::get_text_fmt(&item).unwrap());
+    }
+
+    #[test]
+    fn test_stdlib_show() {
+        let (item, errors) = do_stdlib(
+            quote! {
+                name = "show",
+            },
+            quote! {
+                fn inner_show(
+                    /// The args to do shit to.
+                    _args: Vec<f64>
+                ) {
+                }
+            },
+        )
+        .unwrap();
+        let _expected = quote! {};
+
+        assert!(errors.is_empty());
+        expectorate::assert_contents("tests/show.gen", &openapitor::types::get_text_fmt(&item).unwrap());
    }
 }
--- a/src/wasm-lib/derive-docs/tests/lineTo.gen
+++ b/src/wasm-lib/derive-docs/tests/lineTo.gen
@ -1,5 +1,7 @@
 #[allow(non_camel_case_types, missing_docs)]
 #[doc = "Std lib function: lineTo"]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, schemars :: JsonSchema, ts_rs :: TS)]
+#[ts(export)]
 pub(crate) struct LineTo {}

 #[allow(non_upper_case_globals, missing_docs)]
@ -42,16 +44,16 @@ impl crate::docs::StdLibFn for LineTo {
        ]
    }

-    fn return_value(&self) -> crate::docs::StdLibFnArg {
+    fn return_value(&self) -> Option<crate::docs::StdLibFnArg> {
        let mut settings = schemars::gen::SchemaSettings::openapi3();
        settings.inline_subschemas = true;
        let mut generator = schemars::gen::SchemaGenerator::new(settings);
-        crate::docs::StdLibFnArg {
+        Some(crate::docs::StdLibFnArg {
            name: "".to_string(),
            type_: "SketchGroup".to_string(),
            schema: SketchGroup::json_schema(&mut generator),
            required: true,
-        }
+        })
    }

    fn unpublished(&self) -> bool {
@ -65,6 +67,10 @@ impl crate::docs::StdLibFn for LineTo {
    fn std_lib_fn(&self) -> crate::std::StdFn {
        line_to
    }
+
+    fn clone_box(&self) -> Box<dyn crate::docs::StdLibFn> {
+        Box::new(self.clone())
+    }
 }

 fn inner_line_to(
--- a/src/wasm-lib/derive-docs/tests/min.gen
+++ b/src/wasm-lib/derive-docs/tests/min.gen
@ -1,5 +1,7 @@
 #[allow(non_camel_case_types, missing_docs)]
 #[doc = "Std lib function: min"]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, schemars :: JsonSchema, ts_rs :: TS)]
+#[ts(export)]
 pub(crate) struct Min {}

 #[allow(non_upper_case_globals, missing_docs)]
@ -34,16 +36,16 @@ impl crate::docs::StdLibFn for Min {
        }]
    }

-    fn return_value(&self) -> crate::docs::StdLibFnArg {
+    fn return_value(&self) -> Option<crate::docs::StdLibFnArg> {
        let mut settings = schemars::gen::SchemaSettings::openapi3();
        settings.inline_subschemas = true;
        let mut generator = schemars::gen::SchemaGenerator::new(settings);
-        crate::docs::StdLibFnArg {
+        Some(crate::docs::StdLibFnArg {
            name: "".to_string(),
            type_: "number".to_string(),
            schema: f64::json_schema(&mut generator),
            required: true,
-        }
+        })
    }

    fn unpublished(&self) -> bool {
@ -57,6 +59,10 @@ impl crate::docs::StdLibFn for Min {
    fn std_lib_fn(&self) -> crate::std::StdFn {
        min
    }
+
+    fn clone_box(&self) -> Box<dyn crate::docs::StdLibFn> {
+        Box::new(self.clone())
+    }
 }

 fn inner_min(#[doc = r" The args to do shit to."] args: Vec<f64>) -> f64 {
--- a/src/wasm-lib/derive-docs/tests/show.gen
+++ b/src/wasm-lib/derive-docs/tests/show.gen
@ -0,0 +1,63 @@
+#[allow(non_camel_case_types, missing_docs)]
+#[doc = "Std lib function: show"]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, schemars :: JsonSchema, ts_rs :: TS)]
+#[ts(export)]
+pub(crate) struct Show {}
+
+#[allow(non_upper_case_globals, missing_docs)]
+#[doc = "Std lib function: show"]
+pub(crate) const Show: Show = Show {};
+impl crate::docs::StdLibFn for Show {
+    fn name(&self) -> String {
+        "show".to_string()
+    }
+
+    fn summary(&self) -> String {
+        "".to_string()
+    }
+
+    fn description(&self) -> String {
+        "".to_string()
+    }
+
+    fn tags(&self) -> Vec<String> {
+        vec![]
+    }
+
+    fn args(&self) -> Vec<crate::docs::StdLibFnArg> {
+        let mut settings = schemars::gen::SchemaSettings::openapi3();
+        settings.inline_subschemas = true;
+        let mut generator = schemars::gen::SchemaGenerator::new(settings);
+        vec![crate::docs::StdLibFnArg {
+            name: "args".to_string(),
+            type_: "[number]".to_string(),
+            schema: <Vec<f64>>::json_schema(&mut generator),
+            required: true,
+        }]
+    }
+
+    fn return_value(&self) -> Option<crate::docs::StdLibFnArg> {
+        let mut settings = schemars::gen::SchemaSettings::openapi3();
+        settings.inline_subschemas = true;
+        let mut generator = schemars::gen::SchemaGenerator::new(settings);
+        None
+    }
+
+    fn unpublished(&self) -> bool {
+        false
+    }
+
+    fn deprecated(&self) -> bool {
+        false
+    }
+
+    fn std_lib_fn(&self) -> crate::std::StdFn {
+        show
+    }
+
+    fn clone_box(&self) -> Box<dyn crate::docs::StdLibFn> {
+        Box::new(self.clone())
+    }
+}
+
+fn inner_show(#[doc = r" The args to do shit to."] _args: Vec<f64>) {}
--- a/src/wasm-lib/kcl/Cargo.toml
+++ b/src/wasm-lib/kcl/Cargo.toml
@ -0,0 +1,53 @@
+[package]
+name = "kcl-lib"
+description = "KittyCAD Language"
+version = "0.1.24"
+edition = "2021"
+license = "MIT"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+anyhow = { version = "1.0.75", features = ["backtrace"] }
+clap = { version = "4.4.2", features = ["cargo", "derive", "env", "unicode"] }
+dashmap = "5.5.3"
+derive-docs = { version = "0.1.3" }
+#derive-docs = { path = "../derive-docs" }
+kittycad = { version = "0.2.23", default-features = false, features = ["js"] }
+lazy_static = "1.4.0"
+parse-display = "0.8.2"
+regex = "1.7.1"
+schemars = { version = "0.8", features = ["impl_json_schema", "url", "uuid1"] }
+serde = {version = "1.0.152", features = ["derive"] }
+serde_json = "1.0.93"
+thiserror = "1.0.47"
+ts-rs = { version = "7", package = "ts-rs-json-value", features = ["serde-json-impl", "schemars-impl", "uuid-impl"] }
+uuid = { version = "1.4.1", features = ["v4", "js", "serde"] }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+js-sys = { version = "0.3.64" }
+tower-lsp = { version = "0.20.0", default-features = false, features = ["runtime-agnostic"] }
+wasm-bindgen = "0.2.87"
+wasm-bindgen-futures = "0.4.37"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+bson = { version = "2.7.0", features = ["uuid-1", "chrono"] }
+futures = { version = "0.3.28" }
+reqwest = { version = "0.11.20", default-features = false }
+tokio = { version = "1.32.0", features = ["full"] }
+tokio-tungstenite = { version = "0.20.0", features = ["rustls-tls-native-roots"] }
+tower-lsp = { version = "0.20.0", features = ["proposed"] }
+
+[features]
+default = ["engine"]
+engine = []
+
+[profile.release]
+panic = "abort"
+debug = true
+
+[dev-dependencies]
+expectorate = "1.0.7"
+itertools = "0.11.0"
+pretty_assertions = "1.4.0"
+tokio = { version = "1.32.0", features = ["rt-multi-thread", "macros", "time"] }
--- a/src/wasm-lib/kcl/fuzz/.gitignore
+++ b/src/wasm-lib/kcl/fuzz/.gitignore
@ -0,0 +1,4 @@
+target
+corpus
+artifacts
+coverage
--- a/Show More
+++ b/Show More