fix test disable

- bump card seq on each latent frame so the streaming preview stays on
  top of the generating fan instead of sinking below newer outputs
- give the finished output a fresh seq so it lands above cards that
  arrived mid-run
- show a selected history output instead of the generating screen while
  a run is active (expose isFollowing from linearOutputStore)
- collapse per-line eslint-disables in GeneratingCard.test.ts into one
  file-level directive

.claude/settings.json

@@ -1,86 +0,0 @@
-{
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash",
-        "hooks": [
-          {
-            "type": "command",
-            "if": "Bash(tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(vue-tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpm exec tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx oxlint *)",
-            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx stylelint *)",
-            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
-          }
-        ]
-      }
-    ]
-  }
-}

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -134,6 +134,27 @@ jobs:
           fi
           echo '✅ No Customer.io references found'
 
+      - name: Scan dist for Syft telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Syft references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '(?i)syft' \
+            -e '(?i)sy-d\.io' \
+            dist; then
+            echo '❌ ERROR: Syft references found in dist assets!'
+            echo 'Syft must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Syft references found'
+
       - name: Scan dist for Cloudflare Turnstile sitekey references
         run: |
           set -euo pipefail

.github/workflows/ci-tests-e2e-coverage.yaml

@@ -121,7 +121,7 @@ jobs:
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
             --precision 1 \
-            --ignore-errors source,unmapped,range \
+            --ignore-errors source,unmapped \
             --synthesize-missing
 
       - name: Upload HTML report artifact

.github/workflows/ci-tests-storybook.yaml

@@ -95,6 +95,7 @@ jobs:
     if: |
       github.event_name == 'workflow_dispatch'
       || (github.event_name == 'pull_request'
+          && github.event.pull_request.head.repo.fork == false
           && startsWith(github.head_ref, 'version-bump-')
           && (needs.changes.outputs.storybook-changes == 'true'
               || needs.changes.outputs.app-frontend-changes == 'true'

.github/workflows/ci-tests-unit.yaml

@@ -55,6 +55,3 @@ jobs:
           flags: unit
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false
-
-      - name: Enforce critical coverage gate
-        run: pnpm test:coverage:critical

.github/workflows/ci-vercel-website-preview.yaml

@@ -30,7 +30,7 @@ concurrency:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
     runs-on: ubuntu-latest
     permissions:
       contents: read

.github/workflows/ci-website-e2e.yaml

@@ -67,7 +67,15 @@ jobs:
 
       - name: Deploy report to Cloudflare
         id: deploy
-        if: always() && !cancelled()
+        if: >-
+          ${{
+            always() &&
+            !cancelled() &&
+            (
+              github.event_name != 'pull_request' ||
+              github.event.pull_request.head.repo.fork == false
+            )
+          }}
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.github/workflows/cloud-dispatch-build.yaml

@@ -32,12 +32,13 @@ jobs:
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       (github.event.pull_request.head.repo.fork == false &&
+        ((github.event.action == 'labeled' &&
+          contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
+         (github.event.action == 'synchronize' &&
+          (contains(github.event.pull_request.labels.*.name, 'preview') ||
+           contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
+           contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

.github/workflows/cloud-dispatch-cleanup.yaml

@@ -21,6 +21,7 @@ jobs:
     # - Preview label specifically removed
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.pull_request.head.repo.fork == false &&
       ((github.event.action == 'closed' &&
         (contains(github.event.pull_request.labels.*.name, 'preview') ||
          contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||

apps/website/public/icons/node-link.svg

@@ -1,3 +1,3 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Vector" d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="var(--fill-0, #F2FF59)"/>
+<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
 </svg>

apps/website/src/components/blocks/FeatureGrid01.vue

@@ -56,7 +56,7 @@ const columnClass: Record<ColumnCount, string> = {
 
 <template>
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <SectionHeader :label="eyebrow" align="start">
+    <SectionHeader max-width="xl" :label="eyebrow" align="start">
       {{ heading }}
       <template v-if="subtitle" #subtitle>
         <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">

apps/website/src/components/contact/FormSection.vue

@@ -33,36 +33,41 @@ useHeroAnimation({
 </script>
 
 <template>
-  <section ref="sectionRef" class="px-4 py-20 lg:flex lg:px-20 lg:py-24">
+  <section
+    ref="sectionRef"
+    class="px-4 py-20 lg:flex lg:gap-16 lg:px-20 lg:py-24"
+  >
     <!-- Left column: intro + image -->
     <div class="lg:w-1/2">
-      <SectionLabel ref="badgeRef">
-        {{ t(tk('badge'), locale) }}
-      </SectionLabel>
+      <div class="lg:max-w-xl">
+        <SectionLabel ref="badgeRef">
+          {{ t(tk('badge'), locale) }}
+        </SectionLabel>
 
-      <h1
-        ref="headingRef"
-        class="text-primary-comfy-canvas mt-4 text-3xl font-light whitespace-pre-line lg:text-5xl"
-      >
-        {{ t(tk('heading'), locale) }}
-      </h1>
+        <h1
+          ref="headingRef"
+          class="mt-4 text-3xl font-light whitespace-pre-line text-primary-comfy-canvas lg:text-5xl"
+        >
+          {{ t(tk('heading'), locale) }}
+        </h1>
 
-      <div ref="descRef">
-        <p class="text-primary-comfy-canvas mt-4 text-sm">
-          {{ t(tk('description'), locale) }}
-        </p>
+        <div ref="descRef">
+          <p class="mt-4 text-sm text-primary-comfy-canvas">
+            {{ t(tk('description'), locale) }}
+          </p>
 
-        <p class="text-primary-comfy-canvas mt-4 text-sm">
-          {{ t(tk('supportLink'), locale) }}
-          <a
-            href="https://docs.comfy.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-primary-comfy-yellow underline"
-          >
-            {{ t(tk('supportLinkCta'), locale) }}
-          </a>
-        </p>
+          <p class="mt-4 text-sm text-primary-comfy-canvas">
+            {{ t(tk('supportLink'), locale) }}
+            <a
+              href="https://docs.comfy.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-primary-comfy-yellow underline"
+            >
+              {{ t(tk('supportLinkCta'), locale) }}
+            </a>
+          </p>
+        </div>
       </div>
 
       <div ref="imageRef" class="mt-8 overflow-hidden rounded-2xl lg:-ml-20">

apps/website/src/components/customers/ArticleNav.vue

@@ -15,7 +15,7 @@ const { categories } = defineProps<{
 
 const activeSection = ref(categories[0]?.value ?? '')
 
-const HEADER_OFFSET = -144
+const HEADER_OFFSET_PX = -144
 const BOTTOM_THRESHOLD_PX = 4
 const SCROLL_SAFETY_MS = 1500
 
@@ -52,7 +52,7 @@ function scrollToSection(id: string) {
   const el = document.getElementById(id)
   if (el) {
     scrollTo(el, {
-      offset: HEADER_OFFSET,
+      offset: HEADER_OFFSET_PX,
       duration: 0.8,
       immediate: prefersReducedMotion(),
       onComplete: clearScrollLock

apps/website/src/components/customers/content/ListItem.astro

@@ -1,5 +1,5 @@
 <li
-  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow before:content-['']"
+  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow"
 >
   <slot />
 </li>

apps/website/src/data/mainNavigation.ts

@@ -40,13 +40,13 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     {
       label: t('nav.products', locale),
       featured: {
-        imageSrc: 'https://media.comfy.org/website/nav/featured-model-card.jpg',
+        imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
         imageAlt: t('nav.featuredProductsAlt', locale),
         title: t('nav.featuredProductsTitle', locale),
         cta: {
-          label: t('cta.tryWorkflow', locale),
+          label: t('cta.getStarted', locale),
           ariaLabel: t('nav.featuredProductsCtaAria', locale),
-          href: 'https://comfy.org/workflows/api_seedance2_0_r2v-64f4db9e3e33/'
+          href: routes.mcp
         }
       },
       columns: [

apps/website/src/i18n/translations.ts

@@ -26,6 +26,10 @@ const translations = {
     en: 'Try Workflow',
     'zh-CN': '试用工作流'
   },
+  'cta.getStarted': {
+    en: 'GET STARTED',
+    'zh-CN': '快速开始'
+  },
   'cta.watchNow': {
     en: 'Watch Now',
     'zh-CN': '立即观看'
@@ -2196,16 +2200,16 @@ const translations = {
   // Featured dropdown cards — keys are keyed by parent nav item, not card content,
   // so the copy can be swapped without renaming the key.
   'nav.featuredProductsTitle': {
-    en: 'New Release: Seedance 2.0',
-    'zh-CN': '全新发布：Seedance 2.0'
+    en: 'NEW: COMFY MCP',
+    'zh-CN': '全新发布：Comfy MCP'
   },
   'nav.featuredProductsAlt': {
-    en: 'Seedance 2.0 release feature image',
-    'zh-CN': 'Seedance 2.0 发布精选图片'
+    en: 'Comfy MCP feature image',
+    'zh-CN': 'Comfy MCP 精选图片'
   },
   'nav.featuredProductsCtaAria': {
-    en: 'Try the Seedance 2.0 workflow',
-    'zh-CN': '试用 Seedance 2.0 工作流'
+    en: 'Get started with Comfy MCP',
+    'zh-CN': '开始使用 Comfy MCP'
   },
   'nav.featuredCommunityTitle': {
     en: 'Sky Replacement',

browser_tests/assets/linear-validation-warning.json

@@ -0,0 +1,45 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": {
+        "0": 64,
+        "1": 104
+      },
+      "size": {
+        "0": 210,
+        "1": 58
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "linearData": {
+      "inputs": [],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -28,6 +28,7 @@ import {
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
+  SidebarTab,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -70,6 +71,7 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
+  private _appsTab: SidebarTab | null = null
   private _assetsTab: AssetsSidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
@@ -104,6 +106,11 @@ class ComfyMenu {
     return this._nodeLibraryTabV2
   }
 
+  get appsTab() {
+    this._appsTab ??= new SidebarTab(this.page, 'apps')
+    return this._appsTab
+  }
+
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab
@@ -537,7 +544,6 @@ export const comfyPageFixture = base.extend<{
         'Comfy.TutorialCompleted': true,
         'Comfy.Queue.MaxHistoryItems': 64,
         'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
-        'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
         'Comfy.VersionCompatibility.DisableWarnings': true,

browser_tests/fixtures/components/OutputHistory.ts

@@ -70,11 +70,6 @@ export class OutputHistoryComponent {
     return this.page.getByTestId(ids.headerProgressBar)
   }
 
-  /** The in-progress item's progress bar (inside the thumbnail). */
-  get itemProgressBar(): Locator {
-    return this.inProgressItems.first().getByTestId(ids.itemProgressBar)
-  }
-
   /** Overall progress in the header bar. */
   get headerOverallProgress(): Locator {
     return this.headerProgressBar.getByTestId(ids.progressOverall)
@@ -84,14 +79,4 @@ export class OutputHistoryComponent {
   get headerNodeProgress(): Locator {
     return this.headerProgressBar.getByTestId(ids.progressNode)
   }
-
-  /** Overall progress in the in-progress item bar. */
-  get itemOverallProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressOverall)
-  }
-
-  /** Node progress in the in-progress item bar. */
-  get itemNodeProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressNode)
-  }
 }

browser_tests/fixtures/components/SidebarTab.ts

@@ -4,7 +4,7 @@ import { expect } from '@playwright/test'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-class SidebarTab {
+export class SidebarTab {
   public readonly tabButton: Locator
   public readonly selectedTabButton: Locator
 

browser_tests/fixtures/components/WorkflowActionsDropdown.ts

@@ -0,0 +1,40 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * The graph/app view-mode toggle and its workflow actions dropdown.
+ * A separate instance mounts in each host - the subgraph breadcrumb (graph
+ * mode) and the app-mode center panel - and unmounts as the mode flips.
+ */
+export class WorkflowActionsDropdown {
+  /** The segmented graph/app toggle hosting the workflow actions trigger. */
+  public readonly viewModeToggle: Locator
+  /** The active segment; opens the workflow actions menu. */
+  public readonly trigger: Locator
+  /** The inactive segment that switches into app mode. */
+  public readonly enterAppModeSegment: Locator
+  /** The inactive segment that switches back to the node graph. */
+  public readonly enterGraphSegment: Locator
+  /** The workflow actions dropdown menu. */
+  public readonly menu: Locator
+
+  constructor(page: Page) {
+    this.viewModeToggle = page.getByTestId(
+      TestIds.workflowActions.viewModeToggle
+    )
+    this.trigger = this.triggerIn(this.viewModeToggle)
+    this.enterAppModeSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter app mode'
+    })
+    this.enterGraphSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter node graph'
+    })
+    this.menu = page.getByRole('menu', { name: 'Workflow actions' })
+  }
+
+  /** The trigger as rendered inside a specific mode's host. */
+  triggerIn(host: Locator): Locator {
+    return host.getByRole('button', { name: 'Workflow actions' })
+  }
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -4,6 +4,7 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
+import { WorkflowActionsDropdown } from '@e2e/fixtures/components/WorkflowActionsDropdown'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -19,6 +20,7 @@ export class AppModeHelper {
   readonly outputHistory: OutputHistoryComponent
   readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
+  readonly workflowActions: WorkflowActionsDropdown
 
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -34,6 +36,10 @@ export class AppModeHelper {
   public readonly outputPlaceholder: Locator
   /** The linear-mode widget list container (visible in app mode). */
   public readonly linearWidgets: Locator
+  /** The validation warning shown above the app mode run button. */
+  public readonly validationWarning: Locator
+  /** The action that opens graph mode errors from the validation warning. */
+  public readonly viewErrorsInGraphButton: Locator
   /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
   public readonly imagePickerPopover: Locator
   /** The Run button in the app mode footer. */
@@ -73,6 +79,7 @@ export class AppModeHelper {
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
     this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
+    this.workflowActions = new WorkflowActionsDropdown(comfyPage.page)
 
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -92,13 +99,19 @@ export class AppModeHelper {
     this.outputPlaceholder = this.page.getByTestId(
       TestIds.builder.outputPlaceholder
     )
-    this.linearWidgets = this.page.getByTestId('linear-widgets')
+    this.linearWidgets = this.page.getByTestId(TestIds.linear.widgetContainer)
+    this.validationWarning = this.page.getByTestId(
+      TestIds.linear.validationWarning
+    )
+    this.viewErrorsInGraphButton = this.validationWarning.getByTestId(
+      TestIds.linear.viewErrorsInGraph
+    )
     this.imagePickerPopover = this.page
       .getByRole('dialog')
       .filter({ has: this.page.getByRole('button', { name: 'All' }) })
       .first()
     this.runButton = this.page
-      .getByTestId('linear-run-button')
+      .getByTestId(TestIds.linear.runButton)
       .getByRole('button', { name: /run/i })
     this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
     this.emptyWorkflowText = this.page.getByTestId(
@@ -175,10 +188,7 @@ export class AppModeHelper {
       .waitFor({ state: 'hidden', timeout: 5000 })
       .catch(() => {})
 
-    await this.page
-      .getByRole('button', { name: 'Workflow actions' })
-      .first()
-      .click()
+    await this.workflowActions.trigger.click()
     await this.page
       .getByRole('menuitem', { name: /Build app|Edit app/ })
       .click()

browser_tests/fixtures/selectors.ts

@@ -172,6 +172,9 @@ export const TestIds = {
     mobileNavigation: 'linear-mobile-navigation',
     mobileWorkflows: 'linear-mobile-workflows',
     outputInfo: 'linear-output-info',
+    runButton: 'linear-run-button',
+    validationWarning: 'linear-validation-warning',
+    viewErrorsInGraph: 'linear-view-errors',
     widgetContainer: 'linear-widgets'
   },
   builder: {
@@ -208,7 +211,6 @@ export const TestIds = {
     videoOutput: 'linear-video-output',
     cancelRun: 'linear-cancel-run',
     headerProgressBar: 'linear-header-progress-bar',
-    itemProgressBar: 'linear-item-progress-bar',
     progressOverall: 'linear-progress-overall',
     progressNode: 'linear-progress-node'
   },
@@ -235,6 +237,9 @@ export const TestIds = {
     renameInput: 'subgraph-breadcrumb-rename-input',
     menu: (key: string) => `subgraph-breadcrumb-menu-${key}`
   },
+  workflowActions: {
+    viewModeToggle: 'view-mode-toggle'
+  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`

browser_tests/tests/appMode.spec.ts

@@ -1,9 +1,14 @@
+import { mergeTests } from '@playwright/test'
+
 import {
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import { subgraphBreadcrumbFixture } from '@e2e/fixtures/helpers/SubgraphBreadcrumbHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+const test = mergeTests(comfyPageFixture, subgraphBreadcrumbFixture)
+
 test.describe('App mode usage', () => {
   test('Drag and Drop @vue-nodes', async ({ comfyPage, comfyFiles }) => {
     const { centerPanel } = comfyPage.appMode
@@ -137,6 +142,117 @@ test.describe('App mode usage', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe(targetImage)
   })
 
+  test('Shows a single side toolbar per mode, filtered to assets + apps in app mode', async ({
+    comfyPage
+  }) => {
+    const { sideToolbar, nodeLibraryTab, assetsTab, appsTab } = comfyPage.menu
+
+    await test.step('Graph mode shows the full toolbar', async () => {
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(nodeLibraryTab.tabButton).toBeVisible()
+    })
+
+    await test.step('App mode shows only assets + apps', async () => {
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+      await expect(comfyPage.appMode.centerPanel).toBeVisible()
+
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(assetsTab.tabButton).toBeVisible()
+      await expect(appsTab.tabButton).toBeVisible()
+      await expect(nodeLibraryTab.tabButton).toBeHidden()
+    })
+  })
+
+  test('Workflow actions menu keeps the same position across graph/app mode', async ({
+    comfyPage,
+    subgraphBreadcrumb
+  }) => {
+    const { workflowActions, centerPanel } = comfyPage.appMode
+
+    // Toggling graph<->app mode happens from this control, so it must not move
+    // out from under the cursor as the mode flips.
+    const graphActions = workflowActions.triggerIn(
+      subgraphBreadcrumb.panel.root
+    )
+    await expect(graphActions).toBeVisible()
+    const graphBox = await graphActions.boundingBox()
+
+    expect(graphBox).not.toBeNull()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+
+    const appActions = workflowActions.triggerIn(centerPanel)
+    await expect(appActions).toBeVisible()
+
+    // The toggle segments reorder (morph) as the mode flips, so poll until the
+    // active control settles at the same x it occupied in graph mode.
+    await expect
+      .poll(async () => {
+        const box = await appActions.boundingBox()
+        return box ? Math.abs(box.x - graphBox!.x) : Infinity
+      })
+      .toBeLessThanOrEqual(1)
+  })
+
+  test('Toggle segment flips mode without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+
+    await workflowActions.enterAppModeSegment.click()
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    // The inactive segment switches mode; it must not also open the actions menu.
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+  })
+
+  test('Toggle segment flips mode via keyboard without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await workflowActions.enterAppModeSegment.focus()
+    await workflowActions.enterAppModeSegment.press('Enter')
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.trigger).toBeFocused()
+  })
+
+  test('Mode toggle re-appears after exiting the builder to graph mode', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enableLinearMode()
+    await expect(toggle).toBeVisible()
+
+    await comfyPage.appMode.enterBuilder()
+    await expect(toggle).toBeHidden()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+
+    await comfyPage.appMode.footer.exitButton.click()
+    // Exiting the builder lands in graph mode: the app-mode-only center panel
+    // stays hidden while the graph-mode toggle host re-mounts and the toggle
+    // re-appears.
+    await expect(toggle).toBeVisible()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+  })
+
+  test('Mode toggle survives a sidebar tab remounting the app panel', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(toggle).toBeVisible()
+
+    // Opening a sidebar tab remounts the app panel; the toggle re-renders with it.
+    await comfyPage.menu.assetsTab.tabButton.click()
+    await expect(toggle).toBeVisible()
+  })
+
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
     test('panel navigation', async ({ comfyPage }) => {
       const { mobile } = comfyPage.appMode

browser_tests/tests/appModeValidationWarning.spec.ts

@@ -0,0 +1,106 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { enableErrorsOverlay } from '@e2e/fixtures/helpers/ErrorsTabHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const SAVE_IMAGE_NODE_ID = '9'
+
+function buildSaveImageRequiredInputError(): NodeError {
+  return {
+    class_type: 'SaveImage',
+    dependent_outputs: [],
+    errors: [
+      {
+        type: 'required_input_missing',
+        message: 'Required input is missing: images',
+        details: '',
+        extra_info: { input_name: 'images' }
+      }
+    ]
+  }
+}
+
+test.describe(
+  'App mode validation warning',
+  { tag: ['@ui', '@workflow'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsOverlay(comfyPage)
+      await comfyPage.workflow.loadWorkflow('linear-validation-warning')
+      await comfyPage.appMode.toggleAppMode()
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    })
+
+    test('opens graph errors from the app mode validation warning', async ({
+      comfyPage
+    }) => {
+      await expect(comfyPage.appMode.validationWarning).toBeHidden()
+
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
+      })
+
+      await comfyPage.appMode.runButton.click()
+      const appModeOverlay = comfyPage.appMode.centerPanel.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(appModeOverlay).toBeHidden()
+
+      await expect(comfyPage.appMode.validationWarning).toBeVisible()
+      await expect(comfyPage.appMode.validationWarning).toContainText(
+        /Required input missing/i
+      )
+      await expect(comfyPage.appMode.viewErrorsInGraphButton).toBeVisible()
+
+      await comfyPage.appMode.viewErrorsInGraphButton.click()
+
+      await expect(comfyPage.appMode.linearWidgets).toBeHidden()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
+      ).toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeVisible()
+    })
+
+    test('keeps the app mode run button enabled when the warning is visible', async ({
+      comfyPage
+    }) => {
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
+      })
+
+      await comfyPage.appMode.runButton.click()
+      await expect(comfyPage.appMode.validationWarning).toBeVisible()
+      await expect(comfyPage.appMode.runButton).toBeEnabled()
+
+      let promptQueued = false
+      const mockResponse: PromptResponse = {
+        prompt_id: 'test-id',
+        node_errors: {},
+        error: ''
+      }
+      await comfyPage.page.route(
+        '**/api/prompt',
+        async (route) => {
+          promptQueued = true
+          await route.fulfill({
+            status: 200,
+            body: JSON.stringify(mockResponse)
+          })
+        },
+        { times: 1 }
+      )
+
+      await comfyPage.appMode.runButton.click()
+
+      await expect.poll(() => promptQueued).toBe(true)
+    })
+  }
+)

browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts

@@ -28,7 +28,12 @@ const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
 // matches it against the members self-row.
 const SELF_EMAIL = 'e2e@test.comfy.org'
 
-const BOOT_FEATURES = { team_workspaces_enabled: true } satisfies RemoteConfig
+// consolidated_billing_enabled routes personal workspaces to the unified
+// pricing table asserted here; without it they fall back to the legacy table.
+const BOOT_FEATURES = {
+  team_workspaces_enabled: true,
+  consolidated_billing_enabled: true
+} satisfies RemoteConfig
 // Disable the experimental Asset API: with it on (cloud default) the unmocked
 // asset endpoints 403 and workflow restore throws uncaught, aborting the
 // GraphCanvas onMounted chain before the deep-link loader.

browser_tests/tests/graph.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 
+import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
@@ -15,9 +16,10 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
     await expect
       .poll(() =>
-        comfyPage.page.evaluate(() => {
-          return window.app!.graph!.links.get(1)?.target_slot
-        })
+        comfyPage.page.evaluate(
+          (linkId) => window.app!.graph!.links.get(linkId)?.target_slot,
+          toLinkId(1)
+        )
       )
       .toBe(1)
   })

browser_tests/tests/linearMode.spec.ts

@@ -3,6 +3,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Displays linear controls when app mode active', async ({
@@ -16,7 +17,9 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.linear.runButton)
+    ).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {

browser_tests/tests/maskEditor.spec.ts

@@ -46,6 +46,10 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
+      // Center the node so its header clears the view-mode toggle floating
+      // at the top-left of the canvas.
+      const nodeRef = await comfyPage.nodeOps.getNodeRefById(nodeId)
+      await nodeRef.centerOnNode()
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/outputHistory.spec.ts

@@ -362,13 +362,8 @@ test.describe('Output History', { tag: '@ui' }, () => {
     const ws = await getWebSocket()
     const { exec, jobId } = await startExecution(comfyPage, ws)
 
-    const {
-      inProgressItems,
-      headerOverallProgress,
-      headerNodeProgress,
-      itemOverallProgress,
-      itemNodeProgress
-    } = comfyPage.appMode.outputHistory
+    const { inProgressItems, headerOverallProgress, headerNodeProgress } =
+      comfyPage.appMode.outputHistory
 
     await expect(inProgressItems.first()).toBeVisible()
 
@@ -381,7 +376,6 @@ test.describe('Output History', { tag: '@ui' }, () => {
     exec.progress(jobId, KSAMPLER_NODE, 5, 10)
 
     await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*50%/)
-    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*50%/)
     // Overall still 0% - no nodes completed yet
     await expect(headerOverallProgress).toHaveAttribute('style', /width:\s*0%/)
 
@@ -391,13 +385,11 @@ test.describe('Output History', { tag: '@ui' }, () => {
     const oneNodePercent = Math.round((1 / ALL_NODE_IDS.length) * 100)
     const pct = new RegExp(`width:\\s*${oneNodePercent}%`)
     await expect(headerOverallProgress).toHaveAttribute('style', pct)
-    await expect(itemOverallProgress).toHaveAttribute('style', pct)
 
     // Node progress reaches 100%
     exec.progress(jobId, KSAMPLER_NODE, 10, 10)
 
     await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*100%/)
-    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*100%/)
 
     // Complete remaining nodes - overall reaches 100%
     const remainingNodes = ALL_NODE_IDS.filter((id) => id !== KSAMPLER_NODE)
@@ -410,6 +402,5 @@ test.describe('Output History', { tag: '@ui' }, () => {
       'style',
       /width:\s*100%/
     )
-    await expect(itemOverallProgress).toHaveAttribute('style', /width:\s*100%/)
   })
 })

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -691,7 +691,8 @@ test(
       const emptySlotPos = await seedIOSlot.getOpenSlotPosition()
       await comfyPage.canvas.hover({ position: emptySlotPos })
       await comfyPage.page.mouse.down()
-      await stepsSlot.hover()
+      const { width, height } = (await stepsSlot.boundingBox())!
+      await stepsSlot.hover({ position: { x: (width * 3) / 4, y: height / 2 } })
       await expect.poll(hasSnap).toBe(true)
       await comfyPage.page.mouse.up()
 

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1238,7 +1238,7 @@ test(
   { tag: '@vue-nodes' },
   async ({ comfyMouse, comfyPage }) => {
     async function performDisconnect(slot: Locator, isFast: boolean) {
-      await comfyMouse.dragElementBy(slot, { x: isFast ? -25 : -80 })
+      await comfyMouse.dragElementBy(slot, { x: isFast ? -30 : -80 })
 
       if (!isFast) {
         await expect(comfyPage.contextMenu.litegraphContextMenu).toBeVisible()
@@ -1251,7 +1251,7 @@ test(
 
     const ksamplerLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
     const ksampler = new VueNodeFixture(ksamplerLocator)
-    await comfyMouse.dragElementBy(ksamplerLocator, { x: 100 })
+    await comfyMouse.dragElementBy(ksampler.title, { x: 100 })
 
     await test.step('Disconnection with normal links', async () => {
       await performDisconnect(ksampler.getSlot('model'), true)

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -234,7 +234,8 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
       await comfyPage.page
         .context()
         .grantPermissions(['clipboard-read', 'clipboard-write'])
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.nodeOps.clearGraph()
+      await comfyPage.searchBoxV2.addNode('Load Image')
       await comfyPage.vueNodes.waitForNodes(1)
       await comfyPage.page
         .locator('[data-node-id] img')

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -14,7 +14,8 @@ const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.nodeOps.clearGraph()
+    await comfyPage.searchBoxV2.addNode('Load Image')
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -12,14 +12,14 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
   const getHeaderPos = async (
     comfyPage: ComfyPage,
     title: string
-  ): Promise<{ x: number; y: number; width: number; height: number }> => {
+  ): Promise<{ x: number; y: number }> => {
     const box = await comfyPage.vueNodes
       .getNodeByTitle(title)
       .getByTestId('node-title')
       .first()
       .boundingBox()
     if (!box) throw new Error(`${title} header not found`)
-    return box
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
   }
 
   const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
@@ -84,29 +84,27 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.idleFrames(2)
   }
 
-  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
-      x: 256,
-      y: 256
-    })
+  test('should allow moving nodes by dragging', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const initialHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    await comfyMouse.dragElementBy(node.header, { x: 100, y: 100 })
 
     const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+    await expectPosChanged(initialHeaderPos, newHeaderPos)
   })
 
   test('should not move node when pointer moves less than drag threshold', async ({
-    comfyPage
+    comfyPage,
+    comfyMouse
   }) => {
     const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
 
     // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
-      steps: 5
-    })
-    await comfyPage.page.mouse.up()
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    await comfyMouse.dragElementBy(node.header, { x: 2, y: 1 })
     await comfyPage.nextFrame()
 
     const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
@@ -295,14 +293,12 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
       await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
 
       // Re-fetch drag source after clicks in case the header reflowed.
-      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
-      const centerX = dragSrc.x + dragSrc.width / 2
-      const centerY = dragSrc.y + dragSrc.height / 2
+      const headerPos = await getHeaderPos(comfyPage, 'Load Checkpoint')
 
-      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
       await comfyPage.page.mouse.down()
       await comfyPage.nextFrame()
-      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
+      await comfyPage.page.mouse.move(headerPos.x + dx, headerPos.y + dy, {
         steps: 20
       })
       await comfyPage.page.mouse.up()

browser_tests/tests/vueNodes/nodeStates/pin.spec.ts

@@ -42,7 +42,10 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await expect(pinIndicator2).toBeHidden()
   })
 
-  test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
+  test('should not allow dragging pinned nodes', async ({
+    comfyMouse,
+    comfyPage
+  }) => {
     const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
@@ -50,10 +53,7 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     // Try to drag the node
     const headerPos = await checkpointNodeHeader.boundingBox()
     if (!headerPos) throw new Error('Failed to get header position')
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
+    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
 
     // Verify the node is not dragged (same position before and after click-and-drag)
     await expect
@@ -64,11 +64,7 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
-    // Try to drag the node again
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
+    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
 
     // Verify the node is dragged
     await expect

browser_tests/tests/widgetCopyButton.spec.ts

@@ -5,12 +5,7 @@ import {
 
 test.describe('Widget copy button', { tag: ['@ui', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    // Add a PreviewAny node which has a read-only textarea with a copy button
-    await comfyPage.page.evaluate(() => {
-      const node = window.LiteGraph!.createNode('PreviewAny')
-      window.app!.graph.add(node)
-    })
-
+    await comfyPage.searchBoxV2.addNode('Preview as Text')
     await comfyPage.vueNodes.waitForNodes()
   })
 

global.d.ts

@@ -41,6 +41,29 @@ interface GtagFunction {
   (...args: unknown[]): void
 }
 
+type SyftDataTraits = Record<string, string | number | null | undefined>
+
+interface SyftDataPendingFetch {
+  args: unknown[]
+  resolve: (value: unknown) => void
+  reject: (reason?: unknown) => void
+}
+
+interface SyftDataClient {
+  identify(email: string, traits?: SyftDataTraits): void
+  signup(email: string, traits?: SyftDataTraits): void
+  track(event: string, traits?: SyftDataTraits): void
+  page(...args: unknown[]): void
+  q?: unknown[][]
+  fi?: SyftDataPendingFetch[]
+  fetchID?: (...args: unknown[]) => Promise<unknown>
+}
+
+/** Installed by the Syft UMD instead of SyftDataClient when telemetry is opted out */
+interface SyftDisabledClient {
+  enable: () => void
+}
+
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
@@ -78,6 +101,8 @@ interface Window {
   }
   dataLayer?: Array<Record<string, unknown>>
   gtag?: GtagFunction
+  syft?: SyftDataClient | SyftDisabledClient
+  syftc?: { sourceId?: string; enabled?: boolean }
   ire_o?: string
   ire?: ImpactQueueFunction
   rewardful?: RewardfulQueueFunction

package.json

@@ -53,7 +53,6 @@
     "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
-    "test:coverage:critical": "cross-env COVERAGE_CRITICAL=true vitest run --coverage",
     "test:unit": "vitest run",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",

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

@@ -197,7 +197,7 @@
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
   --node-component-header-icon: var(--color-ash-800);
-  --node-component-header-surface: var(--color-smoke-400);
+  --node-component-header-surface: var(--color-smoke-200);
   --node-component-outline: var(--color-black);
   --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
   --node-component-slot-dot-outline-opacity-mult: 1;
@@ -343,7 +343,7 @@
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-smoke-800);
-  --node-component-header-surface: var(--color-charcoal-800);
+  --node-component-header-surface: var(--color-charcoal-700);
   --node-component-outline: var(--color-white);
   --node-component-ring: rgb(var(--color-smoke-500) / 20%);
   --node-component-slot-dot-outline-opacity: 10%;
@@ -727,14 +727,14 @@ body {
 /* Shared markdown content styling for consistent rendering across components */
 .comfy-markdown-content {
   /* Typography */
-  font-size: 0.875rem; /* text-sm */
+  font-size: var(--comfy-textarea-font-size);
   line-height: 1.6;
   word-wrap: break-word;
 }
 
 /* Headings */
 .comfy-markdown-content h1 {
-  font-size: 22px; /* text-[22px] */
+  font-size: calc(22 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -745,7 +745,7 @@ body {
 }
 
 .comfy-markdown-content h2 {
-  font-size: 18px; /* text-[18px] */
+  font-size: calc(18 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -756,7 +756,7 @@ body {
 }
 
 .comfy-markdown-content h3 {
-  font-size: 16px; /* text-[16px] */
+  font-size: calc(16 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */

src/assets/css/style.css

@@ -1,5 +1,89 @@
 @import '@comfyorg/design-system/css/style.css';
 
+/* Generating screen ambient glow — a slowly rotating, blurred conic gradient.
+   --gen-angle must be a registered <angle> so the conic gradient interpolates
+   instead of jumping between keyframes. */
+@property --gen-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes gen-angle-spin {
+  to {
+    --gen-angle: 360deg;
+  }
+}
+
+.gen-glow {
+  position: absolute;
+  inset: -28%;
+  border-radius: 50%;
+  background: conic-gradient(
+    from var(--gen-angle),
+    #3b82f63b,
+    #8b5cf633,
+    #d946ef2b,
+    #ec489933,
+    #f9731629,
+    #14b8a62e,
+    #3b82f63b
+  );
+  filter: blur(60px);
+  opacity: 0.34;
+  animation: gen-angle-spin 12s linear infinite;
+  mask-image: radial-gradient(circle, #000 0%, #000 22%, rgb(0 0 0 / 0) 70%);
+}
+
+.gen-glow::after {
+  content: '';
+  position: absolute;
+  inset: 8%;
+  border-radius: 50%;
+  background: conic-gradient(
+    from calc(var(--gen-angle) + 120deg),
+    #3b82f629,
+    #8b5cf621,
+    #d946ef1c,
+    #ec489924,
+    #f973161a,
+    #14b8a621,
+    #3b82f629
+  );
+  filter: blur(34px);
+  opacity: 0.39;
+  mask-image: radial-gradient(
+    circle,
+    #000 0%,
+    rgb(0 0 0 / 0.62) 36%,
+    rgb(0 0 0 / 0.22) 50%,
+    rgb(0 0 0 / 0) 64%
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gen-glow {
+    animation: none;
+  }
+
+  .genfan-enter-active,
+  .genfan-leave-active,
+  .gen-card {
+    transition: none;
+  }
+}
+
+/* Generating fan cards fade in/out so adding and evicting cards stays smooth. */
+.genfan-enter-active,
+.genfan-leave-active {
+  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.genfan-enter-from,
+.genfan-leave-to {
+  opacity: 0;
+}
+
 /* Use 0.001ms instead of 0s so transitionend/animationend events still fire
    and JS listeners aren't broken. */
 .disable-animations *,

src/components/appMode/AppModeToolbar.test.ts

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import AppModeToolbar from './AppModeToolbar.vue'
+
+const appModeState = vi.hoisted(() => ({
+  enableAppBuilder: true,
+  hasNodes: true
+}))
+const enterBuilder = vi.hoisted(() => vi.fn())
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ enableAppBuilder: appModeState.enableAppBuilder })
+}))
+
+vi.mock('@/stores/appModeStore', async () => {
+  const { computed, reactive } = await import('vue')
+  return {
+    useAppModeStore: () =>
+      reactive({
+        enterBuilder,
+        hasNodes: computed(() => appModeState.hasNodes)
+      })
+  }
+})
+
+const BUILD_AN_APP = 'Build an app'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      linearMode: { appModeToolbar: { buildAnApp: BUILD_AN_APP } }
+    }
+  }
+})
+
+function renderToolbar() {
+  const user = userEvent.setup()
+  const result = render(AppModeToolbar, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        WorkflowActionsDropdown: true
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('AppModeToolbar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appModeState.enableAppBuilder = true
+    appModeState.hasNodes = true
+  })
+
+  it('shows an enabled build button and enters the builder on click', async () => {
+    const { user } = renderToolbar()
+
+    const button = screen.getByRole('button', { name: BUILD_AN_APP })
+    expect(button).toBeEnabled()
+
+    await user.click(button)
+
+    expect(enterBuilder).toHaveBeenCalled()
+  })
+
+  it('disables the build button when there are no nodes', () => {
+    appModeState.hasNodes = false
+    renderToolbar()
+
+    expect(screen.getByRole('button', { name: BUILD_AN_APP })).toBeDisabled()
+  })
+
+  it('hides the build button when app building is disabled', () => {
+    appModeState.enableAppBuilder = false
+    renderToolbar()
+
+    expect(
+      screen.queryByRole('button', { name: BUILD_AN_APP })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/appMode/AppModeToolbar.vue

@@ -1,119 +1,33 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import Button from '@/components/ui/button/Button.vue'
 import { useAppMode } from '@/composables/useAppMode'
-import { isCloud } from '@/platform/distribution/types'
-import {
-  openShareDialog,
-  prefetchShareDialog
-} from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { cn } from '@comfyorg/tailwind-utils'
-import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
-const commandStore = useCommandStore()
-const workspaceStore = useWorkspaceStore()
 const { enableAppBuilder } = useAppMode()
 const appModeStore = useAppModeStore()
 const { enterBuilder } = appModeStore
-const { toastErrorHandler } = useErrorHandling()
-const { flags } = useFeatureFlags()
 const { hasNodes } = storeToRefs(appModeStore)
-const tooltipOptions = { showDelay: 300, hideDelay: 300 }
-
-const isAssetsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
-)
-const isAppsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'apps'
-)
-
-function openAssets() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.assets')
-}
-
-function showApps() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.apps')
-}
 </script>
 
 <template>
   <div class="pointer-events-auto flex flex-row items-start gap-2">
-    <div class="pointer-events-auto flex flex-col gap-2">
-      <Button
-        v-if="enableAppBuilder"
-        v-tooltip.right="{
-          value: t('linearMode.appModeToolbar.appBuilder'),
-          ...tooltipOptions
-        }"
-        variant="secondary"
-        size="unset"
-        :disabled="!hasNodes"
-        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
-        class="size-10 rounded-lg"
-        @click="enterBuilder"
-      >
-        <i class="icon-[lucide--hammer] size-4" />
-      </Button>
-      <Button
-        v-if="isCloud && flags.workflowSharingEnabled"
-        v-tooltip.right="{
-          value: t('actionbar.shareTooltip'),
-          ...tooltipOptions
-        }"
-        variant="secondary"
-        size="unset"
-        :aria-label="t('actionbar.shareTooltip')"
-        class="size-10 rounded-lg"
-        @click="() => openShareDialog().catch(toastErrorHandler)"
-        @pointerenter="prefetchShareDialog"
-      >
-        <i class="icon-[lucide--send] size-4" />
-      </Button>
-
-      <div
-        class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
-      >
-        <Button
-          v-tooltip.right="{
-            value: t('sideToolbar.mediaAssets.title'),
-            ...tooltipOptions
-          }"
-          variant="textonly"
-          size="unset"
-          :aria-label="t('sideToolbar.mediaAssets.title')"
-          :class="
-            cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
-          "
-          @click="openAssets"
-        >
-          <i class="icon-[comfy--image-ai-edit] size-4" />
-        </Button>
-        <Button
-          v-tooltip.right="{
-            value: t('linearMode.appModeToolbar.apps'),
-            ...tooltipOptions
-          }"
-          variant="textonly"
-          size="unset"
-          :aria-label="t('linearMode.appModeToolbar.apps')"
-          :class="
-            cn('size-10', isAppsActive && 'bg-secondary-background-hover')
-          "
-          @click="showApps"
-        >
-          <i class="icon-[lucide--panels-top-left] size-4" />
-        </Button>
-      </div>
-    </div>
     <WorkflowActionsDropdown source="app_mode_toolbar" />
+    <Button
+      v-if="enableAppBuilder"
+      variant="base"
+      size="unset"
+      :disabled="!hasNodes"
+      :aria-label="t('linearMode.appModeToolbar.buildAnApp')"
+      class="h-10 gap-1.5 rounded-lg px-3 font-normal"
+      @click="enterBuilder"
+    >
+      <i class="icon-[lucide--hammer] size-4" />
+      <span>{{ t('linearMode.appModeToolbar.buildAnApp') }}</span>
+    </Button>
   </div>
 </template>

src/components/breadcrumb/SubgraphBreadcrumb.test.ts

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubgraphBreadcrumb from './SubgraphBreadcrumb.vue'
+
+const canvasState = vi.hoisted(() => ({ linearMode: false }))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({ activeWorkflow: { filename: 'workflow.json' } })
+}))
+
+vi.mock('@/stores/subgraphNavigationStore', () => ({
+  useSubgraphNavigationStore: () => ({ navigationStack: [] })
+}))
+
+vi.mock('@/stores/subgraphStore', () => ({
+  useSubgraphStore: () => ({ isSubgraphBlueprint: () => false })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ linearMode: canvasState.linearMode })
+}))
+
+vi.mock('@/composables/element/useOverflowObserver', () => ({
+  useOverflowObserver: () => ({
+    dispose: vi.fn(),
+    checkOverflow: vi.fn(),
+    disposed: { value: false }
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: { g: { graphNavigation: 'Graph navigation' } }
+  }
+})
+
+function renderBreadcrumb() {
+  return render(SubgraphBreadcrumb, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        WorkflowActionsDropdown: { template: '<div data-testid="wad" />' },
+        Breadcrumb: true,
+        Button: true,
+        SubgraphBreadcrumbItem: true
+      }
+    }
+  })
+}
+
+describe('SubgraphBreadcrumb', () => {
+  beforeEach(() => {
+    canvasState.linearMode = false
+  })
+
+  it('renders the workflow actions dropdown when not in linear mode', () => {
+    renderBreadcrumb()
+    expect(screen.getByTestId('wad')).toBeInTheDocument()
+  })
+
+  it('hides the workflow actions dropdown in linear mode', () => {
+    canvasState.linearMode = true
+    renderBreadcrumb()
+    expect(screen.queryByTestId('wad')).not.toBeInTheDocument()
+  })
+})

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -14,7 +14,10 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
+    <WorkflowActionsDropdown
+      v-if="!canvasStore.linearMode"
+      source="breadcrumb_subgraph_menu_selected"
+    />
     <Button
       v-if="isInSubgraph"
       class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
@@ -71,6 +74,7 @@ const ICON_WIDTH = 20
 
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
+const canvasStore = useCanvasStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
@@ -91,7 +95,7 @@ const home = computed(() => ({
       button_id: 'breadcrumb_subgraph_root_selected',
       element_group: 'breadcrumb'
     })
-    const canvas = useCanvasStore().getCanvas()
+    const canvas = canvasStore.getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
     canvas.setGraph(canvas.graph.rootGraph)
@@ -107,13 +111,13 @@ const items = computed(() => {
         button_id: 'breadcrumb_subgraph_item_selected',
         element_group: 'breadcrumb'
       })
-      const canvas = useCanvasStore().getCanvas()
+      const canvas = canvasStore.getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
       canvas.setGraph(subgraph)
     },
     updateTitle: (title: string) => {
-      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
+      const rootGraph = canvasStore.getCanvas().graph?.rootGraph
       if (!rootGraph) return
 
       forEachSubgraphNode(rootGraph, subgraph.id, (node) => {

src/components/builder/AppModeWidgetList.vue

@@ -22,7 +22,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { parseImageWidgetValue } from '@/utils/imageUtil'
 import { cn } from '@comfyorg/tailwind-utils'
-import { HideLayoutFieldKey } from '@/types/widgetTypes'
+import { HideLayoutFieldKey, WidgetHeightKey } from '@/types/widgetTypes'
 import { UNASSIGNED_NODE_ID } from '@/types/nodeId'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 
@@ -50,6 +50,7 @@ const { onPointerDown } = useAppModeWidgetResizing((widget, config) =>
 )
 
 provide(HideLayoutFieldKey, true)
+provide(WidgetHeightKey, mobile ? 'h-10' : 'h-7')
 
 const resolvedInputs = useResolvedSelectedInputs()
 
@@ -236,7 +237,7 @@ defineExpose({ handleDragDrop })
           :node-data
           :class="
             cn(
-              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
+              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1',
               nodeData.hasErrors && 'ring-2 ring-node-stroke-error ring-inset'
             )
           "

src/components/common/ScrubableNumberInput.vue

@@ -1,20 +1,26 @@
 <template>
   <div
     ref="container"
-    class="flex h-7 rounded-lg bg-component-node-widget-background text-xs text-component-node-foreground"
+    :class="
+      cn(
+        'flex overflow-hidden rounded-md bg-component-node-widget-background text-xs text-component-node-foreground',
+        useWidgetHeight()
+      )
+    "
   >
     <slot name="background" />
     <Button
       v-if="!hideButtons"
       :aria-label="t('g.decrement')"
       data-testid="decrement"
-      class="aspect-8/7 h-full rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-square h-full rounded-none p-0 hover:bg-component-node-widget-background-hovered disabled:opacity-30"
       variant="muted-textonly"
+      size="unset"
       :disabled="!canDecrement"
       tabindex="-1"
       @click="modelValue = clamp(modelValue - step)"
     >
-      <i class="pi pi-minus" />
+      <i class="icon-[lucide--minus]" />
     </Button>
     <div class="relative my-0.25 min-w-[4ch] flex-1 py-1.5">
       <input
@@ -24,7 +30,7 @@
         :disabled
         :class="
           cn(
-            'absolute inset-0 truncate border-0 bg-transparent p-1 text-sm focus:outline-0'
+            'absolute inset-0 truncate border-0 bg-transparent p-1 text-xs focus:outline-0'
           )
         "
         inputmode="decimal"
@@ -54,13 +60,14 @@
       v-if="!hideButtons"
       :aria-label="t('g.increment')"
       data-testid="increment"
-      class="aspect-8/7 h-full rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-square h-full rounded-none p-0 hover:bg-component-node-widget-background-hovered disabled:opacity-30"
       variant="muted-textonly"
+      size="unset"
       :disabled="!canIncrement"
       tabindex="-1"
       @click="modelValue = clamp(modelValue + step)"
     >
-      <i class="pi pi-plus" />
+      <i class="icon-[lucide--plus]" />
     </Button>
   </div>
 </template>
@@ -71,6 +78,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useWidgetHeight } from '@/types/widgetTypes'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const {