feat: App builder confirmation dialog after setting default view mode (#9374)

## Summary

Adds an additional dialog after setting the default view of the workflow
to let users pick their next step

## Screenshots (if applicable)

<img width="479" height="332" alt="image"
src="https://github.com/user-attachments/assets/1ea40b10-d7d3-49ff-9ea2-27b9e907c923"
/>

<img width="478" height="343" alt="image"
src="https://github.com/user-attachments/assets/21674998-5ce2-496d-97e6-ef8f2f2d7dd7"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9374-feat-App-builder-confirmation-dialog-after-setting-default-view-mode-3196d73d36508192a45ee8ba0a7f74a6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/components/builder/useAppSetDefaultView.test.ts

@@ -10,13 +10,18 @@ const mockDialogStore = vi.hoisted(() => ({
 }))
 
 const mockWorkflowStore = vi.hoisted(() => ({
-  activeWorkflow: null as { initialMode?: string | null } | null
+  activeWorkflow: null as {
+    initialMode?: string | null
+    changeTracker?: { checkState: () => void }
+  } | null
 }))
 
 const mockApp = vi.hoisted(() => ({
   rootGraph: { extra: {} as Record<string, unknown> }
 }))
 
+const mockSetMode = vi.hoisted(() => vi.fn())
+
 vi.mock('@/services/dialogService', () => ({
   useDialogService: () => mockDialogService
 }))
@@ -33,10 +38,18 @@ vi.mock('@/scripts/app', () => ({
   app: mockApp
 }))
 
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ setMode: mockSetMode })
+}))
+
 vi.mock('./DefaultViewDialogContent.vue', () => ({
   default: { name: 'MockDefaultViewDialogContent' }
 }))
 
+vi.mock('./BuilderDefaultModeAppliedDialogContent.vue', () => ({
+  default: { name: 'MockBuilderDefaultModeAppliedDialogContent' }
+}))
+
 import { useAppSetDefaultView } from './useAppSetDefaultView'
 
 describe('useAppSetDefaultView', () => {
@@ -142,5 +155,68 @@ describe('useAppSetDefaultView', () => {
         key: 'builder-default-view'
       })
     })
+
+    it('shows confirmation dialog after applying', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(true)
+
+      expect(mockDialogService.showLayoutDialog).toHaveBeenCalledTimes(2)
+      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
+      expect(confirmCall.key).toBe('builder-default-view-applied')
+      expect(confirmCall.props.appliedAsApp).toBe(true)
+    })
+
+    it('passes appliedAsApp false to confirmation dialog when graph', () => {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const call = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      call.props.onApply(false)
+
+      const confirmCall = mockDialogService.showLayoutDialog.mock.calls[1][0]
+      expect(confirmCall.props.appliedAsApp).toBe(false)
+    })
+  })
+
+  describe('applied dialog', () => {
+    function applyAndGetConfirmDialog(openAsApp: boolean) {
+      mockWorkflowStore.activeWorkflow = { initialMode: null }
+
+      const { showDialog } = useAppSetDefaultView()
+      showDialog()
+
+      const applyCall = mockDialogService.showLayoutDialog.mock.calls[0][0]
+      applyCall.props.onApply(openAsApp)
+
+      return mockDialogService.showLayoutDialog.mock.calls[1][0]
+    }
+
+    it('onViewApp sets mode to app and closes dialog', () => {
+      const confirmCall = applyAndGetConfirmDialog(true)
+      confirmCall.props.onViewApp()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'builder-default-view-applied'
+      })
+      expect(mockSetMode).toHaveBeenCalledWith('app')
+    })
+
+    it('onClose closes confirmation dialog', () => {
+      const confirmCall = applyAndGetConfirmDialog(true)
+
+      mockDialogStore.closeDialog.mockClear()
+      confirmCall.props.onClose()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'builder-default-view-applied'
+      })
+    })
   })
 })