fix: default frontend preview variant to cpu

Frontend previews don't need GPU resources. Default to cpu variant and only use gpu when the preview-gpu label is explicitly added.
test: change title to Preview v2 for update timing
2026-07-12 02:08:25 +00:00 · 2026-03-10 14:53:54 -04:00 · 2026-03-10 13:58:14 -04:00 · 2026-03-10 13:36:25 -04:00 · 2026-03-10 13:16:37 -04:00 · 2026-03-09 23:08:42 -07:00
11 changed files with 118 additions and 85 deletions
--- a/.github/workflows/cloud-dispatch-build.yaml
+++ b/.github/workflows/cloud-dispatch-build.yaml
@@ -46,18 +46,35 @@ jobs:
          EVENT_NAME: ${{ github.event_name }}
          PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          ACTION: ${{ github.event.action }}
+          LABEL_NAME: ${{ github.event.label.name }}
+          PR_LABELS: ${{ toJson(github.event.pull_request.labels.*.name) }}
        run: |
          if [ "${EVENT_NAME}" = "pull_request" ]; then
            REF="${PR_HEAD_SHA}"
            BRANCH="${PR_HEAD_REF}"
+
+            # Derive variant from labels (default to cpu for frontend-only previews)
+            VARIANT="cpu"
+            if [ "${ACTION}" = "labeled" ]; then
+              [ "${LABEL_NAME}" = "preview-gpu" ] && VARIANT="gpu"
+            else
+              # synchronize — check existing labels on the PR
+              echo "${PR_LABELS}" | grep -q '"preview-gpu"' && VARIANT="gpu"
+            fi
          else
            REF="${GITHUB_SHA}"
            BRANCH="${GITHUB_REF_NAME}"
+            PR_NUMBER=""
+            VARIANT=""
          fi
          payload="$(jq -nc \
            --arg ref "${REF}" \
            --arg branch "${BRANCH}" \
-            '{ref: $ref, branch: $branch}')"
+            --arg pr_number "${PR_NUMBER}" \
+            --arg variant "${VARIANT}" \
+            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
          echo "json=${payload}" >> "${GITHUB_OUTPUT}"

      - name: Dispatch to cloud repo
--- a/.github/workflows/cloud-dispatch-cleanup.yaml
+++ b/.github/workflows/cloud-dispatch-cleanup.yaml
@@ -0,0 +1,39 @@
+---
+# Dispatches a frontend-preview-cleanup event to the cloud repo when a
+# frontend PR with a preview label is closed or has its preview label
+# removed. The cloud repo handles the actual environment teardown.
+#
+# This is fire-and-forget — it does NOT wait for the cloud workflow to
+# complete. Status is visible in the cloud repo's Actions tab.
+
+name: Cloud Frontend Preview Cleanup Dispatch
+
+on:
+  pull_request:
+    types: [closed, unlabeled]
+
+permissions: {}
+
+jobs:
+  dispatch:
+    # Only dispatch when:
+    # - PR closed AND had a preview label
+    # - Preview label specifically removed
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      ((github.event.action == 'closed' &&
+        (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.action == 'unlabeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)))
+    runs-on: ubuntu-latest
+    steps:
+      - name: Dispatch to cloud repo
+        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
+        with:
+          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
+          repository: Comfy-Org/cloud
+          event-type: frontend-preview-cleanup
+          client-payload: >-
+            {"pr_number": "${{ github.event.pull_request.number }}"}
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <title>ComfyUI</title>
+    <title>ComfyUI (Preview v2)</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
--- a/src/components/common/DropdownItem.vue
+++ b/src/components/common/DropdownItem.vue
@@ -54,11 +54,12 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
    :disabled="toValue(item.disabled) ?? !item.command"
    @select="item.command?.({ originalEvent: $event, item })"
  >
-    <i class="size-5" :class="item.icon" />
-    {{ item.label }}
+    <i class="size-5 shrink-0" :class="item.icon" />
+    <div class="mr-auto truncate" v-text="item.label" />
+    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
    <div
-      v-if="item.new"
-      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-else-if="item.new"
+      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
      v-text="t('contextMenu.new')"
    />
  </DropdownMenuItem>
--- a/src/components/common/DropdownMenu.vue
+++ b/src/components/common/DropdownMenu.vue
@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{

 const itemClass = computed(() =>
  cn(
-    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
    itemProp
  )
 )
--- a/src/components/common/ScrubableNumberInput.vue
+++ b/src/components/common/ScrubableNumberInput.vue
@@ -33,19 +33,20 @@
        spellcheck="false"
        @blur="handleBlur"
        @keyup.enter="handleBlur"
-        @dragstart.prevent
+        @keydown.up.prevent="updateValueBy(step)"
+        @keydown.down.prevent="updateValueBy(-step)"
+        @keydown.page-up.prevent="updateValueBy(10 * step)"
+        @keydown.page-down.prevent="updateValueBy(-10 * step)"
      />
      <div
+        ref="swipeElement"
        :class="
          cn(
-            'absolute inset-0 z-10 cursor-ew-resize',
+            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
            textEdit && 'pointer-events-none hidden'
          )
        "
-        @pointerdown="handlePointerDown"
-        @pointermove="handlePointerMove"
        @pointerup="handlePointerUp"
-        @pointercancel="resetDrag"
      />
    </div>
    <slot />
@@ -65,7 +66,7 @@
 </template>

 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'

@@ -73,8 +74,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'

 const {
-  min,
-  max,
+  min = -Number.MAX_VALUE,
+  max = Number.MAX_VALUE,
  step = 1,
  disabled = false,
  hideButtons = false,
@@ -96,6 +97,7 @@ const modelValue = defineModel<number>({ default: 0 })

 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
+const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)

 onClickOutside(container, () => {
@@ -103,21 +105,11 @@ onClickOutside(container, () => {
 })

 function clamp(value: number): number {
-  const lo = min ?? -Infinity
-  const hi = max ?? Infinity
-  return Math.min(hi, Math.max(lo, value))
+  return Math.min(max, Math.max(min, value))
 }

-const canDecrement = computed(
-  () => modelValue.value > (min ?? -Infinity) && !disabled
-)
-const canIncrement = computed(
-  () => modelValue.value < (max ?? Infinity) && !disabled
-)
-
-const dragging = ref(false)
-const dragDelta = ref(0)
-const hasDragged = ref(false)
+const canDecrement = computed(() => modelValue.value > min && !disabled)
+const canIncrement = computed(() => modelValue.value < max && !disabled)

 function handleBlur(e: Event) {
  const target = e.target as HTMLInputElement
@@ -135,41 +127,27 @@ function handleBlur(e: Event) {
  textEdit.value = false
 }

-function handlePointerDown(e: PointerEvent) {
-  if (e.button !== 0) return
-  if (disabled) return
-  const target = e.target as HTMLElement
-  target.setPointerCapture(e.pointerId)
-  dragging.value = true
-  dragDelta.value = 0
-  hasDragged.value = false
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!dragging.value) return
-  dragDelta.value += e.movementX
-  const steps = (dragDelta.value / 10) | 0
-  if (steps === 0) return
-  hasDragged.value = true
-  const unclipped = modelValue.value + steps * step
-  dragDelta.value %= 10
-  modelValue.value = clamp(unclipped)
-}
-
+let dragDelta = 0
 function handlePointerUp() {
-  if (!dragging.value) return
+  if (isSwiping.value) return

-  if (!hasDragged.value) {
-    textEdit.value = true
-    inputField.value?.focus()
-    inputField.value?.select()
-  }
-
-  resetDrag()
+  textEdit.value = true
+  inputField.value?.focus()
+  inputField.value?.select()
 }

-function resetDrag() {
-  dragging.value = false
-  dragDelta.value = 0
+const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
+  onSwipeEnd: () => (dragDelta = 0)
+})
+
+whenever(distanceX, () => {
+  if (disabled) return
+  const delta = ((distanceX.value - dragDelta) / 10) | 0
+  dragDelta += delta * 10
+  modelValue.value = clamp(modelValue.value - delta * step)
+})
+
+function updateValueBy(delta: number) {
+  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
 }
 </script>
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'

 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
  variants: {
    variant: {
      secondary:
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3181,6 +3181,7 @@
    "deleteAllAssets": "Delete all assets from this run",
    "hasCreditCost": "Requires additional credits",
    "viewGraph": "View node graph",
+    "mobileNoWorkflow": "This workflow hasn't been built for app mode. Try a different one.",
    "welcome": {
      "title": "App Mode",
      "message": "A simplified view that hides the node graph so you can focus on creating.",
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -120,7 +120,7 @@ function getDropIndicator(node: LGraphNode) {
  return {
    iconClass: 'icon-[lucide--image]',
    imageUrl: buildImageUrl(),
-    label: t('linearMode.dragAndDropImage'),
+    label: props.mobile ? undefined : t('linearMode.dragAndDropImage'),
    onClick: () => node.widgets?.[1]?.callback?.(undefined)
  }
 }
@@ -206,14 +206,14 @@ defineExpose({ runButtonClick })
          <DropZone
            :on-drag-over="nodeData.onDragOver"
            :on-drag-drop="nodeData.onDragDrop"
-            :drop-indicator="mobile ? undefined : nodeData.dropIndicator"
+            :drop-indicator="nodeData.dropIndicator"
            class="text-muted-foreground"
          >
            <NodeWidgets
              :node-data
              :class="
                cn(
-                  'gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 **:[.h-7]:h-10',
+                  'gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
                  nodeData.hasErrors &&
                    'ring-2 ring-node-stroke-error ring-inset'
                )
@@ -325,4 +325,9 @@ defineExpose({ runButtonClick })
      </section>
    </div>
  </div>
+  <div
+    v-else-if="mobile"
+    class="flex size-full items-center bg-base-background p-4 text-center"
+    v-text="t('linearMode.mobileNoWorkflow')"
+  />
 </template>
--- a/src/renderer/extensions/linearMode/MobileDisplay.vue
+++ b/src/renderer/extensions/linearMode/MobileDisplay.vue
@@ -8,7 +8,6 @@ import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import Button from '@/components/ui/button/Button.vue'
-import Popover from '@/components/ui/Popover.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -76,13 +75,16 @@ function onClick(index: number) {
 }

 const workflowsEntries = computed(() => {
-  return workflowStore.openWorkflows.map((w) => ({
-    label: w.filename,
-    icon: w.activeState?.extra?.linearMode
-      ? 'icon-[lucide--panels-top-left] bg-primary-background'
-      : undefined,
-    command: () => workflowService.openWorkflow(w)
-  }))
+  return [
+    ...workflowStore.openWorkflows.map((w) => ({
+      label: w.filename,
+      icon: w.activeState?.extra?.linearMode
+        ? 'icon-[lucide--panels-top-left] bg-primary-background'
+        : undefined,
+      command: () => workflowService.openWorkflow(w),
+      checked: workflowStore.activeWorkflow === w
+    }))
+  ]
 })

 const menuEntries = computed<MenuItem[]>(() => [
@@ -157,9 +159,9 @@ const menuEntries = computed<MenuItem[]>(() => [
      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" />
-      <Popover
+      <DropdownMenu
        :entries="workflowsEntries"
-        class="w-(--reka-popover-content-available-width)"
+        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width)"
        :collision-padding="20"
      >
        <template #button>
@@ -179,7 +181,7 @@ const menuEntries = computed<MenuItem[]>(() => [
            />
          </div>
        </template>
-      </Popover>
+      </DropdownMenu>
      <CurrentUserButton v-if="isLoggedIn" :show-arrow="false" />
    </header>
    <div class="size-full rounded-b-4xl contain-content">
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -121,12 +121,6 @@ const buttonsDisabled = computed(() => {
  )
 })

-function updateValueBy(delta: number) {
-  const max = filteredProps.value.max ?? Number.MAX_VALUE
-  const min = filteredProps.value.min ?? -Number.MAX_VALUE
-  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
-}
-
 const buttonTooltip = computed(() => {
  if (buttonsDisabled.value) {
    return 'Increment/decrement disabled: value exceeds JavaScript precision limit (±2^53)'
@@ -171,10 +165,6 @@ const inputAriaAttrs = computed(() => ({
      :parse-value="parseWidgetValue"
      :input-attrs="inputAriaAttrs"
      :class="cn(WidgetInputBaseClass, 'relative flex h-7 grow text-xs')"
-      @keydown.up.prevent="updateValueBy(stepValue)"
-      @keydown.down.prevent="updateValueBy(-stepValue)"
-      @keydown.page-up.prevent="updateValueBy(10 * stepValue)"
-      @keydown.page-down.prevent="updateValueBy(-10 * stepValue)"
    >
      <template #background>
        <div
Author	SHA1	Message	Date
Hunter Senft-Grupp	5bbd5103cd	fix: default frontend preview variant to cpu Frontend previews don't need GPU resources. Default to cpu variant and only use gpu when the preview-gpu label is explicitly added.	2026-03-10 14:53:54 -04:00
Hunter Senft-Grupp	a3d47fed8c	test: change title to Preview v2 for update timing	2026-03-10 13:58:14 -04:00
Hunter Senft-Grupp	eda40b02c4	test: change page title for preview env smoke test	2026-03-10 13:36:25 -04:00
Hunter	b368a865cf	feat: dispatch frontend PR preview environments to cloud (#9715 ) ## Summary Add support for deploying full ephemeral preview environments from frontend PRs. This is the frontend-side half — it sends `pr_number` and `variant` (cpu/gpu) in the dispatch payload, and adds a cleanup dispatch on PR close/unlabel. ### Changes - `cloud-dispatch-build.yaml` — Add `pr_number` and `variant` to the `frontend-asset-build` dispatch payload. Variant is derived from which preview label triggered the event (`preview-cpu` → cpu, else gpu). - `cloud-dispatch-cleanup.yaml` (new) — Fire-and-forget dispatch of `frontend-preview-cleanup` to the cloud repo when a frontend PR is closed or has its preview label removed. Enables synchronized teardown. ### Companion PR Cloud-side: Comfy-Org/cloud (creates the `deploy-frontend-preview` job, extends the reconciler) ### How it works 1. Label a frontend PR with `preview`, `preview-cpu`, or `preview-gpu` 2. Assets build and upload to GCS (existing flow) 3. Cloud deploys a full ephemeral env at `fe-pr-{N}.testenvs.comfy.org` using all `:main` service tags 4. Subsequent pushes update the frontend SHA via AppSet upsert 5. On close/unlabel, cleanup dispatch triggers immediate teardown ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9715-feat-dispatch-frontend-PR-preview-environments-to-cloud-31f6d73d3650819da1b5ca5ce419e06e) by [Unito](https://www.unito.io)	2026-03-10 13:16:37 -04:00
AustinMroz	1d7a5b9e0b	Mobile input tweaks (#9686 ) - Buttons are marked as `touch-manipulation` so double-tapping on them doesn't initiate a zoom. - Move scrubable inputs to usePointerSwipe - Strangely, swipe direction was inverted on mobile. This solves the issue and simplifies code - Moves event handlers into the scrubbable input component - Make the slightly bigger buttons only apply when on mobile. - Updates the workflows dropdown to have a check by the activeWorkflow and truncate workflow names - Displays dropzones (for the image preview) on mobile, but disables the prompt to drag and drop an image if none is selected. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9686-Mobile-input-tweaks-31f6d73d3650811d9025d0cd1ac58534) by [Unito](https://www.unito.io)	2026-03-09 23:08:42 -07:00