Merge branch 'main' into fix-nigthly-test

.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) })
+```
+
+```
+
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.38.12",
+  "version": "1.39.0",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

src/App.vue

@@ -1,11 +1,13 @@
 <template>
-  <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" />
+  </WorkspaceAuthGate>
 </template>
 
 <script setup lang="ts">
@@ -14,6 +16,7 @@ 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.test.ts

@@ -0,0 +1,206 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
+
+const mockIsInitialized = ref(false)
+const mockCurrentUser = ref<object | null>(null)
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: () => ({
+    isInitialized: mockIsInitialized,
+    currentUser: mockCurrentUser
+  })
+}))
+
+const mockRefreshRemoteConfig = vi.fn()
+vi.mock('@/platform/remoteConfig/refreshRemoteConfig', () => ({
+  refreshRemoteConfig: (options: unknown) => mockRefreshRemoteConfig(options)
+}))
+
+const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get teamWorkspacesEnabled() {
+        return mockTeamWorkspacesEnabled.value
+      }
+    }
+  })
+}))
+
+const mockWorkspaceStoreInitialize = vi.fn()
+const mockWorkspaceStoreInitState = vi.hoisted(() => ({
+  value: 'uninitialized' as string
+}))
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: () => ({
+    get initState() {
+      return mockWorkspaceStoreInitState.value
+    },
+    initialize: mockWorkspaceStoreInitialize
+  })
+}))
+
+const mockIsCloud = vi.hoisted(() => ({ value: true }))
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
+vi.mock('primevue/progressspinner', () => ({
+  default: { template: '<div class="progress-spinner" />' }
+}))
+
+describe('WorkspaceAuthGate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCloud.value = true
+    mockIsInitialized.value = false
+    mockCurrentUser.value = null
+    mockTeamWorkspacesEnabled.value = false
+    mockWorkspaceStoreInitState.value = 'uninitialized'
+    mockRefreshRemoteConfig.mockResolvedValue(undefined)
+    mockWorkspaceStoreInitialize.mockResolvedValue(undefined)
+  })
+
+  const mountComponent = () =>
+    mount(WorkspaceAuthGate, {
+      slots: {
+        default: '<div data-testid="slot-content">App Content</div>'
+      }
+    })
+
+  describe('non-cloud builds', () => {
+    it('renders slot immediately when isCloud is false', async () => {
+      mockIsCloud.value = false
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(wrapper.find('.progress-spinner').exists()).toBe(false)
+      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('cloud builds - unauthenticated user', () => {
+    it('shows spinner while waiting for Firebase auth', () => {
+      mockIsInitialized.value = false
+
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
+    })
+
+    it('renders slot when Firebase initializes with no user', async () => {
+      mockIsInitialized.value = false
+
+      const wrapper = mountComponent()
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+
+      mockIsInitialized.value = true
+      mockCurrentUser.value = null
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('cloud builds - authenticated user', () => {
+    beforeEach(() => {
+      mockIsInitialized.value = true
+      mockCurrentUser.value = { uid: 'user-123' }
+    })
+
+    it('refreshes remote config with auth after Firebase init', async () => {
+      mountComponent()
+      await flushPromises()
+
+      expect(mockRefreshRemoteConfig).toHaveBeenCalledWith({ useAuth: true })
+    })
+
+    it('renders slot when teamWorkspacesEnabled is false', async () => {
+      mockTeamWorkspacesEnabled.value = false
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
+    })
+
+    it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
+      mockTeamWorkspacesEnabled.value = true
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+
+    it('skips workspace init when store is already initialized', async () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockWorkspaceStoreInitState.value = 'ready'
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+  })
+
+  describe('error handling - graceful degradation', () => {
+    beforeEach(() => {
+      mockIsInitialized.value = true
+      mockCurrentUser.value = { uid: 'user-123' }
+    })
+
+    it('renders slot when remote config refresh fails', async () => {
+      mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+
+    it('renders slot when remote config refresh times out', async () => {
+      vi.useFakeTimers()
+      // Never-resolving promise simulates a hanging request
+      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Still showing spinner before timeout
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+
+      // Advance past the 10 second timeout
+      await vi.advanceTimersByTimeAsync(10_001)
+      await flushPromises()
+
+      // Should render slot after timeout (graceful degradation)
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      vi.useRealTimers()
+    })
+
+    it('renders slot when workspace store initialization fails', async () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockWorkspaceStoreInitialize.mockRejectedValue(
+        new Error('Workspace init failed')
+      )
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+  })
+})

src/components/auth/WorkspaceAuthGate.vue

@@ -0,0 +1,126 @@
+<template>
+  <slot v-if="isReady" />
+  <div
+    v-else
+    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
+  >
+    <ProgressSpinner />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * WorkspaceAuthGate - Conditional auth checkpoint for workspace mode.
+ *
+ * This gate ensures proper initialization order for workspace-scoped auth:
+ * 1. Wait for Firebase auth to resolve
+ * 2. Check if teamWorkspacesEnabled feature flag is on
+ * 3. If YES: Initialize workspace token and store before rendering
+ * 4. If NO: Render immediately using existing Firebase auth
+ *
+ * This prevents race conditions where API calls use Firebase tokens
+ * instead of workspace tokens when the workspace feature is enabled.
+ */
+import { promiseTimeout, until } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import ProgressSpinner from 'primevue/progressspinner'
+import { ref } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const FIREBASE_INIT_TIMEOUT_MS = 16_000
+const CONFIG_REFRESH_TIMEOUT_MS = 10_000
+
+const isReady = ref(!isCloud)
+
+async function initialize(): Promise<void> {
+  if (!isCloud) return
+
+  const authStore = useFirebaseAuthStore()
+  const { isInitialized, currentUser } = storeToRefs(authStore)
+
+  try {
+    // Step 1: Wait for Firebase auth to resolve
+    // This is shared with router guard - both wait for the same thing,
+    // but this gate blocks rendering while router guard blocks navigation
+    if (!isInitialized.value) {
+      await until(isInitialized).toBe(true, {
+        timeout: FIREBASE_INIT_TIMEOUT_MS
+      })
+    }
+
+    // Step 2: If not authenticated, nothing more to do
+    // Unauthenticated users don't have workspace context
+    if (!currentUser.value) {
+      isReady.value = true
+      return
+    }
+
+    // Step 3: Refresh feature flags with auth context
+    // This ensures teamWorkspacesEnabled reflects the authenticated user's state
+    // Timeout prevents hanging if server is slow/unresponsive
+    try {
+      await Promise.race([
+        refreshRemoteConfig({ useAuth: true }),
+        promiseTimeout(CONFIG_REFRESH_TIMEOUT_MS).then(() => {
+          throw new Error('Config refresh timeout')
+        })
+      ])
+    } catch (error) {
+      console.warn(
+        '[WorkspaceAuthGate] Failed to refresh remote config:',
+        error
+      )
+      // Continue - feature flags will use defaults (teamWorkspacesEnabled=false)
+      // App will render with Firebase auth fallback
+    }
+
+    // Step 4: THE CHECKPOINT - Are we in workspace mode?
+    const { flags } = useFeatureFlags()
+    if (!flags.teamWorkspacesEnabled) {
+      // Not in workspace mode - use existing Firebase auth flow
+      // No additional initialization needed
+      isReady.value = true
+      return
+    }
+
+    // Step 5: WORKSPACE MODE - Full initialization
+    await initializeWorkspaceMode()
+  } catch (error) {
+    console.error('[WorkspaceAuthGate] Initialization failed:', error)
+  } finally {
+    // Always render (graceful degradation)
+    // If workspace init failed, API calls fall back to Firebase token
+    isReady.value = true
+  }
+}
+
+async function initializeWorkspaceMode(): Promise<void> {
+  // Initialize the full workspace store which handles:
+  // - Restoring workspace token from session (fast path for refresh)
+  // - Fetching workspace list
+  // - Switching to last used workspace if needed
+  // - Setting active workspace
+  try {
+    const workspaceStore = useTeamWorkspaceStore()
+    if (workspaceStore.initState === 'uninitialized') {
+      await workspaceStore.initialize()
+    }
+  } catch (error) {
+    // Log but don't block - workspace UI features may not work but app will render
+    // API calls will fall back to Firebase token
+    console.warn(
+      '[WorkspaceAuthGate] Failed to initialize workspace store:',
+      error
+    )
+  }
+}
+
+// Start initialization immediately during component setup
+// (not in onMounted, so initialization starts before DOM is ready)
+void initialize()
+</script>

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(
@@ -502,19 +500,9 @@ onMounted(async () => {
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
   // Accept workspace invite from URL if present (e.g., ?invite=TOKEN)
-  // Uses watch because feature flags load asynchronously - flag may be false initially
-  // then become true once remoteConfig or websocket features are loaded
-  if (inviteUrlLoader) {
-    const stopWatching = watch(
-      () => flags.teamWorkspacesEnabled,
-      async (enabled) => {
-        if (enabled) {
-          stopWatching()
-          await inviteUrlLoader.loadInviteFromUrl()
-        }
-      },
-      { immediate: true }
-    )
+  // WorkspaceAuthGate ensures flag state is resolved before GraphCanvas mounts
+  if (inviteUrlLoader && flags.teamWorkspacesEnabled) {
+    await inviteUrlLoader.loadInviteFromUrl()
   }
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)

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/widget/nav/NavItem.vue

@@ -3,7 +3,7 @@
     v-tooltip.right="{
       value: tooltipText,
       disabled: !isOverflowing,
-      pt: { text: { class: 'whitespace-nowrap' } }
+      pt: { text: { class: 'w-max whitespace-nowrap' } }
     }"
     class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="

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/useFeatureFlags.ts

@@ -1,7 +1,10 @@
 import { computed, reactive, readonly } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import {
+  isAuthenticatedConfigLoaded,
+  remoteConfig
+} from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
 /**
@@ -95,9 +98,20 @@ export function useFeatureFlags() {
         )
       )
     },
+    /**
+     * Whether team workspaces feature is enabled.
+     * IMPORTANT: Returns false until authenticated remote config is loaded.
+     * This ensures we never use workspace tokens when the feature is disabled,
+     * and prevents race conditions during initialization.
+     */
     get teamWorkspacesEnabled() {
       if (!isCloud) return false
 
+      // Only return true if authenticated config has been loaded.
+      // This prevents race conditions where code checks this flag before
+      // WorkspaceAuthGate has refreshed the config with auth.
+      if (!isAuthenticatedConfigLoaded.value) return false
+
       return (
         remoteConfig.value.team_workspaces_enabled ??
         api.getServerFeature(ServerFeatureFlag.TEAM_WORKSPACES_ENABLED, false)

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,13 +16,15 @@ useExtensionService().registerExtension({
     const { isLoggedIn } = useCurrentUser()
     const { isActiveSubscription } = useSubscription()
 
+    // Refresh config when subscription status changes
+    // Initial auth-aware refresh happens in WorkspaceAuthGate before app renders
     watchDebounced(
       [isLoggedIn, isActiveSubscription],
       () => {
         if (!isLoggedIn.value) return
         void refreshRemoteConfig()
       },
-      { debounce: 256, immediate: true }
+      { debounce: 256 }
     )
 
     // 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/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/locales/ar/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "تم استيراد النموذج بنجاح.",
     "noAssetsFound": "لم يتم العثور على أصول",
     "noModelsInFolder": "لا توجد {type} متاحة في هذا المجلد",
+    "noResultsCanImport": "حاول تعديل البحث أو عوامل التصفية.\nيمكنك أيضًا إضافة النماذج باستخدام زر \"استيراد\" أعلاه.",
     "noValidSourceDetected": "لم يتم اكتشاف مصدر استيراد صالح",
     "notSureLeaveAsIs": "لست متأكدًا؟ فقط اتركه كما هو",
     "onlyCivitaiUrlsSupported": "يتم دعم روابط Civitai فقط",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "الإجراءات",
     "allMissingNodesInstalled": "تم تثبيت جميع العقد المفقودة بنجاح",
     "applyChanges": "تطبيق التغييرات",
+    "basicInfo": "معلومات أساسية",
     "changingVersion": "تغيير الإصدار من {from} إلى {to}",
     "clickToFinishSetup": "انقر",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "الرخصة",
     "loadingVersions": "جاري تحميل الإصدارات...",
     "mixedSelectionMessage": "لا يمكن تنفيذ إجراء جماعي على تحديد مختلط",
+    "nav": {
+      "allExtensions": "جميع الإضافات",
+      "allInWorkflow": "الكل في: {workflowName}",
+      "allInstalled": "جميع المثبتة",
+      "conflicting": "تعارض",
+      "inWorkflowSection": "في سير العمل",
+      "installedSection": "المثبتة",
+      "missingNodes": "عقد مفقودة",
+      "notInstalled": "غير مثبت",
+      "updatesAvailable": "تحديثات متوفرة"
+    },
     "nightlyVersion": "ليلي",
     "noDescription": "لا يوجد وصف متاح",
     "noNodesFound": "لم يتم العثور على عقد",
     "noNodesFoundDescription": "لم يمكن تحليل عقد الحزمة، أو أن الحزمة هي امتداد للواجهة فقط ولا تحتوي على أي عقد.",
     "noResultsFound": "لم يتم العثور على نتائج مطابقة لبحثك.",
     "nodePack": "حزمة العقد",
+    "nodePackInfo": "معلومات حزمة العقد",
     "notAvailable": "غير متوفر",
     "packsSelected": "الحزم المحددة",
     "repository": "المستودع",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "جاري إعادة تشغيل الخلفية لتطبيق التغييرات...",
     "searchPlaceholder": "بحث",
     "selectVersion": "اختر الإصدار",
+    "selected": "المحدد",
     "sort": {
       "created": "الأحدث",
       "downloads": "الأكثر شيوعاً",

src/locales/en/main.json

@@ -282,6 +282,10 @@
   },
   "manager": {
     "title": "Nodes Manager",
+    "nodePackInfo": "Node Pack Info",
+    "basicInfo": "Basic Info",
+    "actions": "Actions",
+    "selected": "Selected",
     "legacyMenuNotAvailable": "Legacy manager menu is not available, defaulting to the new manager menu.",
     "legacyManagerUI": "Use Legacy UI",
     "legacyManagerUIDescription": "To use the legacy Manager UI, start ComfyUI with --enable-manager-legacy-ui",
@@ -295,6 +299,17 @@
     "changingVersion": "Changing version from {from} to {to}",
     "dependencies": "Dependencies",
     "inWorkflow": "In Workflow",
+    "nav": {
+      "allExtensions": "All Extensions",
+      "notInstalled": "Not Installed",
+      "installedSection": "INSTALLED",
+      "allInstalled": "All installed",
+      "updatesAvailable": "Updates Available",
+      "conflicting": "Conflicting",
+      "inWorkflowSection": "IN WORKFLOW",
+      "allInWorkflow": "All in: {workflowName}",
+      "missingNodes": "Missing Nodes"
+    },
     "infoPanelEmpty": "Click an item to see the info",
     "applyChanges": "Apply Changes",
     "restartToApplyChanges": "To apply changes, please restart ComfyUI",
@@ -741,6 +756,7 @@
       "title": "Queue Progress",
       "total": "Total: {percent}",
       "colonPercent": ": {percent}",
+      "inlineTotalLabel": "Total",
       "currentNode": "Current node:",
       "viewAllJobs": "View all jobs",
       "viewList": "List view",
@@ -2529,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/locales/es/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "Modelo importado correctamente.",
     "noAssetsFound": "No se encontraron recursos",
     "noModelsInFolder": "No hay {type} disponibles en esta carpeta",
+    "noResultsCanImport": "Intenta ajustar tu búsqueda o filtros.\nTambién puedes añadir modelos usando el botón \"Importar\" de arriba.",
     "noValidSourceDetected": "No se detectó una fuente de importación válida",
     "notSureLeaveAsIs": "¿No estás seguro? Déjalo como está",
     "onlyCivitaiUrlsSupported": "Solo se admiten URLs de Civitai",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "Acciones",
     "allMissingNodesInstalled": "Todos los nodos faltantes se han instalado exitosamente",
     "applyChanges": "Aplicar Cambios",
+    "basicInfo": "Información básica",
     "changingVersion": "Cambiando versión de {from} a {to}",
     "clickToFinishSetup": "Haz clic",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "Licencia",
     "loadingVersions": "Cargando versiones...",
     "mixedSelectionMessage": "No se puede realizar acción masiva en selección mixta",
+    "nav": {
+      "allExtensions": "Todas las extensiones",
+      "allInWorkflow": "Todo en: {workflowName}",
+      "allInstalled": "Todo instalado",
+      "conflicting": "En conflicto",
+      "inWorkflowSection": "EN EL FLUJO DE TRABAJO",
+      "installedSection": "INSTALADO",
+      "missingNodes": "Nodos faltantes",
+      "notInstalled": "No instalado",
+      "updatesAvailable": "Actualizaciones disponibles"
+    },
     "nightlyVersion": "Nocturna",
     "noDescription": "No hay descripción disponible",
     "noNodesFound": "No se encontraron nodos",
     "noNodesFoundDescription": "Los nodos del paquete no se pudieron analizar, o el paquete es solo una extensión de frontend y no tiene ningún nodo.",
     "noResultsFound": "No se encontraron resultados que coincidan con tu búsqueda.",
     "nodePack": "Paquete de Nodos",
+    "nodePackInfo": "Información del paquete de nodos",
     "notAvailable": "No Disponible",
     "packsSelected": "Paquetes Seleccionados",
     "repository": "Repositorio",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "Reiniciando backend para aplicar cambios...",
     "searchPlaceholder": "Buscar",
     "selectVersion": "Seleccionar Versión",
+    "selected": "Seleccionado",
     "sort": {
       "created": "Más reciente",
       "downloads": "Más Popular",

src/locales/fa/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "مدل با موفقیت وارد شد.",
     "noAssetsFound": "هیچ دارایی‌ای یافت نشد",
     "noModelsInFolder": "هیچ {type} در این پوشه موجود نیست",
+    "noResultsCanImport": "جستجو یا فیلترهای خود را تغییر دهید.\nهمچنین می‌توانید مدل‌ها را با استفاده از دکمه «وارد کردن» در بالا اضافه کنید.",
     "noValidSourceDetected": "هیچ منبع واردات معتبری شناسایی نشد",
     "notSureLeaveAsIs": "مطمئن نیستید؟ همین را باقی بگذارید",
     "onlyCivitaiUrlsSupported": "فقط URLهای Civitai پشتیبانی می‌شوند",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "اقدامات",
     "allMissingNodesInstalled": "همه نودهای مفقود با موفقیت نصب شدند",
     "applyChanges": "اعمال تغییرات",
+    "basicInfo": "اطلاعات پایه",
     "changingVersion": "تغییر نسخه از {from} به {to}",
     "clickToFinishSetup": "کلیک کنید",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "مجوز",
     "loadingVersions": "در حال بارگذاری نسخه‌ها...",
     "mixedSelectionMessage": "امکان انجام عملیات گروهی روی انتخاب ترکیبی وجود ندارد",
+    "nav": {
+      "allExtensions": "همه افزونه‌ها",
+      "allInWorkflow": "همه در: {workflowName}",
+      "allInstalled": "همه نصب شده‌ها",
+      "conflicting": "دارای تداخل",
+      "inWorkflowSection": "در Workflow",
+      "installedSection": "نصب شده",
+      "missingNodes": "Nodeهای مفقود",
+      "notInstalled": "نصب نشده",
+      "updatesAvailable": "به‌روزرسانی‌های موجود"
+    },
     "nightlyVersion": "نسخه nightly",
     "noDescription": "توضیحی موجود نیست",
     "noNodesFound": "نودی یافت نشد",
     "noNodesFoundDescription": "نودهای این بسته قابل تجزیه نبودند یا این بسته فقط یک افزونه فرانت‌اند است و نودی ندارد.",
     "noResultsFound": "نتیجه‌ای مطابق با جستجوی شما یافت نشد.",
     "nodePack": "بسته نود",
+    "nodePackInfo": "اطلاعات Node Pack",
     "notAvailable": "در دسترس نیست",
     "packsSelected": "بسته انتخاب شد",
     "repository": "مخزن",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "در حال راه‌اندازی مجدد backend برای اعمال تغییرات...",
     "searchPlaceholder": "جستجو",
     "selectVersion": "انتخاب نسخه",
+    "selected": "انتخاب شده",
     "sort": {
       "created": "جدیدترین",
       "downloads": "محبوب‌ترین",

src/locales/fr/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "Modèle importé avec succès.",
     "noAssetsFound": "Aucune ressource trouvée",
     "noModelsInFolder": "Aucun {type} disponible dans ce dossier",
+    "noResultsCanImport": "Essayez d’ajuster votre recherche ou vos filtres.\nVous pouvez également ajouter des modèles en utilisant le bouton « Importer » ci-dessus.",
     "noValidSourceDetected": "Aucune source d'importation valide détectée",
     "notSureLeaveAsIs": "Vous n'êtes pas sûr ? Laissez tel quel",
     "onlyCivitaiUrlsSupported": "Seules les URL Civitai sont prises en charge",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "Actions",
     "allMissingNodesInstalled": "Tous les nœuds manquants ont été installés avec succès",
     "applyChanges": "Appliquer les modifications",
+    "basicInfo": "Informations de base",
     "changingVersion": "Changement de version de {from} à {to}",
     "clickToFinishSetup": "Cliquez",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "Licence",
     "loadingVersions": "Chargement des versions...",
     "mixedSelectionMessage": "Impossible d'effectuer une action groupée sur une sélection mixte",
+    "nav": {
+      "allExtensions": "Toutes les extensions",
+      "allInWorkflow": "Tout dans : {workflowName}",
+      "allInstalled": "Tout installé",
+      "conflicting": "En conflit",
+      "inWorkflowSection": "DANS LE FLUX DE TRAVAIL",
+      "installedSection": "INSTALLÉ",
+      "missingNodes": "Nœuds manquants",
+      "notInstalled": "Non installé",
+      "updatesAvailable": "Mises à jour disponibles"
+    },
     "nightlyVersion": "Nocturne",
     "noDescription": "Aucune description disponible",
     "noNodesFound": "Aucun nœud trouvé",
     "noNodesFoundDescription": "Les nœuds du pack n'ont pas pu être analysés, ou le pack est une extension frontend uniquement et n'a pas de nœuds.",
     "noResultsFound": "Aucun résultat trouvé correspondant à votre recherche.",
     "nodePack": "Pack de Nœuds",
+    "nodePackInfo": "Informations sur le pack de nœuds",
     "notAvailable": "Non disponible",
     "packsSelected": "Packs sélectionnés",
     "repository": "Référentiel",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "Redémarrage du backend pour appliquer les modifications...",
     "searchPlaceholder": "Recherche",
     "selectVersion": "Sélectionner la version",
+    "selected": "Sélectionné",
     "sort": {
       "created": "Le plus récent",
       "downloads": "Le plus populaire",

src/locales/ja/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "モデルが正常にインポートされました。",
     "noAssetsFound": "アセットが見つかりません",
     "noModelsInFolder": "このフォルダには{type}がありません",
+    "noResultsCanImport": "検索やフィルターを調整してみてください。\nまた、上の「インポート」ボタンからモデルを追加することもできます。",
     "noValidSourceDetected": "有効なインポート元が検出されませんでした",
     "notSureLeaveAsIs": "分からない場合はそのままにしてください",
     "onlyCivitaiUrlsSupported": "CivitaiのURLのみサポートされています",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "アクション",
     "allMissingNodesInstalled": "すべての不足しているノードが正常にインストールされました",
     "applyChanges": "変更を適用",
+    "basicInfo": "基本情報",
     "changingVersion": "バージョンを {from} から {to} に変更",
     "clickToFinishSetup": "クリック",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "ライセンス",
     "loadingVersions": "バージョンを読み込んでいます...",
     "mixedSelectionMessage": "混在した選択では一括操作を実行できません",
+    "nav": {
+      "allExtensions": "すべての拡張機能",
+      "allInWorkflow": "{workflowName} 内のすべて",
+      "allInstalled": "すべてインストール済み",
+      "conflicting": "競合",
+      "inWorkflowSection": "ワークフロー内",
+      "installedSection": "インストール済み",
+      "missingNodes": "不足しているノード",
+      "notInstalled": "未インストール",
+      "updatesAvailable": "アップデートあり"
+    },
     "nightlyVersion": "ナイトリー",
     "noDescription": "説明はありません",
     "noNodesFound": "ノードが見つかりません",
     "noNodesFoundDescription": "パックのノードは解析できなかったか、パックがフロントエンドの拡張機能のみでノードがない可能性があります。",
     "noResultsFound": "検索に一致する結果が見つかりませんでした。",
     "nodePack": "ノードパック",
+    "nodePackInfo": "ノードパック情報",
     "notAvailable": "利用不可",
     "packsSelected": "選択したパック",
     "repository": "リポジトリ",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "変更を適用するためにバックエンドを再起動しています...",
     "searchPlaceholder": "検索",
     "selectVersion": "バージョンを選択",
+    "selected": "選択済み",
     "sort": {
       "created": "最新",
       "downloads": "最も人気",

src/locales/ko/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "모델이 성공적으로 가져와졌습니다.",
     "noAssetsFound": "에셋을 찾을 수 없습니다",
     "noModelsInFolder": "이 폴더에 사용 가능한 {type}이(가) 없습니다",
+    "noResultsCanImport": "검색어나 필터를 조정해보세요.\n또는 위의 \"가져오기\" 버튼을 사용해 모델을 추가할 수 있습니다.",
     "noValidSourceDetected": "유효한 가져오기 소스를 감지하지 못했습니다",
     "notSureLeaveAsIs": "잘 모르겠다면 그대로 두세요",
     "onlyCivitaiUrlsSupported": "Civitai URL만 지원됩니다",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "작업",
     "allMissingNodesInstalled": "누락된 모든 노드가 성공적으로 설치되었습니다",
     "applyChanges": "변경사항 적용",
+    "basicInfo": "기본 정보",
     "changingVersion": "{from}에서 {to}(으)로 버전 변경 중",
     "clickToFinishSetup": "클릭",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "라이선스",
     "loadingVersions": "버전 로딩 중...",
     "mixedSelectionMessage": "혼합 선택에 대해 일괄 작업을 수행할 수 없습니다",
+    "nav": {
+      "allExtensions": "모든 확장 프로그램",
+      "allInWorkflow": "모두: {workflowName}",
+      "allInstalled": "모두 설치됨",
+      "conflicting": "충돌",
+      "inWorkflowSection": "워크플로우 내",
+      "installedSection": "설치됨",
+      "missingNodes": "누락된 노드",
+      "notInstalled": "미설치",
+      "updatesAvailable": "업데이트 가능"
+    },
     "nightlyVersion": "최신 테스트 버전(nightly)",
     "noDescription": "설명이 없습니다",
     "noNodesFound": "노드를 찾을 수 없습니다",
     "noNodesFoundDescription": "팩의 노드를 파싱할 수 없거나, 팩이 프론트엔드 확장만을 가지고 있어서 노드가 없습니다.",
     "noResultsFound": "검색과 일치하는 결과가 없습니다.",
     "nodePack": "노드 팩",
+    "nodePackInfo": "노드 팩 정보",
     "notAvailable": "사용 불가",
     "packsSelected": "선택한 노드 팩",
     "repository": "저장소",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "변경사항을 적용하기 위해 백엔드를 다시 시작하는 중...",
     "searchPlaceholder": "검색",
     "selectVersion": "버전 선택",
+    "selected": "선택됨",
     "sort": {
       "created": "최신",
       "downloads": "가장 인기 있는",

src/locales/pt-BR/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "Modelo importado com sucesso.",
     "noAssetsFound": "Nenhum ativo encontrado",
     "noModelsInFolder": "Nenhum {type} disponível nesta pasta",
+    "noResultsCanImport": "Tente ajustar sua busca ou filtros.\nVocê também pode adicionar modelos usando o botão \"Importar\" acima.",
     "noValidSourceDetected": "Nenhuma fonte de importação válida detectada",
     "notSureLeaveAsIs": "Não tem certeza? Deixe como está",
     "onlyCivitaiUrlsSupported": "Apenas URLs do Civitai são suportadas",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "Ações",
     "allMissingNodesInstalled": "Todos os nodes ausentes foram instalados com sucesso",
     "applyChanges": "Aplicar Alterações",
+    "basicInfo": "Informações Básicas",
     "changingVersion": "Alterando versão de {from} para pt-BR",
     "clickToFinishSetup": "Clique",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "Licença",
     "loadingVersions": "Carregando versões...",
     "mixedSelectionMessage": "Não é possível realizar ação em massa em seleção mista",
+    "nav": {
+      "allExtensions": "Todas as Extensões",
+      "allInWorkflow": "Todos em: {workflowName}",
+      "allInstalled": "Todos Instalados",
+      "conflicting": "Conflitante",
+      "inWorkflowSection": "NO FLUXO DE TRABALHO",
+      "installedSection": "INSTALADO",
+      "missingNodes": "Nós Ausentes",
+      "notInstalled": "Não Instalado",
+      "updatesAvailable": "Atualizações Disponíveis"
+    },
     "nightlyVersion": "Noturna",
     "noDescription": "Nenhuma descrição disponível",
     "noNodesFound": "Nenhum node encontrado",
     "noNodesFoundDescription": "Os nodes do pacote não puderam ser analisados ou o pacote é apenas uma extensão de frontend e não possui nodes.",
     "noResultsFound": "Nenhum resultado encontrado para sua busca.",
     "nodePack": "Node Pack",
+    "nodePackInfo": "Informações do Pacote de Nós",
     "notAvailable": "Não Disponível",
     "packsSelected": "pacotes selecionados",
     "repository": "Repositório",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "Reiniciando backend para aplicar as alterações...",
     "searchPlaceholder": "Buscar",
     "selectVersion": "Selecionar Versão",
+    "selected": "Selecionado",
     "sort": {
       "created": "Mais Novos",
       "downloads": "Mais Populares",

src/locales/ru/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "Модель успешно импортирована.",
     "noAssetsFound": "Ресурсы не найдены",
     "noModelsInFolder": "Нет {type} в этой папке",
+    "noResultsCanImport": "Попробуйте изменить параметры поиска или фильтры.\nВы также можете добавить модели с помощью кнопки «Импортировать» выше.",
     "noValidSourceDetected": "Не обнаружен действительный источник импорта",
     "notSureLeaveAsIs": "Не уверены? Просто оставьте как есть",
     "onlyCivitaiUrlsSupported": "Поддерживаются только ссылки Civitai",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "Действия",
     "allMissingNodesInstalled": "Все отсутствующие ноды успешно установлены",
     "applyChanges": "Применить изменения",
+    "basicInfo": "Основная информация",
     "changingVersion": "Изменение версии с {from} на {to}",
     "clickToFinishSetup": "Нажмите",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "Лицензия",
     "loadingVersions": "Загрузка версий...",
     "mixedSelectionMessage": "Невозможно выполнить массовое действие для смешанного выбора",
+    "nav": {
+      "allExtensions": "Все расширения",
+      "allInWorkflow": "Все в: {workflowName}",
+      "allInstalled": "Все установленные",
+      "conflicting": "Конфликтующие",
+      "inWorkflowSection": "В РАБОЧЕМ ПРОЦЕССЕ",
+      "installedSection": "УСТАНОВЛЕНО",
+      "missingNodes": "Отсутствующие узлы",
+      "notInstalled": "Не установлено",
+      "updatesAvailable": "Доступны обновления"
+    },
     "nightlyVersion": "Ночная",
     "noDescription": "Описание отсутствует",
     "noNodesFound": "Узлы не найдены",
     "noNodesFoundDescription": "Узлы пакета не могут быть проанализированы, или пакет является только расширением интерфейса и не имеет узлов.",
     "noResultsFound": "По вашему запросу ничего не найдено.",
     "nodePack": "Пакет Узлов",
+    "nodePackInfo": "Информация о пакете узлов",
     "notAvailable": "Недоступно",
     "packsSelected": "Выбрано пакетов",
     "repository": "Репозиторий",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "Перезапуск бэкенда для применения изменений...",
     "searchPlaceholder": "Поиск",
     "selectVersion": "Выберите версию",
+    "selected": "Выбрано",
     "sort": {
       "created": "Новейшие",
       "downloads": "Самые популярные",

src/locales/tr/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "Model başarıyla içe aktarıldı.",
     "noAssetsFound": "Varlık bulunamadı",
     "noModelsInFolder": "Bu klasörde {type} mevcut değil",
+    "noResultsCanImport": "Aramanızı veya filtrelerinizi ayarlamayı deneyin.\nAyrıca yukarıdaki \"İçe Aktar\" butonunu kullanarak modeller ekleyebilirsiniz.",
     "noValidSourceDetected": "Geçerli bir içe aktarma kaynağı tespit edilmedi",
     "notSureLeaveAsIs": "Emin değil misiniz? Olduğu gibi bırakın",
     "onlyCivitaiUrlsSupported": "Yalnızca Civitai URL'leri destekleniyor",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "Eylemler",
     "allMissingNodesInstalled": "Tüm eksik düğümler başarıyla yüklendi",
     "applyChanges": "Değişiklikleri Uygula",
+    "basicInfo": "Temel Bilgiler",
     "changingVersion": "Sürüm {from} sürümünden {to} sürümüne değiştiriliyor",
     "clickToFinishSetup": "Kurulumu tamamlamak için tıklayın",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "Lisans",
     "loadingVersions": "Sürümler yükleniyor...",
     "mixedSelectionMessage": "Karışık seçim üzerinde toplu işlem yapılamaz",
+    "nav": {
+      "allExtensions": "Tüm Eklentiler",
+      "allInWorkflow": "Tümü: {workflowName}",
+      "allInstalled": "Tümü yüklü",
+      "conflicting": "Çakışan",
+      "inWorkflowSection": "İŞ AKIŞINDA",
+      "installedSection": "YÜKLÜ",
+      "missingNodes": "Eksik Düğümler",
+      "notInstalled": "Yüklü Değil",
+      "updatesAvailable": "Güncellemeler Mevcut"
+    },
     "nightlyVersion": "Gecelik",
     "noDescription": "Açıklama yok",
     "noNodesFound": "Düğüm bulunamadı",
     "noNodesFoundDescription": "Paketin düğümleri ya ayrıştırılamadı ya da paket yalnızca bir ön uç uzantısı ve herhangi bir düğüme sahip değil.",
     "noResultsFound": "Aramanızla eşleşen sonuç bulunamadı.",
     "nodePack": "Düğüm Paketi",
+    "nodePackInfo": "Düğüm Paketi Bilgisi",
     "notAvailable": "Mevcut Değil",
     "packsSelected": "paket seçildi",
     "repository": "Depo",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "Değişiklikleri uygulamak için arka uç yeniden başlatılıyor...",
     "searchPlaceholder": "Ara",
     "selectVersion": "Sürüm Seç",
+    "selected": "Seçildi",
     "sort": {
       "created": "En Yeni",
       "downloads": "En Popüler",

src/locales/zh-TW/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "模型匯入成功。",
     "noAssetsFound": "找不到資產",
     "noModelsInFolder": "此資料夾中沒有可用的 {type}",
+    "noResultsCanImport": "請嘗試調整搜尋或篩選條件。\n你也可以使用上方的「匯入」按鈕新增模型。",
     "noValidSourceDetected": "未偵測到有效的匯入來源",
     "notSureLeaveAsIs": "不確定？請保持原樣",
     "onlyCivitaiUrlsSupported": "僅支援 Civitai 的網址",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "操作",
     "allMissingNodesInstalled": "所有缺少的節點已成功安裝",
     "applyChanges": "套用變更",
+    "basicInfo": "基本資訊",
     "changingVersion": "正在將版本從 {from} 變更為 {to}",
     "clickToFinishSetup": "點擊",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "授權條款",
     "loadingVersions": "正在載入版本...",
     "mixedSelectionMessage": "無法對混合選取執行批次操作",
+    "nav": {
+      "allExtensions": "所有擴充功能",
+      "allInWorkflow": "全部於：{workflowName}",
+      "allInstalled": "全部已安裝",
+      "conflicting": "有衝突",
+      "inWorkflowSection": "工作流程中",
+      "installedSection": "已安裝",
+      "missingNodes": "缺少節點",
+      "notInstalled": "未安裝",
+      "updatesAvailable": "有可用更新"
+    },
     "nightlyVersion": "每夜建置版",
     "noDescription": "沒有可用的說明",
     "noNodesFound": "找不到任何節點",
     "noNodesFoundDescription": "此套件的節點無法解析，或此套件僅為前端擴充功能，沒有任何節點。",
     "noResultsFound": "找不到符合搜尋條件的結果。",
     "nodePack": "節點包",
+    "nodePackInfo": "節點包資訊",
     "notAvailable": "不可用",
     "packsSelected": "已選擇套件",
     "repository": "儲存庫",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "正在重新啟動後端以套用變更...",
     "searchPlaceholder": "搜尋",
     "selectVersion": "選擇版本",
+    "selected": "已選取",
     "sort": {
       "created": "最新上架",
       "downloads": "最受歡迎",

src/locales/zh/main.json

@@ -107,6 +107,7 @@
     "modelUploaded": "模型导入成功！🎉",
     "noAssetsFound": "未找到资产",
     "noModelsInFolder": "此文件夹中没有可用的{type}",
+    "noResultsCanImport": "尝试调整您的搜索或筛选条件。\n您也可以使用上方的“导入”按钮添加模型。",
     "noValidSourceDetected": "检测不到有效的导入源",
     "notSureLeaveAsIs": "不确定？那就放着不管吧",
     "onlyCivitaiUrlsSupported": "仅支持 Civitai 链接",
@@ -1260,8 +1261,10 @@
     }
   },
   "manager": {
+    "actions": "操作",
     "allMissingNodesInstalled": "所有缺失节点已成功安装",
     "applyChanges": "应用更改",
+    "basicInfo": "基本信息",
     "changingVersion": "将版本从 {from} 更改为 {to}",
     "clickToFinishSetup": "点击",
     "conflicts": {
@@ -1324,12 +1327,24 @@
     "license": "许可证",
     "loadingVersions": "正在加载版本...",
     "mixedSelectionMessage": "无法对混合选择执行批量操作",
+    "nav": {
+      "allExtensions": "全部扩展",
+      "allInWorkflow": "全部在：{workflowName}",
+      "allInstalled": "全部已安装",
+      "conflicting": "存在冲突",
+      "inWorkflowSection": "工作流中",
+      "installedSection": "已安装",
+      "missingNodes": "缺失节点",
+      "notInstalled": "未安装",
+      "updatesAvailable": "有可用更新"
+    },
     "nightlyVersion": "每夜",
     "noDescription": "无可用描述",
     "noNodesFound": "未找到节点",
     "noNodesFoundDescription": "无法解析包的节点，或者该包仅为前端扩展，没有任何节点。",
     "noResultsFound": "未找到符合您搜索的结果。",
     "nodePack": "节点包",
+    "nodePackInfo": "节点包信息",
     "notAvailable": "不可用",
     "packsSelected": "选定的包",
     "repository": "仓库",
@@ -1337,6 +1352,7 @@
     "restartingBackend": "正在重启后端以应用更改...",
     "searchPlaceholder": "搜索",
     "selectVersion": "选择版本",
+    "selected": "已选择",
     "sort": {
       "created": "最新",
       "downloads": "最受欢迎",

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/remoteConfig/refreshRemoteConfig.test.ts

@@ -11,11 +11,26 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-global.fetch = vi.fn()
+vi.stubGlobal('fetch', vi.fn())
 
 describe('refreshRemoteConfig', () => {
   const mockConfig = { feature1: true, feature2: 'value' }
 
+  function mockSuccessResponse(config = mockConfig) {
+    return {
+      ok: true,
+      json: async () => config
+    } as Response
+  }
+
+  function mockErrorResponse(status: number, statusText: string) {
+    return {
+      ok: false,
+      status,
+      statusText
+    } as Response
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
     remoteConfig.value = {}
@@ -24,10 +39,7 @@ describe('refreshRemoteConfig', () => {
 
   describe('with auth (default)', () => {
     it('uses api.fetchApi when useAuth is true', async () => {
-      vi.mocked(api.fetchApi).mockResolvedValue({
-        ok: true,
-        json: async () => mockConfig
-      } as Response)
+      vi.mocked(api.fetchApi).mockResolvedValue(mockSuccessResponse())
 
       await refreshRemoteConfig({ useAuth: true })
 
@@ -40,10 +52,7 @@ describe('refreshRemoteConfig', () => {
     })
 
     it('uses api.fetchApi by default', async () => {
-      vi.mocked(api.fetchApi).mockResolvedValue({
-        ok: true,
-        json: async () => mockConfig
-      } as Response)
+      vi.mocked(api.fetchApi).mockResolvedValue(mockSuccessResponse())
 
       await refreshRemoteConfig()
 
@@ -54,10 +63,7 @@ describe('refreshRemoteConfig', () => {
 
   describe('without auth', () => {
     it('uses raw fetch when useAuth is false', async () => {
-      vi.mocked(global.fetch).mockResolvedValue({
-        ok: true,
-        json: async () => mockConfig
-      } as Response)
+      vi.mocked(global.fetch).mockResolvedValue(mockSuccessResponse())
 
       await refreshRemoteConfig({ useAuth: false })
 
@@ -72,11 +78,9 @@ describe('refreshRemoteConfig', () => {
 
   describe('error handling', () => {
     it('clears config on 401 response', async () => {
-      vi.mocked(api.fetchApi).mockResolvedValue({
-        ok: false,
-        status: 401,
-        statusText: 'Unauthorized'
-      } as Response)
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        mockErrorResponse(401, 'Unauthorized')
+      )
 
       await refreshRemoteConfig()
 
@@ -85,11 +89,9 @@ describe('refreshRemoteConfig', () => {
     })
 
     it('clears config on 403 response', async () => {
-      vi.mocked(api.fetchApi).mockResolvedValue({
-        ok: false,
-        status: 403,
-        statusText: 'Forbidden'
-      } as Response)
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        mockErrorResponse(403, 'Forbidden')
+      )
 
       await refreshRemoteConfig()
 
@@ -105,5 +107,20 @@ describe('refreshRemoteConfig', () => {
       expect(remoteConfig.value).toEqual({})
       expect(window.__CONFIG__).toEqual({})
     })
+
+    it('preserves config on 500 response', async () => {
+      const existingConfig = { subscription_required: true }
+      remoteConfig.value = existingConfig
+      window.__CONFIG__ = existingConfig
+
+      vi.mocked(api.fetchApi).mockResolvedValue(
+        mockErrorResponse(500, 'Internal Server Error')
+      )
+
+      await refreshRemoteConfig()
+
+      expect(remoteConfig.value).toEqual(existingConfig)
+      expect(window.__CONFIG__).toEqual(existingConfig)
+    })
   })
 })

src/platform/remoteConfig/refreshRemoteConfig.ts

@@ -1,6 +1,6 @@
 import { api } from '@/scripts/api'
 
-import { remoteConfig } from './remoteConfig'
+import { remoteConfig, remoteConfigState } from './remoteConfig'
 
 interface RefreshRemoteConfigOptions {
   /**
@@ -12,7 +12,12 @@ interface RefreshRemoteConfigOptions {
 
 /**
  * Loads remote configuration from the backend /features endpoint
- * and updates the reactive remoteConfig ref
+ * and updates the reactive remoteConfig ref.
+ *
+ * Sets remoteConfigState to:
+ * - 'anonymous' when loaded without auth
+ * - 'authenticated' when loaded with auth
+ * - 'error' when load fails
  */
 export async function refreshRemoteConfig(
   options: RefreshRemoteConfigOptions = {}
@@ -28,6 +33,7 @@ export async function refreshRemoteConfig(
       const config = await response.json()
       window.__CONFIG__ = config
       remoteConfig.value = config
+      remoteConfigState.value = useAuth ? 'authenticated' : 'anonymous'
       return
     }
 
@@ -35,10 +41,12 @@ export async function refreshRemoteConfig(
     if (response.status === 401 || response.status === 403) {
       window.__CONFIG__ = {}
       remoteConfig.value = {}
+      remoteConfigState.value = 'error'
     }
   } catch (error) {
     console.error('Failed to fetch remote config:', error)
     window.__CONFIG__ = {}
     remoteConfig.value = {}
+    remoteConfigState.value = 'error'
   }
 }

src/platform/remoteConfig/remoteConfig.ts

@@ -10,10 +10,32 @@
  * This module is tree-shaken in OSS builds.
  */
 
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { RemoteConfig } from './types'
 
+/**
+ * Load state for remote configuration.
+ * - 'unloaded': No config loaded yet
+ * - 'anonymous': Config loaded without auth (bootstrap)
+ * - 'authenticated': Config loaded with auth (user-specific flags available)
+ * - 'error': Failed to load config
+ */
+type RemoteConfigState = 'unloaded' | 'anonymous' | 'authenticated' | 'error'
+
+/**
+ * Current load state of remote configuration
+ */
+export const remoteConfigState = ref<RemoteConfigState>('unloaded')
+
+/**
+ * Whether the authenticated config has been loaded.
+ * Use this to gate access to user-specific feature flags like teamWorkspacesEnabled.
+ */
+export const isAuthenticatedConfigLoaded = computed(
+  () => remoteConfigState.value === 'authenticated'
+)
+
 /**
  * Reactive remote configuration
  * Updated whenever config is loaded from the server

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/surveys/useSurveyEligibility.test.ts

@@ -0,0 +1,259 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSurveyEligibility } from './useSurveyEligibility'
+
+const SURVEY_STATE_KEY = 'Comfy.SurveyState'
+const FEATURE_USAGE_KEY = 'Comfy.FeatureUsage'
+
+const mockDistribution = vi.hoisted(() => ({
+  isNightly: true,
+  isCloud: false,
+  isDesktop: false
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isNightly() {
+    return mockDistribution.isNightly
+  },
+  get isCloud() {
+    return mockDistribution.isCloud
+  },
+  get isDesktop() {
+    return mockDistribution.isDesktop
+  }
+}))
+
+describe('useSurveyEligibility', () => {
+  const defaultConfig = {
+    featureId: 'test-feature',
+    typeformId: 'abc123'
+  }
+
+  beforeEach(() => {
+    localStorage.clear()
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2024-06-15T12:00:00Z'))
+
+    mockDistribution.isNightly = true
+    mockDistribution.isCloud = false
+    mockDistribution.isDesktop = false
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+    vi.useRealTimers()
+  })
+
+  function setFeatureUsage(featureId: string, useCount: number) {
+    const existing = JSON.parse(localStorage.getItem(FEATURE_USAGE_KEY) ?? '{}')
+    existing[featureId] = {
+      useCount,
+      firstUsed: Date.now() - 1000,
+      lastUsed: Date.now()
+    }
+    localStorage.setItem(FEATURE_USAGE_KEY, JSON.stringify(existing))
+  }
+
+  describe('eligibility checks', () => {
+    it('is not eligible when not nightly', () => {
+      mockDistribution.isNightly = false
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible on cloud', () => {
+      mockDistribution.isCloud = true
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible on desktop', () => {
+      mockDistribution.isDesktop = true
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible below threshold', () => {
+      setFeatureUsage('test-feature', 2)
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is eligible when all conditions met', () => {
+      setFeatureUsage('test-feature', 3)
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(true)
+    })
+
+    it('respects custom threshold', () => {
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible } = useSurveyEligibility({
+        ...defaultConfig,
+        triggerThreshold: 10
+      })
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible when survey already seen', () => {
+      setFeatureUsage('test-feature', 5)
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: false,
+          seenSurveys: { 'test-feature': Date.now() }
+        })
+      )
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible during global cooldown', () => {
+      setFeatureUsage('test-feature', 5)
+      const threeDaysAgo = Date.now() - 3 * 24 * 60 * 60 * 1000
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: false,
+          seenSurveys: { 'other-feature': threeDaysAgo }
+        })
+      )
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is eligible after global cooldown expires', () => {
+      setFeatureUsage('test-feature', 5)
+      const fiveDaysAgo = Date.now() - 5 * 24 * 60 * 60 * 1000
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: false,
+          seenSurveys: { 'other-feature': fiveDaysAgo }
+        })
+      )
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(true)
+    })
+
+    it('is not eligible when opted out', () => {
+      setFeatureUsage('test-feature', 5)
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: true,
+          seenSurveys: {}
+        })
+      )
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('is not eligible when config disabled', () => {
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible } = useSurveyEligibility({
+        ...defaultConfig,
+        enabled: false
+      })
+
+      expect(isEligible.value).toBe(false)
+    })
+  })
+
+  describe('actions', () => {
+    it('markSurveyShown makes user ineligible', () => {
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible, markSurveyShown } =
+        useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(true)
+
+      markSurveyShown()
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('optOut prevents all future surveys', () => {
+      setFeatureUsage('test-feature', 5)
+
+      const { isEligible, optOut } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(true)
+
+      optOut()
+
+      expect(isEligible.value).toBe(false)
+    })
+
+    it('resetState restores eligibility', () => {
+      setFeatureUsage('test-feature', 5)
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: true,
+          seenSurveys: { 'test-feature': Date.now() }
+        })
+      )
+
+      const { isEligible, resetState } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+
+      resetState()
+
+      expect(isEligible.value).toBe(true)
+    })
+  })
+
+  describe('config values', () => {
+    it('exposes delayMs from config', () => {
+      const { delayMs } = useSurveyEligibility({
+        ...defaultConfig,
+        delayMs: 10000
+      })
+
+      expect(delayMs.value).toBe(10000)
+    })
+  })
+
+  describe('persistence', () => {
+    it('loads existing state from localStorage', () => {
+      setFeatureUsage('test-feature', 5)
+      localStorage.setItem(
+        SURVEY_STATE_KEY,
+        JSON.stringify({
+          optedOut: false,
+          seenSurveys: { 'test-feature': 1000 }
+        })
+      )
+
+      const { isEligible } = useSurveyEligibility(defaultConfig)
+
+      expect(isEligible.value).toBe(false)
+    })
+  })
+})

src/platform/surveys/useSurveyEligibility.ts

@@ -0,0 +1,97 @@
+import { useStorage } from '@vueuse/core'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
+
+import { useFeatureUsageTracker } from './useFeatureUsageTracker'
+
+interface FeatureSurveyConfig {
+  /** Feature identifier. Must remain static after initialization. */
+  featureId: string
+  typeformId: string
+  triggerThreshold?: number
+  delayMs?: number
+  enabled?: boolean
+}
+
+interface SurveyState {
+  optedOut: boolean
+  seenSurveys: Record<string, number>
+}
+
+const STORAGE_KEY = 'Comfy.SurveyState'
+const GLOBAL_COOLDOWN_MS = 4 * 24 * 60 * 60 * 1000 // 4 days
+const DEFAULT_THRESHOLD = 3
+const DEFAULT_DELAY_MS = 5000
+
+export function useSurveyEligibility(
+  config: MaybeRefOrGetter<FeatureSurveyConfig>
+) {
+  const state = useStorage<SurveyState>(STORAGE_KEY, {
+    optedOut: false,
+    seenSurveys: {}
+  })
+  const resolvedConfig = computed(() => toValue(config))
+
+  const { useCount } = useFeatureUsageTracker(resolvedConfig.value.featureId)
+
+  const threshold = computed(
+    () => resolvedConfig.value.triggerThreshold ?? DEFAULT_THRESHOLD
+  )
+  const delayMs = computed(
+    () => resolvedConfig.value.delayMs ?? DEFAULT_DELAY_MS
+  )
+  const isSurveyEnabled = computed(() => resolvedConfig.value.enabled ?? true)
+
+  const isNightlyLocalhost = computed(() => isNightly && !isCloud && !isDesktop)
+
+  const hasReachedThreshold = computed(() => useCount.value >= threshold.value)
+
+  const hasSeenSurvey = computed(
+    () => !!state.value.seenSurveys[resolvedConfig.value.featureId]
+  )
+
+  const isInGlobalCooldown = computed(() => {
+    const timestamps = Object.values(state.value.seenSurveys)
+    if (timestamps.length === 0) return false
+    const lastShown = Math.max(...timestamps)
+    return Date.now() - lastShown < GLOBAL_COOLDOWN_MS
+  })
+
+  const hasOptedOut = computed(() => state.value.optedOut)
+
+  const isEligible = computed(() => {
+    if (!isSurveyEnabled.value) return false
+    if (!isNightlyLocalhost.value) return false
+    if (!hasReachedThreshold.value) return false
+    if (hasSeenSurvey.value) return false
+    if (isInGlobalCooldown.value) return false
+    if (hasOptedOut.value) return false
+
+    return true
+  })
+
+  function markSurveyShown() {
+    state.value.seenSurveys[resolvedConfig.value.featureId] = Date.now()
+  }
+
+  function optOut() {
+    state.value.optedOut = true
+  }
+
+  function resetState() {
+    state.value = {
+      optedOut: false,
+      seenSurveys: {}
+    }
+  }
+
+  return {
+    isEligible,
+    delayMs,
+    markSurveyShown,
+    optOut,
+    resetState
+  }
+}

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/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/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/scripts/api.ts

@@ -521,10 +521,11 @@ export class ComfyApi extends EventTarget {
     }
 
     // Get auth token and set cloud params if available
+    // Uses workspace token (if enabled) or Firebase token
     if (isCloud) {
       try {
         const authStore = await this.getAuthStore()
-        const authToken = await authStore?.getIdToken()
+        const authToken = await authStore?.getAuthToken()
         if (authToken) {
           params.set('token', authToken)
         }

src/scripts/app.ts

@@ -1349,8 +1349,9 @@ export class ComfyApp {
     const executionStore = useExecutionStore()
     executionStore.lastNodeErrors = null
 
-    let comfyOrgAuthToken = await useFirebaseAuthStore().getIdToken()
-    let comfyOrgApiKey = useApiKeyAuthStore().getApiKey()
+    // Get auth token for backend nodes - uses workspace token if enabled, otherwise Firebase token
+    const comfyOrgAuthToken = await useFirebaseAuthStore().getAuthToken()
+    const comfyOrgApiKey = useApiKeyAuthStore().getApiKey()
 
     try {
       while (this.queueItems.length) {

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/firebaseAuthStore.ts

@@ -212,6 +212,31 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     return token ? { Authorization: `Bearer ${token}` } : null
   }
 
+  /**
+   * Returns the raw auth token (not wrapped in a header object).
+   * Priority: workspace token > Firebase token.
+   * Use this for WebSocket connections and backend node auth.
+   */
+  const getAuthToken = async (): Promise<string | undefined> => {
+    if (flags.teamWorkspacesEnabled) {
+      const workspaceToken = sessionStorage.getItem(
+        WORKSPACE_STORAGE_KEYS.TOKEN
+      )
+      const expiresAt = sessionStorage.getItem(
+        WORKSPACE_STORAGE_KEYS.EXPIRES_AT
+      )
+
+      if (workspaceToken && expiresAt) {
+        const expiryTime = parseInt(expiresAt, 10)
+        if (Date.now() < expiryTime) {
+          return workspaceToken
+        }
+      }
+    }
+
+    return await getIdToken()
+  }
+
   const fetchBalance = async (): Promise<GetCustomerBalanceResponse | null> => {
     isFetchingBalance.value = true
     try {
@@ -513,6 +538,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     updatePassword: _updatePassword,
     deleteAccount: _deleteAccount,
     getAuthHeader,
-    getFirebaseAuthHeader
+    getFirebaseAuthHeader,
+    getAuthToken
   }
 })

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/GraphView.vue

@@ -52,7 +52,6 @@ import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n, loadLocale } from '@/i18n'
 import ModelImportProgressDialog from '@/platform/assets/components/ModelImportProgressDialog.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -246,27 +245,6 @@ const onReconnected = () => {
   }
 }
 
-// Initialize workspace store when feature flag and auth become available
-// Uses watch because remoteConfig loads asynchronously after component mount
-if (isCloud) {
-  const { flags } = useFeatureFlags()
-
-  watch(
-    () => [flags.teamWorkspacesEnabled, firebaseAuthStore.isAuthenticated],
-    async ([enabled, isAuthenticated]) => {
-      if (!enabled || !isAuthenticated) return
-
-      const { useTeamWorkspaceStore } =
-        await import('@/platform/workspace/stores/teamWorkspaceStore')
-      const workspaceStore = useTeamWorkspaceStore()
-      if (workspaceStore.initState === 'uninitialized') {
-        await workspaceStore.initialize()
-      }
-    },
-    { immediate: true }
-  )
-}
-
 useEventListener(api, 'status', onStatus)
 useEventListener(api, 'execution_success', onExecutionSuccess)
 useEventListener(api, 'reconnecting', onReconnecting)

src/workbench/extensions/manager/components/manager/ManagerDialog.vue

@@ -2,6 +2,7 @@
   <BaseModalLayout
     v-model:right-panel-open="isRightPanelOpen"
     :content-title="$t('manager.discoverCommunityContent')"
+    :right-panel-title="$t('manager.nodePackInfo')"
     class="manager-dialog"
   >
     <template #leftPanelHeaderTitle>
@@ -13,32 +14,64 @@
     </template>
 
     <template #header>
-      <div class="flex items-center gap-2">
-        <SingleSelect
-          v-model="searchMode"
-          class="min-w-34"
-          :options="filterOptions"
+      <div class="flex w-full items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <SingleSelect
+            v-model="searchMode"
+            class="min-w-34"
+            :options="filterOptions"
+          />
+          <AutoCompletePlus
+            v-model.lazy="searchQuery"
+            :suggestions="suggestions"
+            :placeholder="$t('manager.searchPlaceholder')"
+            :complete-on-focus="false"
+            :delay="8"
+            option-label="query"
+            class="w-full min-w-md max-w-lg"
+            :pt="{
+              root: { class: 'relative' },
+              pcInputText: {
+                root: {
+                  autofocus: true,
+                  class:
+                    'w-full h-10 rounded-lg bg-comfy-input text-comfy-input-foreground border-none outline-none text-sm'
+                }
+              },
+              overlay: {
+                class:
+                  'bg-comfy-input rounded-lg mt-1 shadow-lg border border-border-default'
+              },
+              list: { class: 'p-1' },
+              option: {
+                class:
+                  'px-3 py-2 rounded hover:bg-button-hover-surface cursor-pointer text-sm'
+              },
+              loader: { style: 'display: none' }
+            }"
+            :show-empty-message="false"
+            @complete="stubTrue"
+            @option-select="onOptionSelect"
+          >
+            <template #dropdownicon>
+              <i
+                class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+            </template>
+          </AutoCompletePlus>
+        </div>
+        <PackInstallButton
+          v-if="isMissingTab && missingNodePacks.length > 0"
+          :disabled="isMissingLoading || !!missingError"
+          :node-packs="missingNodePacks"
+          size="lg"
+          :label="$t('manager.installAllMissingNodes')"
         />
-        <AutoCompletePlus
-          v-model.lazy="searchQuery"
-          :suggestions="suggestions"
-          :placeholder="$t('manager.searchPlaceholder')"
-          :complete-on-focus="false"
-          :delay="8"
-          option-label="query"
-          class="w-full min-w-md max-w-lg"
-          :pt="{
-            pcInputText: {
-              root: {
-                autofocus: true,
-                class: 'w-full rounded-lg h-10'
-              }
-            },
-            loader: { style: 'display: none' }
-          }"
-          :show-empty-message="false"
-          @complete="stubTrue"
-          @option-select="onOptionSelect"
+        <PackUpdateButton
+          v-if="isUpdateAvailableTab && hasUpdateAvailable"
+          :node-packs="enabledUpdateAvailableNodePacks"
+          :has-disabled-update-packs="hasDisabledUpdatePacks"
+          size="lg"
         />
       </div>
     </template>
@@ -76,37 +109,18 @@
         </Button>
       </div>
 
-      <!-- Filters Row -->
-      <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
-        <div>
-          <PackInstallButton
-            v-if="isMissingTab && missingNodePacks.length > 0"
-            :disabled="isMissingLoading || !!missingError"
-            :node-packs="missingNodePacks"
-            size="lg"
-            :label="$t('manager.installAllMissingNodes')"
-          />
-          <PackUpdateButton
-            v-if="isUpdateAvailableTab && hasUpdateAvailable"
-            :node-packs="enabledUpdateAvailableNodePacks"
-            :has-disabled-update-packs="hasDisabledUpdatePacks"
-            size="lg"
-          />
-        </div>
-
-        <!-- Sort Options on right -->
-        <div>
-          <SingleSelect
-            v-model="sortField"
-            :label="$t('g.sort')"
-            :options="availableSortOptions"
-            class="w-48"
-          >
-            <template #icon>
-              <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
-            </template>
-          </SingleSelect>
-        </div>
+      <!-- Sort Options -->
+      <div class="flex justify-end px-6 pb-4">
+        <SingleSelect
+          v-model="sortField"
+          :label="$t('g.sort')"
+          :options="availableSortOptions"
+          class="w-48"
+        >
+          <template #icon>
+            <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+          </template>
+        </SingleSelect>
       </div>
     </template>
 
@@ -115,7 +129,7 @@
         <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
       </div>
       <NoResultsPlaceholder
-        v-else-if="searchResults.length === 0"
+        v-else-if="displayPacks.length === 0"
         :title="
           comfyManagerStore.error
             ? $t('manager.errorConnecting')
@@ -127,7 +141,7 @@
             : $t('manager.tryDifferentSearch')
         "
       />
-      <div v-else class="h-full" @click="handleGridContainerClick">
+      <div v-else class="h-full w-full" @click="handleGridContainerClick">
         <VirtualGrid
           id="results-grid"
           :items="resultsWithKeys"
@@ -182,9 +196,10 @@ import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { NavItemData } from '@/types/navTypes'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import PackUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue'
@@ -192,14 +207,13 @@ import InfoPanel from '@/workbench/extensions/manager/components/manager/infoPan
 import InfoPanelMultiItem from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue'
 import PackCard from '@/workbench/extensions/manager/components/manager/packCard/PackCard.vue'
 import GridSkeleton from '@/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue'
-import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
-import { usePackUpdateStatus } from '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus'
 import { useUpdateAvailableNodes } from '@/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes'
-import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useManagerDisplayPacks } from '@/workbench/extensions/manager/composables/useManagerDisplayPacks'
 import { useManagerStatePersistence } from '@/workbench/extensions/manager/composables/useManagerStatePersistence'
 import { useRegistrySearch } from '@/workbench/extensions/manager/composables/useRegistrySearch'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
@@ -215,14 +229,16 @@ const { buildDocsUrl } = useExternalLink()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
 const conflictAcknowledgment = useConflictAcknowledgment()
+const conflictDetectionStore = useConflictDetectionStore()
+const workflowStore = useWorkflowStore()
 const persistedState = useManagerStatePersistence()
 const initialState = persistedState.loadStoredState()
 
 const GRID_STYLE = {
   display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(17rem, 1fr))',
-  gap: '1.5rem',
-  padding: '0'
+  gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr))',
+  gap: '1rem',
+  padding: '0.5rem'
 } as const
 
 const {
@@ -245,32 +261,84 @@ const {
   hasDisabledUpdatePacks
 } = useUpdateAvailableNodes()
 
+// Get the current workflow name for the nav item
+const workflowName = computed(
+  () => workflowStore.activeWorkflow?.filename ?? t('manager.inWorkflow')
+)
+
 // Navigation items for LeftSidePanel
-const navItems = computed<NavItemData[]>(() => [
-  { id: ManagerTab.All, label: t('g.all'), icon: 'pi pi-list' },
-  { id: ManagerTab.Installed, label: t('g.installed'), icon: 'pi pi-box' },
+const navItems = computed<(NavItemData | NavGroupData)[]>(() => [
   {
-    id: ManagerTab.Workflow,
-    label: t('manager.inWorkflow'),
-    icon: 'pi pi-folder'
+    id: ManagerTab.All,
+    label: t('manager.nav.allExtensions'),
+    icon: 'icon-[lucide--list]'
   },
   {
-    id: ManagerTab.Missing,
-    label: t('g.missing'),
-    icon: 'pi pi-exclamation-circle'
+    id: ManagerTab.NotInstalled,
+    label: t('manager.nav.notInstalled'),
+    icon: 'icon-[lucide--globe]'
   },
   {
-    id: ManagerTab.UpdateAvailable,
-    label: t('g.updateAvailable'),
-    icon: 'pi pi-sync'
+    title: t('manager.nav.installedSection'),
+    items: [
+      {
+        id: ManagerTab.AllInstalled,
+        label: t('manager.nav.allInstalled'),
+        icon: 'icon-[lucide--download]'
+      },
+      {
+        id: ManagerTab.UpdateAvailable,
+        label: t('manager.nav.updatesAvailable'),
+        icon: 'icon-[lucide--refresh-cw]'
+      },
+      {
+        id: ManagerTab.Conflicting,
+        label: t('manager.nav.conflicting'),
+        icon: 'icon-[lucide--triangle-alert]',
+        badge: conflictDetectionStore.conflictedPackages.length || undefined
+      }
+    ]
+  },
+  {
+    title: t('manager.nav.inWorkflowSection'),
+    items: [
+      {
+        id: ManagerTab.Workflow,
+        label: t('manager.nav.allInWorkflow', {
+          workflowName: workflowName.value
+        }),
+        icon: 'icon-[lucide--share-2]'
+      },
+      {
+        id: ManagerTab.Missing,
+        label: t('manager.nav.missingNodes'),
+        icon: 'icon-[lucide--triangle-alert]'
+      }
+    ]
   }
 ])
 
 const initialTabId = initialTab ?? initialState.selectedTabId ?? ManagerTab.All
 const selectedNavId = ref<string | null>(initialTabId)
 
+// Helper to find a nav item by id in the nested structure
+const findNavItemById = (
+  items: (NavItemData | NavGroupData)[],
+  id: string | null
+): NavItemData | undefined => {
+  for (const item of items) {
+    if ('items' in item) {
+      const found = item.items.find((subItem) => subItem.id === id)
+      if (found) return found
+    } else if (item.id === id) {
+      return item
+    }
+  }
+  return undefined
+}
+
 const selectedTab = computed(() =>
-  navItems.value.find((item) => item.id === selectedNavId.value)
+  findNavItemById(navItems.value, selectedNavId.value)
 )
 
 const {
@@ -315,120 +383,20 @@ const isInitialLoad = computed(
   () => searchResults.value.length === 0 && searchQuery.value === ''
 )
 
-const isEmptySearch = computed(() => searchQuery.value === '')
-const displayPacks = ref<components['schemas']['Node'][]>([])
-
+// Use the new composable for tab-based display packs
 const {
-  startFetchInstalled,
-  filterInstalledPack,
-  installedPacks,
-  isLoading: isLoadingInstalled,
-  isReady: installedPacksReady
-} = useInstalledPacks()
-
-const {
-  startFetchWorkflowPacks,
-  filterWorkflowPack,
-  workflowPacks,
-  isLoading: isLoadingWorkflow,
-  isReady: workflowPacksReady
-} = useWorkflowPacks()
-
-const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
-  packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
+  displayPacks,
+  isLoading: isTabLoading,
+  workflowPacks
+} = useManagerDisplayPacks(selectedNavId, searchResults, searchQuery, sortField)
 
+// Tab helpers for template
 const isUpdateAvailableTab = computed(
   () => selectedTab.value?.id === ManagerTab.UpdateAvailable
 )
-const isInstalledTab = computed(
-  () => selectedTab.value?.id === ManagerTab.Installed
-)
 const isMissingTab = computed(
   () => selectedTab.value?.id === ManagerTab.Missing
 )
-const isWorkflowTab = computed(
-  () => selectedTab.value?.id === ManagerTab.Workflow
-)
-const isAllTab = computed(() => selectedTab.value?.id === ManagerTab.All)
-
-const isOutdatedPack = (pack: components['schemas']['Node']) => {
-  const { isUpdateAvailable } = usePackUpdateStatus(pack)
-  return isUpdateAvailable.value === true
-}
-const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
-  packs.filter(isOutdatedPack)
-
-watch(
-  [isUpdateAvailableTab, installedPacks],
-  async () => {
-    if (!isUpdateAvailableTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = filterOutdatedPacks(installedPacks.value)
-    } else if (
-      !installedPacks.value.length &&
-      !installedPacksReady.value &&
-      !isLoadingInstalled.value
-    ) {
-      await startFetchInstalled()
-    } else {
-      displayPacks.value = filterOutdatedPacks(installedPacks.value)
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  [isInstalledTab, installedPacks],
-  async () => {
-    if (!isInstalledTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = filterInstalledPack(searchResults.value)
-    } else if (
-      !installedPacks.value.length &&
-      !installedPacksReady.value &&
-      !isLoadingInstalled.value
-    ) {
-      await startFetchInstalled()
-    } else {
-      displayPacks.value = installedPacks.value
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  [isMissingTab, isWorkflowTab, workflowPacks, installedPacks],
-  async () => {
-    if (!isWorkflowTab.value && !isMissingTab.value) return
-
-    if (!isEmptySearch.value) {
-      displayPacks.value = isMissingTab.value
-        ? filterMissingPacks(filterWorkflowPack(searchResults.value))
-        : filterWorkflowPack(searchResults.value)
-    } else if (
-      !workflowPacks.value.length &&
-      !isLoadingWorkflow.value &&
-      !workflowPacksReady.value
-    ) {
-      await startFetchWorkflowPacks()
-      if (isMissingTab.value) {
-        await startFetchInstalled()
-      }
-    } else {
-      displayPacks.value = isMissingTab.value
-        ? filterMissingPacks(workflowPacks.value)
-        : workflowPacks.value
-    }
-  },
-  { immediate: true }
-)
-
-watch([isAllTab, searchResults], () => {
-  if (!isAllTab.value) return
-  displayPacks.value = searchResults.value
-})
 
 const onClickWarningLink = () => {
   window.open(
@@ -439,49 +407,9 @@ const onClickWarningLink = () => {
   )
 }
 
-const onResultsChange = () => {
-  switch (selectedTab.value?.id) {
-    case ManagerTab.Installed:
-      displayPacks.value = isEmptySearch.value
-        ? installedPacks.value
-        : filterInstalledPack(searchResults.value)
-      break
-    case ManagerTab.Workflow:
-      displayPacks.value = isEmptySearch.value
-        ? workflowPacks.value
-        : filterWorkflowPack(searchResults.value)
-      break
-    case ManagerTab.Missing:
-      if (!isEmptySearch.value) {
-        displayPacks.value = filterMissingPacks(
-          filterWorkflowPack(searchResults.value)
-        )
-      }
-      break
-    case ManagerTab.UpdateAvailable:
-      displayPacks.value = isEmptySearch.value
-        ? filterOutdatedPacks(installedPacks.value)
-        : filterOutdatedPacks(searchResults.value)
-      break
-    default:
-      displayPacks.value = searchResults.value
-  }
-}
-
-watch(searchResults, onResultsChange, { flush: 'post' })
-watch(() => comfyManagerStore.installedPacksIds, onResultsChange)
-
 const isLoading = computed(() => {
   if (isSearchLoading.value) return searchResults.value.length === 0
-  if (selectedTab.value?.id === ManagerTab.Installed) {
-    return isLoadingInstalled.value
-  }
-  if (
-    selectedTab.value?.id === ManagerTab.Workflow ||
-    selectedTab.value?.id === ManagerTab.Missing
-  ) {
-    return isLoadingWorkflow.value
-  }
+  if (isTabLoading.value) return true
   return isInitialLoad.value
 })
 
@@ -501,14 +429,16 @@ const isRightPanelOpen = ref(false)
 
 watch(
   () => selectedNodePacks.value.length,
-  (length) => {
-    isRightPanelOpen.value = length > 0
+  (length, oldLength) => {
+    if (length > 0 && oldLength === 0) {
+      isRightPanelOpen.value = true
+    }
   }
 )
 
 const getLoadingCount = () => {
   switch (selectedTab.value?.id) {
-    case ManagerTab.Installed:
+    case ManagerTab.AllInstalled:
       return comfyManagerStore.installedPacksIds?.size
     case ManagerTab.Workflow:
       return workflowPacks.value?.length
@@ -578,10 +508,6 @@ whenever(selectedNodePack, async () => {
     if (packIndex !== -1) {
       selectedNodePacks.value.splice(packIndex, 1, mergedPack)
     }
-    const idx = displayPacks.value.findIndex((p) => p.id === mergedPack.id)
-    if (idx !== -1) {
-      displayPacks.value.splice(idx, 1, mergedPack)
-    }
   }
 })
 
@@ -595,6 +521,7 @@ watch([searchQuery, selectedNavId], () => {
     pageNumber.value = 0
     gridContainer.scrollTop = 0
   }
+  unSelectItems()
 })
 
 watchEffect(() => {

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

@@ -1,6 +1,6 @@
 <template>
   <Button
-    variant="secondary"
+    variant="primary"
     :size
     :disabled="isLoading || isInstalling"
     @click="installAllPacks"
@@ -14,6 +14,7 @@
       duration="1s"
       :size="size === 'sm' ? 12 : 16"
     />
+    <i v-else class="icon-[lucide--download]" />
     <span>{{ computedLabel }}</span>
   </Button>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <Button
     v-tooltip.top="$t('manager.tryUpdateTooltip')"
-    variant="textonly"
+    variant="primary"
     :size
     :disabled="isUpdating"
     @click="tryUpdate"
@@ -11,6 +11,7 @@
       duration="1s"
       :size="size === 'sm' ? 12 : 16"
     />
+    <i v-else class="icon-[lucide--refresh-cw]" />
     <span>{{ isUpdating ? t('g.updating') : t('manager.tryUpdate') }}</span>
   </Button>
 </template>

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

@@ -1,10 +1,6 @@
 <template>
-  <Button
-    variant="textonly"
-    :size
-    class="border border-red-500"
-    @click="uninstallItems"
-  >
+  <Button variant="destructive" :size @click="uninstallItems">
+    <i class="icon-[lucide--trash-2]" />
     {{
       nodePacks.length > 1
         ? t('manager.uninstallSelected')

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

@@ -3,13 +3,16 @@
     v-tooltip.top="
       hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
     "
-    class="border"
+    variant="primary"
     :size
     :disabled="isUpdating"
     @click="updateAllPacks"
   >
     <DotSpinner v-if="isUpdating" duration="1s" :size="12" />
-    <span>{{ $t('manager.updateAll') }}</span>
+    <i v-else class="icon-[lucide--refresh-cw]" />
+    <span>{{
+      nodePacks.length > 1 ? $t('manager.updateAll') : $t('manager.update')
+    }}</span>
   </Button>
 </template>
 

src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue

@@ -1,62 +1,110 @@
 <template>
   <template v-if="nodePack">
-    <div class="relative z-40 flex h-full flex-col overflow-hidden">
-      <div class="top-0 z-10 w-full px-6 pt-6">
-        <InfoPanelHeader
-          :node-packs="[nodePack]"
-          :has-conflict="hasCompatibilityIssues"
-        >
-          <template v-if="canTryNightlyUpdate" #install-button>
-            <div class="flex w-full justify-center gap-2">
-              <PackTryUpdateButton :node-pack="nodePack" size="md" />
-              <PackUninstallButton :node-packs="[nodePack]" size="md" />
-            </div>
+    <div
+      ref="scrollContainer"
+      class="flex h-full flex-col overflow-y-auto scrollbar-custom"
+    >
+      <PropertiesAccordionItem v-if="!importFailed" :class="accordionClass">
+        <template #label>
+          <span class="text-xs uppercase font-inter">
+            {{ t('manager.actions') }}
+          </span>
+        </template>
+        <div class="flex flex-col gap-1 px-4">
+          <template v-if="canTryNightlyUpdate">
+            <PackTryUpdateButton :node-pack="nodePack" size="md" />
+            <PackUninstallButton :node-packs="[nodePack]" size="md" />
           </template>
-        </InfoPanelHeader>
-      </div>
-      <div
-        ref="scrollContainer"
-        class="scrollbar-hide flex-1 overflow-y-auto p-6 pt-2 text-sm"
-      >
-        <div class="mb-6">
-          <MetadataRow
-            v-if="!importFailed && isPackInstalled(nodePack.id)"
-            :label="t('manager.filter.enabled')"
-            class="flex"
-            style="align-items: center"
-          >
-            <PackEnableToggle
-              :node-pack="nodePack"
-              :has-conflict="hasCompatibilityIssues"
+          <template v-else-if="isUpdateAvailable">
+            <PackUpdateButton :node-packs="[nodePack]" size="md" />
+            <PackUninstallButton :node-packs="[nodePack]" size="md" />
+          </template>
+          <template v-else-if="isAllInstalled">
+            <PackUninstallButton :node-packs="[nodePack]" size="md" />
+          </template>
+          <template v-else>
+            <PackInstallButton
+              :node-packs="[nodePack]"
+              size="md"
+              :has-conflict="hasCompatibilityIssues || hasConflictInfo"
+              :conflict-info="conflictInfo"
             />
-          </MetadataRow>
-          <MetadataRow
-            v-for="item in infoItems"
-            v-show="item.value !== undefined && item.value !== null"
-            :key="item.key"
-            :label="item.label"
-            :value="item.value"
-          />
-          <MetadataRow :label="t('g.status')">
-            <PackStatusMessage
-              :status-type="
-                nodePack.status as components['schemas']['NodeVersionStatus']
-              "
-              :has-compatibility-issues="hasCompatibilityIssues"
-            />
-          </MetadataRow>
-          <MetadataRow :label="t('manager.version')">
-            <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
-          </MetadataRow>
+          </template>
         </div>
-        <div class="mb-6 overflow-hidden">
-          <InfoTabs
+      </PropertiesAccordionItem>
+
+      <PropertiesAccordionItem :class="accordionClass">
+        <template #label>
+          <span class="text-xs uppercase font-inter">
+            {{ t('manager.basicInfo') }}
+          </span>
+        </template>
+        <ModelInfoField :label="t('g.name')">
+          <span class="text-muted-foreground">{{ nodePack.name }}</span>
+        </ModelInfoField>
+        <ModelInfoField
+          v-if="!importFailed && isPackInstalled(nodePack.id)"
+          :label="t('manager.filter.enabled')"
+        >
+          <PackEnableToggle
             :node-pack="nodePack"
-            :has-compatibility-issues="hasCompatibilityIssues"
-            :conflict-result="conflictResult"
+            :has-conflict="hasCompatibilityIssues"
           />
+        </ModelInfoField>
+        <ModelInfoField
+          v-for="item in infoItems"
+          v-show="item.value !== undefined && item.value !== null"
+          :key="item.key"
+          :label="item.label"
+        >
+          <span class="text-muted-foreground">{{ item.value }}</span>
+        </ModelInfoField>
+        <ModelInfoField :label="t('g.status')">
+          <PackStatusMessage
+            :status-type="
+              nodePack.status as components['schemas']['NodeVersionStatus']
+            "
+            :has-compatibility-issues="hasCompatibilityIssues"
+          />
+        </ModelInfoField>
+        <ModelInfoField :label="t('manager.version')">
+          <PackVersionBadge :node-pack="nodePack" :is-selected="true" />
+        </ModelInfoField>
+      </PropertiesAccordionItem>
+
+      <PropertiesAccordionItem :class="accordionClass">
+        <template #label>
+          <span class="text-xs uppercase font-inter">
+            {{ t('g.description') }}
+          </span>
+        </template>
+        <DescriptionTabPanel :node-pack="nodePack" />
+      </PropertiesAccordionItem>
+
+      <PropertiesAccordionItem
+        v-if="hasCompatibilityIssues"
+        :class="accordionClass"
+      >
+        <template #label>
+          <span class="text-xs uppercase font-inter">
+            ⚠️ {{ importFailed ? t('g.error') : t('g.warning') }}
+          </span>
+        </template>
+        <div class="px-4 py-2">
+          <WarningTabPanel :conflict-result="conflictResult" />
         </div>
-      </div>
+      </PropertiesAccordionItem>
+
+      <PropertiesAccordionItem :class="accordionClass">
+        <template #label>
+          <span class="text-xs uppercase font-inter">
+            {{ t('g.nodes') }}
+          </span>
+        </template>
+        <div class="px-4 py-2">
+          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
+        </div>
+      </PropertiesAccordionItem>
     </div>
   </template>
   <template v-else>
@@ -67,26 +115,34 @@
 </template>
 
 <script setup lang="ts">
-import { useScroll, whenever } from '@vueuse/core'
+import { whenever } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
+import ModelInfoField from '@/platform/assets/components/modelInfo/ModelInfoField.vue'
 import type { components } from '@/types/comfyRegistryTypes'
+import { cn } from '@/utils/tailwindUtil'
 import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'
 import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
 import PackEnableToggle from '@/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import PackTryUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackTryUpdateButton.vue'
 import PackUninstallButton from '@/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue'
-import InfoPanelHeader from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue'
-import InfoTabs from '@/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue'
-import MetadataRow from '@/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue'
+import PackUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue'
+import DescriptionTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue'
+import NodesTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue'
+import WarningTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue'
 import { usePackUpdateStatus } from '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 import { IsInstallingKey } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import type {
+  ConflictDetail,
+  ConflictDetectionResult
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 interface InfoItem {
@@ -101,7 +157,12 @@ const { nodePack } = defineProps<{
 
 const scrollContainer = ref<HTMLElement | null>(null)
 
-const { isPackInstalled } = useComfyManagerStore()
+const accordionClass = cn(
+  'bg-modal-panel-background border-t border-border-default'
+)
+
+const managerStore = useComfyManagerStore()
+const { isPackInstalled } = managerStore
 const isInstalled = computed(() => isPackInstalled(nodePack.id))
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
@@ -109,9 +170,20 @@ whenever(isInstalled, () => {
   isInstalling.value = false
 })
 
-const { canTryNightlyUpdate } = usePackUpdateStatus(() => nodePack)
+const { canTryNightlyUpdate, isUpdateAvailable } = usePackUpdateStatus(
+  () => nodePack
+)
+
+const isAllInstalled = computed(() => isPackInstalled(nodePack.id))
 
 const { checkNodeCompatibility } = useConflictDetection()
+
+const conflictInfo = computed<ConflictDetail[]>(() => {
+  const compatibility = checkNodeCompatibility(nodePack)
+  return compatibility.conflicts ?? []
+})
+
+const hasConflictInfo = computed(() => conflictInfo.value.length > 0)
 const { getConflictsForPackageByID } = useConflictDetectionStore()
 
 const { t, d, n } = useI18n()
@@ -152,6 +224,12 @@ provide(ImportFailedKey, {
   showImportFailedDialog
 })
 
+const nodeNames = computed(() => {
+  // @ts-expect-error comfy_nodes is an Algolia-specific field
+  const { comfy_nodes } = nodePack
+  return comfy_nodes ?? []
+})
+
 const infoItems = computed<InfoItem[]>(() => [
   {
     key: 'publisher',
@@ -174,20 +252,11 @@ const infoItems = computed<InfoItem[]>(() => [
   }
 ])
 
-const { y } = useScroll(scrollContainer, {
-  eventListenerOptions: {
-    passive: true
-  }
-})
-const onNodePackChange = () => {
-  y.value = 0
-}
-
 whenever(
   () => nodePack.id,
   (nodePackId, oldNodePackId) => {
-    if (nodePackId !== oldNodePackId) {
-      onNodePackChange()
+    if (nodePackId !== oldNodePackId && scrollContainer.value) {
+      scrollContainer.value.scrollTop = 0
     }
   },
   { immediate: true }

src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue

@@ -1,97 +0,0 @@
-<template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center">
-    <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
-    </slot>
-    <h2
-      class="mt-4 mb-2 text-center text-2xl font-bold"
-      style="word-break: break-all"
-    >
-      <slot name="title">
-        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
-      </slot>
-    </h2>
-    <div
-      v-if="!importFailed"
-      class="mt-2 mb-4 flex w-full max-w-xs justify-center"
-    >
-      <slot name="install-button">
-        <PackUninstallButton
-          v-if="isAllInstalled"
-          v-bind="$attrs"
-          size="md"
-          :node-packs="nodePacks"
-        />
-        <PackInstallButton
-          v-else
-          v-bind="$attrs"
-          size="md"
-          :node-packs="nodePacks"
-          :has-conflict="hasConflict || computedHasConflict"
-          :conflict-info="conflictInfo"
-        />
-      </slot>
-    </div>
-  </div>
-  <div v-else class="flex flex-col items-center">
-    <NoResultsPlaceholder
-      :message="$t('manager.status.unknown')"
-      :title="$t('manager.tryAgainLater')"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import type { components } from '@/types/comfyRegistryTypes'
-import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
-import PackUninstallButton from '@/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue'
-import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
-
-const { nodePacks, hasConflict } = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-  hasConflict?: boolean
-}>()
-
-const managerStore = useComfyManagerStore()
-
-// Inject import failed context from parent
-const importFailedContext = inject(ImportFailedKey)
-const importFailed = importFailedContext?.importFailed
-
-const isAllInstalled = ref(false)
-watch(
-  [() => nodePacks, () => managerStore.installedPacks],
-  () => {
-    isAllInstalled.value = nodePacks.every((nodePack) =>
-      managerStore.isPackInstalled(nodePack.id)
-    )
-  },
-  { immediate: true }
-)
-
-// Add conflict detection for install button dialog
-const { checkNodeCompatibility } = useConflictDetection()
-
-// Compute conflict info for all node packs
-const conflictInfo = computed<ConflictDetail[]>(() => {
-  if (!nodePacks?.length) return []
-
-  const allConflicts: ConflictDetail[] = []
-  for (const nodePack of nodePacks) {
-    const compatibilityCheck = checkNodeCompatibility(nodePack)
-    if (compatibilityCheck.conflicts) {
-      allConflicts.push(...compatibilityCheck.conflicts)
-    }
-  }
-  return allConflicts
-})
-
-const computedHasConflict = computed(() => conflictInfo.value.length > 0)
-</script>

src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue

@@ -1,64 +1,67 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex h-full flex-col">
-    <div class="flex-1 overflow-auto p-6">
-      <InfoPanelHeader :node-packs>
-        <template #thumbnail>
-          <PackIconStacked :node-packs="nodePacks" />
-        </template>
-        <template #title>
-          <div class="mt-5">
-            <span class="mr-2 inline-block text-base text-blue-500">{{
-              nodePacks.length
-            }}</span>
-            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
-          </div>
-        </template>
-        <template #install-button>
-          <!-- Mixed: Don't show any button -->
-          <div v-if="isMixed" class="text-sm text-neutral-500">
-            {{ $t('manager.mixedSelectionMessage') }}
-          </div>
-          <!-- All installed: Show update (if nightly) and uninstall buttons -->
-          <div
-            v-else-if="isAllInstalled"
-            class="flex w-full justify-center gap-2"
-          >
-            <Button
-              v-if="hasNightlyPacks"
-              v-tooltip.top="$t('manager.tryUpdateTooltip')"
-              variant="textonly"
-              size="md"
-              :disabled="isUpdatingSelected"
-              @click="updateSelectedNightlyPacks"
-            >
-              <DotSpinner v-if="isUpdatingSelected" duration="1s" :size="16" />
-              <span>{{ updateSelectedLabel }}</span>
-            </Button>
-            <PackUninstallButton size="md" :node-packs="installedPacks" />
-          </div>
-          <!-- None installed: Show install button -->
-          <PackInstallButton
-            v-else-if="isNoneInstalled"
+  <div
+    v-if="nodePacks?.length"
+    class="flex h-full flex-col overflow-y-auto scrollbar-custom"
+  >
+    <PropertiesAccordionItem :class="accordionClass">
+      <template #label>
+        <span class="text-xs uppercase font-inter">
+          {{ t('manager.actions') }}
+        </span>
+      </template>
+      <div class="flex flex-col gap-1 px-4">
+        <!-- Mixed: Don't show any button -->
+        <div v-if="isMixed" class="text-sm text-neutral-500">
+          {{ $t('manager.mixedSelectionMessage') }}
+        </div>
+        <!-- All installed: Show update (if nightly) and uninstall buttons -->
+        <template v-else-if="isAllInstalled">
+          <Button
+            v-if="hasNightlyPacks"
+            v-tooltip.top="$t('manager.tryUpdateTooltip')"
+            variant="textonly"
             size="md"
-            :node-packs="notInstalledPacks"
-            :has-conflict="hasConflicts"
-            :conflict-info="conflictInfo"
-          />
+            :disabled="isUpdatingSelected"
+            @click="updateSelectedNightlyPacks"
+          >
+            <DotSpinner v-if="isUpdatingSelected" duration="1s" :size="16" />
+            <span>{{ updateSelectedLabel }}</span>
+          </Button>
+          <PackUninstallButton size="md" :node-packs="installedPacks" />
         </template>
-      </InfoPanelHeader>
-      <div class="mb-6">
-        <MetadataRow :label="$t('g.status')">
-          <PackStatusMessage
-            :status-type="overallStatus"
-            :has-compatibility-issues="hasConflicts"
-          />
-        </MetadataRow>
-        <MetadataRow
-          :label="$t('manager.totalNodes')"
-          :value="totalNodesCount"
+        <!-- None installed: Show install button -->
+        <PackInstallButton
+          v-else-if="isNoneInstalled"
+          size="md"
+          :node-packs="notInstalledPacks"
+          :has-conflict="hasConflicts"
+          :conflict-info="conflictInfo"
         />
       </div>
-    </div>
+    </PropertiesAccordionItem>
+
+    <PropertiesAccordionItem :class="accordionClass">
+      <template #label>
+        <span class="text-xs uppercase font-inter">
+          {{ t('manager.basicInfo') }}
+        </span>
+      </template>
+      <ModelInfoField :label="t('manager.selected')">
+        <span>
+          <span class="font-bold text-blue-500">{{ nodePacks.length }}</span>
+          {{ t('manager.packsSelected') }}
+        </span>
+      </ModelInfoField>
+      <ModelInfoField :label="t('g.status')">
+        <PackStatusMessage
+          :status-type="overallStatus"
+          :has-compatibility-issues="hasConflicts"
+        />
+      </ModelInfoField>
+      <ModelInfoField :label="t('manager.totalNodes')">
+        <span class="text-muted-foreground">{{ totalNodesCount }}</span>
+      </ModelInfoField>
+    </PropertiesAccordionItem>
   </div>
   <div v-else class="mx-8 mt-4 flex-1 overflow-hidden text-sm">
     {{ $t('manager.infoPanelEmpty') }}
@@ -71,15 +74,15 @@ import { computed, onUnmounted, provide, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
+import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import Button from '@/components/ui/button/Button.vue'
+import ModelInfoField from '@/platform/assets/components/modelInfo/ModelInfoField.vue'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { cn } from '@/utils/tailwindUtil'
 import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import PackUninstallButton from '@/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue'
-import InfoPanelHeader from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue'
-import MetadataRow from '@/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue'
-import PackIconStacked from '@/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue'
 import { usePacksSelection } from '@/workbench/extensions/manager/composables/nodePack/usePacksSelection'
 import { usePacksStatus } from '@/workbench/extensions/manager/composables/nodePack/usePacksStatus'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
@@ -92,6 +95,11 @@ const { nodePacks } = defineProps<{
 }>()
 
 const { t } = useI18n()
+
+const accordionClass = cn(
+  'bg-modal-panel-background border-t border-border-default'
+)
+
 const managerStore = useComfyManagerStore()
 const nodePacksRef = toRef(() => nodePacks)
 

src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="overflow-hidden">
-    <Tabs :value="activeTab">
-      <TabList class="scrollbar-hide overflow-x-auto">
-        <Tab
-          v-if="hasCompatibilityIssues"
-          value="warning"
-          class="mr-6 p-2 font-inter"
-        >
-          <div class="flex items-center gap-1">
-            <span>⚠️</span>
-            {{ importFailed ? $t('g.error') : $t('g.warning') }}
-          </div>
-        </Tab>
-        <Tab value="description" class="mr-6 p-2 font-inter">
-          {{ $t('g.description') }}
-        </Tab>
-        <Tab value="nodes" class="p-2 font-inter">
-          {{ $t('g.nodes') }}
-        </Tab>
-      </TabList>
-      <TabPanels class="overflow-auto px-2 py-4">
-        <TabPanel
-          v-if="hasCompatibilityIssues"
-          value="warning"
-          class="bg-transparent"
-        >
-          <WarningTabPanel
-            :node-pack="nodePack"
-            :conflict-result="conflictResult"
-          />
-        </TabPanel>
-        <TabPanel value="description">
-          <DescriptionTabPanel :node-pack="nodePack" />
-        </TabPanel>
-        <TabPanel value="nodes">
-          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import { computed, inject, ref, watchEffect } from 'vue'
-
-import type { components } from '@/types/comfyRegistryTypes'
-import DescriptionTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue'
-import NodesTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue'
-import WarningTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue'
-import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
-
-const { nodePack, hasCompatibilityIssues, conflictResult } = defineProps<{
-  nodePack: components['schemas']['Node']
-  hasCompatibilityIssues?: boolean
-  conflictResult?: ConflictDetectionResult | null
-}>()
-
-// Inject import failed context from parent
-const importFailedContext = inject(ImportFailedKey)
-const importFailed = importFailedContext?.importFailed
-
-const nodeNames = computed(() => {
-  // @ts-expect-error comfy_nodes is an Algolia-specific field
-  const { comfy_nodes } = nodePack
-  return comfy_nodes ?? []
-})
-
-const activeTab = ref('description')
-
-// Watch for compatibility issues and automatically switch to warning tab
-watchEffect(
-  () => {
-    if (hasCompatibilityIssues) {
-      activeTab.value = 'warning'
-    } else if (activeTab.value === 'warning') {
-      // If currently on warning tab but no issues, switch to description
-      activeTab.value = 'description'
-    }
-  },
-  { flush: 'post' }
-)
-</script>

src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="flex flex-col gap-4 text-sm">
-    <div v-for="(section, index) in sections" :key="index" class="mb-4">
-      <div class="mb-3">
-        {{ section.title }}
-      </div>
-      <div class="break-words text-muted">
-        <a
-          v-if="section.isUrl"
-          :href="section.text"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex items-center gap-2"
-        >
-          <i v-if="isGitHubLink(section.text)" class="pi pi-github text-base" />
-          <span class="break-all">{{ section.text }}</span>
-        </a>
-        <MarkdownText v-else :text="section.text" class="text-muted" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import MarkdownText from '@/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue'
-
-export interface TextSection {
-  title: string
-  text: string
-  isUrl?: boolean
-}
-
-defineProps<{
-  sections: TextSection[]
-}>()
-
-const isGitHubLink = (url: string): boolean => url.includes('github.com')
-</script>

src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
-    <div class="w-2/3">
-      <slot>{{ value }}</slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { value = 'N/A', label } = defineProps<{
-  label: string
-  value?: string | number
-}>()
-</script>

src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts

@@ -15,13 +15,6 @@ const i18n = createI18n({
   }
 })
 
-const TRANSLATIONS = {
-  description: 'Description',
-  repository: 'Repository',
-  license: 'License',
-  noDescription: 'No description available'
-}
-
 describe('DescriptionTabPanel', () => {
   const mountComponent = (props: {
     nodePack: Partial<components['schemas']['Node']>
@@ -34,16 +27,6 @@ describe('DescriptionTabPanel', () => {
     })
   }
 
-  const getSectionByTitle = (
-    wrapper: ReturnType<typeof mountComponent>,
-    title: string
-  ) => {
-    const sections = wrapper
-      .findComponent({ name: 'InfoTextSection' })
-      .props('sections')
-    return sections.find((s: any) => s.title === title)
-  }
-
   const createNodePack = (
     overrides: Partial<components['schemas']['Node']> = {}
   ) => ({
@@ -134,37 +117,36 @@ describe('DescriptionTabPanel', () => {
     licenseTests.forEach((test) => {
       it(test.name, () => {
         const wrapper = mountComponent({ nodePack: test.nodePack })
-        const licenseSection = getSectionByTitle(wrapper, TRANSLATIONS.license)
-        expect(licenseSection).toBeDefined()
-        expect(licenseSection.text).toBe(test.expected.text)
-        expect(licenseSection.isUrl).toBe(test.expected.isUrl)
+        if (test.expected.isUrl) {
+          const link = wrapper
+            .findAll('a')
+            .find((a) => a.text().includes(test.expected.text))
+          expect(link).toBeDefined()
+          expect(link!.attributes('href')).toBe(test.expected.text)
+        } else {
+          expect(wrapper.text()).toContain(test.expected.text)
+        }
       })
     })
   })
 
   describe('description sections', () => {
-    it('shows description section', () => {
+    it('shows description text', () => {
       const wrapper = mountComponent({
         nodePack: createNodePack()
       })
-      const descriptionSection = getSectionByTitle(
-        wrapper,
-        TRANSLATIONS.description
-      )
-      expect(descriptionSection).toBeDefined()
-      expect(descriptionSection.text).toBe('Test description')
+      expect(wrapper.text()).toContain('Test description')
     })
 
-    it('shows repository section when available', () => {
+    it('shows repository link when available', () => {
       const wrapper = mountComponent({
         nodePack: createNodePack({
           repository: 'https://github.com/user/repo'
         })
       })
-      const repoSection = getSectionByTitle(wrapper, TRANSLATIONS.repository)
-      expect(repoSection).toBeDefined()
-      expect(repoSection.text).toBe('https://github.com/user/repo')
-      expect(repoSection.isUrl).toBe(true)
+      const repoLink = wrapper.find('a[href="https://github.com/user/repo"]')
+      expect(repoLink.exists()).toBe(true)
+      expect(repoLink.attributes('target')).toBe('_blank')
     })
 
     it('shows fallback text when description is missing', () => {
@@ -173,7 +155,7 @@ describe('DescriptionTabPanel', () => {
           description: undefined
         }
       })
-      expect(wrapper.find('p').text()).toBe(TRANSLATIONS.noDescription)
+      expect(wrapper.text()).toContain('No description available')
     })
   })
 })

src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -1,24 +1,57 @@
 <template>
-  <div class="overflow-hidden">
-    <InfoTextSection
-      v-if="nodePack?.description"
-      :sections="descriptionSections"
-    />
-    <p v-else class="text-sm text-muted italic">
-      {{ $t('manager.noDescription') }}
-    </p>
-    <div v-if="nodePack?.latest_version?.dependencies?.length">
-      <p class="mb-1">
-        {{ $t('manager.dependencies') }}
-      </p>
+  <div>
+    <ModelInfoField :label="t('g.description')">
+      <MarkdownText
+        v-if="nodePack.description"
+        :text="nodePack.description"
+        class="text-muted-foreground"
+      />
+      <span v-else class="text-muted-foreground italic">
+        {{ t('manager.noDescription') }}
+      </span>
+    </ModelInfoField>
+    <ModelInfoField v-if="nodePack.repository" :label="t('manager.repository')">
+      <a
+        :href="nodePack.repository"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+      >
+        <i
+          v-if="isGitHubLink(nodePack.repository)"
+          class="pi pi-github text-base"
+        />
+        <span class="break-all">{{ nodePack.repository }}</span>
+        <i class="icon-[lucide--external-link] size-4 shrink-0" />
+      </a>
+    </ModelInfoField>
+    <ModelInfoField v-if="licenseInfo" :label="t('manager.license')">
+      <a
+        v-if="licenseInfo.isUrl"
+        :href="licenseInfo.text"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+      >
+        <span class="break-all">{{ licenseInfo.text }}</span>
+        <i class="icon-[lucide--external-link] size-4 shrink-0" />
+      </a>
+      <span v-else class="text-muted-foreground break-all">
+        {{ licenseInfo.text }}
+      </span>
+    </ModelInfoField>
+    <ModelInfoField
+      v-if="nodePack.latest_version?.dependencies?.length"
+      :label="t('manager.dependencies')"
+    >
       <div
         v-for="(dep, index) in nodePack.latest_version.dependencies"
         :key="index"
-        class="break-words text-muted"
+        class="break-words text-muted-foreground"
       >
         {{ dep }}
       </div>
-    </div>
+    </ModelInfoField>
   </div>
 </template>
 
@@ -26,10 +59,10 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import ModelInfoField from '@/platform/assets/components/modelInfo/ModelInfoField.vue'
 import type { components } from '@/types/comfyRegistryTypes'
 import { isValidUrl } from '@/utils/formatUtil'
-import InfoTextSection from '@/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue'
-import type { TextSection } from '@/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue'
+import MarkdownText from '@/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue'
 
 const { t } = useI18n()
 
@@ -37,6 +70,8 @@ const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
+const isGitHubLink = (url: string): boolean => url.includes('github.com')
+
 const isLicenseFile = (filename: string): boolean => {
   // Match LICENSE, LICENSE.md, LICENSE.txt (case insensitive)
   const licensePattern = /^license(\.md|\.txt)?$/i
@@ -118,33 +153,8 @@ const formatLicense = (
   }
 }
 
-const descriptionSections = computed<TextSection[]>(() => {
-  const sections: TextSection[] = [
-    {
-      title: t('g.description'),
-      text: nodePack.description || t('manager.noDescription')
-    }
-  ]
-
-  if (nodePack.repository) {
-    sections.push({
-      title: t('manager.repository'),
-      text: nodePack.repository,
-      isUrl: isValidUrl(nodePack.repository)
-    })
-  }
-
-  if (nodePack.license) {
-    const licenseInfo = formatLicense(nodePack.license)
-    if (licenseInfo && licenseInfo.text) {
-      sections.push({
-        title: t('manager.license'),
-        text: licenseInfo.text,
-        isUrl: licenseInfo.isUrl
-      })
-    }
-  }
-
-  return sections
+const licenseInfo = computed(() => {
+  if (!nodePack.license) return null
+  return formatLicense(nodePack.license)
 })
 </script>

src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -1,18 +1,8 @@
 <template>
-  <div class="flex flex-col gap-4 text-sm">
+  <div class="flex flex-col gap-1 text-sm">
     <template v-if="mappedNodeDefs?.length">
-      <div
-        v-for="nodeDef in mappedNodeDefs"
-        :key="createNodeDefKey(nodeDef)"
-        class="rounded-lg border p-4"
-      >
-        <div class="[zoom:0.6]">
-          <NodePreview
-            :node-def="nodeDef"
-            position="relative"
-            class="min-w-full! text-[.625rem]!"
-          />
-        </div>
+      <div v-for="nodeDef in mappedNodeDefs" :key="createNodeDefKey(nodeDef)">
+        <NodePreview :node-def="nodeDef" class="min-w-full!" />
       </div>
     </template>
     <template v-else-if="isLoading">

src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -3,15 +3,12 @@
     <div
       v-for="(conflict, index) in conflictResult?.conflicts || []"
       :key="index"
-      class="rounded-md bg-secondary-background/60 px-2 py-1"
+      class="rounded-md bg-secondary-background/60"
     >
       <!-- Import failed conflicts show detailed error message -->
       <template v-if="conflict.type === 'import_failed'">
-        <div
-          v-if="conflict.required_value"
-          class="max-h-64 overflow-x-hidden scrollbar-custom overflow-y-auto rounded px-2"
-        >
-          <p class="text-xs text-muted-foreground break-all font-mono">
+        <div v-if="conflict.required_value" class="overflow-x-hidden rounded">
+          <p class="m-0 text-xs text-muted-foreground break-all font-mono">
             {{ conflict.required_value }}
           </p>
         </div>

src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aspect-7/3 w-full overflow-hidden">
+  <div class="aspect-7/3 w-full overflow-hidden z-0">
     <!-- default banner show -->
     <div v-if="showDefaultBanner" class="h-full w-full">
       <img

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

@@ -1,6 +1,5 @@
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -16,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', () => ({
@@ -46,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: {
@@ -73,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: {
@@ -88,9 +86,8 @@ describe('PackCard', () => {
     const wrapper = mount(PackCard, {
       props,
       global: {
-        plugins: [pinia],
+        plugins: [createTestingPinia({ stubActions: false })],
         components: {
-          Card,
           ProgressSpinner
         },
         stubs: {
@@ -121,7 +118,7 @@ describe('PackCard', () => {
     it('should render package card with basic information', () => {
       const wrapper = createWrapper({ nodePack: mockNodePack })
 
-      expect(wrapper.find('.p-card').exists()).toBe(true)
+      expect(wrapper.exists()).toBe(true)
       expect(wrapper.text()).toContain('Test Package')
       expect(wrapper.text()).toContain('Test package description')
       expect(wrapper.text()).toContain('Test Author')
@@ -133,22 +130,22 @@ describe('PackCard', () => {
       expect(wrapper.text()).toContain('2024. 1. 1.')
     })
 
-    it('should apply selected class when isSelected is true', () => {
+    it('should apply selected ring when isSelected is true', () => {
       const wrapper = createWrapper({
         nodePack: mockNodePack,
         isSelected: true
       })
 
-      expect(wrapper.find('.selected-card').exists()).toBe(true)
+      expect(wrapper.find('.ring-3').exists()).toBe(true)
     })
 
-    it('should not apply selected class when isSelected is false', () => {
+    it('should not apply selected ring when isSelected is false', () => {
       const wrapper = createWrapper({
         nodePack: mockNodePack,
         isSelected: false
       })
 
-      expect(wrapper.find('.selected-card').exists()).toBe(false)
+      expect(wrapper.find('.ring-3').exists()).toBe(false)
     })
   })
 
@@ -157,7 +154,7 @@ describe('PackCard', () => {
       const wrapper = createWrapper({ nodePack: mockNodePack })
 
       expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('.p-card').exists()).toBe(true)
+      expect(wrapper.find('.rounded-lg').exists()).toBe(true)
     })
   })
 

src/workbench/extensions/manager/components/manager/packCard/PackCard.vue

@@ -1,30 +1,26 @@
 <template>
-  <Card
-    class="shadow-elevation-3 inline-flex size-full flex-col items-start justify-between overflow-hidden rounded-lg transition-all duration-200"
-    :class="{
-      'selected-card': isSelected,
-      'opacity-60': isDisabled
-    }"
-    :pt="{
-      body: { class: 'p-0 flex flex-col w-full h-full rounded-lg gap-0' },
-      content: { class: 'flex-1 flex flex-col rounded-lg min-h-0' },
-      title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
-      footer: {
-        class: 'p-0 m-0 flex flex-col gap-0',
-        style: {
-          borderTop: isLightTheme ? '1px solid #f4f4f4' : '1px solid #2C2C2C'
-        }
-      }
-    }"
+  <div
+    :class="
+      cn(
+        'flex size-full flex-col overflow-hidden rounded-lg bg-modal-card-background transition-colors duration-200 cursor-pointer select-none',
+        isSelected
+          ? 'ring-3 ring-modal-card-border-highlighted'
+          : 'hover:bg-modal-card-background-hovered',
+        isDisabled && 'opacity-60'
+      )
+    "
   >
-    <template #title>
+    <!-- Banner -->
+    <div class="w-full rounded-t-lg">
       <PackBanner :node-pack="nodePack" />
-    </template>
-    <template #content>
-      <div class="h-full w-full px-4 pt-4 pb-3">
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-1 flex-col rounded-lg min-h-0">
+      <div class="h-full w-full py-2 px-3">
         <div class="flex h-full w-full flex-col gap-y-1">
           <span
-            class="truncate overflow-hidden text-sm font-bold text-ellipsis"
+            class="truncate overflow-hidden text-xs font-bold text-ellipsis"
           >
             {{ nodePack.name }}
           </span>
@@ -63,19 +59,20 @@
           </div>
         </div>
       </div>
-    </template>
-    <template #footer>
+    </div>
+
+    <!-- Footer -->
+    <div class="border-t border-border-default">
       <PackCardFooter :node-pack="nodePack" :is-installing="isInstalling" />
-    </template>
-  </Card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import Card from 'primevue/card'
 import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { cn } from '@/utils/tailwindUtil'
 import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
 import PackBanner from '@/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue'
 import PackCardFooter from '@/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue'
@@ -96,11 +93,6 @@ const { nodePack, isSelected = false } = defineProps<{
 
 const { d, t } = useI18n()
 
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
-)
-
 const { isPackInstalled, isPackEnabled, isPackInstalling } =
   useComfyManagerStore()
 
@@ -133,22 +125,3 @@ const formattedLatestVersionDate = computed(() => {
   })
 })
 </script>
-
-<style scoped>
-.selected-card {
-  position: relative;
-}
-
-.selected-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 4px solid var(--p-primary-color);
-  border-radius: 0.5rem;
-  pointer-events: none;
-  z-index: 100;
-}
-</style>

src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue

@@ -6,6 +6,7 @@
       <i class="pi pi-download text-muted"></i>
       <span>{{ formattedDownloads }}</span>
     </div>
+    <div v-else></div>
     <PackInstallButton
       v-if="!isInstalled"
       :node-packs="[nodePack]"

src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="aspect-[2/1] w-full max-w-[204] overflow-hidden rounded-lg">
-    <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="h-full w-full">
-      <img
-        :src="DEFAULT_BANNER"
-        :alt="$t('g.defaultBanner')"
-        class="h-full w-full object-cover"
-      />
-    </div>
-    <!-- banner_url or icon show -->
-    <div v-else class="relative h-full w-full">
-      <!-- blur background -->
-      <div
-        v-if="imgSrc"
-        class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        :style="{
-          backgroundImage: `url(${imgSrc})`,
-          filter: 'blur(10px)'
-        }"
-      ></div>
-      <!-- image -->
-      <img
-        :src="isImageError ? DEFAULT_BANNER : imgSrc"
-        :alt="nodePack.name + ' banner'"
-        :class="
-          isImageError
-            ? 'relative w-full h-full object-cover z-10'
-            : 'relative w-full h-full object-contain z-10'
-        "
-        @error="isImageError = true"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import type { components } from '@/types/comfyRegistryTypes'
-
-const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
-
-const { nodePack } = defineProps<{
-  nodePack: components['schemas']['Node']
-}>()
-
-const isImageError = ref(false)
-
-const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
-const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
-</script>

src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="relative h-[104px] w-[224px] shadow-xl">
-    <div
-      v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
-      :key="pack.id"
-      class="absolute h-[90px] w-[210px]"
-      :style="{
-        bottom: `${index * offset}px`,
-        right: `${index * offset}px`,
-        zIndex: maxVisible - index
-      }"
-    >
-      <div class="rounded-lg border p-0.5 shadow-lg">
-        <PackIcon :node-pack="pack" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { components } from '@/types/comfyRegistryTypes'
-import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
-
-const {
-  nodePacks,
-  maxVisible = 3,
-  offset = 8
-} = defineProps<{
-  nodePacks: components['schemas']['Node'][]
-  maxVisible?: number
-  offset?: number
-}>()
-</script>

src/workbench/extensions/manager/composables/useManagerDisplayPacks.ts

@@ -0,0 +1,217 @@
+import { whenever } from '@vueuse/core'
+import { orderBy } from 'es-toolkit/compat'
+import { compare, valid } from 'semver'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+
+import { useRegistrySearchGateway } from '@/services/gateway/registrySearchGateway'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+
+type NodePack = components['schemas']['Node']
+
+export function useManagerDisplayPacks(
+  selectedTabId: Ref<string | null>,
+  searchResults: Ref<NodePack[]>,
+  searchQuery: Ref<string>,
+  sortField: Ref<string>
+) {
+  const comfyManagerStore = useComfyManagerStore()
+  const conflictDetectionStore = useConflictDetectionStore()
+  const { getSortValue, getSortableFields } = useRegistrySearchGateway()
+
+  const {
+    startFetchInstalled,
+    filterInstalledPack,
+    installedPacks,
+    isLoading: isLoadingInstalled,
+    isReady: installedPacksReady
+  } = useInstalledPacks()
+
+  const {
+    startFetchWorkflowPacks,
+    filterWorkflowPack,
+    workflowPacks,
+    isLoading: isLoadingWorkflow,
+    isReady: workflowPacksReady
+  } = useWorkflowPacks()
+
+  const tabType = computed(() => selectedTabId.value as ManagerTab | null)
+  const isEmptySearch = computed(() => searchQuery.value === '')
+
+  // Sorting function for packs not from searchResults
+  const sortPacks = (packs: NodePack[]) => {
+    if (!sortField.value || packs.length === 0) return packs
+
+    const sortableFields = getSortableFields()
+    const fieldConfig = sortableFields.find((f) => f.id === sortField.value)
+    const direction = fieldConfig?.direction || 'desc'
+
+    return orderBy(
+      packs,
+      [(pack) => getSortValue(pack, sortField.value)],
+      [direction]
+    )
+  }
+
+  // Filter functions
+  const filterNotInstalled = (packs: NodePack[]) =>
+    packs.filter((p) => !comfyManagerStore.isPackInstalled(p.id))
+
+  const filterConflicting = (packs: NodePack[]) =>
+    packs.filter(
+      (p) =>
+        !!p.id &&
+        conflictDetectionStore.conflictedPackages.some(
+          (c) => c.package_id === p.id
+        )
+    )
+
+  const filterOutdated = (packs: NodePack[]) =>
+    packs.filter((p) => {
+      const installedVersion = comfyManagerStore.getInstalledPackVersion(
+        p.id ?? ''
+      )
+      const latestVersion = p.latest_version?.version
+      if (
+        !comfyManagerStore.isPackInstalled(p.id) ||
+        !installedVersion ||
+        !latestVersion ||
+        !valid(installedVersion) // nightly builds
+      ) {
+        return false
+      }
+      return compare(latestVersion, installedVersion) > 0
+    })
+
+  // Data fetching triggers using whenever
+  const needsInstalledPacks = computed(() =>
+    [
+      ManagerTab.AllInstalled,
+      ManagerTab.UpdateAvailable,
+      ManagerTab.Conflicting
+    ].includes(tabType.value as ManagerTab)
+  )
+
+  const needsWorkflowPacks = computed(() =>
+    [ManagerTab.Workflow, ManagerTab.Missing].includes(
+      tabType.value as ManagerTab
+    )
+  )
+
+  whenever(
+    () =>
+      needsInstalledPacks.value &&
+      !installedPacksReady.value &&
+      !isLoadingInstalled.value,
+    () => startFetchInstalled()
+  )
+
+  whenever(
+    () =>
+      needsWorkflowPacks.value &&
+      !workflowPacksReady.value &&
+      !isLoadingWorkflow.value,
+    () => startFetchWorkflowPacks()
+  )
+
+  // For Missing tab, also need installed packs to determine what's missing
+  whenever(
+    () =>
+      tabType.value === ManagerTab.Missing &&
+      !installedPacksReady.value &&
+      !isLoadingInstalled.value,
+    () => startFetchInstalled()
+  )
+
+  // Single computed for display packs - replaces 7 watches
+  const displayPacks = computed(() => {
+    const tab = tabType.value
+    const hasSearch = !isEmptySearch.value
+
+    switch (tab) {
+      case ManagerTab.All:
+        return searchResults.value
+
+      case ManagerTab.NotInstalled:
+        return filterNotInstalled(searchResults.value)
+
+      case ManagerTab.AllInstalled:
+        return hasSearch
+          ? filterInstalledPack(searchResults.value)
+          : sortPacks(installedPacks.value)
+
+      case ManagerTab.UpdateAvailable:
+        return sortPacks(
+          filterOutdated(
+            hasSearch
+              ? filterInstalledPack(searchResults.value)
+              : installedPacks.value
+          )
+        )
+
+      case ManagerTab.Conflicting:
+        return sortPacks(
+          filterConflicting(
+            hasSearch
+              ? filterInstalledPack(searchResults.value)
+              : installedPacks.value
+          )
+        )
+
+      case ManagerTab.Workflow: {
+        return hasSearch
+          ? filterWorkflowPack(searchResults.value)
+          : sortPacks(workflowPacks.value)
+      }
+
+      case ManagerTab.Missing: {
+        const base = hasSearch
+          ? filterWorkflowPack(searchResults.value)
+          : workflowPacks.value
+        return sortPacks(filterNotInstalled(base))
+      }
+
+      default:
+        return searchResults.value
+    }
+  })
+
+  // Loading state - single computed
+  const isLoading = computed(() => {
+    const tab = tabType.value
+    if (
+      [
+        ManagerTab.AllInstalled,
+        ManagerTab.UpdateAvailable,
+        ManagerTab.Conflicting
+      ].includes(tab as ManagerTab)
+    ) {
+      return isLoadingInstalled.value
+    }
+    if ([ManagerTab.Workflow, ManagerTab.Missing].includes(tab as ManagerTab)) {
+      return isLoadingWorkflow.value
+    }
+    return false
+  })
+
+  const missingNodePacks = computed(() =>
+    filterNotInstalled(workflowPacks.value)
+  )
+
+  return {
+    displayPacks,
+    isLoading,
+    isLoadingInstalled,
+    isLoadingWorkflow,
+    installedPacks,
+    workflowPacks,
+    filterInstalledPack,
+    filterWorkflowPack,
+    missingNodePacks
+  }
+}

src/workbench/extensions/manager/composables/useRegistrySearch.ts

@@ -89,8 +89,11 @@ export function useRegistrySearch(
     isLoading.value = false
   }
 
-  const onQueryChange = () => updateSearchResults({ append: false })
-  const onPageChange = () => updateSearchResults({ append: true })
+  const onQueryChange = () => void updateSearchResults({ append: false })
+  const onPageChange = () => {
+    if (pageNumber.value === 0) return
+    void updateSearchResults({ append: true })
+  }
 
   watch([sortField, searchMode], onQueryChange)
   watch(pageNumber, onPageChange)

src/workbench/extensions/manager/types/comfyManagerTypes.ts

@@ -14,10 +14,12 @@ export const IsInstallingKey: InjectionKey<Ref<boolean>> =
 
 export enum ManagerTab {
   All = 'all',
-  Installed = 'installed',
+  NotInstalled = 'notInstalled',
+  AllInstalled = 'allInstalled',
+  UpdateAvailable = 'updateAvailable',
+  Conflicting = 'conflicting',
   Workflow = 'workflow',
-  Missing = 'missing',
-  UpdateAvailable = 'updateAvailable'
+  Missing = 'missing'
 }
 
 export type TaskLog = {