fix: align run controls with queue modal design (#9134)

## Summary
- move queue batch controls to the left of the run button
- align run control styling to the Figma queue modal spec using PrimeVue
PT/Tailwind (secondary background on batch + dropdown, primary run
button)
- normalize control heights to match actionbar buttons and tighten
dropdown hit area
- update run typography/spacing and replace all three chevrons (dropdown
+ batch up/down) with the requested SVG

Design:
https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3845-23904&m=dev

<img width="303" height="122" alt="image"
src="https://github.com/user-attachments/assets/4ed80ee7-3ceb-4512-96ce-f55ec6da835e"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9134-fix-align-run-controls-with-queue-modal-design-3106d73d36508160afcedbcfe4b98291)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,10 +1,7 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{
@@ -16,7 +13,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
     <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-6 text-neutral-300">
-      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+    <div class="flex grow flex-col gap-6 text-neutral-300">
+      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-center text-neutral-400 px-12">
+      <p class="px-12 text-center text-neutral-400">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <InputText
           v-model="installPath"
           :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,7 +23,7 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          class="border-0 bg-neutral-700 hover:bg-neutral-600"
           @click="browsePath"
         />
       </div>
@@ -33,7 +33,7 @@
         <Message
           v-if="pathError"
           severity="error"
-          class="whitespace-pre-line w-full"
+          class="w-full whitespace-pre-line"
         >
           {{ pathError }}
         </Message>

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -26,7 +26,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="h-full w-full object-contain px-4 pt-4 opacity-25"
+          class="size-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -52,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
+      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 z-10 col-span-full row-span-full text-[4rem] text-green-500 opacity-100 transition-opacity [text-shadow:0.25rem_0_0.5rem_black] group-hover/task-card:opacity-20"
     />
   </div>
 </template>

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
-    <h1 class="font-inter font-semibold text-xl m-0 italic">
+  <div class="flex size-full flex-col justify-between rounded-lg p-6">
+    <h1 class="m-0 font-inter text-xl font-semibold italic">
       {{ $t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
     >
       <div class="relative m-8 text-center">
         <!-- Header -->
@@ -13,7 +13,7 @@
           <span>{{ $t('desktopUpdate.description') }}</span>
         </div>
 
-        <ProgressSpinner class="m-8 w-48 h-48" />
+        <ProgressSpinner class="m-8 size-48" />
 
         <!-- Console button -->
         <Button

apps/desktop-ui/src/views/InstallView.vue

@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="w-full h-full flex flex-col">
+    <div class="flex size-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -1,21 +1,21 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
+      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
     >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="w-full flex flex-wrap gap-4 items-center">
+        <div class="flex w-full flex-wrap items-center gap-4">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex gap-4 items-center">
+          <div class="flex items-center gap-4">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="block mb-1">
+              <strong class="mb-1 block">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="block mb-1">
+              <span class="mb-1 block">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
+          class="border-x-0 border-y border-solid border-neutral-700"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
+        <div class="flex flex-row justify-between gap-4">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -9,7 +9,7 @@
       />
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex flex-col gap-8 p-8 min-w-110">
+        <div class="flex min-w-110 flex-col gap-8 p-8">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-disc list-inside space-y-1 text-neutral-800">
+            <ul class="list-inside list-disc space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>

apps/desktop-ui/src/views/ServerStartView.vue

@@ -2,14 +2,14 @@
   <BaseViewTemplate dark>
     <div class="relative min-h-screen">
       <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
-        <div class="h-full w-full">
+      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
+        <div class="size-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +71,10 @@
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
         <div
           v-if="terminalVisible && isError"
-          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>

browser_tests/fixtures/ComfyPage.ts

@@ -206,9 +206,7 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page
-      .getByTestId(TestIds.topbar.queueButton)
-      .getByRole('button', { name: 'Run' })
+    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)

browser_tests/fixtures/selectors.ts

@@ -33,6 +33,7 @@ export const TestIds = {
   },
   topbar: {
     queueButton: 'queue-button',
+    queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button'
   },
   nodeLibrary: {

browser_tests/helpers/actionbar.ts

@@ -29,8 +29,10 @@ class ComfyQueueButton {
   public readonly dropdownButton: Locator
   constructor(public readonly actionbar: ComfyActionbar) {
     this.root = actionbar.root.getByTestId(TestIds.topbar.queueButton)
-    this.primaryButton = this.root.locator('.p-splitbutton-button')
-    this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
+    this.primaryButton = this.root
+    this.dropdownButton = actionbar.root.getByTestId(
+      TestIds.topbar.queueModeMenuTrigger
+    )
   }
 
   public async toggleOptions() {

src/components/actionbar/BatchCountEdit.test.ts

@@ -0,0 +1,98 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { useQueueSettingsStore } from '@/stores/queueStore'
+
+import BatchCountEdit from './BatchCountEdit.vue'
+
+const maxBatchCount = 16
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (settingId: string) =>
+      settingId === 'Comfy.QueueButton.BatchCountLimit' ? maxBatchCount : 1
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        increment: 'Increment',
+        decrement: 'Decrement'
+      },
+      menu: {
+        batchCount: 'Batch Count'
+      }
+    }
+  }
+})
+
+function createWrapper(initialBatchCount = 1) {
+  const pinia = createTestingPinia({
+    createSpy: vi.fn,
+    stubActions: false,
+    initialState: {
+      queueSettingsStore: {
+        batchCount: initialBatchCount
+      }
+    }
+  })
+
+  const wrapper = mount(BatchCountEdit, {
+    global: {
+      plugins: [pinia, i18n],
+      directives: {
+        tooltip: () => {}
+      }
+    }
+  })
+
+  const queueSettingsStore = useQueueSettingsStore()
+
+  return { wrapper, queueSettingsStore }
+}
+
+describe('BatchCountEdit', () => {
+  it('doubles the current batch count when increment is clicked', async () => {
+    const { wrapper, queueSettingsStore } = createWrapper(3)
+
+    await wrapper.get('button[aria-label="Increment"]').trigger('click')
+
+    expect(queueSettingsStore.batchCount).toBe(6)
+  })
+
+  it('halves the current batch count when decrement is clicked', async () => {
+    const { wrapper, queueSettingsStore } = createWrapper(9)
+
+    await wrapper.get('button[aria-label="Decrement"]').trigger('click')
+
+    expect(queueSettingsStore.batchCount).toBe(4)
+  })
+
+  it('clamps typed values to queue limits on blur', async () => {
+    const { wrapper, queueSettingsStore } = createWrapper(2)
+    const input = wrapper.get('input')
+
+    await input.setValue('999')
+    await input.trigger('blur')
+    await nextTick()
+
+    expect(queueSettingsStore.batchCount).toBe(maxBatchCount)
+    expect((input.element as HTMLInputElement).value).toBe(
+      String(maxBatchCount)
+    )
+
+    await input.setValue('0')
+    await input.trigger('blur')
+    await nextTick()
+
+    expect(queueSettingsStore.batchCount).toBe(1)
+    expect((input.element as HTMLInputElement).value).toBe('1')
+  })
+})

src/components/actionbar/BatchCountEdit.vue

@@ -1,71 +1,129 @@
 <template>
   <div
     v-tooltip.bottom="{
-      value: $t('menu.batchCount'),
+      value: t('menu.batchCount'),
       showDelay: 600
     }"
-    class="batch-count"
-    :aria-label="$t('menu.batchCount')"
+    class="batch-count h-full"
+    :aria-label="t('menu.batchCount')"
   >
-    <InputNumber
-      v-model="batchCount"
-      class="w-14"
-      :min="minQueueCount"
-      :max="maxQueueCount"
-      fluid
-      show-buttons
-      :pt="{
-        incrementButton: {
-          class: 'w-6',
-          onmousedown: () => {
-            handleClick(true)
-          }
-        },
-        decrementButton: {
-          class: 'w-6',
-          onmousedown: () => {
-            handleClick(false)
-          }
-        }
-      }"
-    />
+    <div
+      class="flex h-full w-14 overflow-hidden rounded-l-lg bg-secondary-background"
+    >
+      <input
+        ref="batchCountInputRef"
+        v-model="batchCountInput"
+        type="text"
+        inputmode="numeric"
+        :aria-label="t('menu.batchCount')"
+        :class="inputClass"
+        @focus="onInputFocus"
+        @input="onInput"
+        @blur="onInputBlur"
+        @keydown.enter.prevent="onInputEnter"
+      />
+      <div class="flex h-full w-6 flex-col">
+        <Button
+          variant="secondary"
+          size="unset"
+          :aria-label="t('g.increment')"
+          :class="cn(stepButtonClass, incrementButtonClass)"
+          :disabled="isIncrementDisabled"
+          @click="incrementBatchCount"
+        >
+          <TinyChevronIcon rotate-up />
+        </Button>
+        <Button
+          variant="secondary"
+          size="unset"
+          :aria-label="t('g.decrement')"
+          :class="cn(stepButtonClass, decrementButtonClass)"
+          :disabled="isDecrementDisabled"
+          @click="decrementBatchCount"
+        >
+          <TinyChevronIcon />
+        </Button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import InputNumber from 'primevue/inputnumber'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import TinyChevronIcon from './TinyChevronIcon.vue'
+
+const { t } = useI18n()
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)
-const minQueueCount = 1
 
 const settingStore = useSettingStore()
+const minQueueCount = 1
 const maxQueueCount = computed(() =>
   settingStore.get('Comfy.QueueButton.BatchCountLimit')
 )
 
-const handleClick = (increment: boolean) => {
-  let newCount: number
-  if (increment) {
-    const originalCount = batchCount.value - 1
-    newCount = Math.min(originalCount * 2, maxQueueCount.value)
-  } else {
-    const originalCount = batchCount.value + 1
-    newCount = Math.floor(originalCount / 2)
-  }
+const batchCountInputRef = ref<HTMLInputElement | null>(null)
+const batchCountInput = ref(String(batchCount.value))
+const isEditing = ref(false)
 
-  batchCount.value = newCount
+const isIncrementDisabled = computed(
+  () => batchCount.value >= maxQueueCount.value
+)
+const isDecrementDisabled = computed(() => batchCount.value <= minQueueCount)
+const inputClass =
+  'h-full min-w-0 flex-1 border-none bg-secondary-background pl-1 pr-0 text-center text-sm font-normal tabular-nums text-base-foreground outline-none'
+const stepButtonClass =
+  'h-1/2 w-full rounded-none border-none p-0 text-muted-foreground hover:bg-secondary-background-hover disabled:cursor-not-allowed disabled:opacity-50'
+const incrementButtonClass = 'rounded-tr-none border-b border-border-subtle'
+const decrementButtonClass = 'rounded-br-none'
+
+watch(batchCount, (nextBatchCount) => {
+  if (!isEditing.value) {
+    batchCountInput.value = String(nextBatchCount)
+  }
+})
+
+const clampBatchCount = (nextBatchCount: number): number =>
+  Math.min(Math.max(nextBatchCount, minQueueCount), maxQueueCount.value)
+
+const setBatchCount = (nextBatchCount: number) => {
+  batchCount.value = clampBatchCount(nextBatchCount)
+  batchCountInput.value = String(batchCount.value)
+}
+
+const incrementBatchCount = () => {
+  setBatchCount(batchCount.value * 2)
+}
+
+const decrementBatchCount = () => {
+  setBatchCount(Math.floor(batchCount.value / 2))
+}
+
+const onInputFocus = () => {
+  isEditing.value = true
+}
+
+const onInput = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  batchCountInput.value = input.value.replace(/[^0-9]/g, '')
+}
+
+const onInputBlur = () => {
+  isEditing.value = false
+  const parsedInput = Number.parseInt(batchCountInput.value, 10)
+  setBatchCount(Number.isNaN(parsedInput) ? minQueueCount : parsedInput)
+}
+
+const onInputEnter = () => {
+  batchCountInputRef.value?.blur()
 }
 </script>
-
-<style scoped>
-:deep(.p-inputtext) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-</style>

src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type {
@@ -41,28 +41,9 @@ vi.mock('@/stores/workspaceStore', () => ({
   })
 }))
 
-const SplitButtonStub = defineComponent({
-  name: 'SplitButton',
-  props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    severity: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  template: `
-    <button
-      data-testid="split-button"
-      :data-label="label"
-      :data-severity="severity"
-    >
-      <slot name="icon" />
-    </button>
-  `
-})
+const BatchCountEditStub = {
+  template: '<div data-testid="batch-count-edit" />'
+}
 
 const i18n = createI18n({
   legacy: false,
@@ -107,14 +88,26 @@ function createWrapper() {
         tooltip: () => {}
       },
       stubs: {
-        SplitButton: SplitButtonStub,
-        BatchCountEdit: true
+        BatchCountEdit: BatchCountEditStub,
+        DropdownMenuRoot: { template: '<div><slot /></div>' },
+        DropdownMenuTrigger: { template: '<div><slot /></div>' },
+        DropdownMenuPortal: { template: '<div><slot /></div>' },
+        DropdownMenuContent: { template: '<div><slot /></div>' },
+        DropdownMenuItem: { template: '<div><slot /></div>' }
       }
     }
   })
 }
 
 describe('ComfyQueueButton', () => {
+  it('renders the batch count control before the run button', () => {
+    const wrapper = createWrapper()
+    const controls = wrapper.get('.queue-button-group').element.children
+
+    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
+    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
+  })
+
   it('keeps the run instant presentation while idle even with active jobs', async () => {
     const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
@@ -124,10 +117,10 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    const splitButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(splitButton.attributes('data-label')).toBe('Run (Instant)')
-    expect(splitButton.attributes('data-severity')).toBe('primary')
+    expect(queueButton.text()).toContain('Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 
@@ -138,10 +131,10 @@ describe('ComfyQueueButton', () => {
     queueSettingsStore.mode = 'instant-running'
     await nextTick()
 
-    const splitButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(splitButton.attributes('data-label')).toBe('Stop Run (Instant)')
-    expect(splitButton.attributes('data-severity')).toBe('danger')
+    expect(queueButton.text()).toContain('Stop Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('destructive')
     expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
   })
 
@@ -159,19 +152,17 @@ describe('ComfyQueueButton', () => {
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    const splitButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
-    expect(splitButtonWhileStopping.attributes('data-label')).toBe(
-      'Run (Instant)'
-    )
-    expect(splitButtonWhileStopping.attributes('data-severity')).toBe('primary')
+    const queueButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
+    expect(queueButtonWhileStopping.text()).toContain('Run (Instant)')
+    expect(queueButtonWhileStopping.attributes('data-variant')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
 
     expect(commandStore.execute).not.toHaveBeenCalled()
 
-    const splitButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = wrapper.get('[data-testid="queue-button"]')
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    expect(splitButton.attributes('data-label')).toBe('Run (Instant)')
-    expect(splitButton.attributes('data-severity')).toBe('primary')
+    expect(queueButton.text()).toContain('Run (Instant)')
+    expect(queueButton.attributes('data-variant')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -1,48 +1,83 @@
 <template>
-  <div class="queue-button-group flex">
-    <SplitButton
+  <ButtonGroup
+    class="queue-button-group h-8 rounded-lg bg-secondary-background"
+  >
+    <BatchCountEdit />
+    <Button
       v-tooltip.bottom="{
         value: queueButtonTooltip,
         showDelay: 600
       }"
-      class="comfyui-queue-button"
-      :label="queueButtonLabel"
-      :severity="queueButtonSeverity"
-      size="small"
-      :model="queueModeMenuItems"
+      :variant="queueButtonVariant"
+      size="unset"
+      :class="queueActionButtonClass"
       data-testid="queue-button"
+      :data-variant="queueButtonVariant"
       @click="queuePrompt"
     >
-      <template #icon>
-        <i :class="iconClass" />
-      </template>
-      <template #item="{ item }">
+      <i :class="cn(iconClass, 'size-4')" />
+      {{ queueButtonLabel }}
+    </Button>
+
+    <DropdownMenuRoot>
+      <DropdownMenuTrigger as-child>
         <Button
-          v-tooltip="{
-            value: item.tooltip,
-            showDelay: 600
-          }"
-          :variant="item.key === selectedQueueMode ? 'primary' : 'secondary'"
-          size="sm"
-          class="w-full justify-start"
+          variant="secondary"
+          size="unset"
+          :class="queueMenuTriggerClass"
+          :aria-label="t('menu.run')"
+          data-testid="queue-mode-menu-trigger"
         >
-          <i v-if="item.icon" :class="item.icon" />
-          {{ String(item.label ?? '') }}
+          <TinyChevronIcon />
         </Button>
-      </template>
-    </SplitButton>
-    <BatchCountEdit />
-  </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          :side-offset="4"
+          class="z-1000 min-w-44 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
+        >
+          <DropdownMenuItem
+            v-for="item in queueModeMenuItems"
+            :key="item.key"
+            as-child
+            @select.prevent="item.command"
+          >
+            <Button
+              v-tooltip="{
+                value: item.tooltip,
+                showDelay: 600
+              }"
+              :variant="
+                item.key === selectedQueueMode ? 'primary' : 'secondary'
+              "
+              size="sm"
+              :class="queueMenuItemButtonClass"
+            >
+              {{ item.label }}
+            </Button>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
+  </ButtonGroup>
 </template>
 
 <script setup lang="ts">
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
 import { storeToRefs } from 'pinia'
-import type { MenuItem } from 'primevue/menuitem'
-import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import BatchCountEdit from '@/components/actionbar/BatchCountEdit.vue'
+import TinyChevronIcon from '@/components/actionbar/TinyChevronIcon.vue'
 import Button from '@/components/ui/button/Button.vue'
+import ButtonGroup from '@/components/ui/button-group/ButtonGroup.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
@@ -54,10 +89,9 @@ import {
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { cn } from '@/utils/tailwindUtil'
 import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
-import BatchCountEdit from '../BatchCountEdit.vue'
-
 const workspaceStore = useWorkspaceStore()
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
@@ -69,50 +103,60 @@ const hasMissingNodes = computed(() =>
 const { t } = useI18n()
 type QueueModeMenuKey = 'disabled' | 'change' | 'instant-idle'
 
+interface QueueModeMenuItem {
+  key: QueueModeMenuKey
+  label: string
+  tooltip: string
+  command: () => void
+}
+
 const selectedQueueMode = computed<QueueModeMenuKey>(() =>
   isInstantMode(queueMode.value) ? 'instant-idle' : queueMode.value
 )
 
-const queueModeMenuItemLookup = computed(() => {
-  const items: Record<string, MenuItem> = {
-    disabled: {
-      key: 'disabled',
-      label: t('menu.run'),
-      tooltip: t('menu.disabledTooltip'),
-      command: () => {
-        queueMode.value = 'disabled'
-      }
-    },
-    change: {
-      key: 'change',
-      label: `${t('menu.run')} (${t('menu.onChange')})`,
-      tooltip: t('menu.onChangeTooltip'),
-      command: () => {
-        useTelemetry()?.trackUiButtonClicked({
-          button_id: 'queue_mode_option_run_on_change_selected'
-        })
-        queueMode.value = 'change'
+const queueModeMenuItemLookup = computed<Record<string, QueueModeMenuItem>>(
+  () => {
+    const items: Record<string, QueueModeMenuItem> = {
+      disabled: {
+        key: 'disabled',
+        label: t('menu.run'),
+        tooltip: t('menu.disabledTooltip'),
+        command: () => {
+          queueMode.value = 'disabled'
+        }
+      },
+      change: {
+        key: 'change',
+        label: `${t('menu.run')} (${t('menu.onChange')})`,
+        tooltip: t('menu.onChangeTooltip'),
+        command: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'queue_mode_option_run_on_change_selected'
+          })
+          queueMode.value = 'change'
+        }
       }
     }
-  }
-  if (!isCloud) {
-    items['instant-idle'] = {
-      key: 'instant-idle',
-      label: `${t('menu.run')} (${t('menu.instant')})`,
-      tooltip: t('menu.instantTooltip'),
-      command: () => {
-        useTelemetry()?.trackUiButtonClicked({
-          button_id: 'queue_mode_option_run_instant_selected'
-        })
-        queueMode.value = 'instant-idle'
+
+    if (!isCloud) {
+      items['instant-idle'] = {
+        key: 'instant-idle',
+        label: `${t('menu.run')} (${t('menu.instant')})`,
+        tooltip: t('menu.instantTooltip'),
+        command: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'queue_mode_option_run_instant_selected'
+          })
+          queueMode.value = 'instant-idle'
+        }
       }
     }
+
+    return items
   }
-  return items
-})
+)
 
 const activeQueueModeMenuItem = computed(() => {
-  // Fallback to disabled mode if current mode is not available (e.g., instant mode in cloud)
   return (
     queueModeMenuItemLookup.value[selectedQueueMode.value] ||
     queueModeMenuItemLookup.value.disabled
@@ -132,9 +176,13 @@ const queueButtonLabel = computed(() =>
     : String(activeQueueModeMenuItem.value?.label ?? '')
 )
 
-const queueButtonSeverity = computed(() =>
-  isStopInstantAction.value ? 'danger' : 'primary'
+const queueButtonVariant = computed<'destructive' | 'primary'>(() =>
+  isStopInstantAction.value ? 'destructive' : 'primary'
 )
+const queueActionButtonClass = 'h-full rounded-lg gap-1.5 px-4 font-light'
+const queueMenuTriggerClass =
+  'h-full w-6 rounded-l-none rounded-r-lg border-l border-border-subtle p-0 text-muted-foreground data-[state=open]:bg-secondary-background-hover'
+const queueMenuItemButtonClass = 'w-full justify-start font-normal'
 
 const iconClass = computed(() => {
   if (isStopInstantAction.value) {
@@ -201,10 +249,3 @@ const queuePrompt = async (e: Event) => {
   })
 }
 </script>
-
-<style scoped>
-.comfyui-queue-button :deep(.p-splitbutton-dropdown) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-</style>

src/components/actionbar/TinyChevronIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="h-[5px] min-h-[5px] w-[8px] min-w-[8px]"
+    :class="{ 'rotate-180': rotateUp }"
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="5"
+    viewBox="0 0 8 5"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M0.650391 0.649902L3.65039 3.6499L6.65039 0.649902"
+      stroke="currentColor"
+      stroke-width="1.3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const { rotateUp = false } = defineProps<{
+  rotateUp?: boolean
+}>()
+</script>

src/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+interface Props extends PrimitiveProps {
+  class?: HTMLAttributes['class']
+}
+
+const { as = 'div', class: className = '', ...restProps } = defineProps<Props>()
+const forwardedProps = useForwardProps(restProps)
+</script>
+
+<template>
+  <Primitive
+    v-bind="forwardedProps"
+    :as
+    :class="
+      cn('inline-flex items-stretch overflow-hidden rounded-md', className)
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

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]:size-4 [&_svg]:shrink-0',
+  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',
   variants: {
     variant: {
       secondary:

src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue

@@ -8,7 +8,7 @@
     :disabled="isUpdating"
     @click="updateAllPacks"
   >
-    <DotSpinner v-if="isUpdating" duration="1s" :size="12" />
+    <DotSpinner v-if="isUpdating" duration="1s" />
     <i v-else class="icon-[lucide--refresh-cw]" />
     <span>{{
       nodePacks.length > 1 ? $t('manager.updateAll') : $t('manager.update')