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)

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -1,7 +1,11 @@
 import { describe, expect, it } from 'vitest'
 
 import {
+  appendWorkflowJsonExt,
+  ensureWorkflowSuffix,
+  getFilenameDetails,
   getMediaTypeFromFilename,
+  getPathDetails,
   highlightQuery,
   isPreviewableMediaType,
   truncateFilename
@@ -198,6 +202,147 @@ describe('formatUtil', () => {
     })
   })
 
+  describe('getFilenameDetails', () => {
+    it('splits simple filenames into name and suffix', () => {
+      expect(getFilenameDetails('file.txt')).toEqual({
+        filename: 'file',
+        suffix: 'txt'
+      })
+    })
+
+    it('handles filenames with multiple dots', () => {
+      expect(getFilenameDetails('my.file.name.png')).toEqual({
+        filename: 'my.file.name',
+        suffix: 'png'
+      })
+    })
+
+    it('handles filenames without extension', () => {
+      expect(getFilenameDetails('README')).toEqual({
+        filename: 'README',
+        suffix: null
+      })
+    })
+
+    it('recognises .app.json as a compound extension', () => {
+      expect(getFilenameDetails('workflow.app.json')).toEqual({
+        filename: 'workflow',
+        suffix: 'app.json'
+      })
+    })
+
+    it('recognises .app.json case-insensitively', () => {
+      expect(getFilenameDetails('Workflow.APP.JSON')).toEqual({
+        filename: 'Workflow',
+        suffix: 'app.json'
+      })
+    })
+
+    it('handles regular .json files normally', () => {
+      expect(getFilenameDetails('workflow.json')).toEqual({
+        filename: 'workflow',
+        suffix: 'json'
+      })
+    })
+
+    it('treats bare .app.json as a dotfile without basename', () => {
+      expect(getFilenameDetails('.app.json')).toEqual({
+        filename: '.app',
+        suffix: 'json'
+      })
+    })
+  })
+
+  describe('getPathDetails', () => {
+    it('splits a path with .app.json extension', () => {
+      const result = getPathDetails('workflows/test.app.json')
+      expect(result).toEqual({
+        directory: 'workflows',
+        fullFilename: 'test.app.json',
+        filename: 'test',
+        suffix: 'app.json'
+      })
+    })
+
+    it('splits a path with .json extension', () => {
+      const result = getPathDetails('workflows/test.json')
+      expect(result).toEqual({
+        directory: 'workflows',
+        fullFilename: 'test.json',
+        filename: 'test',
+        suffix: 'json'
+      })
+    })
+  })
+
+  describe('appendWorkflowJsonExt', () => {
+    it('appends .app.json when isApp is true', () => {
+      expect(appendWorkflowJsonExt('test', true)).toBe('test.app.json')
+    })
+
+    it('appends .json when isApp is false', () => {
+      expect(appendWorkflowJsonExt('test', false)).toBe('test.json')
+    })
+
+    it('replaces .json with .app.json when isApp is true', () => {
+      expect(appendWorkflowJsonExt('test.json', true)).toBe('test.app.json')
+    })
+
+    it('replaces .app.json with .json when isApp is false', () => {
+      expect(appendWorkflowJsonExt('test.app.json', false)).toBe('test.json')
+    })
+
+    it('leaves .app.json unchanged when isApp is true', () => {
+      expect(appendWorkflowJsonExt('test.app.json', true)).toBe('test.app.json')
+    })
+
+    it('leaves .json unchanged when isApp is false', () => {
+      expect(appendWorkflowJsonExt('test.json', false)).toBe('test.json')
+    })
+
+    it('handles case-insensitive extensions', () => {
+      expect(appendWorkflowJsonExt('test.JSON', true)).toBe('test.app.json')
+      expect(appendWorkflowJsonExt('test.APP.JSON', false)).toBe('test.json')
+    })
+  })
+
+  describe('ensureWorkflowSuffix', () => {
+    it('appends suffix when missing', () => {
+      expect(ensureWorkflowSuffix('file', 'json')).toBe('file.json')
+    })
+
+    it('does not double-append when suffix already present', () => {
+      expect(ensureWorkflowSuffix('file.json', 'json')).toBe('file.json')
+    })
+
+    it('appends compound suffix when missing', () => {
+      expect(ensureWorkflowSuffix('file', 'app.json')).toBe('file.app.json')
+    })
+
+    it('does not double-append compound suffix', () => {
+      expect(ensureWorkflowSuffix('file.app.json', 'app.json')).toBe(
+        'file.app.json'
+      )
+    })
+
+    it('replaces .json with .app.json when suffix is app.json', () => {
+      expect(ensureWorkflowSuffix('file.json', 'app.json')).toBe(
+        'file.app.json'
+      )
+    })
+
+    it('replaces .app.json with .json when suffix is json', () => {
+      expect(ensureWorkflowSuffix('file.app.json', 'json')).toBe('file.json')
+    })
+
+    it('handles case-insensitive extension detection', () => {
+      expect(ensureWorkflowSuffix('file.JSON', 'json')).toBe('file.json')
+      expect(ensureWorkflowSuffix('file.APP.JSON', 'app.json')).toBe(
+        'file.app.json'
+      )
+    })
+  })
+
   describe('isPreviewableMediaType', () => {
     it('returns true for image/video/audio/3D', () => {
       expect(isPreviewableMediaType('image')).toBe(true)

packages/shared-frontend-utils/src/formatUtil.ts

@@ -26,13 +26,44 @@ export function formatCamelCase(str: string): string {
   return processedWords.join(' ')
 }
 
+// Metadata cannot be associated with workflows, so extension encodes the mode.
+const JSON_SUFFIX = 'json'
+const APP_JSON_SUFFIX = `app.${JSON_SUFFIX}`
+const JSON_EXT = `.${JSON_SUFFIX}`
+const APP_JSON_EXT = `.${APP_JSON_SUFFIX}`
+
 export function appendJsonExt(path: string) {
-  if (!path.toLowerCase().endsWith('.json')) {
-    path += '.json'
+  if (!path.toLowerCase().endsWith(JSON_EXT)) {
+    path += JSON_EXT
   }
   return path
 }
 
+export type WorkflowSuffix = typeof JSON_SUFFIX | typeof APP_JSON_SUFFIX
+
+export function getWorkflowSuffix(
+  suffix: string | null | undefined
+): WorkflowSuffix {
+  return suffix === APP_JSON_SUFFIX ? APP_JSON_SUFFIX : JSON_SUFFIX
+}
+
+export function appendWorkflowJsonExt(path: string, isApp: boolean): string {
+  return ensureWorkflowSuffix(path, isApp ? APP_JSON_SUFFIX : JSON_SUFFIX)
+}
+
+export function ensureWorkflowSuffix(
+  name: string,
+  suffix: WorkflowSuffix
+): string {
+  const lower = name.toLowerCase()
+  if (lower.endsWith(APP_JSON_EXT)) {
+    name = name.slice(0, -APP_JSON_EXT.length)
+  } else if (lower.endsWith(JSON_EXT)) {
+    name = name.slice(0, -JSON_EXT.length)
+  }
+  return name + '.' + suffix
+}
+
 export function highlightQuery(
   text: string,
   query: string,
@@ -96,19 +127,27 @@ export function formatCommitHash(value: string): string {
 
 /**
  * Returns various filename components.
+ * Recognises compound extensions like `.app.json`.
  * Example:
- * - fullFilename: 'file.txt'
- * - filename: 'file'
- * - suffix: 'txt'
+ * - fullFilename: 'file.txt'       → { filename: 'file',  suffix: 'txt' }
+ * - fullFilename: 'file.app.json'  → { filename: 'file',  suffix: 'app.json' }
  */
 export function getFilenameDetails(fullFilename: string) {
-  if (fullFilename.includes('.')) {
+  const lower = fullFilename.toLowerCase()
+  if (
+    lower.endsWith(APP_JSON_EXT) &&
+    fullFilename.length > APP_JSON_EXT.length
+  ) {
     return {
-      filename: fullFilename.split('.').slice(0, -1).join('.'),
-      suffix: fullFilename.split('.').pop() ?? null
+      filename: fullFilename.slice(0, -APP_JSON_EXT.length),
+      suffix: APP_JSON_SUFFIX
     }
-  } else {
-    return { filename: fullFilename, suffix: null }
+  }
+  const dotIndex = fullFilename.lastIndexOf('.')
+  if (dotIndex <= 0) return { filename: fullFilename, suffix: null }
+  return {
+    filename: fullFilename.slice(0, dotIndex),
+    suffix: fullFilename.slice(dotIndex + 1)
   }
 }