Bump to v0.3.0 (#378 )

disable high dpi video streaming (#374 )
Upload release artifacts to the release (on top of dl.kittycad.io) (#371 )
2023-09-04 11:01:51 -04:00 · 2023-09-01 20:29:03 -04:00 · 2023-09-01 14:20:48 -04:00 · 2023-08-31 22:19:23 -07:00 · 2023-08-31 22:57:58 -04:00 · 2023-08-31 16:23:12 -04:00
44 changed files with 4115 additions and 508 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/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -124,6 +124,8 @@ jobs:
  publish-apps-release:
    runs-on: ubuntu-20.04
    if: github.event_name == 'release'
+    permissions:
+      contents: write
    needs: [build-test-web, build-apps]
    env:
      VERSION_NO_V: ${{ needs.build-test-web.outputs.version }}
@ -189,3 +191,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/*/kittycad-modeling-app*
--- a/docs/kcl.json
+++ b/docs/kcl.json
--- a/docs/kcl.md
+++ b/docs/kcl.md
@ -33,6 +33,8 @@
 	* [`angledLineThatIntersects`](#angledLineThatIntersects)
 	* [`startSketchAt`](#startSketchAt)
 	* [`close`](#close)
+	* [`arc`](#arc)
+	* [`bezierCurve`](#bezierCurve)


 ## Functions
@ -3046,3 +3048,351 @@ close(sketch_group: SketchGroup) -> SketchGroup



+### arc
+
+Draw an arc.
+
+
+
+```
+arc(data: ArcData, sketch_group: SketchGroup) -> SketchGroup
+```
+
+#### Arguments
+
+* `data`: `ArcData` - Data to draw an arc.
+```
+{
+	// The end angle.
+	"angle_end": number,
+	// The start angle.
+	"angle_start": number,
+	// The radius.
+	"radius": number,
+	// The tag.
+	"tag": string,
+} |
+{
+	// The end angle.
+	"angle_end": number,
+	// The start angle.
+	"angle_start": number,
+	// The radius.
+	"radius": number,
+} |
+{
+	// The center.
+	"center": [number],
+	// The radius.
+	"radius": number,
+	// The tag.
+	"tag": string,
+	// The to point.
+	"to": [number],
+} |
+{
+	// The center.
+	"center": [number],
+	// The radius.
+	"radius": number,
+	// The to point.
+	"to": [number],
+}
+```
+* `sketch_group`: `SketchGroup` - A sketch group is a collection of paths.
+```
+{
+	// The id of the sketch group.
+	"id": uuid,
+	// The position of the sketch group.
+	"position": [number],
+	// The rotation of the sketch group.
+	"rotation": [number],
+	// The starting path.
+	"start": {
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+},
+	// The paths in the sketch group.
+	"value": [{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+	// The y coordinate.
+	"y": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+}],
+}
+```
+
+#### Returns
+
+* `SketchGroup` - A sketch group is a collection of paths.
+```
+{
+	// The id of the sketch group.
+	"id": uuid,
+	// The position of the sketch group.
+	"position": [number],
+	// The rotation of the sketch group.
+	"rotation": [number],
+	// The starting path.
+	"start": {
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+},
+	// The paths in the sketch group.
+	"value": [{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+	// The y coordinate.
+	"y": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+}],
+}
+```
+
+
+
+### bezierCurve
+
+Draw a bezier curve.
+
+
+
+```
+bezierCurve(data: BezierData, sketch_group: SketchGroup) -> SketchGroup
+```
+
+#### Arguments
+
+* `data`: `BezierData` - Data to draw a bezier curve.
+```
+{
+	// The first control point.
+	"control1": [number],
+	// The second control point.
+	"control2": [number],
+	// The tag.
+	"tag": string,
+	// The to point.
+	"to": [number],
+} |
+{
+	// The first control point.
+	"control1": [number],
+	// The second control point.
+	"control2": [number],
+	// The to point.
+	"to": [number],
+}
+```
+* `sketch_group`: `SketchGroup` - A sketch group is a collection of paths.
+```
+{
+	// The id of the sketch group.
+	"id": uuid,
+	// The position of the sketch group.
+	"position": [number],
+	// The rotation of the sketch group.
+	"rotation": [number],
+	// The starting path.
+	"start": {
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+},
+	// The paths in the sketch group.
+	"value": [{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+	// The y coordinate.
+	"y": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+}],
+}
+```
+
+#### Returns
+
+* `SketchGroup` - A sketch group is a collection of paths.
+```
+{
+	// The id of the sketch group.
+	"id": uuid,
+	// The position of the sketch group.
+	"position": [number],
+	// The rotation of the sketch group.
+	"rotation": [number],
+	// The starting path.
+	"start": {
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+},
+	// The paths in the sketch group.
+	"value": [{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+	// The x coordinate.
+	"x": number,
+	// The y coordinate.
+	"y": number,
+} |
+{
+	// The from point.
+	"from": [number],
+	// The name of the path.
+	"name": string,
+	// The to point.
+	"to": [number],
+	"type": string,
+}],
+}
+```
+
+
+
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "untitled-app",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
@ -9,8 +9,9 @@
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.13",
    "@headlessui/tailwindcss": "^0.2.0",
-    "@kittycad/lib": "^0.0.34",
+    "@kittycad/lib": "^0.0.35",
    "@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",
@ -56,13 +57,13 @@
    "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 && 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/kcl/bindings",
    "lint": "eslint --fix src",
--- 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",
 ]

@ -2128,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",
@ -2701,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",
@ -2717,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",
@ -3075,9 +3099,9 @@ dependencies = [

 [[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",
@ -3088,7 +3112,6 @@ dependencies = [
 "serde_json",
 "tauri-utils",
 "tauri-winres",
- "winnow",
 ]

 [[package]]
@ -3186,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",
@ -3407,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",
@ -3420,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",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -12,7 +12,7 @@ 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"
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -8,7 +8,7 @@
  },
  "package": {
    "productName": "kittycad-modeling-app",
-    "version": "0.2.0"
+    "version": "0.3.0"
  },
  "tauri": {
    "allowlist": {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -49,6 +49,7 @@ import { PROJECT_ENTRYPOINT } from './lib/tauriFS'
 import { IndexLoaderData } from './Router'
 import { toast } from 'react-hot-toast'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { onboardingPaths } from 'routes/Onboarding'

 export function App() {
  const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
@ -154,7 +155,7 @@ export function App() {
  useHotkeys('shift + d', () => togglePane('debug'))

  const paneOpacity =
-    onboardingStatus === 'camera'
+    onboardingStatus === onboardingPaths.CAMERA
      ? 'opacity-20'
      : didDragInStream
      ? 'opacity-40'
@ -252,9 +253,9 @@ export function App() {
  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(() => {
@ -278,6 +279,8 @@ export function App() {

  useEffect(() => {
    if (!isStreamReady) return
+    if (!engineCommandManager) return
+    let unsubFn: any[] = []
    const asyncWrap = async () => {
      try {
        if (!code) {
@ -288,11 +291,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,
          {
@ -326,22 +326,29 @@ 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) {
+              setHighlightRange([0, 0])
+            } else {
+              const sourceRange = sourceRangeMap[data.entity_id]
+              setHighlightRange(sourceRange)
+            }
+          },
        })
-        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)
        }
@ -358,7 +365,10 @@ export function App() {
      }
    }
    asyncWrap()
-  }, [code, isStreamReady])
+    return () => {
+      unsubFn.forEach((fn) => fn())
+    }
+  }, [code, isStreamReady, engineCommandManager])

  const debounceSocketSend = throttle<EngineCommand>((message) => {
    engineCommandManager?.sendSceneCommand(message)
--- 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, {
@ -31,6 +38,40 @@ import {
 } 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) => {
@ -121,7 +162,9 @@ const router = createBrowserRouter(
          notEnRouteToOnboarding && hasValidOnboardingStatus

        if (shouldRedirectToOnboarding) {
-          return redirect(makeUrlPathRelative(paths.ONBOARDING.INDEX) + status)
+          return redirect(
+            makeUrlPathRelative(paths.ONBOARDING.INDEX) + status.slice(1)
+          )
        }

        if (params.id && params.id !== 'new') {
--- 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/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
@ -3,6 +3,7 @@ import UserSidebarMenu from './UserSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import styles from './AppHeader.module.css'

 interface AppHeaderProps extends React.PropsWithChildren {
  showToolbar?: boolean
@ -27,7 +28,9 @@ export const AppHeader = ({
  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
      }
    >
@ -39,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 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/GlobalStateProvider.tsx
+++ b/src/components/GlobalStateProvider.tsx
@ -15,7 +15,7 @@ import {
  settingsMachine,
 } from 'machines/settingsMachine'
 import { toast } from 'react-hot-toast'
-import { setThemeClass } from 'lib/theme'
+import { setThemeClass, Themes } from 'lib/theme'
 import {
  AnyStateMachine,
  ContextFrom,
@ -87,10 +87,21 @@ export const GlobalStateProvider = ({
    commandBarMeta: settingsCommandBarMeta,
  })

-  useEffect(
-    () => setThemeClass(settingsState.context.theme),
-    [settingsState.context.theme]
-  )
+  // 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, {
--- 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/UserSidebarMenu.tsx
+++ b/src/components/UserSidebarMenu.tsx
@ -1,9 +1,9 @@
-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 { Models } from '@kittycad/lib'
@ -61,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('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>
-          </>
-        )}
-      </Popover.Panel>
+            </>
+          )}
+        </Popover.Panel>
+      </Transition>
    </Popover>
  )
 }
--- 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/index.css
+++ b/src/index.css
@ -86,8 +86,18 @@ code {
  @apply bg-transparent;
 }

+#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,14 +109,24 @@ 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 {
--- 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)
    })

@ -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/lib/commands.ts
+++ b/src/lib/commands.ts
@ -73,8 +73,6 @@ export function createMachineCommand<T extends AnyStateMachine>({
        arg.defaultValue as keyof typeof state.context
      ] as string | undefined

-      console.log(arg.name, { defaultValueFromContext })
-
      const options =
        arg.options instanceof Array
          ? arg.options.map((o) => ({
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@ -4,17 +4,18 @@ export enum Themes {
  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
+  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) {
-  const systemTheme = theme === Themes.System && getSystemTheme()
-  if (theme === Themes.Dark || systemTheme === Themes.Dark) {
+  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
@ -3,6 +3,23 @@ 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']
  token?: string
@ -81,7 +98,9 @@ export const authMachine = createMachine<UserContext, Events>(
    schema: { events: {} as { type: 'Log out' } | { type: 'Log in' } },
    predictableActionArguments: true,
    preserveActionOrder: true,
-    context: { token: persistedToken },
+    context: {
+      token: persistedToken,
+    },
  },
  {
    actions: {},
@ -98,6 +117,7 @@ async function getUser(context: UserContext) {
  }
  if (!context.token && '__TAURI__' in window) throw 'not log in'
  if (context.token) headers['Authorization'] = `Bearer ${context.token}`
+  if (SKIP_AUTH) return LOCAL_USER
  try {
    const response = await fetch(url, {
      method: 'GET',
--- a/src/machines/settingsMachine.ts
+++ b/src/machines/settingsMachine.ts
@ -1,7 +1,12 @@
 import { assign, createMachine } from 'xstate'
 import { BaseUnit, baseUnitsUnion } from '../useStore'
 import { CommandBarMeta } from '../lib/commands'
-import { Themes } from '../lib/theme'
+import { Themes, getSystemTheme, setThemeClass } from '../lib/theme'
+
+export enum UnitSystem {
+  Imperial = 'imperial',
+  Metric = 'metric',
+}

 export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY'

@ -42,7 +47,7 @@ export const settingsCommandBarMeta: CommandBarMeta = {
        name: 'unitSystem',
        type: 'select',
        defaultValue: 'unitSystem',
-        options: [{ name: 'imperial' }, { name: 'metric' }],
+        options: [{ name: UnitSystem.Imperial }, { name: UnitSystem.Metric }],
      },
    ],
  },
@ -70,7 +75,7 @@ export const settingsMachine = createMachine(
    context: {
      theme: Themes.System,
      defaultProjectName: '',
-      unitSystem: 'imperial' as 'imperial' | 'metric',
+      unitSystem: UnitSystem.Imperial,
      baseUnit: 'in' as BaseUnit,
      defaultDirectory: '',
      showDebugPanel: false,
@ -79,6 +84,7 @@ export const settingsMachine = createMachine(
    initial: 'idle',
    states: {
      idle: {
+        entry: ['setThemeClass'],
        on: {
          'Set Theme': {
            actions: [
@ -87,6 +93,7 @@ export const settingsMachine = createMachine(
              }),
              'persistSettings',
              'toastSuccess',
+              'setThemeClass',
            ],
            target: 'idle',
            internal: true,
@ -172,7 +179,7 @@ export const settingsMachine = createMachine(
        | { type: 'Set Default Directory'; data: { defaultDirectory: string } }
        | {
            type: 'Set Unit System'
-            data: { unitSystem: 'imperial' | 'metric' }
+            data: { unitSystem: UnitSystem }
          }
        | { type: 'Set Base Unit'; data: { baseUnit: BaseUnit } }
        | { type: 'Set Onboarding Status'; data: { onboardingStatus: string } }
@ -188,6 +195,13 @@ export const settingsMachine = createMachine(
          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
@ -21,6 +21,15 @@ export interface Typegen0 {
      | 'Set Theme'
      | 'Set Unit System'
      | 'Toggle Debug Panel'
+    setThemeClass:
+      | 'Set Base Unit'
+      | 'Set Default Directory'
+      | 'Set Default Project Name'
+      | 'Set Onboarding Status'
+      | 'Set Theme'
+      | 'Set Unit System'
+      | 'Toggle Debug Panel'
+      | 'xstate.init'
    toastSuccess:
      | 'Set Base Unit'
      | 'Set Default Directory'
--- 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
@ -3,9 +3,9 @@ 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()
@ -16,15 +16,6 @@ export default function Units() {
      context: { unitSystem, baseUnit },
    },
  } = useGlobalStateContext()
-  const [tempUnitSystem, setTempUnitSystem] = useState(unitSystem)
-  const [tempBaseUnit, setTempBaseUnit] = useState(baseUnit)
-
-  function handleNextClick() {
-    send({ type: 'Set Unit System', data: { unitSystem: tempUnitSystem } })
-    send({ type: 'Set Base Unit', data: { baseUnit: tempBaseUnit } })
-
-    next()
-  }

  return (
    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
@ -38,10 +29,16 @@ export default function Units() {
            offLabel="Imperial"
            onLabel="Metric"
            name="settings-units"
-            checked={tempUnitSystem === 'metric'}
-            onChange={(e) =>
-              setTempUnitSystem(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
@ -51,8 +48,13 @@ export default function Units() {
          <select
            id="base-unit"
            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
-            value={tempBaseUnit}
-            onChange={(e) => setTempBaseUnit(e.target.value as BaseUnit)}
+            value={baseUnit}
+            onChange={(e) => {
+              send({
+                type: 'Set Base Unit',
+                data: { baseUnit: e.target.value as BaseUnit },
+              })
+            }}
          >
            {baseUnits[unitSystem].map((unit) => (
              <option key={unit} value={unit}>
@ -77,7 +79,7 @@ export default function Units() {
          </ActionButton>
          <ActionButton
            Element="button"
-            onClick={handleNextClick}
+            onClick={next}
            icon={{ icon: faArrowRight }}
          >
            Next: Camera
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@ -8,15 +8,17 @@ import { AppHeader } from '../components/AppHeader'
 import { open } from '@tauri-apps/api/dialog'
 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 {
    settings: {
@ -135,9 +137,11 @@ export const Settings = () => {
            offLabel="Imperial"
            onLabel="Metric"
            name="settings-units"
-            checked={unitSystem === 'metric'}
+            checked={unitSystem === UnitSystem.Metric}
            onChange={(e) => {
-              const newUnitSystem = e.target.checked ? 'metric' : 'imperial'
+              const newUnitSystem = e.target.checked
+                ? UnitSystem.Metric
+                : UnitSystem.Imperial
              send({
                type: 'Set Unit System',
                data: { unitSystem: newUnitSystem },
@ -201,24 +205,26 @@ export const Settings = () => {
            ))}
          </select>
        </SettingsSection>
-        <SettingsSection
-          title="Onboarding"
-          description="Replay the onboarding process"
-        >
-          <ActionButton
-            Element="button"
-            onClick={() => {
-              send({
-                type: 'Set Onboarding Status',
-                data: { onboardingStatus: '' },
-              })
-              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/wasm-lib/Cargo.lock
+++ b/src/wasm-lib/Cargo.lock
@ -29,10 +29,11 @@ checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"

 [[package]]
 name = "ahash"
-version = "0.7.6"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fcb51a0695d8f838b1ee009b3fbf66bda078cd64590202a864a8f3e8c4315c47"
+checksum = "2c99f64d1e06488f620f932677e24bc6e2897582980441ae90a671415bd7ec2f"
 dependencies = [
+ "cfg-if",
 "getrandom",
 "once_cell",
 "version_check",
@ -187,9 +188,9 @@ dependencies = [

 [[package]]
 name = "bson"
-version = "2.6.1"
+version = "2.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9aeb8bae494e49dbc330dd23cf78f6f7accee22f640ce3ab17841badaa4ce232"
+checksum = "58da0ae1e701ea752cc46c1bb9f39d5ecefc7395c3ecd526261a566d4f16e0c2"
 dependencies = [
 "ahash",
 "base64 0.13.1",
@ -198,7 +199,7 @@ dependencies = [
 "hex",
 "indexmap 1.9.3",
 "js-sys",
- "lazy_static",
+ "once_cell",
 "rand",
 "serde",
 "serde_bytes",
@ -947,7 +948,7 @@ dependencies = [

 [[package]]
 name = "kcl-lib"
-version = "0.1.3"
+version = "0.1.10"
 dependencies = [
 "anyhow",
 "bson",
@ -975,9 +976,9 @@ dependencies = [

 [[package]]
 name = "kittycad"
-version = "0.2.22"
+version = "0.2.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0247f7acbe36141604ad02b796b596fe0392fb86dd82550eb2f4855b2a493344"
+checksum = "b8b33e5df8f82b97e5f5af94ff1400ae37449d0f5f1bb79acedf17cf2193680f"
 dependencies = [
 "anyhow",
 "base64 0.21.2",
@ -1711,9 +1712,9 @@ dependencies = [

 [[package]]
 name = "schemars"
-version = "0.8.12"
+version = "0.8.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "02c613288622e5f0c3fdc5dbd4db1c5fbe752746b1d1a56a0630b78fd00de44f"
+checksum = "763f8cd0d4c71ed8389c90cb8100cba87e763bd01a8e614d4f0af97bcd50a161"
 dependencies = [
 "bigdecimal",
 "bytes",
@ -1728,9 +1729,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",
--- a/src/wasm-lib/Cargo.toml
+++ b/src/wasm-lib/Cargo.toml
@ -8,10 +8,10 @@ edition = "2021"
 crate-type = ["cdylib"]

 [dependencies]
-bson = { version = "2.6.1", features = ["uuid-1", "chrono"] }
+bson = { version = "2.7.0", features = ["uuid-1", "chrono"] }
 gloo-utils = "0.2.0"
 kcl-lib = { path = "kcl" }
-kittycad = { version = "0.2.15", default-features = false, features = ["js"] }
+kittycad = { version = "0.2.23", default-features = false, features = ["js"] }
 serde_json = "1.0.93"
 wasm-bindgen = "0.2.87"
 wasm-bindgen-futures = "0.4.37"
--- a/src/wasm-lib/kcl/Cargo.toml
+++ b/src/wasm-lib/kcl/Cargo.toml
@ -1,7 +1,7 @@
 [package]
 name = "kcl-lib"
 description = "KittyCAD Language"
-version = "0.1.3"
+version = "0.1.10"
 edition = "2021"
 license = "MIT"

@ -10,7 +10,7 @@ license = "MIT"
 [dependencies]
 anyhow = "1.0.75"
 derive-docs = { version = "0.1.0" }
-kittycad = { version = "0.2.15", default-features = false, features = ["js"] }
+kittycad = { version = "0.2.23", default-features = false, features = ["js"] }
 lazy_static = "1.4.0"
 parse-display = "0.8.2"
 regex = "1.7.1"
@ -27,12 +27,16 @@ wasm-bindgen-futures = "0.4.37"
 js-sys = { version = "0.3.64" }

 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-bson = { version = "2.6.1", features = ["uuid-1", "chrono"] }
+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"] }

+[features]
+default = ["engine"]
+engine = []
+
 [profile.release]
 panic = "abort"
 debug = true
--- a/src/wasm-lib/kcl/src/abstract_syntax_tree_types.rs
+++ b/src/wasm-lib/kcl/src/abstract_syntax_tree_types.rs
@ -2,6 +2,7 @@

 use std::collections::HashMap;

+use parse_display::{Display, FromStr};
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use serde_json::Map;
@ -383,11 +384,22 @@ pub struct VariableDeclaration {
    pub start: usize,
    pub end: usize,
    pub declarations: Vec<VariableDeclarator>,
-    pub kind: String, // Change to enum if there are specific values
+    pub kind: VariableKind, // Change to enum if there are specific values
 }

 impl_value_meta!(VariableDeclaration);

+#[derive(Debug, Clone, Deserialize, Serialize, PartialEq, ts_rs::TS, JsonSchema, FromStr, Display)]
+#[ts(export)]
+#[serde(rename_all = "snake_case")]
+#[display(style = "snake_case")]
+pub enum VariableKind {
+    Let,
+    Const,
+    Fn,
+    Var,
+}
+
 #[derive(Debug, Clone, Deserialize, Serialize, PartialEq, ts_rs::TS, JsonSchema)]
 #[ts(export)]
 #[serde(tag = "type")]
--- a/src/wasm-lib/kcl/src/docs.rs
+++ b/src/wasm-lib/kcl/src/docs.rs
@ -44,6 +44,11 @@ impl StdLibFnArg {
        get_type_string_from_schema(&self.schema)
    }

+    #[allow(dead_code)]
+    pub fn get_autocomplete_string(&self) -> Result<String> {
+        get_autocomplete_string_from_schema(&self.schema)
+    }
+
    #[allow(dead_code)]
    pub fn description(&self) -> Option<String> {
        get_description_string_from_schema(&self.schema)
@ -93,9 +98,24 @@ pub trait StdLibFn {
            deprecated: self.deprecated(),
        })
    }
+
+    fn fn_signature(&self) -> String {
+        let mut signature = String::new();
+        signature.push_str(&format!("{}(", self.name()));
+        for (i, arg) in self.args().iter().enumerate() {
+            if i > 0 {
+                signature.push_str(", ");
+            }
+            signature.push_str(&format!("{}: {}", arg.name, arg.type_));
+        }
+        signature.push_str(") -> ");
+        signature.push_str(&self.return_value().type_);
+
+        signature
+    }
 }

-fn get_description_string_from_schema(schema: &schemars::schema::Schema) -> Option<String> {
+pub fn get_description_string_from_schema(schema: &schemars::schema::Schema) -> Option<String> {
    if let schemars::schema::Schema::Object(o) = schema {
        if let Some(metadata) = &o.metadata {
            if let Some(description) = &metadata.description {
@ -107,7 +127,7 @@ fn get_description_string_from_schema(schema: &schemars::schema::Schema) -> Opti
    None
 }

-fn get_type_string_from_schema(schema: &schemars::schema::Schema) -> Result<(String, bool)> {
+pub fn get_type_string_from_schema(schema: &schemars::schema::Schema) -> Result<(String, bool)> {
    match schema {
        schemars::schema::Schema::Object(o) => {
            if let Some(format) = &o.format {
@ -187,3 +207,78 @@ fn get_type_string_from_schema(schema: &schemars::schema::Schema) -> Result<(Str
        schemars::schema::Schema::Bool(_) => Ok((Primitive::Bool.to_string(), false)),
    }
 }
+
+pub fn get_autocomplete_string_from_schema(schema: &schemars::schema::Schema) -> Result<String> {
+    match schema {
+        schemars::schema::Schema::Object(o) => {
+            if let Some(format) = &o.format {
+                if format == "uuid" {
+                    return Ok(Primitive::Uuid.to_string());
+                } else if format == "double" || format == "uint" {
+                    return Ok(Primitive::Number.to_string());
+                } else {
+                    anyhow::bail!("unknown format: {}", format);
+                }
+            }
+
+            if let Some(obj_val) = &o.object {
+                let mut fn_docs = String::new();
+                fn_docs.push_str("{\n");
+                // Let's print out the object's properties.
+                for (prop_name, prop) in obj_val.properties.iter() {
+                    if prop_name.starts_with('_') {
+                        continue;
+                    }
+
+                    if let Some(description) = get_description_string_from_schema(prop) {
+                        fn_docs.push_str(&format!("\t// {}\n", description));
+                    }
+                    fn_docs.push_str(&format!(
+                        "\t\"{}\": {},\n",
+                        prop_name,
+                        get_autocomplete_string_from_schema(prop)?,
+                    ));
+                }
+
+                fn_docs.push('}');
+
+                return Ok(fn_docs);
+            }
+
+            if let Some(array_val) = &o.array {
+                if let Some(schemars::schema::SingleOrVec::Single(items)) = &array_val.items {
+                    // Let's print out the object's properties.
+                    return Ok(format!("[{}]", get_autocomplete_string_from_schema(items)?));
+                } else if let Some(items) = &array_val.contains {
+                    return Ok(format!("[{}]", get_autocomplete_string_from_schema(items)?));
+                }
+            }
+
+            if let Some(subschemas) = &o.subschemas {
+                let mut fn_docs = String::new();
+                if let Some(items) = &subschemas.one_of {
+                    if let Some(item) = items.iter().next() {
+                        // Let's print out the object's properties.
+                        fn_docs.push_str(&get_autocomplete_string_from_schema(item)?);
+                    }
+                } else if let Some(items) = &subschemas.any_of {
+                    if let Some(item) = items.iter().next() {
+                        // Let's print out the object's properties.
+                        fn_docs.push_str(&get_autocomplete_string_from_schema(item)?);
+                    }
+                } else {
+                    anyhow::bail!("unknown subschemas: {:#?}", subschemas);
+                }
+
+                return Ok(fn_docs);
+            }
+
+            if let Some(schemars::schema::SingleOrVec::Single(_string)) = &o.instance_type {
+                return Ok(Primitive::String.to_string());
+            }
+
+            anyhow::bail!("unknown type: {:#?}", o)
+        }
+        schemars::schema::Schema::Bool(_) => Ok(Primitive::Bool.to_string()),
+    }
+}
--- a/src/wasm-lib/kcl/src/engine/mod.rs
+++ b/src/wasm-lib/kcl/src/engine/mod.rs
@ -4,16 +4,20 @@ use wasm_bindgen::prelude::*;

 #[cfg(not(target_arch = "wasm32"))]
 #[cfg(not(test))]
+#[cfg(feature = "engine")]
 pub mod conn;
 #[cfg(not(target_arch = "wasm32"))]
 #[cfg(not(test))]
+#[cfg(feature = "engine")]
 pub use conn::EngineConnection;

 #[cfg(target_arch = "wasm32")]
 #[cfg(not(test))]
+#[cfg(feature = "engine")]
 pub mod conn_wasm;
 #[cfg(target_arch = "wasm32")]
 #[cfg(not(test))]
+#[cfg(feature = "engine")]
 pub use conn_wasm::EngineConnection;

 #[cfg(test)]
@ -21,6 +25,13 @@ pub mod conn_mock;
 #[cfg(test)]
 pub use conn_mock::EngineConnection;

+#[cfg(not(feature = "engine"))]
+#[cfg(not(test))]
+pub mod conn_mock;
+#[cfg(not(feature = "engine"))]
+#[cfg(not(test))]
+pub use conn_mock::EngineConnection;
+
 use crate::executor::SourceRange;

 #[derive(Debug)]
@ -33,6 +44,7 @@ pub struct EngineManager {
 impl EngineManager {
    #[cfg(target_arch = "wasm32")]
    #[cfg(not(test))]
+    #[cfg(feature = "engine")]
    #[wasm_bindgen(constructor)]
    pub async fn new(manager: conn_wasm::EngineCommandManager) -> EngineManager {
        EngineManager {
--- a/src/wasm-lib/kcl/src/executor.rs
+++ b/src/wasm-lib/kcl/src/executor.rs
@ -298,12 +298,24 @@ impl From<[f64; 2]> for Point2d {
    }
 }

+impl From<&[f64; 2]> for Point2d {
+    fn from(p: &[f64; 2]) -> Self {
+        Self { x: p[0], y: p[1] }
+    }
+}
+
 impl From<Point2d> for [f64; 2] {
    fn from(p: Point2d) -> Self {
        [p.x, p.y]
    }
 }

+impl From<Point2d> for kittycad::types::Point2D {
+    fn from(p: Point2d) -> Self {
+        Self { x: p.x, y: p.y }
+    }
+}
+
 #[derive(Debug, Deserialize, Serialize, PartialEq, Clone, ts_rs::TS, JsonSchema)]
 #[ts(export)]
 pub struct Point3d {
--- a/src/wasm-lib/kcl/src/lib.rs
+++ b/src/wasm-lib/kcl/src/lib.rs
@ -1,5 +1,5 @@
 pub mod abstract_syntax_tree_types;
-mod docs;
+pub mod docs;
 pub mod engine;
 pub mod errors;
 pub mod executor;
--- a/src/wasm-lib/kcl/src/math_parser.rs
+++ b/src/wasm-lib/kcl/src/math_parser.rs
@ -315,23 +315,25 @@ fn build_tree(
        })));
        return build_tree(&reverse_polish_notation_tokens[1..], new_stack);
    } else if current_token.token_type == TokenType::Word {
-        if reverse_polish_notation_tokens[1].token_type == TokenType::Brace
-            && reverse_polish_notation_tokens[1].value == "("
-        {
-            let closing_brace = find_closing_brace(reverse_polish_notation_tokens, 1, 0, "")?;
+        if reverse_polish_notation_tokens.len() > 1 {
+            if reverse_polish_notation_tokens[1].token_type == TokenType::Brace
+                && reverse_polish_notation_tokens[1].value == "("
+            {
+                let closing_brace = find_closing_brace(reverse_polish_notation_tokens, 1, 0, "")?;
+                let mut new_stack = stack;
+                new_stack.push(MathExpression::CallExpression(Box::new(
+                    make_call_expression(reverse_polish_notation_tokens, 0)?.expression,
+                )));
+                return build_tree(&reverse_polish_notation_tokens[closing_brace + 1..], new_stack);
+            }
            let mut new_stack = stack;
-            new_stack.push(MathExpression::CallExpression(Box::new(
-                make_call_expression(reverse_polish_notation_tokens, 0)?.expression,
-            )));
-            return build_tree(&reverse_polish_notation_tokens[closing_brace + 1..], new_stack);
+            new_stack.push(MathExpression::Identifier(Box::new(Identifier {
+                name: current_token.value.clone(),
+                start: current_token.start,
+                end: current_token.end,
+            })));
+            return build_tree(&reverse_polish_notation_tokens[1..], new_stack);
        }
-        let mut new_stack = stack;
-        new_stack.push(MathExpression::Identifier(Box::new(Identifier {
-            name: current_token.value.clone(),
-            start: current_token.start,
-            end: current_token.end,
-        })));
-        return build_tree(&reverse_polish_notation_tokens[1..], new_stack);
    } else if current_token.token_type == TokenType::Brace && current_token.value == "(" {
        let mut new_stack = stack;
        new_stack.push(MathExpression::ParenthesisToken(Box::new(ParenthesisToken {
@ -424,6 +426,14 @@ fn build_tree(
        new_stack.push(expression);
        return build_tree(&reverse_polish_notation_tokens[1..], new_stack);
    }
+
+    if stack.len() < 2 {
+        return Err(KclError::Syntax(KclErrorDetails {
+            source_ranges: vec![current_token.into()],
+            message: "unexpected end of expression".to_string(),
+        }));
+    }
+
    let left: (BinaryPart, usize) = match &stack[stack.len() - 2] {
        MathExpression::ExtendedBinaryExpression(bin_exp) => (
            BinaryPart::BinaryExpression(Box::new(BinaryExpression {
--- a/src/wasm-lib/kcl/src/parser.rs
+++ b/src/wasm-lib/kcl/src/parser.rs
@ -1,11 +1,11 @@
-use std::collections::HashMap;
+use std::{collections::HashMap, str::FromStr};

 use crate::{
    abstract_syntax_tree_types::{
        ArrayExpression, BinaryExpression, BinaryPart, BodyItem, CallExpression, ExpressionStatement,
        FunctionExpression, Identifier, Literal, LiteralIdentifier, MemberExpression, MemberObject, NoneCodeMeta,
        NoneCodeNode, ObjectExpression, ObjectKeyInfo, ObjectProperty, PipeExpression, PipeSubstitution, Program,
-        ReturnStatement, UnaryExpression, Value, VariableDeclaration, VariableDeclarator,
+        ReturnStatement, UnaryExpression, Value, VariableDeclaration, VariableDeclarator, VariableKind,
    },
    errors::{KclError, KclErrorDetails},
    math_parser::parse_expression,
@ -145,7 +145,12 @@ pub fn find_closing_brace(
    search_opening_brace: &str,
 ) -> Result<usize, KclError> {
    let closing_brace_map: HashMap<&str, &str> = [("(", ")"), ("{", "}"), ("[", "]")].iter().cloned().collect();
-    let current_token = &tokens[index];
+    let Some(current_token) = tokens.get(index) else {
+        return Err(KclError::Syntax(KclErrorDetails {
+            source_ranges: vec![tokens.last().unwrap().into()],
+            message: "unexpected end".to_string(),
+        }));
+    };
    let mut search_opening_brace = search_opening_brace;
    let is_first_call = search_opening_brace.is_empty() && brace_count == 0;
    if is_first_call {
@ -966,13 +971,12 @@ fn make_variable_declaration(tokens: &[Token], index: usize) -> Result<VariableD
        declaration: VariableDeclaration {
            start: current_token.start,
            end: variable_declarators_result.declarations[variable_declarators_result.declarations.len() - 1].end,
-            kind: if current_token.value == "const" {
-                "const".to_string()
-            } else if current_token.value == "fn" {
-                "fn".to_string()
-            } else {
-                "unkown".to_string()
-            },
+            kind: VariableKind::from_str(&current_token.value).map_err(|_| {
+                KclError::Syntax(KclErrorDetails {
+                    source_ranges: vec![current_token.into()],
+                    message: "Unexpected token".to_string(),
+                })
+            })?,
            declarations: variable_declarators_result.declarations,
        },
        last_index: variable_declarators_result.last_index,
@ -2479,7 +2483,7 @@ show(mySk1)"#;
  |> close(%)"#,
        );
        let result = make_variable_declaration(&tokens, 0).unwrap();
-        assert_eq!(result.declaration.kind, "const");
+        assert_eq!(result.declaration.kind.to_string(), "const");
        assert_eq!(result.declaration.declarations.len(), 1);
        assert_eq!(result.declaration.declarations[0].id.name, "yo");
        let declaration = result.declaration.declarations[0].clone();
--- a/src/wasm-lib/kcl/src/std/mod.rs
+++ b/src/wasm-lib/kcl/src/std/mod.rs
@ -27,8 +27,7 @@ pub type FnMap = HashMap<String, StdFn>;
 pub type StdFn = fn(&mut Args) -> Result<MemoryItem, KclError>;

 pub struct StdLib {
-    #[allow(dead_code)]
-    internal_fn_names: Vec<Box<(dyn crate::docs::StdLibFn)>>,
+    pub internal_fn_names: Vec<Box<(dyn crate::docs::StdLibFn)>>,

    pub fns: FnMap,
 }
@ -64,6 +63,8 @@ impl StdLib {
            Box::new(crate::std::sketch::AngledLineThatIntersects),
            Box::new(crate::std::sketch::StartSketchAt),
            Box::new(crate::std::sketch::Close),
+            Box::new(crate::std::sketch::Arc),
+            Box::new(crate::std::sketch::BezierCurve),
        ];

        let mut fns = HashMap::new();
@ -536,15 +537,8 @@ mod tests {
            fn_docs.push_str(&format!("{}\n\n", internal_fn.description()));

            fn_docs.push_str("```\n");
-            fn_docs.push_str(&format!("{}(", internal_fn.name()));
-            for (i, arg) in internal_fn.args().iter().enumerate() {
-                if i > 0 {
-                    fn_docs.push_str(", ");
-                }
-                fn_docs.push_str(&format!("{}: {}", arg.name, arg.type_));
-            }
-            fn_docs.push_str(") -> ");
-            fn_docs.push_str(&internal_fn.return_value().type_);
+            let signature = internal_fn.fn_signature();
+            fn_docs.push_str(&signature);
            fn_docs.push_str("\n```\n\n");

            fn_docs.push_str("#### Arguments\n\n");
--- a/src/wasm-lib/kcl/src/std/sketch.rs
+++ b/src/wasm-lib/kcl/src/std/sketch.rs
@ -10,7 +10,7 @@ use crate::{
    errors::{KclError, KclErrorDetails},
    executor::{BasePath, GeoMeta, MemoryItem, Path, Point2d, Position, Rotation, SketchGroup},
    std::{
-        utils::{get_x_component, get_y_component, intersection_with_parallel_line},
+        utils::{arc_angles, arc_center_and_end, get_x_component, get_y_component, intersection_with_parallel_line},
        Args,
    },
 };
@ -43,7 +43,7 @@ pub fn line_to(args: &mut Args) -> Result<MemoryItem, KclError> {
 #[stdlib {
    name = "lineTo",
 }]
-fn inner_line_to(data: LineToData, sketch_group: SketchGroup, args: &Args) -> Result<SketchGroup, KclError> {
+fn inner_line_to(data: LineToData, sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup, KclError> {
    let from = sketch_group.get_coords_from_paths()?;
    let to = match data {
        LineToData::PointWithTag { to, .. } => to,
@ -51,6 +51,21 @@ fn inner_line_to(data: LineToData, sketch_group: SketchGroup, args: &Args) -> Re
    };

    let id = uuid::Uuid::new_v4();
+
+    args.send_modeling_cmd(
+        id,
+        ModelingCmd::ExtendPath {
+            path: sketch_group.id,
+            segment: kittycad::types::PathSegment::Line {
+                end: Point3D {
+                    x: to[0],
+                    y: to[1],
+                    z: 0.0,
+                },
+            },
+        },
+    )?;
+
    let current_path = Path::ToPoint {
        base: BasePath {
            from: from.into(),
@ -101,7 +116,7 @@ pub fn x_line_to(args: &mut Args) -> Result<MemoryItem, KclError> {
 #[stdlib {
    name = "xLineTo",
 }]
-fn inner_x_line_to(data: AxisLineToData, sketch_group: SketchGroup, args: &Args) -> Result<SketchGroup, KclError> {
+fn inner_x_line_to(data: AxisLineToData, sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup, KclError> {
    let from = sketch_group.get_coords_from_paths()?;

    let line_to_data = match data {
@ -126,7 +141,7 @@ pub fn y_line_to(args: &mut Args) -> Result<MemoryItem, KclError> {
 #[stdlib {
    name = "yLineTo",
 }]
-fn inner_y_line_to(data: AxisLineToData, sketch_group: SketchGroup, args: &Args) -> Result<SketchGroup, KclError> {
+fn inner_y_line_to(data: AxisLineToData, sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup, KclError> {
    let from = sketch_group.get_coords_from_paths()?;

    let line_to_data = match data {
@ -716,6 +731,248 @@ fn inner_close(sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup
    Ok(new_sketch_group)
 }

+/// Data to draw an arc.
+#[derive(Debug, Clone, Deserialize, Serialize, PartialEq, ts_rs::TS, JsonSchema)]
+#[ts(export)]
+#[serde(rename_all = "camelCase", untagged)]
+pub enum ArcData {
+    /// Angles and radius with a tag.
+    AnglesAndRadiusWithTag {
+        /// The start angle.
+        angle_start: f64,
+        /// The end angle.
+        angle_end: f64,
+        /// The radius.
+        radius: f64,
+        /// The tag.
+        tag: String,
+    },
+    /// Angles and radius.
+    AnglesAndRadius {
+        /// The start angle.
+        angle_start: f64,
+        /// The end angle.
+        angle_end: f64,
+        /// The radius.
+        radius: f64,
+    },
+    /// Center, to and radius with a tag.
+    CenterToRadiusWithTag {
+        /// The center.
+        center: [f64; 2],
+        /// The to point.
+        to: [f64; 2],
+        /// The radius.
+        radius: f64,
+        /// The tag.
+        tag: String,
+    },
+    /// Center, to and radius.
+    CenterToRadius {
+        /// The center.
+        center: [f64; 2],
+        /// The to point.
+        to: [f64; 2],
+        /// The radius.
+        radius: f64,
+    },
+}
+
+/// Draw an arc.
+pub fn arc(args: &mut Args) -> Result<MemoryItem, KclError> {
+    let (data, sketch_group): (ArcData, SketchGroup) = args.get_data_and_sketch_group()?;
+
+    let new_sketch_group = inner_arc(data, sketch_group, args)?;
+    Ok(MemoryItem::SketchGroup(new_sketch_group))
+}
+
+/// Draw an arc.
+#[stdlib {
+    name = "arc",
+}]
+fn inner_arc(data: ArcData, sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup, KclError> {
+    let from = sketch_group.get_coords_from_paths()?;
+
+    let (center, angle_start, angle_end, radius, end) = match &data {
+        ArcData::AnglesAndRadiusWithTag {
+            angle_start,
+            angle_end,
+            radius,
+            ..
+        } => {
+            let (center, end) = arc_center_and_end(&from, *angle_start, *angle_end, *radius);
+            (center, *angle_start, *angle_end, *radius, end)
+        }
+        ArcData::AnglesAndRadius {
+            angle_start,
+            angle_end,
+            radius,
+        } => {
+            let (center, end) = arc_center_and_end(&from, *angle_start, *angle_end, *radius);
+            (center, *angle_start, *angle_end, *radius, end)
+        }
+        ArcData::CenterToRadiusWithTag { center, to, radius, .. } => {
+            let (angle_start, angle_end) = arc_angles(&from, &center.into(), &to.into(), *radius, args.source_range)?;
+            (center.into(), angle_start, angle_end, *radius, to.into())
+        }
+        ArcData::CenterToRadius { center, to, radius } => {
+            let (angle_start, angle_end) = arc_angles(&from, &center.into(), &to.into(), *radius, args.source_range)?;
+            (center.into(), angle_start, angle_end, *radius, to.into())
+        }
+    };
+
+    let id = uuid::Uuid::new_v4();
+
+    args.send_modeling_cmd(
+        id,
+        ModelingCmd::ExtendPath {
+            path: sketch_group.id,
+            segment: kittycad::types::PathSegment::Arc {
+                angle_start,
+                angle_end,
+                center: center.into(),
+                radius,
+            },
+        },
+    )?;
+    // Move the path pen to the end of the arc.
+    // Since that is where we want to draw the next path.
+    // TODO: the engine should automatically move the pen to the end of the arc.
+    // This just seems inefficient.
+    args.send_modeling_cmd(
+        id,
+        ModelingCmd::MovePathPen {
+            path: sketch_group.id,
+            to: Point3D {
+                x: end.x,
+                y: end.y,
+                z: 0.0,
+            },
+        },
+    )?;
+
+    let current_path = Path::ToPoint {
+        base: BasePath {
+            from: from.into(),
+            to: end.into(),
+            name: match data {
+                ArcData::AnglesAndRadiusWithTag { tag, .. } => tag.to_string(),
+                ArcData::AnglesAndRadius { .. } => "".to_string(),
+                ArcData::CenterToRadiusWithTag { tag, .. } => tag.to_string(),
+                ArcData::CenterToRadius { .. } => "".to_string(),
+            },
+            geo_meta: GeoMeta {
+                id,
+                metadata: args.source_range.into(),
+            },
+        },
+    };
+
+    let mut new_sketch_group = sketch_group.clone();
+    new_sketch_group.value.push(current_path);
+
+    Ok(new_sketch_group)
+}
+
+/// Data to draw a bezier curve.
+#[derive(Debug, Clone, Deserialize, Serialize, PartialEq, ts_rs::TS, JsonSchema)]
+#[ts(export)]
+#[serde(rename_all = "camelCase", untagged)]
+pub enum BezierData {
+    /// Points with a tag.
+    PointsWithTag {
+        /// The to point.
+        to: [f64; 2],
+        /// The first control point.
+        control1: [f64; 2],
+        /// The second control point.
+        control2: [f64; 2],
+        /// The tag.
+        tag: String,
+    },
+    /// Points.
+    Points {
+        /// The to point.
+        to: [f64; 2],
+        /// The first control point.
+        control1: [f64; 2],
+        /// The second control point.
+        control2: [f64; 2],
+    },
+}
+
+/// Draw a bezier curve.
+pub fn bezier_curve(args: &mut Args) -> Result<MemoryItem, KclError> {
+    let (data, sketch_group): (BezierData, SketchGroup) = args.get_data_and_sketch_group()?;
+
+    let new_sketch_group = inner_bezier_curve(data, sketch_group, args)?;
+    Ok(MemoryItem::SketchGroup(new_sketch_group))
+}
+
+/// Draw a bezier curve.
+#[stdlib {
+    name = "bezierCurve",
+}]
+fn inner_bezier_curve(data: BezierData, sketch_group: SketchGroup, args: &mut Args) -> Result<SketchGroup, KclError> {
+    let from = sketch_group.get_coords_from_paths()?;
+
+    let (to, control1, control2) = match &data {
+        BezierData::PointsWithTag {
+            to, control1, control2, ..
+        } => (to, control1, control2),
+        BezierData::Points { to, control1, control2 } => (to, control1, control2),
+    };
+
+    let to = [from.x + to[0], from.y + to[1]];
+
+    let id = uuid::Uuid::new_v4();
+
+    args.send_modeling_cmd(
+        id,
+        ModelingCmd::ExtendPath {
+            path: sketch_group.id,
+            segment: kittycad::types::PathSegment::Bezier {
+                control1: Point3D {
+                    x: from.x + control1[0],
+                    y: from.y + control1[1],
+                    z: 0.0,
+                },
+                control2: Point3D {
+                    x: from.x + control2[0],
+                    y: from.y + control2[1],
+                    z: 0.0,
+                },
+                end: Point3D {
+                    x: to[0],
+                    y: to[1],
+                    z: 0.0,
+                },
+            },
+        },
+    )?;
+
+    let current_path = Path::ToPoint {
+        base: BasePath {
+            from: from.into(),
+            to,
+            name: if let BezierData::PointsWithTag { tag, .. } = data {
+                tag.to_string()
+            } else {
+                "".to_string()
+            },
+            geo_meta: GeoMeta {
+                id,
+                metadata: args.source_range.into(),
+            },
+        },
+    };
+
+    let mut new_sketch_group = sketch_group.clone();
+    new_sketch_group.value.push(current_path);
+
+    Ok(new_sketch_group)
+}
+
 #[cfg(test)]
 mod tests {

--- a/src/wasm-lib/kcl/src/std/utils.rs
+++ b/src/wasm-lib/kcl/src/std/utils.rs
@ -1,3 +1,8 @@
+use crate::{
+    errors::{KclError, KclErrorDetails},
+    executor::{Point2d, SourceRange},
+};
+
 pub fn get_angle(a: &[f64; 2], b: &[f64; 2]) -> f64 {
    let x = b[0] - a[0];
    let y = b[1] - a[1];
@ -160,12 +165,80 @@ pub fn get_x_component(angle_degree: f64, y_component: f64) -> [f64; 2] {
    [sign * x_component, sign * y_component]
 }

+pub fn arc_center_and_end(from: &Point2d, start_angle_deg: f64, end_angle_deg: f64, radius: f64) -> (Point2d, Point2d) {
+    let start_angle = start_angle_deg * (std::f64::consts::PI / 180.0);
+    let end_angle = end_angle_deg * (std::f64::consts::PI / 180.0);
+
+    let center = Point2d {
+        x: -1.0 * (radius * start_angle.cos() - from.x),
+        y: -1.0 * (radius * start_angle.sin() - from.y),
+    };
+
+    let end = Point2d {
+        x: center.x + radius * end_angle.cos(),
+        y: center.y + radius * end_angle.sin(),
+    };
+
+    (center, end)
+}
+
+pub fn arc_angles(
+    from: &Point2d,
+    to: &Point2d,
+    center: &Point2d,
+    radius: f64,
+    source_range: SourceRange,
+) -> Result<(f64, f64), KclError> {
+    // First make sure that the points are on the circumference of the circle.
+    // If not, we'll return an error.
+    if !is_on_circumference(center, from, radius) {
+        return Err(KclError::Semantic(KclErrorDetails {
+            message: format!(
+                "Point {:?} is not on the circumference of the circle with center {:?} and radius {}.",
+                from, center, radius
+            ),
+            source_ranges: vec![source_range],
+        }));
+    }
+
+    if !is_on_circumference(center, to, radius) {
+        return Err(KclError::Semantic(KclErrorDetails {
+            message: format!(
+                "Point {:?} is not on the circumference of the circle with center {:?} and radius {}.",
+                to, center, radius
+            ),
+            source_ranges: vec![source_range],
+        }));
+    }
+
+    let start_angle = (from.y - center.y).atan2(from.x - center.x);
+    let end_angle = (to.y - center.y).atan2(to.x - center.x);
+
+    let start_angle_deg = start_angle * (180.0 / std::f64::consts::PI);
+    let end_angle_deg = end_angle * (180.0 / std::f64::consts::PI);
+
+    Ok((start_angle_deg, end_angle_deg))
+}
+
+pub fn is_on_circumference(center: &Point2d, point: &Point2d, radius: f64) -> bool {
+    let dx = point.x - center.x;
+    let dy = point.y - center.y;
+
+    let distance_squared = dx.powi(2) + dy.powi(2);
+
+    // We'll check if the distance squared is approximately equal to radius squared.
+    // Due to potential floating point inaccuracies, we'll check if the difference
+    // is very small (e.g., 1e-9) rather than checking for strict equality.
+    (distance_squared - radius.powi(2)).abs() < 1e-9
+}
+
 #[cfg(test)]
 mod tests {
    // Here you can bring your functions into scope
    use pretty_assertions::assert_eq;

    use super::{get_x_component, get_y_component};
+    use crate::executor::SourceRange;

    static EACH_QUAD: [(i32, [i32; 2]); 12] = [
        (-315, [1, 1]),
@ -241,4 +314,77 @@ mod tests {
        assert!((result[0] - 0.0).abs() < f64::EPSILON);
        assert_eq!(result[1] as i32, -1);
    }
+
+    #[test]
+    fn test_arc_center_and_end() {
+        let (center, end) = super::arc_center_and_end(&super::Point2d { x: 0.0, y: 0.0 }, 0.0, 90.0, 1.0);
+        assert_eq!(center.x.round(), -1.0);
+        assert_eq!(center.y, 0.0);
+        assert_eq!(end.x.round(), -1.0);
+        assert_eq!(end.y, 1.0);
+
+        let (center, end) = super::arc_center_and_end(&super::Point2d { x: 0.0, y: 0.0 }, 0.0, 180.0, 1.0);
+        assert_eq!(center.x.round(), -1.0);
+        assert_eq!(center.y, 0.0);
+        assert_eq!(end.x.round(), -2.0);
+        assert_eq!(end.y.round(), 0.0);
+
+        let (center, end) = super::arc_center_and_end(&super::Point2d { x: 0.0, y: 0.0 }, 0.0, 180.0, 10.0);
+        assert_eq!(center.x.round(), -10.0);
+        assert_eq!(center.y, 0.0);
+        assert_eq!(end.x.round(), -20.0);
+        assert_eq!(end.y.round(), 0.0);
+    }
+
+    #[test]
+    fn test_arc_angles() {
+        let (angle_start, angle_end) = super::arc_angles(
+            &super::Point2d { x: 0.0, y: 0.0 },
+            &super::Point2d { x: -1.0, y: 1.0 },
+            &super::Point2d { x: -1.0, y: 0.0 },
+            1.0,
+            SourceRange(Default::default()),
+        )
+        .unwrap();
+        assert_eq!(angle_start.round(), 0.0);
+        assert_eq!(angle_end.round(), 90.0);
+
+        let (angle_start, angle_end) = super::arc_angles(
+            &super::Point2d { x: 0.0, y: 0.0 },
+            &super::Point2d { x: -2.0, y: 0.0 },
+            &super::Point2d { x: -1.0, y: 0.0 },
+            1.0,
+            SourceRange(Default::default()),
+        )
+        .unwrap();
+        assert_eq!(angle_start.round(), 0.0);
+        assert_eq!(angle_end.round(), 180.0);
+
+        let (angle_start, angle_end) = super::arc_angles(
+            &super::Point2d { x: 0.0, y: 0.0 },
+            &super::Point2d { x: -20.0, y: 0.0 },
+            &super::Point2d { x: -10.0, y: 0.0 },
+            10.0,
+            SourceRange(Default::default()),
+        )
+        .unwrap();
+        assert_eq!(angle_start.round(), 0.0);
+        assert_eq!(angle_end.round(), 180.0);
+
+        let result = super::arc_angles(
+            &super::Point2d { x: 0.0, y: 5.0 },
+            &super::Point2d { x: 5.0, y: 5.0 },
+            &super::Point2d { x: 10.0, y: -10.0 },
+            10.0,
+            SourceRange(Default::default()),
+        );
+
+        if let Err(err) = result {
+            assert!(err.to_string().contains( "Point Point2d { x: 0.0, y: 5.0 } is not on the circumference of the circle with center Point2d { x: 10.0, y: -10.0 } and radius 10."));
+        } else {
+            panic!("Expected error");
+        }
+        assert_eq!(angle_start.round(), 0.0);
+        assert_eq!(angle_end.round(), 180.0);
+    }
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1752,10 +1752,10 @@
  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==

-"@kittycad/lib@^0.0.34":
-  version "0.0.34"
-  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.34.tgz#c1f1021f6c77bd9f47caa685cfbff0ef358a0316"
-  integrity sha512-9pUUuspJB/rayW4adfF7UqRYLw1pugBy3t0+V6qK3sWttG9flgv54fPw3JKewn7VFoEjRtNtoREMAoWb4ZrUIw==
+"@kittycad/lib@^0.0.35":
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.35.tgz#bde8868048f9fd53f8309e7308aeba622898b935"
+  integrity sha512-qM8AyP2QUlDfPWNxb1Fs/Pq9AebGVDN1OHjByxbGomKCy0jFdN2TsyDdhQH/CAZGfBCgPEfr5bq6rkUBGSXcNw==
  dependencies:
    node-fetch "3.3.2"
    openapi-types "^12.0.0"
@ -1986,6 +1986,70 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz#31b9c510d8cada9683549e1dbb4284cca5001faf"
  integrity sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==

+"@sentry-internal/tracing@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.65.0.tgz#f7c56885d10c753ef03a25405dae13728916c0f5"
+  integrity sha512-TEYkiq5vKr1Y79YIu+UYr1sO3vEMttQOBsOZLziDbqiC7TvKUARBR4W5XWfb9qBVDeon87EFNKluW0/+7rzYWw==
+  dependencies:
+    "@sentry/core" "7.65.0"
+    "@sentry/types" "7.65.0"
+    "@sentry/utils" "7.65.0"
+    tslib "^2.4.1 || ^1.9.3"
+
+"@sentry/browser@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.65.0.tgz#fb2009d6f8f1e5e3e1c616ce0ea70dd728c46ce7"
+  integrity sha512-TUzZPAXNJ/Y1yakFODYhsEtdDpLdkgjTfrx5i9MOnXQLrcRR0C4TC1KitqbP6Tv7Xha9WiR0TDZkh7gS/9RxEA==
+  dependencies:
+    "@sentry-internal/tracing" "7.65.0"
+    "@sentry/core" "7.65.0"
+    "@sentry/replay" "7.65.0"
+    "@sentry/types" "7.65.0"
+    "@sentry/utils" "7.65.0"
+    tslib "^2.4.1 || ^1.9.3"
+
+"@sentry/core@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.65.0.tgz#01c1320b4e7c62ccf757258c1622d07cc743468a"
+  integrity sha512-EwZABW8CtAbRGXV69FqeCqcNApA+Jbq308dko0W+MFdFe+9t2RGubUkpPxpJcbWy/dN2j4LiuENu1T7nWn0ZAQ==
+  dependencies:
+    "@sentry/types" "7.65.0"
+    "@sentry/utils" "7.65.0"
+    tslib "^2.4.1 || ^1.9.3"
+
+"@sentry/react@^7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.65.0.tgz#98c044bc2d7a99da7dfdef2686c3214d8f2f4ee0"
+  integrity sha512-1ABxHwEHw5J4avUr8TBch3l7UszbNIroWergwiLPSy+EJU8WuB3Fdx0zSU+hS4Sujf8HNcRgu1JyWThZFTnIMA==
+  dependencies:
+    "@sentry/browser" "7.65.0"
+    "@sentry/types" "7.65.0"
+    "@sentry/utils" "7.65.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^2.4.1 || ^1.9.3"
+
+"@sentry/replay@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.65.0.tgz#e73a8a577c8b492c3f18ab769db15993b96e77fe"
+  integrity sha512-vhlk5F9RrhMQ+gOjNlLoWXamAPLNIT6wNII1O9ae+DRhZFmiUYirP5ag6dH5lljvNZndKl+xw+lJGJ3YdjXKlQ==
+  dependencies:
+    "@sentry/core" "7.65.0"
+    "@sentry/types" "7.65.0"
+    "@sentry/utils" "7.65.0"
+
+"@sentry/types@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.65.0.tgz#f0f4e6583c631408d15ee5fb46901fd195fa1cc4"
+  integrity sha512-YYq7IDLLhpSBTmHoyWFtq/5ZDaEJ01r7xGuhB0aSIq33cm2I7im/B3ipzoOP/ukGZSIhuYVW9t531xZEO0+6og==
+
+"@sentry/utils@7.65.0":
+  version "7.65.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.65.0.tgz#a7929c5b019fa33e819b08a99744fa27cd38c85f"
+  integrity sha512-2JEBf4jzRSClhp+LJpX/E3QgHEeKvXqFMeNhmwQ07qqd6szhfH2ckYFj4gXk6YiGGY4Act3C6oxLfdZovG71bw==
+  dependencies:
+    "@sentry/types" "7.65.0"
+    tslib "^2.4.1 || ^1.9.3"
+
 "@sinclair/typebox@^0.27.8":
  version "0.27.8"
  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
@ -4031,7 +4095,7 @@ he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@ -5763,6 +5827,11 @@ tslib@^2.0.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==

+"tslib@^2.4.1 || ^1.9.3":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@~2.4:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
Author	SHA1	Message	Date
Pierre Jacquier	cccedceea0	Bump to v0.3.0 (#378 )	2023-09-04 11:01:51 -04:00
mlfarrell	ed68a34560	disable high dpi video streaming (#374 )	2023-09-01 20:29:03 -04:00
Pierre Jacquier	00ee913e3f	Upload release artifacts to the release (on top of dl.kittycad.io) (#371 ) * Upload release artifacts to the release (on top of dl.kittycad.io) Fixes #365 * Remove test	2023-09-01 14:20:48 -04:00
Jess Frazelle	46cc67e2db	messing around with arc and bezier (#363 ) updates fixes updates add another test updates updates updates updates updates updates add test for error; updates updates fixups updates updates fixes updates fixes updates fixes updates updates updates bump Signed-off-by: Jess Frazelle <github@jessfraz.com>	2023-08-31 22:19:23 -07:00
Paul Tagliamonte	ff1be34f54	Revert mute-reset behavior (#369 ) I have a hunch this is causing more problems than it fixes. Signed-off-by: Paul R. Tagliamonte <paul@kittycad.io>	2023-08-31 22:57:58 -04:00
Frank Noirot	848bf61277	Don't fetch for user if in dev with a local engine (#368 ) * Don't fetch for user if in dev with a local engine But rather return a dummy user (created by @paultag) so that teammates using locally-running engines can bypass auth. Signed-off-by: Frank Noirot <frank@kittycad.io> * Use env var to be more explicit --------- Signed-off-by: Frank Noirot <frank@kittycad.io>	2023-08-31 16:23:12 -04:00
Frank Noirot	043333d3bc	Franknoirot/fix onboarding units feedback followup (#367 )	2023-08-31 16:08:15 -04:00
Kurt Hutten	19d90b8081	bump kitty lib (#364 )	2023-09-01 06:07:27 +10:00
Paul Tagliamonte	4837c52908	Redo how Spans are used from the Engine (#359 ) * Redo how Spans are used from the Engine I don't like all the Sentry-specific stuff we've got to work around, and I want to add a bunch more spans and more cleanly end the transaction. This isn't generic enough to pull out of this code (yet?), but we clearly need some class of abstraction due to the highly async pattern in the WebRTC code. I want to add in more tags, but there are a lot of events we need to wait on. I'd like to hook into the <video> 'play' eventListener, but it's hard to do from all the way down in the Engine. Signed-off-by: Paul R. Tagliamonte <paul@kittycad.io>	2023-08-31 12:59:46 -04:00
Frank Noirot	afcf820bdd	Franknoirot/fix onboarding units (#366 ) * Fix up camera step copy and pane opacity for step * Fix broken onboarding redirect with double slash * Fix pane height for web bug from blur filter I found a bug with browser behavior, at least on Chrome. If you use `backdrop-filter: blur()` at all, you can't have any children that overflow. The browser will ignore any attempt and make those children max full-height. This broke our side panels after I added blur, but only in Chrome/browser target. Signed-off-by: Frank Noirot <frank@kittycad.io> * Fix bug with unit system Changing the unit system didn't also change the base unit in the onboarding anymore. It needed updated to use XState the same way as `/settings` Signed-off-by: Frank Noirot <frank@kittycad.io> * Fix AppHeader item spacing when there's no toolbar --------- Signed-off-by: Frank Noirot <frank@kittycad.io>	2023-08-31 10:41:24 -04:00
Frank Noirot	18959510f8	Franknoirot/expandable toolbar (#343 ) * Add basic Popover functionality * Fix up light mode of basic bar * Add support for 2D and 3D mode styling * Turn toolbar buttons back on * Remove ActionButton until after tool logic refactor * Add transitions * Add styles to always center toolbar in header	2023-08-31 09:47:59 -04:00
Frank Noirot	798cbe968a	Franknoirot/live system theme (#358 ) * Only show the Replay Onboarding button in file settings Resolves #351. Eventually we will implement more sophisticated logic for which settings should be shown where. Signed-off-by: Frank Noirot <frank@kittycad.io> * Remove unnecessary console.log Signed-off-by: Frank Noirot <frank@kittycad.io> * Respond to system theme changes in real-time If the user has their "theme" setting to "system". I tried to use the [XState invoked callback approach](https://xstate.js.org/docs/guides/communication.html#invoking-callbacks), but I could not find any way to respond to the latest context/state values within the media listener; I kept receiving stale state. Signed-off-by: Frank Noirot <frank@kittycad.io> --------- Signed-off-by: Frank Noirot <frank@kittycad.io>	2023-08-31 09:34:13 -04:00
Frank Noirot	9cbc088ba3	Only show the Replay Onboarding button in file settings (#355 )	2023-08-31 08:27:05 -04:00
Frank Noirot	2693a5609b	Add subtle transitions to sidebars (#344 )	2023-08-31 08:17:52 -04:00
Frank Noirot	3507da7b39	Tweak text constrast, blinking cursor (#338 )	2023-08-31 08:17:26 -04:00
Kurt Hutten	56cfb6d1f0	remove excessive serialisation (#362 ) remove excessive serialization	2023-08-31 14:44:22 +10:00
dependabot[bot]	2b974ef1de	Bump schemars from 0.8.12 to 0.8.13 in /src/wasm-lib (#341 ) Bumps [schemars](https://github.com/GREsau/schemars) from 0.8.12 to 0.8.13. - [Release notes](https://github.com/GREsau/schemars/releases) - [Changelog](https://github.com/GREsau/schemars/blob/master/CHANGELOG.md) - [Commits](https://github.com/GREsau/schemars/compare/v0.8.12...v0.8.13) --- updated-dependencies: - dependency-name: schemars dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-08-30 21:06:40 -07:00
dependabot[bot]	253f1992fd	Bump tauri-build from 1.3.0 to 1.4.0 in /src-tauri (#282 ) Bumps [tauri-build](https://github.com/tauri-apps/tauri) from 1.3.0 to 1.4.0. - [Release notes](https://github.com/tauri-apps/tauri/releases) - [Commits](https://github.com/tauri-apps/tauri/compare/tauri-build-v1.3...tauri-build-v1.4) --- updated-dependencies: - dependency-name: tauri-build dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-08-30 21:06:03 -07:00
dependabot[bot]	76d3794b45	Bump bson from 2.6.1 to 2.7.0 in /src/wasm-lib (#360 ) Bumps [bson](https://github.com/mongodb/bson-rust) from 2.6.1 to 2.7.0. - [Release notes](https://github.com/mongodb/bson-rust/releases) - [Commits](https://github.com/mongodb/bson-rust/compare/v2.6.1...v2.7.0) --- updated-dependencies: - dependency-name: bson dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-08-30 21:05:35 -07:00
dependabot[bot]	e52c8c9db6	Bump kittycad from 0.2.22 to 0.2.23 in /src/wasm-lib (#361 ) Bumps [kittycad](https://github.com/KittyCAD/kittycad.rs) from 0.2.22 to 0.2.23. - [Release notes](https://github.com/KittyCAD/kittycad.rs/releases) - [Commits](https://github.com/KittyCAD/kittycad.rs/compare/v0.2.22...v0.2.23) --- updated-dependencies: - dependency-name: kittycad dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-08-30 21:05:21 -07:00
Kurt Hutten	eb48d51309	rename lossy to unreliable (#357 ) * rename lossy to unreliable * fmt * missed a rename	2023-08-31 07:39:03 +10:00
Kurt Hutten	f3274e03ff	refactor callbacks (#334 ) refactor callbacks	2023-08-30 15:19:37 -04:00
Paul Tagliamonte	46937199a3	Start to clean up Sentry now that the app is back up again. (#356 ) * Start to clean up Sentry now that the app is back up again. Remove Sentry from local development I thought .env.development was for dev.kc.io, not just local dev. Someone can add this to .local if they need to test the Sentry stuff for now. Signed-off-by: Paul Tagliamonte <paul@kittycad.io>	2023-08-30 13:14:52 -04:00
Paul Tagliamonte	e2a4798c2f	Update production Sentry values (#354 ) Signed-off-by: Paul Tagliamonte <paul@kittycad.io>	2023-08-30 10:52:26 -04:00
Paul Tagliamonte	659e6d5b45	Add in Sentry, WebRTC Statistics (#345 ) Collect WebRTC Statistical Information Add in some instrumentation to track the duration of the setup phase, and set up a job to make periodic use of the WebRTC Statistics API to collect information about the connection (specifically, each track), including transport-level information, timing information and bandwidth information. Sentry isn't the best place for that information, but it'll work until we can work out a good long-term solution for it. Signed-off-by: Paul Tagliamonte <paul@kittycad.io>	2023-08-30 10:34:14 -04:00