Cut release v0.24.3 (#3053)

remove old shit

.github/ISSUE_TEMPLATE/cryptic_error.yml

@@ -0,0 +1,37 @@
+name: Cryptic KCL Error
+description: File a bug report for source code that produces a confusing error
+title: "[CRYPTIC]: "
+labels: ["cryptic-error"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: "Thank you for taking the time to report a confusing error. Please provide as much information as possible to help us resolve it."
+
+  - type: textarea
+    id: kcl
+    attributes:
+      label: Paste minimal KCL source that produces a cryptic error
+      description: Minimal KCL reproducer that produces a cryptic error
+      placeholder: "const ..."
+      render: javascript
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: Description of what you expected to happen (if you know).
+      placeholder: "I expected that..."
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context about the problem here.
+      placeholder: "Anything else you want to add..."
+    validations:
+      required: false

README.md

@@ -124,20 +124,40 @@ Before you submit a contribution PR to this repo, please ensure that:
 
 ## Release a new version
 
-1. Bump the versions by running `./make-realease.sh` while on a fresh pull of main
+#### 1. Bump the versions by running `./make-release.sh` and create a Cut Release PR
 
-That will create the branch with the updated json files for you.
-run `./make-release.sh` for a patch update
-run `./make-release.sh "minor"` for minor
-run `./make-release.sh "major"` for major
+That will create the branch with the updated json files for you:
+- run `./make-release.sh` or `./make-release.sh patch` for a patch update;
+- run `./make-release.sh minor` for minor; or
+- run `./make-release.sh major` for major.
 
-After it runs you should just need to push the push the branch and open a PR (it will suggest a changelog for you too, delete any that are not user facing)
+After it runs you should just need the push the branch and open a PR.
 
-The PR may serve as a place to discuss the human-readable changelog and extra QA. 
+**Important:** It needs to be prefixed with `Cut release v` to build in release mode and a few other things to test in the best context possible, the intent would be for instance to have `Cut release v1.2.3` for the `v1.2.3` release candidate.
 
-2. Merge the PR
+The PR may then serve as a place to discuss the human-readable changelog and extra QA. The `make-release.sh` tool suggests a changelog for you too to be used as PR description, just make sure to delete lines that are not user facing.
+
+#### 2. Smoke test artifacts from the Cut Release PR
+
+The release builds can be find under the `artifact` zip, at the very bottom of the `ci` action page for each commit on this branch.
+
+We don't have a strict process, but click around and check for anything obvious, posting results as comments in the Cut Release PR.
+
+The other `ci` output in Cut Release PRs is `updater-test`, because we don't have a way to test this fully automated, we have a semi-automated process. Download updater-test zip file, install the app, run it, expect an updater prompt to a dummy v0.99.99, install it and check that the app comes back at that version (on both macOS and Windows).
+
+#### 3. Merge the Cut Release PR
+
+This will kick the `create-release` action, that creates a _Draft_ release out of this Cut Release PR merge after less than a minute, with the new version as title and Cut Release PR as description.
+
+
+#### 4. Publish the release
+
+Head over to https://github.com/KittyCAD/modeling-app/releases, the draft release corresponding to the merged Cut Release PR should show up at the top as _Draft_. Click on it, verify the content, and hit _Publish_.
+
+#### 5. Profit
+
+A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions, which can be found under `release` event filter.
 
-3. Profit (A new Action kicks in at https://github.com/KittyCAD/modeling-app/actions if the PR was correctly named)
 
 ## Fuzzing the parser
 

e2e/playwright/flow-tests.spec.ts

@@ -3099,6 +3099,49 @@ const sketch002 = startSketchOn(extrude001, $seg01)
     ).not.toBeDisabled()
   })
 
+  test('Fillet button states test', async ({ page }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([-5, -5], %)
+  |> line([0, 10], %)
+  |> line([10, 0], %)
+  |> line([0, -10], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)`
+      )
+    })
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+    await u.waitForAuthSkipAppStart()
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    const selectSegment = () => page.getByText(`line([10, 0], %)`).click()
+    const selectClose = () => page.getByText(`close(%)`).click()
+    const clickEmpty = () => page.mouse.click(950, 100)
+
+    // expect fillet button without any bodies in the scene
+    await selectSegment()
+    await expect(page.getByRole('button', { name: 'Fillet' })).toBeDisabled()
+    await clickEmpty()
+    await expect(page.getByRole('button', { name: 'Fillet' })).toBeDisabled()
+
+    // test fillet button with the body in the scene
+    const codeToAdd = `${await u.codeLocator.allInnerTexts()}
+const extrude001 = extrude(10, sketch001)`
+    await u.codeLocator.fill(codeToAdd)
+    await selectSegment()
+    await expect(page.getByRole('button', { name: 'Fillet' })).toBeEnabled()
+    await selectClose()
+    await expect(page.getByRole('button', { name: 'Fillet' })).toBeDisabled()
+    await clickEmpty()
+    await expect(page.getByRole('button', { name: 'Fillet' })).toBeEnabled()
+  })
+
   const removeAfterFirstParenthesis = (inputString: string) => {
     const index = inputString.indexOf('(')
     if (index !== -1) {
@@ -3500,11 +3543,62 @@ test.describe('Command bar tests', () => {
       `const extrude001 = extrude(${KCL_DEFAULT_LENGTH}, sketch001)`
     )
   })
-  test('Command bar works and can change a setting', async ({ page }) => {
+
+  test('Fillet from command bar', async ({ page }) => {
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch001 = startSketchOn('XY')
+  |> startProfileAt([-5, -5], %)
+  |> line([0, 10], %)
+  |> line([10, 0], %)
+  |> line([0, -10], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)
+const extrude001 = extrude(-10, sketch001)`
+      )
+    })
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1000, height: 500 })
+    await u.waitForAuthSkipAppStart()
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    const selectSegment = () => page.getByText(`line([0, -10], %)`).click()
+
+    await selectSegment()
+    await page.waitForTimeout(100)
+    await page.getByRole('button', { name: 'Fillet' }).click()
+    await page.waitForTimeout(100)
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(100)
+    await page.keyboard.press('Enter')
+    await page.waitForTimeout(100)
+    await expect(page.locator('.cm-activeLine')).toContainText(
+      `fillet({ radius: ${KCL_DEFAULT_LENGTH}, tags: [seg01] }, %)`
+    )
+  })
+
+  test('Command bar can change a setting, and switch back and forth between arguments', async ({
+    page,
+  }) => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     await u.waitForAuthSkipAppStart()
 
+    const commandBarButton = page.getByRole('button', { name: 'Commands' })
+    const cmdSearchBar = page.getByPlaceholder('Search commands')
+    const themeOption = page.getByRole('option', {
+      name: 'theme',
+      exact: false,
+    })
+    const commandLevelArgButton = page.getByRole('button', { name: 'level' })
+    const commandThemeArgButton = page.getByRole('button', { name: 'value' })
+    // This selector changes after we set the setting
+    let commandOptionInput = page.getByPlaceholder('Select an option')
+
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
     ).not.toBeDisabled()
@@ -3515,23 +3609,17 @@ test.describe('Command bar tests', () => {
       .or(page.getByRole('button', { name: '⌘K' }))
       .click()
 
-    let cmdSearchBar = page.getByPlaceholder('Search commands')
     await expect(cmdSearchBar).toBeVisible()
     await page.keyboard.press('Escape')
-    cmdSearchBar = page.getByPlaceholder('Search commands')
     await expect(cmdSearchBar).not.toBeVisible()
 
     // Now try the same, but with the keyboard shortcut, check focus
     await page.keyboard.press('Meta+K')
-    cmdSearchBar = page.getByPlaceholder('Search commands')
     await expect(cmdSearchBar).toBeVisible()
     await expect(cmdSearchBar).toBeFocused()
 
     // Try typing in the command bar
-    await page.keyboard.type('theme')
-    const themeOption = page.getByRole('option', {
-      name: 'Settings · app · theme',
-    })
+    await cmdSearchBar.fill('theme')
     await expect(themeOption).toBeVisible()
     await themeOption.click()
     const themeInput = page.getByPlaceholder('Select an option')
@@ -3553,6 +3641,24 @@ test.describe('Command bar tests', () => {
     ).toBeVisible()
     // Check that the theme changed
     await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+
+    commandOptionInput = page.getByPlaceholder('system')
+
+    // Test case for https://github.com/KittyCAD/modeling-app/issues/2882
+    await commandBarButton.click()
+    await cmdSearchBar.focus()
+    await cmdSearchBar.fill('theme')
+    await themeOption.click()
+    await expect(commandThemeArgButton).toBeDisabled()
+    await commandOptionInput.focus()
+    await commandOptionInput.fill('lig')
+    await commandLevelArgButton.click()
+    await expect(commandLevelArgButton).toBeDisabled()
+
+    // Test case for https://github.com/KittyCAD/modeling-app/issues/2881
+    await commandThemeArgButton.click()
+    await expect(commandThemeArgButton).toBeDisabled()
+    await expect(commandLevelArgButton).toHaveText('level: project')
   })
 
   test('Command bar keybinding works from code editor and can change a setting', async ({
@@ -3577,7 +3683,7 @@ test.describe('Command bar tests', () => {
     await expect(cmdSearchBar).toBeFocused()
 
     // Try typing in the command bar
-    await page.keyboard.type('theme')
+    await cmdSearchBar.fill('theme')
     const themeOption = page.getByRole('option', {
       name: 'Settings · app · theme',
     })
@@ -3648,7 +3754,9 @@ test.describe('Command bar tests', () => {
     await page.mouse.click(700, 200)
 
     // Assert that we're on the distance step
-    await expect(page.getByRole('button', { name: 'distance' })).toBeDisabled()
+    await expect(
+      page.getByRole('button', { name: 'distance', exact: false })
+    ).toBeDisabled()
 
     // Assert that the an alternative variable name is chosen,
     // since the default variable name is already in use (distance)
@@ -3663,11 +3771,12 @@ test.describe('Command bar tests', () => {
 
     // Review step and argument hotkeys
     await expect(submitButton).toBeEnabled()
-    await page.keyboard.press('Backspace')
+    await expect(submitButton).toBeFocused()
+    await submitButton.press('Backspace')
 
     // Assert we're back on the distance step
     await expect(
-      page.getByRole('button', { name: 'Distance 5', exact: false })
+      page.getByRole('button', { name: 'distance', exact: false })
     ).toBeDisabled()
 
     await continueButton.click()
@@ -3691,6 +3800,47 @@ const extrude001 = extrude(distance001, sketch001)`.replace(
       ) // remove newlines
     )
   })
+
+  test('Can switch between sketch tools via command bar', async ({ page }) => {
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+
+    const sketchButton = page.getByRole('button', { name: 'Start Sketch' })
+    const cmdBarButton = page.getByRole('button', { name: 'Commands' })
+    const rectangleToolCommand = page.getByRole('option', {
+      name: 'Rectangle',
+    })
+    const rectangleToolButton = page.getByRole('button', { name: 'Rectangle' })
+    const lineToolCommand = page.getByRole('option', { name: 'Line' })
+    const lineToolButton = page.getByRole('button', { name: 'Line' })
+    const arcToolCommand = page.getByRole('option', { name: 'Tangential Arc' })
+    const arcToolButton = page.getByRole('button', { name: 'Tangential Arc' })
+
+    // Start a sketch
+    await sketchButton.click()
+    await page.mouse.click(700, 200)
+
+    // Switch between sketch tools via the command bar
+    await expect(lineToolButton).toHaveAttribute('aria-pressed', 'true')
+    await cmdBarButton.click()
+    await rectangleToolCommand.click()
+    await expect(rectangleToolButton).toHaveAttribute('aria-pressed', 'true')
+    await cmdBarButton.click()
+    await lineToolCommand.click()
+    await expect(lineToolButton).toHaveAttribute('aria-pressed', 'true')
+
+    // Click in the scene a couple times to draw a line
+    // so tangential arc is valid
+    await page.mouse.click(700, 200)
+    await page.mouse.move(700, 300, { steps: 5 })
+    await page.mouse.click(700, 300)
+
+    // switch to tangential arc via command bar
+    await cmdBarButton.click()
+    await arcToolCommand.click()
+    await expect(arcToolButton).toHaveAttribute('aria-pressed', 'true')
+  })
 })
 
 test.describe('Regression tests', () => {
@@ -4642,10 +4792,10 @@ test.describe('Sketch tests', () => {
     // click extrude
     await page.getByRole('button', { name: 'Extrude' }).click()
 
-    // sketch selection should already have been made. "Selection 1 face" only show up when the selection has been made already
+    // sketch selection should already have been made. "Selection: 1 face" only show up when the selection has been made already
     // otherwise the cmdbar would be waiting for a selection.
     await expect(
-      page.getByRole('button', { name: 'Selection 1 face' })
+      page.getByRole('button', { name: 'selection : 1 face', exact: false })
     ).toBeVisible()
   })
   test("Existing sketch with bad code delete user's code", async ({ page }) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.24.0",
+  "version": "0.24.3",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",

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

@@ -30,7 +30,7 @@ import { URI } from 'vscode-uri'
 import { LanguageServerClient } from '../client'
 import { CompletionItemKindMap } from './autocomplete'
 import { addToken, SemanticToken } from './semantic-tokens'
-import { deferExecution, posToOffset, formatMarkdownContents } from './util'
+import { posToOffset, formatMarkdownContents } from './util'
 import lspAutocompleteExt from './autocomplete'
 import lspHoverExt from './hover'
 import lspFormatExt from './format'
@@ -93,23 +93,10 @@ export class LanguageServerPlugin implements PluginValue {
   private doSemanticTokens: boolean = false
   private doFoldingRanges: boolean = false
 
-  private _defferer = deferExecution((code: string) => {
-    try {
-      // Update the state (not the editor) with the new code.
-      this.client.textDocumentDidChange({
-        textDocument: {
-          uri: this.getDocUri(),
-          version: this.documentVersion++,
-        },
-        contentChanges: [{ text: code }],
-      })
-
-      this.requestSemanticTokens()
-      this.updateFoldingRanges()
-    } catch (e) {
-      console.error(e)
-    }
-  }, this.changesDelay)
+  // When a doc update needs to be sent to the server, this holds the
+  // timeout handle for it. When null, the server has the up-to-date
+  // document.
+  private sendScheduled: number | null = null
 
   constructor(options: LanguageServerOptions, private view: EditorView) {
     this.client = options.client
@@ -152,14 +139,9 @@ export class LanguageServerPlugin implements PluginValue {
   }
 
   update(viewUpdate: ViewUpdate) {
-    // If the doc didn't change we can return early.
-    if (!viewUpdate.docChanged) {
-      return
+    if (viewUpdate.docChanged) {
+      this.scheduleSendDoc()
     }
-
-    this.sendChange({
-      documentText: viewUpdate.state.doc.toString(),
-    })
   }
 
   destroy() {
@@ -184,16 +166,6 @@ export class LanguageServerPlugin implements PluginValue {
     this.updateFoldingRanges()
   }
 
-  async sendChange({ documentText }: { documentText: string }) {
-    if (!this.client.ready) return
-
-    this._defferer(documentText)
-  }
-
-  requestDiagnostics() {
-    this.sendChange({ documentText: this.getDocText() })
-  }
-
   async requestHoverTooltip(
     view: EditorView,
     { line, character }: { line: number; character: number }
@@ -204,7 +176,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.sendChange({ documentText: this.getDocText() })
+    this.ensureDocSent()
     const result = await this.client.textDocumentHover({
       textDocument: { uri: this.getDocUri() },
       position: { line, character },
@@ -227,6 +199,42 @@ export class LanguageServerPlugin implements PluginValue {
     return { pos, end, create: (view) => ({ dom }), above: true }
   }
 
+  scheduleSendDoc() {
+    if (this.sendScheduled != null) window.clearTimeout(this.sendScheduled)
+    this.sendScheduled = window.setTimeout(
+      () => this.sendDoc(),
+      this.changesDelay
+    )
+  }
+
+  sendDoc() {
+    if (this.sendScheduled != null) {
+      window.clearTimeout(this.sendScheduled)
+      this.sendScheduled = null
+    }
+
+    if (!this.client.ready) return
+    try {
+      // Update the state (not the editor) with the new code.
+      this.client.textDocumentDidChange({
+        textDocument: {
+          uri: this.getDocUri(),
+          version: this.documentVersion++,
+        },
+        contentChanges: [{ text: this.view.state.doc.toString() }],
+      })
+
+      this.requestSemanticTokens()
+      this.updateFoldingRanges()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  ensureDocSent() {
+    if (this.sendScheduled != null) this.sendDoc()
+  }
+
   async getFoldingRanges(): Promise<LSP.FoldingRange[] | null> {
     if (
       !this.doFoldingRanges ||
@@ -284,13 +292,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.client.textDocumentDidChange({
-      textDocument: {
-        uri: this.getDocUri(),
-        version: this.documentVersion++,
-      },
-      contentChanges: [{ text: this.getDocText() }],
-    })
+    this.ensureDocSent()
 
     const result = await this.client.textDocumentFormatting({
       textDocument: { uri: this.getDocUri() },
@@ -330,9 +332,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.sendChange({
-      documentText: context.state.doc.toString(),
-    })
+    this.ensureDocSent()
 
     const result = await this.client.textDocumentCompletion({
       textDocument: { uri: this.getDocUri() },

src-tauri/tauri.conf.json

@@ -80,5 +80,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.24.0"
+  "version": "0.24.3"
 }

src/App.tsx

@@ -26,7 +26,6 @@ import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
-import { useAppState } from 'AppState'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -45,9 +44,7 @@ export function App() {
   }, [projectName, projectPath])
 
   useHotKeyListener()
-  const { context } = useModelingContext()
-  const { streamDimensions, didDragInStream, buttonDownInStream } =
-    useAppState()
+  const { context, state } = useModelingContext()
 
   const { auth, settings } = useSettingsAuthContext()
   const token = auth?.context?.token
@@ -60,7 +57,6 @@ export function App() {
   const {
     app: { onboardingStatus },
   } = settings.context
-  const { state } = useModelingContext()
 
   useHotkeys('backspace', (e) => {
     e.preventDefault()
@@ -77,7 +73,7 @@ export function App() {
     (p) => p === onboardingStatus.current
   )
     ? 'opacity-20'
-    : didDragInStream
+    : context.store?.didDragInStream
     ? 'opacity-40'
     : ''
 
@@ -95,11 +91,11 @@ export function App() {
       clientX: e.clientX,
       clientY: e.clientY,
       el: e.currentTarget,
-      ...streamDimensions,
+      ...context.store?.streamDimensions,
     })
 
     const newCmdId = uuidv4()
-    if (buttonDownInStream === undefined) {
+    if (context.store?.buttonDownInStream === undefined) {
       debounceSocketSend({
         type: 'modeling_cmd_req',
         cmd: {
@@ -121,7 +117,7 @@ export function App() {
         className={
           'transition-opacity transition-duration-75 ' +
           paneOpacity +
-          (buttonDownInStream ? ' pointer-events-none' : '')
+          (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
         }
         project={{ project, file }}
         enableMenu={true}

src/AppState.tsx

@@ -1,10 +1,4 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
-} from 'react'
+import { createContext, useContext, useState, ReactNode } from 'react'
 
 /*
 
@@ -17,23 +11,11 @@ Please do not fill this up with junk.
 interface AppState {
   isStreamReady: boolean
   setAppState: (newAppState: Partial<AppState>) => void
-
-  mediaStream?: MediaStream
-  buttonDownInStream: number | undefined
-  didDragInStream: boolean
-  streamDimensions: { streamWidth: number; streamHeight: number }
-  // openPanes: SidebarType[]
 }
 
 const AppStateContext = createContext<AppState>({
   isStreamReady: false,
   setAppState: () => {},
-
-  buttonDownInStream: undefined,
-  didDragInStream: false,
-  streamDimensions: { streamWidth: 1280, streamHeight: 720 },
-  mediaStream: undefined,
-  // openPanes: persistedContext.openPanes || ['code'],
 })
 
 export const useAppState = () => useContext(AppStateContext)
@@ -42,38 +24,47 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
   const [appState, _setAppState] = useState<AppState>({
     isStreamReady: false,
     setAppState: () => {},
-
-    buttonDownInStream: undefined,
-    didDragInStream: false,
-    streamDimensions: { streamWidth: 1280, streamHeight: 720 },
-    mediaStream: undefined,
-    // openPanes: persistedContext.openPanes || ['code'],
   })
-  useEffect(() => {
-    // console.log('appState change', appState)
-  }, [appState])
-  const setAppState = (newAppState: Partial<AppState>) => {
-    // console.log('appstate', newAppState)
-    _setAppState({
-      ...appState,
-      ...newAppState,
-      mediaStream: newAppState.mediaStream || appState.mediaStream,
-    })
-  }
+  const setAppState = (newAppState: Partial<AppState>) =>
+    _setAppState({ ...appState, ...newAppState })
 
   return (
     <AppStateContext.Provider
       value={{
         isStreamReady: appState.isStreamReady,
         setAppState,
-
-        mediaStream: appState.mediaStream,
-        buttonDownInStream: appState.buttonDownInStream,
-        didDragInStream: appState.didDragInStream,
-        streamDimensions: appState.streamDimensions,
       }}
     >
       {children}
     </AppStateContext.Provider>
   )
 }
+
+interface AppStream {
+  mediaStream: MediaStream
+  setMediaStream: (mediaStream: MediaStream) => void
+}
+
+const AppStreamContext = createContext<AppStream>({
+  mediaStream: undefined as unknown as MediaStream,
+  setMediaStream: () => {},
+})
+
+export const useAppStream = () => useContext(AppStreamContext)
+
+export const AppStreamProvider = ({ children }: { children: ReactNode }) => {
+  const [mediaStream, setMediaStream] = useState<MediaStream>(
+    undefined as unknown as MediaStream
+  )
+
+  return (
+    <AppStreamContext.Provider
+      value={{
+        mediaStream,
+        setMediaStream,
+      }}
+    >
+      {children}
+    </AppStreamContext.Provider>
+  )
+}

src/Router.tsx

@@ -49,17 +49,17 @@ const router = createBrowserRouter([
     /* Make sure auth is the outermost provider or else we will have
      * inefficient re-renders, use the react profiler to see. */
     element: (
-      <AppStateProvider>
-        <CommandBarProvider>
-          <SettingsAuthProvider>
-            <LspProvider>
-              <KclContextProvider>
+      <CommandBarProvider>
+        <SettingsAuthProvider>
+          <LspProvider>
+            <KclContextProvider>
+              <AppStateProvider>
                 <Outlet />
-              </KclContextProvider>
-            </LspProvider>
-          </SettingsAuthProvider>
-        </CommandBarProvider>
-      </AppStateProvider>
+              </AppStateProvider>
+            </KclContextProvider>
+          </LspProvider>
+        </SettingsAuthProvider>
+      </CommandBarProvider>
     ),
     errorElement: <ErrorPage />,
     children: [

src/Toolbar.tsx

@@ -16,6 +16,7 @@ import {
   canRectangleTool,
   isEditingExistingSketch,
 } from 'machines/modelingMachine'
+import { DEV } from 'env'
 
 export function Toolbar({
   className = '',
@@ -60,7 +61,7 @@ export function Toolbar({
         ? send('CancelSketch')
         : send({
             type: 'change tool',
-            data: 'line',
+            data: { tool: 'line' },
           }),
     { enabled: !disableLineButton, scopes: ['sketch'] }
   )
@@ -75,7 +76,7 @@ export function Toolbar({
         ? send('CancelSketch')
         : send({
             type: 'change tool',
-            data: 'tangentialArc',
+            data: { tool: 'tangentialArc' },
           }),
     { enabled: !disableTangentialArc, scopes: ['sketch'] }
   )
@@ -89,7 +90,7 @@ export function Toolbar({
         ? send('CancelSketch')
         : send({
             type: 'change tool',
-            data: 'rectangle',
+            data: { tool: 'rectangle' },
           }),
     { enabled: !disableRectangle, scopes: ['sketch'] }
   )
@@ -118,6 +119,16 @@ export function Toolbar({
       }),
     { enabled: !disableAllButtons, scopes: ['modeling'] }
   )
+  const disableFillet = !state.can('Fillet') || disableAllButtons
+  useHotkeys(
+    'f',
+    () =>
+      commandBarSend({
+        type: 'Find and select command',
+        data: { name: 'Fillet', groupId: 'modeling' },
+      }),
+    { enabled: !disableFillet, scopes: ['modeling'] }
+  )
 
   function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
     const span = toolbarButtonsRef.current
@@ -263,7 +274,7 @@ export function Toolbar({
                     ? send('CancelSketch')
                     : send({
                         type: 'change tool',
-                        data: 'line',
+                        data: { tool: 'line' },
                       })
                 }
                 aria-pressed={state?.matches('Sketch.Line tool')}
@@ -293,7 +304,7 @@ export function Toolbar({
                     ? send('CancelSketch')
                     : send({
                         type: 'change tool',
-                        data: 'tangentialArc',
+                        data: { tool: 'tangentialArc' },
                       })
                 }
                 aria-pressed={state.matches('Sketch.Tangential arc to')}
@@ -323,7 +334,7 @@ export function Toolbar({
                     ? send('CancelSketch')
                     : send({
                         type: 'change tool',
-                        data: 'rectangle',
+                        data: { tool: 'rectangle' },
                       })
                 }
                 aria-pressed={state.matches('Sketch.Rectangle tool')}
@@ -404,6 +415,36 @@ export function Toolbar({
             </ActionButton>
           </li>
         )}
+        {state.matches('idle') && (DEV || (window as any)._enableFillet) && (
+          <li className="contents">
+            <ActionButton
+              className={buttonClassName}
+              Element="button"
+              onClick={() =>
+                commandBarSend({
+                  type: 'Find and select command',
+                  data: { name: 'Fillet', groupId: 'modeling' },
+                })
+              }
+              disabled={disableFillet}
+              title={disableFillet ? 'fillet' : "edge can't be filleted"}
+              iconStart={{
+                icon: 'fillet', // todo: add fillet icon
+                iconClassName,
+                bgClassName,
+              }}
+            >
+              Fillet
+              <Tooltip
+                delay={1250}
+                position="bottom"
+                className="!px-2 !text-xs"
+              >
+                Shortcut: F
+              </Tooltip>
+            </ActionButton>
+          </li>
+        )}
       </ul>
     </menu>
   )

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -41,6 +41,7 @@ function CommandArgOptionInput({
   )
   const inputRef = useRef<HTMLInputElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
+  const [shouldSubmitOnChange, setShouldSubmitOnChange] = useState(false)
   const [selectedOption, setSelectedOption] = useState<
     CommandArgumentOption<unknown>
   >(currentOption || resolvedOptions[0])
@@ -82,8 +83,10 @@ function CommandArgOptionInput({
     // We deal with the whole option object internally
     setSelectedOption(option)
 
-    // But we only submit the value
-    onSubmit(option.value)
+    // But we only submit the value itself
+    if (shouldSubmitOnChange) {
+      onSubmit(option.value)
+    }
   }
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -94,7 +97,18 @@ function CommandArgOptionInput({
   }
 
   return (
-    <form id="arg-form" onSubmit={handleSubmit} ref={formRef}>
+    <form
+      id="arg-form"
+      onSubmit={handleSubmit}
+      ref={formRef}
+      onKeyDownCapture={(e) => {
+        if (e.key === 'Enter') {
+          setShouldSubmitOnChange(true)
+        } else {
+          setShouldSubmitOnChange(false)
+        }
+      }}
+    >
       <Combobox
         value={selectedOption}
         onChange={handleSelectOption}
@@ -118,6 +132,12 @@ function CommandArgOptionInput({
               if (event.key === 'Backspace' && !event.currentTarget.value) {
                 stepBack()
               }
+
+              if (event.key === 'Enter') {
+                setShouldSubmitOnChange(true)
+              } else {
+                setShouldSubmitOnChange(false)
+              }
             }}
             value={query}
             placeholder={
@@ -136,6 +156,9 @@ function CommandArgOptionInput({
         <Combobox.Options
           static
           className="overflow-y-auto max-h-96 cursor-pointer"
+          onMouseDown={() => {
+            setShouldSubmitOnChange(true)
+          }}
         >
           {filteredOptions?.map((option) => (
             <Combobox.Option

src/components/CommandBar/CommandBarHeader.tsx

@@ -114,6 +114,7 @@ function CommandBarHeader({ children }: React.PropsWithChildren<{}>) {
                     >
                       {argName}
                     </span>
+                    <span className="sr-only">:&nbsp;</span>
                     {argValue ? (
                       arg.inputType === 'selection' ? (
                         getSelectionTypeDisplayText(argValue as Selections)

src/components/CommandBar/CommandBarProvider.tsx

@@ -28,6 +28,11 @@ export const CommandBarProvider = ({
           Object.keys(context.selectedCommand?.args).length === 0
         )
       },
+      'All arguments are skippable': (context, _event) => {
+        return Object.values(context.selectedCommand!.args!).every(
+          (argConfig) => argConfig.skip
+        )
+      },
     },
   })
 

src/components/CommandBar/CommandBarSelectionInput.tsx

@@ -3,6 +3,7 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useKclContext } from 'lang/KclProvider'
 import { CommandArgument } from 'lib/commandTypes'
 import {
+  Selection,
   canSubmitSelectionArg,
   getSelectionType,
   getSelectionTypeDisplayText,
@@ -11,6 +12,25 @@ import { modelingMachine } from 'machines/modelingMachine'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { StateFrom } from 'xstate'
 
+const semanticEntityNames: { [key: string]: Array<Selection['type']> } = {
+  face: ['extrude-wall', 'start-cap', 'end-cap'],
+  edge: ['edge', 'line', 'arc'],
+  point: ['point', 'line-end', 'line-mid'],
+}
+
+function getSemanticSelectionType(selectionType: Array<Selection['type']>) {
+  const semanticSelectionType = new Set()
+  selectionType.forEach((type) => {
+    Object.entries(semanticEntityNames).forEach(([entity, entityTypes]) => {
+      if (entityTypes.includes(type)) {
+        semanticSelectionType.add(entity)
+      }
+    })
+  })
+
+  return Array.from(semanticSelectionType)
+}
+
 const selectionSelector = (snapshot: StateFrom<typeof modelingMachine>) =>
   snapshot.context.selectionRanges
 
@@ -85,7 +105,9 @@ function CommandBarSelectionInput({
       >
         {canSubmitSelection
           ? getSelectionTypeDisplayText(selection) + ' selected'
-          : `Please select ${arg.multiple ? 'one or more faces' : 'one face'}`}
+          : `Please select ${
+              arg.multiple ? 'one or more ' : 'one '
+            }${getSemanticSelectionType(arg.selectionTypes).join(' or ')}`}
         <input
           id="selection"
           name="selection"

src/components/CommandComboBox.tsx

@@ -70,19 +70,23 @@ function CommandComboBox({
       >
         {filteredOptions?.map((option) => (
           <Combobox.Option
-            key={option.name}
+            key={option.groupId + option.name + (option.displayName || '')}
             value={option}
-            className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
+            className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
           >
             {'icon' in option && option.icon && (
               <CustomIcon name={option.icon} className="w-5 h-5" />
             )}
-            <p className="flex-grow">{option.displayName || option.name} </p>
-            {option.description && (
-              <p className="text-xs text-chalkboard-60 dark:text-chalkboard-40">
-                {option.description}
+            <div className="flex-grow flex flex-col">
+              <p className="my-0 leading-tight">
+                {option.displayName || option.name}{' '}
               </p>
-            )}
+              {option.description && (
+                <p className="my-0 text-xs text-chalkboard-60 dark:text-chalkboard-50">
+                  {option.description}
+                </p>
+              )}
+            </div>
           </Combobox.Option>
         ))}
       </Combobox.Options>

src/components/CustomIcon.tsx

@@ -131,6 +131,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  code: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.7071 5L7.77734 14.7794L8.73527 15.0663L11.665 5.28698L10.7071 5ZM2.35356 9.64644L5.85362 6.14644L6.56072 6.85355L3.41423 10L6.56072 13.1464L5.85362 13.8536L2.35356 10.3536L2 10L2.35356 9.64644ZM17.0607 9.64644L13.5607 6.14644L12.8536 6.85355L16 10L12.8536 13.1464L13.5607 13.8535L17.0607 10.3536L17.4142 10L17.0607 9.64644Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   dimension: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -177,6 +187,22 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  fillet: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 5H5V15H15V12C15 8.13401 11.866 5 8 5ZM5 4H4V5V15V16H5H15H16V15V12C16 7.58172 12.4183 4 8 4H5Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 3.5H5.5H8.5C12.9183 3.5 16.5 7.08172 16.5 11.5V14.5V15.5H16V12C16 7.58172 12.4182 4 7.99996 4H4.5V3.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   file: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path