feat: App mode UI updates (#13170)

## Summary

App mode now uses the same sidenav as the graph view instead of its own
custom navigation, and switching between modes happens through a new
animated graph/app toggle shared by both views.

## Changes

- **What**:
- LinearView hosts the standard `SideToolbar`, filtered to the Assets
and Apps tabs via new `visibleTabIds`/`forceConnected` props. The
bottom-panel and shortcut toggles hide in app mode, and
GraphCanvas/SubgraphBreadcrumb hide their instances so only one toolbar
and toggle render at a time.
- The workflow actions dropdown trigger is now a two-segment graph/app
toggle: the inactive segment switches modes directly, the active one
opens the actions menu as before, with a FLIP animation on switch.
- Each view renders its own toggle, so switching unmounts one and mounts
the other. A `displayLinearMode` ref in canvasStore trails `linearMode`
by two frames so the incoming toggle animates from the old mode instead
of popping in already-switched.
- AppModeToolbar slims down to the toggle plus a "Build an app" button;
the per-icon Assets/Apps/Share buttons are covered by the sidenav.
- The Apps tab gains "Create" header and empty-state actions wired to
`Comfy.NewBlankWorkflow`.
- App-mode feedback moves into `SidebarHelpCenterIcon` as a Typeform
popover with a load-error fallback, replacing `TypeformPopoverButton`
and `LinearFeedback` and simplifying LinearPreview to a single
`OutputHistory`.
- Tests for the toggle, sidebar tabs, help-center fallback, preview, and
view; screenshots regenerated.

## Review Focus

- The two-frame `displayLinearMode` lag — timing-sensitive; rapid
toggling cancels the pending frame chain so the wrong mode never
flashes.
- `SideToolbar` now serves both views: confirm only one instance renders
and the new props behave.

## Screenshots (if applicable)


https://github.com/user-attachments/assets/9ad1eb4f-9370-4975-b3f1-b271482f2bf7

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

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

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
@@ -77,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
@@ -185,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

@@ -239,6 +239,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