fix: address CodeRabbit review feedback

- Add Comfy.Assets.UseAssetAPI toggle check (matches useComboWidget behavior)
- Sync existing target widget value to asset widget (fixes placeholder issue)

Amp-Thread-ID: https://ampcode.com/threads/T-019c0839-bbdc-754a-9d3b-151417058ded
Co-authored-by: Amp <amp@ampcode.com>

.github/workflows/i18n-update-core.yaml

@@ -41,7 +41,7 @@ jobs:
         env:
           PLAYWRIGHT_TEST_URL: http://localhost:5173
       - name: Update translations
-        run: pnpm locale
+        run: pnpm locale && pnpm format
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Commit updated locales

docs/testing/unit-testing.md

@@ -11,6 +11,7 @@ This guide covers patterns and examples for unit testing utilities, composables,
 5. [Mocking Utility Functions](#mocking-utility-functions)
 6. [Testing with Debounce and Throttle](#testing-with-debounce-and-throttle)
 7. [Mocking Node Definitions](#mocking-node-definitions)
+8. [Mocking Composables with Reactive State](#mocking-composables-with-reactive-state)
 
 ## Testing Vue Composables with Reactivity
 
@@ -253,3 +254,79 @@ it('should validate node definition', () => {
   expect(validateComfyNodeDef(EXAMPLE_NODE_DEF)).not.toBeNull()
 })
 ```
+
+## Mocking Composables with Reactive State
+
+When mocking composables that return reactive refs, define the mock implementation inline in `vi.mock()`'s factory function. This ensures stable singleton instances across all test invocations.
+
+### Rules
+
+1. **Define mocks in the factory function** — Create `vi.fn()` and `ref()` instances directly inside `vi.mock()`, not in `beforeEach`
+2. **Use singleton pattern** — The factory runs once; all calls to the composable return the same mock object
+3. **Access mocks per-test** — Call the composable directly in each test to get the singleton instance rather than storing in a shared variable
+4. **Wrap in `vi.mocked()` for type safety** — Use `vi.mocked(service.method).mockResolvedValue(...)` when configuring
+5. **Rely on `vi.resetAllMocks()`** — Resets call counts without recreating instances; ref values may need manual reset if mutated
+
+### Pattern
+
+```typescript
+// Example from: src/platform/updates/common/releaseStore.test.ts
+import { ref } from 'vue'
+
+vi.mock('@/path/to/composable', () => {
+  const doSomething = vi.fn()
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+  return {
+    useMyComposable: () => ({
+      doSomething,
+      isLoading,
+      error
+    })
+  }
+})
+
+describe('MyStore', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should call the composable method', async () => {
+    const service = useMyComposable()
+    vi.mocked(service.doSomething).mockResolvedValue({ data: 'test' })
+
+    await store.initialize()
+
+    expect(service.doSomething).toHaveBeenCalledWith(expectedArgs)
+  })
+
+  it('should handle errors from the composable', async () => {
+    const service = useMyComposable()
+    vi.mocked(service.doSomething).mockResolvedValue(null)
+    service.error.value = 'Something went wrong'
+
+    await store.initialize()
+
+    expect(store.error).toBe('Something went wrong')
+  })
+})
+```
+
+### Anti-patterns
+
+```typescript
+// ❌ Don't configure mock return values in beforeEach with shared variable
+let mockService: { doSomething: Mock }
+beforeEach(() => {
+  mockService = { doSomething: vi.fn() }
+  vi.mocked(useMyComposable).mockReturnValue(mockService)
+})
+
+// ❌ Don't auto-mock then override — reactive refs won't work correctly
+vi.mock('@/path/to/composable')
+vi.mocked(useMyComposable).mockReturnValue({ isLoading: ref(false) })
+```
+
+```
+
+```

src/App.vue

@@ -1,13 +1,11 @@
 <template>
-  <WorkspaceAuthGate>
-    <router-view />
-    <ProgressSpinner
-      v-if="isLoading"
-      class="absolute inset-0 flex h-[unset] items-center justify-center"
-    />
-    <GlobalDialog />
-    <BlockUI full-screen :blocked="isLoading" />
-  </WorkspaceAuthGate>
+  <router-view />
+  <ProgressSpinner
+    v-if="isLoading"
+    class="absolute inset-0 flex h-[unset] items-center justify-center"
+  />
+  <GlobalDialog />
+  <BlockUI full-screen :blocked="isLoading" />
 </template>
 
 <script setup lang="ts">
@@ -16,7 +14,6 @@ import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
-import WorkspaceAuthGate from '@/components/auth/WorkspaceAuthGate.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/TopMenuSection.test.ts

@@ -2,7 +2,8 @@ import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, nextTick } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted } from 'vue'
+import type { Component } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
@@ -14,6 +15,7 @@ import type {
 } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
@@ -36,7 +38,17 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
+type WrapperOptions = {
+  pinia?: ReturnType<typeof createTestingPinia>
+  stubs?: Record<string, boolean | Component>
+  attachTo?: HTMLElement
+}
+
+function createWrapper({
+  pinia = createTestingPinia({ createSpy: vi.fn }),
+  stubs = {},
+  attachTo
+}: WrapperOptions = {}) {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -55,18 +67,21 @@ function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
   })
 
   return mount(TopMenuSection, {
+    attachTo,
     global: {
       plugins: [pinia, i18n],
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
+        QueueInlineProgressSummary: true,
         CurrentUserButton: true,
         LoginButton: true,
         ContextMenu: {
           name: 'ContextMenu',
           props: ['model'],
           template: '<div />'
-        }
+        },
+        ...stubs
       },
       directives: {
         tooltip: () => {}
@@ -91,6 +106,7 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
+    localStorage.clear()
   })
 
   describe('authentication state', () => {
@@ -151,7 +167,7 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper(pinia)
+    const wrapper = createWrapper({ pinia })
 
     await nextTick()
 
@@ -169,7 +185,7 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? false : undefined
     )
-    const wrapper = createWrapper(pinia)
+    const wrapper = createWrapper({ pinia })
     const commandStore = useCommandStore(pinia)
 
     await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
@@ -185,7 +201,7 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper(pinia)
+    const wrapper = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
 
     await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
@@ -199,7 +215,7 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper(pinia)
+    const wrapper = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
     const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
 
@@ -210,6 +226,84 @@ describe('TopMenuSection', () => {
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)
   })
 
+  describe('inline progress summary', () => {
+    const configureSettings = (
+      pinia: ReturnType<typeof createTestingPinia>,
+      qpoV2Enabled: boolean
+    ) => {
+      const settingStore = useSettingStore(pinia)
+      vi.mocked(settingStore.get).mockImplementation((key) => {
+        if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
+        if (key === 'Comfy.UseNewMenu') return 'Top'
+        return undefined
+      })
+    }
+
+    it('renders inline progress summary when QPO V2 is enabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
+      ).toBe(true)
+    })
+
+    it('does not render inline progress summary when QPO V2 is disabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, false)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
+      ).toBe(false)
+    })
+
+    it('teleports inline progress summary when actionbar is floating', async () => {
+      localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
+      const actionbarTarget = document.createElement('div')
+      document.body.appendChild(actionbarTarget)
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true)
+      const executionStore = useExecutionStore(pinia)
+      executionStore.activePromptId = 'prompt-1'
+
+      const ComfyActionbarStub = defineComponent({
+        name: 'ComfyActionbar',
+        setup(_, { emit }) {
+          onMounted(() => {
+            emit('update:progressTarget', actionbarTarget)
+          })
+          return () => h('div')
+        }
+      })
+
+      const wrapper = createWrapper({
+        pinia,
+        attachTo: document.body,
+        stubs: {
+          ComfyActionbar: ComfyActionbarStub,
+          QueueInlineProgressSummary: false
+        }
+      })
+
+      try {
+        await nextTick()
+
+        expect(actionbarTarget.querySelector('[role="status"]')).not.toBeNull()
+      } finally {
+        wrapper.unmount()
+        actionbarTarget.remove()
+      }
+    })
+  })
+
   it('disables the clear queue context menu item when no queued jobs exist', () => {
     const wrapper = createWrapper()
     const menu = wrapper.findComponent({ name: 'ContextMenu' })

src/components/TopMenuSection.vue

@@ -1,101 +1,130 @@
 <template>
   <div
     v-if="!workspaceStore.focusMode"
-    class="ml-1 flex gap-x-0.5 pt-1"
+    class="ml-1 flex flex-col gap-1 pt-1"
     @mouseenter="isTopMenuHovered = true"
     @mouseleave="isTopMenuHovered = false"
   >
-    <div class="min-w-0 flex-1">
-      <SubgraphBreadcrumb />
+    <div class="flex gap-x-0.5">
+      <div class="min-w-0 flex-1">
+        <SubgraphBreadcrumb />
+      </div>
+
+      <div class="mx-1 flex flex-col items-end gap-1">
+        <div class="flex items-center gap-2">
+          <div
+            v-if="managerState.shouldShowManagerButtons.value"
+            class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          >
+            <Button
+              v-tooltip.bottom="customNodesManagerTooltipConfig"
+              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>
+
+          <div
+            ref="actionbarContainerRef"
+            class="actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          >
+            <ActionBarButtons />
+            <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+            <div
+              ref="legacyCommandsContainerRef"
+              class="[&:not(:has(*>*:not(:empty)))]:hidden"
+            ></div>
+            <ComfyActionbar
+              :top-menu-container="actionbarContainerRef"
+              :queue-overlay-expanded="isQueueOverlayExpanded"
+              @update:progress-target="updateProgressTarget"
+            />
+            <Button
+              v-tooltip.bottom="queueHistoryTooltipConfig"
+              type="destructive"
+              size="md"
+              :aria-pressed="
+                isQueuePanelV2Enabled
+                  ? activeSidebarTabId === 'assets'
+                  : isQueueProgressOverlayEnabled
+                    ? isQueueOverlayExpanded
+                    : undefined
+              "
+              class="px-3"
+              data-testid="queue-overlay-toggle"
+              @click="toggleQueueOverlay"
+              @contextmenu.stop.prevent="showQueueContextMenu"
+            >
+              <span class="text-sm font-normal tabular-nums">
+                {{ activeJobsLabel }}
+              </span>
+              <span class="sr-only">
+                {{
+                  isQueuePanelV2Enabled
+                    ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                    : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+                }}
+              </span>
+            </Button>
+            <ContextMenu
+              ref="queueContextMenu"
+              :model="queueContextMenuItems"
+            />
+            <CurrentUserButton
+              v-if="isLoggedIn && !isIntegratedTabBar"
+              class="shrink-0"
+            />
+            <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+            <Button
+              v-if="!isRightSidePanelOpen"
+              v-tooltip.bottom="rightSidePanelTooltipConfig"
+              type="secondary"
+              size="icon"
+              :aria-label="t('rightSidePanel.togglePanel')"
+              @click="rightSidePanelStore.togglePanel"
+            >
+              <i class="icon-[lucide--panel-right] size-4" />
+            </Button>
+          </div>
+        </div>
+        <QueueProgressOverlay
+          v-if="isQueueProgressOverlayEnabled"
+          v-model:expanded="isQueueOverlayExpanded"
+          :menu-hovered="isTopMenuHovered"
+        />
+      </div>
     </div>
 
-    <div class="mx-1 flex flex-col items-end gap-1">
-      <div class="flex items-center gap-2">
+    <div>
+      <Teleport
+        v-if="inlineProgressSummaryTarget"
+        :to="inlineProgressSummaryTarget"
+      >
         <div
-          v-if="managerState.shouldShowManagerButtons.value"
-          class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
         >
-          <Button
-            v-tooltip.bottom="customNodesManagerTooltipConfig"
-            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>
+          <QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
         </div>
-
-        <div
-          class="actionbar-container pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
-        >
-          <ActionBarButtons />
-          <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
-          <div
-            ref="legacyCommandsContainerRef"
-            class="[&:not(:has(*>*:not(:empty)))]:hidden"
-          ></div>
-          <ComfyActionbar />
-          <Button
-            v-tooltip.bottom="queueHistoryTooltipConfig"
-            type="destructive"
-            size="md"
-            :aria-pressed="
-              isQueuePanelV2Enabled
-                ? activeSidebarTabId === 'assets'
-                : isQueueProgressOverlayEnabled
-                  ? isQueueOverlayExpanded
-                  : undefined
-            "
-            class="px-3"
-            data-testid="queue-overlay-toggle"
-            @click="toggleQueueOverlay"
-            @contextmenu.stop.prevent="showQueueContextMenu"
-          >
-            <span class="text-sm font-normal tabular-nums">
-              {{ activeJobsLabel }}
-            </span>
-            <span class="sr-only">
-              {{
-                isQueuePanelV2Enabled
-                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-              }}
-            </span>
-          </Button>
-          <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
-          <CurrentUserButton
-            v-if="isLoggedIn && !isIntegratedTabBar"
-            class="shrink-0"
-          />
-          <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
-          <Button
-            v-if="!isRightSidePanelOpen"
-            v-tooltip.bottom="rightSidePanelTooltipConfig"
-            type="secondary"
-            size="icon"
-            :aria-label="t('rightSidePanel.togglePanel')"
-            @click="rightSidePanelStore.togglePanel"
-          >
-            <i class="icon-[lucide--panel-right] size-4" />
-          </Button>
-        </div>
-      </div>
-      <QueueProgressOverlay
-        v-if="isQueueProgressOverlayEnabled"
-        v-model:expanded="isQueueOverlayExpanded"
-        :menu-hovered="isTopMenuHovered"
+      </Teleport>
+      <QueueInlineProgressSummary
+        v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
+        class="pr-1"
+        :hidden="isQueueOverlayExpanded"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
@@ -104,6 +133,7 @@ import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
@@ -147,6 +177,15 @@ const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
+const actionbarContainerRef = ref<HTMLElement>()
+const isActionbarDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
+const actionbarPosition = computed(() => settingStore.get('Comfy.UseNewMenu'))
+const isActionbarEnabled = computed(
+  () => actionbarPosition.value !== 'Disabled'
+)
+const isActionbarFloating = computed(
+  () => isActionbarEnabled.value && !isActionbarDocked.value
+)
 const activeJobsLabel = computed(() => {
   const count = activeJobsCount.value
   return t(
@@ -164,6 +203,19 @@ const isQueuePanelV2Enabled = computed(() =>
 const isQueueProgressOverlayEnabled = computed(
   () => !isQueuePanelV2Enabled.value
 )
+const shouldShowInlineProgressSummary = computed(
+  () => isQueuePanelV2Enabled.value && isActionbarEnabled.value
+)
+const progressTarget = ref<HTMLElement | null>(null)
+function updateProgressTarget(target: HTMLElement | null) {
+  progressTarget.value = target
+}
+const inlineProgressSummaryTarget = computed(() => {
+  if (!shouldShowInlineProgressSummary.value || !isActionbarFloating.value) {
+    return null
+  }
+  return progressTarget.value
+})
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )

src/components/actionbar/ComfyActionbar.vue

@@ -10,6 +10,7 @@
     </div>
 
     <Panel
+      ref="panelRef"
       class="pointer-events-auto"
       :style="style"
       :class="panelClass"
@@ -18,7 +19,7 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div ref="panelRef" class="flex items-center select-none gap-2">
+      <div class="relative flex items-center select-none gap-2">
         <span
           ref="dragHandleRef"
           :class="
@@ -43,6 +44,14 @@
         </Button>
       </div>
     </Panel>
+
+    <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
+      <QueueInlineProgress
+        :hidden="queueOverlayExpanded"
+        :radius-class="cn(isDocked ? 'rounded-[7px]' : 'rounded-[5px]')"
+        data-testid="queue-inline-progress"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -51,14 +60,17 @@ import {
   useDraggable,
   useEventListener,
   useLocalStorage,
+  unrefElement,
   watchDebounced
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
 import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -69,6 +81,15 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
+  topMenuContainer?: HTMLElement | null
+  queueOverlayExpanded?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:progressTarget', target: HTMLElement | null): void
+}>()
+
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
 const { t } = useI18n()
@@ -76,15 +97,22 @@ const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
+const isQueuePanelV2Enabled = computed(() =>
+  settingsStore.get('Comfy.Queue.QPOV2')
+)
 
-const panelRef = ref<HTMLElement | null>(null)
+const panelRef = ref<ComponentPublicInstance | null>(null)
+const panelElement = computed<HTMLElement | null>(() => {
+  const element = unrefElement(panelRef)
+  return element instanceof HTMLElement ? element : null
+})
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0
 })
-const { x, y, style, isDragging } = useDraggable(panelRef, {
+const { x, y, style, isDragging } = useDraggable(panelElement, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
   containerElement: document.body
@@ -101,11 +129,12 @@ watchDebounced(
 
 // Set initial position to bottom center
 const setInitialPosition = () => {
-  if (panelRef.value) {
+  const panel = panelElement.value
+  if (panel) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
-    const menuWidth = panelRef.value.offsetWidth
-    const menuHeight = panelRef.value.offsetHeight
+    const menuWidth = panel.offsetWidth
+    const menuHeight = panel.offsetHeight
 
     if (menuWidth === 0 || menuHeight === 0) {
       return
@@ -181,11 +210,12 @@ watch(
 )
 
 const adjustMenuPosition = () => {
-  if (panelRef.value) {
+  const panel = panelElement.value
+  if (panel) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
-    const menuWidth = panelRef.value.offsetWidth
-    const menuHeight = panelRef.value.offsetHeight
+    const menuWidth = panel.offsetWidth
+    const menuHeight = panel.offsetHeight
 
     // Calculate distances to all edges
     const distanceLeft = lastDragState.value.x
@@ -252,6 +282,19 @@ const onMouseLeaveDropZone = () => {
   }
 }
 
+const inlineProgressTarget = computed(() => {
+  if (!visible.value || !isQueuePanelV2Enabled.value) return null
+  if (isDocked.value) return topMenuContainer ?? null
+  return panelElement.value
+})
+watch(
+  panelElement,
+  (target) => {
+    emit('update:progressTarget', target)
+  },
+  { immediate: true }
+)
+
 // Handle drag state changes
 watch(isDragging, (dragging) => {
   if (dragging) {

src/components/auth/WorkspaceAuthGate.vue

@@ -24,7 +24,7 @@
 import { promiseTimeout, until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
@@ -120,7 +120,10 @@ async function initializeWorkspaceMode(): Promise<void> {
   }
 }
 
-// Start initialization immediately during component setup
-// (not in onMounted, so initialization starts before DOM is ready)
-void initialize()
+// Initialize on mount. This gate should be placed on the authenticated layout
+// (LayoutDefault) so it mounts fresh after login and unmounts on logout.
+// The router guard ensures only authenticated users reach this layout.
+onMounted(() => {
+  void initialize()
+})
 </script>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,7 +14,12 @@
     </template>
 
     <template #header>
-      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        class="max-w-[384px]"
+        autofocus
+      />
     </template>
 
     <template #header-right-area>

src/components/graph/GraphCanvas.vue

@@ -149,7 +149,7 @@ import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { newUserService } from '@/services/newUserService'
+import { useNewUserService } from '@/services/useNewUserService'
 import { storeToRefs } from 'pinia'
 
 import { useBootstrapStore } from '@/stores/bootstrapStore'
@@ -457,11 +457,9 @@ onMounted(async () => {
   // Register core settings immediately after settings are ready
   CORE_SETTINGS.forEach(settingStore.addSetting)
 
-  // Wait for both i18n and newUserService in parallel
-  // (newUserService only needs settings, not i18n)
   await Promise.all([
     until(() => isI18nReady.value || !!i18nError.value).toBe(true),
-    newUserService().initializeIfNewUser(settingStore)
+    useNewUserService().initializeIfNewUser()
   ])
   if (i18nError.value) {
     console.warn(

src/components/graph/SelectionToolbox.test.ts

@@ -13,6 +13,8 @@ import {
   createMockCanvas,
   createMockPositionable
 } from '@/utils/__tests__/litegraphTestUtils'
+import * as litegraphUtil from '@/utils/litegraphUtil'
+import * as nodeFilterUtil from '@/utils/nodeFilterUtil'
 
 function createMockExtensionService(): ReturnType<typeof useExtensionService> {
   return {
@@ -289,9 +291,8 @@ describe('SelectionToolbox', () => {
       )
     })
 
-    it('should show mask editor only for single image nodes', async () => {
-      const mockUtils = await import('@/utils/litegraphUtil')
-      const isImageNodeSpy = vi.spyOn(mockUtils, 'isImageNode')
+    it('should show mask editor only for single image nodes', () => {
+      const isImageNodeSpy = vi.spyOn(litegraphUtil, 'isImageNode')
 
       // Single image node
       isImageNodeSpy.mockReturnValue(true)
@@ -307,9 +308,8 @@ describe('SelectionToolbox', () => {
       expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
     })
 
-    it('should show Color picker button only for single Load3D nodes', async () => {
-      const mockUtils = await import('@/utils/litegraphUtil')
-      const isLoad3dNodeSpy = vi.spyOn(mockUtils, 'isLoad3dNode')
+    it('should show Color picker button only for single Load3D nodes', () => {
+      const isLoad3dNodeSpy = vi.spyOn(litegraphUtil, 'isLoad3dNode')
 
       // Single Load3D node
       isLoad3dNodeSpy.mockReturnValue(true)
@@ -325,13 +325,9 @@ describe('SelectionToolbox', () => {
       expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
     })
 
-    it('should show ExecuteButton only when output nodes are selected', async () => {
-      const mockNodeFilterUtil = await import('@/utils/nodeFilterUtil')
-      const isOutputNodeSpy = vi.spyOn(mockNodeFilterUtil, 'isOutputNode')
-      const filterOutputNodesSpy = vi.spyOn(
-        mockNodeFilterUtil,
-        'filterOutputNodes'
-      )
+    it('should show ExecuteButton only when output nodes are selected', () => {
+      const isOutputNodeSpy = vi.spyOn(nodeFilterUtil, 'isOutputNode')
+      const filterOutputNodesSpy = vi.spyOn(nodeFilterUtil, 'filterOutputNodes')
 
       // With output node selected
       isOutputNodeSpy.mockReturnValue(true)

src/components/graph/selectionToolbox/ExecuteButton.test.ts

@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -47,7 +48,7 @@ describe('ExecuteButton', () => {
     }
   })
 
-  beforeEach(async () => {
+  beforeEach(() => {
     // Set up Pinia with testing utilities
     setActivePinia(
       createTestingPinia({
@@ -71,10 +72,7 @@ describe('ExecuteButton', () => {
     vi.spyOn(commandStore, 'execute').mockResolvedValue()
 
     // Update the useSelectionState mock
-    const { useSelectionState } = vi.mocked(
-      await import('@/composables/graph/useSelectionState')
-    )
-    useSelectionState.mockReturnValue({
+    vi.mocked(useSelectionState).mockReturnValue({
       selectedNodes: {
         value: mockSelectedNodes
       }

src/components/queue/QueueInlineProgress.test.ts

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
+
+const mockProgress = vi.hoisted(() => ({
+  totalPercent: null as unknown as Ref<number>,
+  currentNodePercent: null as unknown as Ref<number>
+}))
+
+vi.mock('@/composables/queue/useQueueProgress', () => ({
+  useQueueProgress: () => ({
+    totalPercent: mockProgress.totalPercent,
+    currentNodePercent: mockProgress.currentNodePercent
+  })
+}))
+
+const createWrapper = (props: { hidden?: boolean } = {}) =>
+  mount(QueueInlineProgress, { props })
+
+describe('QueueInlineProgress', () => {
+  beforeEach(() => {
+    mockProgress.totalPercent = ref(0)
+    mockProgress.currentNodePercent = ref(0)
+  })
+
+  it('renders when total progress is non-zero', () => {
+    mockProgress.totalPercent.value = 12
+
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+  })
+
+  it('renders when current node progress is non-zero', () => {
+    mockProgress.currentNodePercent.value = 33
+
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+  })
+
+  it('does not render when hidden', () => {
+    mockProgress.totalPercent.value = 45
+
+    const wrapper = createWrapper({ hidden: true })
+
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(false)
+  })
+
+  it('shows when progress becomes non-zero', async () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(false)
+
+    mockProgress.totalPercent.value = 10
+    await nextTick()
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+  })
+
+  it('hides when progress returns to zero', async () => {
+    mockProgress.totalPercent.value = 10
+
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+
+    mockProgress.totalPercent.value = 0
+    mockProgress.currentNodePercent.value = 0
+    await nextTick()
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(false)
+  })
+})

src/components/queue/QueueInlineProgress.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="shouldShow"
+    aria-hidden="true"
+    :class="
+      cn('pointer-events-none absolute inset-0 overflow-hidden', radiusClass)
+    "
+  >
+    <div
+      class="pointer-events-none absolute bottom-0 left-0 h-[3px] bg-interface-panel-job-progress-primary transition-[width]"
+      :style="{ width: `${totalPercent}%` }"
+    />
+    <div
+      class="pointer-events-none absolute bottom-0 left-0 h-[3px] bg-interface-panel-job-progress-secondary transition-[width]"
+      :style="{ width: `${currentNodePercent}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { cn } from '@/utils/tailwindUtil'
+
+const { hidden = false, radiusClass = 'rounded-[7px]' } = defineProps<{
+  hidden?: boolean
+  radiusClass?: string
+}>()
+
+const { totalPercent, currentNodePercent } = useQueueProgress()
+
+const shouldShow = computed(
+  () => !hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+)
+</script>

src/components/queue/QueueInlineProgressSummary.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="shouldShow" class="flex justify-end">
+    <div
+      class="flex items-center whitespace-nowrap text-[0.75rem] leading-[normal] drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <div class="flex items-center text-base-foreground">
+        <span class="font-normal">
+          {{ t('sideToolbar.queueProgressOverlay.inlineTotalLabel') }}:
+        </span>
+        <span class="w-[5ch] shrink-0 text-right font-bold tabular-nums">
+          {{ totalPercentFormatted }}
+        </span>
+      </div>
+
+      <div class="flex items-center text-muted-foreground">
+        <span
+          class="w-[16ch] shrink-0 truncate text-right"
+          :title="currentNodeName"
+        >
+          {{ currentNodeName }}:
+        </span>
+        <span class="w-[5ch] shrink-0 text-right tabular-nums">
+          {{ currentNodePercentFormatted }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { st } from '@/i18n'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { useExecutionStore } from '@/stores/executionStore'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { t } = useI18n()
+const executionStore = useExecutionStore()
+const {
+  totalPercent,
+  totalPercentFormatted,
+  currentNodePercent,
+  currentNodePercentFormatted
+} = useQueueProgress()
+
+const currentNodeName = computed(() => {
+  return resolveNodeDisplayName(executionStore.executingNode, {
+    emptyLabel: t('g.emDash'),
+    untitledLabel: t('g.untitled'),
+    st
+  })
+})
+
+const shouldShow = computed(
+  () =>
+    !props.hidden &&
+    (!executionStore.isIdle ||
+      totalPercent.value > 0 ||
+      currentNodePercent.value > 0)
+)
+</script>

src/components/rightSidePanel/RightSidePanel.vue

@@ -8,12 +8,14 @@ import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
+import { st } from '@/i18n'
 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'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import TabInfo from './info/TabInfo.vue'
@@ -146,9 +148,12 @@ function resolveTitle() {
       return groups[0].title || t('rightSidePanel.fallbackGroupTitle')
     }
     if (nodes.length === 1) {
-      return (
-        nodes[0].title || nodes[0].type || t('rightSidePanel.fallbackNodeTitle')
-      )
+      const fallbackNodeTitle = t('rightSidePanel.fallbackNodeTitle')
+      return resolveNodeDisplayName(nodes[0], {
+        emptyLabel: fallbackNodeTitle,
+        untitledLabel: fallbackNodeTitle,
+        st
+      })
     }
   }
   return t('rightSidePanel.title', { count: items.length })

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -14,6 +14,8 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
+
 import { GetNodeParentGroupKey } from '../shared'
 import WidgetItem from './WidgetItem.vue'
 
@@ -52,7 +54,7 @@ const rootElement = ref<HTMLElement>()
 const widgets = shallowRef(widgetsProp)
 watchEffect(() => (widgets.value = widgetsProp))
 
-provide('hideLayoutField', true)
+provide(HideLayoutFieldKey, true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, customRef, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { getSharedWidgetEnhancements } from '@/composables/graph/useGraphNodeManager'
 import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import { st } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -15,6 +17,7 @@ import {
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { renameWidget } from '@/utils/widgetUtil'
 
@@ -38,6 +41,7 @@ const {
   isShownOnParents?: boolean
 }>()
 
+const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)
@@ -59,7 +63,13 @@ const sourceNodeName = computed((): string | null => {
     const { graph, nodeId } = widget._overlay
     sourceNode = getNodeByExecutionId(graph, nodeId)
   }
-  return sourceNode ? sourceNode.title || sourceNode.type : null
+  if (!sourceNode) return null
+  const fallbackNodeTitle = t('rightSidePanel.fallbackNodeTitle')
+  return resolveNodeDisplayName(sourceNode, {
+    emptyLabel: fallbackNodeTitle,
+    untitledLabel: fallbackNodeTitle,
+    st
+  })
 })
 
 const hasParents = computed(() => parents?.length > 0)

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -1,7 +1,11 @@
 <template>
   <div
-    class="comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col"
-    :class="props.class"
+    :class="
+      cn(
+        'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col',
+        props.class
+      )
+    "
   >
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
@@ -35,6 +39,8 @@
 import ScrollPanel from 'primevue/scrollpanel'
 import Toolbar from 'primevue/toolbar'
 
+import { cn } from '@/utils/tailwindUtil'
+
 const props = defineProps<{
   title: string
   class?: string

src/components/ui/TypeformPopoverButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints, whenever } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -10,6 +10,7 @@ defineProps<{
 }>()
 
 const feedbackRef = useTemplateRef('feedbackRef')
+const isMobile = useBreakpoints(breakpointsTailwind).smaller('md')
 
 whenever(feedbackRef, () => {
   const scriptEl = document.createElement('script')
@@ -18,9 +19,20 @@ whenever(feedbackRef, () => {
 })
 </script>
 <template>
-  <Popover>
+  <Button
+    v-if="isMobile"
+    as="a"
+    :href="`https://form.typeform.com/to/${dataTfWidget}`"
+    target="_blank"
+    variant="inverted"
+    class="rounded-full size-12"
+    v-bind="$attrs"
+  >
+    <i class="icon-[lucide--circle-question-mark] size-6" />
+  </Button>
+  <Popover v-else>
     <template #button>
-      <Button variant="inverted" class="rounded-full size-12">
+      <Button variant="inverted" class="rounded-full size-12" v-bind="$attrs">
         <i class="icon-[lucide--circle-question-mark] size-6" />
       </Button>
     </template>

src/composables/queue/useJobList.ts

@@ -17,7 +17,7 @@ import {
   isToday,
   isYesterday
 } from '@/utils/dateTimeUtil'
-import { normalizeI18nKey } from '@/utils/formatUtil'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { buildJobDisplay } from '@/utils/queueDisplay'
 import { jobStateFromTask } from '@/utils/queueUtil'
 
@@ -185,13 +185,11 @@ export function useJobList() {
     executionStore.isPromptInitializing(promptId)
 
   const currentNodeName = computed(() => {
-    const node = executionStore.executingNode
-    if (!node) return t('g.emDash')
-    const title = (node.title ?? '').toString().trim()
-    if (title) return title
-    const nodeType = (node.type ?? '').toString().trim() || t('g.untitled')
-    const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name`
-    return st(key, nodeType)
+    return resolveNodeDisplayName(executionStore.executingNode, {
+      emptyLabel: t('g.emDash'),
+      untitledLabel: t('g.untitled'),
+      st
+    })
   })
 
   const selectedJobTab = ref<JobTab>('All')

src/composables/useTemplateFiltering.test.ts

@@ -4,6 +4,7 @@ import { nextTick, ref } from 'vue'
 import type { IFuseOptions } from 'fuse.js'
 
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
 
 const defaultSettingStore = {
   get: vi.fn((key: string) => {
@@ -50,9 +51,6 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-const { useTemplateFiltering } =
-  await import('@/composables/useTemplateFiltering')
-
 describe('useTemplateFiltering', () => {
   beforeEach(() => {
     setActivePinia(createPinia())

src/extensions/core/cloudRemoteConfig.ts

@@ -16,15 +16,16 @@ useExtensionService().registerExtension({
     const { isLoggedIn } = useCurrentUser()
     const { isActiveSubscription } = useSubscription()
 
-    // Refresh config when subscription status changes
-    // Initial auth-aware refresh happens in WorkspaceAuthGate before app renders
+    // Refresh config when auth or subscription status changes
+    // Primary auth refresh is handled by WorkspaceAuthGate on mount
+    // This watcher handles subscription changes and acts as a backup for auth
     watchDebounced(
       [isLoggedIn, isActiveSubscription],
       () => {
         if (!isLoggedIn.value) return
         void refreshRemoteConfig()
       },
-      { debounce: 256 }
+      { debounce: 256, immediate: true }
     )
 
     // Poll for config updates every 10 minutes (with auth)

src/extensions/core/load3d/Load3d.ts

@@ -55,6 +55,7 @@ class Load3d {
   private rightMouseMoved: boolean = false
   private readonly dragThreshold: number = 5
   private contextMenuAbortController: AbortController | null = null
+  private resizeObserver: ResizeObserver | null = null
 
   constructor(container: Element | HTMLElement, options: Load3DOptions = {}) {
     this.clock = new THREE.Clock()
@@ -145,6 +146,7 @@ class Load3d {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
+    this.initResizeObserver(container)
 
     this.handleResize()
     this.startAnimation()
@@ -154,6 +156,16 @@ class Load3d {
     }, 100)
   }
 
+  private initResizeObserver(container: Element | HTMLElement): void {
+    if (typeof ResizeObserver === 'undefined') return
+
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize()
+    })
+    this.resizeObserver.observe(container)
+  }
+
   /**
    * Initialize context menu on the Three.js canvas
    * Detects right-click vs right-drag to show menu only on click
@@ -512,7 +524,6 @@ class Load3d {
     this.viewHelperManager.recreateViewHelper()
 
     this.handleResize()
-    this.forceRender()
   }
 
   getCurrentCameraType(): 'perspective' | 'orthographic' {
@@ -574,7 +585,6 @@ class Load3d {
     }
 
     this.handleResize()
-    this.forceRender()
 
     this.loadingPromise = null
   }
@@ -608,7 +618,6 @@ class Load3d {
     this.targetHeight = height
     this.targetAspectRatio = width / height
     this.handleResize()
-    this.forceRender()
   }
 
   addEventListener<T>(event: string, callback: EventCallback<T>): void {
@@ -621,7 +630,6 @@ class Load3d {
 
   refreshViewport(): void {
     this.handleResize()
-    this.forceRender()
   }
 
   handleResize(): void {
@@ -809,6 +817,11 @@ class Load3d {
   }
 
   public remove(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
     if (this.contextMenuAbortController) {
       this.contextMenuAbortController.abort()
       this.contextMenuAbortController = null

src/extensions/core/widgetInputs.ts

@@ -12,6 +12,10 @@ import type {
   IBaseWidget,
   TWidgetValue
 } from '@/lib/litegraph/src/types/widgets'
+import { assetService } from '@/platform/assets/services/assetService'
+import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import { app } from '@/scripts/app'
 import {
@@ -19,10 +23,10 @@ import {
   addValueControlWidgets,
   isValidWidgetType
 } from '@/scripts/widgets'
+import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'
 import { CONFIG, GET_CONFIG } from '@/services/litegraphService'
 import { mergeInputSpec } from '@/utils/nodeDefUtil'
 import { applyTextReplacements } from '@/utils/searchAndReplace'
-import { isPrimitiveNode } from '@/renderer/utils/nodeTypeGuards'
 
 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
@@ -103,7 +107,7 @@ export class PrimitiveNode extends LGraphNode {
 
   override onAfterGraphConfigured() {
     if (this.outputs[0].links?.length && !this.widgets?.length) {
-      this.#onFirstConnection()
+      this._onFirstConnection()
 
       // Populate widget values from config data
       if (this.widgets && this.widgets_values) {
@@ -116,7 +120,7 @@ export class PrimitiveNode extends LGraphNode {
       }
 
       // Merge values if required
-      this.#mergeWidgetConfig()
+      this._mergeWidgetConfig()
     }
   }
 
@@ -133,11 +137,11 @@ export class PrimitiveNode extends LGraphNode {
     const links = this.outputs[0].links
     if (connected) {
       if (links?.length && !this.widgets?.length) {
-        this.#onFirstConnection()
+        this._onFirstConnection()
       }
     } else {
       // We may have removed a link that caused the constraints to change
-      this.#mergeWidgetConfig()
+      this._mergeWidgetConfig()
 
       if (!links?.length) {
         this.onLastDisconnect()
@@ -159,7 +163,7 @@ export class PrimitiveNode extends LGraphNode {
     }
 
     if (this.outputs[slot].links?.length) {
-      const valid = this.#isValidConnection(input)
+      const valid = this._isValidConnection(input)
       if (valid) {
         // On connect of additional outputs, copy our value to their widget
         this.applyToGraph([{ target_id: target_node.id, target_slot } as LLink])
@@ -170,7 +174,7 @@ export class PrimitiveNode extends LGraphNode {
     return true
   }
 
-  #onFirstConnection(recreating?: boolean) {
+  private _onFirstConnection(recreating?: boolean) {
     // First connection can fire before the graph is ready on initial load so random things can be missing
     if (!this.outputs[0].links || !this.graph) {
       this.onLastDisconnect()
@@ -204,7 +208,7 @@ export class PrimitiveNode extends LGraphNode {
     this.outputs[0].name = type
     this.outputs[0].widget = widget
 
-    this.#createWidget(
+    this._createWidget(
       widget[CONFIG] ?? config,
       theirNode,
       widget.name,
@@ -213,7 +217,7 @@ export class PrimitiveNode extends LGraphNode {
     )
   }
 
-  #createWidget(
+  private _createWidget(
     inputData: InputSpec,
     node: LGraphNode,
     widgetName: string,
@@ -228,6 +232,24 @@ export class PrimitiveNode extends LGraphNode {
     // Store current size as addWidget resizes the node
     const [oldWidth, oldHeight] = this.size
     let widget: IBaseWidget
+
+    // Cloud: Use asset widget for model-eligible inputs when asset API is enabled
+    if (isCloud && type === 'COMBO') {
+      const settingStore = useSettingStore()
+      const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
+      const isEligible = assetService.isAssetBrowserEligible(
+        node.comfyClass,
+        widgetName
+      )
+      if (isUsingAssetAPI && isEligible) {
+        widget = this._createAssetWidget(node, widgetName, inputData)
+        const theirWidget = node.widgets?.find((w) => w.name === widgetName)
+        if (theirWidget) widget.value = theirWidget.value
+        this._finalizeWidget(widget, oldWidth, oldHeight, recreating)
+        return
+      }
+    }
+
     if (isValidWidgetType(type)) {
       widget = (ComfyWidgets[type](this, 'value', inputData, app) || {}).widget
     } else {
@@ -277,20 +299,49 @@ export class PrimitiveNode extends LGraphNode {
       }
     }
 
-    // When our value changes, update other widgets to reflect our changes
-    // e.g. so LoadImage shows correct image
+    this._finalizeWidget(widget, oldWidth, oldHeight, recreating)
+  }
+
+  private _createAssetWidget(
+    targetNode: LGraphNode,
+    _widgetName: string,
+    inputData: InputSpec
+  ): IBaseWidget {
+    const defaultValue = inputData[1]?.default as string | undefined
+    return createAssetWidget({
+      node: this,
+      widgetName: 'value',
+      nodeTypeForBrowser: targetNode.comfyClass ?? '',
+      defaultValue,
+      onValueChange: (widget, newValue, oldValue) => {
+        widget.callback?.(
+          widget.value,
+          app.canvas,
+          this,
+          app.canvas.graph_mouse,
+          {} as CanvasPointerEvent
+        )
+        this.onWidgetChanged?.(widget.name, newValue, oldValue, widget)
+      }
+    })
+  }
+
+  private _finalizeWidget(
+    widget: IBaseWidget,
+    oldWidth: number,
+    oldHeight: number,
+    recreating: boolean
+  ) {
     widget.callback = useChainCallback(widget.callback, () => {
       this.applyToGraph()
     })
 
-    // Use the biggest dimensions in case the widgets caused the node to grow
     this.setSize([
       Math.max(this.size[0], oldWidth),
       Math.max(this.size[1], oldHeight)
     ])
 
     if (!recreating) {
-      // Grow our node more if required
       const sz = this.computeSize()
       if (this.size[0] < sz[0]) {
         this.size[0] = sz[0]
@@ -307,8 +358,8 @@ export class PrimitiveNode extends LGraphNode {
 
   recreateWidget() {
     const values = this.widgets?.map((w) => w.value)
-    this.#removeWidgets()
-    this.#onFirstConnection(true)
+    this._removeWidgets()
+    this._onFirstConnection(true)
     if (values?.length && this.widgets) {
       for (let i = 0; i < this.widgets.length; i++)
         this.widgets[i].value = values[i]
@@ -316,7 +367,7 @@ export class PrimitiveNode extends LGraphNode {
     return this.widgets?.[0]
   }
 
-  #mergeWidgetConfig() {
+  private _mergeWidgetConfig() {
     // Merge widget configs if the node has multiple outputs
     const output = this.outputs[0]
     const links = output.links ?? []
@@ -348,11 +399,11 @@ export class PrimitiveNode extends LGraphNode {
       const theirInput = theirNode.inputs[link.target_slot]
 
       // Call is valid connection so it can merge the configs when validating
-      this.#isValidConnection(theirInput, hasConfig)
+      this._isValidConnection(theirInput, hasConfig)
     }
   }
 
-  #isValidConnection(input: INodeInputSlot, forceUpdate?: boolean) {
+  private _isValidConnection(input: INodeInputSlot, forceUpdate?: boolean) {
     // Only allow connections where the configs match
     const output = this.outputs?.[0]
     const config2 = (input.widget?.[GET_CONFIG] as () => InputSpec)?.()
@@ -367,7 +418,7 @@ export class PrimitiveNode extends LGraphNode {
     )
   }
 
-  #removeWidgets() {
+  private _removeWidgets() {
     if (this.widgets) {
       // Allow widgets to cleanup
       for (const w of this.widgets) {
@@ -398,7 +449,7 @@ export class PrimitiveNode extends LGraphNode {
     this.outputs[0].name = 'connect to widget input'
     delete this.outputs[0].widget
 
-    this.#removeWidgets()
+    this._removeWidgets()
   }
 }
 

src/lib/litegraph/src/LGraph.test.ts

@@ -46,12 +46,9 @@ describe('LGraph', () => {
     expect(graph.extra).toBe('TestGraph')
   })
 
-  test('is exactly the same type', async ({ expect }) => {
-    const directImport = await import('@/lib/litegraph/src/LGraph')
-    const entryPointImport = await import('@/lib/litegraph/src/litegraph')
-
-    expect(LiteGraph.LGraph).toBe(directImport.LGraph)
-    expect(LiteGraph.LGraph).toBe(entryPointImport.LGraph)
+  test('is exactly the same type', ({ expect }) => {
+    // LGraph from barrel export and LiteGraph.LGraph should be the same
+    expect(LiteGraph.LGraph).toBe(LGraph)
   })
 
   test('populates optional values', ({ expect, minimalSerialisableGraph }) => {

src/lib/litegraph/src/litegraph.test.ts

@@ -1,12 +1,15 @@
 import { clamp } from 'es-toolkit/compat'
-import { beforeEach, describe, expect, vi } from 'vitest'
+import { describe, expect } from 'vitest'
 
 import {
   LiteGraphGlobal,
   LGraphCanvas,
-  LiteGraph
+  LiteGraph,
+  LGraph
 } from '@/lib/litegraph/src/litegraph'
 
+import { LGraph as DirectLGraph } from '@/lib/litegraph/src/LGraph'
+
 import { test } from './__fixtures__/testExtensions'
 
 describe('Litegraph module', () => {
@@ -27,22 +30,9 @@ describe('Litegraph module', () => {
 })
 
 describe('Import order dependency', () => {
-  beforeEach(() => {
-    vi.resetModules()
-  })
-
-  test('Imports without error when entry point is imported first', async ({
-    expect
-  }) => {
-    async function importNormally() {
-      const entryPointImport = await import('@/lib/litegraph/src/litegraph')
-      const directImport = await import('@/lib/litegraph/src/LGraph')
-
-      // Sanity check that imports were cleared.
-      expect(Object.is(LiteGraph, entryPointImport.LiteGraph)).toBe(false)
-      expect(Object.is(LiteGraph.LGraph, directImport.LGraph)).toBe(false)
-    }
-
-    await expect(importNormally()).resolves.toBeUndefined()
+  test('Imports reference the same types', ({ expect }) => {
+    // Both imports should reference the same LGraph class
+    expect(LiteGraph.LGraph).toBe(DirectLGraph)
+    expect(LiteGraph.LGraph).toBe(LGraph)
   })
 })

src/lib/litegraph/src/litegraph.ts

@@ -150,7 +150,9 @@ export { BaseWidget } from './widgets/BaseWidget'
 
 export { LegacyWidget } from './widgets/LegacyWidget'
 
-export { isComboWidget, isAssetWidget } from './widgets/widgetMap'
+export { isComboWidget } from './widgets/widgetMap'
+/** @knipIgnoreUnusedButUsedByCustomNodes */
+export { isAssetWidget } from './widgets/widgetMap'
 // Additional test-specific exports
 export { LGraphButton } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'

src/lib/litegraph/src/widgets/ColorWidget.test.ts

@@ -0,0 +1,261 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphNode as LGraphNodeType } from '@/lib/litegraph/src/litegraph'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
+import type { IColorWidget } from '@/lib/litegraph/src/types/widgets'
+import type { ColorWidget as ColorWidgetType } from '@/lib/litegraph/src/widgets/ColorWidget'
+
+type LGraphCanvasType = InstanceType<typeof LGraphCanvas>
+
+function createMockWidgetConfig(
+  overrides: Partial<IColorWidget> = {}
+): IColorWidget {
+  return {
+    type: 'color',
+    name: 'test_color',
+    value: '#ff0000',
+    options: {},
+    y: 0,
+    ...overrides
+  }
+}
+
+function createMockCanvas(): LGraphCanvasType {
+  return {
+    setDirty: vi.fn()
+  } as Partial<LGraphCanvasType> as LGraphCanvasType
+}
+
+function createMockEvent(clientX = 100, clientY = 200): CanvasPointerEvent {
+  return { clientX, clientY } as CanvasPointerEvent
+}
+
+describe('ColorWidget', () => {
+  let node: LGraphNodeType
+  let widget: ColorWidgetType
+  let mockCanvas: LGraphCanvasType
+  let mockEvent: CanvasPointerEvent
+  let ColorWidget: typeof ColorWidgetType
+  let LGraphNode: typeof LGraphNodeType
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    // Reset modules to get fresh globalColorInput state
+    vi.resetModules()
+
+    const litegraph = await import('@/lib/litegraph/src/litegraph')
+    LGraphNode = litegraph.LGraphNode
+
+    const colorWidgetModule =
+      await import('@/lib/litegraph/src/widgets/ColorWidget')
+    ColorWidget = colorWidgetModule.ColorWidget
+
+    node = new LGraphNode('TestNode')
+    mockCanvas = createMockCanvas()
+    mockEvent = createMockEvent()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    document
+      .querySelectorAll('input[type="color"]')
+      .forEach((el) => el.remove())
+  })
+
+  describe('onClick', () => {
+    it('should create a color input and append it to document body', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      expect(input).toBeTruthy()
+      expect(input.parentElement).toBe(document.body)
+    })
+
+    it('should set input value from widget value', () => {
+      widget = new ColorWidget(
+        createMockWidgetConfig({ value: '#00ff00' }),
+        node
+      )
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      expect(input.value).toBe('#00ff00')
+    })
+
+    it('should default to #000000 when widget value is empty', () => {
+      widget = new ColorWidget(createMockWidgetConfig({ value: '' }), node)
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      expect(input.value).toBe('#000000')
+    })
+
+    it('should position input at click coordinates', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+      const event = createMockEvent(150, 250)
+
+      widget.onClick({ e: event, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      expect(input.style.left).toBe('150px')
+      expect(input.style.top).toBe('250px')
+    })
+
+    it('should click the input on next animation frame', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(input, 'click')
+
+      expect(clickSpy).not.toHaveBeenCalled()
+      vi.runAllTimers()
+      expect(clickSpy).toHaveBeenCalled()
+    })
+
+    it('should reuse the same input element on subsequent clicks', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      const firstInput = document.querySelector('input[type="color"]')
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      const secondInput = document.querySelector('input[type="color"]')
+
+      expect(firstInput).toBe(secondInput)
+      expect(document.querySelectorAll('input[type="color"]').length).toBe(1)
+    })
+
+    it('should update input value when clicking with different widget values', () => {
+      const widget1 = new ColorWidget(
+        createMockWidgetConfig({ value: '#ff0000' }),
+        node
+      )
+      const widget2 = new ColorWidget(
+        createMockWidgetConfig({ value: '#0000ff' }),
+        node
+      )
+
+      widget1.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      expect(input.value).toBe('#ff0000')
+
+      widget2.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      expect(input.value).toBe('#0000ff')
+    })
+  })
+
+  describe('onChange', () => {
+    it('should call setValue when color input changes', () => {
+      widget = new ColorWidget(
+        createMockWidgetConfig({ value: '#ff0000' }),
+        node
+      )
+      const setValueSpy = vi.spyOn(widget, 'setValue')
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      input.value = '#00ff00'
+      input.dispatchEvent(new Event('change'))
+
+      expect(setValueSpy).toHaveBeenCalledWith('#00ff00', {
+        e: mockEvent,
+        node,
+        canvas: mockCanvas
+      })
+    })
+
+    it('should call canvas.setDirty after value change', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      input.value = '#00ff00'
+      input.dispatchEvent(new Event('change'))
+
+      expect(mockCanvas.setDirty).toHaveBeenCalledWith(true)
+    })
+
+    it('should remove change listener after firing once', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+      const setValueSpy = vi.spyOn(widget, 'setValue')
+
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+
+      input.value = '#00ff00'
+      input.dispatchEvent(new Event('change'))
+      input.value = '#0000ff'
+      input.dispatchEvent(new Event('change'))
+
+      // Should only be called once despite two change events
+      expect(setValueSpy).toHaveBeenCalledTimes(1)
+      expect(setValueSpy).toHaveBeenCalledWith('#00ff00', expect.any(Object))
+    })
+
+    it('should register new change listener on subsequent onClick', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+      const setValueSpy = vi.spyOn(widget, 'setValue')
+
+      // First click and change
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      const input = document.querySelector(
+        'input[type="color"]'
+      ) as HTMLInputElement
+      input.value = '#00ff00'
+      input.dispatchEvent(new Event('change'))
+
+      // Second click and change
+      widget.onClick({ e: mockEvent, node, canvas: mockCanvas })
+      input.value = '#0000ff'
+      input.dispatchEvent(new Event('change'))
+
+      expect(setValueSpy).toHaveBeenCalledTimes(2)
+      expect(setValueSpy).toHaveBeenNthCalledWith(
+        1,
+        '#00ff00',
+        expect.any(Object)
+      )
+      expect(setValueSpy).toHaveBeenNthCalledWith(
+        2,
+        '#0000ff',
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('type', () => {
+    it('should have type "color"', () => {
+      widget = new ColorWidget(createMockWidgetConfig(), node)
+      expect(widget.type).toBe('color')
+    })
+  })
+})

src/lib/litegraph/src/widgets/ColorWidget.ts

@@ -1,12 +1,26 @@
-import { t } from '@/i18n'
-
 import type { IColorWidget } from '../types/widgets'
-import { BaseWidget } from './BaseWidget'
 import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
+import { BaseWidget } from './BaseWidget'
+
+// Have one color input to prevent leaking instances
+// Browsers don't seem to fire any events when the color picker is cancelled
+let colorInput: HTMLInputElement | null = null
+
+function getColorInput(): HTMLInputElement {
+  if (!colorInput) {
+    colorInput = document.createElement('input')
+    colorInput.type = 'color'
+    colorInput.style.position = 'absolute'
+    colorInput.style.opacity = '0'
+    colorInput.style.pointerEvents = 'none'
+    colorInput.style.zIndex = '-999'
+    document.body.appendChild(colorInput)
+  }
+  return colorInput
+}
 
 /**
- * Widget for displaying a color picker
- * This is a widget that only has a Vue widgets implementation
+ * Widget for displaying a color picker using native HTML color input
  */
 export class ColorWidget
   extends BaseWidget<IColorWidget>
@@ -15,35 +29,59 @@ export class ColorWidget
   override type = 'color' as const
 
   drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    this.drawWidgetShape(ctx, options)
+
     const { width } = options
-    const { y, height } = this
+    const { height, y } = this
+    const { margin } = BaseWidget
 
-    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+    const swatchWidth = 40
+    const swatchHeight = height - 6
+    const swatchRadius = swatchHeight / 2
+    const rightPadding = 10
 
-    ctx.fillStyle = this.background_color
-    ctx.fillRect(15, y, width - 30, height)
+    // Swatch fixed on the right
+    const swatchX = width - margin - rightPadding - swatchWidth
+    const swatchY = y + 3
 
-    ctx.strokeStyle = this.outline_color
-    ctx.strokeRect(15, y, width - 30, height)
+    // Draw color swatch as rounded pill
+    ctx.beginPath()
+    ctx.roundRect(swatchX, swatchY, swatchWidth, swatchHeight, swatchRadius)
+    ctx.fillStyle = this.value || '#000000'
+    ctx.fill()
 
+    // Draw label on the left
+    ctx.fillStyle = this.secondary_text_color
+    ctx.textAlign = 'left'
+    ctx.fillText(this.displayName, margin * 2 + 5, y + height * 0.7)
+
+    // Draw hex value to the left of swatch
     ctx.fillStyle = this.text_color
-    ctx.font = '11px monospace'
-    ctx.textAlign = 'center'
-    ctx.textBaseline = 'middle'
+    ctx.textAlign = 'right'
+    ctx.fillText(this.value || '#000000', swatchX - 8, y + height * 0.7)
 
-    const text = `Color: ${t('widgets.node2only')}`
-    ctx.fillText(text, width / 2, y + height / 2)
-
-    Object.assign(ctx, {
-      fillStyle,
-      strokeStyle,
-      textAlign,
-      textBaseline,
-      font
-    })
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
   }
 
-  onClick(_options: WidgetEventOptions): void {
-    // This is a widget that only has a Vue widgets implementation
+  onClick({ e, node, canvas }: WidgetEventOptions): void {
+    const input = getColorInput()
+    input.value = this.value || '#000000'
+    input.style.left = `${e.clientX}px`
+    input.style.top = `${e.clientY}px`
+
+    input.addEventListener(
+      'change',
+      () => {
+        this.setValue(input.value, { e, node, canvas })
+        canvas.setDirty(true)
+      },
+      { once: true }
+    )
+
+    // Wait for next frame else Chrome doesn't render the color picker at the mouse
+    // Firefox always opens it in top left of window on Windows
+    requestAnimationFrame(() => input.click())
   }
 }

src/lib/litegraph/src/widgets/widgetMap.ts

@@ -141,7 +141,10 @@ export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
 }
 
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}. */
+/**
+ * Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}.
+ * @knipIgnoreUnusedButUsedByCustomNodes
+ */
 export function isAssetWidget(widget: IBaseWidget): widget is IAssetWidget {
   return widget.type === 'asset'
 }

src/locales/en/main.json

@@ -756,6 +756,7 @@
       "title": "Queue Progress",
       "total": "Total: {percent}",
       "colonPercent": ": {percent}",
+      "inlineTotalLabel": "Total",
       "currentNode": "Current node:",
       "viewAllJobs": "View all jobs",
       "viewList": "List view",
@@ -2544,7 +2545,7 @@
     "tagsPlaceholder": "e.g., models, checkpoint",
     "tryAdjustingFilters": "Try adjusting your search or filters",
     "unknown": "Unknown",
-    "unsupportedUrlSource": "Only URLs from {sources} are supported",
+    "unsupportedUrlSource": "This URL is not supported. Use a direct model link from {sources}. See the how-to videos below for help.",
     "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.",
     "upgradeToUnlockFeature": "Upgrade to unlock this feature",
     "upload": "Import",

src/platform/assets/components/AssetCard.stories.ts

@@ -10,7 +10,7 @@ const createAssetData = (
   overrides: Partial<AssetDisplayItem> = {}
 ): AssetDisplayItem => ({
   ...baseAsset,
-  description:
+  secondaryText:
     'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
   badges: [
     { label: 'checkpoints', type: 'type' },
@@ -131,20 +131,21 @@ export const EdgeCases: Story = {
         // Default case for comparison
         createAssetData({
           name: 'Complete Data',
-          description: 'Asset with all data present for comparison'
+          secondaryText: 'Asset with all data present for comparison'
         }),
         // No badges
         createAssetData({
           id: 'no-badges',
           name: 'No Badges',
-          description: 'Testing graceful handling when badges are not provided',
+          secondaryText:
+            'Testing graceful handling when badges are not provided',
           badges: []
         }),
         // No stars
         createAssetData({
           id: 'no-stars',
           name: 'No Stars',
-          description: 'Testing missing stars data gracefully',
+          secondaryText: 'Testing missing stars data gracefully',
           stats: {
             downloadCount: '1.8k',
             formattedDate: '3/15/25'
@@ -154,7 +155,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-downloads',
           name: 'No Downloads',
-          description: 'Testing missing downloads data gracefully',
+          secondaryText: 'Testing missing downloads data gracefully',
           stats: {
             stars: '4.2k',
             formattedDate: '3/15/25'
@@ -164,7 +165,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-date',
           name: 'No Date',
-          description: 'Testing missing date data gracefully',
+          secondaryText: 'Testing missing date data gracefully',
           stats: {
             stars: '4.2k',
             downloadCount: '1.8k'
@@ -174,21 +175,21 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-stats',
           name: 'No Stats',
-          description: 'Testing when all stats are missing',
+          secondaryText: 'Testing when all stats are missing',
           stats: {}
         }),
-        // Long description
+        // Long secondaryText
         createAssetData({
           id: 'long-desc',
           name: 'Long Description',
-          description:
+          secondaryText:
             'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
         }),
         // Minimal data
         createAssetData({
           id: 'minimal',
           name: 'Minimal',
-          description: 'Basic model',
+          secondaryText: 'Basic model',
           tags: ['models'],
           badges: [],
           stats: {}

src/platform/assets/components/AssetCard.vue

@@ -82,14 +82,14 @@
       </h3>
       <p
         :id="descId"
-        v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
+        v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
         :class="
           cn(
             'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
           )
         "
       >
-        {{ asset.description }}
+        {{ asset.secondaryText }}
       </p>
       <div class="flex items-center justify-between gap-2 mt-auto">
         <div class="flex gap-3 text-xs text-muted-foreground">

src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts

@@ -34,7 +34,7 @@ describe('ModelInfoPanel', () => {
     created_at: '2024-01-01T00:00:00Z',
     updated_at: '2024-01-01T00:00:00Z',
     last_access_time: '2024-01-01T00:00:00Z',
-    description: 'A test model description',
+    secondaryText: 'A test model description',
     badges: [],
     stats: {},
     ...overrides

src/platform/assets/composables/useAssetBrowser.test.ts

@@ -84,14 +84,14 @@ describe('useAssetBrowser', () => {
       expect(result.name).toBe(apiAsset.name)
 
       // Adds display properties
-      expect(result.description).toBe('Test model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
       expect(result.badges).toContainEqual({
         label: 'checkpoints',
         type: 'type'
       })
     })
 
-    it('creates fallback description from tags when metadata missing', () => {
+    it('creates secondaryText from filename when metadata missing', () => {
       const apiAsset = createApiAsset({
         tags: ['models', 'loras'],
         user_metadata: undefined
@@ -100,7 +100,7 @@ describe('useAssetBrowser', () => {
       const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
       const result = filteredAssets.value[0]
 
-      expect(result.description).toBe('loras model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
     })
 
     it('removes category prefix from badge labels', () => {

src/platform/assets/composables/useAssetBrowser.ts

@@ -9,8 +9,8 @@ import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vu
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
   getAssetBaseModels,
-  getAssetDescription,
-  getAssetDisplayName
+  getAssetDisplayName,
+  getAssetFilename
 } from '@/platform/assets/utils/assetMetadataUtils'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
@@ -70,7 +70,7 @@ type AssetBadge = {
 
 // Display properties for transformed assets
 export interface AssetDisplayItem extends AssetItem {
-  description: string
+  secondaryText: string
   badges: AssetBadge[]
   stats: {
     formattedDate?: string
@@ -116,15 +116,11 @@ export function useAssetBrowser(
 
   // Transform API asset to display asset
   function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
-    // Extract description from metadata or create from tags
-    const typeTag = asset.tags.find((tag) => tag !== 'models')
-    const description =
-      getAssetDescription(asset) ||
-      `${typeTag || t('assetBrowser.unknown')} model`
+    const secondaryText = getAssetFilename(asset)
 
-    // Create badges from tags and metadata
     const badges: AssetBadge[] = []
 
+    const typeTag = asset.tags.find((tag) => tag !== 'models')
     // Type badge from non-root tag
     if (typeTag) {
       // Remove category prefix from badge label (e.g. "checkpoint/model" → "model")
@@ -152,7 +148,7 @@ export function useAssetBrowser(
 
     return {
       ...asset,
-      description,
+      secondaryText,
       badges,
       stats
     }

src/platform/assets/composables/useMediaAssetActions.test.ts

@@ -4,6 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
+import { useMediaAssetActions } from './useMediaAssetActions'
+
 // Use vi.hoisted to create a mutable reference for isCloud
 const mockIsCloud = vi.hoisted(() => ({ value: false }))
 
@@ -126,7 +128,6 @@ describe('useMediaAssetActions', () => {
       })
 
       it('should use asset.name as filename', async () => {
-        const { useMediaAssetActions } = await import('./useMediaAssetActions')
         const actions = useMediaAssetActions()
 
         const asset = createMockAsset({
@@ -146,7 +147,6 @@ describe('useMediaAssetActions', () => {
       })
 
       it('should use asset_hash as filename when available', async () => {
-        const { useMediaAssetActions } = await import('./useMediaAssetActions')
         const actions = useMediaAssetActions()
 
         const asset = createMockAsset({
@@ -160,7 +160,6 @@ describe('useMediaAssetActions', () => {
       })
 
       it('should fall back to asset.name when asset_hash is not available', async () => {
-        const { useMediaAssetActions } = await import('./useMediaAssetActions')
         const actions = useMediaAssetActions()
 
         const asset = createMockAsset({
@@ -174,7 +173,6 @@ describe('useMediaAssetActions', () => {
       })
 
       it('should fall back to asset.name when asset_hash is null', async () => {
-        const { useMediaAssetActions } = await import('./useMediaAssetActions')
         const actions = useMediaAssetActions()
 
         const asset = createMockAsset({
@@ -196,7 +194,6 @@ describe('useMediaAssetActions', () => {
       })
 
       it('should use asset_hash for each asset', async () => {
-        const { useMediaAssetActions } = await import('./useMediaAssetActions')
         const actions = useMediaAssetActions()
 
         const assets = [

src/platform/assets/utils/createAssetWidget.ts

@@ -0,0 +1,88 @@
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  IBaseWidget,
+  IWidgetAssetOptions
+} from '@/lib/litegraph/src/types/widgets'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+import {
+  assetFilenameSchema,
+  assetItemSchema
+} from '@/platform/assets/schemas/assetSchema'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+
+interface CreateAssetWidgetParams {
+  /** The node to add the widget to */
+  node: LGraphNode
+  /** The widget name */
+  widgetName: string
+  /** The node type to show in asset browser (may differ from node.comfyClass for PrimitiveNode) */
+  nodeTypeForBrowser: string
+  /** Default value for the widget */
+  defaultValue?: string
+  /** Callback when widget value changes */
+  onValueChange?: (
+    widget: IBaseWidget,
+    newValue: string,
+    oldValue: unknown
+  ) => void
+}
+
+/**
+ * Creates an asset widget that opens the Asset Browser dialog for model selection.
+ * Used by both regular nodes (via useComboWidget) and PrimitiveNode.
+ *
+ * @param params - Configuration for the asset widget
+ * @returns The created asset widget
+ */
+export function createAssetWidget(
+  params: CreateAssetWidgetParams
+): IBaseWidget {
+  const { node, widgetName, nodeTypeForBrowser, defaultValue, onValueChange } =
+    params
+
+  const displayLabel = defaultValue ?? t('widgets.selectModel')
+  const assetBrowserDialog = useAssetBrowserDialog()
+
+  async function openModal(widget: IBaseWidget) {
+    await assetBrowserDialog.show({
+      nodeType: nodeTypeForBrowser,
+      inputName: widgetName,
+      currentValue: widget.value as string,
+      onAssetSelected: (asset) => {
+        const validatedAsset = assetItemSchema.safeParse(asset)
+
+        if (!validatedAsset.success) {
+          console.error(
+            'Invalid asset item:',
+            validatedAsset.error.errors,
+            'Received:',
+            asset
+          )
+          return
+        }
+
+        const filename = getAssetFilename(validatedAsset.data)
+        const validatedFilename = assetFilenameSchema.safeParse(filename)
+
+        if (!validatedFilename.success) {
+          console.error(
+            'Invalid asset filename:',
+            validatedFilename.error.errors,
+            'for asset:',
+            validatedAsset.data.id
+          )
+          return
+        }
+
+        const oldValue = widget.value
+        widget.value = validatedFilename.data
+        onValueChange?.(widget, validatedFilename.data, oldValue)
+      }
+    })
+  }
+
+  const options: IWidgetAssetOptions = { openModal }
+
+  return node.addWidget('asset', widgetName, displayLabel, () => {}, options)
+}

src/platform/surveys/useFeatureUsageTracker.test.ts

@@ -1,27 +1,27 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useFeatureUsageTracker } from './useFeatureUsageTracker'
+
 const STORAGE_KEY = 'Comfy.FeatureUsage'
 
 describe('useFeatureUsageTracker', () => {
   beforeEach(() => {
     localStorage.clear()
-    vi.resetModules()
+    vi.clearAllMocks()
   })
 
   afterEach(() => {
     localStorage.clear()
   })
 
-  it('initializes with zero count for new feature', async () => {
-    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
-    const { useCount } = useFeatureUsageTracker('test-feature')
+  it('initializes with zero count for new feature', () => {
+    const { useCount } = useFeatureUsageTracker('test-feature-1')
 
     expect(useCount.value).toBe(0)
   })
 
-  it('increments count on trackUsage', async () => {
-    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
-    const { useCount, trackUsage } = useFeatureUsageTracker('test-feature')
+  it('increments count on trackUsage', () => {
+    const { useCount, trackUsage } = useFeatureUsageTracker('test-feature-2')
 
     expect(useCount.value).toBe(0)
 
@@ -32,14 +32,12 @@ describe('useFeatureUsageTracker', () => {
     expect(useCount.value).toBe(2)
   })
 
-  it('sets firstUsed only on first use', async () => {
+  it('sets firstUsed only on first use', () => {
     vi.useFakeTimers()
     const firstTs = 1000000
     vi.setSystemTime(firstTs)
     try {
-      const { useFeatureUsageTracker } =
-        await import('./useFeatureUsageTracker')
-      const { usage, trackUsage } = useFeatureUsageTracker('test-feature')
+      const { usage, trackUsage } = useFeatureUsageTracker('test-feature-3')
 
       trackUsage()
       expect(usage.value?.firstUsed).toBe(firstTs)
@@ -52,12 +50,10 @@ describe('useFeatureUsageTracker', () => {
     }
   })
 
-  it('updates lastUsed on each use', async () => {
+  it('updates lastUsed on each use', () => {
     vi.useFakeTimers()
     try {
-      const { useFeatureUsageTracker } =
-        await import('./useFeatureUsageTracker')
-      const { usage, trackUsage } = useFeatureUsageTracker('test-feature')
+      const { usage, trackUsage } = useFeatureUsageTracker('test-feature-4')
 
       trackUsage()
       const firstLastUsed = usage.value?.lastUsed ?? 0
@@ -71,10 +67,9 @@ describe('useFeatureUsageTracker', () => {
     }
   })
 
-  it('reset clears feature data', async () => {
-    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+  it('reset clears feature data', () => {
     const { useCount, trackUsage, reset } =
-      useFeatureUsageTracker('test-feature')
+      useFeatureUsageTracker('test-feature-5')
 
     trackUsage()
     trackUsage()
@@ -84,8 +79,7 @@ describe('useFeatureUsageTracker', () => {
     expect(useCount.value).toBe(0)
   })
 
-  it('tracks multiple features independently', async () => {
-    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
+  it('tracks multiple features independently', () => {
     const featureA = useFeatureUsageTracker('feature-a')
     const featureB = useFeatureUsageTracker('feature-b')
 
@@ -100,8 +94,6 @@ describe('useFeatureUsageTracker', () => {
   it('persists to localStorage', async () => {
     vi.useFakeTimers()
     try {
-      const { useFeatureUsageTracker } =
-        await import('./useFeatureUsageTracker')
       const { trackUsage } = useFeatureUsageTracker('persisted-feature')
 
       trackUsage()
@@ -114,7 +106,7 @@ describe('useFeatureUsageTracker', () => {
     }
   })
 
-  it('loads existing data from localStorage', async () => {
+  it('loads existing data from localStorage', () => {
     localStorage.setItem(
       STORAGE_KEY,
       JSON.stringify({
@@ -122,8 +114,6 @@ describe('useFeatureUsageTracker', () => {
       })
     )
 
-    vi.resetModules()
-    const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker')
     const { useCount } = useFeatureUsageTracker('existing-feature')
 
     expect(useCount.value).toBe(5)

src/platform/telemetry/topupTracker.test.ts

@@ -1,6 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type * as TopupTrackerModule from '@/platform/telemetry/topupTracker'
+import {
+  startTopupTracking,
+  checkForCompletedTopup,
+  clearTopupTracking
+} from '@/platform/telemetry/topupTracker'
 import type { AuditLog } from '@/services/customerEventsService'
 
 // Mock localStorage
@@ -25,19 +29,15 @@ vi.mock('@/platform/telemetry', () => ({
 }))
 
 describe('topupTracker', () => {
-  let topupTracker: typeof TopupTrackerModule
-
-  beforeEach(async () => {
+  beforeEach(() => {
     vi.clearAllMocks()
-    // Dynamically import to ensure fresh module state
-    topupTracker = await import('@/platform/telemetry/topupTracker')
   })
 
   describe('startTopupTracking', () => {
     it('should save current timestamp to localStorage', () => {
       const beforeTimestamp = Date.now()
 
-      topupTracker.startTopupTracking()
+      startTopupTracking()
 
       expect(mockLocalStorage.setItem).toHaveBeenCalledWith(
         'pending_topup_timestamp',
@@ -57,7 +57,7 @@ describe('topupTracker', () => {
     it('should return false if no pending topup exists', () => {
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      const result = topupTracker.checkForCompletedTopup([])
+      const result = checkForCompletedTopup([])
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -66,7 +66,7 @@ describe('topupTracker', () => {
     it('should return false if events array is empty', () => {
       mockLocalStorage.getItem.mockReturnValue(Date.now().toString())
 
-      const result = topupTracker.checkForCompletedTopup([])
+      const result = checkForCompletedTopup([])
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -75,7 +75,7 @@ describe('topupTracker', () => {
     it('should return false if events array is null', () => {
       mockLocalStorage.getItem.mockReturnValue(Date.now().toString())
 
-      const result = topupTracker.checkForCompletedTopup(null)
+      const result = checkForCompletedTopup(null)
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -94,7 +94,7 @@ describe('topupTracker', () => {
         }
       ]
 
-      const result = topupTracker.checkForCompletedTopup(events)
+      const result = checkForCompletedTopup(events)
 
       expect(result).toBe(false)
       expect(mockLocalStorage.removeItem).toHaveBeenCalledWith(
@@ -122,7 +122,7 @@ describe('topupTracker', () => {
         }
       ]
 
-      const result = topupTracker.checkForCompletedTopup(events)
+      const result = checkForCompletedTopup(events)
 
       expect(result).toBe(true)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).toHaveBeenCalledOnce()
@@ -144,7 +144,7 @@ describe('topupTracker', () => {
         }
       ]
 
-      const result = topupTracker.checkForCompletedTopup(events)
+      const result = checkForCompletedTopup(events)
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -164,7 +164,7 @@ describe('topupTracker', () => {
         }
       ]
 
-      const result = topupTracker.checkForCompletedTopup(events)
+      const result = checkForCompletedTopup(events)
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -189,7 +189,7 @@ describe('topupTracker', () => {
         }
       ]
 
-      const result = topupTracker.checkForCompletedTopup(events)
+      const result = checkForCompletedTopup(events)
 
       expect(result).toBe(false)
       expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
@@ -198,7 +198,7 @@ describe('topupTracker', () => {
 
   describe('clearTopupTracking', () => {
     it('should remove pending topup from localStorage', () => {
-      topupTracker.clearTopupTracking()
+      clearTopupTracking()
 
       expect(mockLocalStorage.removeItem).toHaveBeenCalledWith(
         'pending_topup_timestamp'

src/platform/telemetry/useTelemetry.test.ts

@@ -1,5 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useTelemetry } from '@/platform/telemetry'
+
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: false
 }))
@@ -9,17 +11,14 @@ describe('useTelemetry', () => {
     vi.clearAllMocks()
   })
 
-  it('should return null when not in cloud distribution', async () => {
-    const { useTelemetry } = await import('@/platform/telemetry')
+  it('should return null when not in cloud distribution', () => {
     const provider = useTelemetry()
 
     // Should return null for OSS builds
     expect(provider).toBeNull()
-  }, 10000)
-
-  it('should return null consistently for OSS builds', async () => {
-    const { useTelemetry } = await import('@/platform/telemetry')
+  })
 
+  it('should return null consistently for OSS builds', () => {
     const provider1 = useTelemetry()
     const provider2 = useTelemetry()
 

src/platform/updates/common/releaseStore.test.ts

@@ -1,19 +1,96 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { compare, valid } from 'semver'
-import type { Mock } from 'vitest'
+import { until } from '@vueuse/core'
+import { setActivePinia } from 'pinia'
+import { compare } from 'semver'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
+import { useReleaseService } from '@/platform/updates/common/releaseService'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { isElectron } from '@/utils/envUtil'
+import { createTestingPinia } from '@pinia/testing'
+import type { SystemStats } from '@/types'
 
 // Mock the dependencies
-vi.mock('semver')
-vi.mock('@/utils/envUtil')
+vi.mock('semver', () => ({
+  compare: vi.fn(),
+  valid: vi.fn(() => '1.0.0')
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => true)
+}))
+
 vi.mock('@/platform/distribution/types', () => ({ isCloud: false }))
-vi.mock('@/platform/updates/common/releaseService')
-vi.mock('@/platform/settings/settingStore')
-vi.mock('@/stores/systemStatsStore')
+
+vi.mock('@/platform/updates/common/releaseService', () => {
+  const getReleases = vi.fn()
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+  return {
+    useReleaseService: () => ({
+      getReleases,
+      isLoading,
+      error
+    })
+  }
+})
+
+vi.mock('@/platform/settings/settingStore', () => {
+  const get = vi.fn((key: string) => {
+    if (key === 'Comfy.Notification.ShowVersionUpdates') return true
+    return null
+  })
+  const set = vi.fn()
+  return {
+    useSettingStore: () => ({ get, set })
+  }
+})
+
+const mockSystemStatsState = vi.hoisted(() => ({
+  systemStats: {
+    system: {
+      comfyui_version: '1.0.0',
+      argv: []
+    }
+  } satisfies {
+    system: Partial<SystemStats['system']>
+  },
+  isInitialized: true,
+  reset() {
+    this.systemStats = {
+      system: {
+        comfyui_version: '1.0.0',
+        argv: []
+      } satisfies Partial<SystemStats['system']>
+    }
+    this.isInitialized = true
+  }
+}))
+vi.mock('@/stores/systemStatsStore', () => {
+  const refetchSystemStats = vi.fn()
+  const getFormFactor = vi.fn(() => 'git-windows')
+  return {
+    useSystemStatsStore: () => ({
+      get systemStats() {
+        return mockSystemStatsState.systemStats
+      },
+      set systemStats(val) {
+        mockSystemStatsState.systemStats = val
+      },
+      get isInitialized() {
+        return mockSystemStatsState.isInitialized
+      },
+      set isInitialized(val) {
+        mockSystemStatsState.isInitialized = val
+      },
+      refetchSystemStats,
+      getFormFactor
+    })
+  }
+})
 vi.mock('@vueuse/core', () => ({
   until: vi.fn(() => Promise.resolve()),
   useStorage: vi.fn(() => ({ value: {} })),
@@ -21,27 +98,6 @@ vi.mock('@vueuse/core', () => ({
 }))
 
 describe('useReleaseStore', () => {
-  let store: ReturnType<typeof useReleaseStore>
-  let mockReleaseService: {
-    getReleases: Mock
-    isLoading: ReturnType<typeof ref<boolean>>
-    error: ReturnType<typeof ref<string | null>>
-  }
-  let mockSettingStore: { get: Mock; set: Mock }
-  let mockSystemStatsStore: {
-    systemStats: {
-      system: {
-        comfyui_version: string
-        argv?: string[]
-        [key: string]: unknown
-      }
-      devices?: unknown[]
-    } | null
-    isInitialized: boolean
-    refetchSystemStats: Mock
-    getFormFactor: Mock
-  }
-
   const mockRelease = {
     id: 1,
     project: 'comfyui' as const,
@@ -51,71 +107,16 @@ describe('useReleaseStore', () => {
     attention: 'high' as const
   }
 
-  beforeEach(async () => {
-    setActivePinia(createPinia())
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
 
-    // Reset all mocks
-    vi.clearAllMocks()
-
-    // Setup mock services with proper refs
-    mockReleaseService = {
-      getReleases: vi.fn(),
-      isLoading: ref(false),
-      error: ref(null)
-    }
-
-    mockSettingStore = {
-      get: vi.fn(),
-      set: vi.fn()
-    }
-
-    mockSystemStatsStore = {
-      systemStats: {
-        system: {
-          comfyui_version: '1.0.0'
-        }
-      },
-      isInitialized: true,
-      refetchSystemStats: vi.fn(),
-      getFormFactor: vi.fn(() => 'git-windows')
-    }
-
-    // Setup mock implementations
-    const { useReleaseService } =
-      await import('@/platform/updates/common/releaseService')
-    const { useSettingStore } = await import('@/platform/settings/settingStore')
-    const { useSystemStatsStore } = await import('@/stores/systemStatsStore')
-    const { isElectron } = await import('@/utils/envUtil')
-
-    vi.mocked(useReleaseService).mockReturnValue(
-      mockReleaseService as Partial<
-        ReturnType<typeof useReleaseService>
-      > as ReturnType<typeof useReleaseService>
-    )
-    vi.mocked(useSettingStore).mockReturnValue(
-      mockSettingStore as Partial<
-        ReturnType<typeof useSettingStore>
-      > as ReturnType<typeof useSettingStore>
-    )
-    vi.mocked(useSystemStatsStore).mockReturnValue(
-      mockSystemStatsStore as Partial<
-        ReturnType<typeof useSystemStatsStore>
-      > as ReturnType<typeof useSystemStatsStore>
-    )
-    vi.mocked(isElectron).mockReturnValue(true)
-    vi.mocked(valid).mockReturnValue('1.0.0')
-
-    // Default showVersionUpdates to true
-    mockSettingStore.get.mockImplementation((key: string) => {
-      if (key === 'Comfy.Notification.ShowVersionUpdates') return true
-      return null
-    })
-
-    store = useReleaseStore()
+    vi.resetAllMocks()
+    mockSystemStatsState.reset()
   })
 
   describe('initial state', () => {
     it('should initialize with default state', () => {
+      const store = useReleaseStore()
       expect(store.releases).toEqual([])
       expect(store.isLoading).toBe(false)
       expect(store.error).toBeNull()
@@ -124,6 +125,7 @@ describe('useReleaseStore', () => {
 
   describe('computed properties', () => {
     it('should return most recent release', () => {
+      const store = useReleaseStore()
       const olderRelease = {
         ...mockRelease,
         id: 2,
@@ -136,6 +138,7 @@ describe('useReleaseStore', () => {
     })
 
     it('should return 3 most recent releases', () => {
+      const store = useReleaseStore()
       const releases = [
         mockRelease,
         { ...mockRelease, id: 2, version: '1.1.0' },
@@ -148,6 +151,7 @@ describe('useReleaseStore', () => {
     })
 
     it('should show update button (shouldShowUpdateButton)', () => {
+      const store = useReleaseStore()
       vi.mocked(compare).mockReturnValue(1) // newer version available
 
       store.releases = [mockRelease]
@@ -155,6 +159,7 @@ describe('useReleaseStore', () => {
     })
 
     it('should not show update button when no new version', () => {
+      const store = useReleaseStore()
       vi.mocked(compare).mockReturnValue(-1) // current version is newer
 
       store.releases = [mockRelease]
@@ -163,19 +168,17 @@ describe('useReleaseStore', () => {
   })
 
   describe('showVersionUpdates setting', () => {
-    beforeEach(async () => {
-      store.releases = [mockRelease]
-    })
-
     describe('when notifications are enabled', () => {
-      beforeEach(async () => {
-        mockSettingStore.get.mockImplementation((key: string) => {
+      beforeEach(() => {
+        const settingStore = useSettingStore()
+        vi.mocked(settingStore.get).mockImplementation((key: string) => {
           if (key === 'Comfy.Notification.ShowVersionUpdates') return true
           return null
         })
       })
 
       it('should show toast for medium/high attention releases', () => {
+        const store = useReleaseStore()
         vi.mocked(compare).mockReturnValue(1)
         store.releases = [mockRelease]
 
@@ -183,6 +186,7 @@ describe('useReleaseStore', () => {
       })
 
       it('should not show toast for low attention releases', () => {
+        const store = useReleaseStore()
         vi.mocked(compare).mockReturnValue(1)
 
         const lowAttentionRelease = {
@@ -196,13 +200,18 @@ describe('useReleaseStore', () => {
       })
 
       it('should show red dot for new versions', () => {
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
         vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
 
       it('should show popup for latest version', () => {
-        mockSystemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
+        const systemStatsStore = useSystemStatsStore()
+        systemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
 
         vi.mocked(compare).mockReturnValue(0)
 
@@ -210,11 +219,13 @@ describe('useReleaseStore', () => {
       })
 
       it('should fetch releases during initialization', async () => {
-        mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+        const store = useReleaseStore()
+        const releaseService = useReleaseService()
+        vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
         await store.initialize()
 
-        expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
+        expect(releaseService.getReleases).toHaveBeenCalledWith({
           project: 'comfyui',
           current_version: '1.0.0',
           form_factor: 'git-windows',
@@ -224,27 +235,35 @@ describe('useReleaseStore', () => {
     })
 
     describe('when notifications are disabled', () => {
-      beforeEach(async () => {
-        mockSettingStore.get.mockImplementation((key: string) => {
+      beforeEach(() => {
+        const settingStore = useSettingStore()
+        vi.mocked(settingStore.get).mockImplementation((key: string) => {
           if (key === 'Comfy.Notification.ShowVersionUpdates') return false
           return null
         })
       })
 
       it('should not show toast even with new version available', () => {
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
         vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowToast).toBe(false)
       })
 
       it('should not show red dot even with new version available', () => {
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
         vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
       it('should not show popup even for latest version', () => {
-        mockSystemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
+        const systemStatsStore = useSystemStatsStore()
+        systemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
 
         vi.mocked(compare).mockReturnValue(0)
 
@@ -252,15 +271,19 @@ describe('useReleaseStore', () => {
       })
 
       it('should skip fetching releases during initialization', async () => {
+        const store = useReleaseStore()
+        const releaseService = useReleaseService()
         await store.initialize()
 
-        expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+        expect(releaseService.getReleases).not.toHaveBeenCalled()
       })
 
       it('should not fetch releases when calling fetchReleases directly', async () => {
+        const store = useReleaseStore()
+        const releaseService = useReleaseService()
         await store.fetchReleases()
 
-        expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+        expect(releaseService.getReleases).not.toHaveBeenCalled()
         expect(store.isLoading).toBe(false)
       })
     })
@@ -268,11 +291,13 @@ describe('useReleaseStore', () => {
 
   describe('release initialization', () => {
     it('should fetch releases successfully', async () => {
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
+      expect(releaseService.getReleases).toHaveBeenCalledWith({
         project: 'comfyui',
         current_version: '1.0.0',
         form_factor: 'git-windows',
@@ -282,12 +307,15 @@ describe('useReleaseStore', () => {
     })
 
     it('should include form_factor in API call', async () => {
-      mockSystemStatsStore.getFormFactor.mockReturnValue('desktop-mac')
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      vi.mocked(systemStatsStore.getFormFactor).mockReturnValue('desktop-mac')
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
+      expect(releaseService.getReleases).toHaveBeenCalledWith({
         project: 'comfyui',
         current_version: '1.0.0',
         form_factor: 'desktop-mac',
@@ -296,16 +324,22 @@ describe('useReleaseStore', () => {
     })
 
     it('should skip fetching when --disable-api-nodes is present', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = ['--disable-api-nodes']
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = ['--disable-api-nodes']
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+      expect(releaseService.getReleases).not.toHaveBeenCalled()
       expect(store.isLoading).toBe(false)
     })
 
     it('should skip fetching when --disable-api-nodes is one of multiple args', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = [
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = [
         '--port',
         '8080',
         '--disable-api-nodes',
@@ -314,37 +348,46 @@ describe('useReleaseStore', () => {
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+      expect(releaseService.getReleases).not.toHaveBeenCalled()
       expect(store.isLoading).toBe(false)
     })
 
     it('should fetch normally when --disable-api-nodes is not present', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = [
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = [
         '--port',
         '8080',
         '--verbose'
       ]
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
       expect(store.releases).toEqual([mockRelease])
     })
 
     it('should fetch normally when argv is undefined', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = undefined
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      // TODO: Consider deleting this test since the types have to be violated for it to be relevant
+      delete (systemStatsStore.systemStats!.system as { argv?: string[] }).argv
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
       expect(store.releases).toEqual([mockRelease])
     })
 
     it('should handle API errors gracefully', async () => {
-      mockReleaseService.getReleases.mockResolvedValue(null)
-      mockReleaseService.error.value = 'API Error'
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      vi.mocked(releaseService.getReleases).mockResolvedValue(null)
+      releaseService.error.value = 'API Error'
 
       await store.initialize()
 
@@ -353,7 +396,9 @@ describe('useReleaseStore', () => {
     })
 
     it('should handle non-Error objects', async () => {
-      mockReleaseService.getReleases.mockRejectedValue('String error')
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      vi.mocked(releaseService.getReleases).mockRejectedValue('String error')
 
       await store.initialize()
 
@@ -361,12 +406,14 @@ describe('useReleaseStore', () => {
     })
 
     it('should set loading state correctly', async () => {
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
       let resolvePromise: (value: ReleaseNote[] | null) => void
       const promise = new Promise<ReleaseNote[] | null>((resolve) => {
         resolvePromise = resolve
       })
 
-      mockReleaseService.getReleases.mockReturnValue(promise)
+      vi.mocked(releaseService.getReleases).mockReturnValue(promise)
 
       const initPromise = store.initialize()
       expect(store.isLoading).toBe(true)
@@ -378,19 +425,23 @@ describe('useReleaseStore', () => {
     })
 
     it('should fetch system stats if not available', async () => {
-      const { until } = await import('@vueuse/core')
-      mockSystemStatsStore.systemStats = null
-      mockSystemStatsStore.isInitialized = false
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats = null
+      systemStatsStore.isInitialized = false
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.initialize()
 
-      expect(until).toHaveBeenCalled()
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(vi.mocked(until)).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
     })
 
     it('should not set loading state when notifications disabled', async () => {
-      mockSettingStore.get.mockImplementation((key: string) => {
+      const store = useReleaseStore()
+      const settingStore = useSettingStore()
+      vi.mocked(settingStore.get).mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return false
         return null
       })
@@ -403,16 +454,22 @@ describe('useReleaseStore', () => {
 
   describe('--disable-api-nodes argument handling', () => {
     it('should skip fetchReleases when --disable-api-nodes is present', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = ['--disable-api-nodes']
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = ['--disable-api-nodes']
 
       await store.fetchReleases()
 
-      expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+      expect(releaseService.getReleases).not.toHaveBeenCalled()
       expect(store.isLoading).toBe(false)
     })
 
     it('should skip fetchReleases when --disable-api-nodes is among other args', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = [
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = [
         '--port',
         '8080',
         '--disable-api-nodes',
@@ -421,96 +478,109 @@ describe('useReleaseStore', () => {
 
       await store.fetchReleases()
 
-      expect(mockReleaseService.getReleases).not.toHaveBeenCalled()
+      expect(releaseService.getReleases).not.toHaveBeenCalled()
       expect(store.isLoading).toBe(false)
     })
 
     it('should proceed with fetchReleases when --disable-api-nodes is not present', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = [
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.argv = [
         '--port',
         '8080',
         '--verbose'
       ]
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.fetchReleases()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
     })
 
     it('should proceed with fetchReleases when argv is undefined', async () => {
-      mockSystemStatsStore.systemStats!.system.argv = undefined
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      delete (systemStatsStore.systemStats!.system as { argv?: string[] }).argv
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.fetchReleases()
 
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
     })
 
     it('should proceed with fetchReleases when system stats are not available', async () => {
-      const { until } = await import('@vueuse/core')
-      mockSystemStatsStore.systemStats = null
-      mockSystemStatsStore.isInitialized = false
-      mockReleaseService.getReleases.mockResolvedValue([mockRelease])
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats = null
+      systemStatsStore.isInitialized = false
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
 
       await store.fetchReleases()
 
       expect(until).toHaveBeenCalled()
-      expect(mockReleaseService.getReleases).toHaveBeenCalled()
+      expect(releaseService.getReleases).toHaveBeenCalled()
     })
   })
 
   describe('action handlers', () => {
-    beforeEach(async () => {
-      store.releases = [mockRelease]
-    })
-
     it('should handle skip release', async () => {
+      const store = useReleaseStore()
+      store.releases = [mockRelease]
+      const settingStore = useSettingStore()
       await store.handleSkipRelease('1.2.0')
 
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Version',
         '1.2.0'
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Status',
         'skipped'
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Timestamp',
         expect.any(Number)
       )
     })
 
     it('should handle show changelog', async () => {
+      const store = useReleaseStore()
+      store.releases = [mockRelease]
+      const settingStore = useSettingStore()
       await store.handleShowChangelog('1.2.0')
 
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Version',
         '1.2.0'
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Status',
         'changelog seen'
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Timestamp',
         expect.any(Number)
       )
     })
 
     it('should handle whats new seen', async () => {
+      const store = useReleaseStore()
+      store.releases = [mockRelease]
+      const settingStore = useSettingStore()
       await store.handleWhatsNewSeen('1.2.0')
 
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Version',
         '1.2.0'
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Status',
         "what's new seen"
       )
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
+      expect(settingStore.set).toHaveBeenCalledWith(
         'Comfy.Release.Timestamp',
         expect.any(Number)
       )
@@ -519,7 +589,9 @@ describe('useReleaseStore', () => {
 
   describe('popup visibility', () => {
     it('should show toast for medium/high attention releases', () => {
-      mockSettingStore.get.mockImplementation((key: string) => {
+      const store = useReleaseStore()
+      const settingStore = useSettingStore()
+      vi.mocked(settingStore.get).mockImplementation((key: string) => {
         if (key === 'Comfy.Release.Version') return null
         if (key === 'Comfy.Release.Status') return null
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
@@ -534,8 +606,10 @@ describe('useReleaseStore', () => {
     })
 
     it('should show red dot for new versions', () => {
+      const store = useReleaseStore()
+      const settingStore = useSettingStore()
       vi.mocked(compare).mockReturnValue(1)
-      mockSettingStore.get.mockImplementation((key: string) => {
+      vi.mocked(settingStore.get).mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
         return null
       })
@@ -546,8 +620,11 @@ describe('useReleaseStore', () => {
     })
 
     it('should show popup for latest version', () => {
-      mockSystemStatsStore.systemStats!.system.comfyui_version = '1.2.0' // Same as release
-      mockSettingStore.get.mockImplementation((key: string) => {
+      const store = useReleaseStore()
+      const systemStatsStore = useSystemStatsStore()
+      const settingStore = useSettingStore()
+      systemStatsStore.systemStats!.system.comfyui_version = '1.2.0' // Same as release
+      vi.mocked(settingStore.get).mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
         return null
       })
@@ -562,8 +639,11 @@ describe('useReleaseStore', () => {
 
   describe('edge cases', () => {
     it('should handle missing system stats gracefully', async () => {
-      mockSystemStatsStore.systemStats = null
-      mockSettingStore.get.mockImplementation((key: string) => {
+      const store = useReleaseStore()
+      const systemStatsStore = useSystemStatsStore()
+      const settingStore = useSettingStore()
+      systemStatsStore.systemStats = null
+      vi.mocked(settingStore.get).mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return false
         return null
       })
@@ -571,11 +651,13 @@ describe('useReleaseStore', () => {
       await store.initialize()
 
       // Should not fetch system stats when notifications disabled
-      expect(mockSystemStatsStore.refetchSystemStats).not.toHaveBeenCalled()
+      expect(systemStatsStore.refetchSystemStats).not.toHaveBeenCalled()
     })
 
     it('should handle concurrent fetchReleases calls', async () => {
-      mockReleaseService.getReleases.mockImplementation(
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      vi.mocked(releaseService.getReleases).mockImplementation(
         () =>
           new Promise((resolve) =>
             setTimeout(() => resolve([mockRelease]), 100)
@@ -589,41 +671,37 @@ describe('useReleaseStore', () => {
       await Promise.all([promise1, promise2])
 
       // Should only call API once due to loading check
-      expect(mockReleaseService.getReleases).toHaveBeenCalledTimes(1)
+      expect(releaseService.getReleases).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('isElectron environment checks', () => {
-    beforeEach(async () => {
-      // Set up a new version available
-      store.releases = [mockRelease]
-      mockSettingStore.get.mockImplementation((key: string) => {
-        if (key === 'Comfy.Notification.ShowVersionUpdates') return true
-        return null
-      })
-    })
-
     describe('when running in Electron (desktop)', () => {
-      beforeEach(async () => {
-        const { isElectron } = await import('@/utils/envUtil')
+      beforeEach(() => {
         vi.mocked(isElectron).mockReturnValue(true)
       })
 
       it('should show toast when conditions are met', () => {
-        vi.mocked(compare).mockReturnValue(1)
+        const store = useReleaseStore()
         store.releases = [mockRelease]
+        vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowToast).toBe(true)
       })
 
       it('should show red dot when new version available', () => {
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
         vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
 
       it('should show popup for latest version', () => {
-        mockSystemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
+        const systemStatsStore = useSystemStatsStore()
+        systemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
 
         vi.mocked(compare).mockReturnValue(0)
 
@@ -632,12 +710,12 @@ describe('useReleaseStore', () => {
     })
 
     describe('when NOT running in Electron (web)', () => {
-      beforeEach(async () => {
-        const { isElectron } = await import('@/utils/envUtil')
+      beforeEach(() => {
         vi.mocked(isElectron).mockReturnValue(false)
       })
 
       it('should NOT show toast even when all other conditions are met', () => {
+        const store = useReleaseStore()
         vi.mocked(compare).mockReturnValue(1)
 
         // Set up all conditions that would normally show toast
@@ -647,12 +725,15 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show red dot even when new version available', () => {
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
         vi.mocked(compare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
       it('should NOT show toast regardless of attention level', () => {
+        const store = useReleaseStore()
         vi.mocked(compare).mockReturnValue(1)
 
         // Test with high attention releases
@@ -672,6 +753,7 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show red dot even with high attention release', () => {
+        const store = useReleaseStore()
         vi.mocked(compare).mockReturnValue(1)
 
         store.releases = [{ ...mockRelease, attention: 'high' as const }]
@@ -680,7 +762,10 @@ describe('useReleaseStore', () => {
       })
 
       it('should NOT show popup even for latest version', () => {
-        mockSystemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
+        const store = useReleaseStore()
+        store.releases = [mockRelease]
+        const systemStatsStore = useSystemStatsStore()
+        systemStatsStore.systemStats!.system.comfyui_version = '1.2.0'
 
         vi.mocked(compare).mockReturnValue(0)
 

src/platform/updates/common/versionCompatibilityStore.test.ts

@@ -1,3 +1,4 @@
+import { until } from '@vueuse/core'
 import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
@@ -357,17 +358,15 @@ describe('useVersionCompatibilityStore', () => {
 
   describe('initialization', () => {
     it('should fetch system stats if not available', async () => {
-      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = null
       mockSystemStatsStore.isInitialized = false
 
       await store.initialize()
 
-      expect(until).toHaveBeenCalled()
+      expect(vi.mocked(until)).toHaveBeenCalled()
     })
 
     it('should not fetch system stats if already available', async () => {
-      const { until } = await import('@vueuse/core')
       mockSystemStatsStore.systemStats = {
         system: {
           comfyui_version: '1.24.0',
@@ -378,7 +377,7 @@ describe('useVersionCompatibilityStore', () => {
 
       await store.initialize()
 
-      expect(until).not.toHaveBeenCalled()
+      expect(vi.mocked(until)).not.toHaveBeenCalled()
     })
   })
 })

src/renderer/core/thumbnail/useWorkflowThumbnail.test.ts

@@ -3,6 +3,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { createGraphThumbnail } from '@/renderer/core/thumbnail/graphThumbnailRenderer'
+import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
+import { api } from '@/scripts/api'
 
 vi.mock('@/renderer/core/thumbnail/graphThumbnailRenderer', () => ({
   createGraphThumbnail: vi.fn()
@@ -19,12 +22,6 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-const { useWorkflowThumbnail } =
-  await import('@/renderer/core/thumbnail/useWorkflowThumbnail')
-const { createGraphThumbnail } =
-  await import('@/renderer/core/thumbnail/graphThumbnailRenderer')
-const { api } = await import('@/scripts/api')
-
 describe('useWorkflowThumbnail', () => {
   let workflowStore: ReturnType<typeof useWorkflowStore>
 

src/renderer/extensions/linearMode/LinearControls.vue

@@ -205,7 +205,7 @@ defineExpose({ runButtonClick })
             <NodeWidgets
               :node-data
               :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
-              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
+              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 *:has-[textarea]:h-50 rounded-lg max-w-100"
             />
           </template>
         </div>
@@ -237,7 +237,7 @@ defineExpose({ runButtonClick })
               :node-data
               :class="
                 cn(
-                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg',
+                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 *:has-[textarea]:h-50 rounded-lg',
                   nodeData.hasErrors &&
                     'ring-2 ring-inset ring-node-stroke-error'
                 )

src/renderer/extensions/linearMode/MobileMenu.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent
+} from 'reka-ui'
+
+import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
+import Button from '@/components/ui/button/Button.vue'
+import Popover from '@/components/ui/Popover.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import { t } from '@/i18n'
+import { useCommandStore } from '@/stores/commandStore'
+</script>
+<template>
+  <CollapsibleRoot class="flex flex-col">
+    <CollapsibleTrigger as-child>
+      <Button variant="secondary" class="size-10 self-end m-4 mb-2">
+        <i class="icon-[lucide--menu] size-8" />
+      </Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent class="flex gap-2 flex-col">
+      <div class="w-full border-b-2 border-border-subtle" />
+      <Popover>
+        <template #button>
+          <Button variant="secondary" size="lg" class="w-full">
+            <i class="icon-[comfy--workflow]" />
+            {{ t('Workflows') }}
+          </Button>
+        </template>
+        <WorkflowsSidebarTab class="h-300 w-[80vw]" />
+      </Popover>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full"
+        @click="useWorkflowTemplateSelectorDialog().show('menu')"
+      >
+        <i class="icon-[comfy--template]" />
+        {{ t('sideToolbar.templates') }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="w-full"
+        @click="
+          useCommandStore().execute('Comfy.ToggleLinear', {
+            metadata: { source: 'button' }
+          })
+        "
+      >
+        <i class="icon-[lucide--log-out]" />
+        {{ t('linearMode.graphMode') }}
+      </Button>
+      <div class="w-full border-b-2 border-border-subtle" />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -156,7 +156,11 @@ watch([selectedIndex, selectedOutput], doEmit)
 watch(
   () => outputs.media.value,
   (newAssets, oldAssets) => {
-    if (newAssets.length === oldAssets.length || oldAssets.length === 0) return
+    if (
+      newAssets.length === oldAssets.length ||
+      (oldAssets.length === 0 && newAssets.length !== 1)
+    )
+      return
     if (selectedIndex.value[0] <= 0) {
       selectedIndex.value = [0, 0]
       return

src/renderer/extensions/minimap/composables/useMinimap.test.ts

@@ -200,9 +200,8 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   }))
 }))
 
-const { useMinimap } =
-  await import('@/renderer/extensions/minimap/composables/useMinimap')
-const { api } = await import('@/scripts/api')
+import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
+import { api } from '@/scripts/api'
 
 describe('useMinimap', () => {
   let moduleMockCanvasElement: HTMLCanvasElement

src/renderer/extensions/minimap/composables/useMinimapRenderer.test.ts

@@ -103,9 +103,7 @@ describe('useMinimapRenderer', () => {
     expect(vi.mocked(renderMinimapToCanvas)).not.toHaveBeenCalled()
   })
 
-  it('should only render when redraw is needed', async () => {
-    const { renderMinimapToCanvas } =
-      await import('@/renderer/extensions/minimap/minimapCanvasRenderer')
+  it('should only render when redraw is needed', () => {
     const canvasRef = ref(mockCanvas)
     const graphRef = ref(mockGraph) as Ref<LGraph | null>
     const boundsRef = ref({ minX: 0, minY: 0, width: 100, height: 100 })

src/renderer/extensions/minimap/composables/useMinimapViewport.test.ts

@@ -4,6 +4,11 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  calculateMinimapScale,
+  calculateNodeBounds,
+  enforceMinimumBounds
+} from '@/renderer/core/spatial/boundsCalculator'
 import { useMinimapViewport } from '@/renderer/extensions/minimap/composables/useMinimapViewport'
 import type { MinimapCanvas } from '@/renderer/extensions/minimap/types'
 
@@ -66,10 +71,7 @@ describe('useMinimapViewport', () => {
     expect(viewport.scale.value).toBe(1)
   })
 
-  it('should calculate graph bounds from nodes', async () => {
-    const { calculateNodeBounds, enforceMinimumBounds } =
-      await import('@/renderer/core/spatial/boundsCalculator')
-
+  it('should calculate graph bounds from nodes', () => {
     vi.mocked(calculateNodeBounds).mockReturnValue({
       minX: 100,
       minY: 100,
@@ -92,10 +94,7 @@ describe('useMinimapViewport', () => {
     expect(enforceMinimumBounds).toHaveBeenCalled()
   })
 
-  it('should handle empty graph', async () => {
-    const { calculateNodeBounds } =
-      await import('@/renderer/core/spatial/boundsCalculator')
-
+  it('should handle empty graph', () => {
     vi.mocked(calculateNodeBounds).mockReturnValue(null)
 
     const canvasRef = ref(mockCanvas) as Ref<MinimapCanvas | null>
@@ -131,11 +130,7 @@ describe('useMinimapViewport', () => {
     })
   })
 
-  it('should calculate viewport transform', async () => {
-    const { calculateNodeBounds, enforceMinimumBounds, calculateMinimapScale } =
-      await import('@/renderer/core/spatial/boundsCalculator')
-
-    // Mock the bounds calculation
+  it('should calculate viewport transform', () => {
     vi.mocked(calculateNodeBounds).mockReturnValue({
       minX: 0,
       minY: 0,
@@ -236,10 +231,7 @@ describe('useMinimapViewport', () => {
     expect(() => viewport.centerViewOn(100, 100)).not.toThrow()
   })
 
-  it('should calculate scale correctly', async () => {
-    const { calculateMinimapScale, calculateNodeBounds, enforceMinimumBounds } =
-      await import('@/renderer/core/spatial/boundsCalculator')
-
+  it('should calculate scale correctly', () => {
     const testBounds = {
       minX: 0,
       minY: 0,

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -108,11 +108,11 @@ import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   getLocatorIdFromNodeData,
   getNodeByLocatorId
 } from '@/utils/graphTraversalUtil'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { NodeBadgeProps } from './NodeBadge.vue'
@@ -160,12 +160,12 @@ const enterSubgraphTooltipConfig = computed(() => {
 })
 
 const resolveTitle = (info: VueNodeData | undefined) => {
-  const title = (info?.title ?? '').trim()
-  if (title.length > 0) return title
-
-  const nodeType = (info?.type ?? '').trim() || 'Untitled'
-  const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name`
-  return st(key, nodeType)
+  const untitledLabel = st('g.untitled', 'Untitled')
+  return resolveNodeDisplayName(info ?? null, {
+    emptyLabel: untitledLabel,
+    untitledLabel,
+    st
+  })
 }
 
 // Local state for title to provide immediate feedback

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

@@ -1,6 +1,7 @@
 <template>
   <FloatLabel
     variant="in"
+    :unstyled="hideLayoutField"
     :class="
       cn(
         'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
@@ -23,7 +24,7 @@
       @pointerup.capture.stop
       @contextmenu.capture.stop
     />
-    <label :for="id">{{ displayName }}</label>
+    <label v-if="!hideLayoutField" :for="id">{{ displayName }}</label>
   </FloatLabel>
 </template>
 
@@ -33,6 +34,7 @@ import Textarea from 'primevue/textarea'
 import { computed, useId } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 import {
   INPUT_EXCLUDED_PROPS,
@@ -48,6 +50,8 @@ const { widget, placeholder = '' } = defineProps<{
 
 const modelValue = defineModel<string>({ default: '' })
 
+const hideLayoutField = useHideLayoutField()
+
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
 )

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

@@ -1,6 +1,10 @@
 <template>
   <WidgetLayoutField :widget>
-    <div class="ml-auto flex w-fit items-center gap-2">
+    <div
+      :class="
+        cn('flex w-fit items-center gap-2', !hideLayoutField && 'ml-auto')
+      "
+    >
       <span
         v-if="stateLabel"
         :class="
@@ -29,6 +33,7 @@ import { computed } from 'vue'
 
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 import {
   STANDARD_EXCLUDED_PROPS,
@@ -43,6 +48,8 @@ const { widget } = defineProps<{
 
 const modelValue = defineModel<boolean>()
 
+const hideLayoutField = useHideLayoutField()
+
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
@@ -11,7 +10,7 @@ defineProps<{
   >
 }>()
 
-const hideLayoutField = inject<boolean>('hideLayoutField', false)
+const hideLayoutField = useHideLayoutField()
 </script>
 
 <template>

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -3,18 +3,10 @@ import { ref } from 'vue'
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { isAssetWidget, isComboWidget } from '@/lib/litegraph/src/litegraph'
-import type {
-  IBaseWidget,
-  IWidgetAssetOptions
-} from '@/lib/litegraph/src/types/widgets'
-import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
-import {
-  assetFilenameSchema,
-  assetItemSchema
-} from '@/platform/assets/schemas/assetSchema'
-import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+import { isComboWidget } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { assetService } from '@/platform/assets/services/assetService'
+import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type {
@@ -86,71 +78,20 @@ const addMultiSelectWidget = (
   return widget
 }
 
-const createAssetBrowserWidget = (
+function createAssetBrowserWidget(
   node: LGraphNode,
   inputSpec: ComboInputSpec,
   defaultValue: string | undefined
-): IBaseWidget => {
-  const currentValue = defaultValue
-  const displayLabel = currentValue ?? t('widgets.selectModel')
-  const assetBrowserDialog = useAssetBrowserDialog()
-
-  async function openModal(widget: IBaseWidget) {
-    if (!isAssetWidget(widget)) {
-      throw new Error(`Expected asset widget but received ${widget.type}`)
+): IBaseWidget {
+  return createAssetWidget({
+    node,
+    widgetName: inputSpec.name,
+    nodeTypeForBrowser: node.comfyClass ?? '',
+    defaultValue,
+    onValueChange: (widget, newValue, oldValue) => {
+      node.onWidgetChanged?.(widget.name, newValue, oldValue, widget)
     }
-    await assetBrowserDialog.show({
-      nodeType: node.comfyClass || '',
-      inputName: inputSpec.name,
-      currentValue: widget.value,
-      onAssetSelected: (asset) => {
-        const validatedAsset = assetItemSchema.safeParse(asset)
-
-        if (!validatedAsset.success) {
-          console.error(
-            'Invalid asset item:',
-            validatedAsset.error.errors,
-            'Received:',
-            asset
-          )
-          return
-        }
-
-        const filename = getAssetFilename(validatedAsset.data)
-        const validatedFilename = assetFilenameSchema.safeParse(filename)
-
-        if (!validatedFilename.success) {
-          console.error(
-            'Invalid asset filename:',
-            validatedFilename.error.errors,
-            'for asset:',
-            validatedAsset.data.id
-          )
-          return
-        }
-
-        const oldValue = widget.value
-        widget.value = validatedFilename.data
-        node.onWidgetChanged?.(
-          widget.name,
-          validatedFilename.data,
-          oldValue,
-          widget
-        )
-      }
-    })
-  }
-  const options: IWidgetAssetOptions = { openModal }
-
-  const widget = node.addWidget(
-    'asset',
-    inputSpec.name,
-    displayLabel,
-    () => undefined,
-    options
-  )
-
-  return widget
+  })
 }
 
 const createInputMappingWidget = (

src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { IWidget } from '@/lib/litegraph/src/litegraph'
+import { api } from '@/scripts/api'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
@@ -610,7 +611,6 @@ describe('useRemoteWidget', () => {
     })
 
     it('should register event listener when enabled', async () => {
-      const { api } = await import('@/scripts/api')
       const addEventListenerSpy = vi.spyOn(api, 'addEventListener')
 
       const mockNode = {
@@ -636,7 +636,6 @@ describe('useRemoteWidget', () => {
     })
 
     it('should refresh widget when workflow completes successfully', async () => {
-      const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
       vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {
@@ -674,7 +673,6 @@ describe('useRemoteWidget', () => {
     })
 
     it('should not refresh when toggle is disabled', async () => {
-      const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
       vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {
@@ -707,7 +705,6 @@ describe('useRemoteWidget', () => {
     })
 
     it('should cleanup event listener on node removal', async () => {
-      const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
       vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {

src/services/jobOutputCache.test.ts

@@ -1,9 +1,17 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
+import { api } from '@/scripts/api'
 import type {
   JobDetail,
   JobListItem
 } from '@/platform/remote/comfyui/jobs/jobTypes'
+import {
+  findActiveIndex,
+  getJobDetail,
+  getJobWorkflow,
+  getOutputsForTask
+} from '@/services/jobOutputCache'
 import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 vi.mock('@/platform/remote/comfyui/jobs/fetchJobs', () => ({
@@ -11,6 +19,15 @@ vi.mock('@/platform/remote/comfyui/jobs/fetchJobs', () => ({
   extractWorkflow: vi.fn()
 }))
 
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getJobDetail: vi.fn(),
+    apiURL: vi.fn((path: string) => `/api${path}`),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
 function createResultItem(url: string, supportsPreview = true): ResultItemImpl {
   const item = new ResultItemImpl({
     filename: url,
@@ -48,15 +65,19 @@ function createTask(
   return new TaskItemImpl(job, {}, flatOutputs)
 }
 
+// Generate unique IDs per test to avoid cache collisions
+let testCounter = 0
+function uniqueId(prefix: string): string {
+  return `${prefix}-${++testCounter}-${Date.now()}`
+}
+
 describe('jobOutputCache', () => {
   beforeEach(() => {
-    vi.resetModules()
     vi.clearAllMocks()
   })
 
   describe('findActiveIndex', () => {
-    it('returns index of matching URL', async () => {
-      const { findActiveIndex } = await import('@/services/jobOutputCache')
+    it('returns index of matching URL', () => {
       const items = [
         createResultItem('a'),
         createResultItem('b'),
@@ -66,15 +87,13 @@ describe('jobOutputCache', () => {
       expect(findActiveIndex(items, 'b')).toBe(1)
     })
 
-    it('returns 0 when URL not found', async () => {
-      const { findActiveIndex } = await import('@/services/jobOutputCache')
+    it('returns 0 when URL not found', () => {
       const items = [createResultItem('a'), createResultItem('b')]
 
       expect(findActiveIndex(items, 'missing')).toBe(0)
     })
 
-    it('returns 0 when URL is undefined', async () => {
-      const { findActiveIndex } = await import('@/services/jobOutputCache')
+    it('returns 0 when URL is undefined', () => {
       const items = [createResultItem('a'), createResultItem('b')]
 
       expect(findActiveIndex(items, undefined)).toBe(0)
@@ -83,7 +102,6 @@ describe('jobOutputCache', () => {
 
   describe('getOutputsForTask', () => {
     it('returns previewable outputs directly when no lazy load needed', async () => {
-      const { getOutputsForTask } = await import('@/services/jobOutputCache')
       const outputs = [createResultItem('p-1'), createResultItem('p-2')]
       const task = createTask(undefined, outputs, 1)
 
@@ -93,14 +111,13 @@ describe('jobOutputCache', () => {
     })
 
     it('lazy loads when outputsCount > 1', async () => {
-      const { getOutputsForTask } = await import('@/services/jobOutputCache')
       const previewOutput = createResultItem('preview')
       const fullOutputs = [
         createResultItem('full-1'),
         createResultItem('full-2')
       ]
 
-      const job = createMockJob('task-1', 3)
+      const job = createMockJob(uniqueId('task'), 3)
       const task = new TaskItemImpl(job, {}, [previewOutput])
       const loadedTask = new TaskItemImpl(job, {}, fullOutputs)
       task.loadFullOutputs = vi.fn().mockResolvedValue(loadedTask)
@@ -112,10 +129,9 @@ describe('jobOutputCache', () => {
     })
 
     it('caches loaded tasks', async () => {
-      const { getOutputsForTask } = await import('@/services/jobOutputCache')
       const fullOutputs = [createResultItem('full-1')]
 
-      const job = createMockJob('task-1', 3)
+      const job = createMockJob(uniqueId('task'), 3)
       const task = new TaskItemImpl(job, {}, [createResultItem('preview')])
       const loadedTask = new TaskItemImpl(job, {}, fullOutputs)
       task.loadFullOutputs = vi.fn().mockResolvedValue(loadedTask)
@@ -130,10 +146,9 @@ describe('jobOutputCache', () => {
     })
 
     it('falls back to preview outputs on load error', async () => {
-      const { getOutputsForTask } = await import('@/services/jobOutputCache')
       const previewOutput = createResultItem('preview')
 
-      const job = createMockJob('task-1', 3)
+      const job = createMockJob(uniqueId('task'), 3)
       const task = new TaskItemImpl(job, {}, [previewOutput])
       task.loadFullOutputs = vi
         .fn()
@@ -145,9 +160,8 @@ describe('jobOutputCache', () => {
     })
 
     it('returns null when request is superseded', async () => {
-      const { getOutputsForTask } = await import('@/services/jobOutputCache')
-      const job1 = createMockJob('task-1', 3)
-      const job2 = createMockJob('task-2', 3)
+      const job1 = createMockJob(uniqueId('task'), 3)
+      const job2 = createMockJob(uniqueId('task'), 3)
 
       const task1 = new TaskItemImpl(job1, {}, [createResultItem('preview-1')])
       const task2 = new TaskItemImpl(job2, {}, [createResultItem('preview-2')])
@@ -182,57 +196,51 @@ describe('jobOutputCache', () => {
 
   describe('getJobDetail', () => {
     it('fetches and caches job detail', async () => {
-      const { getJobDetail } = await import('@/services/jobOutputCache')
-      const { fetchJobDetail } =
-        await import('@/platform/remote/comfyui/jobs/fetchJobs')
+      const jobId = uniqueId('job')
 
       const mockDetail: JobDetail = {
-        id: 'job-1',
+        id: jobId,
         status: 'completed',
         create_time: Date.now(),
         priority: 0,
         outputs: {}
       }
-      vi.mocked(fetchJobDetail).mockResolvedValue(mockDetail)
+      vi.mocked(api.getJobDetail).mockResolvedValue(mockDetail)
 
-      const result = await getJobDetail('job-1')
+      const result = await getJobDetail(jobId)
 
       expect(result).toEqual(mockDetail)
-      expect(fetchJobDetail).toHaveBeenCalledWith(expect.any(Function), 'job-1')
+      expect(api.getJobDetail).toHaveBeenCalledWith(jobId)
     })
 
     it('returns cached job detail on subsequent calls', async () => {
-      const { getJobDetail } = await import('@/services/jobOutputCache')
-      const { fetchJobDetail } =
-        await import('@/platform/remote/comfyui/jobs/fetchJobs')
+      const jobId = uniqueId('job')
 
       const mockDetail: JobDetail = {
-        id: 'job-2',
+        id: jobId,
         status: 'completed',
         create_time: Date.now(),
         priority: 0,
         outputs: {}
       }
-      vi.mocked(fetchJobDetail).mockResolvedValue(mockDetail)
+      vi.mocked(api.getJobDetail).mockResolvedValue(mockDetail)
 
       // First call
-      await getJobDetail('job-2')
-      expect(fetchJobDetail).toHaveBeenCalledTimes(1)
+      await getJobDetail(jobId)
+      expect(api.getJobDetail).toHaveBeenCalledTimes(1)
 
       // Second call should use cache
-      const result = await getJobDetail('job-2')
+      const result = await getJobDetail(jobId)
       expect(result).toEqual(mockDetail)
-      expect(fetchJobDetail).toHaveBeenCalledTimes(1)
+      expect(api.getJobDetail).toHaveBeenCalledTimes(1)
     })
 
     it('returns undefined on fetch error', async () => {
-      const { getJobDetail } = await import('@/services/jobOutputCache')
-      const { fetchJobDetail } =
-        await import('@/platform/remote/comfyui/jobs/fetchJobs')
+      const jobId = uniqueId('job-error')
 
-      vi.mocked(fetchJobDetail).mockRejectedValue(new Error('Network error'))
+      vi.mocked(api.getJobDetail).mockRejectedValue(new Error('Network error'))
 
-      const result = await getJobDetail('job-error')
+      const result = await getJobDetail(jobId)
 
       expect(result).toBeUndefined()
     })
@@ -240,12 +248,10 @@ describe('jobOutputCache', () => {
 
   describe('getJobWorkflow', () => {
     it('fetches job detail and extracts workflow', async () => {
-      const { getJobWorkflow } = await import('@/services/jobOutputCache')
-      const { fetchJobDetail, extractWorkflow } =
-        await import('@/platform/remote/comfyui/jobs/fetchJobs')
+      const jobId = uniqueId('job-wf')
 
       const mockDetail: JobDetail = {
-        id: 'job-wf',
+        id: jobId,
         status: 'completed',
         create_time: Date.now(),
         priority: 0,
@@ -253,24 +259,22 @@ describe('jobOutputCache', () => {
       }
       const mockWorkflow = { version: 1 }
 
-      vi.mocked(fetchJobDetail).mockResolvedValue(mockDetail)
+      vi.mocked(api.getJobDetail).mockResolvedValue(mockDetail)
       vi.mocked(extractWorkflow).mockResolvedValue(mockWorkflow as any)
 
-      const result = await getJobWorkflow('job-wf')
+      const result = await getJobWorkflow(jobId)
 
       expect(result).toEqual(mockWorkflow)
       expect(extractWorkflow).toHaveBeenCalledWith(mockDetail)
     })
 
     it('returns undefined when job detail not found', async () => {
-      const { getJobWorkflow } = await import('@/services/jobOutputCache')
-      const { fetchJobDetail, extractWorkflow } =
-        await import('@/platform/remote/comfyui/jobs/fetchJobs')
+      const jobId = uniqueId('missing')
 
-      vi.mocked(fetchJobDetail).mockResolvedValue(undefined)
+      vi.mocked(api.getJobDetail).mockResolvedValue(undefined)
       vi.mocked(extractWorkflow).mockResolvedValue(undefined)
 
-      const result = await getJobWorkflow('missing')
+      const result = await getJobWorkflow(jobId)
 
       expect(result).toBeUndefined()
     })

src/services/newUserService.ts

@@ -1,74 +0,0 @@
-import type { useSettingStore } from '@/platform/settings/settingStore'
-
-let pendingCallbacks: Array<() => Promise<void>> = []
-let isNewUserDetermined = false
-let isNewUserCached: boolean | null = null
-
-export const newUserService = () => {
-  function checkIsNewUser(
-    settingStore: ReturnType<typeof useSettingStore>
-  ): boolean {
-    const isNewUserSettings =
-      Object.keys(settingStore.settingValues).length === 0 ||
-      !settingStore.get('Comfy.TutorialCompleted')
-    const hasNoWorkflow = !localStorage.getItem('workflow')
-    const hasNoPreviousWorkflow = !localStorage.getItem(
-      'Comfy.PreviousWorkflow'
-    )
-
-    return isNewUserSettings && hasNoWorkflow && hasNoPreviousWorkflow
-  }
-
-  async function registerInitCallback(callback: () => Promise<void>) {
-    if (isNewUserDetermined) {
-      if (isNewUserCached) {
-        try {
-          await callback()
-        } catch (error) {
-          console.error('New user initialization callback failed:', error)
-        }
-      }
-    } else {
-      pendingCallbacks.push(callback)
-    }
-  }
-
-  async function initializeIfNewUser(
-    settingStore: ReturnType<typeof useSettingStore>
-  ) {
-    if (isNewUserDetermined) return
-
-    isNewUserCached = checkIsNewUser(settingStore)
-    isNewUserDetermined = true
-
-    if (!isNewUserCached) {
-      pendingCallbacks = []
-      return
-    }
-
-    await settingStore.set(
-      'Comfy.InstalledVersion',
-      __COMFYUI_FRONTEND_VERSION__
-    )
-
-    for (const callback of pendingCallbacks) {
-      try {
-        await callback()
-      } catch (error) {
-        console.error('New user initialization callback failed:', error)
-      }
-    }
-
-    pendingCallbacks = []
-  }
-
-  function isNewUser(): boolean | null {
-    return isNewUserDetermined ? isNewUserCached : null
-  }
-
-  return {
-    registerInitCallback,
-    initializeIfNewUser,
-    isNewUser
-  }
-}

src/services/useNewUserService.test.ts

@@ -7,6 +7,12 @@ const mockLocalStorage = vi.hoisted(() => ({
   clear: vi.fn()
 }))
 
+const mockSettingStore = vi.hoisted(() => ({
+  settingValues: {} as Record<string, unknown>,
+  get: vi.fn(),
+  set: vi.fn()
+}))
+
 Object.defineProperty(window, 'localStorage', {
   value: mockLocalStorage,
   writable: true
@@ -16,31 +22,26 @@ vi.mock('@/config/version', () => ({
   __COMFYUI_FRONTEND_VERSION__: '1.24.0'
 }))
 
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => mockSettingStore
+}))
+
 //@ts-expect-error Define global for the test
 global.__COMFYUI_FRONTEND_VERSION__ = '1.24.0'
 
-import type { newUserService as NewUserServiceType } from '@/services/newUserService'
+import { useNewUserService } from '@/services/useNewUserService'
 
-describe('newUserService', () => {
-  let service: ReturnType<typeof NewUserServiceType>
-  let mockSettingStore: any
-  let newUserService: typeof NewUserServiceType
+describe('useNewUserService', () => {
+  let service: ReturnType<typeof useNewUserService>
 
-  beforeEach(async () => {
+  beforeEach(() => {
     vi.clearAllMocks()
+    mockSettingStore.settingValues = {}
+    mockSettingStore.get.mockReset()
+    mockSettingStore.set.mockReset()
 
-    vi.resetModules()
-
-    const module = await import('@/services/newUserService')
-    newUserService = module.newUserService
-
-    service = newUserService()
-
-    mockSettingStore = {
-      settingValues: {},
-      get: vi.fn(),
-      set: vi.fn()
-    }
+    service = useNewUserService()
+    service.reset()
 
     mockLocalStorage.getItem.mockReturnValue(null)
   })
@@ -54,7 +55,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(true)
     })
@@ -69,7 +70,7 @@ describe('newUserService', () => {
 
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(true)
     })
@@ -82,7 +83,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(false)
     })
@@ -98,7 +99,7 @@ describe('newUserService', () => {
         return null
       })
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(false)
     })
@@ -114,7 +115,7 @@ describe('newUserService', () => {
         return null
       })
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(false)
     })
@@ -127,7 +128,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(true)
     })
@@ -143,7 +144,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(false)
     })
@@ -160,7 +161,7 @@ describe('newUserService', () => {
         return null
       })
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(false)
     })
@@ -177,7 +178,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
       expect(service.isNewUser()).toBe(true)
 
       await service.registerInitCallback(mockCallback)
@@ -207,7 +208,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       await service.registerInitCallback(mockCallback)
 
@@ -228,7 +229,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(mockSettingStore.set).toHaveBeenCalledWith(
         'Comfy.InstalledVersion',
@@ -244,7 +245,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(mockSettingStore.set).not.toHaveBeenCalled()
     })
@@ -263,7 +264,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(mockCallback1).toHaveBeenCalledTimes(1)
       expect(mockCallback2).toHaveBeenCalledTimes(1)
@@ -281,7 +282,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(mockCallback).not.toHaveBeenCalled()
     })
@@ -299,7 +300,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(consoleSpy).toHaveBeenCalledWith(
         'New user initialization callback failed:',
@@ -316,10 +317,10 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
       expect(mockSettingStore.set).toHaveBeenCalledTimes(1)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
       expect(mockSettingStore.set).toHaveBeenCalledTimes(1)
     })
 
@@ -331,15 +332,12 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      // Before initialization, isNewUser should return null
       expect(service.isNewUser()).toBeNull()
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
-      // After initialization, isNewUser should return true for a new user
       expect(service.isNewUser()).toBe(true)
 
-      // Should set the installed version for new users
       expect(mockSettingStore.set).toHaveBeenCalledWith(
         'Comfy.InstalledVersion',
         expect.any(String)
@@ -357,7 +355,7 @@ describe('newUserService', () => {
       mockSettingStore.get.mockReturnValue(undefined)
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(true)
     })
@@ -372,7 +370,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       expect(service.isNewUser()).toBe(true)
     })
@@ -388,7 +386,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service.initializeIfNewUser(mockSettingStore)
+      await service.initializeIfNewUser()
 
       await service.registerInitCallback(mockCallback1)
       await service.registerInitCallback(mockCallback2)
@@ -399,9 +397,9 @@ describe('newUserService', () => {
   })
 
   describe('state sharing between instances', () => {
-    it('should share state between multiple service instances', async () => {
-      const service1 = newUserService()
-      const service2 = newUserService()
+    it('should share state between multiple service calls', async () => {
+      const service1 = useNewUserService()
+      const service2 = useNewUserService()
 
       mockSettingStore.settingValues = {}
       mockSettingStore.get.mockImplementation((key: string) => {
@@ -410,15 +408,15 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service1.initializeIfNewUser(mockSettingStore)
+      await service1.initializeIfNewUser()
 
       expect(service2.isNewUser()).toBe(true)
       expect(service1.isNewUser()).toBe(service2.isNewUser())
     })
 
-    it('should execute callbacks registered on different instances', async () => {
-      const service1 = newUserService()
-      const service2 = newUserService()
+    it('should execute callbacks registered on different service calls', async () => {
+      const service1 = useNewUserService()
+      const service2 = useNewUserService()
 
       const mockCallback1 = vi.fn().mockResolvedValue(undefined)
       const mockCallback2 = vi.fn().mockResolvedValue(undefined)
@@ -433,7 +431,7 @@ describe('newUserService', () => {
       })
       mockLocalStorage.getItem.mockReturnValue(null)
 
-      await service1.initializeIfNewUser(mockSettingStore)
+      await service1.initializeIfNewUser()
 
       expect(mockCallback1).toHaveBeenCalledTimes(1)
       expect(mockCallback2).toHaveBeenCalledTimes(1)

src/services/useNewUserService.ts

@@ -0,0 +1,82 @@
+import { ref, shallowRef } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+function _useNewUserService() {
+  const settingStore = useSettingStore()
+  const pendingCallbacks = shallowRef<Array<() => Promise<void>>>([])
+  const isNewUserDetermined = ref(false)
+  const isNewUserCached = ref<boolean | null>(null)
+
+  function reset() {
+    pendingCallbacks.value = []
+    isNewUserDetermined.value = false
+    isNewUserCached.value = null
+  }
+
+  function checkIsNewUser(): boolean {
+    const isNewUserSettings =
+      Object.keys(settingStore.settingValues).length === 0 ||
+      !settingStore.get('Comfy.TutorialCompleted')
+    const hasNoWorkflow = !localStorage.getItem('workflow')
+    const hasNoPreviousWorkflow = !localStorage.getItem(
+      'Comfy.PreviousWorkflow'
+    )
+
+    return isNewUserSettings && hasNoWorkflow && hasNoPreviousWorkflow
+  }
+
+  async function registerInitCallback(callback: () => Promise<void>) {
+    if (isNewUserDetermined.value) {
+      if (isNewUserCached.value) {
+        try {
+          await callback()
+        } catch (error) {
+          console.error('New user initialization callback failed:', error)
+        }
+      }
+    } else {
+      pendingCallbacks.value = [...pendingCallbacks.value, callback]
+    }
+  }
+
+  async function initializeIfNewUser() {
+    if (isNewUserDetermined.value) return
+
+    isNewUserCached.value = checkIsNewUser()
+    isNewUserDetermined.value = true
+
+    if (!isNewUserCached.value) {
+      pendingCallbacks.value = []
+      return
+    }
+
+    await settingStore.set(
+      'Comfy.InstalledVersion',
+      __COMFYUI_FRONTEND_VERSION__
+    )
+
+    for (const callback of pendingCallbacks.value) {
+      try {
+        await callback()
+      } catch (error) {
+        console.error('New user initialization callback failed:', error)
+      }
+    }
+
+    pendingCallbacks.value = []
+  }
+
+  function isNewUser(): boolean | null {
+    return isNewUserDetermined.value ? isNewUserCached.value : null
+  }
+
+  return {
+    registerInitCallback,
+    initializeIfNewUser,
+    isNewUser,
+    reset
+  }
+}
+
+export const useNewUserService = createSharedComposable(_useNewUserService)

src/stores/subgraphNavigationStore.test.ts

@@ -6,6 +6,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
 
 vi.mock('@/scripts/app', () => {
   const mockCanvas = {
@@ -136,7 +137,6 @@ describe('useSubgraphNavigationStore', () => {
   it('should clear navigation when activeSubgraph becomes undefined', async () => {
     const navigationStore = useSubgraphNavigationStore()
     const workflowStore = useWorkflowStore()
-    const { findSubgraphPathById } = await import('@/utils/graphTraversalUtil')
 
     // Create mock subgraph and graph structure
     const mockSubgraph = {

src/stores/workspace/favoritedWidgetsStore.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
+import { st } from '@/i18n'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
+import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 /**
@@ -216,7 +218,12 @@ export const useFavoritedWidgetsStore = defineStore('favoritedWidgets', () => {
       }
     }
 
-    const nodeTitle = node.title || node.type || 'Node'
+    const fallbackNodeTitle = st('rightSidePanel.fallbackNodeTitle', 'Node')
+    const nodeTitle = resolveNodeDisplayName(node, {
+      emptyLabel: fallbackNodeTitle,
+      untitledLabel: fallbackNodeTitle,
+      st
+    })
     const widgetLabel = widget.label || widget.name
     return {
       ...id,

src/types/widgetTypes.ts

@@ -1,5 +1,11 @@
+import { inject } from 'vue'
 import type { InjectionKey } from 'vue'
 
 export type AssetKind = 'image' | 'video' | 'audio' | 'model' | 'unknown'
 
 export const OnCloseKey: InjectionKey<() => void> = Symbol()
+
+export const HideLayoutFieldKey: InjectionKey<boolean> = Symbol()
+export function useHideLayoutField(): boolean {
+  return inject(HideLayoutFieldKey, false)
+}

src/utils/nodeTitleUtil.ts

@@ -0,0 +1,28 @@
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+type NodeTitleInfo = {
+  title?: string | number | null
+  type?: string | number | null
+}
+
+type StaticTranslate = (key: string, fallbackMessage: string) => string
+
+type ResolveNodeDisplayNameOptions = {
+  emptyLabel: string
+  untitledLabel: string
+  st: StaticTranslate
+}
+
+export function resolveNodeDisplayName(
+  node: NodeTitleInfo | null | undefined,
+  options: ResolveNodeDisplayNameOptions
+): string {
+  if (!node) return options.emptyLabel
+
+  const title = (node.title ?? '').toString().trim()
+  if (title.length > 0) return title
+
+  const nodeType = (node.type ?? '').toString().trim() || options.untitledLabel
+  const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name`
+  return options.st(key, nodeType)
+}

src/views/LinearView.vue

@@ -9,6 +9,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { ref, useTemplateRef } from 'vue'
 
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
@@ -17,6 +18,7 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
+import MobileMenu from '@/renderer/extensions/linearMode/MobileMenu.vue'
 import OutputHistory from '@/renderer/extensions/linearMode/OutputHistory.vue'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import type { ResultItemImpl } from '@/stores/queueStore'
@@ -58,6 +60,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       v-if="mobileDisplay"
       class="justify-center border-border-subtle border-t overflow-y-scroll h-[calc(100%-38px)] bg-comfy-menu-bg"
     >
+      <MobileMenu />
       <div class="flex flex-col text-muted-foreground">
         <LinearPreview
           :latent-preview="
@@ -84,12 +87,12 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         "
       />
       <LinearControls ref="linearWorkflowRef" mobile />
-      <div class="text-base-foreground flex items-center gap-4 justify-end m-4">
-        <a
-          href="https://form.typeform.com/to/gmVqFi8l"
-          v-text="t('linearMode.beta')"
-        />
-        <TypeformPopoverButton data-tf-widget="gmVqFi8l" />
+      <div class="text-base-foreground flex items-center gap-4">
+        <div class="border-r border-border-subtle mr-auto">
+          <ModeToggle class="m-2" />
+        </div>
+        <div v-text="t('linearMode.beta')" />
+        <TypeformPopoverButton data-tf-widget="gmVqFi8l" class="mx-2" />
       </div>
     </div>
     <Splitter

src/views/layouts/LayoutDefault.vue

@@ -1,11 +1,15 @@
 <template>
-  <main class="relative h-full w-full overflow-hidden">
-    <router-view />
-  </main>
+  <WorkspaceAuthGate>
+    <main class="relative h-full w-full overflow-hidden">
+      <router-view />
+    </main>
+  </WorkspaceAuthGate>
 </template>
 
 <script setup lang="ts">
 import { useFavicon } from '@vueuse/core'
 
+import WorkspaceAuthGate from '@/components/auth/WorkspaceAuthGate.vue'
+
 useFavicon('/assets/favicon.ico')
 </script>

src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts

@@ -1,5 +1,5 @@
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -15,6 +15,7 @@ const translateMock = vi.hoisted(() =>
   )
 )
 const dateMock = vi.hoisted(() => vi.fn(() => '2024. 1. 1.'))
+const storageMap = vi.hoisted(() => new Map<string, unknown>())
 
 // Mock dependencies
 vi.mock('vue-i18n', () => ({
@@ -45,16 +46,17 @@ vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   }))
 }))
 
-vi.mock('@vueuse/core', async () => {
-  const { ref } = await import('vue')
-  return {
-    whenever: vi.fn(),
-    useStorage: vi.fn((_key, defaultValue) => {
-      return ref(defaultValue)
-    }),
-    createSharedComposable: vi.fn((fn) => fn)
-  }
-})
+vi.mock('@vueuse/core', () => ({
+  whenever: vi.fn(),
+  useStorage: vi.fn((key: string, defaultValue: unknown) => {
+    if (!storageMap.has(key)) storageMap.set(key, defaultValue)
+    return storageMap.get(key)
+  }),
+  createSharedComposable: vi.fn((fn) => {
+    let cached: ReturnType<typeof fn>
+    return (...args: Parameters<typeof fn>) => (cached ??= fn(...args))
+  })
+}))
 
 vi.mock('@/config', () => ({
   default: {
@@ -72,12 +74,9 @@ vi.mock('@/stores/systemStatsStore', () => ({
 }))
 
 describe('PackCard', () => {
-  let pinia: ReturnType<typeof createPinia>
-
   beforeEach(() => {
     vi.clearAllMocks()
-    pinia = createPinia()
-    setActivePinia(pinia)
+    storageMap.clear()
   })
 
   const createWrapper = (props: {
@@ -87,7 +86,7 @@ describe('PackCard', () => {
     const wrapper = mount(PackCard, {
       props,
       global: {
-        plugins: [pinia],
+        plugins: [createTestingPinia({ stubActions: false })],
         components: {
           ProgressSpinner
         },

todo.md

@@ -0,0 +1,34 @@
+# Bug Description
+
+When using a primitive node to select a model, this causes an issue specifically on Comfy Cloud. The issue does not appear to occur in the local version.
+
+## Context
+
+This bug was reported in the #frontend-bug-dump channel with reference links to Slack thread discussions:
+
+- https://comfy-organization.slack.com/archives/C07RCREPL67/p1767751867519549?thread_ts=1767751129.592359&cid=C07RCREPL67
+- https://comfy-organization.slack.com/archives/C07RCREPL67/p1767752100115359?thread_ts=1767751129.592359&cid=C07RCREPL67
+
+## Reproduction
+
+The issue is triggered when a model is selected by a primitive node in workflows running on the cloud.
+
+## Expected Behavior
+
+Model selection via primitive nodes should work consistently between local and cloud environments.
+
+## Actual Behavior
+
+An issue occurs on cloud when using primitive nodes for model selection.
+
+## Additional Information
+
+### Related Bug Ticket
+
+Another bug ticket was created here: https://comfy-organization.slack.com/archives/C09FY39CC3V/p1767753991406309?thread_ts=1767734275.051999&cid=C09FY39CC3V
+
+### Updated Reproduction Details
+
+**Important:** This workflow didn't include any primitive nodes, but still caused the same issue. This indicates the problem is not limited to primitive nodes as originally thought.
+
+**Affected Workflow File:** video*ltx2*t2v_distilled.json (provided in Slack thread)