Merge branch 'main' into feat/vue-widget-registration

src/base/common/downloadUtil.test.ts

@@ -0,0 +1,199 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+
+let mockIsCloud = false
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud
+  }
+}))
+
+// Global stubs
+const createObjectURLSpy = vi
+  .spyOn(URL, 'createObjectURL')
+  .mockReturnValue('blob:mock-url')
+const revokeObjectURLSpy = vi
+  .spyOn(URL, 'revokeObjectURL')
+  .mockImplementation(() => {})
+
+describe('downloadUtil', () => {
+  let mockLink: HTMLAnchorElement
+  let fetchMock: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    mockIsCloud = false
+    fetchMock = vi.fn()
+    vi.stubGlobal('fetch', fetchMock)
+    createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
+    revokeObjectURLSpy.mockClear().mockImplementation(() => {})
+    // Create a mock anchor element
+    mockLink = {
+      href: '',
+      download: '',
+      click: vi.fn(),
+      style: { display: '' }
+    } as unknown as HTMLAnchorElement
+
+    // Spy on DOM methods
+    vi.spyOn(document, 'createElement').mockReturnValue(mockLink)
+    vi.spyOn(document.body, 'appendChild').mockImplementation(() => mockLink)
+    vi.spyOn(document.body, 'removeChild').mockImplementation(() => mockLink)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('downloadFile', () => {
+    it('should create and trigger download with basic URL', () => {
+      const testUrl = 'https://example.com/image.png'
+
+      downloadFile(testUrl)
+
+      expect(document.createElement).toHaveBeenCalledWith('a')
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('download.png') // Default filename
+      expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
+      expect(mockLink.click).toHaveBeenCalled()
+      expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should use custom filename when provided', () => {
+      const testUrl = 'https://example.com/image.png'
+      const customFilename = 'my-custom-image.png'
+
+      downloadFile(testUrl, customFilename)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe(customFilename)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should extract filename from URL query parameters', () => {
+      const testUrl =
+        'https://example.com/api/file?filename=extracted-image.jpg&other=param'
+
+      downloadFile(testUrl)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('extracted-image.jpg')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should use default filename when URL has no filename parameter', () => {
+      const testUrl = 'https://example.com/api/file?other=param'
+
+      downloadFile(testUrl)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('download.png')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should handle invalid URLs gracefully', () => {
+      const invalidUrl = 'not-a-valid-url'
+
+      downloadFile(invalidUrl)
+
+      expect(mockLink.href).toBe(invalidUrl)
+      expect(mockLink.download).toBe('download.png')
+      expect(mockLink.click).toHaveBeenCalled()
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should prefer custom filename over extracted filename', () => {
+      const testUrl =
+        'https://example.com/api/file?filename=extracted-image.jpg'
+      const customFilename = 'custom-override.png'
+
+      downloadFile(testUrl, customFilename)
+
+      expect(mockLink.download).toBe(customFilename)
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should handle URLs with empty filename parameter', () => {
+      const testUrl = 'https://example.com/api/file?filename='
+
+      downloadFile(testUrl)
+
+      expect(mockLink.download).toBe('download.png')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should handle relative URLs by using window.location.origin', () => {
+      const relativeUrl = '/api/file?filename=relative-image.png'
+
+      downloadFile(relativeUrl)
+
+      expect(mockLink.href).toBe(relativeUrl)
+      expect(mockLink.download).toBe('relative-image.png')
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('should clean up DOM elements after download', () => {
+      const testUrl = 'https://example.com/image.png'
+
+      downloadFile(testUrl)
+
+      // Verify the element was added and then removed
+      expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
+      expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('streams downloads via blob when running in cloud', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
+      const blob = new Blob(['test'])
+      const blobFn = vi.fn().mockResolvedValue(blob)
+      fetchMock.mockResolvedValue({
+        ok: true,
+        status: 200,
+        blob: blobFn
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
+      await blobPromise
+      await Promise.resolve()
+      expect(blobFn).toHaveBeenCalled()
+      expect(createObjectURLSpy).toHaveBeenCalledWith(blob)
+      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
+      expect(mockLink.click).toHaveBeenCalled()
+    })
+
+    it('logs an error when cloud fetch fails', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      fetchMock.mockResolvedValue({
+        ok: false,
+        status: 404,
+        blob: vi.fn()
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      await Promise.resolve()
+      expect(consoleSpy).toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+      consoleSpy.mockRestore()
+    })
+  })
+})

src/base/credits/comfyCredits.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  CREDITS_PER_USD,
+  COMFY_CREDIT_RATE_CENTS,
+  centsToCredits,
+  creditsToCents,
+  creditsToUsd,
+  formatCredits,
+  formatCreditsFromCents,
+  formatCreditsFromUsd,
+  formatUsd,
+  formatUsdFromCents,
+  usdToCents,
+  usdToCredits
+} from '@/base/credits/comfyCredits'
+
+describe('comfyCredits helpers', () => {
+  test('exposes the fixed conversion rate', () => {
+    expect(CREDITS_PER_USD).toBe(211)
+    expect(COMFY_CREDIT_RATE_CENTS).toBeCloseTo(2.11) // credits per cent
+  })
+
+  test('converts between USD and cents', () => {
+    expect(usdToCents(1.23)).toBe(123)
+    expect(formatUsdFromCents({ cents: 123, locale: 'en-US' })).toBe('1.23')
+  })
+
+  test('converts cents to credits and back', () => {
+    expect(centsToCredits(100)).toBe(211) // 100 cents = 211 credits
+    expect(creditsToCents(211)).toBe(100) // 211 credits = 100 cents
+  })
+
+  test('converts USD to credits and back', () => {
+    expect(usdToCredits(1)).toBe(211) // 1 USD = 211 credits
+    expect(creditsToUsd(211)).toBe(1) // 211 credits = 1 USD
+  })
+
+  test('formats credits and USD values using en-US locale', () => {
+    const locale = 'en-US'
+    expect(formatCredits({ value: 1234.567, locale })).toBe('1,234.57')
+    expect(formatCreditsFromCents({ cents: 100, locale })).toBe('211.00')
+    expect(formatCreditsFromUsd({ usd: 1, locale })).toBe('211.00')
+    expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
+  })
+})

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -22,29 +22,38 @@
         state-storage="local"
         @resizestart="onResizestart"
       >
+        <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
-          v-if="sidebarLocation === 'left' && !focusMode"
-          :class="
-            cn(
-              'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
-              sidebarPanelVisible && 'min-w-78'
-            )
+          v-if="
+            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
           "
-          :min-size="10"
+          :class="
+            sidebarLocation === 'left'
+              ? cn(
+                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  sidebarPanelVisible && 'min-w-78'
+                )
+              : 'bg-comfy-menu-bg pointer-events-auto'
+          "
+          :min-size="sidebarLocation === 'left' ? 10 : 15"
           :size="20"
-          :style="{
-            display:
-              sidebarPanelVisible && sidebarLocation === 'left'
-                ? 'flex'
-                : 'none'
-          }"
+          :style="firstPanelStyle"
+          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
+          :aria-label="
+            sidebarLocation === 'left' ? t('sideToolbar.sidebar') : undefined
+          "
         >
           <slot
-            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
+            v-if="sidebarLocation === 'left' && sidebarPanelVisible"
             name="side-bar-panel"
           />
+          <slot
+            v-else-if="sidebarLocation === 'right'"
+            name="right-side-panel"
+          />
         </SplitterPanel>
 
+        <!-- Main panel (always present) -->
         <SplitterPanel :size="80" class="flex flex-col">
           <slot name="topmenu" :sidebar-panel-visible />
 
@@ -73,38 +82,33 @@
           </Splitter>
         </SplitterPanel>
 
+        <!-- Last panel: properties when left, sidebar when right -->
         <SplitterPanel
-          v-if="sidebarLocation === 'right' && !focusMode"
-          :class="
-            cn(
-              'side-bar-panel pointer-events-auto',
-              sidebarPanelVisible && 'min-w-78'
-            )
+          v-if="
+            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
           "
-          :min-size="10"
+          :class="
+            sidebarLocation === 'right'
+              ? cn(
+                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  sidebarPanelVisible && 'min-w-78'
+                )
+              : 'bg-comfy-menu-bg pointer-events-auto'
+          "
+          :min-size="sidebarLocation === 'right' ? 10 : 15"
           :size="20"
-          :style="{
-            display:
-              sidebarPanelVisible && sidebarLocation === 'right'
-                ? 'flex'
-                : 'none'
-          }"
+          :style="lastPanelStyle"
+          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
+          :aria-label="
+            sidebarLocation === 'right' ? t('sideToolbar.sidebar') : undefined
+          "
         >
+          <slot v-if="sidebarLocation === 'left'" name="right-side-panel" />
           <slot
-            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
+            v-else-if="sidebarLocation === 'right' && sidebarPanelVisible"
             name="side-bar-panel"
           />
         </SplitterPanel>
-
-        <!-- Right Side Panel - independent of sidebar -->
-        <SplitterPanel
-          v-if="rightSidePanelVisible && !focusMode"
-          class="bg-comfy-menu-bg pointer-events-auto"
-          :min-size="15"
-          :size="20"
-        >
-          <slot name="right-side-panel" />
-        </SplitterPanel>
       </Splitter>
     </div>
   </div>
@@ -117,6 +121,7 @@ import Splitter from 'primevue/splitter'
 import type { SplitterResizeStartEvent } from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -128,6 +133,7 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const sidebarTabStore = useSidebarTabStore()
+const { t } = useI18n()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -159,12 +165,25 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
 }
 
 /*
- * Force refresh the splitter when right panel visibility changes to recalculate the width
+ * Force refresh the splitter when right panel visibility or sidebar location changes
+ * to recalculate the width and panel order
  */
 const splitterRefreshKey = computed(() => {
-  return rightSidePanelVisible.value
-    ? 'main-splitter-with-right-panel'
-    : 'main-splitter'
+  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
+})
+
+const firstPanelStyle = computed(() => {
+  if (sidebarLocation.value === 'left') {
+    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
+  }
+  return undefined
+})
+
+const lastPanelStyle = computed(() => {
+  if (sidebarLocation.value === 'right') {
+    return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
+  }
+  return undefined
 })
 </script>
 

src/components/MenuHamburger.vue

@@ -5,23 +5,23 @@
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
-      icon="pi pi-bars"
-      severity="secondary"
-      text
-      size="large"
+      variant="muted-textonly"
+      size="lg"
       :aria-label="$t('menu.showMenu')"
       aria-live="assertive"
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
-    />
+    >
+      <i class="pi pi-bars" />
+    </Button>
     <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { watchEffect } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/TopMenuSection.test.ts

@@ -0,0 +1,103 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import TopMenuSection from '@/components/TopMenuSection.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { isElectron } from '@/utils/envUtil'
+
+const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => {
+    return {
+      isLoggedIn: computed(() => mockData.isLoggedIn)
+    }
+  }
+}))
+
+vi.mock('@/utils/envUtil')
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    currentUser: null,
+    loading: false
+  }))
+}))
+
+function createWrapper() {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        sideToolbar: {
+          queueProgressOverlay: {
+            viewJobHistory: 'View job history',
+            expandCollapsedQueue: 'Expand collapsed queue'
+          }
+        }
+      }
+    }
+  })
+
+  return mount(TopMenuSection, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      stubs: {
+        SubgraphBreadcrumb: true,
+        QueueProgressOverlay: true,
+        CurrentUserButton: true,
+        LoginButton: true
+      },
+      directives: {
+        tooltip: () => {}
+      }
+    }
+  })
+}
+
+describe('TopMenuSection', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('authentication state', () => {
+    describe('when user is logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = true
+      })
+
+      it('should display CurrentUserButton and not display LoginButton', () => {
+        const wrapper = createWrapper()
+        expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
+        expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+      })
+    })
+
+    describe('when user is not logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = false
+      })
+
+      describe('on desktop platform', () => {
+        it('should display LoginButton and not display CurrentUserButton', () => {
+          vi.mocked(isElectron).mockReturnValue(true)
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+        })
+      })
+
+      describe('on web platform', () => {
+        it('should not display CurrentUserButton and not display LoginButton', () => {
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+        })
+      })
+    })
+  })
+})

src/components/TopMenuSection.vue

@@ -20,9 +20,14 @@
             variant="secondary"
             size="icon"
             :aria-label="t('menu.customNodesManager')"
+            class="relative"
             @click="openCustomNodeManager"
           >
             <i class="icon-[lucide--puzzle] size-4" />
+            <span
+              v-if="shouldShowRedDot"
+              class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
+            />
           </Button>
         </div>
 
@@ -49,13 +54,16 @@
             <i class="icon-[lucide--history] size-4" />
             <span
               v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
             >
               {{ queuedCount }}
             </span>
           </Button>
-          <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
-          <LoginButton v-else-if="isDesktop" />
+          <CurrentUserButton
+            v-if="isLoggedIn && !isIntegratedTabBar"
+            class="shrink-0"
+          />
+          <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
           <Button
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
@@ -91,14 +99,19 @@ import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/stores/queueStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
@@ -106,10 +119,19 @@ const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const isQueueOverlayExpanded = ref(false)
+const commandStore = useCommandStore()
 const queueStore = useQueueStore()
+const queueUIStore = useQueueUIStore()
+const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const releaseStore = useReleaseStore()
+const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
+const { shouldShowRedDot: shouldShowConflictRedDot } =
+  useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
+const isIntegratedTabBar = computed(
+  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
@@ -117,6 +139,12 @@ const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.customNodesManager'))
 )
 
+// Use either release red dot or conflict red dot
+const shouldShowRedDot = computed((): boolean => {
+  const releaseRedDot = showReleaseRedDot.value
+  return releaseRedDot || shouldShowConflictRedDot.value
+})
+
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>
@@ -133,7 +161,7 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
-  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
+  commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 
 const openCustomNodeManager = async () => {

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -22,12 +22,13 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :label="String(item.label ?? '')"
-          :icon="item.icon"
-          :severity="item.key === queueMode ? 'primary' : 'secondary'"
-          size="small"
-          text
-        />
+          :variant="item.key === queueMode ? 'primary' : 'secondary'"
+          size="sm"
+          class="w-full justify-start"
+        >
+          <i v-if="item.icon" :class="item.icon" />
+          {{ String(item.label ?? '') }}
+        </Button>
       </template>
     </SplitButton>
     <BatchCountEdit />
@@ -36,12 +37,12 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'

src/components/bottomPanel/BottomPanel.vue

@@ -46,21 +46,22 @@
           <div class="flex items-center gap-2">
             <Button
               v-if="isShortcutsTabActive"
-              :label="$t('shortcuts.manageShortcuts')"
-              icon="pi pi-cog"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
               @click="openKeybindingSettings"
-            />
+            >
+              <i class="pi pi-cog" />
+              {{ $t('shortcuts.manageShortcuts') }}
+            </Button>
             <Button
               class="justify-self-end"
-              icon="pi pi-times"
-              severity="secondary"
-              size="small"
-              text
+              variant="muted-textonly"
+              size="sm"
+              :aria-label="t('g.close')"
               @click="closeBottomPanel"
-            />
+            >
+              <i class="pi pi-times" />
+            </Button>
           </div>
         </div>
       </TabList>
@@ -79,7 +80,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Tab from 'primevue/tab'
 import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
@@ -88,6 +88,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock ShortcutsList component
+vi.mock('@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue', () => ({
+  default: {
+    name: 'ShortcutsList',
+    props: ['commands', 'subcategories', 'columns'],
+    template:
+      '<div class="shortcuts-list-mock">{{ commands.length }} commands</div>'
+  }
+}))
+
+// Mock command store
+const mockCommands: ComfyCommandImpl[] = [
+  {
+    id: 'Workflow.New',
+    label: 'New Workflow',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Node.Add',
+    label: 'Add Node',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Queue.Clear',
+    label: 'Clear Queue',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Other.Command',
+    label: 'Other Command',
+    category: 'view-controls',
+    function: vi.fn(),
+    icon: 'pi pi-test',
+    tooltip: 'Test tooltip',
+    menubarLabel: 'Other Command',
+    keybinding: null
+  } as ComfyCommandImpl
+]
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    commands: mockCommands
+  })
+}))
+
+describe('EssentialsPanel', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should render ShortcutsList with essentials commands', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    expect(shortcutsList.exists()).toBe(true)
+  })
+
+  it('should categorize commands into subcategories', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    const subcategories = shortcutsList.props('subcategories')
+
+    expect(subcategories).toHaveProperty('workflow')
+    expect(subcategories).toHaveProperty('node')
+    expect(subcategories).toHaveProperty('queue')
+
+    expect(subcategories.workflow).toContain(mockCommands[0])
+    expect(subcategories.node).toContain(mockCommands[1])
+    expect(subcategories.queue).toContain(mockCommands[2])
+  })
+})

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts

@@ -0,0 +1,164 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock vue-i18n
+const mockT = vi.fn((key: string) => {
+  const translations: Record<string, string> = {
+    'shortcuts.subcategories.workflow': 'Workflow',
+    'shortcuts.subcategories.node': 'Node',
+    'shortcuts.subcategories.queue': 'Queue',
+    'shortcuts.subcategories.view': 'View',
+    'shortcuts.subcategories.panelControls': 'Panel Controls',
+    'commands.Workflow_New.label': 'New Blank Workflow'
+  }
+  return translations[key] || key
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}))
+
+describe('ShortcutsList', () => {
+  const mockCommands: ComfyCommandImpl[] = [
+    {
+      id: 'Workflow.New',
+      label: 'New Workflow',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'n']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Node.Add',
+      label: 'Add Node',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Shift', 'a']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Queue.Clear',
+      label: 'Clear Queue',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'Shift', 'c']
+        }
+      }
+    } as ComfyCommandImpl
+  ]
+
+  const mockSubcategories = {
+    workflow: [mockCommands[0]],
+    node: [mockCommands[1]],
+    queue: [mockCommands[2]]
+  }
+
+  it('should render shortcuts organized by subcategories', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check that subcategories are rendered
+    expect(wrapper.text()).toContain('Workflow')
+    expect(wrapper.text()).toContain('Node')
+    expect(wrapper.text()).toContain('Queue')
+
+    // Check that commands are rendered
+    expect(wrapper.text()).toContain('New Blank Workflow')
+  })
+
+  it('should format keyboard shortcuts correctly', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check for formatted keys
+    expect(wrapper.text()).toContain('Ctrl')
+    expect(wrapper.text()).toContain('n')
+    expect(wrapper.text()).toContain('Shift')
+    expect(wrapper.text()).toContain('a')
+    expect(wrapper.text()).toContain('c')
+  })
+
+  it('should filter out commands without keybindings', () => {
+    const commandsWithoutKeybinding: ComfyCommandImpl[] = [
+      ...mockCommands,
+      {
+        id: 'No.Keybinding',
+        label: 'No Keybinding',
+        category: 'essentials',
+        keybinding: null
+      } as ComfyCommandImpl
+    ]
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: commandsWithoutKeybinding,
+        subcategories: {
+          ...mockSubcategories,
+          other: [commandsWithoutKeybinding[3]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).not.toContain('No Keybinding')
+  })
+
+  it('should handle special key formatting', () => {
+    const specialKeyCommand: ComfyCommandImpl = {
+      id: 'Special.Keys',
+      label: 'Special Keys',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Meta', 'ArrowUp', 'Enter', 'Escape', ' ']
+        }
+      }
+    } as ComfyCommandImpl
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: [specialKeyCommand],
+        subcategories: {
+          special: [specialKeyCommand]
+        }
+      }
+    })
+
+    const text = wrapper.text()
+    expect(text).toContain('Cmd') // Meta -> Cmd
+    expect(text).toContain('↑') // ArrowUp -> ↑
+    expect(text).toContain('↵') // Enter -> ↵
+    expect(text).toContain('Esc') // Escape -> Esc
+    expect(text).toContain('Space') // ' ' -> Space
+  })
+
+  it('should use fallback subcategory titles', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: {
+          unknown: [mockCommands[0]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('unknown')
+  })
+})

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -0,0 +1,219 @@
+import { createTestingPinia } from '@pinia/testing'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+
+// Mock xterm and related modules
+vi.mock('@xterm/xterm', () => ({
+  Terminal: vi.fn().mockImplementation(() => ({
+    open: vi.fn(),
+    dispose: vi.fn(),
+    onSelectionChange: vi.fn(() => {
+      // Return a disposable
+      return {
+        dispose: vi.fn()
+      }
+    }),
+    hasSelection: vi.fn(() => false),
+    getSelection: vi.fn(() => ''),
+    selectAll: vi.fn(),
+    clearSelection: vi.fn(),
+    loadAddon: vi.fn()
+  })),
+  IDisposable: vi.fn()
+}))
+
+vi.mock('@xterm/addon-fit', () => ({
+  FitAddon: vi.fn().mockImplementation(() => ({
+    fit: vi.fn(),
+    proposeDimensions: vi.fn(() => ({ rows: 24, cols: 80 }))
+  }))
+}))
+
+const mockTerminal = {
+  open: vi.fn(),
+  dispose: vi.fn(),
+  onSelectionChange: vi.fn(() => ({
+    dispose: vi.fn()
+  })),
+  hasSelection: vi.fn(() => false),
+  getSelection: vi.fn(() => ''),
+  selectAll: vi.fn(),
+  clearSelection: vi.fn()
+}
+
+vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
+  useTerminal: vi.fn(() => ({
+    terminal: mockTerminal,
+    useAutoSize: vi.fn(() => ({ resize: vi.fn() }))
+  }))
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => false),
+  electronAPI: vi.fn(() => null)
+}))
+
+// Mock clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: vi.fn().mockResolvedValue(undefined)
+  },
+  configurable: true
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      serverStart: {
+        copySelectionTooltip: 'Copy selection',
+        copyAllTooltip: 'Copy all'
+      }
+    }
+  }
+})
+
+const mountBaseTerminal = () => {
+  return mount(BaseTerminal, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn
+        }),
+        i18n
+      ],
+      stubs: {
+        Button: {
+          template: '<button v-bind="$attrs"><slot /></button>',
+          props: ['icon', 'severity', 'size']
+        }
+      }
+    }
+  })
+}
+
+describe('BaseTerminal', () => {
+  let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  it('emits created event on mount', () => {
+    wrapper = mountBaseTerminal()
+
+    expect(wrapper.emitted('created')).toBeTruthy()
+    expect(wrapper.emitted('created')![0]).toHaveLength(2)
+  })
+
+  it('emits unmounted event on unmount', () => {
+    wrapper = mountBaseTerminal()
+    wrapper.unmount()
+
+    expect(wrapper.emitted('unmounted')).toBeTruthy()
+  })
+
+  it('button exists and has correct initial state', async () => {
+    wrapper = mountBaseTerminal()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.exists()).toBe(true)
+
+    expect(button.classes()).toContain('opacity-0')
+    expect(button.classes()).toContain('pointer-events-none')
+  })
+
+  it('shows correct tooltip when no selection', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy all')
+  })
+
+  it('shows correct tooltip when selection exists', async () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    wrapper = mountBaseTerminal()
+
+    // Trigger the selection change callback that was registered during mount
+    expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
+    // Access the mock calls - TypeScript can't infer the mock structure dynamically
+    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
+      .calls[0][0]
+    selectionCallback()
+    await nextTick()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy selection')
+  })
+
+  it('copies selected text when selection exists', async () => {
+    const selectedText = 'selected text'
+    mockTerminal.hasSelection.mockReturnValue(true)
+    mockTerminal.getSelection.mockReturnValue(selectedText)
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).not.toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(selectedText)
+    expect(mockTerminal.clearSelection).not.toHaveBeenCalled()
+  })
+
+  it('copies all text when no selection exists', async () => {
+    const allText = 'all terminal content'
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection
+      .mockReturnValueOnce('') // First call returns empty (no selection)
+      .mockReturnValueOnce(allText) // Second call after selectAll returns all text
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(allText)
+    expect(mockTerminal.clearSelection).toHaveBeenCalled()
+  })
+
+  it('does not copy when no text available', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection.mockReturnValue('')
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+  })
+})

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -11,9 +11,8 @@
         value: tooltipText,
         showDelay: 300
       }"
-      icon="pi pi-copy"
-      severity="secondary"
-      size="small"
+      variant="secondary"
+      size="sm"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
           'opacity-0 pointer-events-none select-none': !isHovered
@@ -21,18 +20,20 @@
       "
       :aria-label="tooltipText"
       @click="handleCopy"
-    />
+    >
+      <i class="pi pi-copy" />
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
-import Button from 'primevue/button'
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'

src/components/button/IconGroup.vue

@@ -2,7 +2,8 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
+        backgroundClass
       )
     "
   >
@@ -12,4 +13,8 @@
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
+
+const { backgroundClass } = defineProps<{
+  backgroundClass?: string
+}>()
 </script>

src/components/common/BackgroundImageUpload.vue

@@ -7,20 +7,24 @@
     />
     <Button
       v-tooltip="$t('g.upload')"
-      :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
-      size="small"
+      variant="secondary"
+      size="sm"
+      :aria-label="$t('g.upload')"
       :disabled="isUploading"
       @click="triggerFileInput"
-    />
+    >
+      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
+    </Button>
     <Button
       v-tooltip="$t('g.clear')"
-      outlined
-      icon="pi pi-trash"
-      severity="danger"
-      size="small"
+      variant="destructive"
+      size="sm"
+      :aria-label="$t('g.clear')"
       :disabled="!modelValue"
       @click="clearImage"
-    />
+    >
+      <i class="pi pi-trash" />
+    </Button>
     <input
       ref="fileInput"
       type="file"
@@ -32,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 

src/components/common/CustomizationDialog.vue

@@ -27,24 +27,19 @@
       </div>
     </div>
     <template #footer>
-      <Button
-        :label="$t('g.reset')"
-        icon="pi pi-refresh"
-        class="p-button-text"
-        @click="resetCustomization"
-      />
-      <Button
-        :label="$t('g.confirm')"
-        icon="pi pi-check"
-        autofocus
-        @click="confirmCustomization"
-      />
+      <Button variant="textonly" @click="resetCustomization">
+        <i class="pi pi-refresh" />
+        {{ $t('g.reset') }}
+      </Button>
+      <Button autofocus @click="confirmCustomization">
+        <i class="pi pi-check" />
+        {{ $t('g.confirm') }}
+      </Button>
     </template>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
 import SelectButton from 'primevue/selectbutton'
@@ -52,6 +47,7 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ColorCustomizationSelector from '@/components/common/ColorCustomizationSelector.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const { t } = useI18n()

src/components/common/ElectronFileDownload.vue

@@ -16,20 +16,22 @@
         <Button
           v-if="status === null || status === 'error'"
           class="file-action-button"
-          :label="$t('g.download') + ' (' + fileSize + ')'"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
           :disabled="!!props.error"
-          icon="pi pi-download"
           @click="triggerDownload"
-        />
+        >
+          <i class="pi pi-download" />
+          {{ $t('g.download') + ' (' + fileSize + ')' }}
+        </Button>
         <Button
           v-if="(status === null || status === 'error') && !!props.url"
-          :label="$t('g.copyURL')"
-          size="small"
-          outlined
+          variant="secondary"
+          size="sm"
           @click="copyURL"
-        />
+        >
+          {{ $t('g.copyURL') }}
+        </Button>
       </div>
     </div>
     <div
@@ -49,44 +51,48 @@
         v-if="status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
         :disabled="!!props.error"
-        icon="pi pi-pause-circle"
         @click="triggerPauseDownload"
-      />
+      >
+        <i class="pi pi-pause-circle" />
+      </Button>
 
       <Button
         v-if="status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="secondary"
+        size="sm"
+        :aria-label="t('electronFileDownload.resume')"
         :disabled="!!props.error"
-        icon="pi pi-play-circle"
         @click="triggerResumeDownload"
-      />
+      >
+        <i class="pi pi-play-circle" />
+      </Button>
 
       <Button
         v-tooltip.top="t('electronFileDownload.cancel')"
         class="file-action-button"
-        size="small"
-        outlined
+        variant="destructive"
+        size="sm"
+        :aria-label="t('electronFileDownload.cancel')"
         :disabled="!!props.error"
-        icon="pi pi-times-circle"
-        severity="danger"
         @click="triggerCancelDownload"
-      />
+      >
+        <i class="pi pi-times-circle" />
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'

src/components/common/FileDownload.vue

@@ -22,31 +22,27 @@
     </div>
     <div>
       <Button
-        :label="$t('g.download') + ' (' + fileSize + ')'"
-        size="small"
-        outlined
+        variant="secondary"
         :disabled="!!props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
-      />
+      >
+        {{ $t('g.download') + ' (' + fileSize + ')' }}
+      </Button>
     </div>
     <div>
-      <Button
-        :label="$t('g.copyURL')"
-        size="small"
-        outlined
-        :disabled="!!props.error"
-        @click="copyURL"
-      />
+      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
+        {{ $t('g.copyURL') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { formatSize } from '@/utils/formatUtil'

src/components/common/FormImageUpload.vue

@@ -14,21 +14,20 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <Button
-          icon="pi pi-upload"
-          :label="$t('g.upload')"
-          size="small"
-          @click="triggerFileInput"
-        />
+        <Button size="sm" @click="triggerFileInput">
+          <i class="pi pi-upload" />
+          {{ $t('g.upload') }}
+        </Button>
         <Button
           v-if="modelValue"
           class="w-full"
-          outlined
-          icon="pi pi-trash"
-          severity="danger"
-          size="small"
+          variant="destructive"
+          size="sm"
+          :aria-label="$t('g.delete')"
           @click="clearImage"
-        />
+        >
+          <i class="pi pi-trash" />
+        </Button>
       </div>
     </div>
     <input
@@ -42,9 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 defineProps<{
   modelValue: string
 }>()

src/components/common/NoResultsPlaceholder.vue

@@ -10,10 +10,11 @@
           </p>
           <Button
             v-if="buttonLabel"
-            :label="buttonLabel"
-            class="p-button-text"
+            variant="textonly"
             @click="$emit('action')"
-          />
+          >
+            {{ buttonLabel }}
+          </Button>
         </div>
       </template>
     </Card>
@@ -21,9 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Card from 'primevue/card'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const props = defineProps<{
   class?: string
   icon?: string

src/components/common/StatusBadge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
+
+const { label, severity = 'default' } = defineProps<{
+  label: string
+  severity?: Severity
+}>()
+
+function badgeClasses(sev: Severity): string {
+  const baseClasses =
+    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
+
+  switch (sev) {
+    case 'danger':
+      return `${baseClasses} bg-destructive-background text-white`
+    case 'contrast':
+      return `${baseClasses} bg-base-foreground text-base-background`
+    case 'warn':
+      return `${baseClasses} bg-warning-background text-base-background`
+    case 'secondary':
+      return `${baseClasses} bg-secondary-background text-base-foreground`
+    default:
+      return `${baseClasses} bg-primary-background text-base-foreground`
+  }
+}
+</script>
+
+<template>
+  <span :class="badgeClasses(severity)">{{ label }}</span>
+</template>

src/components/common/TreeExplorerTreeNode.vue

@@ -28,7 +28,7 @@
       />
     </div>
     <div
-      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
       <slot name="actions" :node="props.node" />
     </div>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -175,6 +175,7 @@
           <!-- Actual Template Cards -->
           <CardContainer
             v-for="template in isLoading ? [] : displayTemplates"
+            v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
             size="compact"
@@ -405,6 +406,8 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
@@ -423,6 +426,30 @@ onMounted(() => {
   sessionStartTime.value = Date.now()
 })
 
+const systemStatsStore = useSystemStatsStore()
+
+const distributions = computed(() => {
+  // eslint-disable-next-line no-undef
+  switch (__DISTRIBUTION__) {
+    case 'cloud':
+      return [TemplateIncludeOnDistributionEnum.Cloud]
+    case 'localhost':
+      return [TemplateIncludeOnDistributionEnum.Local]
+    case 'desktop':
+    default:
+      if (systemStatsStore.systemStats?.system.os === 'darwin') {
+        return [
+          TemplateIncludeOnDistributionEnum.Desktop,
+          TemplateIncludeOnDistributionEnum.Mac
+        ]
+      }
+      return [
+        TemplateIncludeOnDistributionEnum.Desktop,
+        TemplateIncludeOnDistributionEnum.Windows
+      ]
+  }
+})
+
 // Wrap onClose to track session end
 const onClose = () => {
   if (isCloud) {
@@ -511,6 +538,9 @@ const allTemplates = computed(() => {
   return workflowTemplatesStore.enhancedTemplates
 })
 
+// Navigation
+const selectedNavItem = ref<string | null>('all')
+
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {
   if (!selectedNavItem.value) {
@@ -533,9 +563,40 @@ const {
   availableRunsOn,
   filteredCount,
   totalCount,
-  resetFilters
+  resetFilters,
+  loadFuseOptions
 } = useTemplateFiltering(navigationFilteredTemplates)
 
+/**
+ * Coordinates state between the selected navigation item and the sort order to
+ * create deterministic, predictable behavior.
+ * @param source The origin of the change ('nav' or 'sort').
+ */
+const coordinateNavAndSort = (source: 'nav' | 'sort') => {
+  const isPopularNav = selectedNavItem.value === 'popular'
+  const isPopularSort = sortBy.value === 'popular'
+
+  if (source === 'nav') {
+    if (isPopularNav && !isPopularSort) {
+      // When navigating to 'Popular' category, automatically set sort to 'Popular'.
+      sortBy.value = 'popular'
+    } else if (!isPopularNav && isPopularSort) {
+      // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
+      sortBy.value = 'default'
+    }
+  } else if (source === 'sort') {
+    // When sort is changed away from 'Popular' while in the 'Popular' category,
+    // reset the category to 'All Templates' to avoid a confusing state.
+    if (isPopularNav && !isPopularSort) {
+      selectedNavItem.value = 'all'
+    }
+  }
+}
+
+// Watch for changes from the two sources ('nav' and 'sort') and trigger the coordinator.
+watch(selectedNavItem, () => coordinateNavAndSort('nav'))
+watch(sortBy, () => coordinateNavAndSort('sort'))
+
 // Convert between string array and object array for MultiSelect component
 const selectedModelObjects = computed({
   get() {
@@ -578,9 +639,6 @@ const cardRefs = ref<HTMLElement[]>([])
 // Force re-render key for templates when sorting changes
 const templateListKey = ref(0)
 
-// Navigation
-const selectedNavItem = ref<string | null>('all')
-
 // Search text for model filter
 const modelSearchText = ref<string>('')
 
@@ -645,11 +703,19 @@ const runsOnFilterLabel = computed(() => {
 
 // Sort options
 const sortOptions = computed(() => [
-  { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
   {
     name: t('templateWorkflows.sort.default', 'Default'),
     value: 'default'
   },
+  {
+    name: t('templateWorkflows.sort.recommended', 'Recommended'),
+    value: 'recommended'
+  },
+  {
+    name: t('templateWorkflows.sort.popular', 'Popular'),
+    value: 'popular'
+  },
+  { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
   {
     name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Usage (Low to High)'),
     value: 'vram-low-to-high'
@@ -750,10 +816,10 @@ const pageTitle = computed(() => {
 // Initialize templates loading with useAsyncState
 const { isLoading } = useAsyncState(
   async () => {
-    // Run both operations in parallel for better performance
     await Promise.all([
       loadTemplates(),
-      workflowTemplatesStore.loadWorkflowTemplates()
+      workflowTemplatesStore.loadWorkflowTemplates(),
+      loadFuseOptions()
     ])
     return true
   },
@@ -763,6 +829,14 @@ const { isLoading } = useAsyncState(
   }
 )
 
+const isTemplateVisibleOnDistribution = (template: TemplateInfo) => {
+  return (template.includeOnDistributions?.length ?? 0) > 0
+    ? distributions.value.some((d) =>
+        template.includeOnDistributions?.includes(d)
+      )
+    : true
+}
+
 onBeforeUnmount(() => {
   cardRefs.value = [] // Release DOM refs
 })

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -11,24 +11,25 @@
     <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex items-center justify-between">
-      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
+      <Button variant="textonly" @click="handleLearnMoreClick">
+        {{ t('g.learnMore') }}
+      </Button>
       <div class="flex gap-2">
-        <Button
-          :label="t('g.cancel')"
-          outlined
-          severity="secondary"
-          @click="onCancel?.()"
-        />
-        <Button :label="t('g.login')" @click="onLogin?.()" />
+        <Button variant="secondary" @click="onCancel?.()">
+          {{ t('g.cancel') }}
+        </Button>
+        <Button @click="onLogin?.()">
+          {{ t('g.login') }}
+        </Button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
 
 const { t } = useI18n()

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -31,69 +31,64 @@
         }}</label>
       </div>
 
-      <Button
-        :label="$t('g.cancel')"
-        icon="pi pi-undo"
-        severity="secondary"
-        autofocus
-        @click="onCancel"
-      />
-      <Button
-        v-if="type === 'default'"
-        :label="$t('g.confirm')"
-        severity="primary"
-        icon="pi pi-check"
-        @click="onConfirm"
-      />
+      <Button variant="secondary" autofocus @click="onCancel">
+        <i class="pi pi-undo" />
+        {{ $t('g.cancel') }}
+      </Button>
+      <Button v-if="type === 'default'" variant="primary" @click="onConfirm">
+        <i class="pi pi-check" />
+        {{ $t('g.confirm') }}
+      </Button>
       <Button
         v-else-if="type === 'delete'"
-        :label="$t('g.delete')"
-        severity="danger"
-        icon="pi pi-trash"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-trash" />
+        {{ $t('g.delete') }}
+      </Button>
       <Button
         v-else-if="type === 'overwrite' || type === 'overwriteBlueprint'"
-        :label="$t('g.overwrite')"
-        severity="warn"
-        icon="pi pi-save"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-save" />
+        {{ $t('g.overwrite') }}
+      </Button>
       <template v-else-if="type === 'dirtyClose'">
-        <Button
-          :label="$t('g.no')"
-          severity="secondary"
-          icon="pi pi-times"
-          @click="onDeny"
-        />
-        <Button :label="$t('g.save')" icon="pi pi-save" @click="onConfirm" />
+        <Button variant="secondary" @click="onDeny">
+          <i class="pi pi-times" />
+          {{ $t('g.no') }}
+        </Button>
+        <Button @click="onConfirm">
+          <i class="pi pi-save" />
+          {{ $t('g.save') }}
+        </Button>
       </template>
       <Button
         v-else-if="type === 'reinstall'"
-        :label="$t('desktopMenu.reinstall')"
-        severity="warn"
-        icon="pi pi-eraser"
+        variant="destructive"
         @click="onConfirm"
-      />
+      >
+        <i class="pi pi-eraser" />
+        {{ $t('desktopMenu.reinstall') }}
+      </Button>
       <!-- Invalid - just show a close button. -->
-      <Button
-        v-else
-        :label="$t('g.close')"
-        severity="primary"
-        icon="pi pi-times"
-        @click="onCancel"
-      />
+      <Button v-else variant="primary" @click="onCancel">
+        <i class="pi pi-times" />
+        {{ $t('g.close') }}
+      </Button>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/dialog/content/ErrorDialogContent.vue

@@ -14,18 +14,16 @@
     </template>
 
     <div class="flex justify-center gap-2">
+      <Button v-show="!reportOpen" variant="textonly" @click="showReport">
+        {{ $t('g.showReport') }}
+      </Button>
       <Button
         v-show="!reportOpen"
-        text
-        :label="$t('g.showReport')"
-        @click="showReport"
-      />
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
+        variant="textonly"
         @click="showContactSupport"
-      />
+      >
+        {{ $t('issueReport.helpFix') }}
+      </Button>
     </div>
     <template v-if="reportOpen">
       <Divider />
@@ -40,18 +38,15 @@
         :repo-owner="repoOwner"
         :repo-name="repoName"
       />
-      <Button
-        v-if="reportOpen"
-        :label="$t('g.copyToClipboard')"
-        icon="pi pi-copy"
-        @click="copyReportToClipboard"
-      />
+      <Button v-if="reportOpen" @click="copyReportToClipboard">
+        <i class="pi pi-copy" />
+        {{ $t('g.copyToClipboard') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
 import { useToast } from 'primevue/usetoast'
@@ -60,6 +55,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'

src/components/dialog/content/MissingCoreNodesMessage.test.ts

@@ -0,0 +1,199 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Message from 'primevue/message'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+// Mock the stores
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: vi.fn()
+}))
+
+const createMockNode = (type: string, version?: string): LGraphNode =>
+  // @ts-expect-error - Creating a partial mock of LGraphNode for testing purposes.
+  // We only need specific properties for our tests, not the full LGraphNode interface.
+  ({
+    type,
+    properties: { cnr_id: 'comfy-core', ver: version },
+    id: 1,
+    title: type,
+    pos: [0, 0],
+    size: [100, 100],
+    flags: {},
+    graph: null,
+    mode: 0,
+    inputs: [],
+    outputs: []
+  })
+
+describe('MissingCoreNodesMessage', () => {
+  const mockSystemStatsStore = {
+    systemStats: null as { system?: { comfyui_version?: string } } | null,
+    refetchSystemStats: vi.fn()
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset the mock store state
+    mockSystemStatsStore.systemStats = null
+    mockSystemStatsStore.refetchSystemStats = vi.fn()
+    // @ts-expect-error - Mocking the return value of useSystemStatsStore for testing.
+    // The actual store has more properties, but we only need these for our tests.
+    useSystemStatsStore.mockReturnValue(mockSystemStatsStore)
+  })
+
+  const mountComponent = (props = {}) => {
+    return mount(MissingCoreNodesMessage, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Message },
+        mocks: {
+          $t: (key: string, params?: { version?: string }) => {
+            const translations: Record<string, string> = {
+              'loadWorkflowWarning.outdatedVersion': `Some nodes require a newer version of ComfyUI (current: ${params?.version}). Please update to use all nodes.`,
+              'loadWorkflowWarning.outdatedVersionGeneric':
+                'Some nodes require a newer version of ComfyUI. Please update to use all nodes.',
+              'loadWorkflowWarning.coreNodesFromVersion': `Requires ComfyUI ${params?.version}:`
+            }
+            return translations[key] || key
+          }
+        }
+      },
+      props: {
+        missingCoreNodes: {},
+        ...props
+      }
+    })
+  }
+
+  it('does not render when there are no missing core nodes', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.findComponent(Message).exists()).toBe(false)
+  })
+
+  it('renders message when there are missing core nodes', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    expect(wrapper.findComponent(Message).exists()).toBe(true)
+  })
+
+  it('displays current ComfyUI version when available', async () => {
+    // Set systemStats directly (store auto-fetches with useAsyncState)
+    mockSystemStatsStore.systemStats = {
+      system: { comfyui_version: '1.0.0' }
+    }
+
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+
+    // Wait for component to render
+    await nextTick()
+
+    // No need to check if fetchSystemStats was called since useAsyncState auto-fetches
+    expect(wrapper.text()).toContain(
+      'Some nodes require a newer version of ComfyUI (current: 1.0.0)'
+    )
+  })
+
+  it('displays generic message when version is unavailable', async () => {
+    // No systemStats set - version unavailable
+    mockSystemStatsStore.systemStats = null
+
+    const missingCoreNodes = {
+      '1.2.0': [createMockNode('TestNode', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+
+    // Wait for the async operations to complete
+    await nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await nextTick()
+
+    expect(wrapper.text()).toContain(
+      'Some nodes require a newer version of ComfyUI. Please update to use all nodes.'
+    )
+  })
+
+  it('groups nodes by version and displays them', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [
+        createMockNode('NodeA', '1.2.0'),
+        createMockNode('NodeB', '1.2.0')
+      ],
+      '1.3.0': [createMockNode('NodeC', '1.3.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    expect(text).toContain('Requires ComfyUI 1.3.0:')
+    expect(text).toContain('NodeC')
+    expect(text).toContain('Requires ComfyUI 1.2.0:')
+    expect(text).toContain('NodeA, NodeB')
+  })
+
+  it('sorts versions in descending order', async () => {
+    const missingCoreNodes = {
+      '1.1.0': [createMockNode('Node1', '1.1.0')],
+      '1.3.0': [createMockNode('Node3', '1.3.0')],
+      '1.2.0': [createMockNode('Node2', '1.2.0')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    const version13Index = text.indexOf('1.3.0')
+    const version12Index = text.indexOf('1.2.0')
+    const version11Index = text.indexOf('1.1.0')
+
+    expect(version13Index).toBeLessThan(version12Index)
+    expect(version12Index).toBeLessThan(version11Index)
+  })
+
+  it('removes duplicate node names within the same version', async () => {
+    const missingCoreNodes = {
+      '1.2.0': [
+        createMockNode('DuplicateNode', '1.2.0'),
+        createMockNode('DuplicateNode', '1.2.0'),
+        createMockNode('UniqueNode', '1.2.0')
+      ]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    const text = wrapper.text()
+    // Should only appear once in the sorted list
+    expect(text).toContain('DuplicateNode, UniqueNode')
+    // Count occurrences of 'DuplicateNode' - should be only 1
+    const matches = text.match(/DuplicateNode/g) || []
+    expect(matches.length).toBe(1)
+  })
+
+  it('handles nodes with missing version info', async () => {
+    const missingCoreNodes = {
+      '': [createMockNode('NoVersionNode')]
+    }
+
+    const wrapper = mountComponent({ missingCoreNodes })
+    await nextTick()
+
+    expect(wrapper.text()).toContain('Requires ComfyUI unknown:')
+    expect(wrapper.text()).toContain('NoVersionNode')
+  })
+})

src/components/dialog/content/MissingNodesFooter.vue

@@ -22,7 +22,7 @@
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" size="sm" @click="openManager">{{
+    <Button variant="textonly" @click="openManager">{{
       $t('g.openManager')
     }}</Button>
     <PackInstallButton

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-full items-center justify-between p-4">
     <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
+      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
       <p class="m-0 text-sm">
         {{
           isCloud

src/components/dialog/content/PromptDialogContent.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SignInContent.vue

@@ -51,8 +51,7 @@
           <Button
             type="button"
             class="h-10"
-            severity="secondary"
-            outlined
+            variant="secondary"
             @click="signInWithGoogle"
           >
             <i class="pi pi-google mr-2"></i>
@@ -66,8 +65,7 @@
           <Button
             type="button"
             class="h-10"
-            severity="secondary"
-            outlined
+            variant="secondary"
             @click="signInWithGithub"
           >
             <i class="pi pi-github mr-2"></i>
@@ -82,8 +80,7 @@
         <Button
           type="button"
           class="h-10"
-          severity="secondary"
-          outlined
+          variant="secondary"
           @click="showApiKeyForm = true"
         >
           <img
@@ -142,12 +139,12 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,132 +1,260 @@
 <template>
-  <div class="flex w-112 flex-col gap-8 p-8">
+  <div
+    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
     <!-- Header -->
-    <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-base-foreground m-0">
+    <div class="flex py-8 items-center justify-between px-8">
+      <h2 class="text-lg font-bold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
             : $t('credits.topUp.addMoreCredits')
         }}
-      </h1>
-      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0 w-96">
-          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
-        </p>
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        @click="() => handleClose()"
+      >
+        <i class="icon-[lucide--x] size-6" />
+      </button>
+    </div>
+    <p
+      v-if="isInsufficientCredits"
+      class="text-sm text-muted-foreground m-0 px-8"
+    >
+      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+    </p>
+
+    <!-- Preset amount buttons -->
+    <div class="px-8">
+      <h3 class="m-0 text-sm font-normal text-muted-foreground">
+        {{ $t('credits.topUp.selectAmount') }}
+      </h3>
+      <div class="flex gap-2 pt-3">
+        <Button
+          v-for="amount in PRESET_AMOUNTS"
+          :key="amount"
+          :autofocus="amount === 50"
+          variant="secondary"
+          size="lg"
+          :class="
+            cn(
+              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              selectedPreset === amount && 'bg-secondary-background-selected'
+            )
+          "
+          @click="handlePresetClick(amount)"
+        >
+          ${{ amount }}
+        </Button>
       </div>
-      <div v-else class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0">
-          {{ $t('credits.topUp.creditsDescription') }}
-        </p>
+    </div>
+    <!-- Amount (USD) / Credits -->
+    <div class="flex gap-2 px-8 pt-8">
+      <!-- You Pay -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youPay') }}
+        </div>
+        <FormattedNumberStepper
+          :model-value="payAmount"
+          :min="0"
+          :max="MAX_AMOUNT"
+          :step="getStepAmount"
+          @update:model-value="handlePayAmountChange"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <span class="shrink-0 text-base font-semibold text-base-foreground"
+              >$</span
+            >
+          </template>
+        </FormattedNumberStepper>
+      </div>
+
+      <!-- You Get -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youGet') }}
+        </div>
+        <FormattedNumberStepper
+          v-model="creditsModel"
+          :min="0"
+          :max="usdToCredits(MAX_AMOUNT)"
+          :step="getCreditsStepAmount"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
+          </template>
+        </FormattedNumberStepper>
       </div>
     </div>
 
-    <!-- Current Balance Section -->
-    <div class="flex flex-col gap-4">
-      <div class="flex items-baseline gap-2">
-        <UserCredit text-class="text-3xl font-bold" show-credits-only />
-        <span class="text-sm text-muted-foreground">{{
-          $t('credits.creditsAvailable')
-        }}</span>
-      </div>
-      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
-        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
+    <!-- Warnings -->
+
+    <p
+      v-if="isBelowMin"
+      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.minRequired', {
+          credits: formatNumber(usdToCredits(MIN_AMOUNT))
+        })
+      }}
+    </p>
+    <p
+      v-if="showCeilingWarning"
+      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.maxAllowed', {
+          credits: formatNumber(usdToCredits(MAX_AMOUNT))
+        })
+      }}
+      <span>{{ $t('credits.topUp.needMore') }}</span>
+      <a
+        href="https://www.comfy.org/cloud/enterprise"
+        target="_blank"
+        class="ml-1 text-inherit"
+        >{{ $t('credits.topUp.contactUs') }}</a
+      >
+    </p>
+
+    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+      <Button
+        :disabled="!isValidAmount || loading"
+        :loading="loading"
+        variant="primary"
+        size="lg"
+        class="h-10 justify-center"
+        @click="handleBuy"
+      >
+        {{ $t('credits.topUp.buyCredits') }}
+      </Button>
+      <div class="flex items-center justify-center gap-1">
+        <a
+          :href="pricingUrl"
+          target="_blank"
+          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
+        >
+          {{ $t('credits.topUp.viewPricing') }}
+          <i class="icon-[lucide--external-link] size-4" />
+        </a>
       </div>
     </div>
-
-    <!-- Credit Options Section -->
-    <div class="flex flex-col gap-4">
-      <span class="text-sm text-muted-foreground">
-        {{ $t('credits.topUp.howManyCredits') }}
-      </span>
-      <div class="flex flex-col gap-2">
-        <CreditTopUpOption
-          v-for="option in creditOptions"
-          :key="option.credits"
-          :credits="option.credits"
-          :description="option.description"
-          :selected="selectedCredits === option.credits"
-          @select="selectedCredits = option.credits"
-        />
-      </div>
-      <div class="text-xs text-muted-foreground w-96">
-        {{ $t('credits.topUp.templateNote') }}
-      </div>
-    </div>
-
-    <!-- Buy Button -->
-    <Button
-      :disabled="!selectedCredits || loading"
-      :loading="loading"
-      severity="primary"
-      :label="$t('credits.topUp.buy')"
-      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
-      :pt="{ label: { class: 'text-primary-foreground' } }"
-      @click="handleBuy"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { creditsToUsd } from '@/base/credits/comfyCredits'
-import UserCredit from '@/components/common/UserCredit.vue'
+import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
+import Button from '@/components/ui/button/Button.vue'
+import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useTelemetry } from '@/platform/telemetry'
-
-import CreditTopUpOption from './credit/CreditTopUpOption.vue'
-
-interface CreditOption {
-  credits: number
-  description: string
-}
+import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+import { cn } from '@/utils/tailwindUtil'
 
 const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
 }>()
 
-const { formattedRenewalDate } = useSubscription()
-
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
+const dialogStore = useDialogStore()
+const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
+const { buildDocsUrl, docsPaths } = useExternalLink()
 
-const selectedCredits = ref<number | null>(null)
+// Constants
+const PRESET_AMOUNTS = [10, 25, 50, 100]
+const MIN_AMOUNT = 5
+const MAX_AMOUNT = 10000
+
+// State
+const selectedPreset = ref<number | null>(50)
+const payAmount = ref(50)
+const showCeilingWarning = ref(false)
 const loading = ref(false)
 
-const creditOptions: CreditOption[] = [
-  {
-    credits: 1055, // $5.00
-    description: t('credits.topUp.videosEstimate', { count: 41 })
-  },
-  {
-    credits: 2110, // $10.00
-    description: t('credits.topUp.videosEstimate', { count: 82 })
-  },
-  {
-    credits: 4220, // $20.00
-    description: t('credits.topUp.videosEstimate', { count: 184 })
-  },
-  {
-    credits: 10550, // $50.00
-    description: t('credits.topUp.videosEstimate', { count: 412 })
-  }
-]
+// Computed
+const pricingUrl = computed(() =>
+  buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true })
+)
 
-const handleBuy = async () => {
-  if (!selectedCredits.value) return
+const creditsModel = computed({
+  get: () => usdToCredits(payAmount.value),
+  set: (newCredits: number) => {
+    payAmount.value = Math.round(creditsToUsd(newCredits))
+    selectedPreset.value = null
+  }
+})
+
+const isValidAmount = computed(
+  () => payAmount.value >= MIN_AMOUNT && payAmount.value <= MAX_AMOUNT
+)
+
+const isBelowMin = computed(() => payAmount.value < MIN_AMOUNT)
+
+// Utility functions
+function formatNumber(num: number): string {
+  return num.toLocaleString('en-US')
+}
+
+// Step amount functions
+function getStepAmount(currentAmount: number): number {
+  if (currentAmount < 100) return 5
+  if (currentAmount < 1000) return 50
+  return 100
+}
+
+function getCreditsStepAmount(currentCredits: number): number {
+  const usdAmount = creditsToUsd(currentCredits)
+  return usdToCredits(getStepAmount(usdAmount))
+}
+
+// Event handlers
+function handlePayAmountChange(value: number) {
+  payAmount.value = value
+  selectedPreset.value = null
+  showCeilingWarning.value = false
+}
+
+function handlePresetClick(amount: number) {
+  showCeilingWarning.value = false
+  payAmount.value = amount
+  selectedPreset.value = amount
+}
+
+function handleClose(clearTracking = true) {
+  if (clearTracking) {
+    clearTopupTracking()
+  }
+  dialogStore.closeDialog({ key: 'top-up-credits' })
+}
+
+async function handleBuy() {
+  // Prevent double-clicks
+  if (loading.value || !isValidAmount.value) return
 
   loading.value = true
   try {
-    const usdAmount = creditsToUsd(selectedCredits.value)
-    telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
-    await authActions.purchaseCredits(usdAmount)
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
+    await authActions.purchaseCredits(payAmount.value)
+
+    // Close top-up dialog (keep tracking) and open subscription panel to show updated credits
+    handleClose(false)
+    dialogService.showSettingsDialog('subscription')
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/dialog/content/UpdatePasswordContent.vue

@@ -7,12 +7,9 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <Button
-      type="submit"
-      :label="$t('userSettings.updatePassword')"
-      class="mt-4 h-10 font-medium"
-      :loading="loading"
-    />
+    <Button type="submit" class="mt-4 h-10 font-medium" :loading="loading">
+      {{ $t('userSettings.updatePassword') }}
+    </Button>
   </Form>
 </template>
 
@@ -20,10 +17,10 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
 import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { updatePasswordSchema } from '@/schemas/signInSchema'
 

src/components/dialog/content/credit/CreditTopUpOption.test.ts

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it } from 'vitest'
+
+import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const mountOption = (
+  props?: Partial<{ credits: number; description: string; selected: boolean }>
+) =>
+  mount(CreditTopUpOption, {
+    props: {
+      credits: 1000,
+      description: '~100 videos*',
+      selected: false,
+      ...props
+    },
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('CreditTopUpOption', () => {
+  it('renders credit amount and description', () => {
+    const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
+    expect(wrapper.text()).toContain('5,000')
+    expect(wrapper.text()).toContain('~500 videos*')
+  })
+
+  it('applies unselected styling when not selected', () => {
+    const wrapper = mountOption({ selected: false })
+    expect(wrapper.find('div').classes()).toContain(
+      'bg-component-node-disabled'
+    )
+    expect(wrapper.find('div').classes()).toContain('border-transparent')
+  })
+
+  it('emits select event when clicked', async () => {
+    const wrapper = mountOption()
+    await wrapper.find('div').trigger('click')
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+})

src/components/dialog/content/error/FindIssueButton.vue

@@ -1,16 +1,14 @@
 <template>
-  <Button
-    :label="$t('g.findIssues')"
-    severity="secondary"
-    icon="pi pi-github"
-    @click="openGitHubIssues"
-  />
+  <Button variant="secondary" @click="openGitHubIssues">
+    <i class="pi pi-github" />
+    {{ $t('g.findIssues') }}
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 
 const props = defineProps<{

src/components/dialog/content/setting/CurrentUserMessage.vue

@@ -10,15 +10,23 @@
       <div>
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
-      <Button icon="pi pi-sign-out" text @click="logout" />
+      <Button
+        class="text-inherit"
+        variant="textonly"
+        size="icon"
+        :aria-label="$t('menuLabels.Sign Out')"
+        @click="logout"
+      >
+        <i class="pi pi-sign-out" />
+      </Button>
     </div>
   </Message>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Message from 'primevue/message'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useUserStore } from '@/stores/userStore'
 
 const userStore = useUserStore()

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -23,24 +23,33 @@
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
             <Button
-              icon="pi pi-pencil"
-              class="p-button-text"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.edit')"
               @click="editKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-pencil" />
+            </Button>
             <Button
-              icon="pi pi-replay"
-              class="p-button-text p-button-warn"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.reset')"
               :disabled="
                 !keybindingStore.isCommandKeybindingModified(slotProps.data.id)
               "
               @click="resetKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-replay" />
+            </Button>
             <Button
-              icon="pi pi-trash"
-              class="p-button-text p-button-danger"
+              variant="textonly"
+              size="icon"
+              :aria-label="$t('g.delete')"
               :disabled="!slotProps.data.keybinding"
               @click="removeKeybinding(slotProps.data)"
-            />
+            >
+              <i class="pi pi-trash" />
+            </Button>
           </div>
         </template>
       </Column>
@@ -104,30 +113,31 @@
       </div>
       <template #footer>
         <Button
-          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
-          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
-          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
+          :variant="existingKeybindingOnCombo ? 'destructive' : 'primary'"
           autofocus
           @click="saveKeybinding"
-        />
+        >
+          <i
+            :class="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
+          />
+          {{ existingKeybindingOnCombo ? $t('g.overwrite') : $t('g.save') }}
+        </Button>
       </template>
     </Dialog>
     <Button
       v-tooltip="$t('g.resetAllKeybindingsTooltip')"
-      class="mt-4"
-      :label="$t('g.resetAll')"
-      icon="pi pi-replay"
-      severity="danger"
-      fluid
-      text
+      class="mt-4 w-full"
+      variant="destructive-textonly"
       @click="resetAllKeybindings"
-    />
+    >
+      <i class="pi pi-replay" />
+      {{ $t('g.resetAll') }}
+    </Button>
   </PanelTemplate>
 </template>
 
 <script setup lang="ts">
 import { FilterMatchMode } from '@primevue/core/api'
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
@@ -139,6 +149,7 @@ import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import {

src/components/dialog/content/setting/LegacyCreditsPanel.vue

@@ -17,10 +17,11 @@
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
             v-else-if="isActiveSubscription"
-            :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
-          />
+          >
+            {{ $t('credits.purchaseCredits') }}
+          </Button>
         </div>
         <div class="flex flex-row items-center">
           <Skeleton
@@ -33,25 +34,26 @@
             {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
           </div>
           <Button
-            icon="pi pi-refresh"
-            text
-            size="small"
-            severity="secondary"
+            variant="muted-textonly"
+            size="icon-sm"
+            :aria-label="$t('g.refresh')"
             @click="() => authActions.fetchBalance()"
-          />
+          >
+            <i class="pi pi-refresh" />
+          </Button>
         </div>
       </div>
 
       <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
-          :label="$t('credits.invoiceHistory')"
-          text
-          severity="secondary"
-          icon="pi pi-arrow-up-right"
+          variant="muted-textonly"
           :loading="loading"
           @click="handleCreditsHistoryClick"
-        />
+        >
+          <i class="pi pi-arrow-up-right" />
+          {{ $t('credits.invoiceHistory') }}
+        </Button>
       </div>
 
       <template v-if="creditHistory.length > 0">
@@ -86,34 +88,24 @@
       <UsageLogsTable ref="usageLogsTableRef" />
 
       <div class="flex flex-row gap-2">
-        <Button
-          :label="$t('credits.faqs')"
-          text
-          severity="secondary"
-          icon="pi pi-question-circle"
-          @click="handleFaqClick"
-        />
-        <Button
-          :label="$t('subscription.partnerNodesCredits')"
-          text
-          severity="secondary"
-          icon="pi pi-question-circle"
-          @click="handleOpenPartnerNodesInfo"
-        />
-        <Button
-          :label="$t('credits.messageSupport')"
-          text
-          severity="secondary"
-          icon="pi pi-comments"
-          @click="handleMessageSupport"
-        />
+        <Button variant="muted-textonly" @click="handleFaqClick">
+          <i class="pi pi-question-circle" />
+          {{ $t('credits.faqs') }}
+        </Button>
+        <Button variant="muted-textonly" @click="handleOpenPartnerNodesInfo">
+          <i class="pi pi-question-circle" />
+          {{ $t('subscription.partnerNodesCredits') }}
+        </Button>
+        <Button variant="muted-textonly" @click="handleMessageSupport">
+          <i class="pi pi-comments" />
+          {{ $t('credits.messageSupport') }}
+        </Button>
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
@@ -123,6 +115,7 @@ import { computed, ref, watch } from 'vue'
 
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import Badge from 'primevue/badge'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import Column from 'primevue/column'
 import PrimeVue from 'primevue/config'
 import DataTable from 'primevue/datatable'

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -78,9 +78,12 @@
                 }
               }
             }"
-            icon="pi pi-info-circle"
-            class="p-button-text p-button-sm"
-          />
+            variant="textonly"
+            size="icon-sm"
+            :aria-label="$t('credits.additionalInfo')"
+          >
+            <i class="pi pi-info-circle" />
+          </Button>
         </template>
       </Column>
     </DataTable>
@@ -89,13 +92,13 @@
 
 <script setup lang="ts">
 import Badge from 'primevue/badge'
-import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import {

src/components/dialog/content/setting/UserPanel.vue

@@ -44,11 +44,12 @@
                 value: $t('userSettings.updatePassword'),
                 showDelay: 300
               }"
-              icon="pi pi-pen-to-square"
-              severity="secondary"
-              text
+              variant="muted-textonly"
+              size="icon-sm"
               @click="dialogService.showUpdatePasswordDialog()"
-            />
+            >
+              <i class="pi pi-pen-to-square" />
+            </Button>
           </div>
         </div>
 
@@ -58,21 +59,18 @@
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
-          <Button
-            class="w-32"
-            severity="secondary"
-            :label="$t('auth.signOut.signOut')"
-            icon="pi pi-sign-out"
-            @click="handleSignOut"
-          />
+          <Button class="w-32" variant="secondary" @click="handleSignOut">
+            <i class="pi pi-sign-out" />
+            {{ $t('auth.signOut.signOut') }}
+          </Button>
           <Button
             v-if="!isApiKeyLogin"
             class="w-fit"
-            variant="text"
-            severity="danger"
-            :label="$t('auth.deleteAccount.deleteAccount')"
+            variant="destructive-textonly"
             @click="handleDeleteAccount"
-          />
+          >
+            {{ $t('auth.deleteAccount.deleteAccount') }}
+          </Button>
         </div>
       </div>
 
@@ -84,24 +82,25 @@
 
         <Button
           class="w-52"
-          severity="primary"
+          variant="primary"
           :loading="loading"
-          :label="$t('auth.login.signInOrSignUp')"
-          icon="pi pi-user"
           @click="handleSignIn"
-        />
+        >
+          <i class="pi pi-user" />
+          {{ $t('auth.login.signInOrSignUp') }}
+        </Button>
       </div>
     </div>
   </TabPanel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import TabPanel from 'primevue/tabpanel'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useDialogService } from '@/services/dialogService'
 

src/components/dialog/content/signin/ApiKeyForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
@@ -99,9 +99,10 @@ describe('ApiKeyForm', () => {
     )
     await wrapper.find('form').trigger('submit')
 
-    const submitButton = wrapper
-      .findAllComponents(Button)
-      .find((btn) => btn.text() === 'Save')
+    const buttons = wrapper.findAllComponents(Button)
+    const submitButton = buttons.find(
+      (btn) => btn.attributes('type') === 'submit'
+    )
     expect(submitButton?.props('loading')).toBe(true)
   })
 

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -67,10 +67,15 @@
       </div>
 
       <div class="mt-4 flex items-center justify-between">
-        <Button type="button" link @click="$emit('back')">
+        <Button type="button" variant="textonly" @click="$emit('back')">
           {{ t('g.back') }}
         </Button>
-        <Button type="submit" :loading="loading" :disabled="loading">
+        <Button
+          type="submit"
+          variant="primary"
+          :loading="loading"
+          :disabled="loading"
+        >
           {{ t('g.save') }}
         </Button>
       </div>
@@ -82,12 +87,12 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import {
   configValueOrDefault,

src/components/dialog/content/signin/SignInForm.test.ts

@@ -1,7 +1,7 @@
 import { Form } from '@primevue/forms'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'

src/components/dialog/content/signin/SignInForm.vue

@@ -64,10 +64,11 @@
     <Button
       v-else
       type="submit"
-      :label="t('auth.login.loginButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    />
+    >
+      {{ t('auth.login.loginButton') }}
+    </Button>
   </Form>
 </template>
 
@@ -76,7 +77,6 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -84,6 +84,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'

src/components/dialog/content/signin/SignUpForm.vue

@@ -33,10 +33,11 @@
     <Button
       v-else
       type="submit"
-      :label="t('auth.signup.signUpButton')"
       class="mt-4 h-10 font-medium"
       :disabled="!$form.valid"
-    />
+    >
+      {{ t('auth.signup.signUpButton') }}
+    </Button>
   </Form>
 </template>
 
@@ -45,12 +46,12 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'

src/components/graph/CanvasModeSelector.vue

@@ -1,21 +1,19 @@
 <template>
   <Button
     ref="buttonRef"
-    severity="secondary"
+    variant="secondary"
     class="group h-8 rounded-none! bg-comfy-menu-bg p-0 transition-none! hover:rounded-lg! hover:bg-interface-button-hover-surface!"
     :style="buttonStyles"
     @click="toggle"
   >
-    <template #default>
-      <div class="flex items-center gap-1 pr-0.5">
-        <div
-          class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
-        >
-          <i :class="currentModeIcon" class="block h-4 w-4" />
-        </div>
-        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+    <div class="flex items-center gap-1 pr-0.5">
+      <div
+        class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
+      >
+        <i :class="currentModeIcon" class="block h-4 w-4" />
       </div>
-    </template>
+      <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+    </div>
   </Button>
 
   <Popover
@@ -56,10 +54,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/GraphCanvasMenu.vue

@@ -24,22 +24,18 @@
 
       <Button
         v-tooltip.top="fitViewTooltip"
-        severity="secondary"
-        icon="pi pi-expand"
+        variant="secondary"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
         class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <template #icon>
-          <i class="icon-[lucide--focus] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--focus] h-4 w-4" />
       </Button>
 
       <Button
         v-tooltip.top="t('zoomControls.label')"
-        severity="secondary"
-        :label="t('zoomControls.label')"
+        variant="secondary"
         :class="zoomButtonClass"
         :aria-label="t('zoomControls.label')"
         data-testid="zoom-controls-button"
@@ -56,16 +52,14 @@
 
       <Button
         v-tooltip.top="minimapTooltip"
-        severity="secondary"
+        variant="secondary"
         :aria-label="minimapTooltip"
         data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <template #icon>
-          <i class="icon-[lucide--map] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--map] h-4 w-4" />
       </Button>
 
       <Button
@@ -77,27 +71,25 @@
             }
           }
         }"
-        severity="secondary"
+        variant="secondary"
         :class="linkVisibleClass"
         :aria-label="linkVisibilityAriaLabel"
         data-testid="toggle-link-visibility-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <template #icon>
-          <i class="icon-[lucide--route-off] h-4 w-4" />
-        </template>
+        <i class="icon-[lucide--route-off] h-4 w-4" />
       </Button>
     </ButtonGroup>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'

src/components/graph/NodeContextMenu.vue

@@ -220,6 +220,12 @@ function show(event: MouseEvent) {
     y: screenY / scale - offset[1]
   }
 
+  // Initialize last* values to current transform to prevent updateMenuPosition
+  // from overwriting PrimeVue's flip-adjusted position on the first RAF tick
+  lastScale = scale
+  lastOffsetX = offset[0]
+  lastOffsetY = offset[1]
+
   isOpen.value = true
   contextMenu.value?.show(event)
 }

src/components/graph/modals/ZoomControlsModal.test.ts

@@ -0,0 +1,159 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ZoomControlsModal from '@/components/graph/modals/ZoomControlsModal.vue'
+
+// Mock functions
+const mockExecute = vi.fn()
+const mockGetCommand = vi.fn().mockReturnValue({
+  keybinding: {
+    combo: {
+      getKeySequences: () => ['Ctrl', '+']
+    }
+  }
+})
+const mockFormatKeySequence = vi.fn().mockReturnValue('Ctrl+')
+const mockSetAppZoom = vi.fn()
+const mockSettingGet = vi.fn().mockReturnValue(true)
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+// Mock dependencies
+
+vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
+  useMinimap: () => ({
+    containerStyles: { value: { backgroundColor: '#fff', borderRadius: '8px' } }
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: mockExecute,
+    getCommand: mockGetCommand,
+    formatKeySequence: mockFormatKeySequence
+  })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    appScalePercentage: 100,
+    setAppZoomFromPercentage: mockSetAppZoom
+  })
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockSettingGet
+  })
+}))
+
+const createWrapper = (props = {}) => {
+  return mount(ZoomControlsModal, {
+    props: {
+      visible: true,
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      stubs: {
+        Button: false,
+        InputNumber: false
+      }
+    }
+  })
+}
+
+describe('ZoomControlsModal', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('should execute zoom in command when zoom in button is clicked', async () => {
+    const wrapper = createWrapper()
+
+    const buttons = wrapper.findAll('.cursor-pointer')
+    const zoomInButton = buttons.find((btn) =>
+      btn.text().includes('graphCanvasMenu.zoomIn')
+    )
+
+    expect(zoomInButton).toBeDefined()
+    await zoomInButton!.trigger('mousedown')
+
+    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ZoomIn')
+  })
+
+  it('should execute zoom out command when zoom out button is clicked', async () => {
+    const wrapper = createWrapper()
+
+    const buttons = wrapper.findAll('.cursor-pointer')
+    const zoomOutButton = buttons.find((btn) =>
+      btn.text().includes('graphCanvasMenu.zoomOut')
+    )
+
+    expect(zoomOutButton).toBeDefined()
+    await zoomOutButton!.trigger('mousedown')
+
+    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ZoomOut')
+  })
+
+  it('should execute fit view command when fit view button is clicked', async () => {
+    const wrapper = createWrapper()
+
+    const buttons = wrapper.findAll('.cursor-pointer')
+    const fitViewButton = buttons.find((btn) =>
+      btn.text().includes('zoomControls.zoomToFit')
+    )
+
+    expect(fitViewButton).toBeDefined()
+    await fitViewButton!.trigger('click')
+
+    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
+  })
+
+  it('should call setAppZoomFromPercentage with valid zoom input values', async () => {
+    const wrapper = createWrapper()
+
+    const inputNumber = wrapper.findComponent({ name: 'InputNumber' })
+    expect(inputNumber.exists()).toBe(true)
+
+    // Emit the input event with PrimeVue's InputNumberInputEvent structure
+    await inputNumber.vm.$emit('input', { value: 150 })
+
+    expect(mockSetAppZoom).toHaveBeenCalledWith(150)
+  })
+
+  it('should not call setAppZoomFromPercentage with invalid zoom input values', async () => {
+    const wrapper = createWrapper()
+
+    const inputNumber = wrapper.findComponent({ name: 'InputNumber' })
+    expect(inputNumber.exists()).toBe(true)
+
+    // Test out of range values
+    await inputNumber.vm.$emit('input', { value: 0 })
+    expect(mockSetAppZoom).not.toHaveBeenCalled()
+
+    await inputNumber.vm.$emit('input', { value: 1001 })
+    expect(mockSetAppZoom).not.toHaveBeenCalled()
+  })
+
+  it('should display keyboard shortcuts for commands', () => {
+    const wrapper = createWrapper()
+
+    const buttons = wrapper.findAll('.cursor-pointer')
+    expect(buttons.length).toBeGreaterThan(0)
+
+    // Each command button should show the keyboard shortcut
+    expect(mockFormatKeySequence).toHaveBeenCalled()
+  })
+
+  it('should not be visible when visible prop is false', () => {
+    const wrapper = createWrapper({ visible: false })
+
+    expect(wrapper.find('.absolute').exists()).toBe(false)
+  })
+})

src/components/graph/selectionToolbox/BypassButton.vue

@@ -4,21 +4,18 @@
       value: $t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label')"
     data-testid="bypass-button"
     class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
-    <template #icon>
-      <i class="icon-[lucide--redo-dot] h-4 w-4" />
-    </template>
+    <i class="icon-[lucide--redo-dot] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -6,19 +6,13 @@
         showDelay: 1000
       }"
       data-testid="color-picker-button"
-      severity="secondary"
-      text
+      variant="muted-textonly"
+      :aria-label="t('g.color')"
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i
-          class="pi pi-circle-fill h-4 w-4"
-          :style="{ color: currentColor ?? '' }"
-        />
-        <i
-          class="pi pi-chevron-down h-4 w-4 py-1"
-          :style="{ fontSize: '0.5rem' }"
-        />
+        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+        <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
     <div
@@ -48,12 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
 import type { Raw } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import type {
   ColorOption as CanvasColorOption,
   Positionable

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -4,15 +4,15 @@
       value: $t('commands.Comfy_Graph_EditSubgraphWidgets.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon="icon-[lucide--settings-2]"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Graph_EditSubgraphWidgets.label')"
     @click="handleClick"
-  />
+  >
+    <i class="icon-[lucide--settings-2]" />
+  </Button>
 </template>
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
 const rightSidePanelStore = useRightSidePanelStore()

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -5,14 +5,12 @@
       value: $t('commands.Comfy_Graph_UnpackSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Graph_UnpackSubgraph.label')"
     data-testid="convert-to-subgraph-button"
-    text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--expand] h-4 w-4" />
-    </template>
+    <i class="icon-[lucide--expand] size-4" />
   </Button>
   <Button
     v-else-if="isConvertVisible"
@@ -20,21 +18,20 @@
       value: $t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
+    variant="muted-textonly"
+    size="icon"
+    :aria-label="$t('commands.Comfy_Graph_ConvertToSubgraph.label')"
     data-testid="convert-to-subgraph-button"
-    text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--shrink]" />
-    </template>
+    <i class="icon-[lucide--shrink] size-4" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -5,19 +5,19 @@
       value: $t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    icon="pi pi-trash"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_Canvas_DeleteSelectedItems.label')"
     data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-  />
+  >
+    <i class="icon-[lucide--trash-2]" />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -4,21 +4,21 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-primary-background text-white p-0"
-    text
+    variant="primary"
+    :aria-label="t('selectionToolbox.executeButton.tooltip')"
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] size-4" />
+    <i class="icon-[lucide--play]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -5,17 +5,20 @@
         st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon-class="w-4 h-4"
-    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+    variant="muted-textonly"
+    :aria-label="st(`commands.${normalizeI18nKey(command.id)}.label`, '')"
     @click="() => commandStore.execute(command.id)"
-  />
+  >
+    <i
+      :class="[
+        typeof command.icon === 'function' ? command.icon() : command.icon
+      ]"
+    />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { st } from '@/i18n'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useCommandStore } from '@/stores/commandStore'

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -4,18 +4,16 @@
       value: $t('g.frameNodes'),
       showDelay: 1000
     }"
-    class="frame-nodes-button"
-    text
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.frameNodes')"
     @click="frameNodes"
   >
-    <i class="icon-[lucide--frame] h-4 w-4" />
+    <i class="icon-[lucide--frame]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useFrameNodes } from '@/composables/graph/useFrameNodes'
 
 const { frameNodes } = useFrameNodes()

src/components/graph/selectionToolbox/InfoButton.vue

@@ -5,17 +5,16 @@
       showDelay: 1000
     }"
     data-testid="info-button"
-    text
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.info')"
     @click="onInfoClick"
   >
-    <i class="icon-[lucide--info] size-4" />
+    <i class="icon-[lucide--info]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -4,17 +4,16 @@
       value: $t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
-    icon="pi pi-pencil"
-    icon-class="w-4 h-4"
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_3DViewer_Open3DViewer.label')"
     @click="open3DViewer"
-  />
+  >
+    <i class="icon-[lucide--pencil]" />
+  </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -5,17 +5,16 @@
       value: $t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_MaskEditor_OpenMaskEditor.label')"
     @click="openMaskEditor"
   >
-    <i-comfy:mask class="!h-4 !w-4" />
+    <i class="icon-[comfy--mask]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
 

src/components/graph/selectionToolbox/NodeOptionsButton.vue

@@ -5,18 +5,16 @@
       showDelay: 1000
     }"
     data-testid="more-options-button"
-    text
-    class="h-8 w-8 px-0"
-    severity="secondary"
+    variant="muted-textonly"
+    :aria-label="$t('g.moreOptions')"
     @click="handleClick"
   >
-    <i class="icon-[lucide--more-vertical] h-4 w-4" />
+    <i class="icon-[lucide--more-vertical]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 
 const handleClick = (event: Event) => {

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -2,19 +2,19 @@
   <Button
     v-show="isRefreshable"
     v-tooltip.top="t('g.refreshNode')"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="t('g.refreshNode')"
     data-testid="refresh-button"
     @click="refreshSelected"
   >
-    <i class="icon-[lucide--refresh-cw] h-4 w-4" />
+    <i class="icon-[lucide--refresh-cw]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 
 const { t } = useI18n()

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -5,20 +5,18 @@
       value: $t('commands.Comfy_PublishSubgraph.label'),
       showDelay: 1000
     }"
-    severity="secondary"
-    text
+    variant="muted-textonly"
+    :aria-label="$t('commands.Comfy_PublishSubgraph.label')"
     @click="() => commandStore.execute('Comfy.PublishSubgraph')"
   >
-    <template #icon>
-      <i class="icon-[lucide--book-open]" />
-    </template>
+    <i class="icon-[lucide--book-open]" />
   </Button>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'

src/components/helpcenter/HelpCenterPopups.vue

@@ -0,0 +1,134 @@
+<template>
+  <!-- Help Center Popup positioned within canvas area -->
+  <Teleport to="#graph-canvas-container">
+    <div
+      v-if="isHelpCenterVisible"
+      class="help-center-popup"
+      :class="{
+        'sidebar-left':
+          triggerLocation === 'sidebar' && sidebarLocation === 'left',
+        'sidebar-right':
+          triggerLocation === 'sidebar' && sidebarLocation === 'right',
+        'topbar-right': triggerLocation === 'topbar',
+        'small-sidebar': isSmall
+      }"
+    >
+      <HelpCenterMenuContent @close="closeHelpCenter" />
+    </div>
+  </Teleport>
+
+  <!-- Release Notification Toast positioned within canvas area -->
+  <Teleport to="#graph-canvas-container">
+    <ReleaseNotificationToast
+      :class="{
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
+        'small-sidebar': isSmall
+      }"
+    />
+  </Teleport>
+
+  <!-- WhatsNew Popup positioned within canvas area -->
+  <Teleport to="#graph-canvas-container">
+    <WhatsNewPopup
+      :class="{
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
+        'small-sidebar': isSmall
+      }"
+      @whats-new-dismissed="handleWhatsNewDismissed"
+    />
+  </Teleport>
+
+  <!-- Backdrop to close popup when clicking outside -->
+  <Teleport to="body">
+    <div
+      v-if="isHelpCenterVisible"
+      class="help-center-backdrop"
+      @click="closeHelpCenter"
+    />
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useHelpCenter } from '@/composables/useHelpCenter'
+import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
+import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
+
+import HelpCenterMenuContent from './HelpCenterMenuContent.vue'
+
+const { isSmall = false } = defineProps<{
+  isSmall?: boolean
+}>()
+
+const {
+  isHelpCenterVisible,
+  triggerLocation,
+  sidebarLocation,
+  closeHelpCenter,
+  handleWhatsNewDismissed
+} = useHelpCenter()
+</script>
+
+<style scoped>
+.help-center-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: transparent;
+}
+
+.help-center-popup {
+  position: absolute;
+  bottom: 1rem;
+  z-index: 10000;
+  animation: slideInUp 0.2s ease-out;
+  pointer-events: auto;
+}
+
+.help-center-popup.sidebar-left {
+  left: 1rem;
+}
+
+.help-center-popup.sidebar-left.small-sidebar {
+  left: 1rem;
+}
+
+.help-center-popup.sidebar-right {
+  right: 1rem;
+}
+
+.help-center-popup.topbar-right {
+  top: 2rem;
+  right: 1rem;
+  bottom: auto;
+  animation: slideInDown 0.2s ease-out;
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/components/honeyToast/HoneyToast.stories.ts

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import HoneyToast from './HoneyToast.vue'
+
+function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
+  return {
+    taskId: 'task-1',
+    assetId: 'asset-1',
+    assetName: 'model-v1.safetensors',
+    bytesTotal: 1000000,
+    bytesDownloaded: 0,
+    progress: 0,
+    status: 'created',
+    lastUpdate: Date.now(),
+    ...overrides
+  }
+}
+
+const meta: Meta<typeof HoneyToast> = {
+  title: 'Toast/HoneyToast',
+  component: HoneyToast,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [
+    () => ({
+      template: '<div class="h-screen bg-base-background p-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(false)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'completed',
+          progress: 1
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'running',
+          progress: 0.45
+        }),
+        createMockJob({
+          taskId: 'task-3',
+          assetName: 'vae-decoder.safetensors',
+          status: 'created'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
+              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-muted-foreground">1 of 3</span>
+              <div class="flex items-center">
+                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Expanded: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(true)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'completed',
+          progress: 1
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'running',
+          progress: 0.45
+        }),
+        createMockJob({
+          taskId: 'task-3',
+          assetName: 'vae-decoder.safetensors',
+          status: 'created'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
+              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-muted-foreground">1 of 3</span>
+              <div class="flex items-center">
+                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Completed: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(false)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          bytesDownloaded: 1000000,
+          progress: 1,
+          status: 'completed'
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetId: 'asset-2',
+          assetName: 'lora-style.safetensors',
+          bytesTotal: 500000,
+          bytesDownloaded: 500000,
+          progress: 1,
+          status: 'completed'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--check-circle] size-4 text-jade-600" />
+              <span class="font-bold text-base-foreground">All downloads completed</span>
+            </div>
+            <div class="flex items-center">
+              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+              </Button>
+              <Button variant="muted-textonly" size="icon">
+                <i class="icon-[lucide--x] size-4" />
+              </Button>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const WithError: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(true)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'failed',
+          progress: 0.23
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'completed',
+          progress: 1
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--circle-alert] size-4 text-destructive-background" />
+              <span class="font-bold text-base-foreground">1 download failed</span>
+            </div>
+            <div class="flex items-center">
+              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+              </Button>
+              <Button variant="muted-textonly" size="icon">
+                <i class="icon-[lucide--x] size-4" />
+              </Button>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Hidden: Story = {
+  render: () => ({
+    components: { HoneyToast },
+    template: `
+      <div>
+        <p class="text-base-foreground">HoneyToast is hidden when visible=false. Nothing appears at the bottom.</p>
+        
+        <HoneyToast :visible="false">
+          <template #default>
+            <div class="px-4 py-4">Content</div>
+          </template>
+          <template #footer>
+            <div class="h-12 px-4">Footer</div>
+          </template>
+        </HoneyToast>
+      </div>
+    `
+  })
+}

src/components/honeyToast/HoneyToast.test.ts

@@ -0,0 +1,137 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+
+import HoneyToast from './HoneyToast.vue'
+
+describe('HoneyToast', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = ''
+  })
+
+  function mountComponent(
+    props: { visible: boolean; expanded?: boolean } = { visible: true }
+  ): VueWrapper {
+    return mount(HoneyToast, {
+      props,
+      slots: {
+        default: (slotProps: { isExpanded: boolean }) =>
+          h(
+            'div',
+            { 'data-testid': 'content' },
+            slotProps.isExpanded ? 'expanded' : 'collapsed'
+          ),
+        footer: (slotProps: { isExpanded: boolean; toggle: () => void }) =>
+          h(
+            'button',
+            {
+              'data-testid': 'toggle-btn',
+              onClick: slotProps.toggle
+            },
+            slotProps.isExpanded ? 'Collapse' : 'Expand'
+          )
+      },
+      attachTo: document.body
+    })
+  }
+
+  it('renders when visible is true', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast).toBeTruthy()
+
+    wrapper.unmount()
+  })
+
+  it('does not render when visible is false', async () => {
+    const wrapper = mountComponent({ visible: false })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast).toBeFalsy()
+
+    wrapper.unmount()
+  })
+
+  it('passes is-expanded=false to slots by default', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const content = document.body.querySelector('[data-testid="content"]')
+    expect(content?.textContent).toBe('collapsed')
+
+    wrapper.unmount()
+  })
+
+  it('applies collapsed max-height class when collapsed', async () => {
+    const wrapper = mountComponent({ visible: true, expanded: false })
+    await nextTick()
+
+    const expandableArea = document.body.querySelector(
+      '[role="status"] > div:first-child'
+    )
+    expect(expandableArea?.classList.contains('max-h-0')).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('has aria-live="polite" for accessibility', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast?.getAttribute('aria-live')).toBe('polite')
+
+    wrapper.unmount()
+  })
+
+  it('supports v-model:expanded with reactive parent state', async () => {
+    const TestWrapper = defineComponent({
+      components: { HoneyToast },
+      setup() {
+        const expanded = ref(false)
+        return { expanded }
+      },
+      template: `
+        <HoneyToast :visible="true" v-model:expanded="expanded">
+          <template #default="slotProps">
+            <div data-testid="content">{{ slotProps.isExpanded ? 'expanded' : 'collapsed' }}</div>
+          </template>
+          <template #footer="slotProps">
+            <button data-testid="toggle-btn" @click="slotProps.toggle">
+              {{ slotProps.isExpanded ? 'Collapse' : 'Expand' }}
+            </button>
+          </template>
+        </HoneyToast>
+      `
+    })
+
+    const wrapper = mount(TestWrapper, { attachTo: document.body })
+    await nextTick()
+
+    const content = document.body.querySelector('[data-testid="content"]')
+    expect(content?.textContent).toBe('collapsed')
+
+    const toggleBtn = document.body.querySelector(
+      '[data-testid="toggle-btn"]'
+    ) as HTMLButtonElement
+    expect(toggleBtn?.textContent?.trim()).toBe('Expand')
+
+    toggleBtn?.click()
+    await nextTick()
+
+    expect(content?.textContent).toBe('expanded')
+    expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
+
+    const expandableArea = document.body.querySelector(
+      '[role="status"] > div:first-child'
+    )
+    expect(expandableArea?.classList.contains('max-h-[400px]')).toBe(true)
+
+    wrapper.unmount()
+  })
+})

src/components/honeyToast/HoneyToast.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+const { visible } = defineProps<{
+  visible: boolean
+}>()
+
+const isExpanded = defineModel<boolean>('expanded', { default: false })
+
+function toggle() {
+  isExpanded.value = !isExpanded.value
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="translate-y-full opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-full opacity-0"
+    >
+      <div
+        v-if="visible"
+        role="status"
+        aria-live="polite"
+        class="fixed inset-x-0 bottom-6 z-9999 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"
+      >
+        <div
+          :class="
+            cn(
+              'overflow-hidden transition-all duration-300',
+              isExpanded ? 'max-h-[400px]' : 'max-h-0'
+            )
+          "
+        >
+          <slot :is-expanded />
+        </div>
+
+        <slot name="footer" :is-expanded :toggle />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

src/components/input/MultiSelect.vue

@@ -160,7 +160,7 @@
         >
           <i
             v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-white"
+            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
           />
         </div>
         <span>

src/components/load3d/Load3D.vue

@@ -24,6 +24,7 @@
         v-model:light-config="lightConfig"
         :is-splat-model="isSplatModel"
         :is-ply-model="isPlyModel"
+        :has-skeleton="hasSkeleton"
         @update-background-image="handleBackgroundImageUpdate"
         @export-model="handleExportModel"
       />
@@ -33,6 +34,9 @@
         v-model:playing="playing"
         v-model:selected-speed="selectedSpeed"
         v-model:selected-animation="selectedAnimation"
+        v-model:animation-progress="animationProgress"
+        v-model:animation-duration="animationDuration"
+        @seek="handleSeek"
       />
     </div>
     <div
@@ -113,12 +117,15 @@ const {
   isPreview,
   isSplatModel,
   isPlyModel,
+  hasSkeleton,
   hasRecording,
   recordingDuration,
   animations,
   playing,
   selectedSpeed,
   selectedAnimation,
+  animationProgress,
+  animationDuration,
   loading,
   loadingMessage,
 
@@ -130,6 +137,7 @@ const {
   handleStopRecording,
   handleExportRecording,
   handleClearRecording,
+  handleSeek,
   handleBackgroundImageUpdate,
   handleExportModel,
   handleModelDrop,

src/components/load3d/Load3DControls.vue

@@ -1,30 +1,41 @@
 <template>
   <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-backdrop/30"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
     @wheel.stop
   >
     <div class="show-menu relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
-        <i class="pi pi-bars text-lg text-white" />
+      <Button
+        variant="textonly"
+        size="icon"
+        :aria-label="$t('menu.showMenu')"
+        class="rounded-full"
+        @click="toggleMenu"
+      >
+        <i class="pi pi-bars text-lg text-base-foreground" />
       </Button>
 
       <div
         v-show="isMenuOpen"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="category in availableCategories"
             :key="category"
-            class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-smoke-600': activeCategory === category }"
+            variant="textonly"
+            :class="
+              cn(
+                'flex w-full items-center justify-start',
+                activeCategory === category && 'bg-button-active-surface'
+              )
+            "
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
-            <span class="whitespace-nowrap text-white">{{
+            <span class="whitespace-nowrap text-base-foreground">{{
               $t(categoryLabels[category])
             }}</span>
           </Button>
@@ -47,8 +58,10 @@
         v-if="showModelControls"
         v-model:material-mode="modelConfig!.materialMode"
         v-model:up-direction="modelConfig!.upDirection"
+        v-model:show-skeleton="modelConfig!.showSkeleton"
         :hide-material-mode="isSplatModel"
         :is-ply-model="isPlyModel"
+        :has-skeleton="hasSkeleton"
       />
 
       <CameraControls
@@ -72,7 +85,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
@@ -80,16 +92,23 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type {
   CameraConfig,
   LightConfig,
   ModelConfig,
   SceneConfig
 } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'
 
-const { isSplatModel = false, isPlyModel = false } = defineProps<{
+const {
+  isSplatModel = false,
+  isPlyModel = false,
+  hasSkeleton = false
+} = defineProps<{
   isSplatModel?: boolean
   isPlyModel?: boolean
+  hasSkeleton?: boolean
 }>()
 
 const sceneConfig = defineModel<SceneConfig>('sceneConfig')
@@ -150,7 +169,7 @@ const getCategoryIcon = (category: string) => {
     export: 'pi pi-download'
   }
   // @ts-expect-error fixme ts strict error
-  return `${icons[category]} text-white text-lg`
+  return `${icons[category]} text-base-foreground text-lg`
 }
 
 const emit = defineEmits<{

src/components/load3d/Load3DScene.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full"
+    class="relative h-full w-full min-h-[200px]"
     data-capture-wheel="true"
     @pointerdown.stop
     @pointermove.stop

src/components/load3d/Load3dViewerContent.vue

@@ -15,6 +15,16 @@
         @dragleave.stop="handleDragLeave"
         @drop.prevent.stop="handleDrop"
       />
+      <AnimationControls
+        v-if="viewer.animations.value && viewer.animations.value.length > 0"
+        v-model:animations="viewer.animations.value"
+        v-model:playing="viewer.playing.value"
+        v-model:selected-speed="viewer.selectedSpeed.value"
+        v-model:selected-animation="viewer.selectedAnimation.value"
+        v-model:animation-progress="viewer.animationProgress.value"
+        v-model:animation-duration="viewer.animationDuration.value"
+        @seek="viewer.handleSeek"
+      />
       <div
         v-if="isDragging"
         class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -72,12 +82,10 @@
 
       <div class="p-4">
         <div class="flex gap-2">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            :label="t('g.cancel')"
-            @click="handleCancel"
-          />
+          <Button variant="secondary" @click="handleCancel">
+            <i class="pi pi-times" />
+            {{ t('g.cancel') }}
+          </Button>
         </div>
       </div>
     </div>
@@ -85,14 +93,15 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
 
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
 import ExportControls from '@/components/load3d/controls/viewer/ViewerExportControls.vue'
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'

src/components/load3d/LoadingOverlay.vue

@@ -2,11 +2,11 @@
   <Transition name="fade">
     <div
       v-if="loading"
-      class="bg-opacity-50 absolute inset-0 z-50 flex items-center justify-center bg-black"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
-        <div class="mt-4 text-lg text-white">
+        <div class="mt-4 text-lg text-base-foreground">
           {{ loadingMessage }}
         </div>
       </div>

src/components/load3d/controls/AnimationControls.vue

@@ -1,35 +1,64 @@
 <template>
   <div
     v-if="animations && animations.length > 0"
-    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
+    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full flex-col items-center gap-2 pt-2"
   >
-    <Button class="p-button-rounded p-button-text" @click="togglePlay">
-      <i
-        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
+    <div class="flex items-center justify-center gap-2">
+      <Button
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('g.playPause')"
+        @click="togglePlay"
+      >
+        <i
+          :class="[
+            'pi',
+            playing ? 'pi-pause' : 'pi-play',
+            'text-lg text-base-foreground'
+          ]"
+        />
+      </Button>
+
+      <Select
+        v-model="selectedSpeed"
+        :options="speedOptions"
+        option-label="name"
+        option-value="value"
+        class="w-24"
       />
-    </Button>
 
-    <Select
-      v-model="selectedSpeed"
-      :options="speedOptions"
-      option-label="name"
-      option-value="value"
-      class="w-24"
-    />
+      <Select
+        v-model="selectedAnimation"
+        :options="animations"
+        option-label="name"
+        option-value="index"
+        class="w-32"
+      />
+    </div>
 
-    <Select
-      v-model="selectedAnimation"
-      :options="animations"
-      option-label="name"
-      option-value="index"
-      class="w-32"
-    />
+    <div class="flex w-full max-w-xs items-center gap-2 px-4">
+      <Slider
+        :model-value="[animationProgress]"
+        :min="0"
+        :max="100"
+        :step="0.1"
+        class="flex-1"
+        @update:model-value="handleSliderChange"
+      />
+      <span class="min-w-16 text-xs text-base-foreground">
+        {{ formatTime(currentTime) }} / {{ formatTime(animationDuration) }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
 
 type Animation = { name: string; index: number }
 
@@ -37,6 +66,16 @@ const animations = defineModel<Animation[]>('animations')
 const playing = defineModel<boolean>('playing')
 const selectedSpeed = defineModel<number>('selectedSpeed')
 const selectedAnimation = defineModel<number>('selectedAnimation')
+const animationProgress = defineModel<number>('animationProgress', {
+  default: 0
+})
+const animationDuration = defineModel<number>('animationDuration', {
+  default: 0
+})
+
+const emit = defineEmits<{
+  seek: [progress: number]
+}>()
 
 const speedOptions = [
   { name: '0.1x', value: 0.1 },
@@ -46,7 +85,25 @@ const speedOptions = [
   { name: '2x', value: 2 }
 ]
 
-const togglePlay = () => {
+const currentTime = computed(() => {
+  if (!animationDuration.value) return 0
+  return (animationProgress.value / 100) * animationDuration.value
+})
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = (seconds % 60).toFixed(1)
+  return mins > 0 ? `${mins}:${secs.padStart(4, '0')}` : `${secs}s`
+}
+
+function togglePlay() {
   playing.value = !playing.value
 }
+
+function handleSliderChange(value: number[] | undefined) {
+  if (!value) return
+  const progress = value[0]
+  animationProgress.value = progress
+  emit('seek', progress)
+}
 </script>

src/components/load3d/controls/CameraControls.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="flex flex-col">
-    <Button class="p-button-rounded p-button-text" @click="switchCamera">
-      <i
-        v-tooltip.right="{
-          value: $t('load3d.switchCamera'),
-          showDelay: 300
-        }"
-        :class="['pi', 'pi-camera', 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{
+        value: $t('load3d.switchCamera'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('load3d.switchCamera')"
+      @click="switchCamera"
+    >
+      <i :class="['pi', 'pi-camera', 'text-lg text-base-foreground']" />
     </Button>
     <PopupSlider
       v-if="showFOVButton"
@@ -18,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
 const cameraType = defineModel<CameraType>('cameraType')

src/components/load3d/controls/ExportControls.vue

@@ -2,26 +2,28 @@
   <div class="flex flex-col">
     <div class="show-export-formats relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportModel'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportModel')"
         @click="toggleExportFormats"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportModel'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showExportFormats"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="format in exportFormats"
             :key="format.value"
-            class="p-button-text text-white"
+            variant="textonly"
+            class="text-base-foreground"
             @click="exportModel(format.value)"
           >
             {{ format.label }}
@@ -33,9 +35,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()
@@ -48,17 +51,17 @@ const exportFormats = [
   { label: 'STL', value: 'stl' }
 ]
 
-const toggleExportFormats = () => {
+function toggleExportFormats() {
   showExportFormats.value = !showExportFormats.value
 }
 
-const exportModel = (format: string) => {
+function exportModel(format: string) {
   emit('exportModel', format)
 
   showExportFormats.value = false
 }
 
-const closeExportFormatsList = (e: MouseEvent) => {
+function closeExportFormatsList(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-export-formats')) {

src/components/load3d/controls/LightControls.vue

@@ -2,16 +2,17 @@
   <div class="flex flex-col">
     <div v-if="showLightIntensityButton" class="show-light-intensity relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.lightIntensity'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.lightIntensity')"
         @click="toggleLightIntensity"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.lightIntensity'),
-            showDelay: 300
-          }"
-          class="pi pi-sun text-lg text-white"
-        />
+        <i class="pi pi-sun text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showLightIntensity"
@@ -31,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
@@ -56,11 +57,11 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 
-const toggleLightIntensity = () => {
+function toggleLightIntensity() {
   showLightIntensity.value = !showLightIntensity.value
 }
 
-const closeLightSlider = (e: MouseEvent) => {
+function closeLightSlider(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-light-intensity')) {

src/components/load3d/controls/ModelControls.vue

@@ -1,25 +1,34 @@
 <template>
   <div class="flex flex-col">
     <div class="show-up-direction relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.upDirection'),
-            showDelay: 300
-          }"
-          class="pi pi-arrow-up text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.upDirection'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.upDirection')"
+        @click="toggleUpDirection"
+      >
+        <i class="pi pi-arrow-up text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showUpDirection"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="direction in upDirections"
             :key="direction"
-            class="p-button-text text-white"
-            :class="{ 'bg-blue-500': upDirection === direction }"
+            variant="textonly"
+            :class="
+              cn(
+                'text-base-foreground',
+                upDirection === direction && 'bg-blue-500'
+              )
+            "
             @click="selectUpDirection(direction)"
           >
             {{ direction.toUpperCase() }}
@@ -30,27 +39,33 @@
 
     <div v-if="!hideMaterialMode" class="show-material-mode relative">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: t('load3d.materialMode'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.materialMode')"
         @click="toggleMaterialMode"
       >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.materialMode'),
-            showDelay: 300
-          }"
-          class="pi pi-box text-lg text-white"
-        />
+        <i class="pi pi-box text-lg text-base-foreground" />
       </Button>
       <div
         v-show="showMaterialMode"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="mode in materialModes"
             :key="mode"
-            class="p-button-text whitespace-nowrap text-white"
-            :class="{ 'bg-blue-500': materialMode === mode }"
+            variant="textonly"
+            :class="
+              cn(
+                'whitespace-nowrap text-base-foreground',
+                materialMode === mode && 'bg-blue-500'
+              )
+            "
             @click="selectMaterialMode(mode)"
           >
             {{ formatMaterialMode(mode) }}
@@ -58,26 +73,49 @@
         </div>
       </div>
     </div>
+
+    <div v-if="hasSkeleton">
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.showSkeleton'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        :class="cn('rounded-full', showSkeleton && 'bg-blue-500')"
+        :aria-label="t('load3d.showSkeleton')"
+        @click="showSkeleton = !showSkeleton"
+      >
+        <i class="pi pi-sitemap text-lg text-base-foreground" />
+      </Button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import { cn } from '@/utils/tailwindUtil'
 
-const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
+const {
+  hideMaterialMode = false,
+  isPlyModel = false,
+  hasSkeleton = false
+} = defineProps<{
   hideMaterialMode?: boolean
   isPlyModel?: boolean
+  hasSkeleton?: boolean
 }>()
 
 const materialMode = defineModel<MaterialMode>('materialMode')
 const upDirection = defineModel<UpDirection>('upDirection')
+const showSkeleton = defineModel<boolean>('showSkeleton')
 
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)
@@ -108,31 +146,31 @@ const materialModes = computed(() => {
   return modes
 })
 
-const toggleUpDirection = () => {
+function toggleUpDirection() {
   showUpDirection.value = !showUpDirection.value
   showMaterialMode.value = false
 }
 
-const selectUpDirection = (direction: UpDirection) => {
+function selectUpDirection(direction: UpDirection) {
   upDirection.value = direction
   showUpDirection.value = false
 }
 
-const toggleMaterialMode = () => {
+function toggleMaterialMode() {
   showMaterialMode.value = !showMaterialMode.value
   showUpDirection.value = false
 }
 
-const selectMaterialMode = (mode: MaterialMode) => {
+function selectMaterialMode(mode: MaterialMode) {
   materialMode.value = mode
   showMaterialMode.value = false
 }
 
-const formatMaterialMode = (mode: MaterialMode) => {
+function formatMaterialMode(mode: MaterialMode) {
   return t(`load3d.materialModes.${mode}`)
 }
 
-const closeSceneSlider = (e: MouseEvent) => {
+function closeSceneSlider(e: MouseEvent) {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-up-direction')) {

src/components/load3d/controls/PopupSlider.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="relative show-slider">
-    <Button class="p-button-rounded p-button-text" @click="toggleSlider">
-      <i
-        v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
-        :class="['pi', icon, 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="tooltipText"
+      @click="toggleSlider"
+    >
+      <i :class="['pi', icon, 'text-lg text-base-foreground']" />
     </Button>
     <div
       v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg w-[150px]"
+      class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
     >
       <Slider
         v-model="value"
@@ -22,10 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const {
   icon = 'pi-expand',
   min = 10,

src/components/load3d/controls/RecordingControls.vue

@@ -1,60 +1,68 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="relative rounded-lg bg-backdrop/30">
     <div class="flex flex-col gap-2">
       <Button
-        class="p-button-rounded p-button-text"
-        :class="{
-          'p-button-danger': isRecording,
-          'recording-button-blink': isRecording
+        v-tooltip.right="{
+          value: isRecording
+            ? $t('load3d.stopRecording')
+            : $t('load3d.startRecording'),
+          showDelay: 300
         }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn(
+            'rounded-full',
+            isRecording && 'text-red-500 recording-button-blink'
+          )
+        "
+        :aria-label="
+          isRecording ? $t('load3d.stopRecording') : $t('load3d.startRecording')
+        "
         @click="toggleRecording"
       >
         <i
-          v-tooltip.right="{
-            value: isRecording
-              ? $t('load3d.stopRecording')
-              : $t('load3d.startRecording'),
-            showDelay: 300
-          }"
           :class="[
             'pi',
             isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-lg text-white'
+            'text-lg text-base-foreground'
           ]"
         />
       </Button>
 
       <Button
         v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportRecording')"
         @click="handleExportRecording"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-base-foreground" />
       </Button>
 
       <Button
         v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.clearRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.clearRecording')"
         @click="handleClearRecording"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.clearRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-trash text-lg text-white"
-        />
+        <i class="pi pi-trash text-lg text-base-foreground" />
       </Button>
 
       <div
         v-if="recordingDuration && recordingDuration > 0 && !isRecording"
-        class="mt-1 text-center text-xs text-white"
+        class="mt-1 text-center text-xs text-base-foreground"
       >
         {{ formatDuration(recordingDuration) }}
       </div>
@@ -63,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 
 const hasRecording = defineModel<boolean>('hasRecording')
 const isRecording = defineModel<boolean>('isRecording')
@@ -76,7 +85,7 @@ const emit = defineEmits<{
   (e: 'clearRecording'): void
 }>()
 
-const toggleRecording = () => {
+function toggleRecording() {
   if (isRecording.value) {
     emit('stopRecording')
   } else {
@@ -84,15 +93,15 @@ const toggleRecording = () => {
   }
 }
 
-const handleExportRecording = () => {
+function handleExportRecording() {
   emit('exportRecording')
 }
 
-const handleClearRecording = () => {
+function handleClearRecording() {
   emit('clearRecording')
 }
 
-const formatDuration = (seconds: number): string => {
+function formatDuration(seconds: number): string {
   const minutes = Math.floor(seconds / 60)
   const remainingSeconds = Math.floor(seconds % 60)
   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`

src/components/load3d/controls/SceneControls.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="flex flex-col">
     <Button
-      class="p-button-rounded p-button-text"
-      :class="{ 'p-button-outlined': showGrid }"
+      v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
+      variant="textonly"
+      size="icon"
+      :class="cn('rounded-full', showGrid && 'ring-2 ring-white/50')"
+      :aria-label="$t('load3d.showGrid')"
       @click="toggleGrid"
     >
-      <i
-        v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
-        class="pi pi-table text-lg text-white"
-      />
+      <i class="pi pi-table text-lg text-base-foreground" />
     </Button>
 
     <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.backgroundColor'),
-            showDelay: 300
-          }"
-          class="pi pi-palette text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.backgroundColor'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.backgroundColor')"
+        @click="openColorPicker"
+      >
+        <i class="pi pi-palette text-lg text-base-foreground" />
         <input
           ref="colorPickerRef"
           type="color"
@@ -33,14 +37,18 @@
     </div>
 
     <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.uploadBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-image text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.uploadBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.uploadBackgroundImage')"
+        @click="openImagePicker"
+      >
+        <i class="pi pi-image text-lg text-base-foreground" />
         <input
           ref="imagePickerRef"
           type="file"
@@ -53,17 +61,22 @@
 
     <div v-if="hasBackgroundImage">
       <Button
-        class="p-button-rounded p-button-text"
-        :class="{ 'p-button-outlined': backgroundRenderMode === 'panorama' }"
+        v-tooltip.right="{
+          value: $t('load3d.panoramaMode'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        :class="
+          cn(
+            'rounded-full',
+            backgroundRenderMode === 'panorama' && 'ring-2 ring-white/50'
+          )
+        "
+        :aria-label="$t('load3d.panoramaMode')"
         @click="toggleBackgroundRenderMode"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.panoramaMode'),
-            showDelay: 300
-          }"
-          class="pi pi-globe text-lg text-white"
-        />
+        <i class="pi pi-globe text-lg text-base-foreground" />
       </Button>
     </div>
 
@@ -75,27 +88,29 @@
 
     <div v-if="hasBackgroundImage">
       <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.removeBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.removeBackgroundImage')"
         @click="removeBackgroundImage"
       >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-times text-lg text-white"
-        />
+        <i class="pi pi-times text-lg text-base-foreground" />
       </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'
 
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void

src/components/load3d/controls/ViewerControls.vue

@@ -1,23 +1,26 @@
 <template>
-  <div class="relative rounded-lg bg-smoke-700/30">
+  <div class="relative rounded-lg bg-backdrop/30">
     <div class="flex flex-col gap-2">
-      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.openIn3DViewer'),
-            showDelay: 300
-          }"
-          class="pi pi-expand text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.openIn3DViewer'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.openIn3DViewer')"
+        @click="openIn3DViewer"
+      >
+        <i class="pi pi-expand text-lg text-base-foreground" />
       </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'

src/components/load3d/controls/viewer/ViewerExportControls.vue

@@ -9,9 +9,8 @@
     </Select>
 
     <Button
-      severity="secondary"
-      text
-      rounded
+      variant="muted-textonly"
+      class="rounded-full"
       @click="exportModel(exportFormat)"
     >
       {{ $t('load3d.export') }}
@@ -20,10 +19,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -15,13 +15,10 @@
     </div>
 
     <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
-      <Button
-        severity="secondary"
-        :label="$t('load3d.uploadBackgroundImage')"
-        icon="pi pi-image"
-        class="w-full"
-        @click="openImagePicker"
-      />
+      <Button variant="secondary" class="w-full" @click="openImagePicker">
+        <i class="pi pi-image" />
+        {{ $t('load3d.uploadBackgroundImage') }}
+      </Button>
       <input
         ref="imagePickerRef"
         type="file"
@@ -34,38 +31,38 @@
     <div v-if="hasBackgroundImage" class="space-y-2">
       <div class="flex gap-2">
         <Button
-          :severity="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
-          :label="$t('load3d.tiledMode')"
-          icon="pi pi-th-large"
+          :variant="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
           class="flex-1"
           @click="setBackgroundRenderMode('tiled')"
-        />
+        >
+          <i class="pi pi-th-large" />
+          {{ $t('load3d.tiledMode') }}
+        </Button>
         <Button
-          :severity="
+          :variant="
             backgroundRenderMode === 'panorama' ? 'primary' : 'secondary'
           "
-          :label="$t('load3d.panoramaMode')"
-          icon="pi pi-globe"
           class="flex-1"
           @click="setBackgroundRenderMode('panorama')"
-        />
+        >
+          <i class="pi pi-globe" />
+          {{ $t('load3d.panoramaMode') }}
+        </Button>
       </div>
-      <Button
-        severity="secondary"
-        :label="$t('load3d.removeBackgroundImage')"
-        icon="pi pi-times"
-        class="w-full"
-        @click="removeBackgroundImage"
-      />
+      <Button variant="secondary" class="w-full" @click="removeBackgroundImage">
+        <i class="pi pi-times" />
+        {{ $t('load3d.removeBackgroundImage') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
 const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(

src/components/maskeditor/BrushSettingsPanel.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
+    <h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
       {{ t('maskEditor.brushSettings') }}
     </h3>
 
@@ -10,120 +8,211 @@
       {{ t('maskEditor.resetToDefault') }}
     </button>
 
+    <!-- Brush Shape -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.brushShape')
-      }}</span>
+      <span class="text-left text-xs font-sans text-descrip-text">
+        {{ t('maskEditor.brushShape') }}
+      </span>
+
       <div
-        class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+        class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
       >
         <div
-          class="maskEditor_sidePanelBrushShapeCircle bg-transparent hover:bg-comfy-menu-bg"
-          :class="{ active: store.brushSettings.type === BrushShape.Arc }"
-          :style="{
-            background:
+          class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
+          :class="
+            cn(
               store.brushSettings.type === BrushShape.Arc
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
+                ? 'bg-[var(--p-button-text-primary-color)] active'
+                : 'bg-transparent'
+            )
+          "
           @click="setBrushShape(BrushShape.Arc)"
         ></div>
+
         <div
-          class="maskEditor_sidePanelBrushShapeSquare bg-transparent hover:bg-comfy-menu-bg"
-          :class="{ active: store.brushSettings.type === BrushShape.Rect }"
-          :style="{
-            background:
+          class="maskEditor_sidePanelBrushShapeSquare hover:bg-comfy-menu-bg"
+          :class="
+            cn(
               store.brushSettings.type === BrushShape.Rect
-                ? 'var(--p-button-text-primary-color)'
-                : ''
-          }"
+                ? 'bg-[var(--p-button-text-primary-color)] active'
+                : 'bg-transparent'
+            )
+          "
           @click="setBrushShape(BrushShape.Rect)"
         ></div>
       </div>
     </div>
 
+    <!-- Color -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
-        t('maskEditor.colorSelector')
-      }}</span>
-      <input type="color" :value="store.rgbColor" @input="onColorChange" />
+      <span class="text-left text-xs font-sans text-descrip-text">
+        {{ t('maskEditor.colorSelector') }}
+      </span>
+      <input
+        ref="colorInputRef"
+        v-model="store.rgbColor"
+        type="color"
+        class="h-10 rounded-md cursor-pointer"
+      />
     </div>
 
-    <SliderControl
-      :label="t('maskEditor.thickness')"
-      :min="1"
-      :max="500"
-      :step="1"
-      :model-value="store.brushSettings.size"
-      @update:model-value="onThicknessChange"
-    />
+    <!-- Thickness -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.thickness') }}
+        </span>
+        <input
+          v-model.number="brushSize"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="1"
+          :max="250"
+          :step="1"
+        />
+      </div>
+      <SliderControl
+        v-model="brushSize"
+        class="flex-1"
+        label=""
+        :min="1"
+        :max="250"
+        :step="1"
+      />
+    </div>
 
-    <SliderControl
-      :label="t('maskEditor.opacity')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.opacity"
-      @update:model-value="onOpacityChange"
-    />
+    <!-- Opacity -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.opacity') }}
+        </span>
+        <input
+          v-model.number="brushOpacity"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+      </div>
+      <SliderControl
+        v-model="brushOpacity"
+        class="flex-1"
+        label=""
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
+    </div>
 
-    <SliderControl
-      :label="t('maskEditor.hardness')"
-      :min="0"
-      :max="1"
-      :step="0.01"
-      :model-value="store.brushSettings.hardness"
-      @update:model-value="onHardnessChange"
-    />
+    <!-- Hardness -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.hardness') }}
+        </span>
+        <input
+          v-model.number="brushHardness"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+      </div>
+      <SliderControl
+        v-model="brushHardness"
+        class="flex-1"
+        label=""
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
+    </div>
 
-    <SliderControl
-      :label="$t('maskEditor.stepSize')"
-      :min="1"
-      :max="100"
-      :step="1"
-      :model-value="store.brushSettings.stepSize"
-      @update:model-value="onStepSizeChange"
-    />
+    <!-- Step Size -->
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-left text-xs font-sans text-descrip-text">
+          {{ t('maskEditor.stepSize') }}
+        </span>
+        <input
+          v-model.number="brushStepSize"
+          type="number"
+          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          :min="1"
+          :max="100"
+          :step="1"
+        />
+      </div>
+      <SliderControl
+        v-model="brushStepSize"
+        class="flex-1"
+        label=""
+        :min="1"
+        :max="100"
+        :step="1"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
 import { BrushShape } from '@/extensions/core/maskeditor/types'
 import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import SliderControl from './controls/SliderControl.vue'
 
 const store = useMaskEditorStore()
 
-const textButtonClass =
-  'h-7.5 w-32 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
+const colorInputRef = ref<HTMLInputElement>()
 
+const textButtonClass =
+  'h-7.5 w-32 rounded-[10px] border border-p-form-field-border-color text-input-text font-sans transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
+
+/* Computed properties that use store setters for validation */
+const brushSize = computed({
+  get: () => store.brushSettings.size,
+  set: (value: number) => store.setBrushSize(value)
+})
+
+const brushOpacity = computed({
+  get: () => store.brushSettings.opacity,
+  set: (value: number) => store.setBrushOpacity(value)
+})
+
+const brushHardness = computed({
+  get: () => store.brushSettings.hardness,
+  set: (value: number) => store.setBrushHardness(value)
+})
+
+const brushStepSize = computed({
+  get: () => store.brushSettings.stepSize,
+  set: (value: number) => store.setBrushStepSize(value)
+})
+
+/* Brush shape */
 const setBrushShape = (shape: BrushShape) => {
   store.brushSettings.type = shape
 }
 
-const onColorChange = (event: Event) => {
-  store.rgbColor = (event.target as HTMLInputElement).value
-}
-
-const onThicknessChange = (value: number) => {
-  store.setBrushSize(value)
-}
-
-const onOpacityChange = (value: number) => {
-  store.setBrushOpacity(value)
-}
-
-const onHardnessChange = (value: number) => {
-  store.setBrushHardness(value)
-}
-
-const onStepSizeChange = (value: number) => {
-  store.setBrushStepSize(value)
-}
-
+/* Reset */
 const resetToDefault = () => {
   store.resetBrushToDefault()
 }
+
+onMounted(() => {
+  if (colorInputRef.value) {
+    store.colorInput = colorInputRef.value
+  }
+})
+
+onBeforeUnmount(() => {
+  store.colorInput = null
+})
 </script>

src/components/maskeditor/MaskEditorContent.vue

@@ -4,6 +4,7 @@
     class="maskEditor-dialog-root flex h-full w-full flex-col"
     @contextmenu.prevent
     @dragstart="handleDragStart"
+    @keydown.stop
   >
     <div
       id="maskEditorCanvasContainer"
@@ -202,6 +203,7 @@ onBeforeUnmount(() => {
   }
 
   store.canvasHistory.clearStates()
+
   store.resetState()
   dataStore.reset()
 })

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -11,7 +11,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-current"
           >
             <path
               d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -35,6 +35,74 @@
           </svg>
         </button>
 
+        <div class="h-5 border-l border-border" />
+
+        <button
+          :class="iconButtonClass"
+          :title="t('maskEditor.rotateLeft')"
+          @click="onRotateLeft"
+        >
+          <svg
+            viewBox="-6 -7 15 15"
+            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+          >
+            <path
+              d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
+            />
+          </svg>
+        </button>
+
+        <button
+          :class="iconButtonClass"
+          :title="t('maskEditor.rotateRight')"
+          @click="onRotateRight"
+        >
+          <svg
+            viewBox="-9 -7 15 15"
+            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+          >
+            <g transform="scale(-1, 1)">
+              <path
+                d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
+              />
+            </g>
+          </svg>
+        </button>
+
+        <button
+          :class="iconButtonClass"
+          :title="t('maskEditor.mirrorHorizontal')"
+          @click="onMirrorHorizontal"
+        >
+          <svg
+            viewBox="0 0 15 15"
+            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+          >
+            <path
+              d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
+            />
+            <path d="M3.5,4.5l-2,3,2,3v-6ZM11.5,4.5v6l2-3-2-3Z" />
+          </svg>
+        </button>
+
+        <button
+          :class="iconButtonClass"
+          :title="t('maskEditor.mirrorVertical')"
+          @click="onMirrorVertical"
+        >
+          <svg
+            viewBox="0 0 15 15"
+            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+          >
+            <path
+              d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
+            />
+            <path d="M4.5,4.5l3-2,3,2h-6ZM4.5,10.5h6l-3,2-3-2Z" />
+          </svg>
+        </button>
+
+        <div class="h-5 w-px bg-[var(--p-form-field-border-color)]" />
+
         <button :class="textButtonClass" @click="onInvert">
           {{ t('maskEditor.invert') }}
         </button>
@@ -46,29 +114,24 @@
     </div>
 
     <div class="flex gap-3">
-      <Button
-        :label="saveButtonText"
-        icon="pi pi-check"
-        size="small"
-        :disabled="!saveEnabled"
-        @click="handleSave"
-      />
-      <Button
-        :label="t('g.cancel')"
-        icon="pi pi-times"
-        size="small"
-        severity="secondary"
-        @click="handleCancel"
-      />
+      <Button variant="primary" :disabled="!saveEnabled" @click="handleSave">
+        <i class="pi pi-check" />
+        {{ saveButtonText }}
+      </Button>
+      <Button variant="secondary" @click="handleCancel">
+        <i class="pi pi-times" />
+        {{ t('g.cancel') }}
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
+import { useCanvasTransform } from '@/composables/maskeditor/useCanvasTransform'
 import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
 import { t } from '@/i18n'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -77,16 +140,17 @@ import { useMaskEditorStore } from '@/stores/maskEditorStore'
 const store = useMaskEditorStore()
 const dialogStore = useDialogStore()
 const canvasTools = useCanvasTools()
+const canvasTransform = useCanvasTransform()
 const saver = useMaskEditorSaver()
 
 const saveButtonText = ref(t('g.save'))
 const saveEnabled = ref(true)
 
 const iconButtonClass =
-  'flex h-7.5 w-12.5 items-center justify-center rounded-[10px] border border-[var(--p-form-field-border-color)] pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
+  'flex h-7.5 w-12.5 items-center justify-center rounded-[10px] border border-border-default pointer-events-auto transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
 
 const textButtonClass =
-  'h-7.5 w-15 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
+  'h-7.5 w-15 rounded-[10px] border border-border-default text-current font-sans pointer-events-auto transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
 
 const onUndo = () => {
   store.canvasHistory.undo()
@@ -96,6 +160,38 @@ const onRedo = () => {
   store.canvasHistory.redo()
 }
 
+const onRotateLeft = async () => {
+  try {
+    await canvasTransform.rotateCounterclockwise()
+  } catch (error) {
+    console.error('[TopBarHeader] Rotate left failed:', error)
+  }
+}
+
+const onRotateRight = async () => {
+  try {
+    await canvasTransform.rotateClockwise()
+  } catch (error) {
+    console.error('[TopBarHeader] Rotate right failed:', error)
+  }
+}
+
+const onMirrorHorizontal = async () => {
+  try {
+    await canvasTransform.mirrorHorizontal()
+  } catch (error) {
+    console.error('[TopBarHeader] Mirror horizontal failed:', error)
+  }
+}
+
+const onMirrorVertical = async () => {
+  try {
+    await canvasTransform.mirrorVertical()
+  } catch (error) {
+    console.error('[TopBarHeader] Mirror vertical failed:', error)
+  }
+}
+
 const onInvert = () => {
   canvasTools.invertMask()
 }

src/components/queue/QueueProgressOverlay.vue

@@ -197,7 +197,16 @@ const displayedJobGroups = computed(() => groupedJobItems.value)
 const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   const promptId = item.taskRef?.promptId
   if (!promptId) return
-  await api.interrupt(promptId)
+
+  if (item.state === 'running' || item.state === 'initialization') {
+    // Running/initializing jobs: interrupt execution
+    await api.interrupt(promptId)
+    await queueStore.update()
+  } else if (item.state === 'pending') {
+    // Pending jobs: remove from queue
+    await api.deleteItem('queue', promptId)
+    await queueStore.update()
+  }
 })
 
 const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {

src/components/queue/job/JobGroupsList.test.ts

@@ -0,0 +1,92 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+
+import JobGroupsList from '@/components/queue/job/JobGroupsList.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+const QueueJobItemStub = defineComponent({
+  name: 'QueueJobItemStub',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined },
+    state: { type: String, required: true },
+    title: { type: String, required: true },
+    rightText: { type: String, default: '' },
+    iconName: { type: String, default: undefined },
+    iconImageUrl: { type: String, default: undefined },
+    showClear: { type: Boolean, default: undefined },
+    showMenu: { type: Boolean, default: undefined },
+    progressTotalPercent: { type: Number, default: undefined },
+    progressCurrentPercent: { type: Number, default: undefined },
+    runningNodeName: { type: String, default: undefined },
+    activeDetailsId: { type: String, default: null }
+  },
+  template: '<div class="queue-job-item-stub"></div>'
+})
+
+const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+  id: 'job-id',
+  title: 'Example job',
+  meta: 'Meta text',
+  state: 'running',
+  iconName: 'icon',
+  iconImageUrl: 'https://example.com/icon.png',
+  showClear: true,
+  taskRef: { workflow: { id: 'workflow-id' } },
+  progressTotalPercent: 60,
+  progressCurrentPercent: 30,
+  runningNodeName: 'Node A',
+  ...overrides
+})
+
+const mountComponent = (groups: JobGroup[]) =>
+  mount(JobGroupsList, {
+    props: { displayedJobGroups: groups },
+    global: {
+      stubs: {
+        QueueJobItem: QueueJobItemStub
+      }
+    }
+  })
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('JobGroupsList hover behavior', () => {
+  it('delays showing and hiding details while hovering over job rows', async () => {
+    vi.useFakeTimers()
+    const job = createJobItem({ id: 'job-d' })
+    const wrapper = mountComponent([
+      { key: 'today', label: 'Today', items: [job] }
+    ])
+    const jobItem = wrapper.findComponent(QueueJobItemStub)
+
+    jobItem.vm.$emit('details-enter', job.id)
+    vi.advanceTimersByTime(199)
+    await nextTick()
+    expect(
+      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
+    ).toBeNull()
+
+    vi.advanceTimersByTime(1)
+    await nextTick()
+    expect(
+      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
+    ).toBe(job.id)
+
+    wrapper.findComponent(QueueJobItemStub).vm.$emit('details-leave', job.id)
+    vi.advanceTimersByTime(149)
+    await nextTick()
+    expect(
+      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
+    ).toBe(job.id)
+
+    vi.advanceTimersByTime(1)
+    await nextTick()
+    expect(
+      wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
+    ).toBeNull()
+  })
+})

src/components/queue/job/QueueJobItem.vue

@@ -50,20 +50,22 @@
       <div
         v-if="
           props.state === 'running' &&
-          (props.progressTotalPercent !== undefined ||
-            props.progressCurrentPercent !== undefined)
+          hasAnyProgressPercent(
+            props.progressTotalPercent,
+            props.progressCurrentPercent
+          )
         "
-        class="absolute inset-0"
+        :class="progressBarContainerClass"
       >
         <div
-          v-if="props.progressTotalPercent !== undefined"
-          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
-          :style="{ width: `${props.progressTotalPercent}%` }"
+          v-if="hasProgressPercent(props.progressTotalPercent)"
+          :class="progressBarPrimaryClass"
+          :style="progressPercentStyle(props.progressTotalPercent)"
         />
         <div
-          v-if="props.progressCurrentPercent !== undefined"
-          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
-          :style="{ width: `${props.progressCurrentPercent}%` }"
+          v-if="hasProgressPercent(props.progressCurrentPercent)"
+          :class="progressBarSecondaryClass"
+          :style="progressPercentStyle(props.progressCurrentPercent)"
         />
       </div>
 
@@ -201,6 +203,7 @@ import { useI18n } from 'vue-i18n'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
@@ -245,6 +248,14 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  hasProgressPercent,
+  hasAnyProgressPercent,
+  progressPercentStyle
+} = useProgressBarBackground()
 
 const cancelTooltipConfig = computed(() => buildTooltipConfig(t('g.cancel')))
 const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))

src/components/queue/job/useJobErrorReporting.test.ts

@@ -0,0 +1,193 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+import type { ComputedRef } from 'vue'
+
+import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type {
+  JobErrorDialogService,
+  UseJobErrorReportingOptions
+} from '@/components/queue/job/useJobErrorReporting'
+import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
+
+const createExecutionErrorMessage = (
+  overrides: Partial<ExecutionErrorWsMessage> = {}
+): ExecutionErrorWsMessage => ({
+  prompt_id: 'prompt',
+  timestamp: 100,
+  node_id: 'node-1',
+  node_type: 'KSampler',
+  executed: [],
+  exception_message: 'default failure',
+  exception_type: 'RuntimeError',
+  traceback: ['Trace line'],
+  current_inputs: {},
+  current_outputs: {},
+  ...overrides
+})
+
+const createTaskWithMessages = (
+  messages: Array<[string, unknown]> | undefined = []
+): TaskItemImpl =>
+  ({
+    status: {
+      status_str: 'error',
+      completed: false,
+      messages
+    }
+  }) as TaskItemImpl
+
+describe('extractExecutionError', () => {
+  it('returns null when task has no execution error messages', () => {
+    expect(jobErrorReporting.extractExecutionError(null)).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError({
+        status: undefined
+      } as TaskItemImpl)
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError({
+        status: {
+          status_str: 'error',
+          completed: false,
+          messages: {} as unknown as Array<[string, unknown]>
+        }
+      } as TaskItemImpl)
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError(createTaskWithMessages([]))
+    ).toBeNull()
+    expect(
+      jobErrorReporting.extractExecutionError(
+        createTaskWithMessages([
+          ['execution_start', { prompt_id: 'prompt', timestamp: 1 }]
+        ] as Array<[string, unknown]>)
+      )
+    ).toBeNull()
+  })
+
+  it('returns detail and message for execution_error entries', () => {
+    const detail = createExecutionErrorMessage({ exception_message: 'Kaboom' })
+    const result = jobErrorReporting.extractExecutionError(
+      createTaskWithMessages([
+        ['execution_success', { prompt_id: 'prompt', timestamp: 2 }],
+        ['execution_error', detail]
+      ] as Array<[string, unknown]>)
+    )
+    expect(result).toEqual({
+      detail,
+      message: 'Kaboom'
+    })
+  })
+
+  it('falls back to an empty message when the tuple lacks detail', () => {
+    const result = jobErrorReporting.extractExecutionError(
+      createTaskWithMessages([
+        ['execution_error'] as unknown as [string, ExecutionErrorWsMessage]
+      ])
+    )
+    expect(result).toEqual({ detail: undefined, message: '' })
+  })
+})
+
+describe('useJobErrorReporting', () => {
+  let taskState = ref<TaskItemImpl | null>(null)
+  let taskForJob: ComputedRef<TaskItemImpl | null>
+  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
+  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
+  let showErrorDialog: JobErrorDialogService['showErrorDialog']
+  let dialog: JobErrorDialogService
+  let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
+
+  beforeEach(() => {
+    taskState = ref<TaskItemImpl | null>(null)
+    taskForJob = computed(() => taskState.value)
+    copyToClipboard = vi.fn()
+    showExecutionErrorDialog = vi.fn()
+    showErrorDialog = vi.fn()
+    dialog = {
+      showExecutionErrorDialog,
+      showErrorDialog
+    }
+    composable = jobErrorReporting.useJobErrorReporting({
+      taskForJob,
+      copyToClipboard,
+      dialog
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('exposes a computed message that reflects the current task error', () => {
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'First failure' })
+      ]
+    ])
+    expect(composable.errorMessageValue.value).toBe('First failure')
+
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'Second failure' })
+      ]
+    ])
+    expect(composable.errorMessageValue.value).toBe('Second failure')
+  })
+
+  it('only calls the copy handler when a message exists', () => {
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
+      ]
+    ])
+    composable.copyErrorMessage()
+    expect(copyToClipboard).toHaveBeenCalledTimes(1)
+    expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
+
+    vi.mocked(copyToClipboard).mockClear()
+    taskState.value = createTaskWithMessages([])
+    composable.copyErrorMessage()
+    expect(copyToClipboard).not.toHaveBeenCalled()
+  })
+
+  it('prefers the detailed execution dialog when detail is available', () => {
+    const detail = createExecutionErrorMessage({
+      exception_message: 'Detailed failure'
+    })
+    taskState.value = createTaskWithMessages([['execution_error', detail]])
+    composable.reportJobError()
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
+    expect(showErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('shows a fallback dialog when only a message is available', () => {
+    const message = 'Queue job error'
+    taskState.value = createTaskWithMessages([])
+    const valueSpy = vi
+      .spyOn(composable.errorMessageValue, 'value', 'get')
+      .mockReturnValue(message)
+
+    expect(composable.errorMessageValue.value).toBe(message)
+    composable.reportJobError()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).toHaveBeenCalledTimes(1)
+    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
+    expect(errorArg).toBeInstanceOf(Error)
+    expect(errorArg.message).toBe(message)
+    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
+    valueSpy.mockRestore()
+  })
+
+  it('does nothing when no error could be extracted', () => {
+    taskState.value = createTaskWithMessages([])
+    composable.reportJobError()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).not.toHaveBeenCalled()
+  })
+})

src/components/queue/job/useJobErrorReporting.ts

@@ -40,7 +40,7 @@ export const extractExecutionError = (
   }
 }
 
-type UseJobErrorReportingOptions = {
+export type UseJobErrorReportingOptions = {
   taskForJob: ComputedRef<TaskItemImpl | null>
   copyToClipboard: CopyHandler
   dialog: JobErrorDialogService

src/components/rightSidePanel/RightSidePanel.vue

@@ -9,6 +9,7 @@ import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
@@ -22,11 +23,23 @@ import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 
 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
+const settingStore = useSettingStore()
 const { t } = useI18n()
 
 const { selectedItems } = storeToRefs(canvasStore)
 const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
 
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+// Panel is on the left when sidebar is on the right, and vice versa
+const panelIcon = computed(() =>
+  sidebarLocation.value === 'right'
+    ? 'icon-[lucide--panel-left]'
+    : 'icon-[lucide--panel-right]'
+)
+
 const hasSelection = computed(() => selectedItems.value.length > 0)
 
 const selectedNodes = computed((): LGraphNode[] => {
@@ -160,7 +173,7 @@ function handleTitleCancel() {
             :aria-label="t('rightSidePanel.togglePanel')"
             @click="closePanel"
           >
-            <i class="icon-[lucide--panel-right] size-4" />
+            <i :class="cn(panelIcon, 'size-4')" />
           </Button>
         </div>
       </div>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -2,6 +2,7 @@
 import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -71,7 +72,7 @@ const displayLabel = computed(
         <component
           :is="getWidgetComponent(widget)"
           :widget="widget"
-          :model-value="widget.value"
+          :model-value="useReactiveWidgetValue(widget)"
           :node-id="String(node.id)"
           :node-type="node.type"
           :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
-import Button from 'primevue/button'
 import {
   computed,
   customRef,
@@ -10,6 +9,7 @@ import {
   triggerRef
 } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import {
   demoteWidget,
   isRecommendedWidget,
@@ -315,7 +315,7 @@ onBeforeUnmount(() => {
         class="flex justify-center border-t border-interface-stroke py-4"
       >
         <Button
-          size="small"
+          size="sm"
           class="rounded border-none px-3 py-0.5"
           @click.stop="showRecommended"
         >

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 import type { ClassValue } from '@/utils/tailwindUtil'
 
@@ -43,13 +42,13 @@ function getIcon() {
       <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
     </div>
     <Button
-      size="small"
-      text
-      :icon="getIcon()"
+      variant="muted-textonly"
+      size="sm"
       :disabled="isPhysical"
-      severity="secondary"
       @click.stop="$emit('toggleVisibility')"
-    />
+    >
+      <i :class="getIcon()" />
+    </Button>
     <div
       v-if="isDraggable"
       class="size-4 pointer-events-none icon-[lucide--grip-vertical]"

src/components/searchbox/NodeSearchBox.vue

@@ -14,11 +14,13 @@
     </div>
 
     <Button
-      icon="pi pi-filter"
-      severity="secondary"
+      variant="secondary"
+      :aria-label="$t('g.addNodeFilterCondition')"
       class="filter-button z-10"
       @click="nodeSearchFilterVisible = true"
-    />
+    >
+      <i class="pi pi-filter" />
+    </Button>
     <Dialog
       v-model:visible="nodeSearchFilterVisible"
       class="min-w-96"
@@ -79,7 +81,6 @@
 
 <script setup lang="ts">
 import { debounce } from 'es-toolkit/compat'
-import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -88,6 +89,7 @@ import NodePreview from '@/components/node/NodePreview.vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

src/components/searchbox/NodeSearchFilter.vue

@@ -17,16 +17,16 @@
     />
   </div>
   <div class="_footer">
-    <Button type="button" :label="$t('g.add')" @click="submit" />
+    <Button type="button" @click="submit">{{ $t('g.add') }}</Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'

src/components/sidebar/SideToolbar.vue

@@ -1,10 +1,10 @@
 <template>
   <nav
     ref="sideToolbarRef"
-    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2 pointer-events-auto"
+    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
     :class="{
       'small-sidebar': isSmall,
-      'connected-sidebar': isConnected,
+      'connected-sidebar pointer-events-auto': isConnected,
       'floating-sidebar': !isConnected,
       'overflowing-sidebar': isOverflowing,
       'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
@@ -40,12 +40,13 @@
           v-if="userStore.isMultiUserServer"
           :is-small="isSmall"
         />
-        <SidebarHelpCenterIcon :is-small="isSmall" />
+        <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
       </div>
     </div>
+    <HelpCenterPopups :is-small="isSmall" />
   </nav>
 </template>
 
@@ -54,6 +55,7 @@ import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
@@ -89,6 +91,9 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
+const isIntegratedTabBar = computed(
+  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+)
 const isConnected = computed(
   () =>
     selectedTab.value ||
@@ -145,8 +150,8 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0' +
-      (isConnected.value ? '' : ' rounded-lg shadow-interface')
+    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
+    !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
   )
 )
 

src/components/sidebar/SidebarBottomPanelToggleButton.vue

@@ -1,14 +1,11 @@
 <template>
   <SidebarIcon
+    icon="icon-[ph--terminal-bold]"
     :label="$t('sideToolbar.labels.console')"
     :tooltip="$t('menu.toggleBottomPanel')"
     :selected="bottomPanelStore.activePanel == 'terminal'"
     @click="toggleConsole"
-  >
-    <template #icon>
-      <i-ph:terminal-bold />
-    </template>
-  </SidebarIcon>
+  />
 </template>
 
 <script setup lang="ts">