feat: App mode saving rework (#9338)

## Summary

Change app mode changes to be written directly to the workflow on change
instead of requiring explicit save via builder.
Temporary: Adds `.app.json` file extension to app files for
identification since we don't currently have a way to identify them with
metadata
Removes app builder save dialog and replaces it with default mode
selection

## Changes

- **What**: 
- ensure all save locations handle app mode
- remove dirtyLinearData and flushing

- **Breaking**: 
- if people are relying on workflow names and are converting to/from app
mode in the same workflow, they will gain/lose the `.app` part of the
extension

## Screenshots (if applicable)

<img width="689" height="84" alt="image"
src="https://github.com/user-attachments/assets/335596ee-dce9-4e3a-a7b5-f0715c294e41"
/>

<img width="421" height="324" alt="image"
src="https://github.com/user-attachments/assets/ad3cd33c-e9f0-4c30-8874-d4507892fc6b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9338-feat-App-mode-saving-rework-3176d73d3650813f9ae1f6c5a234da8c)
by [Unito](https://www.unito.io)

src/components/builder/BuilderMenu.vue

@@ -51,19 +51,28 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useBuilderSave } from './useBuilderSave'
-
 const { t } = useI18n()
 const appModeStore = useAppModeStore()
 const { hasOutputs } = storeToRefs(appModeStore)
-const { setSaving } = useBuilderSave()
+const workflowService = useWorkflowService()
+const workflowStore = useWorkflowStore()
+const { toastErrorHandler } = useErrorHandling()
 
-function onSave(close: () => void) {
-  setSaving(true)
-  close()
+async function onSave(close: () => void) {
+  const workflow = workflowStore.activeWorkflow
+  if (!workflow) return
+  try {
+    await workflowService.saveWorkflow(workflow)
+    close()
+  } catch (error) {
+    toastErrorHandler(error)
+  }
 }
 
 function onExitBuilder(close: () => void) {

src/components/builder/BuilderSaveSuccessDialogContent.vue

@@ -1,51 +0,0 @@
-<template>
-  <BuilderDialog @close="onClose">
-    <template #header-icon>
-      <i class="icon-[lucide--circle-check-big] size-4 text-green-500" />
-    </template>
-    <template #title>
-      {{ $t('builderToolbar.saveSuccess') }}
-    </template>
-
-    <p v-if="savedAsApp" class="m-0 text-sm text-muted-foreground">
-      {{ $t('builderToolbar.saveSuccessAppMessage', { name: workflowName }) }}
-    </p>
-    <p v-if="savedAsApp" class="m-0 text-sm text-muted-foreground">
-      {{ $t('builderToolbar.saveSuccessAppPrompt') }}
-    </p>
-    <p v-else class="m-0 text-sm text-muted-foreground">
-      {{ $t('builderToolbar.saveSuccessGraphMessage', { name: workflowName }) }}
-    </p>
-
-    <template #footer>
-      <Button
-        :variant="savedAsApp ? 'muted-textonly' : 'secondary'"
-        size="lg"
-        @click="onClose"
-      >
-        {{ $t('g.close') }}
-      </Button>
-      <Button
-        v-if="savedAsApp && onViewApp"
-        variant="primary"
-        size="lg"
-        @click="onViewApp"
-      >
-        {{ $t('builderToolbar.viewApp') }}
-      </Button>
-    </template>
-  </BuilderDialog>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-
-import BuilderDialog from './BuilderDialog.vue'
-
-defineProps<{
-  workflowName: string
-  savedAsApp: boolean
-  onViewApp?: () => void
-  onClose: () => void
-}>()
-</script>

src/components/builder/BuilderToolbar.vue

@@ -29,15 +29,19 @@
         <div class="mx-1 h-px w-4 bg-border-default" role="separator" />
       </template>
 
-      <!-- Save -->
+      <!-- Default view -->
       <ConnectOutputPopover
         v-if="!hasOutputs"
         :is-select-active="activeStep === 'builder:select'"
         @switch="setMode('builder:select')"
       >
         <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
-          <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
-          <StepLabel :step="saveStep" />
+          <StepBadge
+            :step="defaultViewStep"
+            :index="2"
+            :model-value="activeStep"
+          />
+          <StepLabel :step="defaultViewStep" />
         </button>
       </ConnectOutputPopover>
       <button
@@ -45,21 +49,26 @@
         :class="
           cn(
             stepClasses,
-            activeStep === 'save'
+            activeStep === 'setDefaultView'
               ? 'bg-interface-builder-mode-background'
               : 'hover:bg-secondary-background bg-transparent'
           )
         "
-        @click="setSaving(true)"
+        @click="showDialog()"
       >
-        <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
-        <StepLabel :step="saveStep" />
+        <StepBadge
+          :step="defaultViewStep"
+          :index="2"
+          :model-value="activeStep"
+        />
+        <StepLabel :step="defaultViewStep" />
       </button>
     </div>
   </nav>
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -68,19 +77,20 @@ import type { AppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useBuilderSave } from './useBuilderSave'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
 import StepBadge from './StepBadge.vue'
 import StepLabel from './StepLabel.vue'
 import type { BuilderToolbarStep } from './types'
-import { storeToRefs } from 'pinia'
+import { useAppSetDefaultView } from './useAppSetDefaultView'
 
 const { t } = useI18n()
 const { mode, setMode } = useAppMode()
 const { hasOutputs } = storeToRefs(useAppModeStore())
-const { saving, setSaving } = useBuilderSave()
+const { settingView, showDialog } = useAppSetDefaultView()
 
-const activeStep = computed(() => (saving.value ? 'save' : mode.value))
+const activeStep = computed(() =>
+  settingView.value ? 'setDefaultView' : mode.value
+)
 
 const stepClasses =
   'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'
@@ -99,10 +109,10 @@ const arrangeStep: BuilderToolbarStep<AppMode> = {
   icon: 'icon-[lucide--layout-panel-left]'
 }
 
-const saveStep: BuilderToolbarStep<'save'> = {
-  id: 'save',
-  title: t('builderToolbar.save'),
-  subtitle: t('builderToolbar.saveDescription'),
-  icon: 'icon-[lucide--cloud-upload]'
+const defaultViewStep: BuilderToolbarStep<'setDefaultView'> = {
+  id: 'setDefaultView',
+  title: t('builderToolbar.defaultView'),
+  subtitle: t('builderToolbar.defaultViewDescription'),
+  icon: 'icon-[lucide--eye]'
 }
 </script>

src/components/builder/DefaultViewDialogContent.vue

@@ -1,32 +1,16 @@
 <template>
-  <BuilderDialog @close="onClose">
+  <BuilderDialog @close="$emit('close')">
     <template #title>
-      {{ $t('builderToolbar.saveAs') }}
+      {{ $t('builderToolbar.defaultViewTitle') }}
     </template>
 
-    <!-- Filename -->
-    <div class="flex flex-col gap-2">
-      <label :for="inputId" class="text-sm text-muted-foreground">
-        {{ $t('builderToolbar.filename') }}
-      </label>
-      <input
-        :id="inputId"
-        v-model="filename"
-        autofocus
-        type="text"
-        class="flex h-10 min-h-8 items-center self-stretch rounded-lg border-none bg-secondary-background pl-4 text-sm text-base-foreground focus:outline-none"
-        @keydown.enter="filename.trim() && onSave(filename.trim(), openAsApp)"
-      />
-    </div>
-
-    <!-- Save as type -->
     <div class="flex flex-col gap-2">
       <label class="text-sm text-muted-foreground">
-        {{ $t('builderToolbar.saveAsLabel') }}
+        {{ $t('builderToolbar.defaultViewLabel') }}
       </label>
       <div role="radiogroup" class="flex flex-col gap-2">
         <Button
-          v-for="option in saveTypeOptions"
+          v-for="option in viewTypeOptions"
           :key="option.value.toString()"
           role="radio"
           :aria-checked="openAsApp === option.value"
@@ -61,23 +45,18 @@
     </div>
 
     <template #footer>
-      <Button variant="muted-textonly" size="lg" @click="onClose">
+      <Button variant="muted-textonly" size="lg" @click="$emit('close')">
         {{ $t('g.cancel') }}
       </Button>
-      <Button
-        variant="secondary"
-        size="lg"
-        :disabled="!filename.trim()"
-        @click="onSave(filename.trim(), openAsApp)"
-      >
-        {{ $t('g.save') }}
+      <Button variant="secondary" size="lg" @click="$emit('apply', openAsApp)">
+        {{ $t('g.apply') }}
       </Button>
     </template>
   </BuilderDialog>
 </template>
 
 <script setup lang="ts">
-import { ref, useId } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -87,17 +66,18 @@ import BuilderDialog from './BuilderDialog.vue'
 
 const { t } = useI18n()
 
-const { defaultFilename, onSave, onClose } = defineProps<{
-  defaultFilename: string
-  onSave: (filename: string, openAsApp: boolean) => void
-  onClose: () => void
+const { initialOpenAsApp = true } = defineProps<{
+  initialOpenAsApp?: boolean
 }>()
 
-const inputId = useId()
-const filename = ref(defaultFilename)
-const openAsApp = ref(true)
+defineEmits<{
+  apply: [openAsApp: boolean]
+  close: []
+}>()
 
-const saveTypeOptions = [
+const openAsApp = ref(initialOpenAsApp)
+
+const viewTypeOptions = [
   {
     value: true,
     icon: 'icon-[lucide--app-window]',

src/components/builder/useAppSetDefaultView.test.ts

@@ -0,0 +1,146 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockDialogService = vi.hoisted(() => ({
+  showLayoutDialog: vi.fn()
+}))
+
+const mockDialogStore = vi.hoisted(() => ({
+  closeDialog: vi.fn(),
+  isDialogOpen: vi.fn<(key: string) => boolean>().mockReturnValue(false)
+}))
+
+const mockWorkflowStore = vi.hoisted(() => ({
+  activeWorkflow: null as { initialMode?: string | null } | null
+}))
+
+const mockApp = vi.hoisted(() => ({
+  rootGraph: { extra: {} as Record<string, unknown> }
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => mockDialogService
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => mockDialogStore
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => mockWorkflowStore
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: mockApp
+}))
+
+vi.mock('./DefaultViewDialogContent.vue', () => ({
+  default: { name: 'MockDefaultViewDialogContent' }
+}))
+
+import { useAppSetDefaultView } from './useAppSetDefaultView'
+
+describe('useAppSetDefaultView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkflowStore.activeWorkflow = null
+    mockApp.rootGraph.extra = {}
+  })
+
+  describe('settingView', () => {
+    it('reflects dialogStore.isDialogOpen', () => {
+      mockDialogStore.isDialogOpen.mockReturnValue(true)
+      const { settingView } = useAppSetDefaultView()
+      expect(settingView.value).toBe(true)
+    })
+  })
+
+  describe('showDialog', () => {
+    it('opens dialog via dialogService', () => {
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledOnce()
+    })
+
+    it('passes initialOpenAsApp true when initialMode is not graph', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: 'app' }
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      expect(call.props.initialOpenAsApp).toBe(true)
+    })
+
+    it('passes initialOpenAsApp false when initialMode is graph', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: 'graph' }
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      expect(call.props.initialOpenAsApp).toBe(false)
+    })
+
+    it('passes initialOpenAsApp true when no active workflow', () => {
+      mockWorkflowStore.activeWorkflow = null
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      expect(call.props.initialOpenAsApp).toBe(true)
+    })
+  })
+
+  describe('handleApply', () => {
+    it('sets initialMode to app when openAsApp is true', () => {
+      const workflow = { initialMode: null as string | null }
+      mockWorkflowStore.activeWorkflow = workflow
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(true)
+
+      expect(workflow.initialMode).toBe('app')
+    })
+
+    it('sets initialMode to graph when openAsApp is false', () => {
+      const workflow = { initialMode: null as string | null }
+      mockWorkflowStore.activeWorkflow = workflow
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(false)
+
+      expect(workflow.initialMode).toBe('graph')
+    })
+
+    it('sets linearMode on rootGraph.extra', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(true)
+
+      expect(mockApp.rootGraph.extra.linearMode).toBe(true)
+    })
+
+    it('closes dialog after applying', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(true)
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'builder-default-view'
+      })
+    })
+  })
+})

src/components/builder/useAppSetDefaultView.ts

@@ -0,0 +1,47 @@
+import { computed } from 'vue'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import DefaultViewDialogContent from './DefaultViewDialogContent.vue'
+
+const DIALOG_KEY = 'builder-default-view'
+
+export function useAppSetDefaultView() {
+  const workflowStore = useWorkflowStore()
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  const settingView = computed(() => dialogStore.isDialogOpen(DIALOG_KEY))
+
+  function showDialog() {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: DefaultViewDialogContent,
+      props: {
+        initialOpenAsApp: workflowStore.activeWorkflow?.initialMode !== 'graph',
+        onApply: handleApply,
+        onClose: closeDialog
+      }
+    })
+  }
+
+  function handleApply(openAsApp: boolean) {
+    const workflow = workflowStore.activeWorkflow
+    if (!workflow) return
+
+    workflow.initialMode = openAsApp ? 'app' : 'graph'
+    const extra = (app.rootGraph.extra ??= {})
+    extra.linearMode = openAsApp
+    workflow.changeTracker?.checkState()
+    closeDialog()
+  }
+
+  function closeDialog() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  return { settingView, showDialog }
+}

src/components/builder/useBuilderSave.ts

@@ -1,134 +0,0 @@
-import { ref } from 'vue'
-
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useDialogService } from '@/services/dialogService'
-import { useAppMode } from '@/composables/useAppMode'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
-import BuilderSaveSuccessDialogContent from './BuilderSaveSuccessDialogContent.vue'
-import { whenever } from '@vueuse/core'
-
-const SAVE_DIALOG_KEY = 'builder-save'
-const SUCCESS_DIALOG_KEY = 'builder-save-success'
-
-export function useBuilderSave() {
-  const { setMode } = useAppMode()
-  const { toastErrorHandler } = useErrorHandling()
-  const workflowStore = useWorkflowStore()
-  const workflowService = useWorkflowService()
-  const dialogService = useDialogService()
-  const appModeStore = useAppModeStore()
-  const dialogStore = useDialogStore()
-
-  const saving = ref(false)
-
-  whenever(saving, onBuilderSave)
-
-  function setSaving(value: boolean) {
-    saving.value = value
-  }
-
-  async function onBuilderSave() {
-    const workflow = workflowStore.activeWorkflow
-    if (!workflow) {
-      resetSaving()
-      return
-    }
-
-    if (!workflow.isTemporary && workflow.initialMode != null) {
-      // Re-save with the previously chosen mode — no dialog needed.
-      try {
-        appModeStore.flushSelections()
-        await workflowService.saveWorkflow(workflow)
-        showSuccessDialog(workflow.filename, workflow.initialMode === 'app')
-      } catch (e) {
-        toastErrorHandler(e)
-        resetSaving()
-      }
-      return
-    }
-
-    showSaveDialog(workflow.filename)
-  }
-
-  function showSaveDialog(defaultFilename: string) {
-    dialogService.showLayoutDialog({
-      key: SAVE_DIALOG_KEY,
-      component: BuilderSaveDialogContent,
-      props: {
-        defaultFilename,
-        onSave: handleSave,
-        onClose: handleCancelSave
-      },
-      dialogComponentProps: {
-        onClose: resetSaving
-      }
-    })
-  }
-
-  function handleCancelSave() {
-    closeSaveDialog()
-    resetSaving()
-  }
-
-  async function handleSave(filename: string, openAsApp: boolean) {
-    try {
-      const workflow = workflowStore.activeWorkflow
-      if (!workflow) return
-
-      appModeStore.flushSelections()
-      const mode = openAsApp ? 'app' : 'graph'
-      const saved = await workflowService.saveWorkflowAs(workflow, {
-        filename,
-        initialMode: mode
-      })
-
-      if (!saved) return
-
-      closeSaveDialog()
-      showSuccessDialog(filename, openAsApp)
-    } catch (e) {
-      toastErrorHandler(e)
-      closeSaveDialog()
-      resetSaving()
-    }
-  }
-
-  function showSuccessDialog(workflowName: string, savedAsApp: boolean) {
-    dialogService.showLayoutDialog({
-      key: SUCCESS_DIALOG_KEY,
-      component: BuilderSaveSuccessDialogContent,
-      props: {
-        workflowName,
-        savedAsApp,
-        onViewApp: () => {
-          setMode('app')
-          closeSuccessDialog()
-        },
-        onClose: closeSuccessDialog
-      },
-      dialogComponentProps: {
-        onClose: resetSaving
-      }
-    })
-  }
-
-  function closeSaveDialog() {
-    dialogStore.closeDialog({ key: SAVE_DIALOG_KEY })
-  }
-
-  function closeSuccessDialog() {
-    dialogStore.closeDialog({ key: SUCCESS_DIALOG_KEY })
-    resetSaving()
-  }
-
-  function resetSaving() {
-    saving.value = false
-  }
-
-  return { saving, setSaving }
-}