Remove cloud notification badge from topbar

- Remove persistent 'NEW' badge that appeared after modal dismissal
- Keep one-time modal notification for macOS desktop users
- Clean up unused badge translations

.github/workflows/pr-backport.yaml

@@ -78,8 +78,7 @@ jobs:
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
           else
-            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-            LABELS=$(echo "$LABELS" | jq -r '.[].name')
+            LABELS=$(jq -r '.pull_request.labels[].name' "$GITHUB_EVENT_PATH")
           fi
 
           add_target() {

apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts

@@ -16,7 +16,8 @@ export const DESKTOP_MAINTENANCE_TASKS: Readonly<MaintenanceTask>[] = [
     execute: async () => await electron.setBasePath(),
     name: 'Base path',
     shortDescription: 'Change the application base path.',
-    errorDescription: 'Unable to open the base path.  Please select a new one.',
+    errorDescription:
+      'The current base path is invalid or unsafe. Please select a new location.',
     description:
       'The base path is the default location where ComfyUI stores data. It is the location for the python environment, and may also contain models, custom nodes, and other extensions.',
     isInstallationFix: true,

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

@@ -85,6 +85,7 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   const electron = electronAPI()
 
   // Reactive state
+  const lastUpdate = ref<InstallValidation | null>(null)
   const isRefreshing = ref(false)
   const isRunningTerminalCommand = computed(() =>
     tasks.value
@@ -97,6 +98,13 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
       .some((task) => getRunner(task)?.executing)
   )
 
+  const unsafeBasePath = computed(
+    () => lastUpdate.value?.unsafeBasePath === true
+  )
+  const unsafeBasePathReason = computed(
+    () => lastUpdate.value?.unsafeBasePathReason
+  )
+
   // Task list
   const tasks = ref(DESKTOP_MAINTENANCE_TASKS)
 
@@ -123,6 +131,7 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
    * @param validationUpdate Update details passed in by electron
    */
   const processUpdate = (validationUpdate: InstallValidation) => {
+    lastUpdate.value = validationUpdate
     const update = validationUpdate as IndexedUpdate
     isRefreshing.value = true
 
@@ -155,7 +164,11 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   }
 
   const execute = async (task: MaintenanceTask) => {
-    return getRunner(task).execute(task)
+    const success = await getRunner(task).execute(task)
+    if (success && task.isInstallationFix) {
+      await refreshDesktopTasks()
+    }
+    return success
   }
 
   return {
@@ -163,6 +176,8 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
     isRefreshing,
     isRunningTerminalCommand,
     isRunningInstallationFix,
+    unsafeBasePath,
+    unsafeBasePathReason,
     execute,
     getRunner,
     processUpdate,

apps/desktop-ui/src/views/MaintenanceView.stories.ts

@@ -0,0 +1,159 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { defineAsyncComponent } from 'vue'
+
+type UnsafeReason = 'appInstallDir' | 'updaterCache' | 'oneDrive' | null
+type ValidationIssueState = 'OK' | 'warning' | 'error' | 'skipped'
+
+type ValidationState = {
+  inProgress: boolean
+  installState: string
+  basePath?: ValidationIssueState
+  unsafeBasePath: boolean
+  unsafeBasePathReason: UnsafeReason
+  venvDirectory?: ValidationIssueState
+  pythonInterpreter?: ValidationIssueState
+  pythonPackages?: ValidationIssueState
+  uv?: ValidationIssueState
+  git?: ValidationIssueState
+  vcRedist?: ValidationIssueState
+  upgradePackages?: ValidationIssueState
+}
+
+const validationState: ValidationState = {
+  inProgress: false,
+  installState: 'installed',
+  basePath: 'OK',
+  unsafeBasePath: false,
+  unsafeBasePathReason: null,
+  venvDirectory: 'OK',
+  pythonInterpreter: 'OK',
+  pythonPackages: 'OK',
+  uv: 'OK',
+  git: 'OK',
+  vcRedist: 'OK',
+  upgradePackages: 'OK'
+}
+
+const createMockElectronAPI = () => {
+  const logListeners: Array<(message: string) => void> = []
+
+  const getValidationUpdate = () => ({
+    ...validationState
+  })
+
+  return {
+    getPlatform: () => 'darwin',
+    changeTheme: (_theme: unknown) => {},
+    onLogMessage: (listener: (message: string) => void) => {
+      logListeners.push(listener)
+    },
+    showContextMenu: (_options: unknown) => {},
+    Events: {
+      trackEvent: (_eventName: string, _data?: unknown) => {}
+    },
+    Validation: {
+      onUpdate: (_callback: (update: unknown) => void) => {},
+      async getStatus() {
+        return getValidationUpdate()
+      },
+      async validateInstallation(callback: (update: unknown) => void) {
+        callback(getValidationUpdate())
+      },
+      async complete() {
+        // Only allow completion when the base path is safe
+        return !validationState.unsafeBasePath
+      },
+      dispose: () => {}
+    },
+    setBasePath: () => Promise.resolve(true),
+    reinstall: () => Promise.resolve(),
+    uv: {
+      installRequirements: () => Promise.resolve(),
+      clearCache: () => Promise.resolve(),
+      resetVenv: () => Promise.resolve()
+    }
+  }
+}
+
+const ensureElectronAPI = () => {
+  const globalWindow = window as unknown as { electronAPI?: unknown }
+  if (!globalWindow.electronAPI) {
+    globalWindow.electronAPI = createMockElectronAPI()
+  }
+
+  return globalWindow.electronAPI
+}
+
+const MaintenanceView = defineAsyncComponent(async () => {
+  ensureElectronAPI()
+  const module = await import('./MaintenanceView.vue')
+  return module.default
+})
+
+const meta: Meta<typeof MaintenanceView> = {
+  title: 'Desktop/Views/MaintenanceView',
+  component: MaintenanceView,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  name: 'All tasks OK',
+  render: () => ({
+    components: { MaintenanceView },
+    setup() {
+      validationState.inProgress = false
+      validationState.installState = 'installed'
+      validationState.basePath = 'OK'
+      validationState.unsafeBasePath = false
+      validationState.unsafeBasePathReason = null
+      validationState.venvDirectory = 'OK'
+      validationState.pythonInterpreter = 'OK'
+      validationState.pythonPackages = 'OK'
+      validationState.uv = 'OK'
+      validationState.git = 'OK'
+      validationState.vcRedist = 'OK'
+      validationState.upgradePackages = 'OK'
+      ensureElectronAPI()
+      return {}
+    },
+    template: '<MaintenanceView />'
+  })
+}
+
+export const UnsafeBasePathOneDrive: Story = {
+  name: 'Unsafe base path (OneDrive)',
+  render: () => ({
+    components: { MaintenanceView },
+    setup() {
+      validationState.inProgress = false
+      validationState.installState = 'installed'
+      validationState.basePath = 'error'
+      validationState.unsafeBasePath = true
+      validationState.unsafeBasePathReason = 'oneDrive'
+      validationState.venvDirectory = 'OK'
+      validationState.pythonInterpreter = 'OK'
+      validationState.pythonPackages = 'OK'
+      validationState.uv = 'OK'
+      validationState.git = 'OK'
+      validationState.vcRedist = 'OK'
+      validationState.upgradePackages = 'OK'
+      ensureElectronAPI()
+      return {}
+    },
+    template: '<MaintenanceView />'
+  })
+}

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

@@ -47,6 +47,28 @@
           </div>
         </div>
 
+        <!-- Unsafe migration warning -->
+        <div v-if="taskStore.unsafeBasePath" class="my-4">
+          <p class="flex items-start gap-3 text-neutral-300">
+            <Tag
+              icon="pi pi-exclamation-triangle"
+              severity="warn"
+              :value="t('icon.exclamation-triangle')"
+            />
+            <span>
+              <strong class="block mb-1">
+                {{ t('maintenance.unsafeMigration.title') }}
+              </strong>
+              <span class="block mb-1">
+                {{ unsafeReasonText }}
+              </span>
+              <span class="block text-sm text-neutral-400">
+                {{ t('maintenance.unsafeMigration.action') }}
+              </span>
+            </span>
+          </p>
+        </div>
+
         <!-- Tasks -->
         <TaskListPanel
           class="border-neutral-700 border-solid border-x-0 border-y"
@@ -89,10 +111,10 @@
 import { PrimeIcons } from '@primevue/core/api'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
+import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
@@ -139,6 +161,27 @@ const filterOptions = ref([
 /** Filter binding; can be set to show all tasks, or only errors. */
 const filter = ref<MaintenanceFilter>(filterOptions.value[0])
 
+const unsafeReasonText = computed(() => {
+  const reason = taskStore.unsafeBasePathReason
+  if (!reason) {
+    return t('maintenance.unsafeMigration.generic')
+  }
+
+  if (reason === 'appInstallDir') {
+    return t('maintenance.unsafeMigration.appInstallDir')
+  }
+
+  if (reason === 'updaterCache') {
+    return t('maintenance.unsafeMigration.updaterCache')
+  }
+
+  if (reason === 'oneDrive') {
+    return t('maintenance.unsafeMigration.oneDrive')
+  }
+
+  return t('maintenance.unsafeMigration.generic')
+})
+
 /** If valid, leave the validation window. */
 const completeValidation = async () => {
   const isValid = await electron.Validation.complete()

browser_tests/fixtures/ComfyPage.ts

@@ -16,7 +16,6 @@ import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
-  QueueSidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
@@ -31,7 +30,6 @@ type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 class ComfyMenu {
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
-  private _queueTab: QueueSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
@@ -60,11 +58,6 @@ class ComfyMenu {
     return this._workflowsTab
   }
 
-  get queueTab() {
-    this._queueTab ??= new QueueSidebarTab(this.page)
-    return this._queueTab
-  }
-
   get topbar() {
     this._topbar ??= new Topbar(this.page)
     return this._topbar
@@ -564,7 +557,7 @@ export class ComfyPage {
   async dragAndDrop(source: Position, target: Position) {
     await this.page.mouse.move(source.x, source.y)
     await this.page.mouse.down()
-    await this.page.mouse.move(target.x, target.y)
+    await this.page.mouse.move(target.x, target.y, { steps: 100 })
     await this.page.mouse.up()
     await this.nextFrame()
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -65,7 +65,9 @@ export class VueNodeHelpers {
    * Select a specific Vue node by ID
    */
   async selectNode(nodeId: string): Promise<void> {
-    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
+    await this.page
+      .locator(`[data-node-id="${nodeId}"] .lg-node-header`)
+      .click()
   }
 
   /**
@@ -77,11 +79,13 @@ export class VueNodeHelpers {
     // Select first node normally
     await this.selectNode(nodeIds[0])
 
-    // Add additional nodes with Ctrl+click
+    // Add additional nodes with Ctrl+click on header
     for (let i = 1; i < nodeIds.length; i++) {
-      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
-        modifiers: ['Control']
-      })
+      await this.page
+        .locator(`[data-node-id="${nodeIds[i]}"] .lg-node-header`)
+        .click({
+          modifiers: ['Control']
+        })
     }
   }
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -148,124 +148,3 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
   }
 }
-
-export class QueueSidebarTab extends SidebarTab {
-  constructor(public readonly page: Page) {
-    super(page, 'queue')
-  }
-
-  get root() {
-    return this.page.locator('.sidebar-content-container', { hasText: 'Queue' })
-  }
-
-  get tasks() {
-    return this.root.locator('[data-virtual-grid-item]')
-  }
-
-  get visibleTasks() {
-    return this.tasks.locator('visible=true')
-  }
-
-  get clearButton() {
-    return this.root.locator('.clear-all-button')
-  }
-
-  get collapseTasksButton() {
-    return this.getToggleExpandButton(false)
-  }
-
-  get expandTasksButton() {
-    return this.getToggleExpandButton(true)
-  }
-
-  get noResultsPlaceholder() {
-    return this.root.locator('.no-results-placeholder')
-  }
-
-  get galleryImage() {
-    return this.page.locator('.galleria-image')
-  }
-
-  private getToggleExpandButton(isExpanded: boolean) {
-    const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
-    return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
-  }
-
-  async open() {
-    await super.open()
-    return this.root.waitFor({ state: 'visible' })
-  }
-
-  async close() {
-    await super.close()
-    await this.root.waitFor({ state: 'hidden' })
-  }
-
-  async expandTasks() {
-    await this.expandTasksButton.click()
-    await this.collapseTasksButton.waitFor({ state: 'visible' })
-  }
-
-  async collapseTasks() {
-    await this.collapseTasksButton.click()
-    await this.expandTasksButton.waitFor({ state: 'visible' })
-  }
-
-  async waitForTasks() {
-    return Promise.all([
-      this.tasks.first().waitFor({ state: 'visible' }),
-      this.tasks.last().waitFor({ state: 'visible' })
-    ])
-  }
-
-  async scrollTasks(direction: 'up' | 'down') {
-    const scrollToEl =
-      direction === 'up' ? this.tasks.last() : this.tasks.first()
-    await scrollToEl.scrollIntoViewIfNeeded()
-    await this.waitForTasks()
-  }
-
-  async clearTasks() {
-    await this.clearButton.click()
-    const confirmButton = this.page.getByLabel('Delete')
-    await confirmButton.click()
-    await this.noResultsPlaceholder.waitFor({ state: 'visible' })
-  }
-
-  /** Set the width of the tab (out of 100). Must call before opening the tab */
-  async setTabWidth(width: number) {
-    if (width < 0 || width > 100) {
-      throw new Error('Width must be between 0 and 100')
-    }
-    return this.page.evaluate((width) => {
-      localStorage.setItem('queue', JSON.stringify([width, 100 - width]))
-    }, width)
-  }
-
-  getTaskPreviewButton(taskIndex: number) {
-    return this.tasks.nth(taskIndex).getByRole('button')
-  }
-
-  async openTaskPreview(taskIndex: number) {
-    const previewButton = this.getTaskPreviewButton(taskIndex)
-    await previewButton.click()
-    return this.galleryImage.waitFor({ state: 'visible' })
-  }
-
-  getGalleryImage(imageFilename: string) {
-    return this.galleryImage.and(this.page.getByAltText(imageFilename))
-  }
-
-  getTaskImage(imageFilename: string) {
-    return this.tasks.getByAltText(imageFilename)
-  }
-
-  /** Trigger the queue store and tasks to update */
-  async triggerTasksUpdate() {
-    await this.page.evaluate(() => {
-      window['app']['api'].dispatchCustomEvent('status', {
-        exec_info: { queue_remaining: 0 }
-      })
-    })
-  }
-}

browser_tests/tests/sidebar/queue.spec.ts

@@ -1,210 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe.skip('Queue sidebar', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('can display tasks', async ({ comfyPage }) => {
-    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
-    await comfyPage.menu.queueTab.open()
-    await comfyPage.menu.queueTab.waitForTasks()
-    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
-  })
-
-  test('can display tasks after closing then opening', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
-    await comfyPage.menu.queueTab.open()
-    await comfyPage.menu.queueTab.close()
-    await comfyPage.menu.queueTab.open()
-    await comfyPage.menu.queueTab.waitForTasks()
-    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
-  })
-
-  test.describe('Virtual scroll', () => {
-    const layouts = [
-      { description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
-      { description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
-      { description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
-    ]
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage
-        .setupHistory()
-        .withTask(['example.webp'])
-        .repeat(50)
-        .setupRoutes()
-    })
-
-    layouts.forEach(({ description, width, rows, cols }) => {
-      const preRenderedRows = 1
-      const preRenderedTasks = preRenderedRows * cols * 2
-      const visibleTasks = rows * cols
-      const expectRenderLimit = visibleTasks + preRenderedTasks
-
-      test.describe(description, () => {
-        test.beforeEach(async ({ comfyPage }) => {
-          await comfyPage.menu.queueTab.setTabWidth(width)
-          await comfyPage.menu.queueTab.open()
-          await comfyPage.menu.queueTab.waitForTasks()
-        })
-
-        test('should not render items outside of view', async ({
-          comfyPage
-        }) => {
-          const renderedCount =
-            await comfyPage.menu.queueTab.visibleTasks.count()
-          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
-        })
-
-        test('should teardown items after scrolling away', async ({
-          comfyPage
-        }) => {
-          await comfyPage.menu.queueTab.scrollTasks('down')
-          const renderedCount =
-            await comfyPage.menu.queueTab.visibleTasks.count()
-          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
-        })
-
-        test('should re-render items after scrolling away then back', async ({
-          comfyPage
-        }) => {
-          await comfyPage.menu.queueTab.scrollTasks('down')
-          await comfyPage.menu.queueTab.scrollTasks('up')
-          const renderedCount =
-            await comfyPage.menu.queueTab.visibleTasks.count()
-          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
-        })
-      })
-    })
-  })
-
-  test.describe('Expand tasks', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      // 2-item batch and 3-item batch -> 3 additional items when expanded
-      await comfyPage
-        .setupHistory()
-        .withTask(['example.webp', 'example.webp', 'example.webp'])
-        .withTask(['example.webp', 'example.webp'])
-        .setupRoutes()
-      await comfyPage.menu.queueTab.open()
-      await comfyPage.menu.queueTab.waitForTasks()
-    })
-
-    test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
-      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
-      await comfyPage.menu.queueTab.expandTasks()
-      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
-        initialCount + 3
-      )
-    })
-
-    test('can collapse flat tasks', async ({ comfyPage }) => {
-      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
-      await comfyPage.menu.queueTab.expandTasks()
-      await comfyPage.menu.queueTab.collapseTasks()
-      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
-        initialCount
-      )
-    })
-  })
-
-  test.describe('Clear tasks', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage
-        .setupHistory()
-        .withTask(['example.webp'])
-        .repeat(6)
-        .setupRoutes()
-      await comfyPage.menu.queueTab.open()
-    })
-
-    test('can clear all tasks', async ({ comfyPage }) => {
-      await comfyPage.menu.queueTab.clearTasks()
-      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
-      expect(
-        await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
-      ).toBe(true)
-    })
-
-    test('can load new tasks after clearing all', async ({ comfyPage }) => {
-      await comfyPage.menu.queueTab.clearTasks()
-      await comfyPage.menu.queueTab.close()
-      await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
-      await comfyPage.menu.queueTab.open()
-      await comfyPage.menu.queueTab.waitForTasks()
-      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
-    })
-  })
-
-  test.describe('Gallery', () => {
-    const firstImage = 'example.webp'
-    const secondImage = 'image32x32.webp'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage
-        .setupHistory()
-        .withTask([secondImage])
-        .withTask([firstImage])
-        .setupRoutes()
-      await comfyPage.menu.queueTab.open()
-      await comfyPage.menu.queueTab.waitForTasks()
-      await comfyPage.menu.queueTab.openTaskPreview(0)
-    })
-
-    test('displays gallery image after opening task preview', async ({
-      comfyPage
-    }) => {
-      await comfyPage.nextFrame()
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
-    })
-
-    test('maintains active gallery item when new tasks are added', async ({
-      comfyPage
-    }) => {
-      // Add a new task while the gallery is still open
-      const newImage = 'image64x64.webp'
-      comfyPage.setupHistory().withTask([newImage])
-      await comfyPage.menu.queueTab.triggerTasksUpdate()
-      await comfyPage.page.waitForTimeout(500)
-      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
-      await newTask.waitFor({ state: 'visible' })
-      // The active gallery item should still be the initial image
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
-    })
-
-    test.describe('Gallery navigation', () => {
-      const paths: {
-        description: string
-        path: ('Right' | 'Left')[]
-        end: string
-      }[] = [
-        { description: 'Right', path: ['Right'], end: secondImage },
-        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
-        { description: 'Left wrap', path: ['Left'], end: secondImage },
-        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
-      ]
-
-      paths.forEach(({ description, path, end }) => {
-        test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
-          for (const direction of path)
-            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
-              delay: 256
-            })
-          await comfyPage.nextFrame()
-          await expect(
-            comfyPage.menu.queueTab.getGalleryImage(end)
-          ).toBeVisible()
-        })
-      })
-    })
-  })
-})

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -6,6 +6,7 @@ import {
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.vueNodes.waitForNodes()
   })
 

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

@@ -9,6 +9,7 @@ test.beforeEach(async ({ comfyPage }) => {
 test.describe('Vue Nodes - LOD', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.setup()
     await comfyPage.loadWorkflow('default')
   })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.33.1",
+  "version": "1.33.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -75,6 +75,7 @@
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "@vue/test-utils": "catalog:",
+    "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
@@ -112,6 +113,7 @@
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",
+    "unplugin-typegpu": "catalog:",
     "unplugin-vue-components": "catalog:",
     "uuid": "^11.1.0",
     "vite": "catalog:",
@@ -176,6 +178,7 @@
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
+    "typegpu": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",

pnpm-lock.yaml

@@ -126,6 +126,9 @@ catalogs:
     '@vueuse/integrations':
       specifier: ^13.9.0
       version: 13.9.0
+    '@webgpu/types':
+      specifier: ^0.1.66
+      version: 0.1.66
     algoliasearch:
       specifier: ^5.21.0
       version: 5.21.0
@@ -246,6 +249,9 @@ catalogs:
     tw-animate-css:
       specifier: ^1.3.8
       version: 1.3.8
+    typegpu:
+      specifier: ^0.8.2
+      version: 0.8.2
     typescript:
       specifier: ^5.9.2
       version: 5.9.2
@@ -255,6 +261,9 @@ catalogs:
     unplugin-icons:
       specifier: ^0.22.0
       version: 0.22.0
+    unplugin-typegpu:
+      specifier: 0.8.0
+      version: 0.8.0
     unplugin-vue-components:
       specifier: ^0.28.0
       version: 0.28.0
@@ -464,6 +473,9 @@ importers:
       tiptap-markdown:
         specifier: ^0.8.10
         version: 0.8.10(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
+      typegpu:
+        specifier: 'catalog:'
+        version: 0.8.2
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.2)
@@ -561,6 +573,9 @@ importers:
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
+      '@webgpu/types':
+        specifier: 'catalog:'
+        version: 0.1.66
       cross-env:
         specifier: 'catalog:'
         version: 10.1.0
@@ -672,6 +687,9 @@ importers:
       unplugin-icons:
         specifier: 'catalog:'
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
+      unplugin-typegpu:
+        specifier: 'catalog:'
+        version: 0.8.0(typegpu@0.8.2)
       unplugin-vue-components:
         specifier: 'catalog:'
         version: 0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
@@ -1431,6 +1449,10 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/standalone@7.28.5':
+    resolution: {integrity: sha512-1DViPYJpRU50irpGMfLBQ9B4kyfQuL6X7SS7pwTeWeZX0mNkjzPi0XFqxCjSdddZXUQy4AhnQnnesA/ZHnvAdw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -3790,8 +3812,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@webgpu/types@0.1.51':
-    resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
+  '@webgpu/types@0.1.66':
+    resolution: {integrity: sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==}
 
   '@xstate/fsm@1.6.5':
     resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
@@ -6038,6 +6060,10 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -7411,6 +7437,14 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyest-for-wgsl@0.1.3:
+    resolution: {integrity: sha512-Wm5ADG1UyDxykf42S1gLYP4U9e1QP/TdtJeovQi6y68zttpiFLKqQGioHmPs9Mjysh7YMSAr/Lpuk0cD2MVdGA==}
+    engines: {node: '>=12.20.0'}
+
+  tinyest@0.1.2:
+    resolution: {integrity: sha512-aHRmouyowIq1P5jrTF+YK6pGX+WuvFtSCLbqk91yHnU3SWQRIcNIamZLM5XF6lLqB13AWz0PGPXRff2QGDsxIg==}
+    engines: {node: '>=12.20.0'}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -7537,6 +7571,13 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
+  typed-binary@4.3.2:
+    resolution: {integrity: sha512-HT3pIBM2njCZUmeczDaQUUErGiM6GXFCqMsHegE12HCoBtvHCkfR10JJni0TeGOTnLilTd6YFyj+YhflqQDrDQ==}
+
+  typegpu@0.8.2:
+    resolution: {integrity: sha512-wkMJWhJE0pSkw2G/FesjqjbtHkREyOKu1Zmyj19xfmaX5+65YFwgfQNKSK8CxqN4kJkP7JFelLDJTSYY536TYg==}
+    engines: {node: '>=12.20.0'}
+
   typescript-eslint@8.44.0:
     resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -7641,6 +7682,11 @@ packages:
       vue-template-es2015-compiler:
         optional: true
 
+  unplugin-typegpu@0.8.0:
+    resolution: {integrity: sha512-VJHdXSXGOkAx0WhwFczhVUjAI6HyDkrQXk20HnwyuzIE3FdqE5l9sJTCYZzoVGo3z8i/IA5TMHCDzzP0Bc97Cw==}
+    peerDependencies:
+      typegpu: ^0.8.0
+
   unplugin-vue-components@0.28.0:
     resolution: {integrity: sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==}
     engines: {node: '>=14'}
@@ -8969,6 +9015,8 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
+  '@babel/standalone@7.28.5': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -11016,7 +11064,7 @@ snapshots:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
       '@types/webxr': 0.5.20
-      '@webgpu/types': 0.1.51
+      '@webgpu/types': 0.1.66
       fflate: 0.8.2
       meshoptimizer: 0.18.1
 
@@ -11519,7 +11567,7 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
 
-  '@webgpu/types@0.1.51': {}
+  '@webgpu/types@0.1.66': {}
 
   '@xstate/fsm@1.6.5': {}
 
@@ -14000,6 +14048,10 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.19
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -15864,6 +15916,12 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyest-for-wgsl@0.1.3:
+    dependencies:
+      tinyest: 0.1.2
+
+  tinyest@0.1.2: {}
+
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.1: {}
@@ -15995,6 +16053,13 @@ snapshots:
       reflect.getprototypeof: 1.0.10
     optional: true
 
+  typed-binary@4.3.2: {}
+
+  typegpu@0.8.2:
+    dependencies:
+      tinyest: 0.1.2
+      typed-binary: 4.3.2
+
   typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
@@ -16090,6 +16155,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  unplugin-typegpu@0.8.0(typegpu@0.8.2):
+    dependencies:
+      '@babel/standalone': 7.28.5
+      defu: 6.1.4
+      estree-walker: 3.0.3
+      magic-string-ast: 1.0.3
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      tinyest: 0.1.2
+      tinyest-for-wgsl: 0.1.3
+      typegpu: 0.8.2
+      unplugin: 2.3.5
+
   unplugin-vue-components@0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       '@antfu/utils': 0.7.10

pnpm-workspace.yaml

@@ -43,6 +43,7 @@ catalog:
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
+  '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
@@ -83,9 +84,11 @@ catalog:
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
+  typegpu: ^0.8.2
   typescript: ^5.9.2
   typescript-eslint: ^8.44.0
   unplugin-icons: ^0.22.0
+  unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^0.28.0
   vite: ^5.4.19
   vite-plugin-dts: ^4.5.4

src/App.vue

@@ -17,6 +17,7 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { t } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -47,7 +48,7 @@ const showContextMenu = (event: MouseEvent) => {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
   if (isElectron()) {
@@ -77,5 +78,25 @@ onMounted(() => {
   // Initialize conflict detection in background
   // This runs async and doesn't block UI setup
   void conflictDetection.initializeConflictDetection()
+
+  // Show cloud notification for macOS desktop users (one-time)
+  // Delayed to ensure it appears after workflow loading (missing models dialog, etc.)
+  if (isElectron()) {
+    const isMacOS = navigator.platform.toLowerCase().includes('mac')
+    if (isMacOS) {
+      const settingStore = useSettingStore()
+      const hasShownNotification = settingStore.get(
+        'Comfy.Desktop.CloudNotificationShown'
+      )
+
+      if (!hasShownNotification) {
+        // Delay to show after initial workflow loading completes
+        setTimeout(async () => {
+          dialogService.showCloudNotification()
+          await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
+        }, 2000)
+      }
+    }
+  }
 })
 </script>

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -10,7 +10,6 @@
       severity="primary"
       size="small"
       :model="queueModeMenuItems"
-      :disabled="hasMissingNodes"
       data-testid="queue-button"
       @click="queuePrompt"
     >

src/components/button/IconButton.vue

@@ -24,7 +24,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
-  onClick: (event: Event) => void
+  onClick?: (event: MouseEvent) => void
 }
 
 defineOptions({

src/components/button/IconTextButton.vue

@@ -47,7 +47,7 @@ const {
 } = defineProps<IconTextButtonProps>()
 
 const buttonStyle = computed(() => {
-  const baseClasses = `${getBaseButtonClasses()} justify-start! gap-2`
+  const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
   const sizeClasses = getButtonSizeClasses(size)
   const typeClasses = border
     ? getBorderButtonTypeClasses(type)

src/components/button/MoreButton.vue

@@ -68,4 +68,8 @@ const toggle = (event: Event) => {
 const hide = () => {
   popover.value?.hide()
 }
+
+defineExpose({
+  hide
+})
 </script>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -92,7 +92,7 @@
             class="w-62.5"
           >
             <template #icon>
-              <i class="icon-[lucide--arrow-up-down]" />
+              <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
             </template>
           </SingleSelect>
         </div>

src/components/dialog/content/CloudNotificationContent.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="w-[480px] p-6">
+    <!-- Header with Logo -->
+    <div class="mb-6">
+      <div class="mb-2 flex items-center gap-3">
+        <img
+          src="/assets/images/comfy-cloud-logo.svg"
+          alt="Comfy Cloud"
+          class="h-8 w-8 shrink-0"
+        />
+        <h1 class="text-2xl font-semibold">
+          {{ t('cloudNotification.title') }}
+        </h1>
+      </div>
+      <p class="text-base text-muted">
+        {{ t('cloudNotification.message') }}
+      </p>
+    </div>
+
+    <!-- Features -->
+    <div class="mb-6 space-y-4">
+      <div class="flex gap-3">
+        <i class="pi pi-check-circle mt-0.5 shrink-0 text-xl text-blue-500"></i>
+        <div class="flex-1">
+          <div class="mb-1 font-medium">
+            {{ t('cloudNotification.feature1Title') }}
+          </div>
+          <div class="text-sm text-muted">
+            {{ t('cloudNotification.feature1') }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-3">
+        <i class="pi pi-server mt-0.5 shrink-0 text-xl text-blue-500"></i>
+        <div class="flex-1">
+          <div class="mb-1 font-medium">
+            {{ t('cloudNotification.feature2Title') }}
+          </div>
+          <div class="text-sm text-muted">
+            {{ t('cloudNotification.feature2') }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex gap-3">
+        <i class="pi pi-tag mt-0.5 shrink-0 text-xl text-blue-500"></i>
+        <div class="flex-1">
+          <div class="mb-1 font-medium">
+            {{ t('cloudNotification.feature3Title') }}
+          </div>
+          <div class="text-sm text-muted">
+            {{ t('cloudNotification.feature3') }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer Note -->
+    <div
+      class="mb-6 rounded border-l-2 border-blue-500 bg-blue-500/5 py-2.5 pl-3 pr-4"
+    >
+      <p class="whitespace-pre-line text-sm text-muted">
+        {{ t('cloudNotification.feature4') }}
+      </p>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex gap-3">
+      <Button
+        :label="t('cloudNotification.continueLocally')"
+        severity="secondary"
+        outlined
+        class="flex-1"
+        @click="onDismiss"
+      />
+      <Button
+        :label="t('cloudNotification.exploreCloud')"
+        icon="pi pi-arrow-right"
+        icon-pos="right"
+        class="flex-1"
+        @click="onExplore"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useTelemetry } from '@/platform/telemetry'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+
+// Track when modal is shown
+onMounted(() => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_modal_shown'
+  })
+})
+
+const onDismiss = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_continue_locally_clicked'
+  })
+  useDialogStore().closeDialog()
+}
+
+const onExplore = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_explore_cloud_clicked'
+  })
+
+  // Add UTM parameters for attribution tracking
+  const url = new URL('https://www.comfy.org/cloud')
+  url.searchParams.set('utm_source', 'desktop')
+  url.searchParams.set('utm_medium', 'notification')
+  url.searchParams.set('utm_campaign', 'macos_first_launch')
+
+  window.open(url.toString(), '_blank')
+  useDialogStore().closeDialog()
+}
+</script>

src/components/dialog/content/MissingNodesContent.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
+    class="flex w-[490px] flex-col border-t-1 border-border-default"
+    :class="isCloud ? 'border-b-1' : ''"
   >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->

src/components/dialog/content/PromptDialogContent.vue

@@ -4,6 +4,7 @@
       <InputText
         ref="inputRef"
         v-model="inputValue"
+        :placeholder
         autofocus
         @keyup.enter="onConfirm"
         @focus="selectAllText"
@@ -28,6 +29,7 @@ const props = defineProps<{
   message: string
   defaultValue: string
   onConfirm: (value: string) => void
+  placeholder?: string
 }>()
 
 const inputValue = ref<string>(props.defaultValue)

src/components/input/MultiSelect.vue

@@ -17,7 +17,7 @@
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
           'h-10 relative inline-flex cursor-pointer select-none',
-          'rounded-lg bg-base-background text-base-foreground',
+          'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
           selectedCount > 0
@@ -127,7 +127,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-muted-foreground">
+      <span class="text-sm">
         {{ label }}
       </span>
       <span
@@ -140,7 +140,7 @@
 
     <!-- Chevron size identical to current -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-lg text-neutral-400" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->

src/components/input/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted" />
+    <i class="icon-[lucide--search] text-muted-foreground" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -73,7 +73,7 @@ onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
   const baseClasses =
-    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
+    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
 
   if (showBorder) {
     return cn(

src/components/input/SingleSelect.vue

@@ -20,7 +20,7 @@
           'h-10 relative inline-flex cursor-pointer select-none items-center',
           // trigger surface
           'rounded-lg',
-          'bg-base-background text-base-foreground',
+          'bg-secondary-background text-base-foreground',
           'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
           'focus-within:border-node-component-border',
@@ -84,7 +84,7 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm text-neutral-500">
+      <div class="flex items-center gap-2 text-sm">
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
@@ -100,7 +100,7 @@
 
     <!-- Trigger caret -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-base text-neutral-500" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Option row -->

src/components/maskeditor/BrushCursor.vue

@@ -26,6 +26,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import {
+  getEffectiveBrushSize,
+  getEffectiveHardness
+} from '@/composables/maskeditor/brushUtils'
 import { BrushShape } from '@/extensions/core/maskeditor/types'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
@@ -36,11 +40,14 @@ const { containerRef } = defineProps<{
 const store = useMaskEditorStore()
 
 const brushOpacity = computed(() => {
-  return store.brushVisible ? '1' : '0'
+  return store.brushVisible ? 1 : 0
 })
 
 const brushRadius = computed(() => {
-  return store.brushSettings.size * store.zoomRatio
+  const size = store.brushSettings.size
+  const hardness = store.brushSettings.hardness
+  const effectiveSize = getEffectiveBrushSize(size, hardness)
+  return effectiveSize * store.zoomRatio
 })
 
 const brushSize = computed(() => {
@@ -78,19 +85,26 @@ const gradientVisible = computed(() => {
 })
 
 const gradientBackground = computed(() => {
+  const size = store.brushSettings.size
   const hardness = store.brushSettings.hardness
+  const effectiveSize = getEffectiveBrushSize(size, hardness)
+  const effectiveHardness = getEffectiveHardness(size, hardness, effectiveSize)
 
-  if (hardness === 1) {
+  if (effectiveHardness === 1) {
     return 'rgba(255, 0, 0, 0.5)'
   }
 
-  const midStop = hardness * 100
+  const midStop = effectiveHardness * 100
   const outerStop = 100
+  // Add an intermediate stop to approximate the squared falloff
+  // At 50% of the fade region, squared falloff is 0.25 (relative to max)
+  const fadeMidStop = midStop + (outerStop - midStop) * 0.5
 
   return `radial-gradient(
     circle,
     rgba(255, 0, 0, 0.5) 0%,
-    rgba(255, 0, 0, 0.25) ${midStop}%,
+    rgba(255, 0, 0, 0.5) ${midStop}%,
+    rgba(255, 0, 0, 0.125) ${fadeMidStop}%,
     rgba(255, 0, 0, 0) ${outerStop}%
   )`
 })

src/components/maskeditor/BrushSettingsPanel.vue

@@ -55,7 +55,7 @@
     <SliderControl
       :label="t('maskEditor.thickness')"
       :min="1"
-      :max="100"
+      :max="500"
       :step="1"
       :model-value="store.brushSettings.size"
       @update:model-value="onThicknessChange"
@@ -80,12 +80,12 @@
     />
 
     <SliderControl
-      :label="t('maskEditor.smoothingPrecision')"
+      label="Stepsize"
       :min="1"
       :max="100"
       :step="1"
-      :model-value="store.brushSettings.smoothingPrecision"
-      @update:model-value="onSmoothingPrecisionChange"
+      :model-value="store.brushSettings.stepSize"
+      @update:model-value="onStepSizeChange"
     />
   </div>
 </template>
@@ -119,8 +119,8 @@ const onHardnessChange = (value: number) => {
   store.setBrushHardness(value)
 }
 
-const onSmoothingPrecisionChange = (value: number) => {
-  store.setBrushSmoothingPrecision(value)
+const onStepSizeChange = (value: number) => {
+  store.setBrushStepSize(value)
 }
 
 const resetToDefault = () => {

src/components/maskeditor/MaskEditorContent.vue

@@ -12,19 +12,28 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-0"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-10"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-30"
         @contextmenu.prevent
       />
+      <!-- GPU Preview Canvas -->
+      <canvas
+        ref="gpuCanvasRef"
+        class="absolute top-0 left-0 w-full h-full pointer-events-none"
+        :class="{
+          'z-20': store.activeLayer === 'rgb',
+          'z-40': store.activeLayer === 'mask'
+        }"
+      />
       <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
     </div>
 
@@ -87,6 +96,7 @@ const canvasContainerRef = ref<HTMLDivElement>()
 const imgCanvasRef = ref<HTMLCanvasElement>()
 const maskCanvasRef = ref<HTMLCanvasElement>()
 const rgbCanvasRef = ref<HTMLCanvasElement>()
+const gpuCanvasRef = ref<HTMLCanvasElement>()
 const canvasBackgroundRef = ref<HTMLDivElement>()
 
 const toolPanelRef = ref<InstanceType<typeof ToolPanel>>()
@@ -97,7 +107,7 @@ const initialized = ref(false)
 const keyboard = useKeyboard()
 const panZoom = usePanAndZoom()
 
-let toolManager: ReturnType<typeof useToolManager> | null = null
+const toolManager = useToolManager(keyboard, panZoom)
 
 let resizeObserver: ResizeObserver | null = null
 
@@ -135,8 +145,6 @@ const initUI = async () => {
   try {
     await loader.loadFromNode(node)
 
-    toolManager = useToolManager(keyboard, panZoom)
-
     const imageLoader = useImageLoader()
     const image = await imageLoader.loadImages()
 
@@ -149,6 +157,18 @@ const initUI = async () => {
 
     store.canvasHistory.saveInitialState()
 
+    // Initialize GPU resources
+    if (toolManager.brushDrawing) {
+      await toolManager.brushDrawing.initGPUResources()
+      if (gpuCanvasRef.value && toolManager.brushDrawing.initPreviewCanvas) {
+        // Match preview canvas resolution to mask canvas
+        gpuCanvasRef.value.width = maskCanvasRef.value.width
+        gpuCanvasRef.value.height = maskCanvasRef.value.height
+
+        toolManager.brushDrawing.initPreviewCanvas(gpuCanvasRef.value)
+      }
+    }
+
     initialized.value = true
   } catch (error) {
     console.error('[MaskEditorContent] Initialization failed:', error)
@@ -172,7 +192,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  toolManager?.brushDrawing.saveBrushSettings()
+  toolManager.brushDrawing.saveBrushSettings()
 
   keyboard?.removeListeners()
 

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -102,6 +102,7 @@ const onInvert = () => {
 
 const onClear = () => {
   canvasTools.clearMask()
+  store.triggerClear()
 }
 
 const handleSave = async () => {

src/components/node/NodePreview.vue

@@ -3,7 +3,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 -->
 <template>
   <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
-  <div v-else class="_sb_node_preview">
+  <div v-else class="_sb_node_preview bg-component-node-background">
     <div class="_sb_table">
       <div
         class="node_header mr-4 text-ellipsis"
@@ -200,7 +200,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
 }
 
 ._sb_node_preview {
-  background-color: var(--comfy-menu-bg);
   font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);

src/components/queue/CompletionSummaryBanner.vue

@@ -1,8 +1,10 @@
 <template>
-  <button
-    type="button"
-    class="group flex w-full items-center justify-between gap-3 rounded-lg border-0 bg-secondary-background p-1 text-left transition-colors duration-200 ease-in-out hover:cursor-pointer hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+  <IconButton
+    type="secondary"
+    size="fit-content"
+    class="group w-full justify-between gap-3 rounded-lg p-1 text-left font-normal hover:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
     :aria-label="props.ariaLabel"
+    @click="emit('click', $event)"
   >
     <span class="inline-flex items-center gap-2">
       <span v-if="props.mode === 'allFailed'" class="inline-flex items-center">
@@ -76,10 +78,11 @@
     >
       <i class="icon-[lucide--chevron-down] block size-4 leading-none" />
     </span>
-  </button>
+  </IconButton>
 </template>
 
 <script setup lang="ts">
+import IconButton from '@/components/button/IconButton.vue'
 import type {
   CompletionSummary,
   CompletionSummaryMode
@@ -96,4 +99,8 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {
   thumbnailUrls: () => []
 })
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
 </script>

src/components/queue/QueueOverlayActive.vue

@@ -42,17 +42,19 @@
               t('sideToolbar.queueProgressOverlay.running')
             }}</span>
           </span>
-          <button
+          <IconButton
             v-if="runningCount > 0"
             v-tooltip.top="cancelJobTooltip"
-            class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors hover:bg-destructive-background"
+            type="secondary"
+            size="sm"
+            class="size-6 bg-secondary-background hover:bg-destructive-background"
             :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
             @click="$emit('interruptAll')"
           >
             <i
               class="icon-[lucide--x] block size-4 leading-none text-text-primary"
             />
-          </button>
+          </IconButton>
         </div>
 
         <div class="flex items-center gap-2">
@@ -62,26 +64,28 @@
               t('sideToolbar.queueProgressOverlay.queuedSuffix')
             }}</span>
           </span>
-          <button
+          <IconButton
             v-if="queuedCount > 0"
             v-tooltip.top="clearQueueTooltip"
-            class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors hover:bg-destructive-background"
+            type="secondary"
+            size="sm"
+            class="size-6 bg-secondary-background hover:bg-destructive-background"
             :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
             @click="$emit('clearQueued')"
           >
             <i
               class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
             />
-          </button>
+          </IconButton>
         </div>
       </div>
 
-      <button
-        class="inline-flex h-6 min-w-[120px] flex-1 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background px-2 py-0 text-[12px] text-text-primary hover:bg-secondary-background-hover hover:opacity-90"
+      <TextButton
+        class="h-6 min-w-[120px] flex-1 px-2 py-0 text-[12px]"
+        type="secondary"
+        :label="t('sideToolbar.queueProgressOverlay.viewAllJobs')"
         @click="$emit('viewAllJobs')"
-      >
-        {{ t('sideToolbar.queueProgressOverlay.viewAllJobs') }}
-      </button>
+      />
     </div>
   </div>
 </template>
@@ -90,6 +94,8 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 defineProps<{

src/components/queue/QueueOverlayExpanded.vue

@@ -8,17 +8,20 @@
     />
 
     <div class="flex items-center justify-between px-3">
-      <button
-        class="inline-flex grow cursor-pointer items-center justify-center gap-1 rounded border-0 bg-secondary-background p-2 text-center font-inter text-[12px] leading-none text-text-primary hover:bg-secondary-background-hover hover:opacity-90"
+      <IconTextButton
+        class="grow gap-1 p-2 text-center font-inter text-[12px] leading-none hover:opacity-90 justify-center"
+        type="secondary"
+        :label="t('sideToolbar.queueProgressOverlay.showAssets')"
         :aria-label="t('sideToolbar.queueProgressOverlay.showAssets')"
         @click="$emit('showAssets')"
       >
-        <div
-          class="pointer-events-none block size-4 shrink-0 leading-none icon-[comfy--image-ai-edit]"
-          aria-hidden="true"
-        />
-        <span>{{ t('sideToolbar.queueProgressOverlay.showAssets') }}</span>
-      </button>
+        <template #icon>
+          <div
+            class="pointer-events-none block size-4 shrink-0 leading-none icon-[comfy--image-ai-edit]"
+            aria-hidden="true"
+          />
+        </template>
+      </IconTextButton>
       <div class="ml-4 inline-flex items-center">
         <div
           class="inline-flex h-6 items-center text-[12px] leading-none text-text-primary opacity-90"
@@ -28,16 +31,18 @@
             t('sideToolbar.queueProgressOverlay.queuedSuffix')
           }}</span>
         </div>
-        <button
+        <IconButton
           v-if="queuedCount > 0"
-          class="group ml-2 inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors hover:bg-destructive-background"
+          class="group ml-2 size-6 bg-secondary-background hover:bg-destructive-background"
+          type="secondary"
+          size="sm"
           :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
           @click="$emit('clearQueued')"
         >
           <i
             class="pointer-events-none icon-[lucide--list-x] block size-4 leading-none text-text-primary transition-colors group-hover:text-base-background"
           />
-        </button>
+        </IconButton>
       </div>
     </div>
 
@@ -75,6 +80,8 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import type {
   JobGroup,
   JobListItem,

src/components/queue/QueueOverlayHeader.vue

@@ -18,16 +18,18 @@
       </span>
     </div>
     <div class="flex items-center gap-1">
-      <button
+      <IconButton
         v-tooltip.top="moreTooltipConfig"
-        class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 hover:bg-secondary-background hover:opacity-100"
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
         :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
         @click="onMoreClick"
       >
         <i
           class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
         />
-      </button>
+      </IconButton>
       <Popover
         ref="morePopoverRef"
         :dismissable="true"
@@ -45,18 +47,19 @@
         <div
           class="flex flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
         >
-          <button
-            class="inline-flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+          <IconTextButton
+            class="w-full justify-start gap-2 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            :label="t('sideToolbar.queueProgressOverlay.clearHistory')"
             :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
             @click="onClearHistoryFromMenu"
           >
-            <i
-              class="icon-[lucide--file-x-2] block size-4 leading-none text-text-secondary"
-            />
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.clearHistory')
-            }}</span>
-          </button>
+            <template #icon>
+              <i
+                class="icon-[lucide--file-x-2] block size-4 leading-none text-text-secondary"
+              />
+            </template>
+          </IconTextButton>
         </div>
       </Popover>
     </div>
@@ -69,6 +72,8 @@ import type { PopoverMethods } from 'primevue/popover'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 
 defineProps<{

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -8,13 +8,15 @@
       <p class="m-0 text-[14px] font-normal leading-none">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
       </p>
-      <button
-        class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-text-secondary transition hover:bg-secondary-background hover:opacity-100"
+      <IconButton
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
         :aria-label="t('g.close')"
         @click="onCancel"
       >
         <i class="icon-[lucide--x] block size-4 leading-none" />
-      </button>
+      </IconButton>
     </header>
 
     <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
@@ -30,21 +32,19 @@
 
     <footer class="flex items-center justify-end px-4 py-4">
       <div class="flex items-center gap-4 text-[14px] leading-none">
-        <button
-          class="inline-flex min-h-[24px] cursor-pointer items-center rounded-md border-0 bg-transparent px-1 py-1 text-[14px] leading-[1] text-text-secondary transition hover:text-text-primary"
-          :aria-label="t('g.cancel')"
+        <TextButton
+          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
+          type="transparent"
+          :label="t('g.cancel')"
           @click="onCancel"
-        >
-          {{ t('g.cancel') }}
-        </button>
-        <button
-          class="inline-flex min-h-[32px] items-center rounded-lg border-0 bg-secondary-background px-4 py-2 text-[12px] font-normal leading-[1] text-text-primary transition hover:bg-secondary-background-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-60"
-          :aria-label="t('g.clear')"
+        />
+        <TextButton
+          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
+          type="secondary"
+          :label="t('g.clear')"
           :disabled="isClearing"
           @click="onConfirm"
-        >
-          {{ t('g.clear') }}
-        </button>
+        />
       </div>
     </footer>
   </section>
@@ -54,6 +54,8 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useQueueStore } from '@/stores/queueStore'

src/components/queue/job/JobContextMenu.vue

@@ -20,21 +20,24 @@
         <div v-if="entry.kind === 'divider'" class="px-2 py-1">
           <div class="h-px bg-interface-stroke" />
         </div>
-        <button
+        <IconTextButton
           v-else
-          class="inline-flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary transition-colors duration-150 hover:bg-interface-panel-hover-surface"
+          class="w-full justify-start gap-2 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-interface-panel-hover-surface"
+          type="transparent"
+          :label="entry.label"
           :aria-label="entry.label"
           @click="onEntry(entry)"
         >
-          <i
-            v-if="entry.icon"
-            :class="[
-              entry.icon,
-              'block size-4 shrink-0 leading-none text-text-secondary'
-            ]"
-          />
-          <span>{{ entry.label }}</span>
-        </button>
+          <template #icon>
+            <i
+              v-if="entry.icon"
+              :class="[
+                entry.icon,
+                'block size-4 shrink-0 leading-none text-text-secondary'
+              ]"
+            />
+          </template>
+        </IconTextButton>
       </template>
     </div>
   </Popover>
@@ -44,6 +47,7 @@
 import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 defineProps<{ entries: MenuEntry[] }>()

src/components/queue/job/JobDetailsPopover.vue

@@ -20,17 +20,18 @@
             class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
           >
             <span class="block min-w-0 truncate">{{ row.value }}</span>
-            <button
+            <IconButton
               v-if="row.canCopy"
-              type="button"
-              class="ml-2 inline-flex size-6 items-center justify-center rounded border-0 bg-transparent p-0 hover:opacity-90"
+              type="transparent"
+              size="sm"
+              class="ml-2 size-6 bg-transparent hover:opacity-90"
               :aria-label="copyAriaLabel"
               @click.stop="copyJobId"
             >
               <i
                 class="icon-[lucide--copy] block size-4 leading-none text-text-secondary"
               />
-            </button>
+            </IconButton>
           </div>
         </template>
       </div>
@@ -60,25 +61,31 @@
           {{ t('queue.jobDetails.errorMessage') }}
         </div>
         <div class="flex items-center justify-between gap-4">
-          <button
-            type="button"
-            class="inline-flex h-6 items-center justify-center gap-2 rounded border-none bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+          <IconTextButton
+            class="h-6 justify-start gap-2 bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            type="transparent"
+            :label="copyAriaLabel"
             :aria-label="copyAriaLabel"
+            icon-position="right"
             @click.stop="copyErrorMessage"
           >
-            <span>{{ copyAriaLabel }}</span>
-            <i class="icon-[lucide--copy] block size-3.5 leading-none" />
-          </button>
-          <button
-            type="button"
-            class="inline-flex h-6 items-center justify-center gap-2 rounded border-none bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            <template #icon>
+              <i class="icon-[lucide--copy] block size-3.5 leading-none" />
+            </template>
+          </IconTextButton>
+          <IconTextButton
+            class="h-6 justify-start gap-2 bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            type="transparent"
+            :label="t('queue.jobDetails.report')"
+            icon-position="right"
             @click.stop="reportJobError"
           >
-            <span>{{ t('queue.jobDetails.report') }}</span>
-            <i
-              class="icon-[lucide--message-circle-warning] block size-3.5 leading-none"
-            />
-          </button>
+            <template #icon>
+              <i
+                class="icon-[lucide--message-circle-warning] block size-3.5 leading-none"
+              />
+            </template>
+          </IconTextButton>
         </div>
         <div
           class="col-span-2 mt-2 rounded bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
@@ -94,6 +101,8 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'

src/components/queue/job/JobFiltersBar.vue

@@ -2,26 +2,26 @@
   <div class="flex items-center justify-between gap-2 px-3">
     <div class="min-w-0 flex-1 overflow-x-auto">
       <div class="inline-flex items-center gap-1 whitespace-nowrap">
-        <button
+        <TextButton
           v-for="tab in visibleJobTabs"
           :key="tab"
-          class="h-6 cursor-pointer rounded border-0 px-3 py-1 text-[12px] leading-none hover:opacity-90"
+          class="h-6 px-3 py-1 text-[12px] leading-none hover:opacity-90"
+          :type="selectedJobTab === tab ? 'secondary' : 'transparent'"
           :class="[
-            selectedJobTab === tab
-              ? 'bg-secondary-background text-text-primary'
-              : 'bg-transparent text-text-secondary'
+            selectedJobTab === tab ? 'text-text-primary' : 'text-text-secondary'
           ]"
+          :label="tabLabel(tab)"
           @click="$emit('update:selectedJobTab', tab)"
-        >
-          {{ tabLabel(tab) }}
-        </button>
+        />
       </div>
     </div>
     <div class="ml-2 flex shrink-0 items-center gap-2">
-      <button
+      <IconButton
         v-if="showWorkflowFilter"
         v-tooltip.top="filterTooltipConfig"
-        class="relative inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 hover:bg-secondary-background-hover hover:opacity-90"
+        type="secondary"
+        size="sm"
+        class="relative size-6 bg-secondary-background hover:bg-secondary-background-hover hover:opacity-90"
         :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
         @click="onFilterClick"
       >
@@ -32,7 +32,7 @@
           v-if="selectedWorkflowFilter !== 'all'"
           class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
         />
-      </button>
+      </IconButton>
       <Popover
         v-if="showWorkflowFilter"
         ref="filterPopoverRef"
@@ -51,46 +51,48 @@
         <div
           class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
         >
-          <button
-            class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+          <IconTextButton
+            class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            icon-position="right"
+            :label="t('sideToolbar.queueProgressOverlay.filterAllWorkflows')"
             :aria-label="
               t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
             "
             @click="selectWorkflowFilter('all')"
           >
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
-            }}</span>
-            <span class="ml-auto inline-flex items-center">
+            <template #icon>
               <i
                 v-if="selectedWorkflowFilter === 'all'"
                 class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
               />
-            </span>
-          </button>
+            </template>
+          </IconTextButton>
           <div class="mx-2 mt-1 h-px" />
-          <button
-            class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+          <IconTextButton
+            class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            icon-position="right"
+            :label="t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')"
             :aria-label="
               t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
             "
             @click="selectWorkflowFilter('current')"
           >
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
-            }}</span>
-            <span class="ml-auto inline-flex items-center">
+            <template #icon>
               <i
                 v-if="selectedWorkflowFilter === 'current'"
                 class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
               />
-            </span>
-          </button>
+            </template>
+          </IconTextButton>
         </div>
       </Popover>
-      <button
+      <IconButton
         v-tooltip.top="sortTooltipConfig"
-        class="relative inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 hover:bg-secondary-background-hover hover:opacity-90"
+        type="secondary"
+        size="sm"
+        class="relative size-6 bg-secondary-background hover:bg-secondary-background-hover hover:opacity-90"
         :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
         @click="onSortClick"
       >
@@ -101,7 +103,7 @@
           v-if="selectedSortMode !== 'mostRecent'"
           class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
         />
-      </button>
+      </IconButton>
       <Popover
         ref="sortPopoverRef"
         :dismissable="true"
@@ -120,19 +122,21 @@
           class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
         >
           <template v-for="(mode, index) in jobSortModes" :key="mode">
-            <button
-              class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            <IconTextButton
+              class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+              type="transparent"
+              icon-position="right"
+              :label="sortLabel(mode)"
               :aria-label="sortLabel(mode)"
               @click="selectSortMode(mode)"
             >
-              <span>{{ sortLabel(mode) }}</span>
-              <span class="ml-auto inline-flex items-center">
+              <template #icon>
                 <i
                   v-if="selectedSortMode === mode"
                   class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
                 />
-              </span>
-            </button>
+              </template>
+            </IconTextButton>
             <div
               v-if="index < jobSortModes.length - 1"
               class="mx-2 mt-1 h-px"
@@ -149,6 +153,9 @@ import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
 import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'

src/components/queue/job/QueueJobItem.vue

@@ -108,45 +108,47 @@
             key="actions"
             class="inline-flex items-center gap-2 pr-1"
           >
-            <button
+            <IconButton
               v-if="props.state === 'failed' && computedShowClear"
               v-tooltip.top="deleteTooltipConfig"
-              type="button"
-              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
               :aria-label="t('g.delete')"
               @click.stop="emit('delete')"
             >
               <i class="icon-[lucide--trash-2] size-4" />
-            </button>
-            <button
+            </IconButton>
+            <IconButton
               v-else-if="props.state !== 'completed' && computedShowClear"
               v-tooltip.top="cancelTooltipConfig"
-              type="button"
-              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
               :aria-label="t('g.cancel')"
               @click.stop="emit('cancel')"
             >
               <i class="icon-[lucide--x] size-4" />
-            </button>
-            <button
+            </IconButton>
+            <TextButton
               v-else-if="props.state === 'completed'"
-              type="button"
-              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 bg-modal-card-button-surface px-2 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-2 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              type="transparent"
+              :label="t('menuLabels.View')"
               :aria-label="t('menuLabels.View')"
               @click.stop="emit('view')"
-            >
-              <span>{{ t('menuLabels.View') }}</span>
-            </button>
-            <button
+            />
+            <IconButton
               v-if="props.showMenu !== undefined ? props.showMenu : true"
               v-tooltip.top="moreTooltipConfig"
-              type="button"
-              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
               :aria-label="t('g.more')"
               @click.stop="emit('menu', $event)"
             >
               <i class="icon-[lucide--more-horizontal] size-4" />
-            </button>
+            </IconButton>
           </div>
           <div v-else key="secondary" class="pr-2">
             <slot name="secondary">{{ props.rightText }}</slot>
@@ -161,6 +163,8 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -85,10 +85,13 @@
               :show-output-count="shouldShowOutputCount(item)"
               :output-count="getOutputCount(item)"
               :show-delete-button="shouldShowDeleteButton"
+              :open-popover-id="openPopoverId"
               @click="handleAssetSelect(item)"
               @zoom="handleZoomClick(item)"
               @output-count-click="enterFolderView(item)"
               @asset-deleted="refreshAssets"
+              @popover-opened="openPopoverId = item.id"
+              @popover-closed="openPopoverId = null"
             />
           </template>
         </VirtualGrid>
@@ -199,6 +202,9 @@ const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
 const isInFolderView = computed(() => folderPromptId.value !== null)
 
+// Track which asset's popover is open (for single-instance popover management)
+const openPopoverId = ref<string | null>(null)
+
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
 const shouldShowDeleteButton = computed(() => {
@@ -208,7 +214,7 @@ const shouldShowDeleteButton = computed(() => {
 
 const getOutputCount = (item: AssetItem): number => {
   const count = item.user_metadata?.outputCount
-  return typeof count === 'number' && count > 0 ? count : 0
+  return typeof count === 'number' && count > 0 ? count : 1
 }
 
 const shouldShowOutputCount = (item: AssetItem): boolean => {

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -1,289 +0,0 @@
-<template>
-  <SidebarTabTemplate :title="$t('sideToolbar.queue')">
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t(`sideToolbar.queueTab.${imageFit}ImagePreview`)"
-        :icon="
-          imageFit === 'cover'
-            ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center'
-            : 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
-        "
-        text
-        severity="secondary"
-        class="toggle-expanded-button"
-        @click="toggleImageFit"
-      />
-      <Button
-        v-if="isInFolderView"
-        v-tooltip.bottom="$t('sideToolbar.queueTab.backToAllTasks')"
-        icon="pi pi-arrow-left"
-        text
-        severity="secondary"
-        class="back-button"
-        @click="exitFolderView"
-      />
-      <template v-else>
-        <Button
-          v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
-          :icon="isExpanded ? 'pi pi-images' : 'pi pi-image'"
-          text
-          severity="secondary"
-          class="toggle-expanded-button"
-          @click="toggleExpanded"
-        />
-        <Button
-          v-if="queueStore.hasPendingTasks"
-          v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
-          icon="pi pi-stop"
-          severity="danger"
-          text
-          @click="() => commandStore.execute('Comfy.ClearPendingTasks')"
-        />
-        <Button
-          icon="pi pi-trash"
-          text
-          severity="primary"
-          class="clear-all-button"
-          @click="confirmRemoveAll($event)"
-        />
-      </template>
-    </template>
-    <template #body>
-      <VirtualGrid
-        v-if="allTasks?.length"
-        :items="allTasks"
-        :grid-style="{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-          padding: '0.5rem',
-          gap: '0.5rem'
-        }"
-      >
-        <template #item="{ item }">
-          <TaskItem
-            :task="item"
-            :is-flat-task="isExpanded || isInFolderView"
-            @contextmenu="handleContextMenu"
-            @preview="handlePreview"
-            @task-output-length-clicked="enterFolderView($event)"
-          />
-        </template>
-      </VirtualGrid>
-      <div v-else-if="queueStore.isLoading">
-        <ProgressSpinner
-          style="width: 50px; left: 50%; transform: translateX(-50%)"
-        />
-      </div>
-      <div v-else>
-        <NoResultsPlaceholder
-          icon="pi pi-info-circle"
-          :title="$t('g.noTasksFound')"
-          :message="$t('g.noTasksFoundMessage')"
-        />
-      </div>
-    </template>
-  </SidebarTabTemplate>
-  <ConfirmPopup />
-  <ContextMenu ref="menu" :model="menuItems" />
-  <ResultGallery
-    v-model:active-index="galleryActiveIndex"
-    :all-gallery-items="allGalleryItems"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ConfirmPopup from 'primevue/confirmpopup'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
-import ProgressSpinner from 'primevue/progressspinner'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
-import { computed, ref, shallowRef, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useLitegraphService } from '@/services/litegraphService'
-import { useCommandStore } from '@/stores/commandStore'
-import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
-import { useQueueStore } from '@/stores/queueStore'
-
-import SidebarTabTemplate from './SidebarTabTemplate.vue'
-import ResultGallery from './queue/ResultGallery.vue'
-import TaskItem from './queue/TaskItem.vue'
-
-const IMAGE_FIT = 'Comfy.Queue.ImageFit'
-const confirm = useConfirm()
-const toast = useToast()
-const queueStore = useQueueStore()
-const settingStore = useSettingStore()
-const commandStore = useCommandStore()
-const { t } = useI18n()
-
-// Expanded view: show all outputs in a flat list.
-const isExpanded = ref(false)
-const galleryActiveIndex = ref(-1)
-const allGalleryItems = shallowRef<ResultItemImpl[]>([])
-// Folder view: only show outputs from a single selected task.
-const folderTask = ref<TaskItemImpl | null>(null)
-const isInFolderView = computed(() => folderTask.value !== null)
-const imageFit = computed<string>(() => settingStore.get(IMAGE_FIT))
-
-const allTasks = computed(() =>
-  isInFolderView.value
-    ? folderTask.value
-      ? folderTask.value.flatten()
-      : []
-    : isExpanded.value
-      ? queueStore.flatTasks
-      : queueStore.tasks
-)
-const updateGalleryItems = () => {
-  allGalleryItems.value = allTasks.value.flatMap((task: TaskItemImpl) => {
-    const previewOutput = task.previewOutput
-    return previewOutput ? [previewOutput] : []
-  })
-}
-
-const toggleExpanded = () => {
-  isExpanded.value = !isExpanded.value
-}
-
-const removeTask = async (task: TaskItemImpl) => {
-  if (task.isRunning) {
-    await api.interrupt(task.promptId)
-  }
-  await queueStore.delete(task)
-}
-
-const removeAllTasks = async () => {
-  await queueStore.clear()
-}
-
-const confirmRemoveAll = (event: Event) => {
-  confirm.require({
-    target: event.currentTarget as HTMLElement,
-    message: 'Do you want to delete all tasks?',
-    icon: 'pi pi-info-circle',
-    rejectProps: {
-      label: 'Cancel',
-      severity: 'secondary',
-      outlined: true
-    },
-    acceptProps: {
-      label: 'Delete',
-      severity: 'danger'
-    },
-    accept: async () => {
-      await removeAllTasks()
-      toast.add({
-        severity: 'info',
-        summary: 'Confirmed',
-        detail: 'Tasks deleted',
-        life: 3000
-      })
-    }
-  })
-}
-
-const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const menuTargetTask = ref<TaskItemImpl | null>(null)
-const menuTargetNode = ref<ComfyNode | null>(null)
-const menuItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
-    {
-      label: t('g.delete'),
-      icon: 'pi pi-trash',
-      command: () => menuTargetTask.value && removeTask(menuTargetTask.value),
-      disabled: isExpanded.value || isInFolderView.value
-    },
-    {
-      label: t('g.loadWorkflow'),
-      icon: 'pi pi-file-export',
-      command: () => menuTargetTask.value?.loadWorkflow(app),
-      disabled: isCloud
-        ? !menuTargetTask.value?.isHistory
-        : !menuTargetTask.value?.workflow
-    },
-    {
-      label: t('g.goToNode'),
-      icon: 'pi pi-arrow-circle-right',
-      command: () => {
-        if (!menuTargetNode.value) return
-        useLitegraphService().goToNode(menuTargetNode.value.id)
-      },
-      visible: !!menuTargetNode.value
-    }
-  ]
-
-  if (menuTargetTask.value?.previewOutput?.mediaType === 'images') {
-    items.push({
-      label: t('g.setAsBackground'),
-      icon: 'pi pi-image',
-      command: () => {
-        const url = menuTargetTask.value?.previewOutput?.url
-        if (url) {
-          void settingStore.set('Comfy.Canvas.BackgroundImage', url)
-        }
-      }
-    })
-  }
-
-  return items
-})
-
-const handleContextMenu = ({
-  task,
-  event,
-  node
-}: {
-  task: TaskItemImpl
-  event: Event
-  node: ComfyNode | null
-}) => {
-  menuTargetTask.value = task
-  menuTargetNode.value = node
-  menu.value?.show(event)
-}
-
-const handlePreview = (task: TaskItemImpl) => {
-  updateGalleryItems()
-  galleryActiveIndex.value = allGalleryItems.value.findIndex(
-    (item) => item.url === task.previewOutput?.url
-  )
-}
-
-const enterFolderView = (task: TaskItemImpl) => {
-  folderTask.value = task
-}
-
-const exitFolderView = () => {
-  folderTask.value = null
-}
-
-const toggleImageFit = async () => {
-  await settingStore.set(
-    IMAGE_FIT,
-    imageFit.value === 'cover' ? 'contain' : 'cover'
-  )
-}
-
-watch(allTasks, () => {
-  const isGalleryOpen = galleryActiveIndex.value !== -1
-  if (!isGalleryOpen) return
-
-  const prevLength = allGalleryItems.value.length
-  updateGalleryItems()
-  const lengthChange = allGalleryItems.value.length - prevLength
-  if (!lengthChange) return
-
-  const newIndex = galleryActiveIndex.value + lengthChange
-  galleryActiveIndex.value = Math.max(0, newIndex)
-})
-</script>

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -1,79 +0,0 @@
-<template>
-  <div
-    ref="resultContainer"
-    class="result-container"
-    @click="handlePreviewClick"
-  >
-    <ComfyImage
-      v-if="result.isImage"
-      :src="result.url"
-      class="task-output-image"
-      :contain="imageFit === 'contain'"
-      :alt="result.filename"
-    />
-    <ResultVideo v-else-if="result.isVideo" :result="result" />
-    <ResultAudio v-else-if="result.isAudio" :result="result" />
-    <div v-else class="task-result-preview">
-      <i class="pi pi-file" />
-      <span>{{ result.mediaType }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-
-import ComfyImage from '@/components/common/ComfyImage.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultAudio from './ResultAudio.vue'
-import ResultVideo from './ResultVideo.vue'
-
-const props = defineProps<{
-  result: ResultItemImpl
-}>()
-
-const emit = defineEmits<{
-  (e: 'preview', result: ResultItemImpl): void
-}>()
-
-const resultContainer = ref<HTMLElement | null>(null)
-const settingStore = useSettingStore()
-const imageFit = computed<string>(() =>
-  settingStore.get('Comfy.Queue.ImageFit')
-)
-
-const handlePreviewClick = () => {
-  if (props.result.supportsPreview) {
-    emit('preview', props.result)
-  }
-}
-
-onMounted(() => {
-  if (props.result.mediaType === 'images') {
-    resultContainer.value?.querySelectorAll('img').forEach((img) => {
-      img.draggable = true
-    })
-  }
-})
-</script>
-
-<style scoped>
-.result-container {
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.result-container:hover {
-  transform: scale(1.02);
-}
-</style>

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -1,271 +0,0 @@
-<template>
-  <div class="task-item" @contextmenu="handleContextMenu">
-    <div class="task-result-preview">
-      <template
-        v-if="
-          task.displayStatus === TaskItemDisplayStatus.Completed ||
-          cancelledWithResults
-        "
-      >
-        <ResultItem
-          v-if="flatOutputs.length && coverResult"
-          :result="coverResult"
-          @preview="handlePreview"
-        />
-      </template>
-      <template v-if="task.displayStatus === TaskItemDisplayStatus.Running">
-        <i v-if="!progressPreviewBlobUrl" class="pi pi-spin pi-spinner" />
-        <img
-          v-else
-          :src="progressPreviewBlobUrl"
-          class="progress-preview-img"
-        />
-      </template>
-      <span v-else-if="task.displayStatus === TaskItemDisplayStatus.Pending"
-        >...</span
-      >
-      <i
-        v-else-if="cancelledWithoutResults"
-        class="pi pi-exclamation-triangle"
-      />
-      <i
-        v-else-if="task.displayStatus === TaskItemDisplayStatus.Failed"
-        class="pi pi-exclamation-circle"
-      />
-    </div>
-
-    <div class="task-item-details">
-      <div class="tag-wrapper status-tag-group">
-        <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
-          <Button
-            class="task-node-link"
-            :label="`${node?.type} (#${node?.id})`"
-            link
-            size="small"
-            @click="
-              () => {
-                if (!node) return
-                litegraphService.goToNode(node.id)
-              }
-            "
-          />
-        </Tag>
-        <Tag :severity="taskTagSeverity(task.displayStatus)">
-          <span v-html="taskStatusText(task.displayStatus)" />
-          <span v-if="task.isHistory" class="task-time">
-            {{ formatTime(task.executionTimeInSeconds) }}
-          </span>
-          <span v-if="isFlatTask" class="task-prompt-id">
-            {{ task.promptId.split('-')[0] }}
-          </span>
-        </Tag>
-      </div>
-      <div class="tag-wrapper">
-        <Button
-          v-if="task.isHistory && flatOutputs.length > 1"
-          outlined
-          @click="handleOutputLengthClick"
-        >
-          <span style="font-weight: 700">{{ flatOutputs.length }}</span>
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Tag from 'primevue/tag'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { api } from '@/scripts/api'
-import { useLitegraphService } from '@/services/litegraphService'
-import { TaskItemDisplayStatus } from '@/stores/queueStore'
-import type { TaskItemImpl } from '@/stores/queueStore'
-
-import ResultItem from './ResultItem.vue'
-
-const props = defineProps<{
-  task: TaskItemImpl
-  isFlatTask: boolean
-}>()
-
-const litegraphService = useLitegraphService()
-
-const flatOutputs = props.task.flatOutputs
-const coverResult = flatOutputs.length
-  ? props.task.previewOutput || flatOutputs[0]
-  : null
-// Using `==` instead of `===` because NodeId can be a string or a number
-const node: ComfyNode | null =
-  flatOutputs.length && props.task.workflow
-    ? (props.task.workflow.nodes.find(
-        (n: ComfyNode) => n.id == coverResult?.nodeId
-      ) ?? null)
-    : null
-const progressPreviewBlobUrl = ref('')
-
-const emit = defineEmits<{
-  (
-    e: 'contextmenu',
-    value: { task: TaskItemImpl; event: MouseEvent; node: ComfyNode | null }
-  ): void
-  (e: 'preview', value: TaskItemImpl): void
-  (e: 'task-output-length-clicked', value: TaskItemImpl): void
-}>()
-
-onMounted(() => {
-  api.addEventListener('b_preview', onProgressPreviewReceived)
-})
-
-onUnmounted(() => {
-  if (progressPreviewBlobUrl.value) {
-    URL.revokeObjectURL(progressPreviewBlobUrl.value)
-  }
-  api.removeEventListener('b_preview', onProgressPreviewReceived)
-})
-
-const handleContextMenu = (e: MouseEvent) => {
-  emit('contextmenu', { task: props.task, event: e, node })
-}
-
-const handlePreview = () => {
-  emit('preview', props.task)
-}
-
-const handleOutputLengthClick = () => {
-  emit('task-output-length-clicked', props.task)
-}
-
-const taskTagSeverity = (status: TaskItemDisplayStatus) => {
-  switch (status) {
-    case TaskItemDisplayStatus.Pending:
-      return 'secondary'
-    case TaskItemDisplayStatus.Running:
-      return 'info'
-    case TaskItemDisplayStatus.Completed:
-      return 'success'
-    case TaskItemDisplayStatus.Failed:
-      return 'danger'
-    case TaskItemDisplayStatus.Cancelled:
-      return 'warn'
-  }
-}
-
-const taskStatusText = (status: TaskItemDisplayStatus) => {
-  switch (status) {
-    case TaskItemDisplayStatus.Pending:
-      return 'Pending'
-    case TaskItemDisplayStatus.Running:
-      return '<i class="pi pi-spin pi-spinner" style="font-weight: bold"></i> Running'
-    case TaskItemDisplayStatus.Completed:
-      return '<i class="pi pi-check" style="font-weight: bold"></i>'
-    case TaskItemDisplayStatus.Failed:
-      return 'Failed'
-    case TaskItemDisplayStatus.Cancelled:
-      return 'Cancelled'
-  }
-}
-
-const formatTime = (time?: number) => {
-  if (time === undefined) {
-    return ''
-  }
-  return `${time.toFixed(2)}s`
-}
-
-const onProgressPreviewReceived = async ({ detail }: CustomEvent) => {
-  if (props.task.displayStatus === TaskItemDisplayStatus.Running) {
-    if (progressPreviewBlobUrl.value) {
-      URL.revokeObjectURL(progressPreviewBlobUrl.value)
-    }
-    progressPreviewBlobUrl.value = URL.createObjectURL(detail)
-  }
-}
-
-const cancelledWithResults = computed(() => {
-  return (
-    props.task.displayStatus === TaskItemDisplayStatus.Cancelled &&
-    flatOutputs.length
-  )
-})
-
-const cancelledWithoutResults = computed(() => {
-  return (
-    props.task.displayStatus === TaskItemDisplayStatus.Cancelled &&
-    flatOutputs.length === 0
-  )
-})
-</script>
-
-<style scoped>
-.task-result-preview {
-  aspect-ratio: 1 / 1;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.task-result-preview i,
-.task-result-preview span {
-  font-size: 2rem;
-}
-
-.task-item {
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  overflow: hidden;
-  position: relative;
-}
-
-.task-item-details {
-  position: absolute;
-  top: 0.5rem;
-  padding: 0.6rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  z-index: 1;
-  pointer-events: none; /* Allow clicks to pass through this div */
-}
-
-/* Make individual controls clickable again by restoring pointer events */
-.task-item-details .tag-wrapper,
-.task-item-details button {
-  pointer-events: auto;
-}
-
-.task-node-link {
-  padding: 2px;
-}
-
-/* In dark mode, transparent background color for tags is not ideal for tags that
-are floating on top of images. */
-.tag-wrapper {
-  background-color: var(--p-primary-contrast-color);
-  border-radius: 6px;
-  display: inline-flex;
-}
-
-.node-name-tag {
-  word-break: break-all;
-}
-
-.status-tag-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.progress-preview-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-</style>

src/composables/README.md

@@ -181,7 +181,6 @@ Composables for sidebar functionality:
 |------------|-------------|
 | `useModelLibrarySidebarTab` | Manages the model library sidebar tab |
 | `useNodeLibrarySidebarTab` | Manages the node library sidebar tab |
-| `useQueueSidebarTab` | Manages the queue sidebar tab |
 | `useWorkflowsSidebarTab` | Manages the workflows sidebar tab |
 
 ### Tree

src/composables/graph/useGraphNodeManager.ts

@@ -13,6 +13,7 @@ import type {
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
@@ -46,7 +47,7 @@ export interface SafeWidgetData {
 }
 
 export interface VueNodeData {
-  id: string
+  id: NodeId
   title: string
   type: string
   mode: number

src/composables/graph/useVueNodeLifecycle.ts

@@ -3,6 +3,7 @@ import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { useRenderModeSetting } from '@/composables/settings/useRenderModeSetting'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -18,15 +19,18 @@ function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
   const layoutMutations = useLayoutMutations()
   const { shouldRenderVueNodes } = useVueFeatureFlags()
-
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
-
   const { startSync } = useLayoutSync()
 
   const isVueNodeToastDismissed = useVueNodesMigrationDismissed()
 
   let hasShownMigrationToast = false
 
+  useRenderModeSetting(
+    { setting: 'LiteGraph.Canvas.MinFontSizeForLOD', vue: 0, litegraph: 8 },
+    shouldRenderVueNodes
+  )
+
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph

src/composables/maskeditor/ShiftClick.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { resampleSegment } from './splineUtils'
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+describe('Shift+Click Drawing Logic', () => {
+  it('should generate equidistant points across connected segments', () => {
+    const spacing = 4
+    let remainder = spacing // Simulate start point already painted
+    const outputPoints: Point[] = []
+
+    // Define points: A -> B -> C
+    // A(0,0) -> B(10,0) -> C(20,0)
+    // Total length 20. Spacing 4.
+    // Expected points at x = 4, 8, 12, 16, 20
+    const pA = { x: 0, y: 0 }
+    const pB = { x: 10, y: 0 }
+    const pC = { x: 20, y: 0 }
+
+    // Segment 1: A -> B
+    const result1 = resampleSegment([pA, pB], spacing, remainder)
+    outputPoints.push(...result1.points)
+    remainder = result1.remainder
+
+    // Verify intermediate state
+    // Length 10. Spacing 4. Start offset 4.
+    // Points at 4, 8. Next at 12.
+    // Remainder = 12 - 10 = 2.
+    expect(result1.points.length).toBe(2)
+    expect(result1.points[0].x).toBeCloseTo(4)
+    expect(result1.points[1].x).toBeCloseTo(8)
+    expect(remainder).toBeCloseTo(2)
+
+    // Segment 2: B -> C
+    const result2 = resampleSegment([pB, pC], spacing, remainder)
+    outputPoints.push(...result2.points)
+    remainder = result2.remainder
+
+    // Verify final state
+    // Start offset 2. Points at 2, 6, 10 (relative to B).
+    // Absolute x: 12, 16, 20.
+    expect(result2.points.length).toBe(3)
+    expect(result2.points[0].x).toBeCloseTo(12)
+    expect(result2.points[1].x).toBeCloseTo(16)
+    expect(result2.points[2].x).toBeCloseTo(20)
+
+    // Verify all distances
+    // Note: The first point is at distance `spacing` from start (0,0)
+    // Subsequent points are `spacing` apart.
+    let prevX = 0
+    for (const p of outputPoints) {
+      const dist = p.x - prevX
+      expect(dist).toBeCloseTo(spacing)
+      prevX = p.x
+    }
+  })
+
+  it('should handle segments shorter than spacing', () => {
+    const spacing = 10
+    let remainder = spacing // Simulate start point already painted
+
+    // A(0,0) -> B(5,0) -> C(15,0)
+    const pA = { x: 0, y: 0 }
+    const pB = { x: 5, y: 0 }
+    const pC = { x: 15, y: 0 }
+
+    // Segment 1: A -> B (Length 5)
+    // Spacing 10. No points should be generated.
+    // Remainder should be 5 (next point needs 5 more units).
+    const result1 = resampleSegment([pA, pB], spacing, remainder)
+    expect(result1.points.length).toBe(0)
+    expect(result1.remainder).toBeCloseTo(5)
+    remainder = result1.remainder
+
+    // Segment 2: B -> C (Length 10)
+    // Start offset 5. First point at 5 (relative to B).
+    // Absolute x = 10.
+    // Next point at 15 (relative to B). Segment ends at 10.
+    // Remainder = 15 - 10 = 5.
+    const result2 = resampleSegment([pB, pC], spacing, remainder)
+    expect(result2.points.length).toBe(1)
+    expect(result2.points[0].x).toBeCloseTo(10)
+    expect(result2.remainder).toBeCloseTo(5)
+  })
+})

src/composables/maskeditor/StrokeProcessor.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest'
+import { StrokeProcessor } from './StrokeProcessor'
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+describe('StrokeProcessor', () => {
+  it('should generate equidistant points from irregular input', () => {
+    const spacing = 10
+    const processor = new StrokeProcessor(spacing)
+    const outputPoints: Point[] = []
+
+    // Simulate a horizontal line drawn with irregular speed
+    // Points: (0,0) -> (5,0) -> (25,0) -> (30,0) -> (100,0)
+    const inputPoints: Point[] = [
+      { x: 0, y: 0 },
+      { x: 5, y: 0 }, // dist 5
+      { x: 25, y: 0 }, // dist 20
+      { x: 30, y: 0 }, // dist 5
+      { x: 100, y: 0 } // dist 70
+    ]
+
+    for (const p of inputPoints) {
+      outputPoints.push(...processor.addPoint(p))
+    }
+    outputPoints.push(...processor.endStroke())
+
+    // Verify we have points
+    expect(outputPoints.length).toBeGreaterThan(0)
+
+    // Verify spacing
+    // Note: The first few points might be affected by the start condition,
+    // but the middle section should be perfectly spaced.
+    // Also, Catmull-Rom splines don't necessarily pass through control points in a straight line
+    // if the points are collinear, they should be straight.
+
+    // Let's check distances between consecutive points
+    const distances: number[] = []
+    for (let i = 1; i < outputPoints.length; i++) {
+      const dx = outputPoints[i].x - outputPoints[i - 1].x
+      const dy = outputPoints[i].y - outputPoints[i - 1].y
+      distances.push(Math.hypot(dx, dy))
+    }
+
+    // Check that distances are close to spacing
+    // We allow a small epsilon because of floating point and spline approximation
+    // Filter out the very last segment which might be shorter (remainder)
+    // But wait, our logic doesn't output the last point if it's not a full spacing step?
+    // resampleSegment outputs points at [start + spacing, start + 2*spacing, ...]
+    // It does NOT output the end point of the segment.
+    // So all distances between output points should be exactly `spacing`.
+    // EXCEPT possibly if the spline curvature makes the straight-line distance slightly different
+    // from the arc length. But for a straight line input, it should be exact.
+
+    // However, catmull-rom with collinear points IS a straight line.
+
+    // Let's log the distances for debugging if test fails
+    // console.log('Distances:', distances)
+
+    // All distances should be approximately equal to spacing
+    // We might have a gap between segments if the logic isn't perfect,
+    // but within a segment it's guaranteed by resampleSegment.
+    // The critical part is the transition between segments.
+
+    for (let i = 0; i < distances.length; i++) {
+      const d = distances[i]
+      if (Math.abs(d - spacing) > 0.5) {
+        console.log(
+          `Distance mismatch at index ${i}: ${d} (expected ${spacing})`
+        )
+        console.log(`Point ${i}:`, outputPoints[i])
+        console.log(`Point ${i + 1}:`, outputPoints[i + 1])
+      }
+      expect(d).toBeCloseTo(spacing, 1)
+    }
+  })
+
+  it('should handle a simple 3-point stroke', () => {
+    const spacing = 5
+    const processor = new StrokeProcessor(spacing)
+    const points: Point[] = []
+
+    points.push(...processor.addPoint({ x: 0, y: 0 }))
+    points.push(...processor.addPoint({ x: 10, y: 0 }))
+    points.push(...processor.addPoint({ x: 20, y: 0 }))
+    points.push(...processor.endStroke())
+
+    expect(points.length).toBeGreaterThan(0)
+
+    // Check distances
+    for (let i = 1; i < points.length; i++) {
+      const dx = points[i].x - points[i - 1].x
+      const dy = points[i].y - points[i - 1].y
+      const d = Math.hypot(dx, dy)
+      expect(d).toBeCloseTo(spacing, 1)
+    }
+  })
+
+  it('should handle a single point click', () => {
+    const spacing = 5
+    const processor = new StrokeProcessor(spacing)
+    const points: Point[] = []
+
+    points.push(...processor.addPoint({ x: 100, y: 100 }))
+    points.push(...processor.endStroke())
+
+    expect(points.length).toBe(1)
+    expect(points[0]).toEqual({ x: 100, y: 100 })
+  })
+})

src/composables/maskeditor/StrokeProcessor.ts

@@ -0,0 +1,115 @@
+import type { Point } from '@/extensions/core/maskeditor/types'
+import { catmullRomSpline, resampleSegment } from './splineUtils'
+
+export class StrokeProcessor {
+  private controlPoints: Point[] = []
+  private remainder: number = 0
+  private spacing: number
+  private isFirstPoint: boolean = true
+  private hasProcessedSegment: boolean = false
+
+  constructor(spacing: number) {
+    this.spacing = spacing
+  }
+
+  /**
+   * Adds a point to the stroke and returns any new equidistant points generated.
+   * Maintain a sliding window of 4 control points for spline generation
+   */
+  public addPoint(point: Point): Point[] {
+    // Initialize buffer with the first point
+    if (this.isFirstPoint) {
+      this.controlPoints.push(point) // p0: phantom start point
+      this.controlPoints.push(point) // p1: actual start point
+      this.isFirstPoint = false
+      return [] // Wait for more points to form a segment
+    }
+
+    this.controlPoints.push(point)
+
+    // Require 4 points for a spline segment
+    if (this.controlPoints.length < 4) {
+      return []
+    }
+
+    // Generate segment p1->p2
+    const p0 = this.controlPoints[0]
+    const p1 = this.controlPoints[1]
+    const p2 = this.controlPoints[2]
+    const p3 = this.controlPoints[3]
+
+    const newPoints = this.processSegment(p0, p1, p2, p3)
+
+    // Slide window
+    this.controlPoints.shift()
+
+    return newPoints
+  }
+
+  /**
+   * End stroke and flush remaining segments
+   */
+  public endStroke(): Point[] {
+    if (this.controlPoints.length < 2) {
+      // Insufficient points for a segment
+      return []
+    }
+
+    // Process remaining segments by duplicating the last point
+
+    const newPoints: Point[] = []
+
+    // Flush the buffer by processing the final segment
+
+    while (this.controlPoints.length >= 3) {
+      const p0 = this.controlPoints[0]
+      const p1 = this.controlPoints[1]
+      const p2 = this.controlPoints[2]
+      const p3 = p2 // Duplicate last point as phantom end
+
+      const points = this.processSegment(p0, p1, p2, p3)
+      newPoints.push(...points)
+
+      this.controlPoints.shift()
+    }
+
+    // Handle single point click
+    if (!this.hasProcessedSegment && this.controlPoints.length >= 2) {
+      // Process zero-length segment for single point
+      const p = this.controlPoints[1]
+      const points = this.processSegment(p, p, p, p)
+      newPoints.push(...points)
+    }
+
+    return newPoints
+  }
+
+  private processSegment(p0: Point, p1: Point, p2: Point, p3: Point): Point[] {
+    this.hasProcessedSegment = true
+    // Generate dense points for the segment
+    const densePoints: Point[] = []
+
+    // Adaptive sampling based on segment length
+    const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y)
+    // Use 1 sample per pixel, but at least 5 samples to ensure smoothness for short segments
+    // and cap at a reasonable maximum if needed (though not strictly necessary with density)
+    const samples = Math.max(5, Math.ceil(dist))
+
+    for (let i = 0; i < samples; i++) {
+      const t = i / samples
+      densePoints.push(catmullRomSpline(p0, p1, p2, p3, t))
+    }
+    // Add segment end point
+    densePoints.push(p2)
+
+    // Resample points with carried-over remainder
+    const { points, remainder } = resampleSegment(
+      densePoints,
+      this.spacing,
+      this.remainder
+    )
+
+    this.remainder = remainder
+    return points
+  }
+}

src/composables/maskeditor/brushUtils.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { getEffectiveBrushSize, getEffectiveHardness } from './brushUtils'
+
+describe('brushUtils', () => {
+  describe('getEffectiveBrushSize', () => {
+    it('should return original size when hardness is 1.0', () => {
+      const size = 100
+      const hardness = 1.0
+      expect(getEffectiveBrushSize(size, hardness)).toBe(100)
+    })
+
+    it('should return 1.5x size when hardness is 0.0', () => {
+      const size = 100
+      const hardness = 0.0
+      expect(getEffectiveBrushSize(size, hardness)).toBe(150)
+    })
+
+    it('should interpolate linearly', () => {
+      const size = 100
+      const hardness = 0.5
+      // Scale should be 1.0 + 0.5 * 0.5 = 1.25
+      expect(getEffectiveBrushSize(size, hardness)).toBe(125)
+    })
+  })
+
+  describe('getEffectiveHardness', () => {
+    it('should return same hardness if effective size matches size', () => {
+      const size = 100
+      const hardness = 0.8
+      const effectiveSize = 100
+      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.8)
+    })
+
+    it('should scale hardness down as effective size increases', () => {
+      const size = 100
+      const hardness = 0.5
+      // Effective size at 0.5 hardness is 125
+      const effectiveSize = 125
+      // Hard core radius = 50. New hardness = 50 / 125 = 0.4
+      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.4)
+    })
+
+    it('should return 0 if effective size is 0', () => {
+      expect(getEffectiveHardness(100, 0.5, 0)).toBe(0)
+    })
+  })
+})

src/composables/maskeditor/brushUtils.ts

@@ -0,0 +1,34 @@
+/**
+ * Calculates the effective brush size based on the base size and hardness.
+ * As hardness decreases, the effective size increases to allow for a softer falloff.
+ *
+ * @param size - The base radius of the brush
+ * @param hardness - The hardness of the brush (0.0 to 1.0)
+ * @returns The effective radius of the brush
+ */
+export function getEffectiveBrushSize(size: number, hardness: number): number {
+  // Scale factor for maximum softness
+  const MAX_SCALE = 1.5
+  const scale = 1.0 + (1.0 - hardness) * (MAX_SCALE - 1.0)
+  return size * scale
+}
+
+/**
+ * Calculates the effective hardness to maintain the visual "hard core" of the brush.
+ * Since the effective size is larger, we need to adjust the hardness value so that
+ * the inner hard circle remains at the same physical radius as the original size * hardness.
+ *
+ * @param size - The base radius of the brush
+ * @param hardness - The base hardness of the brush
+ * @param effectiveSize - The effective radius (calculated by getEffectiveBrushSize)
+ * @returns The adjusted hardness value (0.0 to 1.0)
+ */
+export function getEffectiveHardness(
+  size: number,
+  hardness: number,
+  effectiveSize: number
+): number {
+  if (effectiveSize <= 0) return 0
+  // Adjust hardness to maintain the physical radius of the hard core
+  return (size * hardness) / effectiveSize
+}

src/composables/maskeditor/gpu/GPUBrushRenderer.ts

@@ -0,0 +1,805 @@
+import * as d from 'typegpu/data'
+import { StrokePoint } from './gpuSchema'
+import {
+  brushFragment,
+  brushVertex,
+  blitShader,
+  compositeShader,
+  readbackShader
+} from './brushShaders'
+
+// ... (rest of the file)
+
+const QUAD_VERTS = new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1])
+const QUAD_INDICES = new Uint16Array([0, 1, 2, 0, 2, 3])
+
+const UNIFORM_SIZE = 48 // Uniform buffer size aligned to 16 bytes
+const STROKE_STRIDE = d.sizeOf(StrokePoint) // 16
+const MAX_STROKES = 10000
+
+export class GPUBrushRenderer {
+  private device: GPUDevice
+
+  // Buffers
+  private quadVertexBuffer: GPUBuffer
+  private indexBuffer: GPUBuffer
+  private instanceBuffer: GPUBuffer
+  private uniformBuffer: GPUBuffer
+
+  // Pipelines
+  private renderPipeline: GPURenderPipeline // Standard alpha blending pipeline
+  private accumulatePipeline: GPURenderPipeline // SourceOver blending pipeline for stroke accumulation
+  private blitPipeline: GPURenderPipeline
+  private compositePipeline: GPURenderPipeline // Composite pipeline that applies opacity
+  private compositePipelinePreview: GPURenderPipeline // Pipeline for rendering to the preview canvas
+  private erasePipeline: GPURenderPipeline // Pipeline for erasing (Destination Out)
+  private erasePipelinePreview: GPURenderPipeline // Eraser pipeline for the preview canvas
+  readbackPipeline: GPUComputePipeline // Compute pipeline for texture readback
+
+  // Bind Group Layouts
+  private uniformBindGroupLayout: GPUBindGroupLayout
+  private textureBindGroupLayout: GPUBindGroupLayout
+
+  // Shared Bind Groups
+  private mainUniformBindGroup: GPUBindGroup
+
+  // Textures
+  private currentStrokeTexture: GPUTexture | null = null
+  private currentStrokeView: GPUTextureView | null = null
+
+  // Cached Bind Groups
+  private compositeTextureBindGroup: GPUBindGroup | null = null
+  private previewTextureBindGroup: GPUBindGroup | null = null
+
+  // Removed separate uniform bind groups as we will use mainUniformBindGroup
+
+  private lastReadbackTexture: GPUTexture | null = null
+  private lastReadbackBuffer: GPUBuffer | null = null
+  private readbackBindGroup: GPUBindGroup | null = null
+
+  private lastBackgroundTexture: GPUTexture | null = null
+  private backgroundBindGroup: GPUBindGroup | null = null
+
+  constructor(
+    device: GPUDevice,
+    presentationFormat: GPUTextureFormat = 'rgba8unorm'
+  ) {
+    this.device = device
+
+    // --- 1. Initialize Buffers ---
+    this.quadVertexBuffer = device.createBuffer({
+      size: QUAD_VERTS.byteLength,
+      usage: GPUBufferUsage.VERTEX,
+      mappedAtCreation: true
+    })
+    new Float32Array(this.quadVertexBuffer.getMappedRange()).set(QUAD_VERTS)
+    this.quadVertexBuffer.unmap()
+
+    this.indexBuffer = device.createBuffer({
+      size: QUAD_INDICES.byteLength,
+      usage: GPUBufferUsage.INDEX,
+      mappedAtCreation: true
+    })
+    new Uint16Array(this.indexBuffer.getMappedRange()).set(QUAD_INDICES)
+    this.indexBuffer.unmap()
+
+    this.instanceBuffer = device.createBuffer({
+      size: MAX_STROKES * STROKE_STRIDE,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    })
+
+    this.uniformBuffer = device.createBuffer({
+      size: UNIFORM_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    // --- 2. Brush Shader (Drawing) ---
+    const brushModuleV = device.createShaderModule({ code: brushVertex })
+    const brushModuleF = device.createShaderModule({ code: brushFragment })
+
+    // Create explicit bind group layouts
+    this.uniformBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: { type: 'uniform' }
+        }
+      ]
+    })
+
+    this.textureBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {} // default is float, 2d
+        }
+      ]
+    })
+
+    this.mainUniformBindGroup = device.createBindGroup({
+      layout: this.uniformBindGroupLayout,
+      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
+    })
+
+    const renderPipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.uniformBindGroupLayout]
+    })
+
+    // Standard Render Pipeline (Alpha Blend)
+    this.renderPipeline = device.createRenderPipeline({
+      layout: renderPipelineLayout,
+      vertex: {
+        module: brushModuleV,
+        entryPoint: 'vs',
+        buffers: [
+          {
+            arrayStride: 8,
+            stepMode: 'vertex',
+            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }] // Quad vertex attributes
+          },
+          {
+            arrayStride: 16,
+            stepMode: 'instance',
+            attributes: [
+              { shaderLocation: 1, offset: 0, format: 'float32x2' }, // Instance attributes: position
+              { shaderLocation: 2, offset: 8, format: 'float32' }, // size
+              { shaderLocation: 3, offset: 12, format: 'float32' } // pressure
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: brushModuleF,
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Accumulate strokes using SourceOver blending to ensure smooth intersections.
+    this.accumulatePipeline = device.createRenderPipeline({
+      layout: renderPipelineLayout,
+      vertex: {
+        module: brushModuleV,
+        entryPoint: 'vs',
+        buffers: [
+          {
+            arrayStride: 8,
+            stepMode: 'vertex',
+            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }]
+          },
+          {
+            arrayStride: 16,
+            stepMode: 'instance',
+            attributes: [
+              { shaderLocation: 1, offset: 0, format: 'float32x2' },
+              { shaderLocation: 2, offset: 8, format: 'float32' },
+              { shaderLocation: 3, offset: 12, format: 'float32' }
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: brushModuleF,
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              // Use SourceOver blending for smooth stroke intersections.
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 3. Blit Pipeline (For Preview) ---
+    const blitPipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.textureBindGroupLayout]
+    })
+
+    this.blitPipeline = device.createRenderPipeline({
+      layout: blitPipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: blitShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: blitShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat, // Use the presentation format
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 4. Composite Pipeline ---
+
+    const compositePipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [
+        this.textureBindGroupLayout,
+        this.uniformBindGroupLayout
+      ]
+    })
+
+    // Standard composite pipeline for offscreen textures
+    this.compositePipeline = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Composite pipeline for the preview canvas
+    this.compositePipelinePreview = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat,
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 5. Erase Pipeline (Destination Out) ---
+    // Standard erase pipeline for offscreen textures
+    this.erasePipeline = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha', // dst * (1 - src_alpha)
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha', // dst_alpha * (1 - src_alpha)
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Erase pipeline for the preview canvas
+    this.erasePipelinePreview = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat,
+            blend: {
+              color: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 6. Readback Pipeline (Compute) ---
+    this.readbackPipeline = device.createComputePipeline({
+      layout: 'auto',
+      compute: {
+        module: device.createShaderModule({ code: readbackShader }),
+        entryPoint: 'main'
+      }
+    })
+  }
+
+  public prepareStroke(width: number, height: number) {
+    // Initialize or resize the accumulation texture
+    if (
+      !this.currentStrokeTexture ||
+      this.currentStrokeTexture.width !== width ||
+      this.currentStrokeTexture.height !== height
+    ) {
+      if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
+      this.currentStrokeTexture = this.device.createTexture({
+        size: [width, height],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.RENDER_ATTACHMENT |
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_SRC
+      })
+      this.currentStrokeView = this.currentStrokeTexture.createView()
+
+      // Invalidate texture-dependent bind groups
+      this.compositeTextureBindGroup = null
+      this.previewTextureBindGroup = null
+      // Readback bind group might also be invalid if it was using the old texture
+      if (this.lastReadbackTexture === this.currentStrokeTexture) {
+        this.readbackBindGroup = null
+        this.lastReadbackTexture = null
+      }
+    }
+
+    // Clear the accumulation texture
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.currentStrokeView!,
+          loadOp: 'clear',
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          storeOp: 'store'
+        }
+      ]
+    })
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public renderStrokeToAccumulator(
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    if (!this.currentStrokeView) return
+    // Render stroke using accumulation pipeline
+    this.renderStrokeInternal(
+      this.currentStrokeView,
+      this.accumulatePipeline,
+      points,
+      settings
+    )
+  }
+
+  public compositeStroke(
+    targetView: GPUTextureView,
+    settings: {
+      opacity: number
+      color: [number, number, number]
+      hardness: number // Required for uniform buffer layout
+      screenSize: [number, number]
+      brushShape: number
+      isErasing?: boolean
+    }
+  ) {
+    if (!this.currentStrokeTexture) return
+
+    // Update uniforms for the composite pass
+    const buffer = new ArrayBuffer(UNIFORM_SIZE)
+    const f32 = new Float32Array(buffer)
+    const u32 = new Uint32Array(buffer)
+
+    f32[0] = settings.color[0]
+    f32[1] = settings.color[1]
+    f32[2] = settings.color[2]
+    f32[3] = settings.opacity
+    f32[4] = settings.hardness
+    f32[5] = 0 // Padding
+    f32[6] = settings.screenSize[0]
+    f32[7] = settings.screenSize[1]
+    u32[8] = settings.brushShape // Brush shape: 0=Circle, 1=Square
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+    const encoder = this.device.createCommandEncoder()
+
+    // Choose pipeline based on operation
+    const pipeline = settings.isErasing
+      ? this.erasePipeline
+      : this.compositePipeline
+
+    // 1. Texture Bind Group (Group 0)
+    if (!this.compositeTextureBindGroup) {
+      this.compositeTextureBindGroup = this.device.createBindGroup({
+        layout: this.textureBindGroupLayout,
+        entries: [
+          { binding: 0, resource: this.currentStrokeTexture.createView() }
+        ]
+      })
+    }
+
+    // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
+    // It is compatible because we used the same layout
+
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: targetView,
+          loadOp: 'load',
+          storeOp: 'store'
+        }
+      ]
+    })
+
+    pass.setPipeline(pipeline)
+    pass.setBindGroup(0, this.compositeTextureBindGroup)
+    pass.setBindGroup(1, this.mainUniformBindGroup)
+    pass.draw(3)
+    pass.end()
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  // Direct rendering method
+  public renderStroke(
+    targetView: GPUTextureView,
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    this.renderStrokeInternal(targetView, this.renderPipeline, points, settings)
+  }
+
+  private renderStrokeInternal(
+    targetView: GPUTextureView,
+    pipeline: GPURenderPipeline,
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    if (points.length === 0) return
+
+    // 1. Update Uniforms
+    const buffer = new ArrayBuffer(UNIFORM_SIZE)
+    const f32 = new Float32Array(buffer)
+    const u32 = new Uint32Array(buffer)
+
+    f32[0] = settings.color[0]
+    f32[1] = settings.color[1]
+    f32[2] = settings.color[2]
+    f32[3] = settings.opacity
+    f32[4] = settings.hardness
+    f32[5] = 0 // Padding
+    f32[6] = settings.width
+    f32[7] = settings.height
+    u32[8] = settings.brushShape
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+    // 2. Batch Rendering
+    let processedPoints = 0
+    while (processedPoints < points.length) {
+      const batchSize = Math.min(points.length - processedPoints, MAX_STROKES)
+      const iData = new Float32Array(batchSize * 4)
+
+      for (let i = 0; i < batchSize; i++) {
+        const p = points[processedPoints + i]
+        iData[i * 4 + 0] = p.x
+        iData[i * 4 + 1] = p.y
+        iData[i * 4 + 2] = settings.size
+        iData[i * 4 + 3] = p.pressure
+      }
+
+      this.device.queue.writeBuffer(this.instanceBuffer, 0, iData)
+
+      // 3. Render Pass
+      const encoder = this.device.createCommandEncoder()
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: targetView,
+            loadOp: 'load',
+            storeOp: 'store'
+          }
+        ]
+      })
+
+      pass.setPipeline(pipeline)
+      pass.setBindGroup(0, this.mainUniformBindGroup)
+      pass.setVertexBuffer(0, this.quadVertexBuffer)
+      pass.setVertexBuffer(1, this.instanceBuffer)
+      pass.setIndexBuffer(this.indexBuffer, 'uint16')
+      pass.drawIndexed(6, batchSize)
+      pass.end()
+
+      this.device.queue.submit([encoder.finish()])
+
+      processedPoints += batchSize
+    }
+  }
+
+  // Blit the accumulated stroke to the preview canvas
+  public blitToCanvas(
+    destinationCtx: GPUCanvasContext,
+    settings: {
+      opacity: number
+      color: [number, number, number]
+      hardness: number
+      screenSize: [number, number]
+      brushShape: number
+      isErasing?: boolean
+    },
+    backgroundTexture?: GPUTexture
+  ) {
+    const encoder = this.device.createCommandEncoder()
+    const destView = destinationCtx.getCurrentTexture().createView()
+
+    if (backgroundTexture) {
+      // Draw background texture to allow erasing effect on existing content
+      if (
+        this.lastBackgroundTexture !== backgroundTexture ||
+        !this.backgroundBindGroup
+      ) {
+        this.backgroundBindGroup = this.device.createBindGroup({
+          layout: this.textureBindGroupLayout,
+          entries: [{ binding: 0, resource: backgroundTexture.createView() }]
+        })
+        this.lastBackgroundTexture = backgroundTexture
+      }
+
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'clear', // Clear attachment before drawing
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            storeOp: 'store'
+          }
+        ]
+      })
+      pass.setPipeline(this.blitPipeline)
+      pass.setBindGroup(0, this.backgroundBindGroup)
+      pass.draw(3)
+      pass.end()
+    } else {
+      // Clear the destination texture
+      const clearPass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'clear',
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            storeOp: 'store'
+          }
+        ]
+      })
+      clearPass.end()
+    }
+
+    // Draw the accumulated stroke
+    if (this.currentStrokeTexture) {
+      // Update uniforms for the preview pass
+      const buffer = new ArrayBuffer(UNIFORM_SIZE)
+      const f32 = new Float32Array(buffer)
+      const u32 = new Uint32Array(buffer)
+
+      f32[0] = settings.color[0]
+      f32[1] = settings.color[1]
+      f32[2] = settings.color[2]
+      f32[3] = settings.opacity
+      f32[4] = settings.hardness
+      f32[5] = 0 // Padding
+      f32[6] = settings.screenSize[0]
+      f32[7] = settings.screenSize[1]
+      u32[8] = settings.brushShape
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+      // Select preview pipeline based on operation
+      const pipeline = settings.isErasing
+        ? this.erasePipelinePreview
+        : this.compositePipelinePreview
+
+      // 1. Texture Bind Group (Group 0)
+      if (!this.previewTextureBindGroup) {
+        this.previewTextureBindGroup = this.device.createBindGroup({
+          layout: this.textureBindGroupLayout,
+          entries: [
+            { binding: 0, resource: this.currentStrokeTexture.createView() }
+          ]
+        })
+      }
+
+      // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
+
+      const passStroke = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'load', // Load the previous pass result
+            storeOp: 'store'
+          }
+        ]
+      })
+      passStroke.setPipeline(pipeline)
+      passStroke.setBindGroup(0, this.previewTextureBindGroup)
+      passStroke.setBindGroup(1, this.mainUniformBindGroup)
+      passStroke.draw(3)
+      passStroke.end()
+    }
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  // Clear the preview canvas
+  public clearPreview(destinationCtx: GPUCanvasContext) {
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: destinationCtx.getCurrentTexture().createView(),
+          loadOp: 'clear',
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          storeOp: 'store'
+        }
+      ]
+    })
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public prepareReadback(texture: GPUTexture, outputBuffer: GPUBuffer) {
+    if (
+      this.lastReadbackTexture !== texture ||
+      this.lastReadbackBuffer !== outputBuffer ||
+      !this.readbackBindGroup
+    ) {
+      this.readbackBindGroup = this.device.createBindGroup({
+        layout: this.readbackPipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: texture.createView() },
+          { binding: 1, resource: { buffer: outputBuffer } }
+        ]
+      })
+      this.lastReadbackTexture = texture
+      this.lastReadbackBuffer = outputBuffer
+    }
+
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginComputePass()
+    pass.setPipeline(this.readbackPipeline)
+    pass.setBindGroup(0, this.readbackBindGroup)
+
+    const width = texture.width
+    const height = texture.height
+    // Dispatch workgroups based on texture dimensions (8x8 block size)
+    pass.dispatchWorkgroups(Math.ceil(width / 8), Math.ceil(height / 8))
+    pass.end()
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public destroy() {
+    this.quadVertexBuffer.destroy()
+    this.indexBuffer.destroy()
+    this.instanceBuffer.destroy()
+    this.uniformBuffer.destroy()
+    if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
+
+    // Clear cached bind groups
+    this.compositeTextureBindGroup = null
+    this.previewTextureBindGroup = null
+    this.readbackBindGroup = null
+    this.backgroundBindGroup = null
+    this.lastReadbackTexture = null
+    this.lastReadbackBuffer = null
+    this.lastBackgroundTexture = null
+  }
+}

src/composables/maskeditor/gpu/brushShaders.ts

@@ -0,0 +1,171 @@
+import tgpu from 'typegpu'
+import * as d from 'typegpu/data'
+import { BrushUniforms } from './gpuSchema'
+
+const VertexOutput = d.struct({
+  position: d.builtin.position,
+  localUV: d.location(0, d.vec2f),
+  color: d.location(1, d.vec3f),
+  opacity: d.location(2, d.f32),
+  hardness: d.location(3, d.f32)
+})
+
+const brushVertexTemplate = `
+@group(0) @binding(0) var<uniform> globals: BrushUniforms;
+
+@vertex
+fn vs(
+  @location(0) quadPos: vec2<f32>,
+  @location(1) pos: vec2<f32>,
+  @location(2) size: f32,
+  @location(3) pressure: f32
+) -> VertexOutput {
+  // Convert diameter to radius
+  let radius = size * pressure;
+  let pixelPos = pos + (quadPos * radius);
+  
+  // Convert pixel coordinates to Normalized Device Coordinates (NDC)
+  let ndcX = (pixelPos.x / globals.screenSize.x) * 2.0 - 1.0;
+  let ndcY = 1.0 - ((pixelPos.y / globals.screenSize.y) * 2.0);  // Flip Y axis for WebGPU coordinate system
+
+  return VertexOutput(
+    vec4<f32>(ndcX, ndcY, 0.0, 1.0),
+    quadPos,
+    globals.brushColor,
+    pressure * globals.brushOpacity,
+    globals.hardness
+  );
+}
+`
+
+export const brushVertex = tgpu.resolve({
+  template: brushVertexTemplate,
+  externals: {
+    BrushUniforms,
+    VertexOutput
+  }
+})
+
+const brushFragmentTemplate = `
+@group(0) @binding(0) var<uniform> globals: BrushUniforms;
+
+@fragment
+fn fs(v: VertexOutput) -> @location(0) vec4<f32> {
+  var dist: f32;
+  if (globals.brushShape == 1u) {
+    // Calculate Chebyshev distance for square shape
+    dist = max(abs(v.localUV.x), abs(v.localUV.y));
+  } else {
+    // Calculate Euclidean distance for circle shape
+    dist = length(v.localUV);
+  }
+
+  if (dist > 1.0) { discard; }
+
+  // Calculate alpha with hardness and anti-aliasing
+  let edgeWidth = fwidth(dist);
+  let startFade = min(v.hardness, 1.0 - edgeWidth * 2.0);
+  let linearAlpha = 1.0 - smoothstep(startFade, 1.0, dist);
+  // Apply quadratic falloff for smoother edges
+  let alphaShape = pow(linearAlpha, 2.0);
+  
+  // Return premultiplied alpha color
+  let alpha = alphaShape * v.opacity;
+  return vec4<f32>(v.color * alpha, alpha);
+}
+`
+
+export const brushFragment = tgpu.resolve({
+  template: brushFragmentTemplate,
+  externals: {
+    VertexOutput,
+    BrushUniforms
+  }
+})
+
+const blitShaderTemplate = `
+@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
+  );
+  return vec4<f32>(pos[vIdx], 0.0, 1.0);
+}
+
+@group(0) @binding(0) var myTexture: texture_2d<f32>;
+
+@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
+  let c = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
+  // Treat texture as premultiplied to prevent double-darkening on overlaps
+  return c;
+}
+`
+
+export const blitShader = tgpu.resolve({
+  template: blitShaderTemplate,
+  externals: {}
+})
+
+const compositeShaderTemplate = `
+@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
+  );
+  return vec4<f32>(pos[vIdx], 0.0, 1.0);
+}
+
+@group(0) @binding(0) var myTexture: texture_2d<f32>;
+@group(1) @binding(0) var<uniform> globals: BrushUniforms;
+
+@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
+  let sampled = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
+  // Apply global brush opacity to accumulated coverage
+  return sampled * globals.brushOpacity;
+}
+`
+
+export const compositeShader = tgpu.resolve({
+  template: compositeShaderTemplate,
+  externals: {
+    BrushUniforms
+  }
+})
+
+const readbackShaderTemplate = `
+@group(0) @binding(0) var inputTex: texture_2d<f32>;
+@group(0) @binding(1) var<storage, read_write> outputBuf: array<u32>;
+
+@compute @workgroup_size(8, 8)
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+  let dims = textureDimensions(inputTex);
+  if (id.x >= dims.x || id.y >= dims.y) { return; }
+
+  let color = textureLoad(inputTex, vec2<i32>(id.xy), 0);
+  
+  var r = color.r;
+  var g = color.g;
+  var b = color.b;
+  let a = color.a;
+
+  if (a > 0.0) {
+    r = r / a;
+    g = g / a;
+    b = b / a;
+  }
+
+  let ir = u32(clamp(r * 255.0, 0.0, 255.0));
+  let ig = u32(clamp(g * 255.0, 0.0, 255.0));
+  let ib = u32(clamp(b * 255.0, 0.0, 255.0));
+  let ia = u32(clamp(a * 255.0, 0.0, 255.0));
+
+  // Pack RGBA channels into a single u32 (Little Endian)
+  let packed = ir | (ig << 8u) | (ib << 16u) | (ia << 24u);
+
+  let index = id.y * dims.x + id.x;
+  outputBuf[index] = packed;
+}
+`
+
+export const readbackShader = tgpu.resolve({
+  template: readbackShaderTemplate,
+  externals: {}
+})

src/composables/maskeditor/gpu/gpuSchema.ts

@@ -0,0 +1,17 @@
+import * as d from 'typegpu/data'
+
+// Global brush uniforms
+export const BrushUniforms = d.struct({
+  brushColor: d.vec3f,
+  brushOpacity: d.f32,
+  hardness: d.f32,
+  screenSize: d.vec2f,
+  brushShape: d.u32 // 0: Circle, 1: Square
+})
+
+// Per-point instance data
+export const StrokePoint = d.struct({
+  pos: d.location(0, d.vec2f), // Center position
+  size: d.location(1, d.f32), // Brush radius
+  pressure: d.location(2, d.f32) // Pressure value (0.0 - 1.0)
+})

src/composables/maskeditor/splineUtils.ts

@@ -0,0 +1,126 @@
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+/**
+ * Evaluates a Catmull-Rom spline at parameter t between p1 and p2
+ * @param p0 Previous control point
+ * @param p1 Start point of the curve segment
+ * @param p2 End point of the curve segment
+ * @param p3 Next control point
+ * @param t Parameter in range [0, 1]
+ * @returns Interpolated point on the curve
+ */
+export function catmullRomSpline(
+  p0: Point,
+  p1: Point,
+  p2: Point,
+  p3: Point,
+  t: number
+): Point {
+  // Centripetal Catmull-Rom Spline (alpha = 0.5) to prevent loops and overshoots
+  const alpha = 0.5
+
+  const getT = (t: number, p0: Point, p1: Point) => {
+    const d = Math.hypot(p1.x - p0.x, p1.y - p0.y)
+    return t + Math.pow(d, alpha)
+  }
+
+  const t0 = 0
+  const t1 = getT(t0, p0, p1)
+  const t2 = getT(t1, p1, p2)
+  const t3 = getT(t2, p2, p3)
+
+  // Map normalized t to parameter range
+  const tInterp = t1 + (t2 - t1) * t
+
+  // Safe interpolation for coincident points
+  const interp = (
+    pA: Point,
+    pB: Point,
+    tA: number,
+    tB: number,
+    t: number
+  ): Point => {
+    if (Math.abs(tB - tA) < 0.0001) return pA
+    const k = (t - tA) / (tB - tA)
+    return add(mul(pA, 1 - k), mul(pB, k))
+  }
+
+  // Barry-Goldman pyramidal interpolation
+  const A1 = interp(p0, p1, t0, t1, tInterp)
+  const A2 = interp(p1, p2, t1, t2, tInterp)
+  const A3 = interp(p2, p3, t2, t3, tInterp)
+
+  const B1 = interp(A1, A2, t0, t2, tInterp)
+  const B2 = interp(A2, A3, t1, t3, tInterp)
+
+  const C = interp(B1, B2, t1, t2, tInterp)
+
+  return C
+}
+
+function add(p1: Point, p2: Point): Point {
+  return { x: p1.x + p2.x, y: p1.y + p2.y }
+}
+
+function mul(p: Point, s: number): Point {
+  return { x: p.x * s, y: p.y * s }
+}
+
+/**
+ * Resamples a curve segment with a starting offset (remainder from previous segment).
+ * Returns the resampled points and the new remainder distance.
+ *
+ * @param points Points defining the curve segment
+ * @param spacing Desired spacing between points
+ * @param startOffset Distance to travel before placing the first point (remainder)
+ * @returns Object containing points and new remainder
+ */
+export function resampleSegment(
+  points: Point[],
+  spacing: number,
+  startOffset: number
+): { points: Point[]; remainder: number } {
+  if (points.length === 0) return { points: [], remainder: startOffset }
+
+  const result: Point[] = []
+  let currentDist = 0
+  let nextSampleDist = startOffset
+
+  // Iterate through segment points
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i]
+    const p2 = points[i + 1]
+
+    const dx = p2.x - p1.x
+    const dy = p2.y - p1.y
+    const segmentLen = Math.hypot(dx, dy)
+
+    // Handle zero-length segments
+    if (segmentLen < 0.0001) {
+      while (nextSampleDist <= currentDist) {
+        result.push(p1)
+        nextSampleDist += spacing
+      }
+      continue
+    }
+
+    // Generate samples within the segment
+    while (nextSampleDist <= currentDist + segmentLen) {
+      const t = (nextSampleDist - currentDist) / segmentLen
+
+      // Interpolate
+      const x = p1.x + t * dx
+      const y = p1.y + t * dy
+      result.push({ x, y })
+
+      nextSampleDist += spacing
+    }
+
+    currentDist += segmentLen
+  }
+
+  // Calculate remainder distance for the next segment
+  const remainder = nextSampleDist - currentDist
+
+  return { points: result, remainder }
+}

src/composables/maskeditor/useCanvasHistory.ts

@@ -4,7 +4,9 @@ import { useMaskEditorStore } from '@/stores/maskEditorStore'
 export function useCanvasHistory(maxStates = 20) {
   const store = useMaskEditorStore()
 
-  const states = ref<{ mask: ImageData; rgb: ImageData }[]>([])
+  const states = ref<
+    { mask: ImageData | ImageBitmap; rgb: ImageData | ImageBitmap }[]
+  >([])
   const currentStateIndex = ref(-1)
   const initialized = ref(false)
 
@@ -53,7 +55,10 @@ export function useCanvasHistory(maxStates = 20) {
     initialized.value = true
   }
 
-  const saveState = () => {
+  const saveState = (
+    providedMaskData?: ImageData | ImageBitmap,
+    providedRgbData?: ImageData | ImageBitmap
+  ) => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     const maskCanvas = store.maskCanvas
@@ -68,23 +73,32 @@ export function useCanvasHistory(maxStates = 20) {
 
     states.value = states.value.slice(0, currentStateIndex.value + 1)
 
-    const maskState = maskCtx.getImageData(
-      0,
-      0,
-      maskCanvas.width,
-      maskCanvas.height
-    )
-    const rgbState = rgbCtx.getImageData(
-      0,
-      0,
-      rgbCanvas.width,
-      rgbCanvas.height
-    )
+    let maskState: ImageData | ImageBitmap
+    let rgbState: ImageData | ImageBitmap
+
+    if (providedMaskData && providedRgbData) {
+      maskState = providedMaskData
+      rgbState = providedRgbData
+    } else {
+      maskState = maskCtx.getImageData(
+        0,
+        0,
+        maskCanvas.width,
+        maskCanvas.height
+      )
+      rgbState = rgbCtx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height)
+    }
+
     states.value.push({ mask: maskState, rgb: rgbState })
     currentStateIndex.value++
 
     if (states.value.length > maxStates) {
-      states.value.shift()
+      const removed = states.value.shift()
+      // Cleanup ImageBitmaps to avoid memory leaks
+      if (removed) {
+        if (removed.mask instanceof ImageBitmap) removed.mask.close()
+        if (removed.rgb instanceof ImageBitmap) removed.rgb.close()
+      }
       currentStateIndex.value--
     }
   }
@@ -109,16 +123,35 @@ export function useCanvasHistory(maxStates = 20) {
     restoreState(states.value[currentStateIndex.value])
   }
 
-  const restoreState = (state: { mask: ImageData; rgb: ImageData }) => {
+  const restoreState = (state: {
+    mask: ImageData | ImageBitmap
+    rgb: ImageData | ImageBitmap
+  }) => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     if (!maskCtx || !rgbCtx) return
 
-    maskCtx.putImageData(state.mask, 0, 0)
-    rgbCtx.putImageData(state.rgb, 0, 0)
+    if (state.mask instanceof ImageBitmap) {
+      maskCtx.clearRect(0, 0, state.mask.width, state.mask.height)
+      maskCtx.drawImage(state.mask, 0, 0)
+    } else {
+      maskCtx.putImageData(state.mask, 0, 0)
+    }
+
+    if (state.rgb instanceof ImageBitmap) {
+      rgbCtx.clearRect(0, 0, state.rgb.width, state.rgb.height)
+      rgbCtx.drawImage(state.rgb, 0, 0)
+    } else {
+      rgbCtx.putImageData(state.rgb, 0, 0)
+    }
   }
 
   const clearStates = () => {
+    // Cleanup bitmaps
+    states.value.forEach((state) => {
+      if (state.mask instanceof ImageBitmap) state.mask.close()
+      if (state.rgb instanceof ImageBitmap) state.rgb.close()
+    })
     states.value = []
     currentStateIndex.value = -1
     initialized.value = false
@@ -127,6 +160,7 @@ export function useCanvasHistory(maxStates = 20) {
   return {
     canUndo,
     canRedo,
+    currentStateIndex,
     saveInitialState,
     saveState,
     undo,

src/composables/maskeditor/useMaskEditor.ts

@@ -0,0 +1,48 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useDialogStore } from '@/stores/dialogStore'
+import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
+import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
+
+export function useMaskEditor() {
+  const openMaskEditor = (node: LGraphNode) => {
+    if (!node) {
+      console.error('[MaskEditor] No node provided')
+      return
+    }
+
+    if (!node.imgs?.length && node.previewMediaType !== 'image') {
+      console.error('[MaskEditor] Node has no images')
+      return
+    }
+
+    useDialogStore().showDialog({
+      key: 'global-mask-editor',
+      headerComponent: TopBarHeader,
+      component: MaskEditorContent,
+      props: {
+        node
+      },
+      dialogComponentProps: {
+        style: 'width: 90vw; height: 90vh;',
+        modal: true,
+        maximizable: true,
+        closable: true,
+        pt: {
+          root: {
+            class: 'mask-editor-dialog flex flex-col'
+          },
+          content: {
+            class: 'flex flex-col min-h-0 flex-1 !p-0'
+          },
+          header: {
+            class: '!p-2'
+          }
+        }
+      }
+    })
+  }
+
+  return {
+    openMaskEditor
+  }
+}

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -80,21 +80,64 @@ export function useMaskEditorLoader() {
     try {
       validateNode(node)
 
-      const nodeImageUrl = getNodeImageUrl(node)
+      let nodeImageUrl = getNodeImageUrl(node)
 
-      const nodeImageRef = parseImageRef(nodeImageUrl)
+      let nodeImageRef = parseImageRef(nodeImageUrl)
 
       let widgetFilename: string | undefined
       if (node.widgets) {
         const imageWidget = node.widgets.find((w) => w.name === 'image')
-        if (
-          imageWidget &&
-          typeof imageWidget.value === 'object' &&
-          imageWidget.value &&
-          'filename' in imageWidget.value &&
-          typeof imageWidget.value.filename === 'string'
-        ) {
-          widgetFilename = imageWidget.value.filename
+        if (imageWidget) {
+          if (typeof imageWidget.value === 'string') {
+            widgetFilename = imageWidget.value
+          } else if (
+            typeof imageWidget.value === 'object' &&
+            imageWidget.value &&
+            'filename' in imageWidget.value &&
+            typeof imageWidget.value.filename === 'string'
+          ) {
+            widgetFilename = imageWidget.value.filename
+          }
+        }
+      }
+
+      // If we have a widget filename, we should prioritize it over the node image
+      // because the node image might be stale (e.g. from a previous save)
+      // while the widget value reflects the current selection.
+      if (widgetFilename) {
+        try {
+          // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
+          let filename = widgetFilename
+          let subfolder: string | undefined = undefined
+          let type: string | undefined = 'input' // Default to input for widget values
+
+          // Check for type in brackets at the end
+          const typeMatch = filename.match(/ \[([^\]]+)\]$/)
+          if (typeMatch) {
+            type = typeMatch[1]
+            filename = filename.substring(
+              0,
+              filename.length - typeMatch[0].length
+            )
+          }
+
+          // Check for subfolder (forward slash separator)
+          const lastSlashIndex = filename.lastIndexOf('/')
+          if (lastSlashIndex !== -1) {
+            subfolder = filename.substring(0, lastSlashIndex)
+            filename = filename.substring(lastSlashIndex + 1)
+          }
+
+          nodeImageRef = {
+            filename,
+            type,
+            subfolder
+          }
+
+          // We also need to update nodeImageUrl to match this new ref so subsequent logic works
+          nodeImageUrl = mkFileUrl({ ref: nodeImageRef })
+        } catch (e) {
+          console.warn('Failed to parse widget filename as ref', e)
         }
       }
 

src/composables/node/useNodePricing.ts

@@ -1545,7 +1545,26 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
       }
     },
     GeminiImageNode: {
-      displayPrice: '$0.03 per 1K tokens'
+      displayPrice: '~$0.039/Image (1K)'
+    },
+    GeminiImage2Node: {
+      displayPrice: (node: LGraphNode): string => {
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!resolutionWidget) return 'Token-based'
+
+        const resolution = String(resolutionWidget.value)
+        if (resolution.includes('1K')) {
+          return '~$0.134/Image'
+        } else if (resolution.includes('2K')) {
+          return '~$0.134/Image'
+        } else if (resolution.includes('4K')) {
+          return '~$0.24/Image'
+        }
+        return 'Token-based'
+      }
     },
     // OpenAI nodes
     OpenAIChatNode: {
@@ -1829,6 +1848,7 @@ export const useNodePricing = () => {
       TripoTextureNode: ['texture_quality'],
       // Google/Gemini nodes
       GeminiNode: ['model'],
+      GeminiImage2Node: ['resolution'],
       // OpenAI nodes
       OpenAIChatNode: ['model'],
       // ByteDance

src/composables/settings/useRenderModeSetting.ts

@@ -0,0 +1,42 @@
+import type { ComputedRef } from 'vue'
+import { ref, watch } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { Settings } from '@/schemas/apiSchema'
+
+interface RenderModeSettingConfig<TSettingKey extends keyof Settings> {
+  setting: TSettingKey
+  vue: Settings[TSettingKey]
+  litegraph: Settings[TSettingKey]
+}
+
+export function useRenderModeSetting<TSettingKey extends keyof Settings>(
+  config: RenderModeSettingConfig<TSettingKey>,
+  isVueMode: ComputedRef<boolean>
+) {
+  const settingStore = useSettingStore()
+  const vueValue = ref(config.vue)
+  const litegraphValue = ref(config.litegraph)
+  const lastWasVue = ref<boolean | null>(null)
+
+  const load = async (vue: boolean) => {
+    if (lastWasVue.value === vue) return
+
+    if (lastWasVue.value !== null) {
+      const currentValue = settingStore.get(config.setting)
+      if (lastWasVue.value) {
+        vueValue.value = currentValue
+      } else {
+        litegraphValue.value = currentValue
+      }
+    }
+
+    await settingStore.set(
+      config.setting,
+      vue ? vueValue.value : litegraphValue.value
+    )
+    lastWasVue.value = vue
+  }
+
+  watch(isVueMode, load, { immediate: true })
+}

src/composables/sidebarTabs/useQueueSidebarTab.ts

@@ -1,22 +0,0 @@
-import { markRaw } from 'vue'
-
-import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
-import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
-import type { SidebarTabExtension } from '@/types/extensionTypes'
-
-export const useQueueSidebarTab = (): SidebarTabExtension => {
-  const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
-  return {
-    id: 'queue',
-    icon: 'pi pi-history',
-    iconBadge: () => {
-      const value = queuePendingTaskCountStore.count.toString()
-      return value === '0' ? null : value
-    },
-    title: 'sideToolbar.queue',
-    tooltip: 'sideToolbar.queue',
-    label: 'sideToolbar.labels.queue',
-    component: markRaw(QueueSidebarTab),
-    type: 'vue'
-  }
-}

src/constants/coreKeybindings.ts

@@ -30,12 +30,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
     },
     commandId: 'Comfy.RefreshNodeDefinitions'
   },
-  {
-    combo: {
-      key: 'q'
-    },
-    commandId: 'Workspace.ToggleSidebarTab.queue'
-  },
   {
     combo: {
       key: 'w'

src/core/graph/widgets/dynamicWidgets.ts

@@ -0,0 +1,114 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
+import type { ComboInputSpec, InputSpec } from '@/schemas/nodeDefSchema'
+import { zDynamicComboInputSpec } from '@/schemas/nodeDefSchema'
+import { useLitegraphService } from '@/services/litegraphService'
+import { app } from '@/scripts/app'
+import type { ComfyApp } from '@/scripts/app'
+
+function dynamicComboWidget(
+  node: LGraphNode,
+  inputName: string,
+  untypedInputData: InputSpec,
+  appArg: ComfyApp,
+  widgetName?: string
+) {
+  const { addNodeInput } = useLitegraphService()
+  const parseResult = zDynamicComboInputSpec.safeParse(untypedInputData)
+  if (!parseResult.success) throw new Error('invalid DynamicCombo spec')
+  const inputData = parseResult.data
+  const options = Object.fromEntries(
+    inputData[1].options.map(({ key, inputs }) => [key, inputs])
+  )
+  const subSpec: ComboInputSpec = [Object.keys(options), {}]
+  const { widget, minWidth, minHeight } = app.widgets['COMBO'](
+    node,
+    inputName,
+    subSpec,
+    appArg,
+    widgetName
+  )
+  let currentDynamicNames: string[] = []
+  const updateWidgets = (value?: string) => {
+    if (!node.widgets) throw new Error('Not Reachable')
+    const newSpec = value ? options[value] : undefined
+    //TODO: Calculate intersection for widgets that persist across options
+    //This would potentially allow links to be retained
+    for (const name of currentDynamicNames) {
+      const inputIndex = node.inputs.findIndex((input) => input.name === name)
+      if (inputIndex !== -1) node.removeInput(inputIndex)
+      const widgetIndex = node.widgets.findIndex(
+        (widget) => widget.name === name
+      )
+      if (widgetIndex === -1) continue
+      node.widgets[widgetIndex].value = undefined
+      node.widgets.splice(widgetIndex, 1)
+    }
+    currentDynamicNames = []
+    if (!newSpec) return
+
+    const insertionPoint = node.widgets.findIndex((w) => w === widget) + 1
+    const startingLength = node.widgets.length
+    const inputInsertionPoint =
+      node.inputs.findIndex((i) => i.name === widget.name) + 1
+    const startingInputLength = node.inputs.length
+    if (insertionPoint === 0)
+      throw new Error("Dynamic widget doesn't exist on node")
+    const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
+      [newSpec.required, false],
+      [newSpec.optional, true]
+    ]
+    for (const [inputType, isOptional] of inputTypes)
+      for (const name in inputType ?? {}) {
+        addNodeInput(
+          node,
+          transformInputSpecV1ToV2(inputType![name], {
+            name,
+            isOptional
+          })
+        )
+        currentDynamicNames.push(name)
+      }
+
+    const addedWidgets = node.widgets.splice(startingLength)
+    node.widgets.splice(insertionPoint, 0, ...addedWidgets)
+    if (inputInsertionPoint === 0) {
+      if (
+        addedWidgets.length === 0 &&
+        node.inputs.length !== startingInputLength
+      )
+        //input is inputOnly, but lacks an insertion point
+        throw new Error('Failed to find input socket for ' + widget.name)
+      return
+    }
+    const addedInputs = node
+      .spliceInputs(startingInputLength)
+      .map((addedInput) => {
+        const existingInput = node.inputs.findIndex(
+          (existingInput) => addedInput.name === existingInput.name
+        )
+        return existingInput === -1
+          ? addedInput
+          : node.spliceInputs(existingInput, 1)[0]
+      })
+    //assume existing inputs are in correct order
+    node.spliceInputs(inputInsertionPoint, 0, ...addedInputs)
+    node.size[1] = node.computeSize([...node.size])[1]
+  }
+  //A little hacky, but onConfigure won't work.
+  //It fires too late and is overly disruptive
+  let widgetValue = widget.value
+  Object.defineProperty(widget, 'value', {
+    get() {
+      return widgetValue
+    },
+    set(value) {
+      widgetValue = value
+      updateWidgets(value)
+    }
+  })
+  widget.value = widgetValue
+  return { widget, minWidth, minHeight }
+}
+
+export const dynamicWidgets = { COMFY_DYNAMICCOMBO_V3: dynamicComboWidget }

src/extensions/core/maskeditor.ts

@@ -5,10 +5,9 @@ import { app } from '@/scripts/app'
 import { ComfyApp } from '@/scripts/app'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
-import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
 import { MaskEditorDialogOld } from './maskEditorOld'
 import { ClipspaceDialog } from './clipspace'
+import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 
 function openMaskEditor(node: LGraphNode): void {
   if (!node) {
@@ -26,32 +25,7 @@ function openMaskEditor(node: LGraphNode): void {
   )
 
   if (useNewEditor) {
-    // Use new refactored editor
-    useDialogStore().showDialog({
-      key: 'global-mask-editor',
-      headerComponent: TopBarHeader,
-      component: MaskEditorContent,
-      props: {
-        node
-      },
-      dialogComponentProps: {
-        style: 'width: 90vw; height: 90vh;',
-        modal: true,
-        maximizable: true,
-        closable: true,
-        pt: {
-          root: {
-            class: 'mask-editor-dialog flex flex-col'
-          },
-          content: {
-            class: 'flex flex-col min-h-0 flex-1 !p-0'
-          },
-          header: {
-            class: '!p-2'
-          }
-        }
-      }
-    })
+    useMaskEditor().openMaskEditor(node)
   } else {
     // Use old editor
     ComfyApp.copyToClipspace(node)

src/extensions/core/maskeditor/types.ts

@@ -61,5 +61,5 @@ export interface Brush {
   size: number
   opacity: number
   hardness: number
-  smoothingPrecision: number
+  stepSize: number
 }

src/extensions/core/previewAny.ts

@@ -17,10 +17,10 @@ useExtensionService().registerExtension({
       nodeType.prototype.onNodeCreated = function () {
         onNodeCreated ? onNodeCreated.apply(this, []) : undefined
 
-        const showValueWidget = ComfyWidgets['STRING'](
+        const showValueWidget = ComfyWidgets['MARKDOWN'](
           this,
           'preview',
-          ['STRING', { multiline: true }],
+          ['MARKDOWN', {}],
           app
         ).widget as DOMWidget<HTMLTextAreaElement, string>
 

src/lib/litegraph/src/LGraph.ts

@@ -79,7 +79,7 @@ export type {
   LGraphTriggerParam
 } from './types/graphTriggers'
 
-export type rendererType = 'LG' | 'Vue'
+export type RendererType = 'LG' | 'Vue'
 
 export interface LGraphState {
   lastGroupId: number
@@ -106,7 +106,7 @@ export interface LGraphExtra extends Dictionary<unknown> {
   reroutes?: SerialisableReroute[]
   linkExtensions?: { id: number; parentId: number | undefined }[]
   ds?: DragAndScaleState
-  workflowRendererVersion?: rendererType
+  workflowRendererVersion?: RendererType
 }
 
 export interface BaseLGraph {

src/lib/litegraph/src/LGraphCanvas.ts

@@ -1771,18 +1771,19 @@ export class LGraphCanvas
   }
 
   static onMenuNodeClone(
-    // @ts-expect-error - unused parameter
-    value: IContextMenuValue,
-    // @ts-expect-error - unused parameter
-    options: IContextMenuOptions,
-    // @ts-expect-error - unused parameter
-    e: MouseEvent,
-    // @ts-expect-error - unused parameter
-    menu: ContextMenu,
+    _value: IContextMenuValue,
+    _options: IContextMenuOptions,
+    _e: MouseEvent,
+    _menu: ContextMenu,
     node: LGraphNode
   ): void {
     const canvas = LGraphCanvas.active_canvas
-    const nodes = canvas.selectedItems.size ? canvas.selectedItems : [node]
+    const nodes = canvas.selectedItems.size ? [...canvas.selectedItems] : [node]
+    if (nodes.length) LGraphCanvas.cloneNodes(nodes)
+  }
+
+  static cloneNodes(nodes: Positionable[]) {
+    const canvas = LGraphCanvas.active_canvas
 
     // Find top-left-most boundary
     let offsetX = Infinity
@@ -1792,11 +1793,11 @@ export class LGraphCanvas
         throw new TypeError(
           'Invalid node encountered on clone.  `pos` was null.'
         )
-      if (item.pos[0] < offsetX) offsetX = item.pos[0]
-      if (item.pos[1] < offsetY) offsetY = item.pos[1]
+      offsetX = Math.min(offsetX, item.pos[0])
+      offsetY = Math.min(offsetY, item.pos[1])
     }
 
-    canvas._deserializeItems(canvas._serializeItems(nodes), {
+    return canvas._deserializeItems(canvas._serializeItems(nodes), {
       position: [offsetX + 5, offsetY + 5]
     })
   }

src/lib/litegraph/src/LGraphNode.ts

@@ -835,6 +835,9 @@ export class LGraphNode
       for (const w of this.widgets) {
         if (!w) continue
 
+        const input = this.inputs.find((i) => i.widget?.name === w.name)
+        if (input?.label) w.label = input.label
+
         if (
           w.options?.property &&
           this.properties[w.options.property] != undefined
@@ -845,15 +848,13 @@ export class LGraphNode
       }
 
       if (info.widgets_values) {
-        const widgetsWithValue = this.widgets.filter(
-          (w) => w.serialize !== false
+        const widgetsWithValue = this.widgets
+          .values()
+          .filter((w) => w.serialize !== false)
+          .filter((_w, idx) => idx < info.widgets_values!.length)
+        widgetsWithValue.forEach(
+          (widget, i) => (widget.value = info.widgets_values![i])
         )
-        for (let i = 0; i < info.widgets_values.length; ++i) {
-          const widget = widgetsWithValue[i]
-          if (widget) {
-            widget.value = info.widgets_values[i]
-          }
-        }
       }
     }
 
@@ -881,7 +882,7 @@ export class LGraphNode
 
     // special case for when there were errors
     if (this.constructor === LGraphNode && this.last_serialization)
-      return this.last_serialization
+      return { ...this.last_serialization, mode: o.mode, pos: o.pos }
 
     if (this.inputs)
       o.inputs = this.inputs.map((input) => inputAsSerialisable(input))
@@ -1649,6 +1650,19 @@ export class LGraphNode
     this.onInputRemoved?.(slot, slot_info[0])
     this.setDirtyCanvas(true, true)
   }
+  spliceInputs(
+    startIndex: number,
+    deleteCount = -1,
+    ...toAdd: INodeInputSlot[]
+  ): INodeInputSlot[] {
+    if (deleteCount < 0) return this.inputs.splice(startIndex)
+    const ret = this.inputs.splice(startIndex, deleteCount, ...toAdd)
+    this.inputs.slice(startIndex).forEach((input, index) => {
+      const link = input.link && this.graph?.links?.get(input.link)
+      if (link) link.target_slot = startIndex + index
+    })
+    return ret
+  }
 
   /**
    * computes the minimum size of a node according to its inputs and output slots

src/locales/ar/commands.json

@@ -281,10 +281,6 @@
     "label": "تبديل الشريط الجانبي لمكتبة العقد",
     "tooltip": "مكتبة العقد"
   },
-  "Workspace_ToggleSidebarTab_queue": {
-    "label": "تبديل الشريط الجانبي لقائمة الانتظار",
-    "tooltip": "قائمة الانتظار"
-  },
   "Workspace_ToggleSidebarTab_workflows": {
     "label": "تبديل الشريط الجانبي لسير العمل",
     "tooltip": "سير العمل"

src/locales/ar/main.json

@@ -1210,7 +1210,6 @@
     "Pin/Unpin Selected Nodes": "تثبيت/إلغاء تثبيت العقد المحددة",
     "Previous Opened Workflow": "سير العمل السابق المفتوح",
     "Publish": "نشر",
-    "Queue Panel": "لوحة الانتظار",
     "Queue Prompt": "قائمة انتظار التعليمات",
     "Queue Prompt (Front)": "قائمة انتظار التعليمات (أمامي)",
     "Queue Selected Output Nodes": "قائمة انتظار عقد المخرجات المحددة",
@@ -1670,18 +1669,6 @@
     },
     "openWorkflow": "فتح سير العمل من نظام الملفات المحلي",
     "queue": "قائمة الانتظار",
-    "queueTab": {
-      "backToAllTasks": "العودة إلى جميع المهام",
-      "clearPendingTasks": "مسح المهام المعلقة",
-      "containImagePreview": "ملء معاينة الصورة",
-      "coverImagePreview": "تكييف معاينة الصورة",
-      "filter": "تصفية النتائج",
-      "filters": {
-        "hideCached": "إخفاء المخزنة مؤقتًا",
-        "hideCanceled": "إخفاء الملغاة"
-      },
-      "showFlatList": "عرض القائمة المسطحة"
-    },
     "templates": "القوالب",
     "themeToggle": "تبديل المظهر",
     "workflowTab": {

src/locales/en/commands.json

@@ -284,10 +284,6 @@
     "label": "Toggle Node Library Sidebar",
     "tooltip": "Node Library"
   },
-  "Workspace_ToggleSidebarTab_queue": {
-    "label": "Toggle Queue Sidebar",
-    "tooltip": "Queue"
-  },
   "Workspace_ToggleSidebarTab_workflows": {
     "label": "Toggle Workflows Sidebar",
     "tooltip": "Workflows"