Fix typo

linear mode wasn't initializing properly since the current workflow
didn't have a standard 'save image' or 'preview image' output

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -9,13 +9,15 @@ import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
 import { BuilderSelectHelper } from '@e2e/fixtures/helpers/BuilderSelectHelper'
 import { BuilderStepsHelper } from '@e2e/fixtures/helpers/BuilderStepsHelper'
+import { MobileAppHelper } from '@e2e/fixtures/helpers/MobileAppHelper'
 
 export class AppModeHelper {
-  readonly steps: BuilderStepsHelper
   readonly footer: BuilderFooterHelper
+  readonly mobile: MobileAppHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
   readonly outputHistory: OutputHistoryComponent
+  readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -41,11 +43,12 @@ export class AppModeHelper {
   public readonly cancelRunButton: Locator
 
   constructor(private readonly comfyPage: ComfyPage) {
-    this.steps = new BuilderStepsHelper(comfyPage)
+    this.mobile = new MobileAppHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
+    this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -146,6 +149,10 @@ export class AppModeHelper {
     await this.toggleAppMode()
   }
 
+  get centerPanel(): Locator {
+    return this.page.getByTestId(TestIds.linear.centerPanel)
+  }
+
   /**
    * Get the actions menu trigger for a widget in the app mode widget list.
    * @param widgetName Text shown in the widget label (e.g. "seed").

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -51,6 +51,10 @@ export class BuilderSelectHelper {
     return this.comfyPage.page
   }
 
+  get selectedItems(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItem)
+  }
+
   /**
    * Get the actions menu trigger for a builder IoItem (input-select sidebar).
    * @param title The widget title shown in the IoItem.

browser_tests/fixtures/helpers/MobileAppHelper.ts

@@ -0,0 +1,36 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class MobileAppHelper {
+  readonly actionmenu: Locator
+  readonly contentPanel: Locator
+  readonly navigation: Locator
+  readonly navigationTabs: Locator
+  readonly view: Locator
+  readonly workflows: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.view = this.page.getByTestId(TestIds.linear.mobile)
+    this.actionmenu = this.view.getByTestId(TestIds.linear.mobileActionMenu)
+    this.contentPanel = this.page.getByRole('tabpanel')
+    this.navigation = this.page.getByRole('tablist').filter({ hasText: 'Run' })
+    this.navigationTabs = this.navigation.getByRole('tab')
+    this.workflows = this.view.getByTestId(TestIds.linear.mobileWorkflows)
+  }
+
+  async switchWorkflow(workflowName: string) {
+    await this.workflows.click()
+    await this.page.getByRole('menu').getByText(workflowName).click()
+  }
+  async navigateTab(name: 'run' | 'outputs' | 'assets') {
+    await this.navigation.getByRole('tab', { name }).click()
+  }
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+  async tap(locator: Locator, { count = 1 }: { count?: number } = {}) {
+    for (let i = 0; i < count; i++) await locator.tap()
+  }
+}

browser_tests/fixtures/selectors.ts

@@ -119,6 +119,15 @@ export const TestIds = {
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  linear: {
+    centerPanel: 'linear-center-panel',
+    mobile: 'linear-mobile',
+    mobileNavigation: 'linear-mobile-navigation',
+    mobileActionMenu: 'linear-mobile-menu',
+    mobileWorkflows: 'linear-mobile-workflows',
+    outputInfo: 'linear-output-info',
+    widgetContainer: 'linear-widgets'
+  },
   builder: {
     footerNav: 'builder-footer-nav',
     saveButton: 'builder-save-button',

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -24,6 +24,10 @@ export class VueNodeFixture {
     this.root = locator
   }
 
+  get widgets(): Locator {
+    return this.locator.locator('.lg-node-widget')
+  }
+
   async getTitle(): Promise<string> {
     return (await this.title.textContent()) ?? ''
   }

browser_tests/tests/appMode.spec.ts

@@ -0,0 +1,112 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('App mode usage', () => {
+  test('Drag and Drop', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const { centerPanel } = comfyPage.appMode
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+    //an app without an image input will load the workflow
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).toBeHidden()
+
+    //prep a load image
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    const loadImage = await comfyPage.vueNodes.getNodeLocator('10')
+    await expect(loadImage).toBeVisible()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['10', 'image']])
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input will upload the image to the input
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input can load from a uri-source
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    await expect(centerPanel).toBeVisible()
+  })
+
+  test('Widget Interaction', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([
+      ['3', 'seed'],
+      ['3', 'sampler_name'],
+      ['6', 'text']
+    ])
+    const seed = comfyPage.appMode.linearWidgets.getByLabel('seed', {
+      exact: true
+    })
+    const { input, incrementButton, decrementButton } =
+      comfyPage.vueNodes.getInputNumberControls(seed)
+    const initialValue = Number(await input.inputValue())
+
+    await seed.dragTo(incrementButton, { steps: 5 })
+    const intermediateValue = Number(await input.inputValue())
+    expect(intermediateValue).toBeGreaterThan(initialValue)
+
+    await seed.dragTo(decrementButton, { steps: 5 })
+    const endValue = Number(await input.inputValue())
+    expect(endValue).toBeLessThan(intermediateValue)
+
+    const sampler = comfyPage.appMode.linearWidgets.getByLabel('sampler_name', {
+      exact: true
+    })
+    await sampler.click()
+
+    await comfyPage.page.getByRole('searchbox').fill('uni')
+    await comfyPage.page.keyboard.press('ArrowDown')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(sampler).toHaveText('uni_pc')
+
+    //verify values are consistent with litegraph
+  })
+
+  test.describe('Mobile', { tag: ['@mobile'] }, () => {
+    test('panel navigation', async ({ comfyPage }) => {
+      const { mobile } = comfyPage.appMode
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
+      await expect(mobile.view).toBeVisible()
+      await expect(mobile.navigation).toBeVisible()
+
+      await mobile.navigateTab('assets')
+      await expect(mobile.contentPanel).toHaveAccessibleName('Assets')
+
+      const buttons = await mobile.navigationTabs.all()
+      await buttons[0].dragTo(buttons[2], { steps: 5 })
+      await expect(mobile.contentPanel).toHaveAccessibleName('Outputs')
+
+      await mobile.navigateTab('run')
+      await expect(comfyPage.appMode.linearWidgets).toBeInViewport({ ratio: 1 })
+
+      const steps = comfyPage.page.getByRole('spinbutton')
+      await expect(steps).toHaveValue('20')
+      await mobile.tap(
+        comfyPage.page.getByRole('button', { name: 'increment' }),
+        { count: 5 }
+      )
+      await expect(steps).toHaveValue('25')
+      await mobile.tap(
+        comfyPage.page.getByRole('button', { name: 'decrement' }),
+        { count: 3 }
+      )
+
+      await expect(steps).toHaveValue('22')
+    })
+
+    test('workflow selection', async ({ comfyPage }) => {
+      const widgetNames = ['seed', 'steps', 'denoise', 'cfg']
+      for (const name of widgetNames)
+        await comfyPage.appMode.enterAppModeWithInputs([['3', name]])
+      await expect(comfyPage.appMode.mobile.workflows).toBeVisible()
+
+      const widgets = comfyPage.appMode.linearWidgets
+      await comfyPage.appMode.mobile.navigateTab('run')
+      for (let i = 0; i < widgetNames.length; i++) {
+        await comfyPage.appMode.mobile.switchWorkflow(`(${i + 2})`)
+        await expect(widgets.getByText(widgetNames[i])).toBeVisible()
+      }
+    })
+  })
+})

browser_tests/tests/appModeBuilder.spec.ts

@@ -0,0 +1,120 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('App mode builder selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+  })
+
+  test('Can independently select inputs of same name', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const items = comfyPage.appMode.select.selectedItems
+
+    await comfyPage.vueNodes.selectNodes(['6', '7'])
+    await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
+
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    const prompts = comfyPage.vueNodes
+      .getNodeByTitle('New Subgraph')
+      .locator('.lg-node-widget')
+    const count = await prompts.count()
+    for (let i = 0; i < count; i++) {
+      await expect(prompts.nth(i)).toBeVisible()
+      await prompts.nth(i).click()
+      await expect(items).toHaveCount(i + 1)
+    }
+  })
+
+  test('Can drag and drop inputs', async ({ comfyPage }) => {
+    const items = comfyPage.appMode.select.selectedItems
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    const ksampler = await comfyPage.vueNodes.getNodeLocator('3')
+    for (const widget of await ksampler.locator('.lg-node-widget').all())
+      await widget.click()
+
+    await items.first().dragTo(items.last(), { steps: 5 })
+    await expect(items.first()).toContainText('steps')
+    await items.last().dragTo(items.first(), { steps: 5 })
+    //dragTo doesn't cross the center point, so denoise is moved to position 2
+    await expect(items.nth(1)).toContainText('denoise')
+  })
+
+  test('Can select outputs', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToOutputs()
+
+    await comfyPage.nodeOps
+      .getNodeRefById('9')
+      .then((ref) => ref.centerOnNode())
+    const saveImage = await comfyPage.vueNodes.getNodeLocator('9')
+    await saveImage.click()
+
+    const items = comfyPage.appMode.select.selectedItems
+    await expect(items).toHaveCount(1)
+  })
+
+  test('Can not select nodes with errors or notes', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const items = comfyPage.appMode.select.selectedItems
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    await comfyPage.appMode.select.selectInputWidget(
+      'Load Checkpoint',
+      'ckpt_name'
+    )
+    //await expect.soft(items).toHaveCount(0)
+
+    await comfyPage.workflow.loadWorkflow('nodes/note_nodes')
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    await comfyPage.appMode.select.selectInputWidget('Note', 'text')
+    await comfyPage.appMode.select.selectInputWidget('Markdown Note', 'text')
+
+    await expect(items).toHaveCount(0)
+  })
+
+  test('Marks canvas readOnly', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+    await comfyPage.page.keyboard.press('Escape')
+
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+
+    //space toggles panning mode, canvas should remain readOnly after pressing
+    await comfyPage.page.keyboard.press('Space')
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
+    await ksampler.header.dblclick({ force: true })
+    await expect(ksampler.titleInput).toBeHidden()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+  })
+})

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -154,20 +154,24 @@ const menuEntries = computed<MenuItem[]>(() => [
 ])
 </script>
 <template>
-  <section class="absolute flex size-full flex-col bg-secondary-background">
+  <section
+    class="absolute flex size-full flex-col bg-secondary-background"
+    data-testid="linear-mobile"
+  >
     <header
       class="flex h-16 w-full items-center gap-3 border-b border-border-subtle bg-base-background px-4 py-3"
     >
       <DropdownMenu :entries="menuEntries" />
       <DropdownMenu
         :entries="workflowsEntries"
-        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width)"
+        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width) overflow-y-auto"
         :collision-padding="20"
       >
         <template #button>
           <!--TODO: Use button here? Probably too much work to destyle-->
           <div
             class="flex h-10 grow items-center gap-2 rounded-sm bg-secondary-background p-2"
+            data-testid="linear-mobile-workflows"
           >
             <i
               class="icon-[lucide--panels-top-left] shrink-0 bg-primary-background"
@@ -191,11 +195,19 @@ const menuEntries = computed<MenuItem[]>(() => [
         "
         :style="{ translate }"
       >
-        <div class="absolute h-full w-screen overflow-y-auto contain-size">
+        <div
+          class="absolute h-full w-screen overflow-y-auto contain-size"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 0"
+          :aria-label="t(tabs[0][0])"
+        >
           <LinearControls mobile @navigate-outputs="activeIndex = 1" />
         </div>
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 1"
+          :aria-label="t(tabs[1][0])"
         >
           <MobileError
             v-if="executionErrorStore.isErrorOverlayOpen"
@@ -205,18 +217,24 @@ const menuEntries = computed<MenuItem[]>(() => [
         </div>
         <AssetsSidebarTab
           class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
+          role="tabpanel"
+          :aria-hidden="activeIndex !== 2"
+          :aria-label="t(tabs[2][0])"
         />
       </div>
     </div>
     <div
       ref="sliderPaneRef"
       class="flex h-22 w-full items-center justify-around gap-4 bg-secondary-background p-4"
+      role="tablist"
     >
       <Button
         v-for="([label, icon], index) in tabs"
         :key="label"
         :variant="index === activeIndex ? 'secondary' : 'muted-textonly'"
         class="h-14 grow flex-col"
+        role="tab"
+        :aria-selected="index === activeIndex"
         @click="onClick(index)"
       >
         <div class="relative size-4">

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="widget-markdown relative w-full" @dblclick="startEditing">
+  <div
+    :aria-label="widget.name"
+    class="widget-markdown relative w-full"
+    @dblclick="startEditing"
+  >
     <!-- Display mode: Rendered markdown -->
     <div
       class="comfy-markdown-content size-full min-h-[60px] overflow-y-auto rounded-lg text-sm"

src/views/LinearView.vue

@@ -149,6 +149,7 @@ function dragDrop(e: DragEvent) {
       </SplitterPanel>
       <SplitterPanel
         id="linearCenterPanel"
+        data-testid="linear-center-panel"
         :size="CENTER_PANEL_SIZE"
         class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
         @drop="dragDrop"