merge: resolve conflict in litegraphUtil.test.ts keeping both sides

Amp-Thread-ID: https://ampcode.com/threads/T-019cbbd4-2ada-7557-8a34-23a174f34f9a
Co-authored-by: Amp <amp@ampcode.com>

.github/workflows/ci-perf-report.yaml

@@ -45,7 +45,7 @@ jobs:
       - name: Run performance tests
         id: perf
         continue-on-error: true
-        run: pnpm exec playwright test --project=performance --workers=1
+        run: pnpm exec playwright test --project=performance --workers=1 --repeat-each=3
 
       - name: Upload perf metrics
         if: always()
@@ -61,6 +61,7 @@ jobs:
     if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     permissions:
+      actions: read
       contents: read
       pull-requests: write
 
@@ -90,6 +91,31 @@ jobs:
           path: temp/perf-baseline/
           if_no_artifact_found: warn
 
+      - name: Download historical perf baselines
+        continue-on-error: true
+        run: |
+          RUNS=$(gh api \
+            "/repos/${{ github.repository }}/actions/workflows/ci-perf-report.yaml/runs?branch=${{ github.event.pull_request.base.ref }}&event=push&status=success&per_page=5" \
+            --jq '.workflow_runs[].id' || true)
+
+          if [ -z "$RUNS" ]; then
+            echo "No historical runs available"
+            exit 0
+          fi
+
+          mkdir -p temp/perf-history
+          INDEX=0
+          for RUN_ID in $RUNS; do
+            DIR="temp/perf-history/$INDEX"
+            mkdir -p "$DIR"
+            gh run download "$RUN_ID" -n perf-metrics -D "$DIR/" 2>/dev/null || true
+            INDEX=$((INDEX + 1))
+          done
+
+          echo "Downloaded $(ls temp/perf-history/*/perf-metrics.json 2>/dev/null | wc -l) historical baselines"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Generate perf report
         run: npx --yes tsx scripts/perf-report.ts > perf-report.md
 

.oxlintrc.json

@@ -35,7 +35,7 @@
       }
     ],
     "no-control-regex": "off",
-    "no-eval": "off",
+    "no-eval": "error",
     "no-redeclare": "error",
     "no-restricted-imports": [
       "error",

browser_tests/tests/performance.spec.ts

@@ -67,4 +67,66 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     recordMeasurement(m)
     console.log(`Clipping: ${m.layouts} forced layouts`)
   })
+
+  test('subgraph idle style recalculations', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
+    await comfyPage.perf.startMeasuring()
+
+    for (let i = 0; i < 120; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('subgraph-idle')
+    recordMeasurement(m)
+    console.log(
+      `Subgraph idle: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
+    )
+  })
+
+  test('subgraph mouse interaction style recalculations', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
+    await comfyPage.perf.startMeasuring()
+
+    const canvas = comfyPage.canvas
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    for (let i = 0; i < 100; i++) {
+      await comfyPage.page.mouse.move(
+        box.x + (box.width * i) / 100,
+        box.y + (box.height * (i % 3)) / 3
+      )
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('subgraph-mouse-sweep')
+    recordMeasurement(m)
+    console.log(
+      `Subgraph mouse sweep: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
+    )
+  })
+
+  test('subgraph DOM widget clipping during node selection', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
+    await comfyPage.perf.startMeasuring()
+
+    const canvas = comfyPage.canvas
+    const box = await canvas.boundingBox()
+    if (!box) throw new Error('Canvas bounding box not available')
+
+    for (let i = 0; i < 20; i++) {
+      await comfyPage.page.mouse.click(
+        box.x + box.width / 3 + (i % 5) * 30,
+        box.y + box.height / 3 + (i % 4) * 30
+      )
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('subgraph-dom-widget-clipping')
+    recordMeasurement(m)
+    console.log(`Subgraph clipping: ${m.layouts} forced layouts`)
+  })
 })

eslint.config.ts

@@ -1,6 +1,7 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
+import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
@@ -111,6 +112,28 @@ export default defineConfig([
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
+  // Tailwind CSS v4 linting (class ordering, duplicates, conflicts, etc.)
+  betterTailwindcss.configs.recommended,
+  {
+    settings: {
+      'better-tailwindcss': {
+        entryPoint: 'packages/design-system/src/css/style.css'
+      }
+    },
+    rules: {
+      // Off: requires whitelisting non-Tailwind classes (PrimeIcons, custom CSS)
+      'better-tailwindcss/no-unknown-classes': 'off',
+      // Off: may conflict with oxfmt formatting
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+      // Off: large batch change, enable and apply with `eslint --fix`
+      'better-tailwindcss/enforce-consistent-class-order': 'off',
+      // Off: large batch change (v3→v4 renames like rounded→rounded-sm),
+      // enable and apply with `eslint --fix` in a follow-up PR
+      'better-tailwindcss/enforce-canonical-classes': 'off',
+      // Off: large batch change, enable and apply with `eslint --fix`
+      'better-tailwindcss/no-deprecated-classes': 'off'
+    }
+  },
   // Disables ESLint rules that conflict with formatters
   eslintConfigPrettier,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.10",
+  "version": "1.41.12",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -146,6 +146,7 @@
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
     "eslint-import-resolver-typescript": "catalog:",
+    "eslint-plugin-better-tailwindcss": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-storybook": "catalog:",

packages/design-system/src/css/style.css

@@ -199,7 +199,7 @@
       #3e1ffc 65.17%,
       #009dff 103.86%
     ),
-    var(--color-button-surface, #2d2e32);
+    linear-gradient(var(--color-button-surface, #2d2e32));
 
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
@@ -358,26 +358,6 @@
   --button-active-surface: var(--color-charcoal-600);
   --button-icon: var(--color-smoke-800);
 
-  --subscription-button-gradient:
-    linear-gradient(
-      315deg,
-      rgb(105 230 255 / 0.15) 0%,
-      rgb(99 73 233 / 0.5) 100%
-    ),
-    radial-gradient(
-      70.71% 70.71% at 50% 50%,
-      rgb(62 99 222 / 0.15) 0.01%,
-      rgb(66 0 123 / 0.5) 100%
-    ),
-    linear-gradient(
-      92deg,
-      #d000ff 0.38%,
-      #b009fe 37.07%,
-      #3e1ffc 65.17%,
-      #009dff 103.86%
-    ),
-    var(--color-button-surface, #2d2e32);
-
   --dialog-surface: var(--color-neutral-700);
 
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
@@ -490,7 +470,6 @@
   --color-button-icon: var(--button-icon);
   --color-button-surface: var(--button-surface);
   --color-button-surface-contrast: var(--button-surface-contrast);
-  --color-subscription-button-gradient: var(--subscription-button-gradient);
 
   --color-modal-card-background: var(--modal-card-background);
   --color-modal-card-background-hovered: var(--modal-card-background-hovered);
@@ -634,10 +613,6 @@
   }
 }
 
-@utility bg-subscription-gradient {
-  background: var(--color-subscription-button-gradient);
-}
-
 @utility highlight {
   background-color: color-mix(in srgb, currentColor 20%, transparent);
   font-weight: 700;

packages/design-system/src/icons/send.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5693 3L9.67677 14.099C9.59169 14.292 9.33927 14.3393 9.19012 14.1901L5.5 10.5M14.5693 3L1.65457 8.23468C1.40927 8.33411 1.40355 8.67936 1.64543 8.78686L5.5 10.5M14.5693 3L5.5 10.5M5.5 10.5C5.66712 10.5669 5.37259 10.3728 5.5 10.5ZM5.5 10.5C5.62741 10.6272 5.43279 10.333 5.5 10.5ZM5.5 10.5V13.5L7 12" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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)
   }
 }
 

pnpm-lock.yaml

@@ -180,6 +180,9 @@ catalogs:
     eslint-import-resolver-typescript:
       specifier: ^4.4.4
       version: 4.4.4
+    eslint-plugin-better-tailwindcss:
+      specifier: ^4.3.1
+      version: 4.3.1
     eslint-plugin-import-x:
       specifier: ^4.16.1
       version: 4.16.1
@@ -636,6 +639,9 @@ importers:
       eslint-import-resolver-typescript:
         specifier: 'catalog:'
         version: 4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)))(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-better-tailwindcss:
+        specifier: 'catalog:'
+        version: 4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.49.0(oxlint-tsgolint@0.14.2))(tailwindcss@4.2.0)(typescript@5.9.3)
       eslint-plugin-import-x:
         specifier: 'catalog:'
         version: 4.16.1(@typescript-eslint/utils@8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1))
@@ -1916,6 +1922,10 @@ packages:
     resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/css-tree@3.6.9':
+    resolution: {integrity: sha512-3D5/OHibNEGk+wKwNwMbz63NMf367EoR4mVNNpxddCHKEb2Nez7z62J2U6YjtErSsZDoY0CsccmoUpdEbkogNA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   '@eslint/eslintrc@3.3.3':
     resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5314,6 +5324,19 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
+  eslint-plugin-better-tailwindcss@4.3.1:
+    resolution: {integrity: sha512-b6xM31GukKz0WlgMD0tQdY/rLjf/9mWIk8EcA45ngOKJPPQf1C482xZtBlT357jyunQE2mOk4NlPcL4i9Pr85A==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
   eslint-plugin-import-x@4.16.1:
     resolution: {integrity: sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -6558,6 +6581,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdn-data@2.23.0:
+    resolution: {integrity: sha512-786vq1+4079JSeu2XdcDjrhi/Ry7BWtjDl9WtGPWLiIHb2T66GvIVflZTBoSNZ5JqTtJGYEVMuFA/lbQlMOyDQ==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -7780,6 +7806,10 @@ packages:
     resolution: {integrity: sha512-2SG1TnJGjMkD4+gblONMGYSrwAzYi+ymOitD+Jb/iMYm57nH20PlkVeMQRah3yDMKEa0QQYUF/QPWpdW7C6zNg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  synckit@0.11.12:
+    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
@@ -7788,6 +7818,10 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
+  tailwind-csstree@0.1.4:
+    resolution: {integrity: sha512-FzD187HuFIZEyeR7Xy6sJbJll2d4SybS90satC8SKIuaNRC05CxMvdzN7BUsfDQffcnabckRM5OIcfArjsZ0mg==}
+    engines: {node: '>=18.18'}
+
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
@@ -7918,6 +7952,10 @@ packages:
   ts-map@1.0.3:
     resolution: {integrity: sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==}
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -9708,6 +9746,11 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/css-tree@3.6.9':
+    dependencies:
+      mdn-data: 2.23.0
+      source-map-js: 1.2.1
+
   '@eslint/eslintrc@3.3.3':
     dependencies:
       ajv: 6.14.0
@@ -13457,6 +13500,23 @@ snapshots:
       - supports-color
     optional: true
 
+  eslint-plugin-better-tailwindcss@4.3.1(eslint@9.39.1(jiti@2.6.1))(oxlint@1.49.0(oxlint-tsgolint@0.14.2))(tailwindcss@4.2.0)(typescript@5.9.3):
+    dependencies:
+      '@eslint/css-tree': 3.6.9
+      '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      synckit: 0.11.12
+      tailwind-csstree: 0.1.4
+      tailwindcss: 4.2.0
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.2.0(typescript@5.9.3)
+    optionalDependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+      oxlint: 1.49.0(oxlint-tsgolint@0.14.2)
+    transitivePeerDependencies:
+      - typescript
+
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.56.0
@@ -14893,6 +14953,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  mdn-data@2.23.0: {}
+
   mdurl@2.0.0: {}
 
   media-encoder-host-broker@8.0.19:
@@ -16571,6 +16633,10 @@ snapshots:
       '@pkgr/core': 0.2.9
       tslib: 2.8.1
 
+  synckit@0.11.12:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
   table@6.9.0:
     dependencies:
       ajv: 8.18.0
@@ -16581,6 +16647,8 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
+  tailwind-csstree@0.1.4: {}
+
   tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.2.0):
@@ -16691,6 +16759,13 @@ snapshots:
 
   ts-map@1.0.3: {}
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.19.0
+      tapable: 2.3.0
+      tsconfig-paths: 4.2.0
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29

pnpm-workspace.yaml

@@ -61,6 +61,7 @@ catalog:
   eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
   eslint-import-resolver-typescript: ^4.4.4
+  eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
   eslint-plugin-storybook: ^10.2.10

scripts/perf-report.ts

@@ -1,4 +1,14 @@
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync, readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+import type { MetricStats } from './perf-stats'
+import {
+  classifyChange,
+  computeStats,
+  formatSignificance,
+  isNoteworthy,
+  zScore
+} from './perf-stats'
 
 interface PerfMeasurement {
   name: string
@@ -20,12 +30,76 @@ interface PerfReport {
 
 const CURRENT_PATH = 'test-results/perf-metrics.json'
 const BASELINE_PATH = 'temp/perf-baseline/perf-metrics.json'
+const HISTORY_DIR = 'temp/perf-history'
 
-function formatDelta(pct: number): string {
-  if (pct >= 20) return `+${pct.toFixed(0)}% 🔴`
-  if (pct >= 10) return `+${pct.toFixed(0)}% 🟠`
-  if (pct > -10) return `${pct >= 0 ? '+' : ''}${pct.toFixed(0)}% ⚪`
-  return `${pct.toFixed(0)}% 🟢`
+type MetricKey = 'styleRecalcs' | 'layouts' | 'taskDurationMs'
+const REPORTED_METRICS: { key: MetricKey; label: string; unit: string }[] = [
+  { key: 'styleRecalcs', label: 'style recalcs', unit: '' },
+  { key: 'layouts', label: 'layouts', unit: '' },
+  { key: 'taskDurationMs', label: 'task duration', unit: 'ms' }
+]
+
+function groupByName(
+  measurements: PerfMeasurement[]
+): Map<string, PerfMeasurement[]> {
+  const map = new Map<string, PerfMeasurement[]>()
+  for (const m of measurements) {
+    const list = map.get(m.name) ?? []
+    list.push(m)
+    map.set(m.name, list)
+  }
+  return map
+}
+
+function loadHistoricalReports(): PerfReport[] {
+  if (!existsSync(HISTORY_DIR)) return []
+  const reports: PerfReport[] = []
+  for (const dir of readdirSync(HISTORY_DIR)) {
+    const filePath = join(HISTORY_DIR, dir, 'perf-metrics.json')
+    if (!existsSync(filePath)) continue
+    try {
+      reports.push(JSON.parse(readFileSync(filePath, 'utf-8')) as PerfReport)
+    } catch {
+      console.warn(`Skipping malformed perf history: ${filePath}`)
+    }
+  }
+  return reports
+}
+
+function getHistoricalStats(
+  reports: PerfReport[],
+  testName: string,
+  metric: MetricKey
+): MetricStats {
+  const values: number[] = []
+  for (const r of reports) {
+    const group = groupByName(r.measurements)
+    const samples = group.get(testName)
+    if (samples) {
+      const mean =
+        samples.reduce((sum, s) => sum + s[metric], 0) / samples.length
+      values.push(mean)
+    }
+  }
+  return computeStats(values)
+}
+
+function computeCV(stats: MetricStats): number {
+  return stats.mean > 0 ? (stats.stddev / stats.mean) * 100 : 0
+}
+
+function formatValue(value: number, unit: string): string {
+  return unit === 'ms' ? `${value.toFixed(0)}ms` : `${value.toFixed(0)}`
+}
+
+function formatDelta(pct: number | null): string {
+  if (pct === null) return '—'
+  const sign = pct >= 0 ? '+' : ''
+  return `${sign}${pct.toFixed(0)}%`
+}
+
+function meanMetric(samples: PerfMeasurement[], key: MetricKey): number {
+  return samples.reduce((sum, s) => sum + s[key], 0) / samples.length
 }
 
 function formatBytes(bytes: number): string {
@@ -34,18 +108,167 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-function calcDelta(
-  baseline: number,
-  current: number
-): { pct: number; isNew: boolean } {
-  if (baseline > 0) {
-    return { pct: ((current - baseline) / baseline) * 100, isNew: false }
+function renderFullReport(
+  prGroups: Map<string, PerfMeasurement[]>,
+  baseline: PerfReport,
+  historical: PerfReport[]
+): string[] {
+  const lines: string[] = []
+  const baselineGroups = groupByName(baseline.measurements)
+  const tableHeader = [
+    '| Metric | Baseline | PR (n=3) | Δ | Sig |',
+    '|--------|----------|----------|---|-----|'
+  ]
+
+  const flaggedRows: string[] = []
+  const allRows: string[] = []
+
+  for (const [testName, prSamples] of prGroups) {
+    const baseSamples = baselineGroups.get(testName)
+
+    for (const { key, label, unit } of REPORTED_METRICS) {
+      const prValues = prSamples.map((s) => s[key])
+      const prMean = prValues.reduce((a, b) => a + b, 0) / prValues.length
+      const histStats = getHistoricalStats(historical, testName, key)
+      const cv = computeCV(histStats)
+
+      if (!baseSamples?.length) {
+        allRows.push(
+          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new | — |`
+        )
+        continue
+      }
+
+      const baseVal = meanMetric(baseSamples, key)
+      const deltaPct =
+        baseVal === 0
+          ? prMean === 0
+            ? 0
+            : null
+          : ((prMean - baseVal) / baseVal) * 100
+      const z = zScore(prMean, histStats)
+      const sig = classifyChange(z, cv)
+
+      const row = `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prMean, unit)} | ${formatDelta(deltaPct)} | ${formatSignificance(sig, z)} |`
+      allRows.push(row)
+      if (isNoteworthy(sig)) {
+        flaggedRows.push(row)
+      }
+    }
   }
-  return current > 0 ? { pct: Infinity, isNew: true } : { pct: 0, isNew: false }
+
+  if (flaggedRows.length > 0) {
+    lines.push(
+      `⚠️ **${flaggedRows.length} regression${flaggedRows.length > 1 ? 's' : ''} detected**`,
+      '',
+      ...tableHeader,
+      ...flaggedRows,
+      ''
+    )
+  } else {
+    lines.push('No regressions detected.', '')
+  }
+
+  lines.push(
+    `<details><summary>All metrics</summary>`,
+    '',
+    ...tableHeader,
+    ...allRows,
+    '',
+    '</details>',
+    ''
+  )
+
+  lines.push(
+    `<details><summary>Historical variance (last ${historical.length} runs)</summary>`,
+    '',
+    '| Metric | μ | σ | CV |',
+    '|--------|---|---|-----|'
+  )
+  for (const [testName] of prGroups) {
+    for (const { key, label, unit } of REPORTED_METRICS) {
+      const stats = getHistoricalStats(historical, testName, key)
+      if (stats.n < 2) continue
+      const cv = computeCV(stats)
+      lines.push(
+        `| ${testName}: ${label} | ${formatValue(stats.mean, unit)} | ${formatValue(stats.stddev, unit)} | ${cv.toFixed(1)}% |`
+      )
+    }
+  }
+  lines.push('', '</details>')
+
+  return lines
 }
 
-function formatDeltaCell(delta: { pct: number; isNew: boolean }): string {
-  return delta.isNew ? 'new 🔴' : formatDelta(delta.pct)
+function renderColdStartReport(
+  prGroups: Map<string, PerfMeasurement[]>,
+  baseline: PerfReport,
+  historicalCount: number
+): string[] {
+  const lines: string[] = []
+  const baselineGroups = groupByName(baseline.measurements)
+  lines.push(
+    `> ℹ️ Collecting baseline variance data (${historicalCount}/5 runs). Significance will appear after 2 main branch runs.`,
+    '',
+    '| Metric | Baseline | PR | Δ |',
+    '|--------|----------|-----|---|'
+  )
+
+  for (const [testName, prSamples] of prGroups) {
+    const baseSamples = baselineGroups.get(testName)
+
+    for (const { key, label, unit } of REPORTED_METRICS) {
+      const prValues = prSamples.map((s) => s[key])
+      const prMean = prValues.reduce((a, b) => a + b, 0) / prValues.length
+
+      if (!baseSamples?.length) {
+        lines.push(
+          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new |`
+        )
+        continue
+      }
+
+      const baseVal = meanMetric(baseSamples, key)
+      const deltaPct =
+        baseVal === 0
+          ? prMean === 0
+            ? 0
+            : null
+          : ((prMean - baseVal) / baseVal) * 100
+      lines.push(
+        `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prMean, unit)} | ${formatDelta(deltaPct)} |`
+      )
+    }
+  }
+
+  return lines
+}
+
+function renderNoBaselineReport(
+  prGroups: Map<string, PerfMeasurement[]>
+): string[] {
+  const lines: string[] = []
+  lines.push(
+    'No baseline found — showing absolute values.\n',
+    '| Metric | Value |',
+    '|--------|-------|'
+  )
+  for (const [testName, prSamples] of prGroups) {
+    const prMean = (key: MetricKey) =>
+      prSamples.reduce((sum, s) => sum + s[key], 0) / prSamples.length
+
+    lines.push(
+      `| ${testName}: style recalcs | ${prMean('styleRecalcs').toFixed(0)} |`
+    )
+    lines.push(`| ${testName}: layouts | ${prMean('layouts').toFixed(0)} |`)
+    lines.push(
+      `| ${testName}: task duration | ${prMean('taskDurationMs').toFixed(0)}ms |`
+    )
+    const heapMean =
+      prSamples.reduce((sum, s) => sum + s.heapDeltaBytes, 0) / prSamples.length
+    lines.push(`| ${testName}: heap delta | ${formatBytes(heapMean)} |`)
+  }
+  return lines
 }
 
 function main() {
@@ -62,55 +285,18 @@ function main() {
     ? JSON.parse(readFileSync(BASELINE_PATH, 'utf-8'))
     : null
 
+  const historical = loadHistoricalReports()
+  const prGroups = groupByName(current.measurements)
+
   const lines: string[] = []
   lines.push('## ⚡ Performance Report\n')
 
-  if (baseline) {
-    lines.push(
-      '| Metric | Baseline | PR | Δ |',
-      '|--------|----------|-----|---|'
-    )
-
-    for (const m of current.measurements) {
-      const base = baseline.measurements.find((b) => b.name === m.name)
-      if (!base) {
-        lines.push(`| ${m.name}: style recalcs | — | ${m.styleRecalcs} | new |`)
-        lines.push(`| ${m.name}: layouts | — | ${m.layouts} | new |`)
-        lines.push(
-          `| ${m.name}: task duration | — | ${m.taskDurationMs.toFixed(0)}ms | new |`
-        )
-        continue
-      }
-
-      const recalcDelta = calcDelta(base.styleRecalcs, m.styleRecalcs)
-      lines.push(
-        `| ${m.name}: style recalcs | ${base.styleRecalcs} | ${m.styleRecalcs} | ${formatDeltaCell(recalcDelta)} |`
-      )
-
-      const layoutDelta = calcDelta(base.layouts, m.layouts)
-      lines.push(
-        `| ${m.name}: layouts | ${base.layouts} | ${m.layouts} | ${formatDeltaCell(layoutDelta)} |`
-      )
-
-      const taskDelta = calcDelta(base.taskDurationMs, m.taskDurationMs)
-      lines.push(
-        `| ${m.name}: task duration | ${base.taskDurationMs.toFixed(0)}ms | ${m.taskDurationMs.toFixed(0)}ms | ${formatDeltaCell(taskDelta)} |`
-      )
-    }
+  if (baseline && historical.length >= 2) {
+    lines.push(...renderFullReport(prGroups, baseline, historical))
+  } else if (baseline) {
+    lines.push(...renderColdStartReport(prGroups, baseline, historical.length))
   } else {
-    lines.push(
-      'No baseline found — showing absolute values.\n',
-      '| Metric | Value |',
-      '|--------|-------|'
-    )
-    for (const m of current.measurements) {
-      lines.push(`| ${m.name}: style recalcs | ${m.styleRecalcs} |`)
-      lines.push(`| ${m.name}: layouts | ${m.layouts} |`)
-      lines.push(
-        `| ${m.name}: task duration | ${m.taskDurationMs.toFixed(0)}ms |`
-      )
-      lines.push(`| ${m.name}: heap delta | ${formatBytes(m.heapDeltaBytes)} |`)
-    }
+    lines.push(...renderNoBaselineReport(prGroups))
   }
 
   lines.push('\n<details><summary>Raw data</summary>\n')

scripts/perf-stats.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  classifyChange,
+  computeStats,
+  formatSignificance,
+  isNoteworthy,
+  zScore
+} from './perf-stats'
+
+describe('computeStats', () => {
+  it('returns zeros for empty array', () => {
+    const stats = computeStats([])
+    expect(stats).toEqual({ mean: 0, stddev: 0, min: 0, max: 0, n: 0 })
+  })
+
+  it('returns value with zero stddev for single element', () => {
+    const stats = computeStats([42])
+    expect(stats).toEqual({ mean: 42, stddev: 0, min: 42, max: 42, n: 1 })
+  })
+
+  it('computes correct stats for known values', () => {
+    // Values: [2, 4, 4, 4, 5, 5, 7, 9]
+    // Mean = 5, sample variance ≈ 4.57, sample stddev ≈ 2.14
+    const stats = computeStats([2, 4, 4, 4, 5, 5, 7, 9])
+    expect(stats.mean).toBe(5)
+    expect(stats.stddev).toBeCloseTo(2.138, 2)
+    expect(stats.min).toBe(2)
+    expect(stats.max).toBe(9)
+    expect(stats.n).toBe(8)
+  })
+
+  it('uses sample stddev (n-1 denominator)', () => {
+    // [10, 20] → mean=15, variance=(25+25)/1=50, stddev≈7.07
+    const stats = computeStats([10, 20])
+    expect(stats.mean).toBe(15)
+    expect(stats.stddev).toBeCloseTo(7.071, 2)
+    expect(stats.n).toBe(2)
+  })
+
+  it('handles identical values', () => {
+    const stats = computeStats([5, 5, 5, 5])
+    expect(stats.mean).toBe(5)
+    expect(stats.stddev).toBe(0)
+  })
+})
+
+describe('zScore', () => {
+  it('returns null when stddev is 0', () => {
+    const stats = computeStats([5, 5, 5])
+    expect(zScore(10, stats)).toBeNull()
+  })
+
+  it('returns null when n < 2', () => {
+    const stats = computeStats([5])
+    expect(zScore(10, stats)).toBeNull()
+  })
+
+  it('computes correct z-score', () => {
+    const stats = { mean: 100, stddev: 10, min: 80, max: 120, n: 5 }
+    expect(zScore(120, stats)).toBe(2)
+    expect(zScore(80, stats)).toBe(-2)
+    expect(zScore(100, stats)).toBe(0)
+  })
+})
+
+describe('classifyChange', () => {
+  it('returns noisy when CV > 50%', () => {
+    expect(classifyChange(3, 60)).toBe('noisy')
+    expect(classifyChange(-3, 51)).toBe('noisy')
+  })
+
+  it('does not classify as noisy when CV is exactly 50%', () => {
+    expect(classifyChange(3, 50)).toBe('regression')
+    expect(classifyChange(-3, 50)).toBe('improvement')
+  })
+
+  it('returns neutral when z is null', () => {
+    expect(classifyChange(null, 10)).toBe('neutral')
+  })
+
+  it('returns regression when z > 2', () => {
+    expect(classifyChange(2.1, 10)).toBe('regression')
+    expect(classifyChange(5, 10)).toBe('regression')
+  })
+
+  it('returns improvement when z < -2', () => {
+    expect(classifyChange(-2.1, 10)).toBe('improvement')
+    expect(classifyChange(-5, 10)).toBe('improvement')
+  })
+
+  it('returns neutral when z is within [-2, 2]', () => {
+    expect(classifyChange(0, 10)).toBe('neutral')
+    expect(classifyChange(1.9, 10)).toBe('neutral')
+    expect(classifyChange(-1.9, 10)).toBe('neutral')
+    expect(classifyChange(2, 10)).toBe('neutral')
+    expect(classifyChange(-2, 10)).toBe('neutral')
+  })
+})
+
+describe('formatSignificance', () => {
+  it('formats regression with z-score and emoji', () => {
+    expect(formatSignificance('regression', 3.2)).toBe('⚠️ z=3.2')
+  })
+
+  it('formats improvement with z-score without emoji', () => {
+    expect(formatSignificance('improvement', -2.5)).toBe('z=-2.5')
+  })
+
+  it('formats noisy as descriptive text', () => {
+    expect(formatSignificance('noisy', null)).toBe('variance too high')
+  })
+
+  it('formats neutral with z-score without emoji', () => {
+    expect(formatSignificance('neutral', 0.5)).toBe('z=0.5')
+  })
+
+  it('formats neutral without z-score as dash', () => {
+    expect(formatSignificance('neutral', null)).toBe('—')
+  })
+})
+
+describe('isNoteworthy', () => {
+  it('returns true for regressions', () => {
+    expect(isNoteworthy('regression')).toBe(true)
+  })
+
+  it('returns false for non-regressions', () => {
+    expect(isNoteworthy('improvement')).toBe(false)
+    expect(isNoteworthy('neutral')).toBe(false)
+    expect(isNoteworthy('noisy')).toBe(false)
+  })
+})

scripts/perf-stats.ts

@@ -0,0 +1,63 @@
+export interface MetricStats {
+  mean: number
+  stddev: number
+  min: number
+  max: number
+  n: number
+}
+
+export function computeStats(values: number[]): MetricStats {
+  const n = values.length
+  if (n === 0) return { mean: 0, stddev: 0, min: 0, max: 0, n: 0 }
+  if (n === 1)
+    return { mean: values[0], stddev: 0, min: values[0], max: values[0], n: 1 }
+
+  const mean = values.reduce((a, b) => a + b, 0) / n
+  const variance = values.reduce((sum, v) => sum + (v - mean) ** 2, 0) / (n - 1)
+
+  return {
+    mean,
+    stddev: Math.sqrt(variance),
+    min: Math.min(...values),
+    max: Math.max(...values),
+    n
+  }
+}
+
+export function zScore(value: number, stats: MetricStats): number | null {
+  if (stats.stddev === 0 || stats.n < 2) return null
+  return (value - stats.mean) / stats.stddev
+}
+
+export type Significance = 'regression' | 'improvement' | 'neutral' | 'noisy'
+
+export function classifyChange(
+  z: number | null,
+  historicalCV: number
+): Significance {
+  if (historicalCV > 50) return 'noisy'
+  if (z === null) return 'neutral'
+  if (z > 2) return 'regression'
+  if (z < -2) return 'improvement'
+  return 'neutral'
+}
+
+export function formatSignificance(
+  sig: Significance,
+  z: number | null
+): string {
+  switch (sig) {
+    case 'regression':
+      return `⚠️ z=${z!.toFixed(1)}`
+    case 'improvement':
+      return `z=${z!.toFixed(1)}`
+    case 'noisy':
+      return 'variance too high'
+    case 'neutral':
+      return z !== null ? `z=${z.toFixed(1)}` : '—'
+  }
+}
+
+export function isNoteworthy(sig: Significance): boolean {
+  return sig === 'regression'
+}

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -64,7 +64,7 @@
             layout="vertical"
             :pt:gutter="
               cn(
-                'rounded-tl-lg rounded-tr-lg ',
+                'rounded-tl-lg rounded-tr-lg',
                 !(bottomPanelVisible && !focusMode) && 'hidden'
               )
             "

src/components/TopMenuSection.test.ts

@@ -296,11 +296,13 @@ describe('TopMenuSection', () => {
   describe('inline progress summary', () => {
     const configureSettings = (
       pinia: ReturnType<typeof createTestingPinia>,
-      qpoV2Enabled: boolean
+      qpoV2Enabled: boolean,
+      showRunProgressBar = true
     ) => {
       const settingStore = useSettingStore(pinia)
       vi.mocked(settingStore.get).mockImplementation((key) => {
         if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
+        if (key === 'Comfy.Queue.ShowRunProgressBar') return showRunProgressBar
         if (key === 'Comfy.UseNewMenu') return 'Top'
         return undefined
       })
@@ -332,6 +334,19 @@ describe('TopMenuSection', () => {
       ).toBe(false)
     })
 
+    it('does not render inline progress summary when run progress bar is disabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true, false)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
+      ).toBe(false)
+    })
+
     it('teleports inline progress summary when actionbar is floating', async () => {
       localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
       const actionbarTarget = document.createElement('div')

src/components/TopMenuSection.vue

@@ -125,6 +125,7 @@ import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -164,14 +165,16 @@ const isActionbarFloating = computed(
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
+const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
+  useQueueFeatureFlags()
 const isQueueProgressOverlayEnabled = computed(
   () => !isQueuePanelV2Enabled.value
 )
 const shouldShowInlineProgressSummary = computed(
-  () => isQueuePanelV2Enabled.value && isActionbarEnabled.value
+  () =>
+    isQueuePanelV2Enabled.value &&
+    isActionbarEnabled.value &&
+    isRunProgressBarEnabled.value
 )
 const shouldShowQueueNotificationBanners = computed(
   () => isActionbarEnabled.value

src/components/actionbar/ComfyActionbar.test.ts

@@ -0,0 +1,101 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
+import { i18n } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const configureSettings = (
+  pinia: ReturnType<typeof createTestingPinia>,
+  showRunProgressBar: boolean
+) => {
+  const settingStore = useSettingStore(pinia)
+  vi.mocked(settingStore.get).mockImplementation((key) => {
+    if (key === 'Comfy.UseNewMenu') return 'Top'
+    if (key === 'Comfy.Queue.QPOV2') return true
+    if (key === 'Comfy.Queue.ShowRunProgressBar') return showRunProgressBar
+    return undefined
+  })
+}
+
+const mountActionbar = (showRunProgressBar: boolean) => {
+  const topMenuContainer = document.createElement('div')
+  document.body.appendChild(topMenuContainer)
+
+  const pinia = createTestingPinia({ createSpy: vi.fn })
+  configureSettings(pinia, showRunProgressBar)
+
+  const wrapper = mount(ComfyActionbar, {
+    attachTo: document.body,
+    props: {
+      topMenuContainer,
+      queueOverlayExpanded: false
+    },
+    global: {
+      plugins: [pinia, i18n],
+      stubs: {
+        ContextMenu: {
+          name: 'ContextMenu',
+          template: '<div />'
+        },
+        Panel: {
+          name: 'Panel',
+          template: '<div><slot /></div>'
+        },
+        StatusBadge: true,
+        ComfyRunButton: {
+          name: 'ComfyRunButton',
+          template: '<button type="button">Run</button>'
+        },
+        QueueInlineProgress: true
+      },
+      directives: {
+        tooltip: () => {}
+      }
+    }
+  })
+
+  return {
+    wrapper,
+    topMenuContainer
+  }
+}
+
+describe('ComfyActionbar', () => {
+  beforeEach(() => {
+    i18n.global.locale.value = 'en'
+    localStorage.clear()
+  })
+
+  it('teleports inline progress when run progress bar is enabled', async () => {
+    const { wrapper, topMenuContainer } = mountActionbar(true)
+
+    try {
+      await nextTick()
+
+      expect(
+        topMenuContainer.querySelector('[data-testid="queue-inline-progress"]')
+      ).not.toBeNull()
+    } finally {
+      wrapper.unmount()
+      topMenuContainer.remove()
+    }
+  })
+
+  it('does not teleport inline progress when run progress bar is disabled', async () => {
+    const { wrapper, topMenuContainer } = mountActionbar(false)
+
+    try {
+      await nextTick()
+
+      expect(
+        topMenuContainer.querySelector('[data-testid="queue-inline-progress"]')
+      ).toBeNull()
+    } finally {
+      wrapper.unmount()
+      topMenuContainer.remove()
+    }
+  })
+})

src/components/actionbar/ComfyActionbar.vue

@@ -107,6 +107,7 @@ import { useI18n } from 'vue-i18n'
 import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -127,7 +128,7 @@ const emit = defineEmits<{
   (event: 'update:progressTarget', target: HTMLElement | null): void
 }>()
 
-const settingsStore = useSettingStore()
+const settingStore = useSettingStore()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const queueStore = useQueueStore()
@@ -137,11 +138,10 @@ const { isIdle: isExecutionIdle } = storeToRefs(executionStore)
 const { activeJobsCount } = storeToRefs(queueStore)
 const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 
-const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
+const position = computed(() => settingStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
-const isQueuePanelV2Enabled = computed(() =>
-  settingsStore.get('Comfy.Queue.QPOV2')
-)
+const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
+  useQueueFeatureFlags()
 
 const panelRef = ref<ComponentPublicInstance | null>(null)
 const panelElement = computed<HTMLElement | null>(() => {
@@ -325,7 +325,13 @@ const onMouseLeaveDropZone = () => {
 }
 
 const inlineProgressTarget = computed(() => {
-  if (!visible.value || !isQueuePanelV2Enabled.value) return null
+  if (
+    !visible.value ||
+    !isQueuePanelV2Enabled.value ||
+    !isRunProgressBarEnabled.value
+  ) {
+    return null
+  }
   if (isDocked.value) return topMenuContainer ?? null
   return panelElement.value
 })
@@ -361,7 +367,13 @@ const cancelJobTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.interrupt'))
 )
 const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
+  buildTooltipConfig(
+    t(
+      isQueuePanelV2Enabled.value
+        ? 'sideToolbar.queueProgressOverlay.viewJobHistory'
+        : 'sideToolbar.queueProgressOverlay.expandCollapsedQueue'
+    )
+  )
 )
 const activeJobsLabel = computed(() => {
   const count = activeJobsCount.value

src/components/appMode/AppModeToolbar.vue

@@ -21,8 +21,8 @@ const tooltipOptions = { showDelay: 300, hideDelay: 300 }
 const isAssetsActive = computed(
   () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
 )
-const isWorkflowsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'workflows'
+const isAppsActive = computed(
+  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'apps'
 )
 
 function openAssets() {
@@ -30,7 +30,7 @@ function openAssets() {
 }
 
 function showApps() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.workflows')
+  void commandStore.execute('Workspace.ToggleSidebarTab.apps')
 }
 
 function openTemplates() {
@@ -104,9 +104,7 @@ function openTemplates() {
         variant="textonly"
         size="unset"
         :aria-label="t('linearMode.appModeToolbar.apps')"
-        :class="
-          cn('size-10', isWorkflowsActive && 'bg-secondary-background-hover')
-        "
+        :class="cn('size-10', isAppsActive && 'bg-secondary-background-hover')"
         @click="showApps"
       >
         <i class="icon-[lucide--panels-top-left] size-4" />

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -60,6 +60,7 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
+import { ensureWorkflowSuffix, getWorkflowSuffix } from '@/utils/formatUtil'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   ComfyWorkflow,
@@ -70,7 +71,6 @@ import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { appendJsonExt } from '@/utils/formatUtil'
 import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 interface Props {
@@ -78,7 +78,7 @@ interface Props {
   isActive?: boolean
 }
 
-const { item, isActive = false } = defineProps<Props>()
+const { item, isActive } = defineProps<Props>()
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
@@ -107,9 +107,10 @@ const rename = async (
       workflowStore.activeSubgraph.name = newName
     } else if (workflowStore.activeWorkflow) {
       try {
+        const suffix = getWorkflowSuffix(workflowStore.activeWorkflow.suffix)
         await workflowService.renameWorkflow(
           workflowStore.activeWorkflow,
-          ComfyWorkflow.basePath + appendJsonExt(newName)
+          ComfyWorkflow.basePath + ensureWorkflowSuffix(newName, suffix)
         )
       } catch (error) {
         console.error(error)

src/components/builder/AppBuilder.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { remove } from 'es-toolkit'
-import { computed, provide, ref, toValue, watchEffect } from 'vue'
+import { computed, provide, ref, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -25,6 +25,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
 import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
+import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
@@ -38,39 +39,20 @@ const workflowStore = useWorkflowStore()
 const { t } = useI18n()
 const canvas: LGraphCanvas = canvasStore.getCanvas()
 
-const { isSelectMode, isArrangeMode } = useAppMode()
+const { isSelectMode, isSelectInputsMode, isSelectOutputsMode, isArrangeMode } =
+  useAppMode()
 const hoveringSelectable = ref(false)
 
 provide(HideLayoutFieldKey, true)
 
 workflowStore.activeWorkflow?.changeTracker?.reset()
 
-function resolveNode(nodeId: NodeId) {
-  return (
-    app.rootGraph.getNodeById(nodeId) ??
-    [...app.rootGraph.subgraphs.values()]
-      .flatMap((sg) => sg.nodes)
-      .find((n) => n.id == nodeId)
-  )
-}
-
-// Prune stale entries whose node/widget no longer exists, so the
-// DraggableList model always matches the rendered items.
-watchEffect(() => {
-  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) =>
-    resolveNode(nodeId)?.widgets?.some((w) => w.name === widgetName)
-  )
-  if (valid.length < appModeStore.selectedInputs.length) {
-    appModeStore.selectedInputs = valid
-  }
-})
-
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
       const node = resolveNode(nodeId)
-      const widget = node?.widgets?.find((w) => w.name === widgetName)
-      if (!node || !widget) return null
+      if (!node) return null
+      const widget = node.widgets?.find((w) => w.name === widgetName)
       return { nodeId, widgetName, node, widget }
     })
     .filter((item): item is NonNullable<typeof item> => item !== null)
@@ -80,7 +62,13 @@ const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
     const node = resolveNode(nodeId)
     const widget = node?.widgets?.find((w) => w.name === widgetName)
-    if (!node || !widget) return { nodeId, widgetName }
+    if (!node || !widget) {
+      return {
+        nodeId,
+        widgetName,
+        subLabel: t('linearMode.builder.unknownWidget')
+      }
+    }
 
     const input = node.inputs.find((i) => i.widget?.name === widget.name)
     const rename = input && (() => renameWidget(widget, input))
@@ -174,6 +162,7 @@ function handleClick(e: MouseEvent) {
   if (!node) return canvasInteractions.forwardEventToCanvas(e)
 
   if (!widget) {
+    if (!isSelectOutputsMode.value) return
     if (!node.constructor.nodeData?.output_node)
       return canvasInteractions.forwardEventToCanvas(e)
     const index = appModeStore.selectedOutputs.findIndex((id) => id == node.id)
@@ -181,6 +170,7 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
+  if (!isSelectInputsMode.value) return
 
   const index = appModeStore.selectedInputs.findIndex(
     ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
@@ -228,9 +218,9 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
       v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
       :key="`${nodeId}: ${widgetName}`"
       :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
-      :aria-label="`${widget.label ?? widgetName} — ${node.title}`"
+      :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
     >
-      <div class="pointer-events-none" inert>
+      <div v-if="widget" class="pointer-events-none" inert>
         <WidgetItem
           :widget="widget"
           :node="node"
@@ -238,10 +228,16 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           hidden-widget-actions
         />
       </div>
+      <div v-else class="text-muted-foreground text-sm p-1 pointer-events-none">
+        {{ widgetName }}
+        <p class="text-xs italic">
+          ({{ t('linearMode.builder.unknownWidget') }})
+        </p>
+      </div>
     </div>
   </DraggableList>
   <PropertiesAccordionItem
-    v-else
+    v-if="isSelectInputsMode"
     :label="t('nodeHelpPage.inputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedInputs.length"
@@ -290,7 +286,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     </DraggableList>
   </PropertiesAccordionItem>
   <PropertiesAccordionItem
-    v-if="!isArrangeMode"
+    v-if="isSelectOutputsMode"
     :label="t('nodeHelpPage.outputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedOutputs.length"
@@ -351,42 +347,46 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
       @wheel="canvasInteractions.forwardEventToCanvas"
     >
       <TransformPane :canvas="canvasStore.getCanvas()">
-        <div
-          v-for="[key, style] in renderedInputs"
-          :key
-          :style="toValue(style)"
-          class="fixed bg-primary-background/30 rounded-lg"
-        />
-        <div
-          v-for="[key, style, isSelected] in renderedOutputs"
-          :key
-          :style="toValue(style)"
-          :class="
-            cn(
-              'fixed ring-warning-background ring-5 rounded-2xl',
-              !isSelected && 'ring-warning-background/50'
-            )
-          "
-        >
-          <div class="absolute top-0 right-0 size-8">
-            <div
-              v-if="isSelected"
-              class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
-              @click.stop="
-                remove(appModeStore.selectedOutputs, (k) => k == key)
-              "
-              @pointerdown.stop
-            >
-              <i class="icon-[lucide--check] bg-text-foreground size-full" />
+        <template v-if="isSelectInputsMode">
+          <div
+            v-for="[key, style] in renderedInputs"
+            :key
+            :style="toValue(style)"
+            class="fixed bg-primary-background/30 rounded-lg"
+          />
+        </template>
+        <template v-else>
+          <div
+            v-for="[key, style, isSelected] in renderedOutputs"
+            :key
+            :style="toValue(style)"
+            :class="
+              cn(
+                'fixed ring-warning-background ring-5 rounded-2xl',
+                !isSelected && 'ring-warning-background/50'
+              )
+            "
+          >
+            <div class="absolute top-0 right-0 size-8">
+              <div
+                v-if="isSelected"
+                class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
+                @click.stop="
+                  remove(appModeStore.selectedOutputs, (k) => k == key)
+                "
+                @pointerdown.stop
+              >
+                <i class="icon-[lucide--check] bg-text-foreground size-full" />
+              </div>
+              <div
+                v-else
+                class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
+                @click.stop="appModeStore.selectedOutputs.push(key)"
+                @pointerdown.stop
+              />
             </div>
-            <div
-              v-else
-              class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
-              @click.stop="appModeStore.selectedOutputs.push(key)"
-              @pointerdown.stop
-            />
           </div>
-        </div>
+        </template>
       </TransformPane>
     </div>
   </Teleport>

src/components/builder/BuilderDefaultModeAppliedDialogContent.vue

@@ -0,0 +1,62 @@
+<template>
+  <BuilderDialog @close="$emit('close')">
+    <template #title>
+      <span class="inline-flex items-center gap-2">
+        {{ $t('builderToolbar.defaultModeAppliedTitle') }}
+        <i
+          aria-hidden="true"
+          class="icon-[lucide--circle-check-big] size-4 text-green-500"
+        />
+      </span>
+    </template>
+
+    <p class="m-0 text-sm text-muted-foreground">
+      {{
+        appliedAsApp
+          ? $t('builderToolbar.defaultModeAppliedAppBody')
+          : $t('builderToolbar.defaultModeAppliedGraphBody')
+      }}
+    </p>
+    <p class="m-0 text-sm text-muted-foreground">
+      {{
+        appliedAsApp
+          ? $t('builderToolbar.defaultModeAppliedAppPrompt')
+          : $t('builderToolbar.defaultModeAppliedGraphPrompt')
+      }}
+    </p>
+
+    <template #footer>
+      <template v-if="appliedAsApp">
+        <Button variant="muted-textonly" size="lg" @click="$emit('close')">
+          {{ $t('g.close') }}
+        </Button>
+        <Button variant="secondary" size="lg" @click="$emit('viewApp')">
+          {{ $t('builderToolbar.viewApp') }}
+        </Button>
+      </template>
+      <template v-else>
+        <Button variant="muted-textonly" size="lg" @click="$emit('viewApp')">
+          {{ $t('builderToolbar.viewApp') }}
+        </Button>
+        <Button variant="secondary" size="lg" @click="$emit('close')">
+          {{ $t('g.close') }}
+        </Button>
+      </template>
+    </template>
+  </BuilderDialog>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import BuilderDialog from './BuilderDialog.vue'
+
+defineProps<{
+  appliedAsApp: boolean
+}>()
+
+defineEmits<{
+  viewApp: []
+  close: []
+}>()
+</script>

src/components/builder/BuilderDialog.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex w-full min-w-96 flex-col rounded-2xl bg-base-background">
+  <div
+    class="flex min-h-80 w-full min-w-116 flex-col rounded-2xl bg-base-background"
+  >
     <!-- Header -->
     <div
       class="flex h-12 items-center justify-between border-b border-border-default px-4"
@@ -11,6 +13,7 @@
         </h2>
       </div>
       <Button
+        v-if="showClose"
         variant="muted-textonly"
         class="-mr-1"
         :aria-label="$t('g.close')"
@@ -21,7 +24,7 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-1 flex-col gap-4 px-4 py-4">
       <slot />
     </div>
 
@@ -35,6 +38,10 @@
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
 
+const { showClose = true } = defineProps<{
+  showClose?: boolean
+}>()
+
 defineEmits<{
   close: []
 }>()

src/components/builder/BuilderFooterToolbar.test.ts

@@ -0,0 +1,147 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { AppMode } from '@/composables/useAppMode'
+
+import BuilderFooterToolbar from '@/components/builder/BuilderFooterToolbar.vue'
+
+const mockSetMode = vi.hoisted(() => vi.fn())
+const mockExitBuilder = vi.hoisted(() => vi.fn())
+const mockShowDialog = vi.hoisted(() => vi.fn())
+
+const mockState = {
+  mode: 'builder:select' as AppMode,
+  settingView: false
+}
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({
+    mode: computed(() => mockState.mode),
+    isBuilderMode: ref(true),
+    setMode: mockSetMode
+  })
+}))
+
+const mockHasOutputs = ref(true)
+
+vi.mock('@/stores/appModeStore', () => ({
+  useAppModeStore: () => ({
+    exitBuilder: mockExitBuilder,
+    hasOutputs: mockHasOutputs,
+    $id: 'appMode'
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    dialogStack: []
+  })
+}))
+
+vi.mock('@/components/builder/useAppSetDefaultView', () => ({
+  useAppSetDefaultView: () => ({
+    settingView: computed(() => mockState.settingView),
+    showDialog: mockShowDialog
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      builderMenu: { exitAppBuilder: 'Exit app builder' },
+      g: { back: 'Back', next: 'Next' }
+    }
+  }
+})
+
+describe('BuilderFooterToolbar', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    mockState.mode = 'builder:inputs'
+    mockHasOutputs.value = true
+    mockState.settingView = false
+  })
+
+  function mountComponent() {
+    return mount(BuilderFooterToolbar, {
+      global: {
+        plugins: [i18n],
+        stubs: { Button: false }
+      }
+    })
+  }
+
+  function getButtons(wrapper: ReturnType<typeof mountComponent>) {
+    const buttons = wrapper.findAll('button')
+    return {
+      exit: buttons[0],
+      back: buttons[1],
+      next: buttons[2]
+    }
+  }
+
+  it('disables back on the first step', () => {
+    mockState.mode = 'builder:inputs'
+    const { back } = getButtons(mountComponent())
+    expect(back.attributes('disabled')).toBeDefined()
+  })
+
+  it('enables back on the second step', () => {
+    mockState.mode = 'builder:arrange'
+    const { back } = getButtons(mountComponent())
+    expect(back.attributes('disabled')).toBeUndefined()
+  })
+
+  it('disables next on the setDefaultView step', () => {
+    mockState.settingView = true
+    const { next } = getButtons(mountComponent())
+    expect(next.attributes('disabled')).toBeDefined()
+  })
+
+  it('disables next on arrange step when no outputs', () => {
+    mockState.mode = 'builder:arrange'
+    mockHasOutputs.value = false
+    const { next } = getButtons(mountComponent())
+    expect(next.attributes('disabled')).toBeDefined()
+  })
+
+  it('enables next on inputs step', () => {
+    mockState.mode = 'builder:inputs'
+    const { next } = getButtons(mountComponent())
+    expect(next.attributes('disabled')).toBeUndefined()
+  })
+
+  it('calls setMode on back click', async () => {
+    mockState.mode = 'builder:arrange'
+    const { back } = getButtons(mountComponent())
+    await back.trigger('click')
+    expect(mockSetMode).toHaveBeenCalledWith('builder:outputs')
+  })
+
+  it('calls setMode on next click from inputs step', async () => {
+    mockState.mode = 'builder:inputs'
+    const { next } = getButtons(mountComponent())
+    await next.trigger('click')
+    expect(mockSetMode).toHaveBeenCalledWith('builder:outputs')
+  })
+
+  it('opens default view dialog on next click from arrange step', async () => {
+    mockState.mode = 'builder:arrange'
+    const { next } = getButtons(mountComponent())
+    await next.trigger('click')
+    expect(mockSetMode).toHaveBeenCalledWith('builder:arrange')
+    expect(mockShowDialog).toHaveBeenCalledOnce()
+  })
+
+  it('calls exitBuilder on exit button click', async () => {
+    const { exit } = getButtons(mountComponent())
+    await exit.trigger('click')
+    expect(mockExitBuilder).toHaveBeenCalledOnce()
+  })
+})

src/components/builder/BuilderFooterToolbar.vue

@@ -1,15 +1,29 @@
 <template>
-  <div
-    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
+  <nav
+    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center gap-2 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
   >
-    <Button size="lg" @click="onExitBuilder">
+    <Button variant="textonly" size="lg" @click="onExitBuilder">
       {{ t('builderMenu.exitAppBuilder') }}
     </Button>
-  </div>
+    <Button
+      variant="textonly"
+      size="lg"
+      :disabled="isFirstStep"
+      @click="goBack"
+    >
+      <i class="icon-[lucide--chevron-left]" aria-hidden="true" />
+      {{ t('g.back') }}
+    </Button>
+    <Button size="lg" :disabled="isLastStep" @click="goNext">
+      {{ t('g.next') }}
+      <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
+    </Button>
+  </nav>
 </template>
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -17,10 +31,16 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
+import { useBuilderSteps } from './useBuilderSteps'
+
 const { t } = useI18n()
 const appModeStore = useAppModeStore()
 const dialogStore = useDialogStore()
 const { isBuilderMode } = useAppMode()
+const { hasOutputs } = storeToRefs(appModeStore)
+const { isFirstStep, isLastStep, goBack, goNext } = useBuilderSteps({
+  hasOutputs
+})
 
 useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (

src/components/builder/BuilderMenu.vue

@@ -32,7 +32,7 @@
         @click="onSave(close)"
       >
         <i class="icon-[lucide--save] size-4" />
-        {{ t('builderMenu.saveApp') }}
+        {{ t('g.save') }}
       </button>
       <div class="my-1 border-t border-border-default" />
       <button
@@ -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

@@ -6,21 +6,18 @@
     <div
       class="inline-flex items-center gap-1 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
     >
-      <template
-        v-for="(step, index) in [selectStep, arrangeStep]"
-        :key="step.id"
-      >
+      <template v-for="(step, index) in steps" :key="step.id">
         <button
           :class="
             cn(
               stepClasses,
-              activeStep === step.id && 'bg-interface-builder-mode-background',
-              activeStep !== step.id &&
-                'hover:bg-secondary-background bg-transparent'
+              activeStep === step.id
+                ? 'bg-interface-builder-mode-background'
+                : 'hover:bg-secondary-background bg-transparent'
             )
           "
           :aria-current="activeStep === step.id ? 'step' : undefined"
-          @click="setMode(step.id)"
+          @click="navigateToStep(step.id)"
         >
           <StepBadge :step :index :model-value="activeStep" />
           <StepLabel :step />
@@ -29,15 +26,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')"
+        :is-select-active="isSelectStep"
+        @switch="navigateToStep('builder:outputs')"
       >
         <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
-          <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
-          <StepLabel :step="saveStep" />
+          <StepBadge
+            :step="defaultViewStep"
+            :index="steps.length"
+            :model-value="activeStep"
+          />
+          <StepLabel :step="defaultViewStep" />
         </button>
       </ConnectOutputPopover>
       <button
@@ -45,64 +46,72 @@
         :class="
           cn(
             stepClasses,
-            activeStep === 'save'
+            activeStep === 'setDefaultView'
               ? 'bg-interface-builder-mode-background'
               : 'hover:bg-secondary-background bg-transparent'
           )
         "
-        @click="setSaving(true)"
+        @click="navigateToStep('setDefaultView')"
       >
-        <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
-        <StepLabel :step="saveStep" />
+        <StepBadge
+          :step="defaultViewStep"
+          :index="steps.length"
+          :model-value="activeStep"
+        />
+        <StepLabel :step="defaultViewStep" />
       </button>
     </div>
   </nav>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
-import { useAppMode } from '@/composables/useAppMode'
-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 type { BuilderStepId } from './useBuilderSteps'
+import { useBuilderSteps } from './useBuilderSteps'
 
 const { t } = useI18n()
-const { mode, setMode } = useAppMode()
-const { hasOutputs } = storeToRefs(useAppModeStore())
-const { saving, setSaving } = useBuilderSave()
-
-const activeStep = computed(() => (saving.value ? 'save' : mode.value))
+const appModeStore = useAppModeStore()
+const { hasOutputs } = storeToRefs(appModeStore)
+const { activeStep, isSelectStep, navigateToStep } = useBuilderSteps()
 
 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'
 
-const selectStep: BuilderToolbarStep<AppMode> = {
-  id: 'builder:select',
-  title: t('builderToolbar.select'),
-  subtitle: t('builderToolbar.selectDescription'),
+const selectInputsStep: BuilderToolbarStep<BuilderStepId> = {
+  id: 'builder:inputs',
+  title: t('builderToolbar.inputs'),
+  subtitle: t('builderToolbar.inputsDescription'),
   icon: 'icon-[lucide--mouse-pointer-click]'
 }
 
-const arrangeStep: BuilderToolbarStep<AppMode> = {
+const selectOutputsStep: BuilderToolbarStep<BuilderStepId> = {
+  id: 'builder:outputs',
+  title: t('builderToolbar.outputs'),
+  subtitle: t('builderToolbar.outputsDescription'),
+  icon: 'icon-[lucide--mouse-pointer-click]'
+}
+
+const arrangeStep: BuilderToolbarStep<BuilderStepId> = {
   id: 'builder:arrange',
   title: t('builderToolbar.arrange'),
   subtitle: t('builderToolbar.arrangeDescription'),
   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<BuilderStepId> = {
+  id: 'setDefaultView',
+  title: t('builderToolbar.defaultView'),
+  subtitle: t('builderToolbar.defaultViewDescription'),
+  icon: 'icon-[lucide--eye]'
 }
+const steps = [selectInputsStep, selectOutputsStep, arrangeStep]
 </script>

src/components/builder/ConnectOutputPopover.vue

@@ -46,7 +46,7 @@
           </PopoverClose>
           <PopoverClose as-child>
             <Button variant="secondary" size="md" @click="emit('switch')">
-              {{ t('builderToolbar.switchToSelect') }}
+              {{ t('builderToolbar.switchToOutputs') }}
             </Button>
           </PopoverClose>
         </template>

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/EmptyWorkflowDialogContent.vue

@@ -0,0 +1,40 @@
+<template>
+  <BuilderDialog :show-close="false">
+    <template #title>
+      {{ $t('builderToolbar.emptyWorkflowTitle') }}
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('builderToolbar.emptyWorkflowExplanation') }}
+      </p>
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('builderToolbar.emptyWorkflowPrompt') }}
+      </p>
+    </div>
+
+    <template #footer>
+      <Button
+        variant="muted-textonly"
+        size="lg"
+        @click="$emit('backToWorkflow')"
+      >
+        {{ $t('builderToolbar.backToWorkflow') }}
+      </Button>
+      <Button variant="secondary" size="lg" @click="$emit('loadTemplate')">
+        {{ $t('builderToolbar.loadTemplate') }}
+      </Button>
+    </template>
+  </BuilderDialog>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import BuilderDialog from './BuilderDialog.vue'
+
+defineEmits<{
+  backToWorkflow: []
+  loadTemplate: []
+}>()
+</script>

src/components/builder/IoItem.vue

@@ -32,10 +32,13 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="p-2 my-2 rounded-lg flex items-center-safe">
-    <span class="mr-auto truncate shrink-1" v-text="title" />
-    <span
-      class="text-muted-foreground mr-2 text-end truncate shrink-3"
+  <div class="p-2 my-2 rounded-lg flex items-center-safe gap-2">
+    <div
+      class="mr-auto flex-[4_1_0%] max-w-max min-w-0 truncate drag-handle inline"
+      v-text="title"
+    />
+    <div
+      class="flex-[2_1_0%] max-w-max min-w-0 truncate text-muted-foreground text-end drag-handle inline"
       v-text="subTitle"
     />
     <Popover :entries>

src/components/builder/useAppSetDefaultView.test.ts

@@ -0,0 +1,222 @@
+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
+    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
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => mockDialogStore
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => mockWorkflowStore
+}))
+
+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', () => {
+  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'
+      })
+    })
+
+    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'
+      })
+    })
+  })
+})

src/components/builder/useAppSetDefaultView.ts

@@ -0,0 +1,71 @@
+import { computed } from 'vue'
+
+import { useAppMode } from '@/composables/useAppMode'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import BuilderDefaultModeAppliedDialogContent from './BuilderDefaultModeAppliedDialogContent.vue'
+import DefaultViewDialogContent from './DefaultViewDialogContent.vue'
+
+const DIALOG_KEY = 'builder-default-view'
+const APPLIED_DIALOG_KEY = 'builder-default-view-applied'
+
+export function useAppSetDefaultView() {
+  const workflowStore = useWorkflowStore()
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+  const { setMode } = useAppMode()
+
+  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()
+    showAppliedDialog(openAsApp)
+  }
+
+  function showAppliedDialog(appliedAsApp: boolean) {
+    dialogService.showLayoutDialog({
+      key: APPLIED_DIALOG_KEY,
+      component: BuilderDefaultModeAppliedDialogContent,
+      props: {
+        appliedAsApp,
+        onViewApp: () => {
+          closeAppliedDialog()
+          setMode('app')
+        },
+        onClose: closeAppliedDialog
+      }
+    })
+  }
+
+  function closeDialog() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function closeAppliedDialog() {
+    dialogStore.closeDialog({ key: APPLIED_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 }
-}

src/components/builder/useBuilderSteps.ts

@@ -0,0 +1,79 @@
+import type { Ref } from 'vue'
+
+import { computed } from 'vue'
+
+import { useAppMode } from '@/composables/useAppMode'
+
+import { useAppSetDefaultView } from './useAppSetDefaultView'
+
+const BUILDER_STEPS = [
+  'builder:inputs',
+  'builder:outputs',
+  'builder:arrange',
+  'setDefaultView'
+] as const
+
+export type BuilderStepId = (typeof BUILDER_STEPS)[number]
+
+const ARRANGE_INDEX = BUILDER_STEPS.indexOf('builder:arrange')
+
+export function useBuilderSteps(options?: { hasOutputs?: Ref<boolean> }) {
+  const { mode, isBuilderMode, setMode } = useAppMode()
+  const { settingView, showDialog } = useAppSetDefaultView()
+
+  const activeStep = computed<BuilderStepId>(() => {
+    if (settingView.value) return 'setDefaultView'
+    if (isBuilderMode.value) {
+      return mode.value as BuilderStepId
+    }
+    return 'builder:inputs'
+  })
+
+  const activeStepIndex = computed(() =>
+    BUILDER_STEPS.indexOf(activeStep.value)
+  )
+
+  const isFirstStep = computed(() => activeStepIndex.value === 0)
+
+  const isLastStep = computed(() => {
+    if (!options?.hasOutputs?.value)
+      return activeStepIndex.value >= ARRANGE_INDEX
+    return activeStepIndex.value >= BUILDER_STEPS.length - 1
+  })
+
+  const isSelectStep = computed(
+    () =>
+      activeStep.value === 'builder:inputs' ||
+      activeStep.value === 'builder:outputs'
+  )
+
+  function navigateToStep(stepId: BuilderStepId) {
+    if (stepId === 'setDefaultView') {
+      setMode('builder:arrange')
+      showDialog()
+    } else {
+      setMode(stepId)
+    }
+  }
+
+  function goBack() {
+    if (isFirstStep.value) return
+    navigateToStep(BUILDER_STEPS[activeStepIndex.value - 1])
+  }
+
+  function goNext() {
+    if (isLastStep.value) return
+    navigateToStep(BUILDER_STEPS[activeStepIndex.value + 1])
+  }
+
+  return {
+    activeStep,
+    activeStepIndex,
+    isFirstStep,
+    isLastStep,
+    isSelectStep,
+    navigateToStep,
+    goBack,
+    goNext
+  }
+}

src/components/builder/useEmptyWorkflowDialog.ts

@@ -0,0 +1,44 @@
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import EmptyWorkflowDialogContent from './EmptyWorkflowDialogContent.vue'
+
+const DIALOG_KEY = 'builder-empty-workflow'
+
+export function useEmptyWorkflowDialog() {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+  const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
+
+  function show(options: {
+    onEnterBuilder: () => void
+    onDismiss: () => void
+  }) {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: EmptyWorkflowDialogContent,
+      props: {
+        onBackToWorkflow: () => {
+          closeDialog()
+          options.onDismiss()
+        },
+        onLoadTemplate: () => {
+          closeDialog()
+          templateSelectorDialog.show('appbuilder', {
+            afterClose: () => {
+              if (app.rootGraph?.nodes?.length) options.onEnterBuilder()
+            }
+          })
+        }
+      }
+    })
+  }
+
+  function closeDialog() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  return { show }
+}

src/components/common/DropdownItem.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from 'reka-ui'
+import { useI18n } from 'vue-i18n'
+import { toValue } from 'vue'
+
+const { t } = useI18n()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
+</script>
+<template>
+  <DropdownMenuSeparator
+    v-if="item.separator"
+    class="h-[1px] bg-border-subtle m-1"
+  />
+  <DropdownMenuSub v-else-if="item.items">
+    <DropdownMenuSubTrigger
+      :class="itemClass"
+      :disabled="toValue(item.disabled) ?? !item.items?.length"
+    >
+      {{ item.label }}
+      <i class="ml-auto icon-[lucide--chevron-right]" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent
+        :class="contentClass"
+        :side-offset="2"
+        :align-offset="-5"
+      >
+        <DropdownItem
+          v-for="(subitem, index) in item.items"
+          :key="toValue(subitem.label) ?? index"
+          :item="subitem"
+          :item-class
+          :content-class
+        />
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+  <DropdownMenuItem
+    v-else
+    :class="itemClass"
+    :disabled="toValue(item.disabled) ?? !item.command"
+    @select="item.command?.({ originalEvent: $event, item })"
+  >
+    <i class="size-5" :class="item.icon" />
+    {{ item.label }}
+    <div
+      v-if="item.new"
+      class="ml-auto bg-primary-background rounded-full text-xxs font-bold px-1 flex leading-none items-center"
+      v-text="t('contextMenu.new')"
+    />
+  </DropdownMenuItem>
+</template>

src/components/common/DropdownMenu.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import {
+  DropdownMenuArrow,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
+import { computed, toValue } from 'vue'
+
+import DropdownItem from '@/components/common/DropdownItem.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
+  entries?: MenuItem[]
+  icon?: string
+  to?: string | HTMLElement
+  itemClass?: string
+  contentClass?: string
+}>()
+
+const itemClass = computed(() =>
+  cn(
+    'data-[highlighted]:bg-secondary-background-hover data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
+    itemProp
+  )
+)
+
+const contentClass = computed(() =>
+  cn(
+    'z-1700 rounded-lg p-2 bg-base-background border border-border-subtle min-w-[220px] shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+    contentProp
+  )
+)
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger as-child>
+      <slot name="button">
+        <Button size="icon">
+          <i :class="icon ?? 'icon-[lucide--menu]'" />
+        </Button>
+      </slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal :to>
+      <DropdownMenuContent
+        side="bottom"
+        :side-offset="5"
+        :collision-padding="10"
+        v-bind="$attrs"
+        :class="contentClass"
+      >
+        <slot :item-class>
+          <DropdownItem
+            v-for="(item, index) in entries ?? []"
+            :key="toValue(item.label) ?? index"
+            :item-class
+            :content-class
+            :item
+          />
+        </slot>
+        <DropdownMenuArrow class="fill-base-background stroke-border-subtle" />
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

src/components/common/NoResultsPlaceholder.vue

@@ -3,14 +3,18 @@
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
-          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
-          <h3>{{ title }}</h3>
+          <i
+            v-if="icon"
+            :class="icon"
+            style="font-size: 3rem; margin-bottom: 1rem"
+          />
+          <h3 v-if="title">{{ title }}</h3>
           <p :class="textClass" class="text-center whitespace-pre-line">
             {{ message }}
           </p>
           <Button
             v-if="buttonLabel"
-            variant="textonly"
+            :variant="buttonVariant ?? 'textonly'"
             @click="$emit('action')"
           >
             {{ buttonLabel }}
@@ -25,14 +29,16 @@
 import Card from 'primevue/card'
 
 import Button from '@/components/ui/button/Button.vue'
+import type { ButtonVariants } from '../ui/button/button.variants'
 
 const props = defineProps<{
   class?: string
   icon?: string
-  title: string
+  title?: string
   message: string
   textClass?: string
   buttonLabel?: string
+  buttonVariant?: ButtonVariants['variant']
 }>()
 
 defineEmits(['action'])
@@ -51,7 +57,6 @@ defineEmits(['action'])
 }
 
 .no-results-placeholder p {
-  color: var(--text-color-secondary);
   margin-bottom: 1rem;
 }
 </style>

src/components/common/ScrubableNumberInput.vue

@@ -8,7 +8,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.decrement')"
       data-testid="decrement"
-      class="h-full w-8 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="h-full aspect-8/7 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canDecrement"
       tabindex="-1"
@@ -53,7 +53,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.increment')"
       data-testid="increment"
-      class="h-full w-8 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="h-full aspect-8/7 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canIncrement"
       tabindex="-1"

src/components/common/StatusBadge.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { statusBadgeVariants } from './statusBadge.variants'
 import type { StatusBadgeVariants } from './statusBadge.variants'
 
@@ -11,17 +13,17 @@ const {
   severity?: StatusBadgeVariants['severity']
   variant?: StatusBadgeVariants['variant']
 }>()
+
+const badgeClass = computed(() =>
+  statusBadgeVariants({
+    severity,
+    variant: variant ?? (label == null ? 'dot' : 'label')
+  })
+)
 </script>
 
 <template>
-  <span
-    :class="
-      statusBadgeVariants({
-        severity,
-        variant: variant ?? (label == null ? 'dot' : 'label')
-      })
-    "
-  >
+  <span :class="badgeClass">
     {{ label }}
   </span>
 </template>

src/components/common/WorkflowActionsList.test.ts

@@ -70,6 +70,24 @@ describe('WorkflowActionsList', () => {
     expect(wrapper.text()).toContain('NEW')
   })
 
+  it('does not render items with visible set to false', () => {
+    const items: WorkflowMenuItem[] = [
+      {
+        id: 'hidden',
+        label: 'Hidden Item',
+        icon: 'pi pi-eye-slash',
+        command: vi.fn(),
+        visible: false
+      },
+      { id: 'shown', label: 'Shown Item', icon: 'pi pi-eye', command: vi.fn() }
+    ]
+
+    const wrapper = createWrapper(items)
+
+    expect(wrapper.text()).not.toContain('Hidden Item')
+    expect(wrapper.text()).toContain('Shown Item')
+  })
+
   it('does not render badge when absent', () => {
     const items: WorkflowMenuAction[] = [
       { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }

src/components/common/WorkflowActionsList.vue

@@ -26,7 +26,7 @@ const {
     />
     <component
       :is="itemComponent"
-      v-else
+      v-else-if="item.visible !== false"
       :disabled="item.disabled"
       :class="
         cn(

src/components/graph/GraphCanvas.vue

@@ -39,8 +39,8 @@
       <BottomPanel />
     </template>
     <template v-if="showUI" #right-side-panel>
-      <AppBuilder v-if="mode === 'builder:select'" />
-      <NodePropertiesPanel v-else-if="!isBuilderMode" />
+      <AppBuilder v-if="isBuilderMode" />
+      <NodePropertiesPanel v-else />
     </template>
     <template #graph-canvas-panel>
       <GraphCanvasMenu
@@ -204,7 +204,7 @@ const nodeSearchboxPopoverRef = shallowRef<InstanceType<
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
-const { mode, isBuilderMode } = useAppMode()
+const { isBuilderMode } = useAppMode()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()

src/components/painter/WidgetPainter.vue

@@ -116,6 +116,7 @@
 
       <template v-if="tool === PAINTER_TOOLS.BRUSH">
         <div
+          v-if="!compact"
           class="flex w-28 items-center truncate text-sm text-muted-foreground"
         >
           {{ $t('painter.color') }}
@@ -142,7 +143,7 @@
               max="100"
               step="1"
               class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
-              @click.prevent
+              @click.stop
               @change="
                 (e) => {
                   const val = Math.min(
@@ -158,6 +159,7 @@
         </div>
 
         <div
+          v-if="!compact"
           class="flex w-28 items-center truncate text-sm text-muted-foreground"
         >
           {{ $t('painter.hardness') }}
@@ -183,6 +185,7 @@
 
       <template v-if="!isImageInputConnected">
         <div
+          v-if="!compact"
           class="flex w-28 items-center truncate text-sm text-muted-foreground"
         >
           {{ $t('painter.width') }}
@@ -204,6 +207,7 @@
         </div>
 
         <div
+          v-if="!compact"
           class="flex w-28 items-center truncate text-sm text-muted-foreground"
         >
           {{ $t('painter.height') }}
@@ -225,6 +229,7 @@
         </div>
 
         <div
+          v-if="!compact"
           class="flex w-28 items-center truncate text-sm text-muted-foreground"
         >
           {{ $t('painter.background') }}

src/components/queue/JobHistoryActionsMenu.test.ts

@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h } from 'vue'
+
+import { i18n } from '@/i18n'
+import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
+
+const popoverCloseSpy = vi.fn()
+
+vi.mock('@/components/ui/Popover.vue', () => {
+  const PopoverStub = defineComponent({
+    name: 'Popover',
+    setup(_, { slots }) {
+      return () =>
+        h('div', [
+          slots.button?.(),
+          slots.default?.({
+            close: () => {
+              popoverCloseSpy()
+            }
+          })
+        ])
+    }
+  })
+  return { default: PopoverStub }
+})
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+const mockGetSetting = vi.fn<(key: string) => boolean | undefined>((key) =>
+  key === 'Comfy.Queue.QPOV2' || key === 'Comfy.Queue.ShowRunProgressBar'
+    ? true
+    : undefined
+)
+const mockSetSetting = vi.fn()
+const mockSetMany = vi.fn()
+const mockSidebarTabStore = {
+  activeSidebarTabId: null as string | null
+}
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting,
+    set: mockSetSetting,
+    setMany: mockSetMany
+  })
+}))
+
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: () => mockSidebarTabStore
+}))
+
+const mountMenu = () =>
+  mount(JobHistoryActionsMenu, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: () => {} }
+    }
+  })
+
+describe('JobHistoryActionsMenu', () => {
+  beforeEach(() => {
+    i18n.global.locale.value = 'en'
+    popoverCloseSpy.mockClear()
+    mockSetSetting.mockClear()
+    mockSetMany.mockClear()
+    mockSidebarTabStore.activeSidebarTabId = null
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' || key === 'Comfy.Queue.ShowRunProgressBar'
+        ? true
+        : undefined
+    )
+  })
+
+  it('toggles show run progress bar setting from the menu', async () => {
+    const wrapper = mountMenu()
+
+    const showRunProgressBarButton = wrapper.get(
+      '[data-testid="show-run-progress-bar-action"]'
+    )
+    await showRunProgressBarButton.trigger('click')
+
+    expect(mockSetSetting).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledWith(
+      'Comfy.Queue.ShowRunProgressBar',
+      false
+    )
+  })
+
+  it('opens docked job history sidebar when enabling from the menu', async () => {
+    mockGetSetting.mockImplementation((key: string) => {
+      if (key === 'Comfy.Queue.QPOV2') return false
+      if (key === 'Comfy.Queue.ShowRunProgressBar') return true
+      return undefined
+    })
+    const wrapper = mountMenu()
+
+    const dockedJobHistoryButton = wrapper.get(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await dockedJobHistoryButton.trigger('click')
+
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
+    expect(mockSetMany).not.toHaveBeenCalled()
+    expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
+  })
+
+  it('emits clear history from the menu', async () => {
+    const wrapper = mountMenu()
+
+    const clearHistoryButton = wrapper.get(
+      '[data-testid="clear-history-action"]'
+    )
+    await clearHistoryButton.trigger('click')
+
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
+  })
+})

src/components/queue/JobHistoryActionsMenu.vue

@@ -19,7 +19,7 @@
             data-testid="docked-job-history-action"
             class="w-full justify-between text-sm font-light"
             variant="textonly"
-            size="sm"
+            size="md"
             @click="onToggleDockedJobHistory(close)"
           >
             <span class="flex items-center gap-2">
@@ -35,14 +35,32 @@
               class="icon-[lucide--check] size-4"
             />
           </Button>
+          <Button
+            data-testid="show-run-progress-bar-action"
+            class="w-full justify-between text-sm font-light"
+            variant="textonly"
+            size="md"
+            @click="onToggleRunProgressBar"
+          >
+            <span class="flex items-center gap-2">
+              <i class="icon-[lucide--hourglass] size-4 text-text-secondary" />
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.showRunProgressBar')
+              }}</span>
+            </span>
+            <i
+              v-if="isRunProgressBarEnabled"
+              class="icon-[lucide--check] size-4"
+            />
+          </Button>
           <!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
           <template v-if="showClearHistoryAction">
             <div class="my-1 border-t border-interface-stroke" />
             <Button
               data-testid="clear-history-action"
-              class="h-auto min-h-0 w-full items-start justify-start whitespace-normal"
+              class="h-auto min-h-8 w-full items-start justify-start whitespace-normal"
               variant="textonly"
-              size="sm"
+              size="md"
               @click="onClearHistoryFromMenu(close)"
             >
               <i
@@ -76,6 +94,7 @@ import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -90,9 +109,8 @@ const settingStore = useSettingStore()
 const sidebarTabStore = useSidebarTabStore()
 
 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
+const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
+  useQueueFeatureFlags()
 const showClearHistoryAction = computed(() => !isCloud)
 
 const onClearHistoryFromMenu = (close: () => void) => {
@@ -118,4 +136,11 @@ const onToggleDockedJobHistory = async (close: () => void) => {
     return
   }
 }
+
+const onToggleRunProgressBar = async () => {
+  await settingStore.set(
+    'Comfy.Queue.ShowRunProgressBar',
+    !isRunProgressBarEnabled.value
+  )
+}
 </script>

src/components/queue/QueueOverlayHeader.test.ts

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
 import { defineComponent, h } from 'vue'
 
+import { i18n } from '@/i18n'
+
 const popoverCloseSpy = vi.fn()
 
 vi.mock('@/components/ui/Popover.vue', () => {
@@ -24,7 +25,9 @@ vi.mock('@/components/ui/Popover.vue', () => {
 })
 
 const mockGetSetting = vi.fn<(key: string) => boolean | undefined>((key) =>
-  key === 'Comfy.Queue.QPOV2' ? true : undefined
+  key === 'Comfy.Queue.QPOV2' || key === 'Comfy.Queue.ShowRunProgressBar'
+    ? true
+    : undefined
 )
 const mockSetSetting = vi.fn()
 const mockSetMany = vi.fn()
@@ -52,27 +55,6 @@ const tooltipDirectiveStub = {
   updated: vi.fn()
 }
 
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { more: 'More' },
-      sideToolbar: {
-        queueProgressOverlay: {
-          queuedSuffix: 'queued',
-          clearQueued: 'Clear queued',
-          clearQueueTooltip: 'Clear queue',
-          clearAllJobsTooltip: 'Cancel all running jobs',
-          moreOptions: 'More options',
-          clearHistory: 'Clear history',
-          dockedJobHistory: 'Docked Job History'
-        }
-      }
-    }
-  }
-})
-
 const mountHeader = (props = {}) =>
   mount(QueueOverlayHeader, {
     props: {
@@ -88,6 +70,7 @@ const mountHeader = (props = {}) =>
 
 describe('QueueOverlayHeader', () => {
   beforeEach(() => {
+    i18n.global.locale.value = 'en'
     popoverCloseSpy.mockClear()
     mockSetSetting.mockClear()
     mockSetMany.mockClear()
@@ -207,4 +190,19 @@ describe('QueueOverlayHeader', () => {
       'Comfy.Queue.History.Expanded': true
     })
   })
+
+  it('toggles show run progress bar setting from the menu', async () => {
+    const wrapper = mountHeader()
+
+    const showRunProgressBarButton = wrapper.get(
+      '[data-testid="show-run-progress-bar-action"]'
+    )
+    await showRunProgressBarButton.trigger('click')
+
+    expect(mockSetSetting).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledWith(
+      'Comfy.Queue.ShowRunProgressBar',
+      false
+    )
+  })
 })

src/components/queue/QueueProgressOverlay.vue

@@ -75,7 +75,7 @@ import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 type OverlayState = 'hidden' | 'active' | 'expanded'
 
-const { expanded, menuHovered = false } = defineProps<{
+const { expanded, menuHovered } = defineProps<{
   expanded?: boolean
   menuHovered?: boolean
 }>()

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -323,6 +323,90 @@ describe('useErrorGroups', () => {
       )
       expect(promptGroup).toBeDefined()
     })
+
+    it('sorts cards within an execution group by nodeId numerically', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '10': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '2': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        }
+      }
+      await nextTick()
+
+      const execGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution'
+      )
+      const nodeIds = execGroup?.cards.map((c) => c.nodeId)
+      expect(nodeIds).toEqual(['1', '2', '10'])
+    })
+
+    it('sorts cards with subpath nodeIds before higher root IDs', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '2': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '1:20': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        }
+      }
+      await nextTick()
+
+      const execGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution'
+      )
+      const nodeIds = execGroup?.cards.map((c) => c.nodeId)
+      expect(nodeIds).toEqual(['1', '1:20', '2'])
+    })
+
+    it('sorts deeply nested nodeIds by each segment numerically', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '10:11:99': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '10:11:12': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        },
+        '10:2': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [{ type: 'err', message: 'Error', details: '' }]
+        }
+      }
+      await nextTick()
+
+      const execGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution'
+      )
+      const nodeIds = execGroup?.cards.map((c) => c.nodeId)
+      expect(nodeIds).toEqual(['10:2', '10:11:12', '10:11:99'])
+    })
   })
 
   describe('filteredGroups', () => {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -23,7 +23,10 @@ import { st } from '@/i18n'
 import type { MissingNodeType } from '@/types/comfy'
 import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { isNodeExecutionId } from '@/types/nodeIdentification'
+import {
+  isNodeExecutionId,
+  compareExecutionId
+} from '@/types/nodeIdentification'
 
 const PROMPT_CARD_ID = '__prompt__'
 const SINGLE_GROUP_KEY = '__single__'
@@ -151,12 +154,16 @@ function addCardErrorToGroup(
   group.get(card.id)?.errors.push(error)
 }
 
+function compareNodeId(a: ErrorCardData, b: ErrorCardData): number {
+  return compareExecutionId(a.nodeId, b.nodeId)
+}
+
 function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
   return Array.from(groupsMap.entries())
     .map(([title, groupData]) => ({
       type: 'execution' as const,
       title,
-      cards: Array.from(groupData.cards.values()),
+      cards: Array.from(groupData.cards.values()).sort(compareNodeId),
       priority: groupData.priority
     }))
     .sort((a, b) => {

src/components/sidebar/ModeToggle.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
-
-const { t } = useI18n()
-const canvasStore = useCanvasStore()
-const keybindingStore = useKeybindingStore()
-
-const keybindingSuffix = computed(() => {
-  const shortcut = keybindingStore
-    .getKeybindingByCommandId('Comfy.ToggleLinear')
-    ?.combo.toString()
-  return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
-})
-
-function toggleLinearMode() {
-  useCommandStore().execute('Comfy.ToggleLinear', {
-    metadata: { source: 'button' }
-  })
-}
-</script>
-<template>
-  <div
-    data-testid="mode-toggle"
-    class="p-1 bg-secondary-background rounded-lg w-10"
-  >
-    <Button
-      v-tooltip="{
-        value: t('linearMode.linearMode') + keybindingSuffix,
-        showDelay: 300,
-        hideDelay: 300
-      }"
-      size="icon"
-      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
-      @click="toggleLinearMode"
-    >
-      <i class="icon-[lucide--panels-top-left]" />
-    </Button>
-    <Button
-      v-tooltip="{
-        value: t('linearMode.graphMode') + keybindingSuffix,
-        showDelay: 300,
-        hideDelay: 300
-      }"
-      size="icon"
-      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
-      @click="toggleLinearMode"
-    >
-      <i class="icon-[comfy--workflow]" />
-    </Button>
-  </div>
-</template>

src/components/sidebar/tabs/AppsSidebarTab.vue

@@ -0,0 +1,48 @@
+<template>
+  <BaseWorkflowsSidebarTab
+    :title="$t('linearMode.appModeToolbar.apps')"
+    :filter="isAppWorkflow"
+    :label-transform="stripAppJsonSuffix"
+    hide-leaf-icon
+    :search-subject="$t('linearMode.appModeToolbar.apps')"
+    data-testid="apps-sidebar"
+  >
+    <template #alt-title>
+      <span
+        class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs uppercase text-base-foreground"
+      >
+        {{ $t('g.beta') }}
+      </span>
+    </template>
+    <template #empty-state>
+      <NoResultsPlaceholder
+        button-variant="secondary"
+        text-class="text-muted-foreground text-sm"
+        :message="$t('linearMode.appModeToolbar.appsEmptyMessage')"
+        :button-label="$t('linearMode.appModeToolbar.enterAppMode')"
+        @action="enterAppMode"
+      />
+    </template>
+  </BaseWorkflowsSidebarTab>
+</template>
+
+<script setup lang="ts">
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import BaseWorkflowsSidebarTab from '@/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue'
+import { useAppMode } from '@/composables/useAppMode'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+
+const { setMode } = useAppMode()
+
+function isAppWorkflow(workflow: ComfyWorkflow): boolean {
+  return workflow.suffix === 'app.json'
+}
+
+function stripAppJsonSuffix(label: string): string {
+  return label.replace(/\.app\.json$/i, '')
+}
+
+function enterAppMode() {
+  setMode('app')
+}
+</script>

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -81,7 +81,7 @@ const assetItems = computed<AssetGridItem[]>(() =>
 
 const gridStyle = {
   display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 30vw), 1fr))',
   padding: '0 0.5rem',
   gap: '0.5rem'
 }

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -0,0 +1,352 @@
+<template>
+  <SidebarTabTemplate
+    :title="title"
+    v-bind="$attrs"
+    :data-testid="dataTestid"
+    class="workflows-sidebar-tab"
+  >
+    <template #alt-title>
+      <slot name="alt-title" />
+    </template>
+    <template #tool-buttons>
+      <Button
+        v-tooltip.bottom="$t('g.refresh')"
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('g.refresh')"
+        @click="workflowStore.syncWorkflows()"
+      >
+        <i class="icon-[lucide--refresh-cw] size-4" />
+      </Button>
+    </template>
+    <template #header>
+      <div class="px-2 2xl:px-4">
+        <SearchBox
+          ref="searchBoxRef"
+          v-model:model-value="searchQuery"
+          class="workflows-search-box"
+          :placeholder="$t('g.searchPlaceholder', { subject: searchSubject })"
+          @search="handleSearch"
+        />
+      </div>
+    </template>
+    <template #body>
+      <div v-if="!isSearching" class="comfyui-workflows-panel">
+        <div
+          v-if="workflowTabsPosition === 'Sidebar'"
+          class="comfyui-workflows-open"
+        >
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.open')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-model:expanded-keys="dummyExpandedKeys"
+            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <TreeExplorerTreeNode :node="node">
+                <template #before-label="{ node: treeNode }">
+                  <span
+                    v-if="
+                      (treeNode.data as ComfyWorkflow)?.isModified ||
+                      !(treeNode.data as ComfyWorkflow)?.isPersisted
+                    "
+                    >*</span
+                  >
+                </template>
+                <template #actions="{ node: treeNode }">
+                  <Button
+                    class="close-workflow-button"
+                    :variant="
+                      workspaceStore.shiftDown ? 'destructive' : 'textonly'
+                    "
+                    size="icon-sm"
+                    :aria-label="$t('g.close')"
+                    @click.stop="
+                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
+                    "
+                  >
+                    <i class="icon-[lucide--x] size-3" />
+                  </Button>
+                </template>
+              </TreeExplorerTreeNode>
+            </template>
+          </TreeExplorer>
+        </div>
+        <div
+          v-show="filteredBookmarkedWorkflows.length > 0"
+          class="comfyui-workflows-bookmarks"
+        >
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.bookmarks')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-model:expanded-keys="dummyExpandedKeys"
+            :root="
+              renderTreeNode(
+                bookmarkedWorkflowsTree,
+                WorkflowTreeType.Bookmarks
+              )
+            "
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <WorkflowTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+        </div>
+        <div class="comfyui-workflows-browse">
+          <TextDivider
+            :text="t('sideToolbar.workflowTab.workflowTreeType.browse')"
+            type="dashed"
+            class="ml-2"
+          />
+          <TreeExplorer
+            v-if="filteredPersistedWorkflows.length > 0"
+            v-model:expanded-keys="expandedKeys"
+            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
+            :selection-keys="selectionKeys"
+          >
+            <template #node="{ node }">
+              <WorkflowTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+          <slot v-else name="empty-state">
+            <NoResultsPlaceholder
+              icon="pi pi-folder"
+              :title="$t('g.empty')"
+              :message="$t('g.noWorkflowsFound')"
+            />
+          </slot>
+        </div>
+      </div>
+      <div v-else class="comfyui-workflows-search-panel">
+        <TreeExplorer
+          v-model:expanded-keys="expandedKeys"
+          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
+        >
+          <template #node="{ node }">
+            <WorkflowTreeLeaf :node="node" />
+          </template>
+        </TreeExplorer>
+      </div>
+    </template>
+  </SidebarTabTemplate>
+  <ConfirmDialog />
+</template>
+
+<script setup lang="ts">
+import ConfirmDialog from 'primevue/confirmdialog'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+import TextDivider from '@/components/common/TextDivider.vue'
+import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useTreeExpansion } from '@/composables/useTreeExpansion'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import {
+  ComfyWorkflow,
+  useWorkflowBookmarkStore,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
+import { ensureWorkflowSuffix, getWorkflowSuffix } from '@/utils/formatUtil'
+import { buildTree, sortedTree } from '@/utils/treeUtil'
+
+const {
+  title,
+  filter,
+  searchSubject,
+  dataTestid,
+  labelTransform,
+  hideLeafIcon
+} = defineProps<{
+  title: string
+  filter?: (workflow: ComfyWorkflow) => boolean
+  searchSubject: string
+  dataTestid: string
+  labelTransform?: (label: string) => string
+  hideLeafIcon?: boolean
+}>()
+
+const { t } = useI18n()
+
+const applyFilter = (workflows: ComfyWorkflow[]) =>
+  filter ? workflows.filter(filter) : workflows
+
+const settingStore = useSettingStore()
+const workflowTabsPosition = computed(() =>
+  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
+)
+
+const searchBoxRef = ref()
+
+const searchQuery = ref('')
+const isSearching = computed(() => searchQuery.value.length > 0)
+const filteredWorkflows = ref<ComfyWorkflow[]>([])
+const filteredRoot = computed<TreeNode>(() => {
+  return buildWorkflowTree(filteredWorkflows.value as ComfyWorkflow[])
+})
+const handleSearch = async (query: string) => {
+  if (query.length === 0) {
+    filteredWorkflows.value = []
+    expandedKeys.value = {}
+    return
+  }
+  const lowerQuery = query.toLocaleLowerCase()
+  filteredWorkflows.value = applyFilter(workflowStore.workflows).filter(
+    (workflow) => {
+      return workflow.path.toLocaleLowerCase().includes(lowerQuery)
+    }
+  )
+  await nextTick()
+  expandNode(filteredRoot.value)
+}
+
+const workflowStore = useWorkflowStore()
+const workflowService = useWorkflowService()
+const workspaceStore = useWorkspaceStore()
+const expandedKeys = ref<Record<string, boolean>>({})
+const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+const dummyExpandedKeys = ref<Record<string, boolean>>({})
+
+const handleCloseWorkflow = async (workflow?: ComfyWorkflow) => {
+  if (workflow) {
+    await workflowService.closeWorkflow(workflow, {
+      warnIfUnsaved: !workspaceStore.shiftDown
+    })
+  }
+}
+
+enum WorkflowTreeType {
+  Open = 'Open',
+  Bookmarks = 'Bookmarks',
+  Browse = 'Browse'
+}
+
+const buildWorkflowTree = (workflows: ComfyWorkflow[]) => {
+  return buildTree(workflows, (workflow: ComfyWorkflow) =>
+    workflow.key.split('/')
+  )
+}
+
+const filteredPersistedWorkflows = computed(() =>
+  applyFilter(workflowStore.persistedWorkflows)
+)
+const filteredBookmarkedWorkflows = computed(() =>
+  applyFilter(workflowStore.bookmarkedWorkflows)
+)
+
+const workflowsTree = computed(() =>
+  sortedTree(buildWorkflowTree(filteredPersistedWorkflows.value), {
+    groupLeaf: true
+  })
+)
+// Bookmarked workflows tree is flat.
+const bookmarkedWorkflowsTree = computed(() =>
+  buildTree(filteredBookmarkedWorkflows.value, (workflow) => [workflow.key])
+)
+// Open workflows tree is flat.
+const openWorkflowsTree = computed(() =>
+  buildTree(applyFilter(workflowStore.openWorkflows), (workflow) => [
+    workflow.key
+  ])
+)
+
+const renderTreeNode = (
+  node: TreeNode,
+  type: WorkflowTreeType
+): TreeExplorerNode<ComfyWorkflow> => {
+  const children = node.children?.map((child) => renderTreeNode(child, type))
+
+  const workflow: ComfyWorkflow = node.data
+
+  async function handleClick(
+    this: TreeExplorerNode<ComfyWorkflow>,
+    e: MouseEvent
+  ) {
+    if (this.leaf) {
+      await workflowService.openWorkflow(workflow)
+    } else {
+      toggleNodeOnEvent(e, this)
+    }
+  }
+
+  const actions = node.leaf
+    ? {
+        handleClick,
+        async handleRename(newName: string) {
+          const suffix = getWorkflowSuffix(workflow.suffix)
+          const newPath =
+            type === WorkflowTreeType.Browse
+              ? workflow.directory + '/' + ensureWorkflowSuffix(newName, suffix)
+              : ComfyWorkflow.basePath + ensureWorkflowSuffix(newName, suffix)
+
+          await workflowService.renameWorkflow(workflow, newPath)
+        },
+        handleDelete: workflow.isTemporary
+          ? undefined
+          : async function () {
+              await workflowService.deleteWorkflow(workflow)
+            },
+        contextMenuItems() {
+          return [
+            {
+              label: t('g.insert'),
+              icon: 'pi pi-file-export',
+              command: async () => {
+                const workflow = node.data
+                await workflowService.insertWorkflow(workflow)
+              }
+            },
+            {
+              label: t('g.duplicate'),
+              icon: 'pi pi-file-export',
+              command: async () => {
+                const workflow = node.data
+                await workflowService.duplicateWorkflow(workflow)
+              }
+            }
+          ]
+        },
+        draggable: true
+      }
+    : { handleClick }
+
+  const label =
+    node.leaf && labelTransform ? labelTransform(node.label) : node.label
+
+  return {
+    key: node.key,
+    label,
+    leaf: node.leaf,
+    icon: node.leaf && hideLeafIcon ? 'hidden' : undefined,
+    data: node.data,
+    children,
+    ...actions
+  }
+}
+
+const selectionKeys = computed(() => ({
+  [`root/${workflowStore.activeWorkflow?.key}`]: true
+}))
+
+const workflowBookmarkStore = useWorkflowBookmarkStore()
+onMounted(async () => {
+  searchBoxRef.value?.focus()
+  await workflowBookmarkStore.loadBookmarks()
+})
+</script>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,314 +1,11 @@
 <template>
-  <SidebarTabTemplate
+  <BaseWorkflowsSidebarTab
     :title="$t('sideToolbar.workflows')"
-    v-bind="$attrs"
+    :search-subject="$t('g.workflow')"
     data-testid="workflows-sidebar"
-    class="workflows-sidebar-tab"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.refresh')"
-        variant="muted-textonly"
-        size="icon"
-        :aria-label="$t('g.refresh')"
-        @click="workflowStore.syncWorkflows()"
-      >
-        <i class="icon-[lucide--refresh-cw] size-4" />
-      </Button>
-    </template>
-    <template #header>
-      <div class="px-2 2xl:px-4">
-        <SearchBox
-          ref="searchBoxRef"
-          v-model:model-value="searchQuery"
-          class="workflows-search-box"
-          :placeholder="
-            $t('g.searchPlaceholder', { subject: $t('g.workflow') })
-          "
-          @search="handleSearch"
-        />
-      </div>
-    </template>
-    <template #body>
-      <div v-if="!isSearching" class="comfyui-workflows-panel">
-        <div
-          v-if="workflowTabsPosition === 'Sidebar'"
-          class="comfyui-workflows-open"
-        >
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.open')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
-            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <TreeExplorerTreeNode :node="node">
-                <template #before-label="{ node: treeNode }">
-                  <span
-                    v-if="
-                      (treeNode.data as ComfyWorkflow)?.isModified ||
-                      !(treeNode.data as ComfyWorkflow)?.isPersisted
-                    "
-                    >*</span
-                  >
-                </template>
-                <template #actions="{ node: treeNode }">
-                  <Button
-                    class="close-workflow-button"
-                    :variant="
-                      workspaceStore.shiftDown ? 'destructive' : 'textonly'
-                    "
-                    size="icon-sm"
-                    :aria-label="$t('g.close')"
-                    @click.stop="
-                      handleCloseWorkflow(treeNode.data as ComfyWorkflow)
-                    "
-                  >
-                    <i class="icon-[lucide--x] size-3" />
-                  </Button>
-                </template>
-              </TreeExplorerTreeNode>
-            </template>
-          </TreeExplorer>
-        </div>
-        <div
-          v-show="workflowStore.bookmarkedWorkflows.length > 0"
-          class="comfyui-workflows-bookmarks"
-        >
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.bookmarks')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
-            :root="
-              renderTreeNode(
-                bookmarkedWorkflowsTree,
-                WorkflowTreeType.Bookmarks
-              )
-            "
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <WorkflowTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-        </div>
-        <div class="comfyui-workflows-browse">
-          <TextDivider
-            :text="t('sideToolbar.workflowTab.workflowTreeType.browse')"
-            type="dashed"
-            class="ml-2"
-          />
-          <TreeExplorer
-            v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expanded-keys="expandedKeys"
-            :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
-            :selection-keys="selectionKeys"
-          >
-            <template #node="{ node }">
-              <WorkflowTreeLeaf :node="node" />
-            </template>
-          </TreeExplorer>
-          <NoResultsPlaceholder
-            v-else
-            icon="pi pi-folder"
-            :title="$t('g.empty')"
-            :message="$t('g.noWorkflowsFound')"
-          />
-        </div>
-      </div>
-      <div v-else class="comfyui-workflows-search-panel">
-        <TreeExplorer
-          v-model:expanded-keys="expandedKeys"
-          :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
-        >
-          <template #node="{ node }">
-            <WorkflowTreeLeaf :node="node" />
-          </template>
-        </TreeExplorer>
-      </div>
-    </template>
-  </SidebarTabTemplate>
-  <ConfirmDialog />
+  />
 </template>
 
 <script setup lang="ts">
-import ConfirmDialog from 'primevue/confirmdialog'
-import { computed, nextTick, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
-import TextDivider from '@/components/common/TextDivider.vue'
-import TreeExplorer from '@/components/common/TreeExplorer.vue'
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import {
-  ComfyWorkflow,
-  useWorkflowBookmarkStore,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
-import { appendJsonExt } from '@/utils/formatUtil'
-import { buildTree, sortedTree } from '@/utils/treeUtil'
-
-const settingStore = useSettingStore()
-const workflowTabsPosition = computed(() =>
-  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
-)
-
-const searchBoxRef = ref()
-
-const searchQuery = ref('')
-const isSearching = computed(() => searchQuery.value.length > 0)
-const filteredWorkflows = ref<ComfyWorkflow[]>([])
-const filteredRoot = computed<TreeNode>(() => {
-  return buildWorkflowTree(filteredWorkflows.value as ComfyWorkflow[])
-})
-const handleSearch = async (query: string) => {
-  if (query.length === 0) {
-    filteredWorkflows.value = []
-    expandedKeys.value = {}
-    return
-  }
-  const lowerQuery = query.toLocaleLowerCase()
-  filteredWorkflows.value = workflowStore.workflows.filter((workflow) => {
-    return workflow.path.toLocaleLowerCase().includes(lowerQuery)
-  })
-  await nextTick()
-  expandNode(filteredRoot.value)
-}
-
-const workflowStore = useWorkflowStore()
-const workflowService = useWorkflowService()
-const workspaceStore = useWorkspaceStore()
-const { t } = useI18n()
-const expandedKeys = ref<Record<string, boolean>>({})
-const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
-const dummyExpandedKeys = ref<Record<string, boolean>>({})
-
-const handleCloseWorkflow = async (workflow?: ComfyWorkflow) => {
-  if (workflow) {
-    await workflowService.closeWorkflow(workflow, {
-      warnIfUnsaved: !workspaceStore.shiftDown
-    })
-  }
-}
-
-enum WorkflowTreeType {
-  Open = 'Open',
-  Bookmarks = 'Bookmarks',
-  Browse = 'Browse'
-}
-
-const buildWorkflowTree = (workflows: ComfyWorkflow[]) => {
-  return buildTree(workflows, (workflow: ComfyWorkflow) =>
-    workflow.key.split('/')
-  )
-}
-
-const workflowsTree = computed(() =>
-  sortedTree(buildWorkflowTree(workflowStore.persistedWorkflows), {
-    groupLeaf: true
-  })
-)
-// Bookmarked workflows tree is flat.
-const bookmarkedWorkflowsTree = computed(() =>
-  buildTree(workflowStore.bookmarkedWorkflows, (workflow) => [workflow.key])
-)
-// Open workflows tree is flat.
-const openWorkflowsTree = computed(() =>
-  buildTree(workflowStore.openWorkflows, (workflow) => [workflow.key])
-)
-
-const renderTreeNode = (
-  node: TreeNode,
-  type: WorkflowTreeType
-): TreeExplorerNode<ComfyWorkflow> => {
-  const children = node.children?.map((child) => renderTreeNode(child, type))
-
-  const workflow: ComfyWorkflow = node.data
-
-  async function handleClick(
-    this: TreeExplorerNode<ComfyWorkflow>,
-    e: MouseEvent
-  ) {
-    if (this.leaf) {
-      await workflowService.openWorkflow(workflow)
-    } else {
-      toggleNodeOnEvent(e, this)
-    }
-  }
-
-  const actions = node.leaf
-    ? {
-        handleClick,
-        async handleRename(newName: string) {
-          const newPath =
-            type === WorkflowTreeType.Browse
-              ? workflow.directory + '/' + appendJsonExt(newName)
-              : ComfyWorkflow.basePath + appendJsonExt(newName)
-
-          await workflowService.renameWorkflow(workflow, newPath)
-        },
-        handleDelete: workflow.isTemporary
-          ? undefined
-          : async function () {
-              await workflowService.deleteWorkflow(workflow)
-            },
-        contextMenuItems() {
-          return [
-            {
-              label: t('g.insert'),
-              icon: 'pi pi-file-export',
-              command: async () => {
-                const workflow = node.data
-                await workflowService.insertWorkflow(workflow)
-              }
-            },
-            {
-              label: t('g.duplicate'),
-              icon: 'pi pi-file-export',
-              command: async () => {
-                const workflow = node.data
-                await workflowService.duplicateWorkflow(workflow)
-              }
-            }
-          ]
-        },
-        draggable: true
-      }
-    : { handleClick }
-
-  return {
-    key: node.key,
-    label: node.label,
-    leaf: node.leaf,
-    data: node.data,
-    children,
-    ...actions
-  }
-}
-
-const selectionKeys = computed(() => ({
-  [`root/${workflowStore.activeWorkflow?.key}`]: true
-}))
-
-const workflowBookmarkStore = useWorkflowBookmarkStore()
-onMounted(async () => {
-  searchBoxRef.value?.focus()
-  await workflowBookmarkStore.loadBookmarks()
-})
+import BaseWorkflowsSidebarTab from '@/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue'
 </script>

src/components/topbar/CloudBadge.vue

@@ -17,8 +17,8 @@ import TopbarBadge from './TopbarBadge.vue'
 
 const {
   displayMode = 'full',
-  reverseOrder = false,
-  noPadding = false,
+  reverseOrder,
+  noPadding,
   backgroundColor = 'var(--comfy-menu-bg)'
 } = defineProps<{
   displayMode?: 'full' | 'compact' | 'icon-only'

src/components/topbar/CurrentUserButton.vue

@@ -12,7 +12,7 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full '
+            compact && 'size-full'
           )
         "
       >

src/components/topbar/TopbarBadge.vue

@@ -132,8 +132,8 @@ import { cn } from '@/utils/tailwindUtil'
 const {
   badge,
   displayMode = 'full',
-  reverseOrder = false,
-  noPadding = false,
+  reverseOrder,
+  noPadding,
   backgroundColor = 'var(--comfy-menu-bg)'
 } = defineProps<{
   badge: TopbarBadge

src/components/topbar/TopbarBadges.vue

@@ -19,7 +19,7 @@ import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
 
-const { reverseOrder = false, noPadding = false } = defineProps<{
+const { reverseOrder, noPadding } = defineProps<{
   reverseOrder?: boolean
   noPadding?: boolean
 }>()

src/components/ui/button/button.variants.ts

@@ -21,7 +21,7 @@ export const buttonVariants = cva({
         'text-destructive-background bg-transparent hover:bg-destructive-background/10',
       'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
       gradient:
-        'bg-subscription-gradient text-white border-transparent hover:opacity-90'
+        'bg-(image:--subscription-button-gradient) text-white border-transparent hover:opacity-90'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',

src/components/widget/nav/NavTitle.vue

@@ -15,7 +15,7 @@
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-text-secondary ',
+          'pi transition-transform duration-200 text-xs text-text-secondary',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "

src/composables/queue/useQueueFeatureFlags.ts

@@ -0,0 +1,19 @@
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+export function useQueueFeatureFlags() {
+  const settingStore = useSettingStore()
+
+  const isQueuePanelV2Enabled = computed(() =>
+    settingStore.get('Comfy.Queue.QPOV2')
+  )
+  const isRunProgressBarEnabled = computed(
+    () => settingStore.get('Comfy.Queue.ShowRunProgressBar') !== false
+  )
+
+  return {
+    isQueuePanelV2Enabled,
+    isRunProgressBarEnabled
+  }
+}

src/composables/useAppMode.ts

@@ -2,7 +2,12 @@ import { computed, ref } from 'vue'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
-export type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
+export type AppMode =
+  | 'graph'
+  | 'app'
+  | 'builder:inputs'
+  | 'builder:outputs'
+  | 'builder:arrange'
 
 const enableAppBuilder = ref(true)
 
@@ -18,13 +23,17 @@ export function useAppMode() {
   const isBuilderMode = computed(
     () => isSelectMode.value || isArrangeMode.value
   )
-  const isSelectMode = computed(() => mode.value === 'builder:select')
+  const isSelectInputsMode = computed(() => mode.value === 'builder:inputs')
+  const isSelectOutputsMode = computed(() => mode.value === 'builder:outputs')
+  const isSelectMode = computed(
+    () => isSelectInputsMode.value || isSelectOutputsMode.value
+  )
   const isArrangeMode = computed(() => mode.value === 'builder:arrange')
   const isAppMode = computed(
     () => mode.value === 'app' || mode.value === 'builder:arrange'
   )
   const isGraphMode = computed(
-    () => mode.value === 'graph' || mode.value === 'builder:select'
+    () => mode.value === 'graph' || isSelectMode.value
   )
 
   function setMode(newMode: AppMode) {
@@ -39,6 +48,8 @@ export function useAppMode() {
     enableAppBuilder,
     isBuilderMode,
     isSelectMode,
+    isSelectInputsMode,
+    isSelectOutputsMode,
     isArrangeMode,
     isAppMode,
     isGraphMode,

src/composables/useCoreCommands.ts

@@ -53,6 +53,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { ensureWorkflowSuffix, getWorkflowSuffix } from '@/utils/formatUtil'
 import {
   getAllNonIoNodesInSubgraph,
   getExecutionIdsForSelectedNodes
@@ -207,7 +208,9 @@ export function useCoreCommands(): ComfyCommand[] {
         })
         if (!newName || newName === workflow.filename) return
 
-        const newPath = workflow.directory + '/' + newName + '.json'
+        const suffix = getWorkflowSuffix(workflow.suffix)
+        const newPath =
+          workflow.directory + '/' + ensureWorkflowSuffix(newName, suffix)
         await workflowService.renameWorkflow(workflow, newPath)
       }
     },

src/composables/useNewMenuItemIndicator.test.ts

@@ -98,6 +98,80 @@ describe('useNewMenuItemIndicator', () => {
     )
   })
 
+  it('does not count hidden items as unseen', () => {
+    const items: WorkflowMenuItem[] = [
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { hasUnseenItems } = useNewMenuItemIndicator(() => items)
+
+    expect(hasUnseenItems.value).toBe(false)
+  })
+
+  it('markAsSeen does not include never-seen hidden items', () => {
+    const items: WorkflowMenuItem[] = [
+      ...createItems('feature-a'),
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).toHaveBeenCalledWith(
+      'Comfy.WorkflowActions.SeenItems',
+      ['feature-a']
+    )
+  })
+
+  it('markAsSeen retains previously-seen hidden items', () => {
+    mockSettingStore.get.mockReturnValue(['hidden-feature'])
+    const items: WorkflowMenuItem[] = [
+      ...createItems('feature-a'),
+      {
+        id: 'hidden-feature',
+        label: 'Hidden',
+        icon: 'pi pi-test',
+        command: vi.fn(),
+        isNew: true,
+        badge: 'BETA',
+        visible: false
+      }
+    ]
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).toHaveBeenCalledWith(
+      'Comfy.WorkflowActions.SeenItems',
+      ['feature-a', 'hidden-feature']
+    )
+  })
+
+  it('markAsSeen skips write when stored list already matches', () => {
+    mockSettingStore.get.mockReturnValue(['feature-a', 'feature-b'])
+    const items = createItems('feature-a', 'feature-b')
+    const { markAsSeen } = useNewMenuItemIndicator(() => items)
+
+    markAsSeen()
+
+    expect(mockSettingStore.set).not.toHaveBeenCalled()
+  })
+
   it('markAsSeen does nothing when there are no new items', () => {
     const items: WorkflowMenuItem[] = [
       { id: 'regular', label: 'Regular', icon: 'pi pi-test', command: vi.fn() }

src/composables/useNewMenuItemIndicator.ts

@@ -7,11 +7,10 @@ import type {
   WorkflowMenuItem
 } from '@/types/workflowMenuItem'
 
-function getNewItemIds(items: WorkflowMenuItem[]): string[] {
+function getNewActions(items: WorkflowMenuItem[]): WorkflowMenuAction[] {
   return items
     .filter((i): i is WorkflowMenuAction => !('separator' in i && i.separator))
     .filter((i) => i.isNew)
-    .map((i) => i.id)
 }
 
 export function useNewMenuItemIndicator(
@@ -19,7 +18,7 @@ export function useNewMenuItemIndicator(
 ) {
   const settingStore = useSettingStore()
 
-  const newItemIds = computed(() => getNewItemIds(toValue(menuItems)))
+  const newActions = computed(() => getNewActions(toValue(menuItems)))
 
   const seenItems = computed<string[]>(
     () => settingStore.get('Comfy.WorkflowActions.SeenItems') ?? []
@@ -27,14 +26,28 @@ export function useNewMenuItemIndicator(
 
   const hasUnseenItems = computed(() => {
     const seen = new Set(seenItems.value)
-    return newItemIds.value.some((id) => !seen.has(id))
+    return newActions.value
+      .filter((i) => i.visible !== false)
+      .some((i) => !seen.has(i.id))
   })
 
   function markAsSeen() {
-    if (!newItemIds.value.length) return
-    void settingStore.set('Comfy.WorkflowActions.SeenItems', [
-      ...newItemIds.value
-    ])
+    const actions = newActions.value
+    if (!actions.length) return
+
+    const seen = new Set(seenItems.value)
+    const visibleIds = actions
+      .filter((i) => i.visible !== false)
+      .map((i) => i.id)
+    const retainedIds = actions
+      .filter((i) => i.visible === false && seen.has(i.id))
+      .map((i) => i.id)
+
+    const nextSeen = [...visibleIds, ...retainedIds]
+    if (nextSeen.length === seen.size && nextSeen.every((id) => seen.has(id)))
+      return
+
+    void settingStore.set('Comfy.WorkflowActions.SeenItems', nextSeen)
   }
 
   return { hasUnseenItems, markAsSeen }

src/composables/useWorkflowActionsMenu.test.ts

@@ -44,6 +44,10 @@ const mockCanvasStore = vi.hoisted(() => ({
   linearMode: false
 }))
 
+const mockAppModeStore = vi.hoisted(() => ({
+  enterBuilder: vi.fn()
+}))
+
 const mockFeatureFlags = vi.hoisted(() => ({
   flags: { linearToggleEnabled: false }
 }))
@@ -73,6 +77,10 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn(() => mockCanvasStore)
 }))
 
+vi.mock('@/stores/appModeStore', () => ({
+  useAppModeStore: vi.fn(() => mockAppModeStore)
+}))
+
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => mockFeatureFlags)
 }))
@@ -80,7 +88,9 @@ vi.mock('@/composables/useFeatureFlags', () => ({
 type MenuItems = ReturnType<typeof useWorkflowActionsMenu>['menuItems']['value']
 
 function actionItems(items: MenuItems): WorkflowMenuAction[] {
-  return items.filter((i): i is WorkflowMenuAction => !i.separator)
+  return items.filter(
+    (i): i is WorkflowMenuAction => !i.separator && i.visible !== false
+  )
 }
 
 function menuLabels(items: MenuItems) {
@@ -288,6 +298,18 @@ describe('useWorkflowActionsMenu', () => {
     expect(mockBookmarkStore.toggleBookmarked).toHaveBeenCalledWith('test.json')
   })
 
+  it('enter builder mode calls enterBuilder', async () => {
+    mockFeatureFlags.flags.linearToggleEnabled = true
+
+    const { menuItems } = useWorkflowActionsMenu(vi.fn(), { isRoot: true })
+    await findItem(
+      menuItems.value,
+      'breadcrumbsMenu.enterBuilderMode'
+    ).command?.()
+
+    expect(mockAppModeStore.enterBuilder).toHaveBeenCalled()
+  })
+
   it('app mode toggle executes Comfy.ToggleLinear', async () => {
     mockFeatureFlags.flags.linearToggleEnabled = true
 

src/composables/useWorkflowActionsMenu.ts

@@ -13,6 +13,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import type {
   WorkflowMenuAction,
   WorkflowMenuItem
@@ -52,6 +53,7 @@ export function useWorkflowActionsMenu(
   const menuItemStore = useMenuItemStore()
   const canvasStore = useCanvasStore()
   const { flags } = useFeatureFlags()
+  const { enterBuilder } = useAppModeStore()
 
   const targetWorkflow = computed(
     () => workflow?.value ?? workflowStore.activeWorkflow
@@ -81,9 +83,9 @@ export function useWorkflowActionsMenu(
       prependSeparator = false,
       isNew = false
     }: AddItemOptions) => {
-      if (!visible) return
-      if (prependSeparator) items.push({ separator: true })
+      if (prependSeparator && visible) items.push({ separator: true })
       const item: WorkflowMenuAction = { id, label, icon, command, disabled }
+      if (!visible) item.visible = false
       if (isNew) {
         item.badge = t('g.experimental')
         item.isNew = true
@@ -96,6 +98,11 @@ export function useWorkflowActionsMenu(
       isRoot && (menuItemStore.hasSeenLinear || flags.linearToggleEnabled)
     const isBookmarked = bookmarkStore.isBookmarked(workflow?.path ?? '')
 
+    const toggleLinear = async () => {
+      await commandStore.execute('Comfy.ToggleLinear', {
+        metadata: { source: 'breadcrumb_menu' }
+      })
+    }
     addItem({
       id: 'rename',
       label: t('g.rename'),
@@ -181,21 +188,40 @@ export function useWorkflowActionsMenu(
     })
 
     addItem({
-      id: 'toggle-app-mode',
-      label: isLinearMode
-        ? t('breadcrumbsMenu.exitAppMode')
-        : t('breadcrumbsMenu.enterAppMode'),
-      icon: isLinearMode
-        ? 'icon-[comfy--workflow]'
-        : 'icon-[lucide--panels-top-left]',
-      command: async () => {
-        await commandStore.execute('Comfy.ToggleLinear', {
-          metadata: { source: 'breadcrumb_menu' }
-        })
-      },
-      visible: showAppModeItems,
+      id: 'share',
+      label: t('menuLabels.Share'),
+      icon: 'icon-[comfy--send]',
+      command: async () => {},
+      disabled: true,
+      visible: isRoot
+    })
+
+    addItem({
+      id: 'enter-app-mode',
+      label: t('breadcrumbsMenu.enterAppMode'),
+      icon: 'icon-[lucide--panels-top-left]',
+      command: toggleLinear,
+      visible: showAppModeItems && !isLinearMode,
       prependSeparator: true,
-      isNew: !isLinearMode
+      isNew: true
+    })
+
+    addItem({
+      id: 'exit-app-mode',
+      label: t('breadcrumbsMenu.exitAppMode'),
+      icon: 'icon-[comfy--workflow]',
+      command: toggleLinear,
+      visible: isLinearMode,
+      prependSeparator: true
+    })
+
+    addItem({
+      id: 'enter-builder-mode',
+      label: t('breadcrumbsMenu.enterBuilderMode'),
+      icon: 'icon-[lucide--hammer]',
+      command: () => enterBuilder(),
+      visible: showAppModeItems,
+      isNew: true
     })
 
     addItem({

src/composables/useWorkflowTemplateSelectorDialog.test.ts

@@ -107,6 +107,32 @@ describe('useWorkflowTemplateSelectorDialog', () => {
       )
     })
 
+    it('invokes afterClose callback when dialog is closed', () => {
+      mockNewUserService.isNewUser.mockReturnValue(false)
+      const afterClose = vi.fn()
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show('command', { afterClose })
+
+      const onClose =
+        mockDialogService.showLayoutDialog.mock.calls[0][0].props.onClose
+      onClose()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalled()
+      expect(afterClose).toHaveBeenCalled()
+    })
+
+    it('does not fail when afterClose is not provided', () => {
+      mockNewUserService.isNewUser.mockReturnValue(false)
+
+      const dialog = useWorkflowTemplateSelectorDialog()
+      dialog.show('command')
+
+      const onClose =
+        mockDialogService.showLayoutDialog.mock.calls[0][0].props.onClose
+      expect(() => onClose()).not.toThrow()
+    })
+
     it('tracks telemetry with source', () => {
       mockNewUserService.isNewUser.mockReturnValue(false)
 

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -1,5 +1,6 @@
 import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
 import { useTelemetry } from '@/platform/telemetry'
+import type { TemplateLibraryMetadata } from '@/platform/telemetry/types'
 import { useDialogService } from '@/services/dialogService'
 import { useNewUserService } from '@/services/useNewUserService'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -17,8 +18,8 @@ export const useWorkflowTemplateSelectorDialog = () => {
   }
 
   function show(
-    source: 'sidebar' | 'menu' | 'command' = 'command',
-    options?: { initialCategory?: string }
+    source: TemplateLibraryMetadata['source'] = 'command',
+    options?: { initialCategory?: string; afterClose?: () => void }
   ) {
     useTelemetry()?.trackTemplateLibraryOpened({ source })
 
@@ -30,7 +31,10 @@ export const useWorkflowTemplateSelectorDialog = () => {
       key: DIALOG_KEY,
       component: WorkflowTemplateSelectorDialog,
       props: {
-        onClose: hide,
+        onClose: () => {
+          hide()
+          options?.afterClose?.()
+        },
         initialCategory
       }
     })

src/lib/litegraph/src/LGraphCanvas.ts

@@ -12,6 +12,7 @@ import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
+import { createCursorCache } from './cursorCache'
 import { DragAndScale } from './DragAndScale'
 import type { AnimationOptions } from './DragAndScale'
 import type { LGraph } from './LGraph'
@@ -365,6 +366,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this.canvas.dispatchEvent(new CustomEvent(type, { detail }))
   }
 
+  private _setCursor!: ReturnType<typeof createCursorCache>
+
   private _updateCursorStyle() {
     if (!this.state.shouldSetCursor) return
 
@@ -387,7 +390,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       cursor = 'grab'
     }
 
-    this.canvas.style.cursor = cursor
+    this._setCursor(cursor)
   }
 
   // Whether the canvas was previously being dragged prior to pressing space key.
@@ -1912,6 +1915,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     this.pointer.element = element
 
     if (!element) return
+    this._setCursor = createCursorCache(element)
 
     // TODO: classList.add
     element.className += ' lgraphcanvas'
@@ -2971,7 +2975,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           }
 
           // Set appropriate cursor for resize direction
-          this.canvas.style.cursor = cursors[resizeDirection]
+          this._setCursor(cursors[resizeDirection])
           return
         }
       }
@@ -6574,7 +6578,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         const ySizeFix = opts.posSizeFix[1] * LiteGraph.NODE_SLOT_HEIGHT
         const nodeX = opts.position[0] + opts.posAdd[0] + xSizeFix
         const nodeY = opts.position[1] + opts.posAdd[1] + ySizeFix
-        const pos = [nodeX, nodeY]
+        const pos: [number, number] = [nodeX, nodeY]
         const newNode = LiteGraph.createNode(nodeTypeStr, nodeNewOpts?.title, {
           pos
         })

src/lib/litegraph/src/LiteGraphGlobal.ts

@@ -10,7 +10,13 @@ import { Reroute } from './Reroute'
 import { InputIndicators } from './canvas/InputIndicators'
 import { LabelPosition, SlotDirection, SlotShape, SlotType } from './draw'
 import { Rectangle } from './infrastructure/Rectangle'
-import type { Dictionary, ISlotType, Rect, WhenNullish } from './interfaces'
+import type {
+  CreateNodeOptions,
+  Dictionary,
+  ISlotType,
+  Rect,
+  WhenNullish
+} from './interfaces'
 import { distance, isInsideRectangle, overlapBounding } from './measure'
 import { SubgraphIONodeBase } from './subgraph/SubgraphIONodeBase'
 import { SubgraphSlot } from './subgraph/SubgraphSlotBase'
@@ -525,7 +531,7 @@ export class LiteGraphGlobal {
   createNode(
     type: string,
     title?: string,
-    options?: Dictionary<unknown>
+    options?: CreateNodeOptions
   ): LGraphNode | null {
     const base_class = this.registered_node_types[type]
     if (!base_class) {
@@ -561,10 +567,7 @@ export class LiteGraphGlobal {
 
     // extra options
     if (options) {
-      for (const i in options) {
-        // @ts-expect-error #577 Requires interface
-        node[i] = options[i]
-      }
+      Object.assign(node, options)
     }
 
     // callback

src/lib/litegraph/src/cursorCache.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createCursorCache } from './cursorCache'
+
+function createMockElement() {
+  let cursorValue = ''
+  const setter = vi.fn((value: string) => {
+    cursorValue = value
+  })
+
+  const element = document.createElement('div')
+  Object.defineProperty(element.style, 'cursor', {
+    get: () => cursorValue,
+    set: setter
+  })
+
+  return { element, setter }
+}
+
+describe('createCursorCache', () => {
+  it('should only write to DOM when cursor value changes', () => {
+    const { element, setter } = createMockElement()
+    const setCursor = createCursorCache(element)
+
+    setCursor('crosshair')
+    setCursor('crosshair')
+    setCursor('crosshair')
+
+    expect(setter).toHaveBeenCalledTimes(1)
+    expect(setter).toHaveBeenCalledWith('crosshair')
+  })
+
+  it('should write to DOM when cursor value differs', () => {
+    const { element, setter } = createMockElement()
+    const setCursor = createCursorCache(element)
+
+    setCursor('default')
+    setCursor('crosshair')
+    setCursor('grabbing')
+
+    expect(setter).toHaveBeenCalledTimes(3)
+    expect(setter).toHaveBeenNthCalledWith(1, 'default')
+    expect(setter).toHaveBeenNthCalledWith(2, 'crosshair')
+    expect(setter).toHaveBeenNthCalledWith(3, 'grabbing')
+  })
+
+  it('should skip repeated values interspersed with changes', () => {
+    const { element, setter } = createMockElement()
+    const setCursor = createCursorCache(element)
+
+    setCursor('default')
+    setCursor('default')
+    setCursor('grab')
+    setCursor('grab')
+    setCursor('default')
+
+    expect(setter).toHaveBeenCalledTimes(3)
+  })
+})