From 1f68ada8a5e37f9cbcead0aa6ab899f8c0b71079 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Wed, 21 Feb 2024 11:35:57 -0800
Subject: [PATCH 1/7] Move project name

---
 app/gui2/src/components/GraphEditor.vue    |  1 -
 app/gui2/src/components/ProjectTitle.vue   | 40 ----------------------
 app/gui2/src/components/TopBar.vue         | 10 +++---
 app/gui2/src/composables/stackNavigator.ts |  5 ++-
 4 files changed, 8 insertions(+), 48 deletions(-)
 delete mode 100644 app/gui2/src/components/ProjectTitle.vue

diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index a217310b278f..cdd576e8dc1f 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -659,7 +659,6 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
     />
     <TopBar
       v-model:mode="projectStore.executionMode"
-      :title="projectStore.displayName"
       :modes="EXECUTION_MODES"
       :breadcrumbs="stackNavigator.breadcrumbLabels.value"
       :allowNavigationLeft="stackNavigator.allowNavigationLeft.value"
diff --git a/app/gui2/src/components/ProjectTitle.vue b/app/gui2/src/components/ProjectTitle.vue
deleted file mode 100644
index 9be2ebad99ae..000000000000
--- a/app/gui2/src/components/ProjectTitle.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
-
-const props = defineProps<{ title: string; modes: string[]; mode: string }>()
-const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
-</script>
-
-<template>
-  <div class="ProjectTitle">
-    <span class="title" v-text="props.title"></span>
-    <ExecutionModeSelector
-      :modes="props.modes"
-      :modelValue="props.mode"
-      @execute="emit('execute')"
-      @update:modelValue="emit('update:mode', $event)"
-    />
-  </div>
-</template>
-
-<style scoped>
-.ProjectTitle {
-  user-select: none;
-  display: flex;
-  align-items: center;
-  background: var(--color-frame-bg);
-  border-radius: var(--radius-full);
-  backdrop-filter: var(--blur-app-bg);
-  gap: 8px;
-  padding-left: 10px;
-  padding-right: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-
-  > .title {
-    display: inline-block;
-    height: 24px;
-    padding: 1px 0px;
-  }
-}
-</style>
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 64583e29872e..70ae9973a696 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
+import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'
-import ProjectTitle from '@/components/ProjectTitle.vue'
 import { injectGuiConfig } from '@/providers/guiConfig'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  title: string
   breadcrumbs: BreadcrumbItem[]
   modes: string[]
   mode: string
@@ -40,11 +39,10 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <ProjectTitle
-      :title="props.title"
+    <ExecutionModeSelector
       :modes="props.modes"
-      :mode="props.mode"
-      @update:mode="emit('update:mode', $event)"
+      :modelValue="props.mode"
+      @update:modelValue="emit('update:mode', $event)"
       @execute="emit('execute')"
     />
     <NavBar
diff --git a/app/gui2/src/composables/stackNavigator.ts b/app/gui2/src/composables/stackNavigator.ts
index dcfb306e4d5d..3e79a85c284a 100644
--- a/app/gui2/src/composables/stackNavigator.ts
+++ b/app/gui2/src/composables/stackNavigator.ts
@@ -30,7 +30,10 @@ export function useStackNavigator() {
   })
 
   function stackItemToLabel(item: StackItem): string {
-    return graphStore.db.stackItemToMethodName(item) ?? 'unknown'
+    const methodName = graphStore.db.stackItemToMethodName(item)
+    if (!methodName) return 'unknown'
+    if (methodName === 'main') return projectStore.displayName
+    return methodName
   }
 
   function handleBreadcrumbClick(index: number) {

From e555a587b10f944cc9224cca37fa865f52fc53a1 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Wed, 21 Feb 2024 11:35:57 -0800
Subject: [PATCH 2/7] Record control

---
 app/gui2/e2e/collapsingAndEntering.spec.ts    |  10 +-
 app/gui2/scripts/generateIconMetadata.js      |   4 +-
 app/gui2/src/assets/icons.svg                 |  10 ++
 .../src/components/ExecutionModeSelector.vue  | 143 ------------------
 app/gui2/src/components/RecordControl.vue     |  65 ++++++++
 app/gui2/src/components/TopBar.vue            |   9 +-
 6 files changed, 86 insertions(+), 155 deletions(-)
 delete mode 100644 app/gui2/src/components/ExecutionModeSelector.vue
 create mode 100644 app/gui2/src/components/RecordControl.vue

diff --git a/app/gui2/e2e/collapsingAndEntering.spec.ts b/app/gui2/e2e/collapsingAndEntering.spec.ts
index bb831c617f62..1f95cc9a0b15 100644
--- a/app/gui2/e2e/collapsingAndEntering.spec.ts
+++ b/app/gui2/e2e/collapsingAndEntering.spec.ts
@@ -11,16 +11,16 @@ test('Entering nodes', async ({ page }) => {
   await actions.goToGraph(page)
   await mockCollapsedFunctionInfo(page, 'final', 'func1')
   await expectInsideMain(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project'])
 
   await locate.graphNodeByBinding(page, 'final').dblclick()
   await mockCollapsedFunctionInfo(page, 'f2', 'func2')
   await expectInsideFunc1(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1'])
 
   await locate.graphNodeByBinding(page, 'f2').dblclick()
   await expectInsideFunc2(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
 })
 
 test('Leaving entered nodes', async ({ page }) => {
@@ -40,7 +40,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.graphEditor(page).dblclick()
   await locate.graphEditor(page).dblclick()
   // Breadcrumbs still have all the crumbs, but the last two are dimmed.
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
   await expect(locate.navBreadcrumb(page, (f) => f.class('inactive'))).toHaveText([
     'func1',
     'func2',
@@ -49,7 +49,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.navBreadcrumb(page).filter({ hasText: 'func2' }).click()
   await expectInsideFunc2(page)
 
-  await locate.navBreadcrumb(page).filter({ hasText: 'main' }).click()
+  await locate.navBreadcrumb(page).filter({ hasText: 'Mock Project' }).click()
   await expectInsideMain(page)
 
   await locate.navBreadcrumb(page).filter({ hasText: 'func1' }).click()
diff --git a/app/gui2/scripts/generateIconMetadata.js b/app/gui2/scripts/generateIconMetadata.js
index 06e5f056e679..ab755ef1c2cb 100644
--- a/app/gui2/scripts/generateIconMetadata.js
+++ b/app/gui2/scripts/generateIconMetadata.js
@@ -11,8 +11,8 @@ console.info('Writing icon name type to "./src/util/iconName.ts"...')
 await fs.writeFile(
   './src/util/iconName.ts',
   `\
-// Generated by \`scripts/generateIcons.js\`.
-// Please run \`npm run generate\` to regenerate this file whenever \`icons.svg\` is changed.
+// Generated by \`scripts/generateIconMetadata.js\`.
+// Please run \`npm run generate-metadata\` to regenerate this file whenever \`icons.svg\` is changed.
 import iconNames from '@/util/iconList.json'
 
 export type Icon =
diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
index 8bbd0d7d56f9..d78808ae3061 100644
--- a/app/gui2/src/assets/icons.svg
+++ b/app/gui2/src/assets/icons.svg
@@ -650,6 +650,16 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 6.14915 0.641755 4.35557 1.81592 2.92485C2.99008 1.49413 4.624 0.514797 6.43928 0.153715C8.25456 -0.207366 10.1389 0.0721462 11.7712 0.944627C13.4035 1.81711 14.6827 3.22857 15.391 4.93853C16.0993 6.64848 16.1928 8.55113 15.6555 10.3223C15.1183 12.0934 13.9835 13.6235 12.4446 14.6518C10.9056 15.68 9.05779 16.1429 7.21586 15.9615C5.37394 15.7801 3.65189 14.9656 2.34315 13.6569L3.76867 12.2313C4.74761 13.2103 6.0357 13.8195 7.41347 13.9552C8.79123 14.0909 10.1734 13.7447 11.3245 12.9755C12.4756 12.2064 13.3245 11.0619 13.7263 9.73706C14.1282 8.41224 14.0583 6.98907 13.5285 5.71002C12.9987 4.43097 12.0418 3.3752 10.8208 2.72258C9.59988 2.06996 8.19041 1.86089 6.83258 2.13098C5.47475 2.40107 4.25258 3.13361 3.37431 4.20379C2.49603 5.27397 2.016 6.61557 2.016 8H4L1 12L-2 8H0ZM8 4C7.44772 4 7 4.44771 7 5V8C7 8.37712 7.20876 8.70549 7.51702 8.87584L9.77767 10.181C10.256 10.4572 10.8675 10.2933 11.1437 9.815C11.4198 9.33671 11.256 8.72512 10.7777 8.44897L9 7.42264V5C9 4.44771 8.55228 4 8 4Z" fill="currentColor"></path>
   </symbol>
 
+  <symbol id="record" viewBox="0 0 16 16" width="16" height="16" fill="none">
+    <circle cx="8" cy="8" r="7" fill="currentColor" />
+  </symbol>
+
+  <symbol id="record_once" viewBox="0 0 24 16" width="24" height="16" fill="none">
+    <rect x="0" y="1" width="3" height="14" rx="1" fill="currentColor" />
+    <circle cx="12" cy="8" r="7" fill="currentColor" />
+    <rect x="21" y="1" width="3" height="14" rx="1" fill="currentColor" />
+  </symbol>
+
   <symbol id="right_side_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
     <path opacity="0.3" d="M0 3C0 1.34315 1.34315 0 3 0H8V16H3C1.34315 16 0 14.6569 0 13V3Z" fill="currentColor"></path>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M13 0H9V16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0ZM14 4H11V5H14V4ZM14 6H11V7H14V6ZM11 8H14V9H11V8Z" fill="currentColor"></path>
diff --git a/app/gui2/src/components/ExecutionModeSelector.vue b/app/gui2/src/components/ExecutionModeSelector.vue
deleted file mode 100644
index 56cea97a0879..000000000000
--- a/app/gui2/src/components/ExecutionModeSelector.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
-import { useEvent } from '@/composables/events'
-import { ref } from 'vue'
-
-const props = defineProps<{ modes: string[]; modelValue: string }>()
-const emit = defineEmits<{ execute: []; 'update:modelValue': [mode: string] }>()
-
-const isDropdownOpen = ref(false)
-
-const executionModeSelectorNode = ref<HTMLElement>()
-
-function onDocumentClick(event: MouseEvent) {
-  if (
-    event.target instanceof Node &&
-    executionModeSelectorNode.value?.contains(event.target) === false
-  ) {
-    isDropdownOpen.value = false
-  }
-}
-
-useEvent(document, 'pointerdown', onDocumentClick)
-</script>
-
-<template>
-  <div ref="executionModeSelectorNode" class="ExecutionModeSelector">
-    <div class="execution-mode-button">
-      <div class="execution-mode button" @pointerdown.stop="isDropdownOpen = !isDropdownOpen">
-        <span v-text="props.modelValue"></span>
-      </div>
-      <div class="divider"></div>
-      <SvgIcon
-        name="workflow_play"
-        class="play button"
-        draggable="false"
-        @pointerdown="
-          () => {
-            isDropdownOpen = false
-            emit('execute')
-          }
-        "
-      />
-    </div>
-    <Transition name="dropdown">
-      <div v-if="isDropdownOpen" class="execution-mode-dropdown">
-        <template v-for="otherMode in props.modes" :key="otherMode">
-          <span
-            v-if="modelValue !== otherMode"
-            class="button"
-            @pointerdown="emit('update:modelValue', otherMode), (isDropdownOpen = false)"
-            v-text="otherMode"
-          ></span>
-        </template>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-span {
-  display: inline-block;
-  height: 24px;
-  padding: 1px 0px;
-  vertical-align: middle;
-  overflow: clip;
-}
-
-.ExecutionModeSelector {
-  position: relative;
-  color: white;
-}
-
-.execution-mode-button {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: #64b526;
-
-  > .execution-mode {
-    font-weight: 600;
-    padding: 0 8px;
-  }
-
-  > .divider {
-    align-self: stretch;
-    width: 1px;
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-
-  > .play {
-    box-sizing: content-box;
-    padding: 0 8px;
-    color: rgba(255, 255, 255, 0.75);
-  }
-}
-
-.execution-mode-dropdown {
-  display: flex;
-  flex-flow: column;
-  position: absolute;
-  background: #64b526;
-  border-radius: 10px;
-  width: 100%;
-  top: 100%;
-  margin-top: 4px;
-  padding: 4px;
-
-  > span {
-    border-radius: 6px;
-    padding-left: 4px;
-    padding-right: 4px;
-    width: 100%;
-  }
-
-  *:hover {
-    background: var(--color-dim);
-  }
-}
-
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.1s;
-
-  > span {
-    transition: all 0.1s;
-  }
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  overflow: hidden;
-
-  > span {
-    padding-top: 0;
-    padding-bottom: 0;
-    max-height: 0;
-  }
-}
-</style>
diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
new file mode 100644
index 000000000000..a2e3fe153506
--- /dev/null
+++ b/app/gui2/src/components/RecordControl.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{ mode: string }>()
+const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
+
+const recordMode = computed(() => props.mode === 'live')
+</script>
+
+<template>
+  <div class="RecordControl">
+    <div class="control left-end">
+      <ToggleIcon
+        icon="record"
+        :alt="`${recordMode ? 'Enable' : 'Disable'} record mode`"
+        :modelValue="recordMode"
+        @update:modelValue="emit('update:mode', $event ? 'live' : 'design')"
+      />
+    </div>
+    <div class="control right-end">
+      <SvgIcon
+        alt="Record once"
+        class="button"
+        name="record_once"
+        draggable="false"
+        :width="24"
+        @pointerdown="() => emit('execute')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.RecordControl {
+  user-select: none;
+  display: flex;
+  place-items: center;
+  backdrop-filter: var(--blur-app-bg);
+  gap: 1px;
+}
+
+.control {
+  background: var(--color-frame-bg);
+  padding: 8px 8px;
+}
+
+.left-end {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+  padding-right: 8px;
+}
+
+.right-end {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.toggledOn {
+  color: #ba4c40;
+}
+
+.button:active {
+  color: #ba4c40;
+}
+</style>
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 70ae9973a696..5f57f2f2b10b 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'
+import RecordControl from '@/components/RecordControl.vue'
 import { injectGuiConfig } from '@/providers/guiConfig'
 import { computed } from 'vue'
 
@@ -39,10 +39,9 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <ExecutionModeSelector
-      :modes="props.modes"
-      :modelValue="props.mode"
-      @update:modelValue="emit('update:mode', $event)"
+    <RecordControl
+      :mode="props.mode"
+      @update:mode="emit('update:mode', $event)"
       @execute="emit('execute')"
     />
     <NavBar

From f8ed1ce12d281de57b684f568cfae6ccff1e7c4a Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Wed, 21 Feb 2024 13:45:52 -0800
Subject: [PATCH 3/7] Update tests

---
 app/gui2/e2e/collapsingAndEntering.spec.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/gui2/e2e/collapsingAndEntering.spec.ts b/app/gui2/e2e/collapsingAndEntering.spec.ts
index bb831c617f62..1f95cc9a0b15 100644
--- a/app/gui2/e2e/collapsingAndEntering.spec.ts
+++ b/app/gui2/e2e/collapsingAndEntering.spec.ts
@@ -11,16 +11,16 @@ test('Entering nodes', async ({ page }) => {
   await actions.goToGraph(page)
   await mockCollapsedFunctionInfo(page, 'final', 'func1')
   await expectInsideMain(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project'])
 
   await locate.graphNodeByBinding(page, 'final').dblclick()
   await mockCollapsedFunctionInfo(page, 'f2', 'func2')
   await expectInsideFunc1(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1'])
 
   await locate.graphNodeByBinding(page, 'f2').dblclick()
   await expectInsideFunc2(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
 })
 
 test('Leaving entered nodes', async ({ page }) => {
@@ -40,7 +40,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.graphEditor(page).dblclick()
   await locate.graphEditor(page).dblclick()
   // Breadcrumbs still have all the crumbs, but the last two are dimmed.
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
   await expect(locate.navBreadcrumb(page, (f) => f.class('inactive'))).toHaveText([
     'func1',
     'func2',
@@ -49,7 +49,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.navBreadcrumb(page).filter({ hasText: 'func2' }).click()
   await expectInsideFunc2(page)
 
-  await locate.navBreadcrumb(page).filter({ hasText: 'main' }).click()
+  await locate.navBreadcrumb(page).filter({ hasText: 'Mock Project' }).click()
   await expectInsideMain(page)
 
   await locate.navBreadcrumb(page).filter({ hasText: 'func1' }).click()

From fef1eb5262deb6091e89bce2984514fd7b875a20 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Wed, 21 Feb 2024 14:07:38 -0800
Subject: [PATCH 4/7] Refactor model from execution modes (live/design) to
 record mode (on/off)

---
 app/gui2/src/components/GraphEditor.vue   | 10 ++++------
 app/gui2/src/components/RecordControl.vue | 15 ++++++---------
 app/gui2/src/components/TopBar.vue        | 13 ++++++-------
 app/gui2/src/stores/project/index.ts      | 10 ++++++++++
 app/gui2/stories/TopBar.story.vue         | 13 +++++--------
 5 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index cdd576e8dc1f..fde0fe4ff589 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -38,7 +38,6 @@ import { computed, onMounted, onScopeDispose, onUnmounted, ref, watch } from 'vu
 import { ProjectManagerEvents } from '../../../ide-desktop/lib/dashboard/src/utilities/ProjectManager'
 import { type Usage } from './ComponentBrowser/input'
 
-const EXECUTION_MODES = ['design', 'live']
 // Assumed size of a newly created node. This is used to place the component browser.
 const DEFAULT_NODE_SIZE = new Vec2(0, 24)
 const gapBetweenNodes = 48.0
@@ -334,8 +333,8 @@ const codeEditorHandler = codeEditorBindings.handler({
   },
 })
 
-/** Track play button presses. */
-function onPlayButtonPress() {
+/** Handle record-once button presses. */
+function onRecordOnceButtonPress() {
   projectStore.lsRpcConnection.then(async () => {
     const modeValue = projectStore.executionMode
     if (modeValue == undefined) {
@@ -658,8 +657,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @canceled="onComponentBrowserCancel"
     />
     <TopBar
-      v-model:mode="projectStore.executionMode"
-      :modes="EXECUTION_MODES"
+      v-model:recordMode="projectStore.recordMode"
       :breadcrumbs="stackNavigator.breadcrumbLabels.value"
       :allowNavigationLeft="stackNavigator.allowNavigationLeft.value"
       :allowNavigationRight="stackNavigator.allowNavigationRight.value"
@@ -667,7 +665,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @breadcrumbClick="stackNavigator.handleBreadcrumbClick"
       @back="stackNavigator.exitNode"
       @forward="stackNavigator.enterNextNodeFromHistory"
-      @execute="onPlayButtonPress()"
+      @recordOnce="onRecordOnceButtonPress()"
       @fitToAllClicked="zoomToSelected"
       @zoomIn="graphNavigator.scale *= 1.1"
       @zoomOut="graphNavigator.scale *= 0.9"
diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
index a2e3fe153506..ccb37f89db9c 100644
--- a/app/gui2/src/components/RecordControl.vue
+++ b/app/gui2/src/components/RecordControl.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
-import { computed } from 'vue'
 
-const props = defineProps<{ mode: string }>()
-const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
-
-const recordMode = computed(() => props.mode === 'live')
+const props = defineProps<{ recordMode: boolean }>()
+const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolean] }>()
 </script>
 
 <template>
@@ -14,9 +11,9 @@ const recordMode = computed(() => props.mode === 'live')
     <div class="control left-end">
       <ToggleIcon
         icon="record"
-        :alt="`${recordMode ? 'Enable' : 'Disable'} record mode`"
-        :modelValue="recordMode"
-        @update:modelValue="emit('update:mode', $event ? 'live' : 'design')"
+        :alt="`${props.recordMode ? 'Enable' : 'Disable'} record mode`"
+        :modelValue="props.recordMode"
+        @update:modelValue="emit('update:recordMode', $event)"
       />
     </div>
     <div class="control right-end">
@@ -26,7 +23,7 @@ const recordMode = computed(() => props.mode === 'live')
         name="record_once"
         draggable="false"
         :width="24"
-        @pointerdown="() => emit('execute')"
+        @pointerdown="() => emit('recordOnce')"
       />
     </div>
   </div>
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 5f57f2f2b10b..772f6dd090f0 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -8,18 +8,17 @@ import { computed } from 'vue'
 
 const props = defineProps<{
   breadcrumbs: BreadcrumbItem[]
-  modes: string[]
-  mode: string
+  recordMode: boolean
   allowNavigationLeft: boolean
   allowNavigationRight: boolean
   zoomLevel: number
 }>()
 const emit = defineEmits<{
-  execute: []
+  recordOnce: []
   back: []
   forward: []
   breadcrumbClick: [index: number]
-  'update:mode': [mode: string]
+  'update:recordMode': [enabled: boolean]
   fitToAllClicked: []
   zoomIn: []
   zoomOut: []
@@ -40,9 +39,9 @@ const barStyle = computed(() => {
 <template>
   <div class="TopBar" :style="barStyle">
     <RecordControl
-      :mode="props.mode"
-      @update:mode="emit('update:mode', $event)"
-      @execute="emit('execute')"
+      :recordMode="props.recordMode"
+      @update:recordMode="emit('update:recordMode', $event)"
+      @recordOnce="emit('recordOnce')"
     />
     <NavBar
       :breadcrumbs="props.breadcrumbs"
diff --git a/app/gui2/src/stores/project/index.ts b/app/gui2/src/stores/project/index.ts
index 32a6fa91830c..0baf8d7d2d3d 100644
--- a/app/gui2/src/stores/project/index.ts
+++ b/app/gui2/src/stores/project/index.ts
@@ -681,6 +681,15 @@ export const useProjectStore = defineStore('project', () => {
     yDocsProvider = undefined
   }
 
+  const recordMode = computed({
+    get() {
+      return executionMode.value === 'live'
+    },
+    set(value) {
+      executionMode.value = value ? 'live' : 'design'
+    },
+  })
+
   return {
     setObservedFileName(name: string) {
       observedFileName.value = name
@@ -703,6 +712,7 @@ export const useProjectStore = defineStore('project', () => {
     isOutputContextEnabled,
     stopCapturingUndo,
     executionMode,
+    recordMode,
     dataflowErrors,
     executeExpression,
     disposeYDocsProvider,
diff --git a/app/gui2/stories/TopBar.story.vue b/app/gui2/stories/TopBar.story.vue
index c5acfaa8848c..5418110066f7 100644
--- a/app/gui2/stories/TopBar.story.vue
+++ b/app/gui2/stories/TopBar.story.vue
@@ -5,8 +5,7 @@ import { ref } from 'vue'
 import TopBar from '@/components/TopBar.vue'
 
 const title = ref('Mock Project')
-const modes = ref(['design', 'live'])
-const mode = ref('live')
+const recordMode = ref(true)
 const breadcrumbs = ref(['main', 'ad_analytics'])
 </script>
 
@@ -15,21 +14,19 @@ const breadcrumbs = ref(['main', 'ad_analytics'])
     <div style="height: 48px">
       <TopBar
         :title="title"
-        :mode="mode"
-        :modes="modes"
+        :recordMode="recordMode"
         :breadcrumbs="breadcrumbs"
         @back="logEvent('back', [])"
         @forward="logEvent('forward', [])"
-        @execute="logEvent('execute', [])"
+        @recordOnce="logEvent('recordOnce', [])"
         @breadcrumbClick="logEvent('breadcrumbClick', [$event])"
-        @update:mode="logEvent('update:mode', [$event]), (mode = $event)"
+        @update:recordMode="logEvent('update:recordMode', [$event]), (recordMode = $event)"
       />
     </div>
 
     <template #controls>
       <HstText v-model="title" title="title" />
-      <HstSelect v-model="mode" title="mode" :options="modes" />
-      <HstJson v-model="modes" title="modes" />
+      <HstJson v-model="recordMode" title="recordMode" />
       <HstJson v-model="breadcrumbs" title="breadcrumbs" />
     </template>
   </Story>

From abd652b7b864217d9c75502d094b23ee0f297e82 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Thu, 22 Feb 2024 08:10:21 -0800
Subject: [PATCH 5/7] Review.

---
 app/gui2/src/composables/stackNavigator.ts | 18 ++++++++++++------
 app/gui2/src/stores/project/index.ts       | 11 ++++++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/gui2/src/composables/stackNavigator.ts b/app/gui2/src/composables/stackNavigator.ts
index 3e79a85c284a..0c589f600f01 100644
--- a/app/gui2/src/composables/stackNavigator.ts
+++ b/app/gui2/src/composables/stackNavigator.ts
@@ -3,7 +3,7 @@ import { useGraphStore } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import type { AstId } from '@/util/ast/abstract.ts'
 import { qnLastSegment, tryQualifiedName } from '@/util/qualifiedName'
-import type { StackItem } from 'shared/languageServerTypes.ts'
+import { methodPointerEquals, type StackItem } from 'shared/languageServerTypes'
 import { computed, onMounted, ref } from 'vue'
 
 export function useStackNavigator() {
@@ -15,7 +15,7 @@ export function useStackNavigator() {
   const breadcrumbLabels = computed(() => {
     const activeStackLength = projectStore.executionContext.desiredStack.length
     return breadcrumbs.value.map((item, index) => {
-      const label = stackItemToLabel(item)
+      const label = stackItemToLabel(item, index === 0)
       const isActive = index < activeStackLength
       return { label, active: isActive } satisfies BreadcrumbItem
     })
@@ -29,11 +29,17 @@ export function useStackNavigator() {
     return projectStore.executionContext.desiredStack.length < breadcrumbs.value.length
   })
 
-  function stackItemToLabel(item: StackItem): string {
+  function isProjectEntryPoint(item: StackItem) {
+    return (
+      item.type === 'ExplicitCall' &&
+      methodPointerEquals(item.methodPointer, projectStore.entryPoint)
+    )
+  }
+
+  function stackItemToLabel(item: StackItem, isStackRoot: boolean): string {
+    if (isStackRoot && isProjectEntryPoint(item)) return projectStore.displayName
     const methodName = graphStore.db.stackItemToMethodName(item)
-    if (!methodName) return 'unknown'
-    if (methodName === 'main') return projectStore.displayName
-    return methodName
+    return methodName ?? 'unknown'
   }
 
   function handleBreadcrumbClick(index: number) {
diff --git a/app/gui2/src/stores/project/index.ts b/app/gui2/src/stores/project/index.ts
index 32a6fa91830c..7c8cfca24488 100644
--- a/app/gui2/src/stores/project/index.ts
+++ b/app/gui2/src/stores/project/index.ts
@@ -32,6 +32,7 @@ import type {
   ExplicitCall,
   ExpressionId,
   ExpressionUpdate,
+  MethodPointer,
   StackItem,
   VisualizationConfiguration,
 } from 'shared/languageServerTypes'
@@ -548,12 +549,15 @@ export const useProjectStore = defineStore('project', () => {
     return mod
   })
 
-  function createExecutionContextForMain(): ExecutionContext {
+  const entryPoint = computed<MethodPointer>(() => {
     const projectName = fullName.value
     const mainModule = `${projectName}.Main`
-    const entryPoint = { module: mainModule, definedOnType: mainModule, name: 'main' }
+    return { module: mainModule, definedOnType: mainModule, name: 'main' }
+  })
+
+  function createExecutionContextForMain(): ExecutionContext {
     return new ExecutionContext(lsRpcConnection, {
-      methodPointer: entryPoint,
+      methodPointer: entryPoint.value,
       positionalArgumentsExpressions: [],
     })
   }
@@ -693,6 +697,7 @@ export const useProjectStore = defineStore('project', () => {
     diagnostics,
     module,
     modulePath,
+    entryPoint,
     projectModel,
     contentRoots,
     awareness: markRaw(awareness),

From 615b2bfc757a424efd70f154a9cce0e4dc5dc161 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 23 Feb 2024 09:42:07 -0800
Subject: [PATCH 6/7] Produce icons through figma

---
 app/gui2/src/assets/icons.svg             | 8 +++-----
 app/gui2/src/components/RecordControl.vue | 2 --
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
index ec2175989a97..848cee9ef98b 100644
--- a/app/gui2/src/assets/icons.svg
+++ b/app/gui2/src/assets/icons.svg
@@ -677,13 +677,11 @@
   </symbol>
 
   <symbol id="record" viewBox="0 0 16 16" width="16" height="16" fill="none">
-    <circle cx="8" cy="8" r="7" fill="currentColor" />
+    <path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"></path>
   </symbol>
 
-  <symbol id="record_once" viewBox="0 0 24 16" width="24" height="16" fill="none">
-    <rect x="0" y="1" width="3" height="14" rx="1" fill="currentColor" />
-    <circle cx="12" cy="8" r="7" fill="currentColor" />
-    <rect x="21" y="1" width="3" height="14" rx="1" fill="currentColor" />
+  <symbol id="record_once" viewBox="0 0 16 16" width="16" height="16" fill="none">
+    <path d="M1.33333 2H.66667C.29848 2 0 2.38376 0 2.85714V13.1429C0 13.6162.29848 14 .66667 14H1.33333C1.70152 14 2 13.6162 2 13.1429V2.85714C2 2.38376 1.70152 2 1.33333 2ZM8 13C10.7614 13 13 10.7614 13 8 13 5.23858 10.7614 3 8 3 5.23858 3 3 5.23858 3 8 3 10.7614 5.23858 13 8 13ZM15.3333 2H14.6667C14.2985 2 14 2.38376 14 2.85714V13.1429C14 13.6162 14.2985 14 14.6667 14H15.3333C15.7015 14 16 13.6162 16 13.1429V2.85714C16 2.38376 15.7015 2 15.3333 2Z" fill="currentColor"></path>
   </symbol>
 
   <symbol id="right_side_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
index 4fff99fadcb1..764609512bfa 100644
--- a/app/gui2/src/components/RecordControl.vue
+++ b/app/gui2/src/components/RecordControl.vue
@@ -22,7 +22,6 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
         class="button"
         name="record_once"
         draggable="false"
-        :width="24"
         @click.stop="() => emit('recordOnce')"
       />
     </div>
@@ -45,7 +44,6 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 
 .left-end {
   border-radius: var(--radius-full) 0 0 var(--radius-full);
-  padding-right: 8px;
 }
 
 .right-end {

From 060891f45bdba62a3258a5cac2f8af03fbda9847 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 23 Feb 2024 09:59:40 -0800
Subject: [PATCH 7/7] Fix merge

---
 app/gui2/src/components/RecordControl.vue | 3 ++-
 app/gui2/src/components/TopBar.vue        | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
index 764609512bfa..c1ce4ff89d0b 100644
--- a/app/gui2/src/components/RecordControl.vue
+++ b/app/gui2/src/components/RecordControl.vue
@@ -7,10 +7,11 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
 </script>
 
 <template>
-  <div class="RecordControl">
+  <div class="RecordControl" @pointerdown.stop @pointerup.stop @click.stop>
     <div class="control left-end">
       <ToggleIcon
         icon="record"
+        class="button"
         :alt="`${props.recordMode ? 'Enable' : 'Disable'} record mode`"
         :modelValue="props.recordMode"
         @update:modelValue="emit('update:recordMode', $event)"
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index a95db7a5f5b2..772f6dd090f0 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'