Cut release v0.27.0 (#4516)

* Cut release v0.26.6

* Cut release v0.27.0

.github/ci-cd-scripts/playwright-browser-chrome.sh

@@ -4,9 +4,9 @@ set -euo pipefail
 if [[ ! -f "test-results/.last-run.json" ]]; then
     # if no last run artifact, than run plawright normally
     echo "run playwright normally"
-    if [[ "$3" == "ubuntu-latest" ]]; then
+    if [[ "$3" == ubuntu-latest* ]]; then
         yarn test:playwright:browser:chrome:ubuntu -- --shard=$1/$2 || true
-    elif [[ "$3" == "windows-latest" ]]; then
+    elif [[ "$3" == windows-latest* ]]; then
         yarn test:playwright:browser:chrome:windows -- --shard=$1/$2 || true
     else
         echo "Do not run playwright. Unable to detect os runtime."
@@ -26,9 +26,9 @@ while [[ $retry -le $max_retrys ]]; do
         if [[ $failed_tests -gt 0 ]]; then
             echo "retried=true" >>$GITHUB_OUTPUT
             echo "run playwright with last failed tests and retry $retry"
-            if [[ "$3" == "ubuntu-latest" ]]; then
+            if [[ "$3" == ubuntu-latest* ]]; then
                 yarn test:playwright:browser:chrome:ubuntu -- --last-failed || true
-            elif [[ "$3" == "windows-latest" ]]; then
+            elif [[ "$3" == windows-latest* ]]; then
                 yarn test:playwright:browser:chrome:windows -- --last-failed || true
             else
                 echo "Do not run playwright. Unable to detect os runtime."

.github/ci-cd-scripts/playwright-electron.sh

@@ -4,11 +4,11 @@ set -euo pipefail
 if [[ ! -f "test-results/.last-run.json" ]]; then
     # if no last run artifact, than run plawright normally
     echo "run playwright normally"
-        if [[ "$1" == "ubuntu-latest" ]]; then
+        if [[ "$1" == ubuntu-latest* ]]; then
             xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn test:playwright:electron:ubuntu || true
-        elif [[ "$1" == "windows-latest" ]]; then
+        elif [[ "$1" == windows-latest* ]]; then
             yarn test:playwright:electron:windows || true
-        elif [[ "$1" == "macos-14" ]]; then
+        elif [[ "$1" == macos-14* ]]; then
             yarn test:playwright:electron:macos || true
         else
             echo "Do not run playwright. Unable to detect os runtime."
@@ -28,11 +28,11 @@ while [[ $retry -le $max_retrys ]]; do
         if [[ $failed_tests -gt 0 ]]; then
             echo "retried=true" >>$GITHUB_OUTPUT
             echo "run playwright with last failed tests and retry $retry"
-            if [[ "$1" == "ubuntu-latest" ]]; then
+            if [[ "$1" == ubuntu-latest* ]]; then
                 xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn test:playwright:electron:ubuntu -- --last-failed || true
-            elif [[ "$1" == "windows-latest" ]]; then
+            elif [[ "$1" == windows-latest* ]]; then
                 yarn test:playwright:electron:windows -- --last-failed || true
-            elif [[ "$1" == "macos-14" ]]; then
+            elif [[ "$1" == macos-14* ]]; then
                 yarn test:playwright:electron:macos -- --last-failed || true
             else
                 echo "Do not run playwright. Unable to detect os runtime."

.github/dependabot.yml

@@ -8,21 +8,21 @@ updates:
     - package-ecosystem: 'npm' # See documentation for possible values
       directory: '/' # Location of package manifests
       schedule:
-          interval: 'daily'
+          interval: 'weekly'
       reviewers:
           - franknoirot
           - irev-dev
     - package-ecosystem: 'github-actions' # See documentation for possible values
       directory: '/' # Location of package manifests
       schedule:
-          interval: 'daily'
+          interval: 'weekly'
       reviewers:
           - adamchalmers
           - jessfraz
     - package-ecosystem: 'cargo' # See documentation for possible values
       directory: '/src/wasm-lib/' # Location of package manifests
       schedule:
-          interval: 'daily'
+          interval: 'weekly'
       reviewers:
           - adamchalmers
           - jessfraz

.github/workflows/build-test-publish-apps.yml

@@ -85,7 +85,7 @@ jobs:
       - name: Prepare electron-builder.yml file for updater test
         if: ${{ env.CUT_RELEASE_PR == 'true' }}
         run: |
-          yq -i '.publish[0].url = "https://dl.zoo.dev/releases/modeling-app/updater-test-release-notes"' electron-builder.yml
+          yq -i '.publish[0].url = "https://dl.zoo.dev/releases/modeling-app/updater-test"' electron-builder.yml
 
       - uses: actions/upload-artifact@v3
         if: ${{ env.CUT_RELEASE_PR == 'true' }}
@@ -181,6 +181,7 @@ jobs:
       - name: Build the app (release)
         if: ${{ env.BUILD_RELEASE == 'true' }}
         env:
+          PUBLISH_FOR_PULL_REQUEST: true
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
@@ -360,17 +361,17 @@ jobs:
         run: "ls -R out"
 
       - name: Authenticate to Google Cloud
-        uses: 'google-github-actions/auth@v2.1.6'
+        uses: 'google-github-actions/auth@v2.1.7'
         with:
           credentials_json: '${{ secrets.GOOGLE_CLOUD_DL_SA }}'
 
       - name: Set up Google Cloud SDK
-        uses: google-github-actions/setup-gcloud@v2.1.0
+        uses: google-github-actions/setup-gcloud@v2.1.2
         with:
           project_id: ${{ env.GOOGLE_CLOUD_PROJECT_ID }}
 
       - name: Upload release files to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.2.0
+        uses: google-github-actions/upload-cloud-storage@v2.2.1
         with:
           path: out
           glob: 'Zoo*'
@@ -378,7 +379,7 @@ jobs:
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload update endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.2.0
+        uses: google-github-actions/upload-cloud-storage@v2.2.1
         with:
           path: out
           glob: 'latest*'
@@ -386,7 +387,7 @@ jobs:
           destination: ${{ env.BUCKET_DIR }}
 
       - name: Upload download endpoint to public bucket
-        uses: google-github-actions/upload-cloud-storage@v2.2.0
+        uses: google-github-actions/upload-cloud-storage@v2.2.1
         with:
           path: last_download.json
           destination: ${{ env.BUCKET_DIR }}

.github/workflows/cargo-test.yml

@@ -5,6 +5,8 @@ on:
     paths:
       - 'src/wasm-lib/**.rs'
       - 'src/wasm-lib/**.hbs'
+      - 'src/wasm-lib/**.gen'
+      - 'src/wasm-lib/**.snap'
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'
@@ -15,6 +17,8 @@ on:
     paths:
       - 'src/wasm-lib/**.rs'
       - 'src/wasm-lib/**.hbs'
+      - 'src/wasm-lib/**.gen'
+      - 'src/wasm-lib/**.snap'
       - '**/Cargo.toml'
       - '**/Cargo.lock'
       - '**/rust-toolchain.toml'

.github/workflows/e2e-tests.yml

@@ -39,7 +39,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest, windows-latest]
+        os: [ubuntu-latest-8-cores, windows-latest-8-cores]
         shardIndex: [1, 2, 3, 4]
         shardTotal: [4]
     runs-on: ${{ matrix.os }}
@@ -227,7 +227,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-14]
+        os: [ubuntu-latest-8-cores, windows-latest-8-cores, macos-14-large]
     timeout-minutes: 60
     runs-on: ${{ matrix.os }}
     needs: check-rust-changes
@@ -287,7 +287,7 @@ jobs:
         brew install gnu-sed
         echo "/opt/homebrew/opt/gnu-sed/libexec/gnubin" >> $GITHUB_PATH
     - name: Install vector
-      if:  ${{ !startsWith(matrix.os, 'windows') }}
+      if:  ${{ startsWith(matrix.os, 'ubuntu') }}
       shell: bash
       run: |
         curl --proto '=https' --tlsv1.2 -sSfL https://sh.vector.dev > /tmp/vector.sh

.github/workflows/static-analysis.yml

@@ -81,6 +81,31 @@ jobs:
       - name: Run codespell
         run: codespell --config .codespellrc # Edit this file to tweak the typo list and other configuration.
 
+  yarn-unit-test-kcl-samples:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - run: yarn install
+      - run: yarn build:wasm
+
+      - run: yarn simpleserver:bg
+        if: ${{ github.event_name != 'release' && github.event_name != 'schedule' }}
+
+      - name: Install Chromium Browser
+        if: ${{ github.event_name != 'release' && github.event_name != 'schedule' }}
+        run: yarn playwright install chromium --with-deps
+
+      - name: run unit tests for kcl samples
+        if: ${{ github.event_name != 'release' && github.event_name != 'schedule' }}
+        run: yarn test:unit:kcl-samples
+        env:
+          VITE_KC_DEV_TOKEN: ${{ secrets.KITTYCAD_API_TOKEN_DEV }}
 
   yarn-unit-test:
     runs-on: ubuntu-latest

Makefile

@@ -19,7 +19,7 @@ $(XSTATE_TYPEGENS): $(TS_SRC)
 	yarn xstate typegen 'src/**/*.ts?(x)'
 
 public/wasm_lib_bg.wasm: $(WASM_LIB_FILES)
-	yarn build:wasm-dev
+	yarn build:wasm
 
 node_modules: package.json yarn.lock
 	yarn install

README.md

@@ -110,7 +110,7 @@ Which commands from setup are one off vs need to be run every time?
 The following will need to be run when checking out a new commit and guarantees the build is not stale:
 ```bash
 yarn install
-yarn build:wasm-dev # or yarn build:wasm for slower but more production-like build
+yarn build:wasm
 yarn start # or yarn build:local && yarn serve for slower but more production-like build
 ```
 

docs/kcl/angleToMatchLengthX.md

@@ -1,10 +1,10 @@
 ---
 title: "angleToMatchLengthX"
-excerpt: "Compute the angle (in degrees) in o"
+excerpt: "Returns the angle to match the given length for x."
 layout: manual
 ---
 
-Compute the angle (in degrees) in o
+Returns the angle to match the given length for x.
 
 
 

docs/kcl/index.md

@@ -7,6 +7,7 @@ layout: manual
 ## Table of Contents
 
 * [Types](kcl/types)
+* [Modules](kcl/modules)
 * [Known Issues](kcl/KNOWN-ISSUES)
 * [`abs`](kcl/abs)
 * [`acos`](kcl/acos)
@@ -19,6 +20,7 @@ layout: manual
 * [`angledLineToX`](kcl/angledLineToX)
 * [`angledLineToY`](kcl/angledLineToY)
 * [`arc`](kcl/arc)
+* [`arcTo`](kcl/arcTo)
 * [`asin`](kcl/asin)
 * [`assert`](kcl/assert)
 * [`assertEqual`](kcl/assertEqual)
@@ -84,9 +86,13 @@ layout: manual
 * [`rem`](kcl/rem)
 * [`revolve`](kcl/revolve)
 * [`segAng`](kcl/segAng)
+* [`segEnd`](kcl/segEnd)
 * [`segEndX`](kcl/segEndX)
 * [`segEndY`](kcl/segEndY)
 * [`segLen`](kcl/segLen)
+* [`segStart`](kcl/segStart)
+* [`segStartX`](kcl/segStartX)
+* [`segStartY`](kcl/segStartY)
 * [`shell`](kcl/shell)
 * [`sin`](kcl/sin)
 * [`sqrt`](kcl/sqrt)

docs/kcl/map.md

@@ -31,7 +31,7 @@ map(array: [KclValue], map_fn: FunctionParam) -> [KclValue]
 r = 10 // radius
 fn drawCircle = (id) => {
   return startSketchOn("XY")
-  |> circle({ center: [id * 2 * r, 0], radius: r }, %)
+    |> circle({ center: [id * 2 * r, 0], radius: r }, %)
 }
 
 // Call `drawCircle`, passing in each element of the array.
@@ -47,7 +47,7 @@ r = 10 // radius
 // Call `map`, using an anonymous function instead of a named one.
 circles = map([1..3], (id) => {
   return startSketchOn("XY")
-  |> circle({ center: [id * 2 * r, 0], radius: r }, %)
+    |> circle({ center: [id * 2 * r, 0], radius: r }, %)
 })
 ```
 

docs/kcl/modules.md

@@ -0,0 +1,59 @@
+---
+title: "KCL Modules"
+excerpt: "Documentation of modules for the KCL language for the Zoo Modeling App."
+layout: manual
+---
+
+`KCL` allows splitting code up into multiple files.  Each file is somewhat
+isolated from other files as a separate module.
+
+When you define a function, you can use `export` before it to make it available
+to other modules.
+
+```
+// util.kcl
+export fn increment = (x) => {
+  return x + 1
+}
+```
+
+Other files in the project can now import functions that have been exported.
+This makes them available to use in another file.
+
+```
+// main.kcl
+import increment from "util.kcl"
+
+answer = increment(41)
+```
+
+Imported files _must_ be in the same project so that units are uniform across
+modules. This means that it must be in the same directory.
+
+Import statements must be at the top-level of a file. It is not allowed to have
+an `import` statement inside a function or in the body of an if-else.
+
+Multiple functions can be exported in a file.
+
+```
+// util.kcl
+export fn increment = (x) => {
+  return x + 1
+}
+
+export fn decrement = (x) => {
+  return x - 1
+}
+```
+
+When importing, you can import multiple functions at once.
+
+```
+import increment, decrement from "util.kcl"
+```
+
+Imported symbols can be renamed for convenience or to avoid name collisions.
+
+```
+import increment as inc, decrement as dec from "util.kcl"
+```

docs/kcl/patternTransform.md

@@ -96,24 +96,24 @@ fn cube = (length, center) => {
   p3 = [l + x, -l + y]
 
   return startSketchAt(p0)
-  |> lineTo(p1, %)
-  |> lineTo(p2, %)
-  |> lineTo(p3, %)
-  |> lineTo(p0, %)
-  |> close(%)
-  |> extrude(length, %)
+    |> lineTo(p1, %)
+    |> lineTo(p2, %)
+    |> lineTo(p3, %)
+    |> lineTo(p0, %)
+    |> close(%)
+    |> extrude(length, %)
 }
 
 width = 20
 fn transform = (i) => {
   return {
-  // Move down each time.
-  translate: [0, 0, -i * width],
-  // Make the cube longer, wider and flatter each time.
-  scale: [pow(1.1, i), pow(1.1, i), pow(0.9, i)],
-  // Turn by 15 degrees each time.
-  rotation: { angle: 15 * i, origin: "local" }
-}
+    // Move down each time.
+    translate: [0, 0, -i * width],
+    // Make the cube longer, wider and flatter each time.
+    scale: [pow(1.1, i), pow(1.1, i), pow(0.9, i)],
+    // Turn by 15 degrees each time.
+    rotation: { angle: 15 * i, origin: "local" }
+  }
 }
 
 myCubes = cube(width, [100, 0])
@@ -133,25 +133,25 @@ fn cube = (length, center) => {
   p3 = [l + x, -l + y]
 
   return startSketchAt(p0)
-  |> lineTo(p1, %)
-  |> lineTo(p2, %)
-  |> lineTo(p3, %)
-  |> lineTo(p0, %)
-  |> close(%)
-  |> extrude(length, %)
+    |> lineTo(p1, %)
+    |> lineTo(p2, %)
+    |> lineTo(p3, %)
+    |> lineTo(p0, %)
+    |> close(%)
+    |> extrude(length, %)
 }
 
 width = 20
 fn transform = (i) => {
   return {
-  translate: [0, 0, -i * width],
-  rotation: {
-    angle: 90 * i,
-    // Rotate around the overall scene's origin.
-    origin: "global"
+    translate: [0, 0, -i * width],
+    rotation: {
+      angle: 90 * i,
+      // Rotate around the overall scene's origin.
+      origin: "global"
+    }
   }
 }
-}
 myCubes = cube(width, [100, 100])
   |> patternTransform(4, transform, %)
 ```
@@ -168,16 +168,16 @@ t = 0.005 // taper factor [0-1)
 fn transform = (replicaId) => {
   scale = r * abs(1 - (t * replicaId)) * (5 + cos(replicaId / 8))
   return {
-  translate: [0, 0, replicaId * 10],
-  scale: [scale, scale, 0]
-}
+    translate: [0, 0, replicaId * 10],
+    scale: [scale, scale, 0]
+  }
 }
 // Each layer is just a pretty thin cylinder.
 fn layer = () => {
   return startSketchOn("XY")
-  // or some other plane idk
-  |> circle({ center: [0, 0], radius: 1 }, %, $tag1)
-  |> extrude(h, %)
+    // or some other plane idk
+    |> circle({ center: [0, 0], radius: 1 }, %, $tag1)
+    |> extrude(h, %)
 }
 // The vase is 100 layers tall.
 // The 100 layers are replica of each other, with a slight transformation applied to each.

docs/kcl/types/ArcToData.md

@@ -0,0 +1,22 @@
+---
+title: "ArcToData"
+excerpt: "Data to draw a three point arc (arcTo)."
+layout: manual
+---
+
+Data to draw a three point arc (arcTo).
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `end` |`[number, number]`| End point of the arc. A point in 3D space | No |
+| `interior` |`[number, number]`| Interior point of the arc. A point in 3D space | No |
+
+

docs/kcl/types/ImportFormat.md

@@ -24,7 +24,7 @@ Autodesk Filmbox (FBX) format
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `fbx`|  | No |
+| `format` |enum: `fbx`|  | No |
 
 
 ----
@@ -40,7 +40,7 @@ Binary glTF 2.0. We refer to this as glTF since that is how our customers refer
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `gltf`|  | No |
+| `format` |enum: `gltf`|  | No |
 
 
 ----
@@ -56,7 +56,7 @@ Wavefront OBJ format.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `obj`|  | No |
+| `format` |enum: `obj`|  | No |
 | `coords` |[`System`](/docs/kcl/types/System)| Co-ordinate system of input data. Defaults to the [KittyCAD co-ordinate system. | No |
 | `units` |[`UnitLength`](/docs/kcl/types/UnitLength)| The units of the input data. This is very important for correct scaling and when calculating physics properties like mass, etc. Defaults to millimeters. | No |
 
@@ -74,7 +74,7 @@ The PLY Polygon File Format.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `ply`|  | No |
+| `format` |enum: `ply`|  | No |
 | `coords` |[`System`](/docs/kcl/types/System)| Co-ordinate system of input data. Defaults to the [KittyCAD co-ordinate system. | No |
 | `units` |[`UnitLength`](/docs/kcl/types/UnitLength)| The units of the input data. This is very important for correct scaling and when calculating physics properties like mass, etc. Defaults to millimeters. | No |
 
@@ -92,7 +92,7 @@ SolidWorks part (SLDPRT) format.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `sldprt`|  | No |
+| `format` |enum: `sldprt`|  | No |
 
 
 ----
@@ -108,7 +108,7 @@ ISO 10303-21 (STEP) format.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `step`|  | No |
+| `format` |enum: `step`|  | No |
 
 
 ----
@@ -124,7 +124,7 @@ ST**ereo**L**ithography format.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `stl`|  | No |
+| `format` |enum: `stl`|  | No |
 | `coords` |[`System`](/docs/kcl/types/System)| Co-ordinate system of input data. Defaults to the [KittyCAD co-ordinate system. | No |
 | `units` |[`UnitLength`](/docs/kcl/types/UnitLength)| The units of the input data. This is very important for correct scaling and when calculating physics properties like mass, etc. Defaults to millimeters. | No |
 

docs/kcl/types/KclNone.md

@@ -0,0 +1,16 @@
+---
+title: "KclNone"
+excerpt: "KCL value for an optional parameter which was not given an argument. (remember, parameters are in the function declaration, arguments are in the function call/application)."
+layout: manual
+---
+
+KCL value for an optional parameter which was not given an argument. (remember, parameters are in the function declaration, arguments are in the function call/application).
+
+**Type:** `object`
+
+
+
+
+
+
+

docs/kcl/types/KclValue.md

@@ -23,8 +23,110 @@ Any KCL value.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `UserVal`|  | No |
-| `value` |``|  | No |
+| `type` |enum: `Uuid`|  | No |
+| `value` |`string`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Bool`|  | No |
+| `value` |`boolean`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Number`|  | No |
+| `value` |`number`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Int`|  | No |
+| `value` |`integer`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `String`|  | No |
+| `value` |`string`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Array`|  | No |
+| `value` |`[` [`KclValue`](/docs/kcl/types/KclValue) `]`|  | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Object`|  | No |
+| `value` |`object`|  | No |
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
 
 
@@ -78,7 +180,7 @@ A plane.
 
 | Property | Type | Description | Required |
 |----------|------|-------------|----------|
-| `type` |enum: `Plane`|  | No |
+| `type` |enum: [`Plane`](/docs/kcl/types/Plane)|  | No |
 | `id` |`string`| The id of the plane. | No |
 | `value` |[`PlaneType`](/docs/kcl/types/PlaneType)| Any KCL value. | No |
 | `origin` |[`Point3d`](/docs/kcl/types/Point3d)| Origin of the plane. | No |
@@ -111,6 +213,38 @@ A face.
 | `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
 
 
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: [`Sketch`](/docs/kcl/types/Sketch)|  | No |
+| `value` |[`Sketch`](/docs/kcl/types/Sketch)| Any KCL value. | No |
+
+
+----
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: `Sketches`|  | No |
+| `value` |`[` [`Sketch`](/docs/kcl/types/Sketch) `]`|  | No |
+
+
 ----
 An solid is a collection of extrude surfaces.
 
@@ -190,6 +324,23 @@ Data for an imported geometry.
 
 ----
 
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `type` |enum: [`KclNone`](/docs/kcl/types/KclNone)|  | No |
+| `value` |[`KclNone`](/docs/kcl/types/KclNone)| Any KCL value. | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+
+----
+
 
 
 

docs/kcl/types/Plane.md

@@ -0,0 +1,27 @@
+---
+title: "Plane"
+excerpt: "A plane."
+layout: manual
+---
+
+A plane.
+
+**Type:** `object`
+
+
+
+
+
+## Properties
+
+| Property | Type | Description | Required |
+|----------|------|-------------|----------|
+| `id` |`string`| The id of the plane. | No |
+| `value` |[`PlaneType`](/docs/kcl/types/PlaneType)| A plane. | No |
+| `origin` |[`Point3d`](/docs/kcl/types/Point3d)| Origin of the plane. | No |
+| `xAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the plane’s X axis be? | No |
+| `yAxis` |[`Point3d`](/docs/kcl/types/Point3d)| What should the plane’s Y axis be? | No |
+| `zAxis` |[`Point3d`](/docs/kcl/types/Point3d)| The z-axis (normal). | No |
+| `__meta` |`[` [`Metadata`](/docs/kcl/types/Metadata) `]`|  | No |
+
+

docs/kcl/types/PlaneData.md

@@ -1,10 +1,10 @@
 ---
 title: "PlaneData"
-excerpt: "Data for a plane."
+excerpt: "Orientation data that can be used to construct a plane, not a plane in itself."
 layout: manual
 ---
 
-Data for a plane.
+Orientation data that can be used to construct a plane, not a plane in itself.
 
 
 

docs/kcl/types/SketchData.md

@@ -22,6 +22,18 @@ Data for start sketch on. You can start a sketch on a plane or an solid.
 
 
 
+----
+Data for start sketch on. You can start a sketch on a plane or an solid.
+
+[`Plane`](/docs/kcl/types/Plane)
+
+
+
+
+
+
+
+
 ----
 Data for start sketch on. You can start a sketch on a plane or an solid.
 

e2e/playwright/basic-sketch.spec.ts

@@ -67,15 +67,15 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   if (openPanes.includes('code')) {
     await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
   |> startProfileAt(${commonPoints.startAt}, %)
-  |> line([${commonPoints.num1}, 0], %)`)
+  |> xLine(${commonPoints.num1}, %)`)
   }
   await page.waitForTimeout(500)
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
   if (openPanes.includes('code')) {
     await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
   |> startProfileAt(${commonPoints.startAt}, %)
-  |> line([${commonPoints.num1}, 0], %)
-  |> line([0, ${commonPoints.num1 + 0.01}], %)`)
+  |> xLine(${commonPoints.num1}, %)
+  |> yLine(${commonPoints.num1 + 0.01}, %)`)
   } else {
     await page.waitForTimeout(500)
   }
@@ -84,9 +84,9 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   if (openPanes.includes('code')) {
     await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
   |> startProfileAt(${commonPoints.startAt}, %)
-  |> line([${commonPoints.num1}, 0], %)
-  |> line([0, ${commonPoints.num1 + 0.01}], %)
-  |> lineTo([0, ${commonPoints.num3}], %)`)
+  |> xLine(${commonPoints.num1}, %)
+  |> yLine(${commonPoints.num1 + 0.01}, %)
+  |> xLine(${commonPoints.num2 * -1}, %)`)
   }
 
   // deselect line tool
@@ -142,9 +142,9 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   await u.openKclCodePanel()
   await expect(u.codeLocator).toHaveText(`sketch001 = startSketchOn('XZ')
   |> startProfileAt(${commonPoints.startAt}, %)
-  |> line([${commonPoints.num1}, 0], %, $seg01)
-  |> line([0, ${commonPoints.num1 + 0.01}], %)
-  |> angledLine([180, segLen(seg01)], %)`)
+  |> xLine(${commonPoints.num1}, %, $seg01)
+  |> yLine(${commonPoints.num1 + 0.01}, %)
+  |> xLine(-segLen(seg01), %)`)
 }
 
 test.describe('Basic sketch', () => {

e2e/playwright/desktop-export.spec.ts

@@ -62,6 +62,8 @@ test(
       const errorToastMessage = page.getByText(`Error while exporting`)
       const engineErrorToastMessage = page.getByText(`Nothing to export`)
       const alreadyExportingToastMessage = page.getByText(`Already exporting`)
+      // The open file's name is `main.kcl`, so the export file name should be `main.gltf`
+      const exportFileName = `main.gltf`
 
       // Click the export button
       await exportButton.click()
@@ -96,7 +98,7 @@ test(
           .poll(
             async () => {
               try {
-                const outputGltf = await fsp.readFile('output.gltf')
+                const outputGltf = await fsp.readFile(exportFileName)
                 return outputGltf.byteLength
               } catch (e) {
                 return 0
@@ -106,8 +108,8 @@ test(
           )
           .toBeGreaterThan(300_000)
 
-        // clean up output.gltf
-        await fsp.rm('output.gltf')
+        // clean up exported file
+        await fsp.rm(exportFileName)
       })
     })
 
@@ -138,6 +140,8 @@ test(
       const errorToastMessage = page.getByText(`Error while exporting`)
       const engineErrorToastMessage = page.getByText(`Nothing to export`)
       const alreadyExportingToastMessage = page.getByText(`Already exporting`)
+      // The open file's name is `other.kcl`, so the export file name should be `other.gltf`
+      const exportFileName = `other.gltf`
 
       // Click the export button
       await exportButton.click()
@@ -171,7 +175,7 @@ test(
           .poll(
             async () => {
               try {
-                const outputGltf = await fsp.readFile('output.gltf')
+                const outputGltf = await fsp.readFile(exportFileName)
                 return outputGltf.byteLength
               } catch (e) {
                 return 0
@@ -181,8 +185,8 @@ test(
           )
           .toBeGreaterThan(100_000)
 
-        // clean up output.gltf
-        await fsp.rm('output.gltf')
+        // clean up exported file
+        await fsp.rm(exportFileName)
       })
       await electronApp.close()
     })

e2e/playwright/editor-tests.spec.ts

@@ -632,16 +632,18 @@ test.describe('Editor tests', () => {
 
       await u.waitForAuthSkipAppStart()
 
-      // this test might be brittle as we add and remove functions
-      // but should also be easy to update.
       // tests clicking on an option, selection the first option
       // and arrowing down to an option
 
       await u.codeLocator.click()
       await page.keyboard.type('sketch001 = start')
 
-      // expect there to be six auto complete options
-      await expect(page.locator('.cm-completionLabel')).toHaveCount(8)
+      // expect there to be some auto complete options
+      // exact number depends on the KCL stdlib, so let's just check it's > 0 for now.
+      await expect(async () => {
+        const children = await page.locator('.cm-completionLabel').count()
+        expect(children).toBeGreaterThan(0)
+      }).toPass()
       // this makes sure we can accept a completion with click
       await page.getByText('startSketchOn').click()
       await page.keyboard.type("'XZ'")
@@ -692,6 +694,9 @@ test.describe('Editor tests', () => {
         .toHaveText(`sketch001 = startSketchOn('XZ')
     |> startProfileAt([3.14, 12], %)
     |> xLine(5, %) // lin`)
+
+      // expect there to be no KCL errors
+      await expect(page.locator('.cm-lint-marker-error')).toHaveCount(0)
     })
 
     test('with tab to accept the completion', async ({ page }) => {
@@ -985,7 +990,7 @@ test.describe('Editor tests', () => {
     |> extrude(5, %)`)
   })
 
-  test(
+  test.fixme(
     `Can use the import stdlib function on a local OBJ file`,
     { tag: '@electron' },
     async ({ browserName }, testInfo) => {

e2e/playwright/file-tree.spec.ts

@@ -26,10 +26,6 @@ test.describe('integrations tests', () => {
     'Creating a new file or switching file while in sketchMode should exit sketchMode',
     { tag: '@electron' },
     async ({ tronApp, homePage, scene, editor, toolbar }) => {
-      test.skip(
-        process.platform === 'win32',
-        'windows times out will waiting for the execution indicator?'
-      )
       await tronApp.initialise({
         fixtures: { homePage, scene, editor, toolbar },
         folderSetupFn: async (dir) => {
@@ -55,7 +51,6 @@ test.describe('integrations tests', () => {
           sortBy: 'last-modified-desc',
         })
         await homePage.openProject('test-sample')
-        // windows times out here, hence the skip above
         await scene.waitForExecutionDone()
       })
       await test.step('enter sketch mode', async () => {
@@ -71,10 +66,13 @@ test.describe('integrations tests', () => {
         await toolbar.editSketch()
         await expect(toolbar.exitSketchBtn).toBeVisible()
       })
+
+      const fileName = 'Untitled.kcl'
       await test.step('check sketch mode is exited when creating new file', async () => {
         await toolbar.fileTreeBtn.click()
         await toolbar.expectFileTreeState(['main.kcl'])
-        await toolbar.createFile({ wait: true })
+
+        await toolbar.createFile({ fileName, waitForToastToDisappear: true })
 
         // check we're out of sketch mode
         await expect(toolbar.exitSketchBtn).not.toBeVisible()
@@ -93,10 +91,10 @@ test.describe('integrations tests', () => {
         })
         await toolbar.editSketch()
         await expect(toolbar.exitSketchBtn).toBeVisible()
-        await toolbar.expectFileTreeState(['main.kcl', 'Untitled.kcl'])
+        await toolbar.expectFileTreeState(['main.kcl', fileName])
       })
       await test.step('check sketch mode is exited when opening a different file', async () => {
-        await toolbar.openFile('untitled.kcl', { wait: false })
+        await toolbar.openFile(fileName, { wait: false })
 
         // check we're out of sketch mode
         await expect(toolbar.exitSketchBtn).not.toBeVisible()
@@ -109,7 +107,7 @@ test.describe('when using the file tree to', () => {
   const fromFile = 'main.kcl'
   const toFile = 'hello.kcl'
 
-  test(
+  test.fixme(
     `rename ${fromFile} to ${toFile}, and doesn't crash on reload and settings load`,
     { tag: '@electron' },
     async ({ browser: _, tronApp }, testInfo) => {
@@ -157,7 +155,7 @@ test.describe('when using the file tree to', () => {
     }
   )
 
-  test(
+  test.fixme(
     `create many new untitled files they increment their names`,
     { tag: '@electron' },
     async ({ browser: _, tronApp }, testInfo) => {
@@ -298,7 +296,7 @@ test.describe('when using the file tree to', () => {
     }
   )
 
-  test(
+  test.fixme(
     'loading small file, then large, then back to small',
     {
       tag: '@electron',
@@ -1137,3 +1135,189 @@ _test.describe('Deleting items from the file pane', () => {
     }
   )
 })
+
+_test.describe(
+  'Undo and redo do not keep history when navigating between files',
+  () => {
+    _test(
+      `open a file, change something, open a different file, hitting undo should do nothing`,
+      { tag: '@electron' },
+      async ({ browserName }, testInfo) => {
+        const { page } = await setupElectron({
+          testInfo,
+          folderSetupFn: async (dir) => {
+            const testDir = join(dir, 'testProject')
+            await fsp.mkdir(testDir, { recursive: true })
+            await fsp.copyFile(
+              executorInputPath('cylinder.kcl'),
+              join(testDir, 'main.kcl')
+            )
+            await fsp.copyFile(
+              executorInputPath('basic_fillet_cube_end.kcl'),
+              join(testDir, 'other.kcl')
+            )
+          },
+        })
+        const u = await getUtils(page)
+        await page.setViewportSize({ width: 1200, height: 500 })
+        page.on('console', console.log)
+
+        // Constants and locators
+        const projectCard = page.getByText('testProject')
+        const otherFile = page
+          .getByRole('listitem')
+          .filter({ has: page.getByRole('button', { name: 'other.kcl' }) })
+
+        await _test.step(
+          'Open project and make a change to the file',
+          async () => {
+            await projectCard.click()
+            await u.waitForPageLoad()
+
+            // Get the text in the code locator.
+            const originalText = await u.codeLocator.innerText()
+            // Click in the editor and add some new lines.
+            await u.codeLocator.click()
+
+            await page.keyboard.type(`sketch001 = startSketchOn('XY')
+    some other shit`)
+
+            // Ensure the content in the editor changed.
+            const newContent = await u.codeLocator.innerText()
+
+            expect(originalText !== newContent)
+          }
+        )
+
+        await _test.step('navigate to other.kcl', async () => {
+          await u.openFilePanel()
+
+          await otherFile.click()
+          await u.waitForPageLoad()
+          await u.openKclCodePanel()
+          await _expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
+        })
+
+        await _test.step('hit undo', async () => {
+          // Get the original content of the file.
+          const originalText = await u.codeLocator.innerText()
+          // Now hit undo
+          await page.keyboard.down('ControlOrMeta')
+          await page.keyboard.press('KeyZ')
+          await page.keyboard.up('ControlOrMeta')
+
+          await page.waitForTimeout(100)
+          await expect(u.codeLocator).toContainText(originalText)
+        })
+      }
+    )
+
+    _test(
+      `open a file, change something, undo it, open a different file, hitting redo should do nothing`,
+      { tag: '@electron' },
+      // Skip on windows i think the keybindings are different for redo.
+      async ({ browserName }, testInfo) => {
+        test.skip(process.platform === 'win32', 'Skip on windows')
+        const { page } = await setupElectron({
+          testInfo,
+          folderSetupFn: async (dir) => {
+            const testDir = join(dir, 'testProject')
+            await fsp.mkdir(testDir, { recursive: true })
+            await fsp.copyFile(
+              executorInputPath('cylinder.kcl'),
+              join(testDir, 'main.kcl')
+            )
+            await fsp.copyFile(
+              executorInputPath('basic_fillet_cube_end.kcl'),
+              join(testDir, 'other.kcl')
+            )
+          },
+        })
+        const u = await getUtils(page)
+        await page.setViewportSize({ width: 1200, height: 500 })
+        page.on('console', console.log)
+
+        // Constants and locators
+        const projectCard = page.getByText('testProject')
+        const otherFile = page
+          .getByRole('listitem')
+          .filter({ has: page.getByRole('button', { name: 'other.kcl' }) })
+
+        const badContent = 'this shit'
+        await _test.step(
+          'Open project and make a change to the file',
+          async () => {
+            await projectCard.click()
+            await u.waitForPageLoad()
+
+            // Get the text in the code locator.
+            const originalText = await u.codeLocator.innerText()
+            // Click in the editor and add some new lines.
+            await u.codeLocator.click()
+
+            await page.keyboard.type(badContent)
+
+            // Ensure the content in the editor changed.
+            const newContent = await u.codeLocator.innerText()
+
+            expect(originalText !== newContent)
+
+            // Now hit undo
+            await page.keyboard.down('ControlOrMeta')
+            await page.keyboard.press('KeyZ')
+            await page.keyboard.up('ControlOrMeta')
+
+            await page.waitForTimeout(100)
+            await expect(u.codeLocator).toContainText(originalText)
+            await expect(u.codeLocator).not.toContainText(badContent)
+
+            // Hit redo.
+            await page.keyboard.down('Shift')
+            await page.keyboard.down('ControlOrMeta')
+            await page.keyboard.press('KeyZ')
+            await page.keyboard.up('ControlOrMeta')
+            await page.keyboard.up('Shift')
+
+            await page.waitForTimeout(100)
+            await expect(u.codeLocator).toContainText(originalText)
+            await expect(u.codeLocator).toContainText(badContent)
+
+            // Now hit undo
+            await page.keyboard.down('ControlOrMeta')
+            await page.keyboard.press('KeyZ')
+            await page.keyboard.up('ControlOrMeta')
+
+            await page.waitForTimeout(100)
+            await expect(u.codeLocator).toContainText(originalText)
+            await expect(u.codeLocator).not.toContainText(badContent)
+          }
+        )
+
+        await _test.step('navigate to other.kcl', async () => {
+          await u.openFilePanel()
+
+          await otherFile.click()
+          await u.waitForPageLoad()
+          await u.openKclCodePanel()
+          await _expect(u.codeLocator).toContainText('getOppositeEdge(thing)')
+          await expect(u.codeLocator).not.toContainText(badContent)
+        })
+
+        await _test.step('hit redo', async () => {
+          // Get the original content of the file.
+          const originalText = await u.codeLocator.innerText()
+          // Now hit redo
+          await page.keyboard.down('Shift')
+          await page.keyboard.down('ControlOrMeta')
+          await page.keyboard.press('KeyZ')
+          await page.keyboard.up('ControlOrMeta')
+          await page.keyboard.up('Shift')
+
+          await page.waitForTimeout(100)
+          await expect(u.codeLocator).toContainText(originalText)
+          await expect(u.codeLocator).not.toContainText(badContent)
+        })
+      }
+    )
+  }
+)

e2e/playwright/fixtures/sceneFixture.ts

@@ -195,7 +195,7 @@ export class SceneFixture {
   }
 
   waitForExecutionDone = async () => {
-    await expect(this.exeIndicator).toBeVisible()
+    await expect(this.exeIndicator).toBeVisible({ timeout: 30000 })
   }
 
   expectPixelColor = async (

e2e/playwright/fixtures/toolbarFixture.ts

@@ -16,6 +16,7 @@ export class ToolbarFixture {
   fileCreateToast!: Locator
   filePane!: Locator
   exeIndicator!: Locator
+  treeInputField!: Locator
 
   constructor(page: Page) {
     this.page = page
@@ -31,6 +32,7 @@ export class ToolbarFixture {
     this.editSketchBtn = page.getByText('Edit Sketch')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
     this.createFileBtn = page.getByTestId('create-file-button')
+    this.treeInputField = page.getByTestId('tree-input-field')
 
     this.filePane = page.locator('#files-pane')
     this.fileCreateToast = page.getByText('Successfully created')
@@ -59,10 +61,15 @@ export class ToolbarFixture {
   expectFileTreeState = async (expected: string[]) => {
     await expect.poll(this._serialiseFileTree).toEqual(expected)
   }
-  createFile = async ({ wait }: { wait: boolean } = { wait: false }) => {
+  createFile = async (args: {
+    fileName: string
+    waitForToastToDisappear: boolean
+  }) => {
     await this.createFileBtn.click()
+    await this.treeInputField.fill(args.fileName)
+    await this.treeInputField.press('Enter')
     await expect(this.fileCreateToast).toBeVisible()
-    if (wait) {
+    if (args.waitForToastToDisappear) {
       await this.fileCreateToast.waitFor({ state: 'detached' })
     }
   }

e2e/playwright/lib/console-error-whitelist.ts

@@ -18,7 +18,7 @@ export const isErrorWhitelisted = (exception: Error) => {
     {
       name: '"{"kind"',
       message:
-        '"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}"',
+        '"engine","sourceRanges":[[0,0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}"',
       stack: '',
       foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
       project: 'Google Chrome',
@@ -156,8 +156,8 @@ export const isErrorWhitelisted = (exception: Error) => {
     {
       name: 'Unhandled Promise Rejection',
       message:
-        '{"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}',
-      stack: `Unhandled Promise Rejection: {"kind":"engine","sourceRanges":[[0,0]],"msg":"Failed to get string from response from engine: \`JsValue(undefined)\`"}
+        '{"kind":"engine","sourceRanges":[[0,0,0]],"msg":"Failed to get string from response from engine: `JsValue(undefined)`"}',
+      stack: `Unhandled Promise Rejection: {"kind":"engine","sourceRanges":[[0,0,0]],"msg":"Failed to get string from response from engine: \`JsValue(undefined)\`"}
     at unknown (http://localhost:3000/src/lang/std/engineConnection.ts:1245:26)`,
       foundInSpec:
         'e2e/playwright/onboarding-tests.spec.ts Click through each onboarding step',
@@ -253,7 +253,7 @@ export const isErrorWhitelisted = (exception: Error) => {
     {
       name: '{"kind"',
       stack: ``,
-      message: `engine","sourceRanges":[[0,0]],"msg":"Failed to wait for promise from engine: JsValue(\\"Force interrupt, executionIsStale, new AST requested\\")"}`,
+      message: `engine","sourceRanges":[[0,0,0]],"msg":"Failed to wait for promise from engine: JsValue(\\"Force interrupt, executionIsStale, new AST requested\\")"}`,
       project: 'Google Chrome',
       foundInSpec: 'e2e/playwright/testing-settings.spec.ts',
     },

e2e/playwright/point-click.spec.ts

@@ -452,7 +452,7 @@ sketch002 = startSketchOn(extrude001, seg03)
   )
 })
 
-test(`Verify axis and origin snapping`, async ({
+test(`Verify axis, origin, and horizontal snapping`, async ({
   app,
   editor,
   toolbar,
@@ -505,7 +505,7 @@ test(`Verify axis and origin snapping`, async ({
   const expectedCodeSnippets = {
     sketchOnXzPlane: `sketch001 = startSketchOn('XZ')`,
     pointAtOrigin: `startProfileAt([${originSloppy.kcl[0]}, ${originSloppy.kcl[1]}], %)`,
-    segmentOnXAxis: `lineTo([${xAxisSloppy.kcl[0]}, ${xAxisSloppy.kcl[1]}], %)`,
+    segmentOnXAxis: `xLine(${xAxisSloppy.kcl[0]}, %)`,
     afterSegmentDraggedOffYAxis: `startProfileAt([${offYAxis.kcl[0]}, ${offYAxis.kcl[1]}], %)`,
     afterSegmentDraggedOnYAxis: `startProfileAt([${yAxisSloppy.kcl[0]}, ${yAxisSloppy.kcl[1]}], %)`,
   }

e2e/playwright/projects.spec.ts

@@ -247,7 +247,7 @@ test.describe('Can export from electron app', () => {
             .poll(
               async () => {
                 try {
-                  const outputGltf = await fsp.readFile('output.gltf')
+                  const outputGltf = await fsp.readFile('main.gltf')
                   return outputGltf.byteLength
                 } catch (e) {
                   return 0
@@ -257,8 +257,8 @@ test.describe('Can export from electron app', () => {
             )
             .toBeGreaterThan(300_000)
 
-          // clean up output.gltf
-          await fsp.rm('output.gltf')
+          // clean up exported file
+          await fsp.rm('main.gltf')
         })
 
         await electronApp.close()
@@ -854,7 +854,7 @@ test(
   }
 )
 
-test(
+test.fixme(
   'Deleting projects, can delete individual project, can still create projects after deleting all',
   { tag: '@electron' },
   async ({ browserName }, testInfo) => {
@@ -1490,7 +1490,6 @@ test(
           'function_sketch.kcl',
           'function_sketch_with_position.kcl',
           'global-tags.kcl',
-          'helix_ccw.kcl',
           'helix_defaults.kcl',
           'helix_defaults_negative_extrude.kcl',
           'helix_with_length.kcl',
@@ -1670,7 +1669,8 @@ test(
   }
 )
 
-test(
+// Flaky
+test.fixme(
   'Original project name persist after onboarding',
   { tag: '@electron' },
   async ({ browserName }, testInfo) => {

e2e/playwright/sketch-tests.spec.ts

@@ -115,7 +115,7 @@ test.describe('Sketch tests', () => {
         'persistCode',
         `sketch001 = startSketchOn('XZ')
   |> startProfileAt([4.61, -14.01], %)
-  |> line([12.73, -0.09], %)
+  |> xLine(12.73, %)
   |> tangentialArcTo([24.95, -5.38], %)`
       )
     })
@@ -156,7 +156,7 @@ test.describe('Sketch tests', () => {
       await expect.poll(u.normalisedEditorCode, { timeout: 1000 })
         .toBe(`sketch001 = startSketchOn('XZ')
   |> startProfileAt([12.34, -12.34], %)
-  |> line([-12.34, 12.34], %)
+  |> yLine(12.34, %)
 
 `)
     }).toPass({ timeout: 40_000, intervals: [1_000] })
@@ -645,7 +645,7 @@ test.describe('Sketch tests', () => {
     await u.openDebugPanel()
 
     const center = { x: viewportSize.width / 2, y: viewportSize.height / 2 }
-    const { toSU, click00r } = getMovementUtils({ center, page })
+    const { toSU, toU, click00r } = getMovementUtils({ center, page })
 
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
@@ -674,16 +674,15 @@ test.describe('Sketch tests', () => {
 
     await click00r(50, 0)
     await page.waitForTimeout(100)
-    codeStr += `  |> lineTo(${toSU([50, 0])}, %)`
+    codeStr += `  |> xLine(${toU(50, 0)[0]}, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(0, 50)
-    codeStr += `  |> line(${toSU([0, 50])}, %)`
+    codeStr += `  |> yLine(${toU(0, 50)[1]}, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
-    let clickCoords = await click00r(-50, 0)
-    expect(clickCoords).not.toBeUndefined()
-    codeStr += `  |> lineTo(${toSU(clickCoords!)}, %)`
+    await click00r(-50, 0)
+    codeStr += `  |> xLine(${toU(-50, 0)[0]}, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     // exit the sketch, reset relative clicker
@@ -712,15 +711,15 @@ test.describe('Sketch tests', () => {
     // TODO: I couldn't use `toSU` here because of some rounding error causing
     // it to be off by 0.01
     await click00r(30, 0)
-    codeStr += `  |> lineTo([4.07, 0], %)`
+    codeStr += `  |> xLine(2.04, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(0, 30)
-    codeStr += `  |> line([0, -2.03], %)`
+    codeStr += `  |> yLine(-2.03, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(-30, 0)
-    codeStr += `  |> line([-2.04, 0], %)`
+    codeStr += `  |> xLine(-2.04, %)`
     await expect(u.codeLocator).toHaveText(codeStr)
 
     await click00r(undefined, undefined)
@@ -744,8 +743,8 @@ test.describe('Sketch tests', () => {
 
       const code = `sketch001 = startSketchOn('-XZ')
     |> startProfileAt([${roundOff(scale * 69.6)}, ${roundOff(scale * 34.8)}], %)
-    |> line([${roundOff(scale * 139.19)}, 0], %)
-    |> line([0, -${roundOff(scale * 139.2)}], %)
+    |> xLine(${roundOff(scale * 139.19)}, %)
+    |> yLine(-${roundOff(scale * 139.2)}, %)
     |> lineTo([profileStartX(%), profileStartY(%)], %)
     |> close(%)`
 
@@ -1275,3 +1274,44 @@ test2.describe('Sketch mode should be toleratant to syntax errors', () => {
     }
   )
 })
+
+test2.describe(`Sketching with offset planes`, () => {
+  test2(
+    `Can select an offset plane to sketch on`,
+    async ({ app, scene, toolbar, editor }) => {
+      // We seed the scene with a single offset plane
+      await app.initialise(`offsetPlane001 = offsetPlane("XY", 10)`)
+
+      const [planeClick, planeHover] = scene.makeMouseHelpers(650, 200)
+
+      await test2.step(`Start sketching on the offset plane`, async () => {
+        await toolbar.startSketchPlaneSelection()
+
+        await test2.step(`Hovering should highlight code`, async () => {
+          await planeHover()
+          await editor.expectState({
+            activeLines: [`offsetPlane001=offsetPlane("XY",10)`],
+            diagnostics: [],
+            highlightedCode: 'offsetPlane("XY", 10)',
+          })
+        })
+
+        await test2.step(
+          `Clicking should select the plane and enter sketch mode`,
+          async () => {
+            await planeClick()
+            // Have to wait for engine-side animation to finish
+            await app.page.waitForTimeout(600)
+            await expect2(toolbar.lineBtn).toBeEnabled()
+            await editor.expectEditor.toContain('startSketchOn(offsetPlane001)')
+            await editor.expectState({
+              activeLines: [`offsetPlane001=offsetPlane("XY",10)`],
+              diagnostics: [],
+              highlightedCode: '',
+            })
+          }
+        )
+      })
+    }
+  )
+})

e2e/playwright/snapshot-tests.spec.ts

@@ -283,7 +283,7 @@ part001 = startSketchOn('-XZ')
         const gltfFilename = filenames.filter((t: string) =>
           t.includes('.gltf')
         )[0]
-        if (!gltfFilename) throw new Error('No output.gltf in this archive')
+        if (!gltfFilename) throw new Error('No gLTF in this archive')
         cliCommand = `export ZOO_TOKEN=${secrets.snapshottoken} && zoo file snapshot --output-format=png --src-format=${outputType} ${parentPath}/${gltfFilename} ${imagePath}`
       }
 
@@ -462,7 +462,7 @@ test(
     await page.waitForTimeout(100)
 
     code += `
-  |> line([7.25, 0], %)`
+  |> xLine(7.25, %)`
     await expect(page.locator('.cm-content')).toHaveText(code)
 
     await page
@@ -647,7 +647,7 @@ test.describe(
       await page.waitForTimeout(100)
 
       code += `
-  |> line([7.25, 0], %)`
+  |> xLine(7.25, %)`
       await expect(u.codeLocator).toHaveText(code)
 
       await page
@@ -752,7 +752,7 @@ test.describe(
       await page.waitForTimeout(100)
 
       code += `
-  |> line([184.3, 0], %)`
+  |> xLine(184.3, %)`
       await expect(u.codeLocator).toHaveText(code)
 
       await page
@@ -1031,7 +1031,7 @@ test.describe('Grid visibility', { tag: '@snapshot' }, () => {
   })
 })
 
-test('theme persists', async ({ page, context }) => {
+test.fixme('theme persists', async ({ page, context }) => {
   const u = await getUtils(page)
   await context.addInitScript(async () => {
     localStorage.setItem(

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -141,7 +141,7 @@ test.describe('Test network and connection issues', () => {
     await expect(page.locator('.cm-content'))
       .toHaveText(`sketch001 = startSketchOn('XZ')
     |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)`)
+    |> xLine(${commonPoints.num1}, %)`)
 
     // Expect the network to be up
     await expect(networkToggle).toContainText('Connected')
@@ -207,7 +207,7 @@ test.describe('Test network and connection issues', () => {
     await expect.poll(u.normalisedEditorCode)
       .toBe(`sketch001 = startSketchOn('XZ')
   |> startProfileAt([12.34, -12.34], %)
-  |> line([12.34, 0], %)
+  |> xLine(12.34, %)
   |> line([-12.34, 12.34], %)
 
 `)
@@ -217,9 +217,9 @@ test.describe('Test network and connection issues', () => {
     await expect.poll(u.normalisedEditorCode)
       .toBe(`sketch001 = startSketchOn('XZ')
   |> startProfileAt([12.34, -12.34], %)
-  |> line([12.34, 0], %)
+  |> xLine(12.34, %)
   |> line([-12.34, 12.34], %)
-  |> lineTo([0, -12.34], %)
+  |> xLine(-12.34, %)
 
 `)
 

e2e/playwright/test-utils.ts

@@ -305,7 +305,7 @@ export const getMovementUtils = (opts: any) => {
     return [last.x, last.y]
   }
 
-  return { toSU, click00r }
+  return { toSU, toU, click00r }
 }
 
 async function waitForAuthAndLsp(page: Page) {

e2e/playwright/testing-selections.spec.ts

@@ -32,10 +32,17 @@ test.describe('Testing selections', () => {
       await u.waitForAuthSkipAppStart()
       await u.openDebugPanel()
 
-      const xAxisClick = () =>
-        page.mouse.click(700, 253).then(() => page.waitForTimeout(100))
+      const yAxisClick = () =>
+        test.step('Click on Y axis', async () => {
+          await page.mouse.move(600, 200, { steps: 5 })
+          await page.mouse.click(600, 200)
+          await page.waitForTimeout(100)
+        })
       const xAxisClickAfterExitingSketch = () =>
-        page.mouse.click(639, 278).then(() => page.waitForTimeout(100))
+        test.step(`Click on X axis after exiting sketch, which shifts it at the moment`, async () => {
+          await page.mouse.click(639, 278)
+          await page.waitForTimeout(100)
+        })
       const emptySpaceHover = () =>
         test.step('Hover over empty space', async () => {
           await page.mouse.move(700, 143, { steps: 5 })
@@ -80,23 +87,23 @@ test.describe('Testing selections', () => {
       await expect(page.locator('.cm-content'))
         .toHaveText(`sketch001 = startSketchOn('XZ')
     |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)`)
+    |> xLine(${commonPoints.num1}, %)`)
 
       await page.waitForTimeout(100)
       await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
       await expect(page.locator('.cm-content'))
         .toHaveText(`sketch001 = startSketchOn('XZ')
     |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)
-    |> line([0, ${commonPoints.num1 + 0.01}], %)`)
+    |> xLine(${commonPoints.num1}, %)
+    |> yLine(${commonPoints.num1 + 0.01}, %)`)
       await page.waitForTimeout(100)
       await page.mouse.click(startXPx, 500 - PUR * 20)
       await expect(page.locator('.cm-content'))
         .toHaveText(`sketch001 = startSketchOn('XZ')
     |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)
-    |> line([0, ${commonPoints.num1 + 0.01}], %)
-    |> lineTo([0, ${commonPoints.num3}], %)`)
+    |> xLine(${commonPoints.num1}, %)
+    |> yLine(${commonPoints.num1 + 0.01}, %)
+    |> xLine(${commonPoints.num2 * -1}, %)`)
 
       // deselect line tool
       await page.getByRole('button', { name: 'line Line', exact: true }).click()
@@ -121,53 +128,58 @@ test.describe('Testing selections', () => {
         // now check clicking works including axis
 
         // click a segment hold shift and click an axis, see that a relevant constraint is enabled
-        await topHorzSegmentClick()
-        await page.keyboard.down('Shift')
         const constrainButton = page.getByRole('button', {
           name: 'Length: open menu',
         })
-        const absYButton = page.getByRole('button', { name: 'Absolute Y' })
-        await constrainButton.click()
-        await expect(absYButton).toBeDisabled()
-        await page.waitForTimeout(100)
-        await xAxisClick()
-        await page.keyboard.up('Shift')
-        await constrainButton.click()
-        await absYButton.and(page.locator(':not([disabled])')).waitFor()
-        await expect(absYButton).not.toBeDisabled()
+        const absXButton = page.getByRole('button', { name: 'Absolute X' })
+
+        await test.step(`Select a segment and an axis, see that a relevant constraint is enabled`, async () => {
+          await topHorzSegmentClick()
+          await page.keyboard.down('Shift')
+          await constrainButton.click()
+          await expect(absXButton).toBeDisabled()
+          await page.waitForTimeout(100)
+          await yAxisClick()
+          await page.keyboard.up('Shift')
+          await constrainButton.click()
+          await absXButton.and(page.locator(':not([disabled])')).waitFor()
+          await expect(absXButton).not.toBeDisabled()
+        })
 
-        // clear selection by clicking on nothing
         await emptySpaceClick()
-
-        await page.waitForTimeout(100)
-        // same selection but click the axis first
-        await xAxisClick()
-        await constrainButton.click()
-        await expect(absYButton).toBeDisabled()
-        await page.keyboard.down('Shift')
-        await page.waitForTimeout(100)
-        await topHorzSegmentClick()
         await page.waitForTimeout(100)
 
-        await page.keyboard.up('Shift')
-        await constrainButton.click()
-        await expect(absYButton).not.toBeDisabled()
+        await test.step(`Same selection but click the axis first`, async () => {
+          await yAxisClick()
+          await constrainButton.click()
+          await expect(absXButton).toBeDisabled()
+          await page.keyboard.down('Shift')
+          await page.waitForTimeout(100)
+          await topHorzSegmentClick()
+          await page.waitForTimeout(100)
+
+          await page.keyboard.up('Shift')
+          await constrainButton.click()
+          await expect(absXButton).not.toBeDisabled()
+        })
 
         // clear selection by clicking on nothing
         await emptySpaceClick()
 
         // check the same selection again by putting cursor in code first then selecting axis
-        await page
-          .getByText(`  |> lineTo([0, ${commonPoints.num3}], %)`)
-          .click()
-        await page.keyboard.down('Shift')
-        await constrainButton.click()
-        await expect(absYButton).toBeDisabled()
-        await page.waitForTimeout(100)
-        await xAxisClick()
-        await page.keyboard.up('Shift')
-        await constrainButton.click()
-        await expect(absYButton).not.toBeDisabled()
+        await test.step(`Same selection but code selection then axis`, async () => {
+          await page
+            .getByText(`  |> xLine(${commonPoints.num2 * -1}, %)`)
+            .click()
+          await page.keyboard.down('Shift')
+          await constrainButton.click()
+          await expect(absXButton).toBeDisabled()
+          await page.waitForTimeout(100)
+          await yAxisClick()
+          await page.keyboard.up('Shift')
+          await constrainButton.click()
+          await expect(absXButton).not.toBeDisabled()
+        })
 
         // clear selection by clicking on nothing
         await emptySpaceClick()
@@ -182,9 +194,7 @@ test.describe('Testing selections', () => {
           process.platform === 'linux' ? 'Control' : 'Meta'
         )
         await page.waitForTimeout(100)
-        await page
-          .getByText(`  |> lineTo([0, ${commonPoints.num3}], %)`)
-          .click()
+        await page.getByText(`  |> xLine(${commonPoints.num2 * -1}, %)`).click()
 
         await expect(page.locator('.cm-cursor')).toHaveCount(2)
         await page.waitForTimeout(500)
@@ -928,6 +938,7 @@ sketch002 = startSketchOn(extrude001, $seg01)
     // test fillet button with the body in the scene
     const codeToAdd = `${await u.codeLocator.allInnerTexts()}
 extrude001 = extrude(10, sketch001)`
+    await u.codeLocator.clear()
     await u.codeLocator.fill(codeToAdd)
     await selectSegment()
     await expect(page.getByRole('button', { name: 'Fillet' })).toBeEnabled()

e2e/playwright/testing-settings.spec.ts

@@ -258,7 +258,7 @@ test.describe('Testing settings', () => {
     })
   })
 
-  test(
+  test.fixme(
     `Project settings override user settings on desktop`,
     { tag: ['@electron', '@skipWin'] },
     async ({ browser: _ }, testInfo) => {
@@ -344,14 +344,13 @@ test.describe('Testing settings', () => {
       await test.step('Refresh the application and see project setting applied', async () => {
         // Make sure we're done navigating before we reload
         await expect(settingsCloseButton).not.toBeVisible()
-        await page.reload({ waitUntil: 'domcontentloaded' })
 
+        await page.reload({ waitUntil: 'domcontentloaded' })
         await expect(logoLink).toHaveCSS('--primary-hue', projectThemeColor)
       })
 
       await test.step(`Navigate back to the home view and see user setting applied`, async () => {
         await logoLink.click()
-        await page.screenshot({ path: 'out.png' })
         await expect(logoLink).toHaveCSS('--primary-hue', userThemeColor)
       })
 
@@ -415,7 +414,7 @@ test.describe('Testing settings', () => {
   )
 
   // It was much easier to test the logo color than the background stream color.
-  test(
+  test.fixme(
     'user settings reload on external change, on project and modeling view',
     { tag: '@electron' },
     async ({ browserName }, testInfo) => {

e2e/playwright/various.spec.ts

@@ -256,181 +256,186 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
   ).not.toBeVisible()
 })
 
-test('Basic default modeling and sketch hotkeys work', async ({ page }) => {
-  const u = await getUtils(page)
+test.fixme(
+  'Basic default modeling and sketch hotkeys work',
+  async ({ page }) => {
+    const u = await getUtils(page)
 
-  // This test can run long if it takes a little too long to load
-  // the engine.
-  test.setTimeout(90000)
-  // This test has a weird bug on ubuntu
-  test.skip(
-    process.platform === 'linux',
-    'weird playwright bug on ubuntu https://github.com/KittyCAD/modeling-app/issues/2444'
-  )
-  // Load the app with the code pane open
+    // This test can run long if it takes a little too long to load
+    // the engine.
+    test.setTimeout(90000)
+    // This test has a weird bug on ubuntu
+    // Funny, it's flaking on Windows too :). I think there is just something
+    // actually wrong.
+    test.skip(
+      process.platform === 'linux',
+      'weird playwright bug on ubuntu https://github.com/KittyCAD/modeling-app/issues/2444'
+    )
+    // Load the app with the code pane open
 
-  await test.step(`Set up test`, async () => {
-    await page.addInitScript(async () => {
-      localStorage.setItem(
-        'store',
-        JSON.stringify({
-          state: {
-            openPanes: ['code'],
-          },
-          version: 0,
+    await test.step(`Set up test`, async () => {
+      await page.addInitScript(async () => {
+        localStorage.setItem(
+          'store',
+          JSON.stringify({
+            state: {
+              openPanes: ['code'],
+            },
+            version: 0,
+          })
+        )
+      })
+      await page.setViewportSize({ width: 1200, height: 500 })
+      await u.waitForAuthSkipAppStart()
+      await u.openDebugPanel()
+      await u.expectCmdLog('[data-message-type="execution-done"]')
+      await u.closeDebugPanel()
+    })
+
+    const codePane = page.locator('.cm-content')
+    const lineButton = page.getByRole('button', {
+      name: 'line Line',
+      exact: true,
+    })
+    const arcButton = page.getByRole('button', {
+      name: 'arc Tangential Arc',
+      exact: true,
+    })
+    const extrudeButton = page.getByRole('button', { name: 'Extrude' })
+    const commandBarComboBox = page.getByPlaceholder('Search commands')
+    const exitSketchButton = page.getByRole('button', { name: 'Exit Sketch' })
+
+    await test.step(`Type code with modeling hotkeys, shouldn't fire`, async () => {
+      await codePane.click()
+      await page.keyboard.type('//')
+      await page.keyboard.press('s')
+      await expect(commandBarComboBox).not.toBeVisible()
+      await page.keyboard.press('e')
+      await expect(commandBarComboBox).not.toBeVisible()
+      await expect(codePane).toHaveText('//se')
+    })
+
+    // Blur focus from the code editor, use the s command to sketch
+    await test.step(`Blur editor focus, enter sketch`, async () => {
+      /**
+       * TODO: There is a bug somewhere that causes this test to fail
+       * if you toggle the codePane closed before your trigger the
+       * start of the sketch.
+       * and a separate Safari-only bug that causes the test to fail
+       * if the pane is open the entire test. The maintainer of CodeMirror
+       * has pinpointed this to the unusual browser behavior:
+       * https://discuss.codemirror.net/t/how-to-force-unfocus-of-the-codemirror-element-in-safari/8095/3
+       */
+      await blurCodeEditor()
+      await page.waitForTimeout(1000)
+      await page.keyboard.press('s')
+      await page.waitForTimeout(1000)
+      await page.mouse.move(800, 300, { steps: 5 })
+      await page.mouse.click(800, 300)
+      await page.waitForTimeout(1000)
+      await expect(lineButton).toHaveAttribute('aria-pressed', 'true', {
+        timeout: 15_000,
+      })
+    })
+
+    // Use some sketch hotkeys to create a sketch (l and a for now)
+    await test.step(`Incomplete sketch with hotkeys`, async () => {
+      await test.step(`Draw a line`, async () => {
+        await page.mouse.move(700, 200, { steps: 5 })
+        await page.mouse.click(700, 200)
+        await page.mouse.move(800, 250, { steps: 5 })
+        await page.mouse.click(800, 250)
+      })
+
+      await test.step(`Unequip line tool`, async () => {
+        await page.keyboard.press('l')
+        await expect(lineButton).not.toHaveAttribute('aria-pressed', 'true')
+      })
+
+      await test.step(`Draw a tangential arc`, async () => {
+        await page.keyboard.press('a')
+        await expect(arcButton).toHaveAttribute('aria-pressed', 'true', {
+          timeout: 10_000,
         })
-      )
+        await page.mouse.move(1000, 100, { steps: 5 })
+        await page.mouse.click(1000, 100)
+      })
+
+      await test.step(`Unequip with escape, equip line tool`, async () => {
+        await page.keyboard.press('Escape')
+        await page.keyboard.press('l')
+        await page.waitForTimeout(50)
+        await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
+      })
     })
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await u.waitForAuthSkipAppStart()
-    await u.openDebugPanel()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
-    await u.closeDebugPanel()
-  })
 
-  const codePane = page.locator('.cm-content')
-  const lineButton = page.getByRole('button', {
-    name: 'line Line',
-    exact: true,
-  })
-  const arcButton = page.getByRole('button', {
-    name: 'arc Tangential Arc',
-    exact: true,
-  })
-  const extrudeButton = page.getByRole('button', { name: 'Extrude' })
-  const commandBarComboBox = page.getByPlaceholder('Search commands')
-  const exitSketchButton = page.getByRole('button', { name: 'Exit Sketch' })
+    await test.step(`Type code with sketch hotkeys, shouldn't fire`, async () => {
+      // Since there's code now, we have to get to the end of the line
+      await page.locator('.cm-line').last().click()
+      await page.keyboard.down('ControlOrMeta')
+      await page.keyboard.press('ArrowRight')
+      await page.keyboard.up('ControlOrMeta')
 
-  await test.step(`Type code with modeling hotkeys, shouldn't fire`, async () => {
-    await codePane.click()
-    await page.keyboard.type('//')
-    await page.keyboard.press('s')
-    await expect(commandBarComboBox).not.toBeVisible()
-    await page.keyboard.press('e')
-    await expect(commandBarComboBox).not.toBeVisible()
-    await expect(codePane).toHaveText('//se')
-  })
-
-  // Blur focus from the code editor, use the s command to sketch
-  await test.step(`Blur editor focus, enter sketch`, async () => {
-    /**
-     * TODO: There is a bug somewhere that causes this test to fail
-     * if you toggle the codePane closed before your trigger the
-     * start of the sketch.
-     * and a separate Safari-only bug that causes the test to fail
-     * if the pane is open the entire test. The maintainer of CodeMirror
-     * has pinpointed this to the unusual browser behavior:
-     * https://discuss.codemirror.net/t/how-to-force-unfocus-of-the-codemirror-element-in-safari/8095/3
-     */
-    await blurCodeEditor()
-    await page.waitForTimeout(1000)
-    await page.keyboard.press('s')
-    await page.waitForTimeout(1000)
-    await page.mouse.move(800, 300, { steps: 5 })
-    await page.mouse.click(800, 300)
-    await page.waitForTimeout(1000)
-    await expect(lineButton).toHaveAttribute('aria-pressed', 'true', {
-      timeout: 15_000,
+      await page.keyboard.press('Enter')
+      await page.keyboard.type('//')
+      await page.keyboard.press('l')
+      await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
+      await page.keyboard.press('a')
+      await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
+      await expect(codePane).toContainText('//la')
+      await page.keyboard.press('Backspace')
+      await page.keyboard.press('Backspace')
+      await page.keyboard.press('Backspace')
+      await page.keyboard.press('Backspace')
     })
-  })
 
-  // Use some sketch hotkeys to create a sketch (l and a for now)
-  await test.step(`Incomplete sketch with hotkeys`, async () => {
-    await test.step(`Draw a line`, async () => {
+    await test.step(`Close profile and exit sketch`, async () => {
+      await blurCodeEditor()
       await page.mouse.move(700, 200, { steps: 5 })
       await page.mouse.click(700, 200)
-      await page.mouse.move(800, 250, { steps: 5 })
-      await page.mouse.click(800, 250)
-    })
-
-    await test.step(`Unequip line tool`, async () => {
-      await page.keyboard.press('l')
-      await expect(lineButton).not.toHaveAttribute('aria-pressed', 'true')
-    })
-
-    await test.step(`Draw a tangential arc`, async () => {
-      await page.keyboard.press('a')
-      await expect(arcButton).toHaveAttribute('aria-pressed', 'true', {
-        timeout: 10_000,
-      })
-      await page.mouse.move(1000, 100, { steps: 5 })
-      await page.mouse.click(1000, 100)
-    })
-
-    await test.step(`Unequip with escape, equip line tool`, async () => {
+      // On  close it will unequip the line tool.
+      await expect(lineButton).toHaveAttribute('aria-pressed', 'false')
+      await expect(exitSketchButton).toBeEnabled()
       await page.keyboard.press('Escape')
-      await page.keyboard.press('l')
-      await page.waitForTimeout(50)
-      await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
+      await expect(
+        page.getByRole('button', { name: 'Exit Sketch' })
+      ).not.toBeVisible()
     })
-  })
 
-  await test.step(`Type code with sketch hotkeys, shouldn't fire`, async () => {
-    // Since there's code now, we have to get to the end of the line
-    await page.locator('.cm-line').last().click()
-    await page.keyboard.down('ControlOrMeta')
-    await page.keyboard.press('ArrowRight')
-    await page.keyboard.up('ControlOrMeta')
-
-    await page.keyboard.press('Enter')
-    await page.keyboard.type('//')
-    await page.keyboard.press('l')
-    await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
-    await page.keyboard.press('a')
-    await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
-    await expect(codePane).toContainText('//la')
-    await page.keyboard.press('Backspace')
-    await page.keyboard.press('Backspace')
-    await page.keyboard.press('Backspace')
-    await page.keyboard.press('Backspace')
-  })
-
-  await test.step(`Close profile and exit sketch`, async () => {
-    await blurCodeEditor()
-    await page.mouse.move(700, 200, { steps: 5 })
-    await page.mouse.click(700, 200)
-    // On  close it will unequip the line tool.
-    await expect(lineButton).toHaveAttribute('aria-pressed', 'false')
-    await expect(exitSketchButton).toBeEnabled()
-    await page.keyboard.press('Escape')
-    await expect(
-      page.getByRole('button', { name: 'Exit Sketch' })
-    ).not.toBeVisible()
-  })
-
-  // Extrude with e
-  await test.step(`Extrude the sketch`, async () => {
-    await page.mouse.click(750, 150)
-    await blurCodeEditor()
-    await expect(extrudeButton).toBeEnabled()
-    await page.keyboard.press('e')
-    await page.waitForTimeout(500)
-    await page.mouse.move(800, 200, { steps: 5 })
-    await page.mouse.click(800, 200)
-    await expect(page.getByRole('button', { name: 'Continue' })).toBeVisible({
-      timeout: 20_000,
+    // Extrude with e
+    await test.step(`Extrude the sketch`, async () => {
+      await page.mouse.click(750, 150)
+      await blurCodeEditor()
+      await expect(extrudeButton).toBeEnabled()
+      await page.keyboard.press('e')
+      await page.waitForTimeout(500)
+      await page.mouse.move(800, 200, { steps: 5 })
+      await page.mouse.click(800, 200)
+      await expect(page.getByRole('button', { name: 'Continue' })).toBeVisible({
+        timeout: 20_000,
+      })
+      await page.getByRole('button', { name: 'Continue' }).click()
+      await expect(
+        page.getByRole('button', { name: 'Submit command' })
+      ).toBeVisible()
+      await page.getByRole('button', { name: 'Submit command' }).click()
+      await expect(page.locator('.cm-content')).toContainText('extrude(')
     })
-    await page.getByRole('button', { name: 'Continue' }).click()
-    await expect(
-      page.getByRole('button', { name: 'Submit command' })
-    ).toBeVisible()
-    await page.getByRole('button', { name: 'Submit command' }).click()
-    await expect(page.locator('.cm-content')).toContainText('extrude(')
-  })
 
-  // await codePaneButton.click()
-  // await expect(u.codeLocator).not.toBeVisible()
+    // await codePaneButton.click()
+    // await expect(u.codeLocator).not.toBeVisible()
 
-  /**
-   * work-around: to stop `keyboard.press()` from typing in the editor even when it should be blurred
-   */
-  async function blurCodeEditor() {
-    await page.getByRole('button', { name: 'Commands' }).click()
-    await page.waitForTimeout(100)
-    await page.keyboard.press('Escape')
-    await page.waitForTimeout(100)
+    /**
+     * work-around: to stop `keyboard.press()` from typing in the editor even when it should be blurred
+     */
+    async function blurCodeEditor() {
+      await page.getByRole('button', { name: 'Commands' }).click()
+      await page.waitForTimeout(100)
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(100)
+    }
   }
-})
+)
 
 test('Delete key does not navigate back', async ({ page }) => {
   await page.setViewportSize({ width: 1200, height: 500 })

interface.d.ts

@@ -78,6 +78,7 @@ export interface IElectronAPI {
   ) => Electron.IpcRenderer
   onUpdateError: (callback: (value: { error: Error }) => void) => Electron
   appRestart: () => void
+  getArgvParsed: () => any
 }
 
 declare global {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zoo-modeling-app",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "private": true,
   "productName": "Zoo Modeling App",
   "author": {
@@ -14,7 +14,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/lint": "^6.8.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
@@ -40,7 +40,7 @@
     "codemirror": "^6.0.1",
     "decamelize": "^6.0.0",
     "electron-squirrel-startup": "^1.0.1",
-    "electron-updater": "^6.3.0",
+    "electron-updater": "6.3.0",
     "fuse.js": "^7.0.0",
     "html2canvas-pro": "^1.5.8",
     "isomorphic-fetch": "^3.0.0",
@@ -60,12 +60,13 @@
     "sketch-helpers": "^0.0.4",
     "three": "^0.166.1",
     "ua-parser-js": "^1.0.37",
-    "uuid": "^9.0.1",
+    "uuid": "^11.0.2",
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "vscode-uri": "^3.0.8",
     "web-vitals": "^3.5.2",
-    "xstate": "^5.17.4"
+    "xstate": "^5.17.4",
+    "yargs": "^17.7.2"
   },
   "scripts": {
     "start": "vite",
@@ -105,7 +106,8 @@
     "tronb:package": "electron-builder --config electron-builder.yml",
     "test-setup": "yarn install && yarn build:wasm",
     "test": "vitest --mode development",
-    "test:unit": "vitest run --mode development",
+    "test:unit": "vitest run --mode development --exclude **/kclSamples.test.ts",
+    "test:unit:kcl-samples": "vitest run --mode development ./src/lang/kclSamples.test.ts",
     "test:playwright:browser:chrome": "playwright test --project='Google Chrome' --config=playwright.ci.config.ts --grep-invert='@snapshot|@electron'",
     "test:playwright:browser:chrome:windows": "playwright test --project=\"Google Chrome\" --config=playwright.ci.config.ts --grep-invert=\"@snapshot|@electron|@skipWin\"",
     "test:playwright:browser:chrome:ubuntu": "playwright test --project='Google Chrome' --config=playwright.ci.config.ts --grep-invert='@snapshot|@electron|@skipLinux'",
@@ -117,7 +119,8 @@
     "test:playwright:electron:windows:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep=@electron --grep-invert=@skipWin",
     "test:playwright:electron:macos:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep=@electron --grep-invert=@skipMacos",
     "test:playwright:electron:ubuntu:local": "yarn tron:package && NODE_ENV=development playwright test --config=playwright.electron.config.ts --grep=@electron --grep-invert=@skipLinux",
-    "test:unit:local": "yarn simpleserver:bg && yarn test:unit; kill-port 3000"
+    "test:unit:local": "yarn simpleserver:bg && yarn test:unit; kill-port 3000",
+    "test:unit:kcl-samples:local": "yarn simpleserver:bg && yarn test:unit:kcl-samples; kill-port 3000"
   },
   "prettier": {
     "trailingComma": "es5",
@@ -144,8 +147,8 @@
     "@electron-forge/maker-deb": "^7.4.0",
     "@electron-forge/maker-rpm": "^7.4.0",
     "@electron-forge/maker-squirrel": "^7.4.0",
-    "@electron-forge/maker-wix": "^7.4.0",
-    "@electron-forge/maker-zip": "^7.4.0",
+    "@electron-forge/maker-wix": "^7.5.0",
+    "@electron-forge/maker-zip": "^7.5.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
     "@electron-forge/plugin-fuses": "^7.4.0",
     "@electron-forge/plugin-vite": "^7.4.0",
@@ -171,7 +174,7 @@
     "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.8",
     "@types/wicg-file-system-access": "^2023.10.5",
-    "@types/ws": "^8.5.10",
+    "@types/ws": "^8.5.13",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "@vitejs/plugin-react": "^4.3.0",
@@ -187,7 +190,7 @@
     "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-suggest-no-throw": "^1.0.0",
-    "happy-dom": "^14.3.10",
+    "happy-dom": "^15.10.2",
     "http-server": "^14.1.1",
     "husky": "^9.1.5",
     "kill-port": "^2.0.1",

src/App.tsx

@@ -22,6 +22,10 @@ import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
 import { CameraProjectionToggle } from 'components/CameraProjectionToggle'
+import { maybeWriteToDisk } from 'lib/telemetry'
+maybeWriteToDisk()
+  .then(() => {})
+  .catch(() => {})
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData

src/Router.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-router-dom'
 import { ErrorPage } from './components/ErrorPage'
 import { Settings } from './routes/Settings'
+import { Telemetry } from './routes/Telemetry'
 import Onboarding, { onboardingRoutes } from './routes/Onboarding'
 import SignIn from './routes/SignIn'
 import { Auth } from './Auth'
@@ -28,6 +29,7 @@ import {
   homeLoader,
   onboardingRedirectLoader,
   settingsLoader,
+  telemetryLoader,
 } from 'lib/routeLoaders'
 import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
@@ -43,6 +45,7 @@ import { coreDump } from 'lang/wasm'
 import { useMemo } from 'react'
 import { AppStateProvider } from 'AppState'
 import { reportRejection } from 'lib/trap'
+import { RouteProvider } from 'components/RouteProvider'
 import { ProjectsContextProvider } from 'components/ProjectsContextProvider'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
@@ -56,19 +59,21 @@ const router = createRouter([
      * inefficient re-renders, use the react profiler to see. */
     element: (
       <CommandBarProvider>
-        <SettingsAuthProvider>
-          <LspProvider>
-            <ProjectsContextProvider>
-              <KclContextProvider>
-                <AppStateProvider>
-                  <MachineManagerProvider>
-                    <Outlet />
-                  </MachineManagerProvider>
-                </AppStateProvider>
-              </KclContextProvider>
-            </ProjectsContextProvider>
-          </LspProvider>
-        </SettingsAuthProvider>
+        <RouteProvider>
+          <SettingsAuthProvider>
+            <LspProvider>
+              <ProjectsContextProvider>
+                <KclContextProvider>
+                  <AppStateProvider>
+                    <MachineManagerProvider>
+                      <Outlet />
+                    </MachineManagerProvider>
+                  </AppStateProvider>
+                </KclContextProvider>
+              </ProjectsContextProvider>
+            </LspProvider>
+          </SettingsAuthProvider>
+        </RouteProvider>
       </CommandBarProvider>
     ),
     errorElement: <ErrorPage />,
@@ -124,6 +129,16 @@ const router = createRouter([
               },
             ],
           },
+          {
+            id: PATHS.FILE + 'TELEMETRY',
+            loader: telemetryLoader,
+            children: [
+              {
+                path: makeUrlPathRelative(PATHS.TELEMETRY),
+                element: <Telemetry />,
+              },
+            ],
+          },
         ],
       },
       {
@@ -149,6 +164,11 @@ const router = createRouter([
             loader: settingsLoader,
             element: <Settings />,
           },
+          {
+            path: makeUrlPathRelative(PATHS.TELEMETRY),
+            loader: telemetryLoader,
+            element: <Telemetry />,
+          },
         ],
       },
       {

src/Toolbar.tsx

@@ -141,6 +141,7 @@ export function Toolbar({
       >
         {/* A menu item will either be a vertical line break, a button with a dropdown, or a single button */}
         {currentModeItems.map((maybeIconConfig, i) => {
+          // Vertical Line Break
           if (maybeIconConfig === 'break') {
             return (
               <div
@@ -149,6 +150,7 @@ export function Toolbar({
               />
             )
           } else if (Array.isArray(maybeIconConfig)) {
+            // A button with a dropdown
             return (
               <ActionButtonDropdown
                 Element="button"
@@ -215,6 +217,7 @@ export function Toolbar({
           }
           const itemConfig = maybeIconConfig
 
+          // A single button
           return (
             <div className="relative" key={itemConfig.id}>
               <ActionButton

src/clientSideScene/ClientSideSceneComp.tsx

@@ -202,12 +202,20 @@ const Overlay = ({
   let xAlignment = overlay.angle < 0 ? '0%' : '-100%'
   let yAlignment = overlay.angle < -90 || overlay.angle >= 90 ? '0%' : '-100%'
 
+  // It's possible for the pathToNode to request a newer AST node
+  // than what's available in the AST at the moment of query.
+  // It eventually settles on being updated.
   const _node1 = getNodeFromPath<Node<CallExpression>>(
     kclManager.ast,
     overlay.pathToNode,
     'CallExpression'
   )
-  if (err(_node1)) return
+
+  // For that reason, to prevent console noise, we do not use err here.
+  if (_node1 instanceof Error) {
+    console.warn('ast older than pathToNode, not fatal, eventually settles', '')
+    return
+  }
   const callExpression = _node1.node
 
   const constraints = getConstraintInfo(
@@ -637,10 +645,16 @@ const ConstraintSymbol = ({
                 kclManager.ast,
                 kclManager.programMemory
               )
+
               if (!transform) return
               const { modifiedAst } = transform
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              kclManager.updateAst(modifiedAst, true)
+
+              await kclManager.updateAst(modifiedAst, true)
+
+              // Code editor will be updated in the modelingMachine.
+              const newCode = recast(modifiedAst)
+              if (err(newCode)) return
+              await codeManager.updateCodeEditor(newCode)
             } catch (e) {
               console.log('error', e)
             }

src/clientSideScene/sceneEntities.ts

@@ -17,6 +17,7 @@ import {
   Vector3,
 } from 'three'
 import {
+  ANGLE_SNAP_THRESHOLD_DEGREES,
   ARROWHEAD,
   AXIS_GROUP,
   DRAFT_POINT,
@@ -46,6 +47,7 @@ import {
   VariableDeclaration,
   VariableDeclarator,
   sketchFromKclValue,
+  sketchFromKclValueOptional,
 } from 'lang/wasm'
 import {
   engineCommandManager,
@@ -88,13 +90,15 @@ import { EngineCommandManager } from 'lang/std/engineConnection'
 import {
   getRectangleCallExpressions,
   updateRectangleSketch,
+  updateCenterRectangleSketch,
 } from 'lib/rectangleTool'
 import { getThemeColorForThreeJs, Themes } from 'lib/theme'
-import { err, reportRejection, trap } from 'lib/trap'
+import { err, Reason, reportRejection, trap } from 'lib/trap'
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
 import { Point3d } from 'wasm-lib/kcl/bindings/Point3d'
 import { SegmentInputs } from 'lang/std/stdTypes'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
+import { radToDeg } from 'three/src/math/MathUtils'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -451,6 +455,7 @@ export class SceneEntities {
         const { modifiedAst } = addStartProfileAtRes
 
         await kclManager.updateAst(modifiedAst, false)
+
         this.removeIntersectionPlane()
         this.scene.remove(draftPointGroup)
 
@@ -683,7 +688,7 @@ export class SceneEntities {
     })
     return nextAst
   }
-  setUpDraftSegment = async (
+  setupDraftSegment = async (
     sketchPathToNode: PathToNode,
     forward: [number, number, number],
     up: [number, number, number],
@@ -798,11 +803,24 @@ export class SceneEntities {
             (sceneObject) => sceneObject.object.name === X_AXIS
           )
 
-          const lastSegment = sketch.paths.slice(-1)[0]
+          const lastSegment = sketch.paths.slice(-1)[0] || sketch.start
           const snappedPoint = {
             x: intersectsYAxis ? 0 : intersection2d.x,
             y: intersectsXAxis ? 0 : intersection2d.y,
           }
+          // Get the angle between the previous segment (or sketch start)'s end and this one's
+          const angle = Math.atan2(
+            snappedPoint.y - lastSegment.to[1],
+            snappedPoint.x - lastSegment.to[0]
+          )
+
+          const isHorizontal =
+            radToDeg(Math.abs(angle)) < ANGLE_SNAP_THRESHOLD_DEGREES ||
+            Math.abs(radToDeg(Math.abs(angle) - Math.PI)) <
+              ANGLE_SNAP_THRESHOLD_DEGREES
+          const isVertical =
+            Math.abs(radToDeg(Math.abs(angle) - Math.PI / 2)) <
+            ANGLE_SNAP_THRESHOLD_DEGREES
 
           let resolvedFunctionName: ToolTip = 'line'
 
@@ -810,6 +828,12 @@ export class SceneEntities {
           // case-based logic for different segment types
           if (lastSegment.type === 'TangentialArcTo') {
             resolvedFunctionName = 'tangentialArcTo'
+          } else if (isHorizontal) {
+            // If the angle between is 0 or 180 degrees (+/- the snapping angle), make the line an xLine
+            resolvedFunctionName = 'xLine'
+          } else if (isVertical) {
+            // If the angle between is 90 or 270 degrees (+/- the snapping angle), make the line a yLine
+            resolvedFunctionName = 'yLine'
           } else if (snappedPoint.x === 0 || snappedPoint.y === 0) {
             // We consider a point placed on axes or origin to be absolute
             resolvedFunctionName = 'lineTo'
@@ -835,10 +859,11 @@ export class SceneEntities {
         }
 
         await kclManager.executeAstMock(modifiedAst)
+
         if (intersectsProfileStart) {
           sceneInfra.modelingSend({ type: 'CancelSketch' })
         } else {
-          await this.setUpDraftSegment(
+          await this.setupDraftSegment(
             sketchPathToNode,
             forward,
             up,
@@ -846,6 +871,8 @@ export class SceneEntities {
             segmentName
           )
         }
+
+        await codeManager.updateEditorWithAstAndWriteToFile(modifiedAst)
       },
       onMove: (args) => {
         this.onDragSegment({
@@ -970,8 +997,179 @@ export class SceneEntities {
         if (trap(_node)) return
         const sketchInit = _node.node?.declarations?.[0]?.init
 
+        if (sketchInit.type !== 'PipeExpression') {
+          return
+        }
+
+        updateRectangleSketch(sketchInit, x, y, tags[0])
+
+        const newCode = recast(_ast)
+        let _recastAst = parse(newCode)
+        if (trap(_recastAst)) return
+        _ast = _recastAst
+
+        // Update the primary AST and unequip the rectangle tool
+        await kclManager.executeAstMock(_ast)
+        sceneInfra.modelingSend({ type: 'Finish rectangle' })
+
+        // lee: I had this at the bottom of the function, but it's
+        // possible sketchFromKclValue "fails" when sketching on a face,
+        // and this couldn't wouldn't run.
+        await codeManager.updateEditorWithAstAndWriteToFile(_ast)
+
+        const { execState } = await executeAst({
+          ast: _ast,
+          useFakeExecutor: true,
+          engineCommandManager: this.engineCommandManager,
+          programMemoryOverride,
+          idGenerator: kclManager.execState.idGenerator,
+        })
+        const programMemory = execState.memory
+
+        // Prepare to update the THREEjs scene
+        this.sceneProgramMemory = programMemory
+        const sketch = sketchFromKclValue(
+          programMemory.get(variableDeclarationName),
+          variableDeclarationName
+        )
+        if (err(sketch)) return
+        const sgPaths = sketch.paths
+        const orthoFactor = orthoScale(sceneInfra.camControls.camera)
+
+        // Update the starting segment of the THREEjs scene
+        this.updateSegment(sketch.start, 0, 0, _ast, orthoFactor, sketch)
+        // Update the rest of the segments of the THREEjs scene
+        sgPaths.forEach((seg, index) =>
+          this.updateSegment(seg, index, 0, _ast, orthoFactor, sketch)
+        )
+      },
+    })
+  }
+  setupDraftCenterRectangle = async (
+    sketchPathToNode: PathToNode,
+    forward: [number, number, number],
+    up: [number, number, number],
+    sketchOrigin: [number, number, number],
+    rectangleOrigin: [x: number, y: number]
+  ) => {
+    let _ast = structuredClone(kclManager.ast)
+    const _node1 = getNodeFromPath<VariableDeclaration>(
+      _ast,
+      sketchPathToNode || [],
+      'VariableDeclaration'
+    )
+    if (trap(_node1)) return Promise.reject(_node1)
+
+    // startSketchOn already exists
+    const variableDeclarationName =
+      _node1.node?.declarations?.[0]?.id?.name || ''
+    const startSketchOn = _node1.node?.declarations
+    const startSketchOnInit = startSketchOn?.[0]?.init
+
+    const tags: [string, string, string] = [
+      findUniqueName(_ast, 'rectangleSegmentA'),
+      findUniqueName(_ast, 'rectangleSegmentB'),
+      findUniqueName(_ast, 'rectangleSegmentC'),
+    ]
+
+    startSketchOn[0].init = createPipeExpression([
+      startSketchOnInit,
+      ...getRectangleCallExpressions(rectangleOrigin, tags),
+    ])
+
+    let _recastAst = parse(recast(_ast))
+    if (trap(_recastAst)) return Promise.reject(_recastAst)
+    _ast = _recastAst
+
+    const { programMemoryOverride, truncatedAst } = await this.setupSketch({
+      sketchPathToNode,
+      forward,
+      up,
+      position: sketchOrigin,
+      maybeModdedAst: _ast,
+      draftExpressionsIndices: { start: 0, end: 3 },
+    })
+
+    sceneInfra.setCallbacks({
+      onMove: async (args) => {
+        // Update the width and height of the draft rectangle
+        const pathToNodeTwo = structuredClone(sketchPathToNode)
+        pathToNodeTwo[1][0] = 0
+
+        const _node = getNodeFromPath<VariableDeclaration>(
+          truncatedAst,
+          pathToNodeTwo || [],
+          'VariableDeclaration'
+        )
+        if (trap(_node)) return Promise.reject(_node)
+        const sketchInit = _node.node?.declarations?.[0]?.init
+
+        const x = (args.intersectionPoint.twoD.x || 0) - rectangleOrigin[0]
+        const y = (args.intersectionPoint.twoD.y || 0) - rectangleOrigin[1]
+
         if (sketchInit.type === 'PipeExpression') {
-          updateRectangleSketch(sketchInit, x, y, tags[0])
+          updateCenterRectangleSketch(
+            sketchInit,
+            x,
+            y,
+            tags[0],
+            rectangleOrigin[0],
+            rectangleOrigin[1]
+          )
+        }
+
+        const { execState } = await executeAst({
+          ast: truncatedAst,
+          useFakeExecutor: true,
+          engineCommandManager: this.engineCommandManager,
+          programMemoryOverride,
+          idGenerator: kclManager.execState.idGenerator,
+        })
+        const programMemory = execState.memory
+        this.sceneProgramMemory = programMemory
+        const sketch = sketchFromKclValue(
+          programMemory.get(variableDeclarationName),
+          variableDeclarationName
+        )
+        if (err(sketch)) return Promise.reject(sketch)
+        const sgPaths = sketch.paths
+        const orthoFactor = orthoScale(sceneInfra.camControls.camera)
+
+        this.updateSegment(sketch.start, 0, 0, _ast, orthoFactor, sketch)
+        sgPaths.forEach((seg, index) =>
+          this.updateSegment(seg, index, 0, _ast, orthoFactor, sketch)
+        )
+      },
+      onClick: async (args) => {
+        // If there is a valid camera interaction that matches, do that instead
+        const interaction = sceneInfra.camControls.getInteractionType(
+          args.mouseEvent
+        )
+        if (interaction !== 'none') return
+        // Commit the rectangle to the full AST/code and return to sketch.idle
+        const cornerPoint = args.intersectionPoint?.twoD
+        if (!cornerPoint || args.mouseEvent.button !== 0) return
+
+        const x = roundOff((cornerPoint.x || 0) - rectangleOrigin[0])
+        const y = roundOff((cornerPoint.y || 0) - rectangleOrigin[1])
+
+        const _node = getNodeFromPath<VariableDeclaration>(
+          _ast,
+          sketchPathToNode || [],
+          'VariableDeclaration'
+        )
+        if (trap(_node)) return
+        const sketchInit = _node.node?.declarations?.[0]?.init
+
+        if (sketchInit.type === 'PipeExpression') {
+          updateCenterRectangleSketch(
+            sketchInit,
+            x,
+            y,
+            tags[0],
+            rectangleOrigin[0],
+            rectangleOrigin[1]
+          )
 
           let _recastAst = parse(recast(_ast))
           if (trap(_recastAst)) return
@@ -979,7 +1177,12 @@ export class SceneEntities {
 
           // Update the primary AST and unequip the rectangle tool
           await kclManager.executeAstMock(_ast)
-          sceneInfra.modelingSend({ type: 'Finish rectangle' })
+          sceneInfra.modelingSend({ type: 'Finish center rectangle' })
+
+          // lee: I had this at the bottom of the function, but it's
+          // possible sketchFromKclValue "fails" when sketching on a face,
+          // and this couldn't wouldn't run.
+          await codeManager.updateEditorWithAstAndWriteToFile(_ast)
 
           const { execState } = await executeAst({
             ast: _ast,
@@ -1166,13 +1369,17 @@ export class SceneEntities {
           if (err(moddedResult)) return
           modded = moddedResult.modifiedAst
 
-          let _recastAst = parse(recast(modded))
+          const newCode = recast(modded)
+          if (err(newCode)) return
+          let _recastAst = parse(newCode)
           if (trap(_recastAst)) return Promise.reject(_recastAst)
           _ast = _recastAst
 
           // Update the primary AST and unequip the rectangle tool
           await kclManager.executeAstMock(_ast)
           sceneInfra.modelingSend({ type: 'Finish circle' })
+
+          await codeManager.updateEditorWithAstAndWriteToFile(_ast)
         }
       },
     })
@@ -1208,6 +1415,7 @@ export class SceneEntities {
             forward,
             position,
           })
+          await codeManager.writeToFile()
         }
       },
       onDrag: async ({
@@ -1490,10 +1698,13 @@ export class SceneEntities {
       this.sceneProgramMemory = programMemory
 
       const maybeSketch = programMemory.get(variableDeclarationName)
-      let sketch = undefined
-      const sg = sketchFromKclValue(maybeSketch, variableDeclarationName)
-      if (!err(sg)) {
-        sketch = sg
+      let sketch: Sketch | undefined
+      const sk = sketchFromKclValueOptional(
+        maybeSketch,
+        variableDeclarationName
+      )
+      if (!(sk instanceof Reason)) {
+        sketch = sk
       } else if ((maybeSketch as Solid).sketch) {
         sketch = (maybeSketch as Solid).sketch
       }

src/clientSideScene/sceneInfra.ts

@@ -50,6 +50,8 @@ export const RAYCASTABLE_PLANE = 'raycastable-plane'
 
 export const X_AXIS = 'xAxis'
 export const Y_AXIS = 'yAxis'
+/** If a segment angle is less than this many degrees off a meanginful angle it'll snap to it */
+export const ANGLE_SNAP_THRESHOLD_DEGREES = 3
 /** the THREEjs representation of the group surrounding a "snapped" point that is not yet placed */
 export const DRAFT_POINT_GROUP = 'draft-point-group'
 /** the THREEjs representation of a "snapped" point that is not yet placed */

src/commandLineArgs.ts

@@ -0,0 +1,12 @@
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
+
+const argv = yargs(hideBin(process.argv))
+  .option('telemetry', {
+    alias: 't',
+    type: 'boolean',
+    description: 'Writes startup telemetry to file on disk.',
+  })
+  .parse()
+
+export default argv

src/components/AvailableVarsHelpers.tsx

@@ -145,7 +145,7 @@ export function useCalc({
       const _programMem: ProgramMemory = ProgramMemory.empty()
       for (const { key, value } of availableVarInfo.variables) {
         const error = _programMem.set(key, {
-          type: 'UserVal',
+          type: 'String',
           value,
           __meta: [],
         })

src/components/CustomIcon.tsx

@@ -1161,6 +1161,29 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  stopwatch: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.95705 5.99046C7.05643 6.44935 6.33654 7.19809 5.91336 8.11602C5.49019 9.03396 5.38838 10.0676 5.62434 11.0505C5.8603 12.0334 6.42029 12.9081 7.21408 13.5339C8.00787 14.1597 8.98922 14.5 10 14.5C11.0108 14.5 11.9921 14.1597 12.7859 13.5339C13.5797 12.9082 14.1397 12.0334 14.3757 11.0505C14.6116 10.0676 14.5098 9.03396 14.0866 8.11603C13.6635 7.19809 12.9436 6.44935 12.043 5.99046L12.497 5.09946C13.5977 5.66032 14.4776 6.57544 14.9948 7.69737C15.512 8.81929 15.6364 10.0827 15.348 11.2839C15.0596 12.4852 14.3752 13.5544 13.405 14.3192C12.4348 15.0841 11.2354 15.5 10 15.5C8.7646 15.5 7.56517 15.0841 6.59499 14.3192C5.6248 13.5544 4.94037 12.4852 4.65197 11.2839C4.36357 10.0827 4.488 8.81929 5.00522 7.69736C5.52243 6.57544 6.40231 5.66032 7.50306 5.09946L7.95705 5.99046Z"
+        fill="currentColor"
+      />
+      <path d="M10 5.5V4M10 4H8M10 4H12" stroke="currentColor" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.8536 7.85356L10.3536 10.3536C10.1583 10.5488 9.84171 10.5488 9.64645 10.3536C9.45118 10.1583 9.45118 9.84172 9.64645 9.64645L12.1464 7.14645L12.8536 7.85356Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
 } as const
 
 export type CustomIconName = keyof typeof CustomIconMap

src/components/FileMachineProvider.tsx

@@ -29,6 +29,7 @@ import {
   KclSamplesManifestItem,
 } from 'lib/getKclSamplesManifest'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { markOnce } from 'lib/performance'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -54,6 +55,7 @@ export const FileMachineProvider = ({
   )
 
   useEffect(() => {
+    markOnce('code/didLoadFile')
     async function fetchKclSamples() {
       setKclSamples(await getKclSamplesManifest())
     }

src/components/FileTree.tsx

@@ -6,10 +6,10 @@ import { Dispatch, useCallback, useRef, useState } from 'react'
 import { useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { Disclosure } from '@headlessui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faPencil } from '@fortawesome/free-solid-svg-icons'
 import { useFileContext } from 'hooks/useFileContext'
 import styles from './FileTree.module.css'
-import { sortProject } from 'lib/desktopFS'
+import { sortFilesAndDirectories } from 'lib/desktopFS'
 import { FILE_EXT } from 'lib/constants'
 import { CustomIcon } from './CustomIcon'
 import { codeManager, kclManager } from 'lib/singletons'
@@ -22,11 +22,42 @@ import usePlatform from 'hooks/usePlatform'
 import { FileEntry } from 'lib/project'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { normalizeLineEndings } from 'lib/codeEditor'
+import { reportRejection } from 'lib/trap'
 
 function getIndentationCSS(level: number) {
   return `calc(1rem * ${level + 1})`
 }
 
+function TreeEntryInput(props: {
+  level: number
+  onSubmit: (value: string) => void
+}) {
+  const [value, setValue] = useState('')
+  const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return
+    props.onSubmit(value)
+  }
+
+  return (
+    <label>
+      <span className="sr-only">Entry input</span>
+      <input
+        data-testid="tree-input-field"
+        type="text"
+        autoFocus
+        autoCapitalize="off"
+        autoCorrect="off"
+        className="w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-none focus:ring-0"
+        onBlur={() => props.onSubmit(value)}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyPress={onKeyPress}
+        style={{ paddingInlineStart: getIndentationCSS(props.level) }}
+        value={value}
+      />
+    </label>
+  )
+}
+
 function RenameForm({
   fileOrDir,
   onSubmit,
@@ -113,23 +144,44 @@ function DeleteFileTreeItemDialog({
 }
 
 const FileTreeItem = ({
+  parentDir,
   project,
   currentFile,
+  lastDirectoryClicked,
   fileOrDir,
   onNavigateToFile,
+  onClickDirectory,
+  onCreateFile,
+  onCreateFolder,
+  newTreeEntry,
   level = 0,
+  treeSelection,
+  setTreeSelection,
 }: {
+  parentDir: FileEntry | undefined
   project?: IndexLoaderData['project']
   currentFile?: IndexLoaderData['file']
+  lastDirectoryClicked?: FileEntry
   fileOrDir: FileEntry
   onNavigateToFile?: () => void
+  onClickDirectory: (
+    open: boolean,
+    path: FileEntry,
+    parentDir: FileEntry | undefined
+  ) => void
+  onCreateFile: (name: string) => void
+  onCreateFolder: (name: string) => void
+  newTreeEntry: TreeEntry
   level?: number
+  treeSelection: FileEntry | undefined
+  setTreeSelection: Dispatch<React.SetStateAction<FileEntry | undefined>>
 }) => {
   const { send: fileSend, context: fileContext } = useFileContext()
   const { onFileOpen, onFileClose } = useLspContext()
   const navigate = useNavigate()
   const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
   const isCurrentFile = fileOrDir.path === currentFile?.path
+  const isFileOrDirHighlighted = treeSelection?.path === fileOrDir?.path
   const itemRef = useRef(null)
 
   // Since every file or directory gets its own FileTreeItem, we can do this.
@@ -138,15 +190,14 @@ const FileTreeItem = ({
   // the ReactNodes are destroyed, so is this listener :)
   useFileSystemWatcher(
     async (eventType, path) => {
-      // Don't try to read a file that was removed.
-      if (isCurrentFile && eventType !== 'unlink') {
-        // Prevents a cyclic read / write causing editor problems such as
-        // misplaced cursor positions.
-        if (codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher) {
-          codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = false
-          return
-        }
+      // Prevents a cyclic read / write causing editor problems such as
+      // misplaced cursor positions.
+      if (codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher) {
+        codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = false
+        return
+      }
 
+      if (isCurrentFile && eventType === 'change') {
         let code = await window.electron.readFile(path, { encoding: 'utf-8' })
         code = normalizeLineEndings(code)
         codeManager.updateCodeStateEditor(code)
@@ -156,6 +207,10 @@ const FileTreeItem = ({
     [fileOrDir.path]
   )
 
+  const showNewTreeEntry =
+    newTreeEntry !== undefined &&
+    fileOrDir.path === fileContext.selectedDirectory.path
+
   const isRenaming = fileContext.itemsBeingRenamed.includes(fileOrDir.path)
   const removeCurrentItemFromRenaming = useCallback(
     () =>
@@ -179,13 +234,6 @@ const FileTreeItem = ({
     })
   }, [fileContext.itemsBeingRenamed, fileOrDir.path, fileSend])
 
-  const clickDirectory = () => {
-    fileSend({
-      type: 'Set selected directory',
-      directory: fileOrDir,
-    })
-  }
-
   function handleKeyUp(e: React.KeyboardEvent<HTMLButtonElement>) {
     if (e.metaKey && e.key === 'Backspace') {
       // Open confirmation dialog
@@ -194,11 +242,13 @@ const FileTreeItem = ({
       // Show the renaming form
       addCurrentItemToRenaming()
     } else if (e.code === 'Space') {
-      handleClick()
+      void handleClick().catch(reportRejection)
     }
   }
 
-  function handleClick() {
+  async function handleClick() {
+    setTreeSelection(fileOrDir)
+
     if (fileOrDir.children !== null) return // Don't open directories
 
     if (fileOrDir.name?.endsWith(FILE_EXT) === false && project?.path) {
@@ -208,12 +258,10 @@ const FileTreeItem = ({
         `import("${fileOrDir.path.replace(project.path, '.')}")\n` +
           codeManager.code
       )
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      codeManager.writeToFile()
+      await codeManager.writeToFile()
 
       // Prevent seeing the model built one piece at a time when changing files
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      kclManager.executeCode(true)
+      await kclManager.executeCode(true)
     } else {
       // Let the lsp servers know we closed a file.
       onFileClose(currentFile?.path || null, project?.path || null)
@@ -222,16 +270,19 @@ const FileTreeItem = ({
       // Open kcl files
       navigate(`${PATHS.FILE}/${encodeURIComponent(fileOrDir.path)}`)
     }
+
     onNavigateToFile?.()
   }
 
+  // The below handles both the "root" of all directories and all subs. It's
+  // why some code is duplicated.
   return (
     <div className="contents" data-testid="file-tree-item" ref={itemRef}>
       {fileOrDir.children === null ? (
         <li
           className={
             'group m-0 p-0 border-solid border-0 hover:bg-primary/5 focus-within:bg-primary/5 dark:hover:bg-primary/20 dark:focus-within:bg-primary/20 ' +
-            (isCurrentFile
+            (isFileOrDirHighlighted || isCurrentFile
               ? '!bg-primary/10 !text-primary dark:!bg-primary/20 dark:!text-inherit'
               : '')
           }
@@ -242,7 +293,7 @@ const FileTreeItem = ({
               style={{ paddingInlineStart: getIndentationCSS(level) }}
               onClick={(e) => {
                 e.currentTarget.focus()
-                handleClick()
+                void handleClick().catch(reportRejection)
               }}
               onKeyUp={handleKeyUp}
             >
@@ -268,14 +319,13 @@ const FileTreeItem = ({
                 <Disclosure.Button
                   className={
                     ' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 hover:text-primary hover:bg-primary/5 dark:hover:text-inherit dark:hover:bg-primary/10' +
-                    (fileContext.selectedDirectory.path.includes(fileOrDir.path)
-                      ? ' ui-open:bg-primary/10'
-                      : '')
+                    (isFileOrDirHighlighted ? ' ui-open:bg-primary/10' : '')
                   }
                   style={{ paddingInlineStart: getIndentationCSS(level) }}
-                  onClick={(e) => e.currentTarget.focus()}
-                  onClickCapture={clickDirectory}
-                  onFocusCapture={clickDirectory}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClickDirectory(open, fileOrDir, parentDir)
+                  }}
                   onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
                   onKeyUp={handleKeyUp}
                 >
@@ -317,35 +367,69 @@ const FileTreeItem = ({
               >
                 <ul
                   className="m-0 p-0"
-                  onClickCapture={(e) => {
-                    fileSend({
-                      type: 'Set selected directory',
-                      directory: fileOrDir,
-                    })
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClickDirectory(open, fileOrDir, parentDir)
                   }}
-                  onFocusCapture={(e) =>
-                    fileSend({
-                      type: 'Set selected directory',
-                      directory: fileOrDir,
-                    })
-                  }
                 >
-                  {fileOrDir.children?.map((child) => (
-                    <FileTreeItem
-                      fileOrDir={child}
-                      project={project}
-                      currentFile={currentFile}
-                      onNavigateToFile={onNavigateToFile}
-                      level={level + 1}
-                      key={level + '-' + child.path}
-                    />
-                  ))}
+                  {showNewTreeEntry && (
+                    <div
+                      className="flex items-center"
+                      style={{
+                        paddingInlineStart: getIndentationCSS(level + 1),
+                      }}
+                    >
+                      <FontAwesomeIcon
+                        icon={faPencil}
+                        className="inline-block mr-2 m-0 p-0 w-2 h-2"
+                      />
+                      <TreeEntryInput
+                        level={-1}
+                        onSubmit={(value: string) =>
+                          newTreeEntry === 'file'
+                            ? onCreateFile(value)
+                            : onCreateFolder(value)
+                        }
+                      />
+                    </div>
+                  )}
+                  {sortFilesAndDirectories(fileOrDir.children || []).map(
+                    (child) => (
+                      <FileTreeItem
+                        parentDir={fileOrDir}
+                        fileOrDir={child}
+                        project={project}
+                        currentFile={currentFile}
+                        onCreateFile={onCreateFile}
+                        onCreateFolder={onCreateFolder}
+                        newTreeEntry={newTreeEntry}
+                        lastDirectoryClicked={lastDirectoryClicked}
+                        onClickDirectory={onClickDirectory}
+                        onNavigateToFile={onNavigateToFile}
+                        level={level + 1}
+                        key={level + '-' + child.path}
+                        treeSelection={treeSelection}
+                        setTreeSelection={setTreeSelection}
+                      />
+                    )
+                  )}
+                  {!showNewTreeEntry && fileOrDir.children?.length === 0 && (
+                    <div
+                      className="flex items-center text-chalkboard-50"
+                      style={{
+                        paddingInlineStart: getIndentationCSS(level + 1),
+                      }}
+                    >
+                      <div>No files</div>
+                    </div>
+                  )}
                 </ul>
               </Disclosure.Panel>
             </div>
           )}
         </Disclosure>
       )}
+
       {isConfirmingDelete && (
         <DeleteFileTreeItemDialog
           fileOrDir={fileOrDir}
@@ -409,27 +493,15 @@ interface FileTreeProps {
   ) => void
 }
 
-export const FileTreeMenu = () => {
-  const { send } = useFileContext()
-  const { send: modelingSend } = useModelingContext()
-
-  function createFile() {
-    send({
-      type: 'Create file',
-      data: { name: '', makeDir: false, shouldSetToRename: true },
-    })
-    modelingSend({ type: 'Cancel' })
-  }
-
-  function createFolder() {
-    send({
-      type: 'Create file',
-      data: { name: '', makeDir: true, shouldSetToRename: true },
-    })
-  }
-
-  useHotkeyWrapper(['mod + n'], createFile)
-  useHotkeyWrapper(['mod + shift + n'], createFolder)
+export const FileTreeMenu = ({
+  onCreateFile,
+  onCreateFolder,
+}: {
+  onCreateFile: () => void
+  onCreateFolder: () => void
+}) => {
+  useHotkeyWrapper(['mod + n'], onCreateFile)
+  useHotkeyWrapper(['mod + shift + n'], onCreateFolder)
 
   return (
     <>
@@ -442,7 +514,7 @@ export const FileTreeMenu = () => {
           bgClassName: 'bg-transparent',
         }}
         className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
-        onClick={createFile}
+        onClick={onCreateFile}
       >
         <Tooltip position="bottom-right" delay={750}>
           Create file
@@ -458,7 +530,7 @@ export const FileTreeMenu = () => {
           bgClassName: 'bg-transparent',
         }}
         className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
-        onClick={createFolder}
+        onClick={onCreateFolder}
       >
         <Tooltip position="bottom-right" delay={750}>
           Create folder
@@ -468,30 +540,110 @@ export const FileTreeMenu = () => {
   )
 }
 
+type TreeEntry = 'file' | 'folder' | undefined
+
+export const useFileTreeOperations = () => {
+  const { send } = useFileContext()
+  const { send: modelingSend } = useModelingContext()
+
+  // As long as this is undefined, a new "file tree entry prompt" is not shown.
+  const [newTreeEntry, setNewTreeEntry] = useState<TreeEntry>(undefined)
+
+  function createFile(args: { dryRun: boolean; name?: string }) {
+    if (args.dryRun) {
+      setNewTreeEntry('file')
+      return
+    }
+
+    // Clear so that the entry prompt goes away.
+    setNewTreeEntry(undefined)
+
+    if (!args.name) return
+
+    send({
+      type: 'Create file',
+      data: { name: args.name, makeDir: false, shouldSetToRename: false },
+    })
+    modelingSend({ type: 'Cancel' })
+  }
+
+  function createFolder(args: { dryRun: boolean; name?: string }) {
+    if (args.dryRun) {
+      setNewTreeEntry('folder')
+      return
+    }
+
+    setNewTreeEntry(undefined)
+
+    if (!args.name) return
+
+    send({
+      type: 'Create file',
+      data: { name: args.name, makeDir: true, shouldSetToRename: false },
+    })
+  }
+
+  return {
+    createFile,
+    createFolder,
+    newTreeEntry,
+  }
+}
+
 export const FileTree = ({
   className = '',
   onNavigateToFile: closePanel,
 }: FileTreeProps) => {
+  const { createFile, createFolder, newTreeEntry } = useFileTreeOperations()
+
   return (
     <div className={className}>
       <div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-20/40 dark:bg-chalkboard-80/50 border-b border-b-chalkboard-30 dark:border-b-chalkboard-80">
         <h2 className="flex-1 m-0 p-0 text-sm mono">Files</h2>
-        <FileTreeMenu />
+        <FileTreeMenu
+          onCreateFile={() => createFile({ dryRun: true })}
+          onCreateFolder={() => createFolder({ dryRun: true })}
+        />
       </div>
-      <FileTreeInner onNavigateToFile={closePanel} />
+      <FileTreeInner
+        onNavigateToFile={closePanel}
+        newTreeEntry={newTreeEntry}
+        onCreateFile={(name: string) => createFile({ dryRun: false, name })}
+        onCreateFolder={(name: string) => createFolder({ dryRun: false, name })}
+      />
     </div>
   )
 }
 
 export const FileTreeInner = ({
   onNavigateToFile,
+  onCreateFile,
+  onCreateFolder,
+  newTreeEntry,
 }: {
+  onCreateFile: (name: string) => void
+  onCreateFolder: (name: string) => void
+  newTreeEntry: TreeEntry
   onNavigateToFile?: () => void
 }) => {
   const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { send: fileSend, context: fileContext } = useFileContext()
   const { send: modelingSend } = useModelingContext()
 
+  const [lastDirectoryClicked, setLastDirectoryClicked] = useState<
+    FileEntry | undefined
+  >(undefined)
+
+  const [treeSelection, setTreeSelection] = useState<FileEntry | undefined>(
+    loaderData.file
+  )
+
+  const onNavigateToFile_ = () => {
+    // Reset modeling state when navigating to a new file
+    onNavigateToFile?.()
+    modelingSend({ type: 'Cancel' })
+  }
+
   // Refresh the file tree when there are changes.
   useFileSystemWatcher(
     async (eventType, path) => {
@@ -501,6 +653,13 @@ export const FileTreeInner = ({
       const isCurrentFile = loaderData.file?.path === path
       const hasChanged = eventType === 'change'
       if (isCurrentFile && hasChanged) return
+
+      // If it's a settings file we wrote to already from the app ignore it.
+      if (codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher) {
+        codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = false
+        return
+      }
+
       fileSend({ type: 'Refresh' })
     },
     [loaderData?.project?.path, fileContext.selectedDirectory.path].filter(
@@ -508,33 +667,81 @@ export const FileTreeInner = ({
     )
   )
 
-  const clickDirectory = () => {
+  const onTreeEntryInputSubmit = (value: string) => {
+    if (newTreeEntry === 'file') {
+      onCreateFile(value)
+      onNavigateToFile_()
+    } else {
+      onCreateFolder(value)
+    }
+  }
+
+  const onClickDirectory = (
+    open_: boolean,
+    fileOrDir: FileEntry,
+    parentDir: FileEntry | undefined
+  ) => {
+    // open true is closed... it's broken. Save me. I've inverted it here for
+    // sanity.
+    const open = !open_
+
+    const target = open ? fileOrDir : parentDir
+
+    // We're at the root, can't select anything further
+    if (!target) return
+
+    setTreeSelection(target)
+    setLastDirectoryClicked(target)
     fileSend({
       type: 'Set selected directory',
-      directory: fileContext.project,
+      directory: target,
     })
   }
 
+  const showNewTreeEntry =
+    newTreeEntry !== undefined &&
+    fileContext.selectedDirectory.path === loaderData.project?.path
+
   return (
-    <div
-      className="overflow-auto pb-12 absolute inset-0"
-      data-testid="file-pane-scroll-container"
-    >
-      <ul className="m-0 p-0 text-sm" onClickCapture={clickDirectory}>
-        {sortProject(fileContext.project?.children || []).map((fileOrDir) => (
-          <FileTreeItem
-            project={fileContext.project}
-            currentFile={loaderData?.file}
-            fileOrDir={fileOrDir}
-            onNavigateToFile={() => {
-              // Reset modeling state when navigating to a new file
-              modelingSend({ type: 'Cancel' })
-              onNavigateToFile?.()
-            }}
-            key={fileOrDir.path}
-          />
-        ))}
-      </ul>
+    <div className="relative">
+      <div
+        className="overflow-auto pb-12 absolute inset-0"
+        data-testid="file-pane-scroll-container"
+      >
+        <ul className="m-0 p-0 text-sm">
+          {showNewTreeEntry && (
+            <div
+              className="flex items-center"
+              style={{ paddingInlineStart: getIndentationCSS(0) }}
+            >
+              <FontAwesomeIcon
+                icon={faPencil}
+                className="inline-block mr-2 m-0 p-0 w-2 h-2"
+              />
+              <TreeEntryInput level={-1} onSubmit={onTreeEntryInputSubmit} />
+            </div>
+          )}
+          {sortFilesAndDirectories(fileContext.project?.children || []).map(
+            (fileOrDir) => (
+              <FileTreeItem
+                parentDir={fileContext.project}
+                project={fileContext.project}
+                currentFile={loaderData?.file}
+                lastDirectoryClicked={lastDirectoryClicked}
+                fileOrDir={fileOrDir}
+                onCreateFile={onCreateFile}
+                onCreateFolder={onCreateFolder}
+                newTreeEntry={newTreeEntry}
+                onClickDirectory={onClickDirectory}
+                onNavigateToFile={onNavigateToFile_}
+                key={fileOrDir.path}
+                treeSelection={treeSelection}
+                setTreeSelection={setTreeSelection}
+              />
+            )
+          )}
+        </ul>
+      </div>
     </div>
   )
 }