From 8c74a0347199660e2596d33c2a4fca1a12771bef Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 22 Jan 2026 19:00:55 -0800
Subject: [PATCH 01/41] fix: open assets tab when QPO V2 enabled

---
 src/components/TopMenuSection.test.ts | 38 +++++++++++++++++++++++++--
 src/components/TopMenuSection.vue     | 23 ++++++++++++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 6640f9b885f..12502d7a327 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -11,7 +11,9 @@ import type {
   JobListItem,
   JobStatus
 } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
 
 const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
@@ -32,7 +34,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-function createWrapper() {
+function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -51,7 +53,7 @@ function createWrapper() {
 
   return mount(TopMenuSection, {
     global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      plugins: [pinia, i18n],
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
@@ -134,4 +136,36 @@ describe('TopMenuSection', () => {
     const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
     expect(queueButton.text()).toContain('3 active')
   })
+
+  it('hides queue progress overlay when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+
+    await nextTick()
+
+    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
+      true
+    )
+    expect(
+      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
+    ).toBe(false)
+  })
+
+  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+  })
 })
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index a205370389b..966eca29d35 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -45,7 +45,9 @@
             v-tooltip.bottom="queueHistoryTooltipConfig"
             type="destructive"
             size="md"
-            :aria-pressed="isQueueOverlayExpanded"
+            :aria-pressed="
+              isQueueProgressOverlayVisible ? isQueueOverlayExpanded : undefined
+            "
             class="px-3"
             data-testid="queue-overlay-toggle"
             @click="toggleQueueOverlay"
@@ -54,7 +56,11 @@
               {{ activeJobsLabel }}
             </span>
             <span class="sr-only">
-              {{ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') }}
+              {{
+                isQueuePanelV2Enabled
+                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+              }}
             </span>
           </Button>
           <CurrentUserButton
@@ -75,6 +81,7 @@
         </div>
       </div>
       <QueueProgressOverlay
+        v-if="isQueueProgressOverlayVisible"
         v-model:expanded="isQueueOverlayExpanded"
         :menu-hovered="isTopMenuHovered"
       />
@@ -103,6 +110,7 @@ import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -120,6 +128,7 @@ const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
 const queueUIStore = useQueueUIStore()
+const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const releaseStore = useReleaseStore()
@@ -138,6 +147,12 @@ const activeJobsLabel = computed(() => {
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const isQueueProgressOverlayVisible = computed(
+  () => !isQueuePanelV2Enabled.value
+)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
@@ -167,6 +182,10 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
+  if (isQueuePanelV2Enabled.value) {
+    sidebarTabStore.activeSidebarTabId = 'assets'
+    return
+  }
   commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 

From 9fb11a1a7e66379cfbac6026146699de833b0d9a Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 22 Jan 2026 19:24:23 -0800
Subject: [PATCH 02/41] fix: toggle assets tab from queue button

---
 src/components/TopMenuSection.test.ts | 19 ++++++++++++++++++-
 src/components/TopMenuSection.vue     |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 12502d7a327..b767ab7f8b6 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -156,7 +156,7 @@ describe('TopMenuSection', () => {
   })
 
   it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn })
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
@@ -168,4 +168,21 @@ describe('TopMenuSection', () => {
 
     expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
   })
+
+  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const sidebarTabStore = useSidebarTabStore(pinia)
+    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+
+    await toggleButton.trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
+  })
 })
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 966eca29d35..712846f81e4 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -183,7 +183,7 @@ onMounted(() => {
 
 const toggleQueueOverlay = () => {
   if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.activeSidebarTabId = 'assets'
+    sidebarTabStore.toggleSidebarTab('assets')
     return
   }
   commandStore.execute('Comfy.Queue.ToggleOverlay')

From 76095542f4b1a26d6466618ba0d04cc0af614943 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 22 Jan 2026 20:13:26 -0800
Subject: [PATCH 03/41] test: cover queue button behavior by QPO setting

---
 src/components/TopMenuSection.test.ts | 17 +++++++++++++++++
 src/components/TopMenuSection.vue     |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 16b6430d16b..8d4f3673db1 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -13,6 +13,7 @@ import type {
   JobStatus
 } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
@@ -162,6 +163,22 @@ describe('TopMenuSection', () => {
     ).toBe(false)
   })
 
+  it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
+    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+    const settingStore = useSettingStore(pinia)
+    vi.mocked(settingStore.get).mockImplementation((key) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+    const wrapper = createWrapper(pinia)
+    const commandStore = useCommandStore(pinia)
+
+    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+
+    expect(commandStore.execute).toHaveBeenCalledWith(
+      'Comfy.Queue.ToggleOverlay'
+    )
+  })
+
   it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index d365d3fd85b..de91e6da543 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -46,7 +46,11 @@
             type="destructive"
             size="md"
             :aria-pressed="
-              isQueueProgressOverlayVisible ? isQueueOverlayExpanded : undefined
+              isQueuePanelV2Enabled
+                ? activeSidebarTabId === 'assets'
+                : isQueueProgressOverlayVisible
+                  ? isQueueOverlayExpanded
+                  : undefined
             "
             class="px-3"
             data-testid="queue-overlay-toggle"
@@ -137,6 +141,7 @@ const queueUIStore = useQueueUIStore()
 const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const releaseStore = useReleaseStore()
 const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =

From c63e27f4bb91de9d3fc8933b58fba0be7ad309ce Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 01:46:22 -0800
Subject: [PATCH 04/41] Add inline progress text and progress bar

---
 src/components/TopMenuSection.test.ts         |   1 +
 src/components/TopMenuSection.vue             | 187 ++++++++++--------
 src/components/actionbar/ComfyActionbar.vue   |  24 ++-
 src/components/queue/QueueInlineProgress.vue  |  33 ++++
 .../queue/QueueInlineProgressSummary.vue      |  72 +++++++
 src/locales/en/main.json                      |   1 +
 6 files changed, 239 insertions(+), 79 deletions(-)
 create mode 100644 src/components/queue/QueueInlineProgress.vue
 create mode 100644 src/components/queue/QueueInlineProgressSummary.vue

diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index 8d4f3673db1..f40bef39bf0 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -60,6 +60,7 @@ function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
+        QueueInlineProgressSummary: true,
         CurrentUserButton: true,
         LoginButton: true,
         ContextMenu: {
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index de91e6da543..fe8bc94017e 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -1,101 +1,121 @@
 <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>
+    <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"
+      <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"
           >
-            <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>
+            <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
-          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'
-                : isQueueProgressOverlayVisible
-                  ? isQueueOverlayExpanded
-                  : undefined
-            "
-            class="px-3"
-            data-testid="queue-overlay-toggle"
-            @click="toggleQueueOverlay"
-            @contextmenu.stop.prevent="showQueueContextMenu"
+            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"
           >
-            <span class="text-sm font-normal tabular-nums">
-              {{ activeJobsLabel }}
-            </span>
-            <span class="sr-only">
-              {{
+            <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"
+            />
+            <Button
+              v-tooltip.bottom="queueHistoryTooltipConfig"
+              type="destructive"
+              size="md"
+              :aria-pressed="
                 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>
+                  ? activeSidebarTabId === 'assets'
+                  : isQueueProgressOverlayVisible
+                    ? 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="isQueueProgressOverlayVisible"
+          v-model:expanded="isQueueOverlayExpanded"
+          :menu-hovered="isTopMenuHovered"
+        />
       </div>
-      <QueueProgressOverlay
-        v-if="isQueueProgressOverlayVisible"
-        v-model:expanded="isQueueOverlayExpanded"
-        :menu-hovered="isTopMenuHovered"
+    </div>
+
+    <div>
+      <QueueInlineProgressSummary
+        v-if="
+          isInlineProgressVisible && isActionbarEnabled && !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 +124,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 +168,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 +194,7 @@ const isQueuePanelV2Enabled = computed(() =>
 const isQueueProgressOverlayVisible = computed(
   () => !isQueuePanelV2Enabled.value
 )
+const isInlineProgressVisible = computed(() => isQueuePanelV2Enabled.value)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 5ea86085279..48804737ca1 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -18,7 +18,7 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div ref="panelRef" class="flex items-center select-none gap-2">
+      <div ref="panelRef" class="relative flex items-center select-none gap-2">
         <span
           ref="dragHandleRef"
           :class="
@@ -43,6 +43,13 @@
         </Button>
       </div>
     </Panel>
+
+    <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
+      <QueueInlineProgress
+        :hidden="queueOverlayExpanded"
+        data-testid="queue-inline-progress"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -59,6 +66,7 @@ import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } 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 +77,11 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
+  topMenuContainer?: HTMLElement | null
+  queueOverlayExpanded?: boolean
+}>()
+
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
 const { t } = useI18n()
@@ -76,6 +89,9 @@ 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 dragHandleRef = ref<HTMLElement | null>(null)
@@ -252,6 +268,12 @@ const onMouseLeaveDropZone = () => {
   }
 }
 
+const inlineProgressTarget = computed(() => {
+  if (!visible.value || !isQueuePanelV2Enabled.value) return null
+  if (isDocked.value) return topMenuContainer ?? null
+  return panelRef.value
+})
+
 // Handle drag state changes
 watch(isDragging, (dragging) => {
   if (dragging) {
diff --git a/src/components/queue/QueueInlineProgress.vue b/src/components/queue/QueueInlineProgress.vue
new file mode 100644
index 00000000000..0e584294148
--- /dev/null
+++ b/src/components/queue/QueueInlineProgress.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="shouldShow"
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 overflow-hidden rounded-[7px]"
+  >
+    <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'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { totalPercent, currentNodePercent } = useQueueProgress()
+
+const shouldShow = computed(
+  () =>
+    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+)
+</script>
diff --git a/src/components/queue/QueueInlineProgressSummary.vue b/src/components/queue/QueueInlineProgressSummary.vue
new file mode 100644
index 00000000000..1d19dc8d03e
--- /dev/null
+++ b/src/components/queue/QueueInlineProgressSummary.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="shouldShow" class="flex justify-end">
+    <div
+      class="flex items-center gap-4 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 gap-1 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 gap-1 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 { normalizeI18nKey } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { t } = useI18n()
+const executionStore = useExecutionStore()
+const {
+  totalPercent,
+  totalPercentFormatted,
+  currentNodePercent,
+  currentNodePercentFormatted
+} = useQueueProgress()
+
+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)
+})
+
+const shouldShow = computed(
+  () =>
+    !props.hidden &&
+    (!executionStore.isIdle ||
+      totalPercent.value > 0 ||
+      currentNodePercent.value > 0)
+)
+</script>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index bc582140abc..41df39926ca 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -742,6 +742,7 @@
       "title": "Queue Progress",
       "total": "Total: {percent}",
       "colonPercent": ": {percent}",
+      "inlineTotalLabel": "Total",
       "currentNode": "Current node:",
       "viewAllJobs": "View all jobs",
       "viewList": "List view",

From 76b7137fa1403247dc4f7b0315e01139bba5b7f6 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 02:49:30 -0800
Subject: [PATCH 05/41] Adjust spacing

---
 src/components/queue/QueueInlineProgressSummary.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/queue/QueueInlineProgressSummary.vue b/src/components/queue/QueueInlineProgressSummary.vue
index 1d19dc8d03e..0ab749928f7 100644
--- a/src/components/queue/QueueInlineProgressSummary.vue
+++ b/src/components/queue/QueueInlineProgressSummary.vue
@@ -1,12 +1,12 @@
 <template>
   <div v-if="shouldShow" class="flex justify-end">
     <div
-      class="flex items-center gap-4 whitespace-nowrap text-[0.75rem] leading-[normal] drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
+      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 gap-1 text-base-foreground">
+      <div class="flex items-center text-base-foreground">
         <span class="font-normal">
           {{ t('sideToolbar.queueProgressOverlay.inlineTotalLabel') }}:
         </span>
@@ -15,7 +15,7 @@
         </span>
       </div>
 
-      <div class="flex items-center gap-1 text-muted-foreground">
+      <div class="flex items-center text-muted-foreground">
         <span
           class="w-[16ch] shrink-0 truncate text-right"
           :title="currentNodeName"

From ce86b53e87174f30fff0418b072b5d39077d6d2b Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 03:36:33 -0800
Subject: [PATCH 06/41] Fix location when floating

---
 src/components/actionbar/ComfyActionbar.vue | 27 +++++++++++++--------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 48804737ca1..52cc439b8cb 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/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="relative flex items-center select-none gap-2">
+      <div class="relative flex items-center select-none gap-2">
         <span
           ref="dragHandleRef"
           :class="
@@ -64,6 +65,7 @@ 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'
@@ -93,14 +95,17 @@ const isQueuePanelV2Enabled = computed(() =>
   settingsStore.get('Comfy.Queue.QPOV2')
 )
 
-const panelRef = ref<HTMLElement | null>(null)
+const panelRef = ref<ComponentPublicInstance | null>(null)
+const panelElement = computed(
+  () => (panelRef.value?.$el as HTMLElement | undefined) ?? 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
@@ -117,11 +122,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
@@ -197,11 +203,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
@@ -271,7 +278,7 @@ const onMouseLeaveDropZone = () => {
 const inlineProgressTarget = computed(() => {
   if (!visible.value || !isQueuePanelV2Enabled.value) return null
   if (isDocked.value) return topMenuContainer ?? null
-  return panelRef.value
+  return panelElement.value
 })
 
 // Handle drag state changes

From aef4ddb5ccce1116e71030c97240338bbf59ac97 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 03:50:43 -0800
Subject: [PATCH 07/41] Perfectly align inline progress

---
 src/components/actionbar/ComfyActionbar.vue  |  1 +
 src/components/queue/QueueInlineProgress.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 52cc439b8cb..bd73eef3d4e 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -48,6 +48,7 @@
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
       <QueueInlineProgress
         :hidden="queueOverlayExpanded"
+        :radius-class="cn(isDocked ? 'rounded-[7px]' : 'rounded-[5px]')"
         data-testid="queue-inline-progress"
       />
     </Teleport>
diff --git a/src/components/queue/QueueInlineProgress.vue b/src/components/queue/QueueInlineProgress.vue
index 0e584294148..e591e50d20b 100644
--- a/src/components/queue/QueueInlineProgress.vue
+++ b/src/components/queue/QueueInlineProgress.vue
@@ -2,7 +2,9 @@
   <div
     v-if="shouldShow"
     aria-hidden="true"
-    class="pointer-events-none absolute inset-0 overflow-hidden rounded-[7px]"
+    :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]"
@@ -19,15 +21,16 @@
 import { computed } from 'vue'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { hidden = false, radiusClass = 'rounded-[7px]' } = defineProps<{
   hidden?: boolean
+  radiusClass?: string
 }>()
 
 const { totalPercent, currentNodePercent } = useQueueProgress()
 
 const shouldShow = computed(
-  () =>
-    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+  () => !hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
 )
 </script>

From c60114f9355490db1f4b309d0aac8c795534f475 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 03:57:36 -0800
Subject: [PATCH 08/41] fix: anchor floating inline progress summary

---
 src/components/TopMenuSection.vue           | 34 +++++++++++++++++++--
 src/components/actionbar/ComfyActionbar.vue |  2 ++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index fe8bc94017e..47b60e4eb05 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -43,6 +43,7 @@
               class="[&:not(:has(*>*:not(:empty)))]:hidden"
             ></div>
             <ComfyActionbar
+              ref="actionbarRef"
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
             />
@@ -103,10 +104,18 @@
     </div>
 
     <div>
+      <Teleport
+        v-if="inlineProgressSummaryTarget"
+        :to="inlineProgressSummaryTarget"
+      >
+        <div
+          class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
+        >
+          <QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
+        </div>
+      </Teleport>
       <QueueInlineProgressSummary
-        v-if="
-          isInlineProgressVisible && isActionbarEnabled && !isActionbarFloating
-        "
+        v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
         class="pr-1"
         :hidden="isQueueOverlayExpanded"
       />
@@ -195,6 +204,25 @@ const isQueueProgressOverlayVisible = computed(
   () => !isQueuePanelV2Enabled.value
 )
 const isInlineProgressVisible = computed(() => isQueuePanelV2Enabled.value)
+type PanelElementTarget = HTMLElement | { value?: HTMLElement | null } | null
+const shouldShowInlineProgressSummary = computed(
+  () => isInlineProgressVisible.value && isActionbarEnabled.value
+)
+const actionbarRef = ref<{ panelElement: PanelElementTarget } | null>(null)
+const resolvePanelElement = (target: PanelElementTarget) => {
+  if (!target) return null
+  if (target instanceof HTMLElement) return target
+  if (typeof target === 'object' && 'value' in target) {
+    return target.value ?? null
+  }
+  return null
+}
+const inlineProgressSummaryTarget = computed(() => {
+  if (!shouldShowInlineProgressSummary.value || !isActionbarFloating.value) {
+    return null
+  }
+  return resolvePanelElement(actionbarRef.value?.panelElement ?? null)
+})
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index bd73eef3d4e..6d8c902e6e4 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -282,6 +282,8 @@ const inlineProgressTarget = computed(() => {
   return panelElement.value
 })
 
+defineExpose({ panelElement })
+
 // Handle drag state changes
 watch(isDragging, (dragging) => {
   if (dragging) {

From aea78da01d57430b7ad13ca2a3847577a9ebed1a Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 13:01:55 -0800
Subject: [PATCH 09/41] Add stacked button to list view

---
 .../sidebar/tabs/AssetsSidebarListView.vue    | 15 +++++++++++++
 .../assets/components/AssetsListItem.vue      | 21 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index b39d982a56a..91222adc70e 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -80,6 +80,8 @@
           "
           :primary-text="getAssetPrimaryText(item.asset)"
           :secondary-text="getAssetSecondaryText(item.asset)"
+          :stack-count="getStackCount(item.asset)"
+          :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
           @mouseenter="onAssetEnter(item.asset.id)"
           @mouseleave="onAssetLeave(item.asset.id)"
           @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
@@ -194,6 +196,19 @@ function getAssetSecondaryText(asset: AssetItem): string {
   return ''
 }
 
+function getStackCount(asset: AssetItem): number | undefined {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (typeof metadata?.outputCount === 'number') {
+    return metadata.outputCount
+  }
+
+  if (Array.isArray(metadata?.allOutputs)) {
+    return metadata.allOutputs.length
+  }
+
+  return undefined
+}
+
 function getAssetCardClass(selected: boolean): string {
   return cn(
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index 3f04d372fc5..dd8f1c57ff5 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -71,6 +71,22 @@
       </div>
     </div>
 
+    <div
+      v-if="typeof stackCount === 'number' && stackCount > 1"
+      class="relative z-1 flex shrink-0 items-center"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="gap-1 font-bold"
+        :aria-label="stackIndicatorLabel || undefined"
+      >
+        <i aria-hidden="true" class="icon-[lucide--layers] size-4" />
+        <span class="text-xs leading-none">{{ stackCount }}</span>
+        <i aria-hidden="true" class="icon-[lucide--chevron-down] size-3" />
+      </Button>
+    </div>
+
     <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
       <slot name="actions" />
     </div>
@@ -79,6 +95,7 @@
 
 <script setup lang="ts">
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
@@ -90,6 +107,8 @@ const {
   iconWrapperClass,
   primaryText,
   secondaryText,
+  stackCount,
+  stackIndicatorLabel,
   progressTotalPercent,
   progressCurrentPercent
 } = defineProps<{
@@ -101,6 +120,8 @@ const {
   iconWrapperClass?: string
   primaryText?: string
   secondaryText?: string
+  stackCount?: number
+  stackIndicatorLabel?: string
   progressTotalPercent?: number
   progressCurrentPercent?: number
 }>()

From 8a5023831d5bd9a1becb4d139406dca2d91c9b72 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 13:03:52 -0800
Subject: [PATCH 10/41] Move stacked button in list view correctly

---
 src/platform/assets/components/AssetsListItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index dd8f1c57ff5..d9902a10d36 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -71,6 +71,10 @@
       </div>
     </div>
 
+    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
+      <slot name="actions" />
+    </div>
+
     <div
       v-if="typeof stackCount === 'number' && stackCount > 1"
       class="relative z-1 flex shrink-0 items-center"
@@ -86,10 +90,6 @@
         <i aria-hidden="true" class="icon-[lucide--chevron-down] size-3" />
       </Button>
     </div>
-
-    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
-      <slot name="actions" />
-    </div>
   </div>
 </template>
 

From 282f94ad7d814aaac4298c0991f7043525b8c923 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 14:35:33 -0800
Subject: [PATCH 11/41] Add stacked functionality to list view

---
 .../sidebar/tabs/AssetsSidebarListView.vue    | 166 ++++++++++++++++--
 .../sidebar/tabs/AssetsSidebarTab.vue         | 109 +++++-------
 .../assets/components/AssetsListItem.vue      |  19 +-
 .../composables/useMediaAssetActions.ts       |   7 +-
 src/platform/assets/utils/outputAssetUtil.ts  |  52 ++++++
 src/services/jobOutputCache.ts                |  37 ++++
 6 files changed, 312 insertions(+), 78 deletions(-)
 create mode 100644 src/platform/assets/utils/outputAssetUtil.ts

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index 91222adc70e..f122405648a 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -72,7 +72,12 @@
               type: getMediaTypeFromFilename(item.asset.name)
             })
           "
-          :class="getAssetCardClass(isSelected(item.asset.id))"
+          :class="
+            cn(
+              getAssetCardClass(isSelected(item.asset.id)),
+              item.isChild && 'pl-6'
+            )
+          "
           :preview-url="item.asset.preview_url"
           :preview-alt="item.asset.name"
           :icon-name="
@@ -82,10 +87,12 @@
           :secondary-text="getAssetSecondaryText(item.asset)"
           :stack-count="getStackCount(item.asset)"
           :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
+          :stack-expanded="isStackExpanded(item.asset)"
           @mouseenter="onAssetEnter(item.asset.id)"
           @mouseleave="onAssetLeave(item.asset.id)"
           @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
-          @click.stop="emit('select-asset', item.asset)"
+          @click.stop="emit('select-asset', item.asset, selectableAssets)"
+          @stack-toggle="toggleStack(item.asset)"
         >
           <template v-if="hoveredAssetId === item.asset.id" #actions>
             <Button
@@ -104,7 +111,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -113,9 +120,18 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import {
+  mapOutputsToAssetItems,
+  shouldLoadFullOutputs
+} from '@/platform/assets/utils/outputAssetUtil'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
+import {
+  getJobDetail,
+  getPreviewableOutputsFromJobDetail
+} from '@/services/jobOutputCache'
 import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
@@ -137,17 +153,25 @@ const {
 }>()
 
 const emit = defineEmits<{
-  (e: 'select-asset', asset: AssetItem): void
+  (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
+  (e: 'assets-change', assets: AssetItem[]): void
 }>()
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
 const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
+const expandedStackPromptIds = ref<Set<string>>(new Set())
+const stackChildrenByPromptId = ref<Record<string, AssetItem[]>>({})
+const loadingStackPromptIds = ref<Set<string>>(new Set())
 
-type AssetListItem = { key: string; asset: AssetItem }
+type AssetListItem = {
+  key: string
+  asset: AssetItem
+  isChild?: boolean
+}
 
 const activeJobItems = computed(() =>
   jobItems.value.filter((item) => isActiveJobState(item.state))
@@ -160,11 +184,43 @@ const hoveredJob = computed(() =>
 )
 const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
-const assetItems = computed<AssetListItem[]>(() =>
-  assets.map((asset) => ({
-    key: `asset-${asset.id}`,
-    asset
-  }))
+const assetItems = computed<AssetListItem[]>(() => {
+  const items: AssetListItem[] = []
+
+  for (const asset of assets) {
+    const promptId = getStackPromptId(asset)
+    items.push({
+      key: `asset-${asset.id}`,
+      asset
+    })
+
+    if (!promptId || !expandedStackPromptIds.value.has(promptId)) {
+      continue
+    }
+
+    const children = stackChildrenByPromptId.value[promptId] ?? []
+    for (const child of children) {
+      items.push({
+        key: `asset-${child.id}`,
+        asset: child,
+        isChild: true
+      })
+    }
+  }
+
+  return items
+})
+
+const selectableAssets = computed(() =>
+  assetItems.value.map((item) => item.asset)
+)
+
+watch(
+  selectableAssets,
+  (nextAssets) => {
+    emit('assets-change', nextAssets)
+  },
+  { immediate: true }
 )
 
 const listGridStyle = {
@@ -196,6 +252,11 @@ function getAssetSecondaryText(asset: AssetItem): string {
   return ''
 }
 
+function getStackPromptId(asset: AssetItem): string | null {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  return metadata?.promptId ?? null
+}
+
 function getStackCount(asset: AssetItem): number | undefined {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (typeof metadata?.outputCount === 'number') {
@@ -209,6 +270,89 @@ function getStackCount(asset: AssetItem): number | undefined {
   return undefined
 }
 
+function isStackExpanded(asset: AssetItem): boolean {
+  const promptId = getStackPromptId(asset)
+  if (!promptId) return false
+  return expandedStackPromptIds.value.has(promptId)
+}
+
+async function toggleStack(asset: AssetItem) {
+  const promptId = getStackPromptId(asset)
+  if (!promptId) return
+
+  if (expandedStackPromptIds.value.has(promptId)) {
+    const next = new Set(expandedStackPromptIds.value)
+    next.delete(promptId)
+    expandedStackPromptIds.value = next
+    return
+  }
+
+  if (!stackChildrenByPromptId.value[promptId]?.length) {
+    if (loadingStackPromptIds.value.has(promptId)) {
+      return
+    }
+    const nextLoading = new Set(loadingStackPromptIds.value)
+    nextLoading.add(promptId)
+    loadingStackPromptIds.value = nextLoading
+
+    const children = await resolveStackChildren(asset)
+
+    const afterLoading = new Set(loadingStackPromptIds.value)
+    afterLoading.delete(promptId)
+    loadingStackPromptIds.value = afterLoading
+
+    if (!children.length) {
+      return
+    }
+
+    stackChildrenByPromptId.value = {
+      ...stackChildrenByPromptId.value,
+      [promptId]: children
+    }
+  }
+
+  const nextExpanded = new Set(expandedStackPromptIds.value)
+  nextExpanded.add(promptId)
+  expandedStackPromptIds.value = nextExpanded
+}
+
+async function resolveStackOutputs(metadata: OutputAssetMetadata) {
+  const outputsToDisplay = metadata.allOutputs ?? []
+  if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
+    return outputsToDisplay
+  }
+
+  try {
+    const jobDetail = await getJobDetail(metadata.promptId)
+    const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
+    return previewableOutputs.length ? previewableOutputs : outputsToDisplay
+  } catch (error) {
+    console.error('Failed to fetch job detail for stack children:', error)
+    return outputsToDisplay
+  }
+}
+
+async function resolveStackChildren(asset: AssetItem): Promise<AssetItem[]> {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (!metadata) {
+    return []
+  }
+
+  const outputsToDisplay = await resolveStackOutputs(metadata)
+  if (!outputsToDisplay.length) {
+    return []
+  }
+
+  return mapOutputsToAssetItems({
+    promptId: metadata.promptId,
+    outputs: outputsToDisplay,
+    createdAt: asset.created_at,
+    executionTimeInSeconds: metadata.executionTimeInSeconds,
+    workflow: metadata.workflow,
+    excludeFilename: asset.name
+  })
+}
+
 function getAssetCardClass(selected: boolean): string {
   return cn(
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 5fd466cda5b..ade483e8558 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -102,6 +102,7 @@
           :is-selected="isSelected"
           :asset-type="activeTab"
           @select-asset="handleAssetSelect"
+          @assets-change="handleListViewAssetsChange"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
@@ -225,12 +226,20 @@ import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAsse
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
+import {
+  mapOutputsToAssetItems,
+  shouldLoadFullOutputs
+} from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { getJobDetail } from '@/services/jobOutputCache'
+import {
+  getJobDetail,
+  getPreviewableOutputsFromJobDetail
+} from '@/services/jobOutputCache'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -238,12 +247,6 @@ import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-interface JobOutputItem {
-  filename: string
-  subfolder: string
-  type: string
-}
-
 const { t, n } = useI18n()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
@@ -384,7 +387,13 @@ const displayAssets = computed(() => {
   return filteredAssets.value
 })
 
-const selectedAssets = computed(() => getSelectedAssets(displayAssets.value))
+const listViewAssets = ref<AssetItem[]>([])
+
+const selectionAssets = computed(() =>
+  isListView.value ? listViewAssets.value : displayAssets.value
+)
+
+const selectedAssets = computed(() => getSelectedAssets(selectionAssets.value))
 
 const isBulkMode = computed(
   () => hasSelection.value && selectedAssets.value.length > 1
@@ -462,9 +471,14 @@ watch(
   { immediate: true }
 )
 
-const handleAssetSelect = (asset: AssetItem) => {
-  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
-  handleAssetClick(asset, index, displayAssets.value)
+const handleAssetSelect = (asset: AssetItem, assets?: AssetItem[]) => {
+  const assetList = assets ?? selectionAssets.value
+  const index = assetList.findIndex((a) => a.id === asset.id)
+  handleAssetClick(asset, index, assetList)
+}
+
+const handleListViewAssetsChange = (assets: AssetItem[]) => {
+  listViewAssets.value = assets
 }
 
 function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
@@ -543,6 +557,17 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 }
 
+async function resolveFolderOutputs(metadata: OutputAssetMetadata) {
+  const outputsToDisplay = metadata.allOutputs ?? []
+  if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
+    return outputsToDisplay
+  }
+
+  const jobDetail = await getJobDetail(metadata.promptId)
+  const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
+  return previewableOutputs.length ? previewableOutputs : outputsToDisplay
+}
+
 const enterFolderView = async (asset: AssetItem) => {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (!metadata) {
@@ -550,7 +575,7 @@ const enterFolderView = async (asset: AssetItem) => {
     return
   }
 
-  const { promptId, allOutputs, executionTimeInSeconds, outputCount } = metadata
+  const { promptId, executionTimeInSeconds } = metadata
 
   if (!promptId) {
     console.warn('Missing required folder view data')
@@ -560,62 +585,20 @@ const enterFolderView = async (asset: AssetItem) => {
   folderPromptId.value = promptId
   folderExecutionTime.value = executionTimeInSeconds
 
-  // Determine which outputs to display
-  let outputsToDisplay = allOutputs ?? []
-
-  // If outputCount indicates more outputs than we have, fetch full outputs
-  const needsFullOutputs =
-    typeof outputCount === 'number' &&
-    outputCount > 1 &&
-    outputsToDisplay.length < outputCount
-
-  if (needsFullOutputs) {
-    try {
-      const jobDetail = await getJobDetail(promptId)
-      if (jobDetail?.outputs) {
-        // Convert job outputs to ResultItemImpl array
-        outputsToDisplay = Object.entries(jobDetail.outputs).flatMap(
-          ([nodeId, nodeOutputs]) =>
-            Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
-              (items as JobOutputItem[])
-                .map(
-                  (item) =>
-                    new ResultItemImpl({
-                      ...item,
-                      nodeId,
-                      mediaType
-                    })
-                )
-                .filter((r) => r.supportsPreview)
-            )
-        )
-      }
-    } catch (error) {
-      console.error('Failed to fetch job detail for folder view:', error)
-      outputsToDisplay = []
-    }
-  }
+  const outputsToDisplay = await resolveFolderOutputs(metadata)
 
   if (outputsToDisplay.length === 0) {
     console.warn('No outputs available for folder view')
     return
   }
 
-  folderAssets.value = outputsToDisplay.map((output) => ({
-    id: `${output.nodeId}-${output.filename}`,
-    name: output.filename,
-    size: 0,
-    created_at: asset.created_at,
-    tags: ['output'],
-    preview_url: output.url,
-    user_metadata: {
-      promptId,
-      nodeId: output.nodeId,
-      subfolder: output.subfolder,
-      executionTimeInSeconds,
-      workflow: metadata.workflow
-    }
-  }))
+  folderAssets.value = mapOutputsToAssetItems({
+    promptId,
+    outputs: outputsToDisplay,
+    createdAt: asset.created_at,
+    executionTimeInSeconds,
+    workflow: metadata.workflow
+  })
 }
 
 const exitFolderView = () => {
diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index d9902a10d36..a597ced189f 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -84,10 +84,21 @@
         size="md"
         class="gap-1 font-bold"
         :aria-label="stackIndicatorLabel || undefined"
+        @click.stop="emit('stack-toggle')"
       >
         <i aria-hidden="true" class="icon-[lucide--layers] size-4" />
         <span class="text-xs leading-none">{{ stackCount }}</span>
-        <i aria-hidden="true" class="icon-[lucide--chevron-down] size-3" />
+        <i
+          aria-hidden="true"
+          :class="
+            cn(
+              stackExpanded
+                ? 'icon-[lucide--chevron-down]'
+                : 'icon-[lucide--chevron-right]',
+              'size-3'
+            )
+          "
+        />
       </Button>
     </div>
   </div>
@@ -98,6 +109,10 @@ import { useProgressBarBackground } from '@/composables/useProgressBarBackground
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
+const emit = defineEmits<{
+  'stack-toggle': []
+}>()
+
 const {
   previewUrl,
   previewAlt = '',
@@ -109,6 +124,7 @@ const {
   secondaryText,
   stackCount,
   stackIndicatorLabel,
+  stackExpanded = false,
   progressTotalPercent,
   progressCurrentPercent
 } = defineProps<{
@@ -122,6 +138,7 @@ const {
   secondaryText?: string
   stackCount?: number
   stackIndicatorLabel?: string
+  stackExpanded?: boolean
   progressTotalPercent?: number
   progressCurrentPercent?: number
 }>()
diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts
index 40636b851cb..e714b681b93 100644
--- a/src/platform/assets/composables/useMediaAssetActions.ts
+++ b/src/platform/assets/composables/useMediaAssetActions.ts
@@ -45,7 +45,7 @@ export function useMediaAssetActions() {
   ): Promise<void> => {
     if (assetType === 'output') {
       const promptId =
-        asset.id || getOutputAssetMetadata(asset.user_metadata)?.promptId
+        getOutputAssetMetadata(asset.user_metadata)?.promptId || asset.id
       if (!promptId) {
         throw new Error('Unable to extract prompt ID from asset')
       }
@@ -203,9 +203,10 @@ export function useMediaAssetActions() {
     const targetAsset = asset ?? mediaContext?.asset.value
     if (!targetAsset) return
 
-    // Try asset.id first (OSS), then fall back to metadata (Cloud)
     const metadata = getOutputAssetMetadata(targetAsset.user_metadata)
-    const promptId = targetAsset.id || metadata?.promptId
+    const promptId =
+      metadata?.promptId ||
+      (getAssetType(targetAsset) === 'output' ? targetAsset.id : undefined)
 
     if (!promptId) {
       toast.add({
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
new file mode 100644
index 00000000000..abdaf0eb86d
--- /dev/null
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -0,0 +1,52 @@
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+type OutputAssetMapOptions = {
+  promptId: string
+  outputs: readonly ResultItemImpl[]
+  createdAt?: string
+  executionTimeInSeconds?: number
+  workflow?: OutputAssetMetadata['workflow']
+  excludeFilename?: string
+}
+
+export function shouldLoadFullOutputs(
+  outputCount: OutputAssetMetadata['outputCount'],
+  outputsLength: number
+): boolean {
+  return (
+    typeof outputCount === 'number' &&
+    outputCount > 1 &&
+    outputsLength < outputCount
+  )
+}
+
+export function mapOutputsToAssetItems({
+  promptId,
+  outputs,
+  createdAt,
+  executionTimeInSeconds,
+  workflow,
+  excludeFilename
+}: OutputAssetMapOptions): AssetItem[] {
+  const createdAtValue = createdAt ?? new Date().toISOString()
+
+  return outputs
+    .filter((output) => output.filename && output.filename !== excludeFilename)
+    .map((output) => ({
+      id: `${promptId}-${output.nodeId}-${output.filename}`,
+      name: output.filename,
+      size: 0,
+      created_at: createdAtValue,
+      tags: ['output'],
+      preview_url: output.url,
+      user_metadata: {
+        promptId,
+        nodeId: output.nodeId,
+        subfolder: output.subfolder,
+        executionTimeInSeconds,
+        workflow
+      }
+    }))
+}
diff --git a/src/services/jobOutputCache.ts b/src/services/jobOutputCache.ts
index 72722afd990..9e2806d6003 100644
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -11,6 +11,7 @@ import QuickLRU from '@alloc/quick-lru'
 import type { JobDetail } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ResultItem, TaskOutput } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { ResultItemImpl } from '@/stores/queueStore'
 import type { TaskItemImpl } from '@/stores/queueStore'
@@ -75,6 +76,42 @@ export async function getOutputsForTask(
   }
 }
 
+function mapTaskOutputToResultItems(outputs: TaskOutput): ResultItemImpl[] {
+  return Object.entries(outputs).flatMap(([nodeId, nodeOutputs]) =>
+    Object.entries(nodeOutputs)
+      .filter(([mediaType, items]) => mediaType !== 'animated' && items)
+      .flatMap(([mediaType, items]) => {
+        if (!Array.isArray(items)) {
+          return []
+        }
+
+        return (items as ResultItem[])
+          .filter((item) => typeof item === 'object' && item !== null)
+          .map(
+            (item) =>
+              new ResultItemImpl({
+                ...item,
+                nodeId,
+                mediaType
+              })
+          )
+      })
+  )
+}
+
+function getPreviewableOutputsFromTaskOutput(
+  outputs?: TaskOutput
+): ResultItemImpl[] {
+  if (!outputs) return []
+  return ResultItemImpl.filterPreviewable(mapTaskOutputToResultItems(outputs))
+}
+
+export function getPreviewableOutputsFromJobDetail(
+  jobDetail?: JobDetail
+): ResultItemImpl[] {
+  return getPreviewableOutputsFromTaskOutput(jobDetail?.outputs)
+}
+
 // ===== Job Detail Caching =====
 
 export async function getJobDetail(

From 1e5e7f22823523262be1c841d83f8ae7674ab81c Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 15:05:58 -0800
Subject: [PATCH 12/41] Fix zoom in

---
 src/components/sidebar/tabs/AssetsSidebarTab.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index ade483e8558..3285000a1b1 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -226,8 +226,8 @@ import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAsse
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
-import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import {
@@ -389,6 +389,10 @@ const displayAssets = computed(() => {
 
 const listViewAssets = ref<AssetItem[]>([])
 
+const galleryAssets = computed(() =>
+  isListView.value ? listViewAssets.value : displayAssets.value
+)
+
 const selectionAssets = computed(() =>
   isListView.value ? listViewAssets.value : displayAssets.value
 )
@@ -413,7 +417,7 @@ const showEmptyState = computed(
     activeJobsCount.value === 0
 )
 
-watch(displayAssets, (newAssets) => {
+watch(galleryAssets, (newAssets) => {
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
     const newIndex = newAssets.findIndex(
       (asset) => asset.id === currentGalleryAssetId.value
@@ -431,7 +435,7 @@ watch(galleryActiveIndex, (index) => {
 })
 
 const galleryItems = computed(() => {
-  return displayAssets.value.map((asset) => {
+  return galleryAssets.value.map((asset) => {
     const mediaType = getMediaTypeFromFilename(asset.name)
     const resultItem = new ResultItemImpl({
       filename: asset.name,
@@ -551,7 +555,7 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 
   currentGalleryAssetId.value = asset.id
-  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
+  const index = galleryAssets.value.findIndex((a) => a.id === asset.id)
   if (index !== -1) {
     galleryActiveIndex.value = index
   }

From ed4a2307f9678433f6c911466a570b5f80c868a0 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Fri, 23 Jan 2026 23:16:29 +0000
Subject: [PATCH 13/41] [automated] Apply ESLint and Oxfmt fixes

---
 src/components/sidebar/tabs/AssetsSidebarListView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index f122405648a..d47a9b61fdd 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -120,8 +120,8 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
-import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
   mapOutputsToAssetItems,

From 82bc727739dda0b132e0a829ffad3891823a813b Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 15:53:23 -0800
Subject: [PATCH 14/41] Extract useOutputStacks

---
 .../sidebar/tabs/AssetsSidebarListView.vue    | 144 +---------------
 .../assets/composables/useOutputStacks.ts     | 156 ++++++++++++++++++
 2 files changed, 162 insertions(+), 138 deletions(-)
 create mode 100644 src/platform/assets/composables/useOutputStacks.ts

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index f122405648a..962042f3957 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -120,18 +120,10 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
-import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  mapOutputsToAssetItems,
-  shouldLoadFullOutputs
-} from '@/platform/assets/utils/outputAssetUtil'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
-import {
-  getJobDetail,
-  getPreviewableOutputsFromJobDetail
-} from '@/services/jobOutputCache'
 import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
@@ -163,15 +155,10 @@ const { t } = useI18n()
 const { jobItems } = useJobList()
 const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
-const expandedStackPromptIds = ref<Set<string>>(new Set())
-const stackChildrenByPromptId = ref<Record<string, AssetItem[]>>({})
-const loadingStackPromptIds = ref<Set<string>>(new Set())
-
-type AssetListItem = {
-  key: string
-  asset: AssetItem
-  isChild?: boolean
-}
+const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
+  useOutputStacks({
+    assets: computed(() => assets)
+  })
 
 const activeJobItems = computed(() =>
   jobItems.value.filter((item) => isActiveJobState(item.state))
@@ -184,37 +171,6 @@ const hoveredJob = computed(() =>
 )
 const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
-const assetItems = computed<AssetListItem[]>(() => {
-  const items: AssetListItem[] = []
-
-  for (const asset of assets) {
-    const promptId = getStackPromptId(asset)
-    items.push({
-      key: `asset-${asset.id}`,
-      asset
-    })
-
-    if (!promptId || !expandedStackPromptIds.value.has(promptId)) {
-      continue
-    }
-
-    const children = stackChildrenByPromptId.value[promptId] ?? []
-    for (const child of children) {
-      items.push({
-        key: `asset-${child.id}`,
-        asset: child,
-        isChild: true
-      })
-    }
-  }
-
-  return items
-})
-
-const selectableAssets = computed(() =>
-  assetItems.value.map((item) => item.asset)
-)
-
 watch(
   selectableAssets,
   (nextAssets) => {
@@ -252,11 +208,6 @@ function getAssetSecondaryText(asset: AssetItem): string {
   return ''
 }
 
-function getStackPromptId(asset: AssetItem): string | null {
-  const metadata = getOutputAssetMetadata(asset.user_metadata)
-  return metadata?.promptId ?? null
-}
-
 function getStackCount(asset: AssetItem): number | undefined {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (typeof metadata?.outputCount === 'number') {
@@ -270,89 +221,6 @@ function getStackCount(asset: AssetItem): number | undefined {
   return undefined
 }
 
-function isStackExpanded(asset: AssetItem): boolean {
-  const promptId = getStackPromptId(asset)
-  if (!promptId) return false
-  return expandedStackPromptIds.value.has(promptId)
-}
-
-async function toggleStack(asset: AssetItem) {
-  const promptId = getStackPromptId(asset)
-  if (!promptId) return
-
-  if (expandedStackPromptIds.value.has(promptId)) {
-    const next = new Set(expandedStackPromptIds.value)
-    next.delete(promptId)
-    expandedStackPromptIds.value = next
-    return
-  }
-
-  if (!stackChildrenByPromptId.value[promptId]?.length) {
-    if (loadingStackPromptIds.value.has(promptId)) {
-      return
-    }
-    const nextLoading = new Set(loadingStackPromptIds.value)
-    nextLoading.add(promptId)
-    loadingStackPromptIds.value = nextLoading
-
-    const children = await resolveStackChildren(asset)
-
-    const afterLoading = new Set(loadingStackPromptIds.value)
-    afterLoading.delete(promptId)
-    loadingStackPromptIds.value = afterLoading
-
-    if (!children.length) {
-      return
-    }
-
-    stackChildrenByPromptId.value = {
-      ...stackChildrenByPromptId.value,
-      [promptId]: children
-    }
-  }
-
-  const nextExpanded = new Set(expandedStackPromptIds.value)
-  nextExpanded.add(promptId)
-  expandedStackPromptIds.value = nextExpanded
-}
-
-async function resolveStackOutputs(metadata: OutputAssetMetadata) {
-  const outputsToDisplay = metadata.allOutputs ?? []
-  if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
-    return outputsToDisplay
-  }
-
-  try {
-    const jobDetail = await getJobDetail(metadata.promptId)
-    const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
-    return previewableOutputs.length ? previewableOutputs : outputsToDisplay
-  } catch (error) {
-    console.error('Failed to fetch job detail for stack children:', error)
-    return outputsToDisplay
-  }
-}
-
-async function resolveStackChildren(asset: AssetItem): Promise<AssetItem[]> {
-  const metadata = getOutputAssetMetadata(asset.user_metadata)
-  if (!metadata) {
-    return []
-  }
-
-  const outputsToDisplay = await resolveStackOutputs(metadata)
-  if (!outputsToDisplay.length) {
-    return []
-  }
-
-  return mapOutputsToAssetItems({
-    promptId: metadata.promptId,
-    outputs: outputsToDisplay,
-    createdAt: asset.created_at,
-    executionTimeInSeconds: metadata.executionTimeInSeconds,
-    workflow: metadata.workflow,
-    excludeFilename: asset.name
-  })
-}
-
 function getAssetCardClass(selected: boolean): string {
   return cn(
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
new file mode 100644
index 00000000000..63b9366b58e
--- /dev/null
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -0,0 +1,156 @@
+import { computed, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import {
+  mapOutputsToAssetItems,
+  shouldLoadFullOutputs
+} from '@/platform/assets/utils/outputAssetUtil'
+import {
+  getJobDetail,
+  getPreviewableOutputsFromJobDetail
+} from '@/services/jobOutputCache'
+
+export type OutputStackListItem = {
+  key: string
+  asset: AssetItem
+  isChild?: boolean
+}
+
+type UseOutputStacksOptions = {
+  assets: Ref<AssetItem[]>
+}
+
+export function useOutputStacks({ assets }: UseOutputStacksOptions) {
+  const expandedStackPromptIds = ref<Set<string>>(new Set())
+  const stackChildrenByPromptId = ref<Record<string, AssetItem[]>>({})
+  const loadingStackPromptIds = ref<Set<string>>(new Set())
+
+  const assetItems = computed<OutputStackListItem[]>(() => {
+    const items: OutputStackListItem[] = []
+
+    for (const asset of assets.value) {
+      const promptId = getStackPromptId(asset)
+      items.push({
+        key: `asset-${asset.id}`,
+        asset
+      })
+
+      if (!promptId || !expandedStackPromptIds.value.has(promptId)) {
+        continue
+      }
+
+      const children = stackChildrenByPromptId.value[promptId] ?? []
+      for (const child of children) {
+        items.push({
+          key: `asset-${child.id}`,
+          asset: child,
+          isChild: true
+        })
+      }
+    }
+
+    return items
+  })
+
+  const selectableAssets = computed(() =>
+    assetItems.value.map((item) => item.asset)
+  )
+
+  function getStackPromptId(asset: AssetItem): string | null {
+    const metadata = getOutputAssetMetadata(asset.user_metadata)
+    return metadata?.promptId ?? null
+  }
+
+  function isStackExpanded(asset: AssetItem): boolean {
+    const promptId = getStackPromptId(asset)
+    if (!promptId) return false
+    return expandedStackPromptIds.value.has(promptId)
+  }
+
+  async function toggleStack(asset: AssetItem) {
+    const promptId = getStackPromptId(asset)
+    if (!promptId) return
+
+    if (expandedStackPromptIds.value.has(promptId)) {
+      const next = new Set(expandedStackPromptIds.value)
+      next.delete(promptId)
+      expandedStackPromptIds.value = next
+      return
+    }
+
+    if (!stackChildrenByPromptId.value[promptId]?.length) {
+      if (loadingStackPromptIds.value.has(promptId)) {
+        return
+      }
+      const nextLoading = new Set(loadingStackPromptIds.value)
+      nextLoading.add(promptId)
+      loadingStackPromptIds.value = nextLoading
+
+      const children = await resolveStackChildren(asset)
+
+      const afterLoading = new Set(loadingStackPromptIds.value)
+      afterLoading.delete(promptId)
+      loadingStackPromptIds.value = afterLoading
+
+      if (!children.length) {
+        return
+      }
+
+      stackChildrenByPromptId.value = {
+        ...stackChildrenByPromptId.value,
+        [promptId]: children
+      }
+    }
+
+    const nextExpanded = new Set(expandedStackPromptIds.value)
+    nextExpanded.add(promptId)
+    expandedStackPromptIds.value = nextExpanded
+  }
+
+  async function resolveStackOutputs(metadata: OutputAssetMetadata) {
+    const outputsToDisplay = metadata.allOutputs ?? []
+    if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
+      return outputsToDisplay
+    }
+
+    try {
+      const jobDetail = await getJobDetail(metadata.promptId)
+      const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
+      return previewableOutputs.length ? previewableOutputs : outputsToDisplay
+    } catch (error) {
+      console.error('Failed to fetch job detail for stack children:', error)
+      return outputsToDisplay
+    }
+  }
+
+  async function resolveStackChildren(asset: AssetItem): Promise<AssetItem[]> {
+    const metadata = getOutputAssetMetadata(asset.user_metadata)
+    if (!metadata) {
+      return []
+    }
+
+    const outputsToDisplay = await resolveStackOutputs(metadata)
+    if (!outputsToDisplay.length) {
+      return []
+    }
+
+    return mapOutputsToAssetItems({
+      promptId: metadata.promptId,
+      outputs: outputsToDisplay,
+      createdAt: asset.created_at,
+      executionTimeInSeconds: metadata.executionTimeInSeconds,
+      workflow: metadata.workflow,
+      excludeFilename: asset.name
+    })
+  }
+
+  return {
+    assetItems,
+    selectableAssets,
+    isStackExpanded,
+    toggleStack
+  }
+}

From 6f2b8d21b8dce5950fc11452eb59f1721eee00ec Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 16:01:07 -0800
Subject: [PATCH 15/41] feat: centralize output asset resolution

---
 .../sidebar/tabs/AssetsSidebarTab.vue         | 35 +++-----------
 .../assets/composables/useOutputStacks.ts     | 47 ++++---------------
 src/platform/assets/utils/outputAssetUtil.ts  | 32 +++++++++++++
 3 files changed, 47 insertions(+), 67 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 3285000a1b1..c06edb4af73 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -227,19 +227,11 @@ import { useAssetSelection } from '@/platform/assets/composables/useAssetSelecti
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
-import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
-import {
-  mapOutputsToAssetItems,
-  shouldLoadFullOutputs
-} from '@/platform/assets/utils/outputAssetUtil'
+import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  getJobDetail,
-  getPreviewableOutputsFromJobDetail
-} from '@/services/jobOutputCache'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -561,17 +553,6 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 }
 
-async function resolveFolderOutputs(metadata: OutputAssetMetadata) {
-  const outputsToDisplay = metadata.allOutputs ?? []
-  if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
-    return outputsToDisplay
-  }
-
-  const jobDetail = await getJobDetail(metadata.promptId)
-  const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
-  return previewableOutputs.length ? previewableOutputs : outputsToDisplay
-}
-
 const enterFolderView = async (asset: AssetItem) => {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (!metadata) {
@@ -589,20 +570,16 @@ const enterFolderView = async (asset: AssetItem) => {
   folderPromptId.value = promptId
   folderExecutionTime.value = executionTimeInSeconds
 
-  const outputsToDisplay = await resolveFolderOutputs(metadata)
+  const folderItems = await resolveOutputAssetItems(metadata, {
+    createdAt: asset.created_at
+  })
 
-  if (outputsToDisplay.length === 0) {
+  if (folderItems.length === 0) {
     console.warn('No outputs available for folder view')
     return
   }
 
-  folderAssets.value = mapOutputsToAssetItems({
-    promptId,
-    outputs: outputsToDisplay,
-    createdAt: asset.created_at,
-    executionTimeInSeconds,
-    workflow: metadata.workflow
-  })
+  folderAssets.value = folderItems
 }
 
 const exitFolderView = () => {
diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
index 63b9366b58e..e5260f93ae9 100644
--- a/src/platform/assets/composables/useOutputStacks.ts
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -1,17 +1,9 @@
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
-import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema';
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  mapOutputsToAssetItems,
-  shouldLoadFullOutputs
-} from '@/platform/assets/utils/outputAssetUtil'
-import {
-  getJobDetail,
-  getPreviewableOutputsFromJobDetail
-} from '@/services/jobOutputCache'
+import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 
 export type OutputStackListItem = {
   key: string
@@ -110,41 +102,20 @@ export function useOutputStacks({ assets }: UseOutputStacksOptions) {
     expandedStackPromptIds.value = nextExpanded
   }
 
-  async function resolveStackOutputs(metadata: OutputAssetMetadata) {
-    const outputsToDisplay = metadata.allOutputs ?? []
-    if (!shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
-      return outputsToDisplay
-    }
-
-    try {
-      const jobDetail = await getJobDetail(metadata.promptId)
-      const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
-      return previewableOutputs.length ? previewableOutputs : outputsToDisplay
-    } catch (error) {
-      console.error('Failed to fetch job detail for stack children:', error)
-      return outputsToDisplay
-    }
-  }
-
   async function resolveStackChildren(asset: AssetItem): Promise<AssetItem[]> {
     const metadata = getOutputAssetMetadata(asset.user_metadata)
     if (!metadata) {
       return []
     }
-
-    const outputsToDisplay = await resolveStackOutputs(metadata)
-    if (!outputsToDisplay.length) {
+    try {
+      return await resolveOutputAssetItems(metadata, {
+        createdAt: asset.created_at,
+        excludeOutputKey: asset.name
+      })
+    } catch (error) {
+      console.error('Failed to resolve stack children:', error)
       return []
     }
-
-    return mapOutputsToAssetItems({
-      promptId: metadata.promptId,
-      outputs: outputsToDisplay,
-      createdAt: asset.created_at,
-      executionTimeInSeconds: metadata.executionTimeInSeconds,
-      workflow: metadata.workflow,
-      excludeFilename: asset.name
-    })
   }
 
   return {
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index abdaf0eb86d..6d651d84fa7 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -1,5 +1,9 @@
 import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import {
+  getJobDetail,
+  getPreviewableOutputsFromJobDetail
+} from '@/services/jobOutputCache'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
 type OutputAssetMapOptions = {
@@ -11,6 +15,11 @@ type OutputAssetMapOptions = {
   excludeFilename?: string
 }
 
+type ResolveOutputAssetItemsOptions = {
+  createdAt?: string
+  excludeOutputKey?: string
+}
+
 export function shouldLoadFullOutputs(
   outputCount: OutputAssetMetadata['outputCount'],
   outputsLength: number
@@ -50,3 +59,26 @@ export function mapOutputsToAssetItems({
       }
     }))
 }
+
+export async function resolveOutputAssetItems(
+  metadata: OutputAssetMetadata,
+  { createdAt, excludeOutputKey }: ResolveOutputAssetItemsOptions = {}
+): Promise<AssetItem[]> {
+  let outputsToDisplay = metadata.allOutputs ?? []
+  if (shouldLoadFullOutputs(metadata.outputCount, outputsToDisplay.length)) {
+    const jobDetail = await getJobDetail(metadata.promptId)
+    const previewableOutputs = getPreviewableOutputsFromJobDetail(jobDetail)
+    if (previewableOutputs.length) {
+      outputsToDisplay = previewableOutputs
+    }
+  }
+
+  return mapOutputsToAssetItems({
+    promptId: metadata.promptId,
+    outputs: outputsToDisplay,
+    createdAt,
+    executionTimeInSeconds: metadata.executionTimeInSeconds,
+    workflow: metadata.workflow,
+    excludeFilename: excludeOutputKey
+  })
+}

From f55c6218036c5870d17cb85ce557f72512ac1955 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 03:36:43 -0800
Subject: [PATCH 16/41] knip

---
 src/platform/assets/composables/useOutputStacks.ts | 2 +-
 src/platform/assets/utils/outputAssetUtil.ts       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
index e5260f93ae9..5c53c23e4ee 100644
--- a/src/platform/assets/composables/useOutputStacks.ts
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -5,7 +5,7 @@ import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataS
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 
-export type OutputStackListItem = {
+type OutputStackListItem = {
   key: string
   asset: AssetItem
   isChild?: boolean
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index 6d651d84fa7..f0fbc1bceb4 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -20,7 +20,7 @@ type ResolveOutputAssetItemsOptions = {
   excludeOutputKey?: string
 }
 
-export function shouldLoadFullOutputs(
+function shouldLoadFullOutputs(
   outputCount: OutputAssetMetadata['outputCount'],
   outputsLength: number
 ): boolean {
@@ -31,7 +31,7 @@ export function shouldLoadFullOutputs(
   )
 }
 
-export function mapOutputsToAssetItems({
+function mapOutputsToAssetItems({
   promptId,
   outputs,
   createdAt,

From b23d910fa476266cd3b43201bc7b790bdd61eada Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 04:01:59 -0800
Subject: [PATCH 17/41] Collapse identical computed

---
 src/components/sidebar/tabs/AssetsSidebarTab.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index c06edb4af73..006718b67e3 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -381,15 +381,11 @@ const displayAssets = computed(() => {
 
 const listViewAssets = ref<AssetItem[]>([])
 
-const galleryAssets = computed(() =>
+const visibleAssets = computed(() =>
   isListView.value ? listViewAssets.value : displayAssets.value
 )
 
-const selectionAssets = computed(() =>
-  isListView.value ? listViewAssets.value : displayAssets.value
-)
-
-const selectedAssets = computed(() => getSelectedAssets(selectionAssets.value))
+const selectedAssets = computed(() => getSelectedAssets(visibleAssets.value))
 
 const isBulkMode = computed(
   () => hasSelection.value && selectedAssets.value.length > 1
@@ -409,7 +405,7 @@ const showEmptyState = computed(
     activeJobsCount.value === 0
 )
 
-watch(galleryAssets, (newAssets) => {
+watch(visibleAssets, (newAssets) => {
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
     const newIndex = newAssets.findIndex(
       (asset) => asset.id === currentGalleryAssetId.value
@@ -427,7 +423,7 @@ watch(galleryActiveIndex, (index) => {
 })
 
 const galleryItems = computed(() => {
-  return galleryAssets.value.map((asset) => {
+  return visibleAssets.value.map((asset) => {
     const mediaType = getMediaTypeFromFilename(asset.name)
     const resultItem = new ResultItemImpl({
       filename: asset.name,
@@ -468,7 +464,7 @@ watch(
 )
 
 const handleAssetSelect = (asset: AssetItem, assets?: AssetItem[]) => {
-  const assetList = assets ?? selectionAssets.value
+  const assetList = assets ?? visibleAssets.value
   const index = assetList.findIndex((a) => a.id === asset.id)
   handleAssetClick(asset, index, assetList)
 }
@@ -547,7 +543,7 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 
   currentGalleryAssetId.value = asset.id
-  const index = galleryAssets.value.findIndex((a) => a.id === asset.id)
+  const index = visibleAssets.value.findIndex((a) => a.id === asset.id)
   if (index !== -1) {
     galleryActiveIndex.value = index
   }

From 4cfafc5e3d025010240d5046891c8f893585f297 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 05:27:30 -0800
Subject: [PATCH 18/41] Minor redundancy refactor

---
 src/services/jobOutputCache.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/services/jobOutputCache.ts b/src/services/jobOutputCache.ts
index 9e2806d6003..baac38fb495 100644
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -76,8 +76,9 @@ export async function getOutputsForTask(
   }
 }
 
-function mapTaskOutputToResultItems(outputs: TaskOutput): ResultItemImpl[] {
-  return Object.entries(outputs).flatMap(([nodeId, nodeOutputs]) =>
+function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
+  if (!outputs) return []
+  const resultItems = Object.entries(outputs).flatMap(([nodeId, nodeOutputs]) =>
     Object.entries(nodeOutputs)
       .filter(([mediaType, items]) => mediaType !== 'animated' && items)
       .flatMap(([mediaType, items]) => {
@@ -97,19 +98,14 @@ function mapTaskOutputToResultItems(outputs: TaskOutput): ResultItemImpl[] {
           )
       })
   )
-}
 
-function getPreviewableOutputsFromTaskOutput(
-  outputs?: TaskOutput
-): ResultItemImpl[] {
-  if (!outputs) return []
-  return ResultItemImpl.filterPreviewable(mapTaskOutputToResultItems(outputs))
+  return ResultItemImpl.filterPreviewable(resultItems)
 }
 
 export function getPreviewableOutputsFromJobDetail(
   jobDetail?: JobDetail
 ): ResultItemImpl[] {
-  return getPreviewableOutputsFromTaskOutput(jobDetail?.outputs)
+  return getPreviewableOutputs(jobDetail?.outputs)
 }
 
 // ===== Job Detail Caching =====

From 832546a5c4fa64d303290220dc6fce10910cb71b Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 05:43:28 -0800
Subject: [PATCH 19/41] Add type cast

---
 src/services/jobOutputCache.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/services/jobOutputCache.ts b/src/services/jobOutputCache.ts
index baac38fb495..4ae7140efa4 100644
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -86,22 +86,24 @@ function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
           return []
         }
 
-        return (items as ResultItem[])
-          .filter((item) => typeof item === 'object' && item !== null)
-          .map(
-            (item) =>
-              new ResultItemImpl({
-                ...item,
-                nodeId,
-                mediaType
-              })
-          )
+        return items.filter(isResultItem).map(
+          (item) =>
+            new ResultItemImpl({
+              ...item,
+              nodeId,
+              mediaType
+            })
+        )
       })
   )
 
   return ResultItemImpl.filterPreviewable(resultItems)
 }
 
+function isResultItem(item: unknown): item is ResultItem {
+  return typeof item === 'object' && item !== null
+}
+
 export function getPreviewableOutputsFromJobDetail(
   jobDetail?: JobDetail
 ): ResultItemImpl[] {

From f9583dcf4edf784ed8f14e26cfe5570dd657656e Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 05:53:45 -0800
Subject: [PATCH 20/41] fix: keep selection consistent with visible assets

---
 .../sidebar/tabs/AssetsSidebarTab.vue         |  4 ++
 .../composables/useAssetSelection.test.ts     | 48 +++++++++++++++++++
 .../assets/composables/useAssetSelection.ts   | 33 +++++++++++++
 3 files changed, 85 insertions(+)
 create mode 100644 src/platform/assets/composables/useAssetSelection.test.ts

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 006718b67e3..0acf2473fca 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -310,6 +310,7 @@ const {
   hasSelection,
   clearSelection,
   getSelectedAssets,
+  reconcileSelection,
   getOutputCount,
   getTotalOutputCount,
   activate: activateSelection,
@@ -406,6 +407,9 @@ const showEmptyState = computed(
 )
 
 watch(visibleAssets, (newAssets) => {
+  // Alternative: keep hidden selections and surface them in UI; for now prune
+  // so selection stays consistent with what this view can act on.
+  reconcileSelection(newAssets)
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
     const newIndex = newAssets.findIndex(
       (asset) => asset.id === currentGalleryAssetId.value
diff --git a/src/platform/assets/composables/useAssetSelection.test.ts b/src/platform/assets/composables/useAssetSelection.test.ts
new file mode 100644
index 00000000000..56627ae39e5
--- /dev/null
+++ b/src/platform/assets/composables/useAssetSelection.test.ts
@@ -0,0 +1,48 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+import { useAssetSelection } from './useAssetSelection'
+import { useAssetSelectionStore } from './useAssetSelectionStore'
+
+vi.mock('@vueuse/core', () => ({
+  useKeyModifier: vi.fn(() => ref(false))
+}))
+
+describe('useAssetSelection', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('prunes selection to visible assets', () => {
+    const selection = useAssetSelection()
+    const store = useAssetSelectionStore()
+    const assets: AssetItem[] = [
+      { id: 'a', name: 'a.png', tags: [] },
+      { id: 'b', name: 'b.png', tags: [] }
+    ]
+
+    store.setSelection(['a', 'b'])
+    store.setLastSelectedIndex(1)
+
+    selection.reconcileSelection([assets[1]])
+
+    expect(Array.from(store.selectedAssetIds)).toEqual(['b'])
+    expect(store.lastSelectedIndex).toBe(-1)
+  })
+
+  it('clears selection when no visible assets remain', () => {
+    const selection = useAssetSelection()
+    const store = useAssetSelectionStore()
+
+    store.setSelection(['a'])
+    store.setLastSelectedIndex(0)
+
+    selection.reconcileSelection([])
+
+    expect(store.selectedAssetIds.size).toBe(0)
+    expect(store.lastSelectedIndex).toBe(-1)
+  })
+})
diff --git a/src/platform/assets/composables/useAssetSelection.ts b/src/platform/assets/composables/useAssetSelection.ts
index 290698d4d6d..ace5d33641e 100644
--- a/src/platform/assets/composables/useAssetSelection.ts
+++ b/src/platform/assets/composables/useAssetSelection.ts
@@ -88,6 +88,38 @@ export function useAssetSelection() {
     return allAssets.filter((asset) => selectionStore.isSelected(asset.id))
   }
 
+  function reconcileSelection(assets: AssetItem[]) {
+    if (selectionStore.selectedAssetIds.size === 0) {
+      return
+    }
+
+    if (assets.length === 0) {
+      selectionStore.clearSelection()
+      return
+    }
+
+    const visibleIds = new Set(assets.map((asset) => asset.id))
+    const nextSelectedIds: string[] = []
+
+    for (const id of selectionStore.selectedAssetIds) {
+      if (visibleIds.has(id)) {
+        nextSelectedIds.push(id)
+      }
+    }
+
+    if (nextSelectedIds.length === selectionStore.selectedAssetIds.size) {
+      return
+    }
+
+    if (nextSelectedIds.length === 0) {
+      selectionStore.clearSelection()
+      return
+    }
+
+    selectionStore.setSelection(nextSelectedIds)
+    selectionStore.setLastSelectedIndex(-1)
+  }
+
   /**
    * Get the output count for a single asset
    * Same logic as in AssetsSidebarTab.vue
@@ -132,6 +164,7 @@ export function useAssetSelection() {
     selectAll,
     clearSelection: () => selectionStore.clearSelection(),
     getSelectedAssets,
+    reconcileSelection,
     getOutputCount,
     getTotalOutputCount,
     reset: () => selectionStore.reset(),

From 0debd00b65b73658f7130c051049b78f341ccd9e Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:14:02 -0800
Subject: [PATCH 21/41] Add more testing

---
 .../composables/useOutputStacks.test.ts       | 200 ++++++++++++++++++
 .../assets/utils/outputAssetUtil.test.ts      | 123 +++++++++++
 src/services/jobOutputCache.test.ts           |  81 +++++++
 3 files changed, 404 insertions(+)
 create mode 100644 src/platform/assets/composables/useOutputStacks.test.ts
 create mode 100644 src/platform/assets/utils/outputAssetUtil.test.ts

diff --git a/src/platform/assets/composables/useOutputStacks.test.ts b/src/platform/assets/composables/useOutputStacks.test.ts
new file mode 100644
index 00000000000..d770b3c75f6
--- /dev/null
+++ b/src/platform/assets/composables/useOutputStacks.test.ts
@@ -0,0 +1,200 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
+
+const mocks = vi.hoisted(() => ({
+  resolveOutputAssetItems: vi.fn()
+}))
+
+vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
+  resolveOutputAssetItems: mocks.resolveOutputAssetItems
+}))
+
+type Deferred<T> = {
+  promise: Promise<T>
+  resolve: (value: T) => void
+  reject: (reason?: unknown) => void
+}
+
+function createDeferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((resolveFn, rejectFn) => {
+    resolve = resolveFn
+    reject = rejectFn
+  })
+  return { promise, resolve, reject }
+}
+
+function createAsset(overrides: Partial<AssetItem> = {}): AssetItem {
+  return {
+    id: 'asset-1',
+    name: 'parent.png',
+    tags: [],
+    created_at: '2025-01-01T00:00:00.000Z',
+    user_metadata: {
+      promptId: 'prompt-1',
+      nodeId: 'node-1',
+      subfolder: 'outputs'
+    },
+    ...overrides
+  }
+}
+
+describe('useOutputStacks', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  it('expands stacks and exposes children as selectable assets', async () => {
+    const parent = createAsset({ id: 'parent', name: 'parent.png' })
+    const childA = createAsset({
+      id: 'child-a',
+      name: 'child-a.png',
+      user_metadata: undefined
+    })
+    const childB = createAsset({
+      id: 'child-b',
+      name: 'child-b.png',
+      user_metadata: undefined
+    })
+
+    vi.mocked(mocks.resolveOutputAssetItems).mockResolvedValue([childA, childB])
+
+    const { assetItems, isStackExpanded, selectableAssets, toggleStack } =
+      useOutputStacks({ assets: ref([parent]) })
+
+    await toggleStack(parent)
+
+    expect(mocks.resolveOutputAssetItems).toHaveBeenCalledWith(
+      expect.objectContaining({ promptId: 'prompt-1' }),
+      {
+        createdAt: parent.created_at,
+        excludeOutputKey: parent.name
+      }
+    )
+    expect(isStackExpanded(parent)).toBe(true)
+    expect(assetItems.value.map((item) => item.asset.id)).toEqual([
+      parent.id,
+      childA.id,
+      childB.id
+    ])
+    expect(assetItems.value[1]).toMatchObject({
+      asset: childA,
+      isChild: true
+    })
+    expect(assetItems.value[2]).toMatchObject({
+      asset: childB,
+      isChild: true
+    })
+    expect(selectableAssets.value).toEqual([parent, childA, childB])
+  })
+
+  it('collapses an expanded stack when toggled again', async () => {
+    const parent = createAsset({ id: 'parent', name: 'parent.png' })
+    const child = createAsset({
+      id: 'child',
+      name: 'child.png',
+      user_metadata: undefined
+    })
+
+    vi.mocked(mocks.resolveOutputAssetItems).mockResolvedValue([child])
+
+    const { assetItems, isStackExpanded, toggleStack } = useOutputStacks({
+      assets: ref([parent])
+    })
+
+    await toggleStack(parent)
+    await toggleStack(parent)
+
+    expect(isStackExpanded(parent)).toBe(false)
+    expect(assetItems.value.map((item) => item.asset.id)).toEqual([parent.id])
+  })
+
+  it('ignores assets without stack metadata', async () => {
+    const asset = createAsset({
+      id: 'no-meta',
+      name: 'no-meta.png',
+      user_metadata: undefined
+    })
+
+    const { assetItems, isStackExpanded, toggleStack } = useOutputStacks({
+      assets: ref([asset])
+    })
+
+    await toggleStack(asset)
+
+    expect(mocks.resolveOutputAssetItems).not.toHaveBeenCalled()
+    expect(isStackExpanded(asset)).toBe(false)
+    expect(assetItems.value).toHaveLength(1)
+    expect(assetItems.value[0].asset).toMatchObject(asset)
+  })
+
+  it('does not expand when no children are resolved', async () => {
+    const parent = createAsset({ id: 'parent', name: 'parent.png' })
+
+    vi.mocked(mocks.resolveOutputAssetItems).mockResolvedValue([])
+
+    const { assetItems, isStackExpanded, toggleStack } = useOutputStacks({
+      assets: ref([parent])
+    })
+
+    await toggleStack(parent)
+
+    expect(isStackExpanded(parent)).toBe(false)
+    expect(assetItems.value.map((item) => item.asset.id)).toEqual([parent.id])
+  })
+
+  it('does not expand when resolving children throws', async () => {
+    const parent = createAsset({ id: 'parent', name: 'parent.png' })
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    vi.mocked(mocks.resolveOutputAssetItems).mockRejectedValue(
+      new Error('resolve failed')
+    )
+
+    const { assetItems, isStackExpanded, toggleStack } = useOutputStacks({
+      assets: ref([parent])
+    })
+
+    await toggleStack(parent)
+
+    expect(isStackExpanded(parent)).toBe(false)
+    expect(assetItems.value.map((item) => item.asset.id)).toEqual([parent.id])
+
+    errorSpy.mockRestore()
+  })
+
+  it('guards against duplicate loads while a stack is resolving', async () => {
+    const parent = createAsset({ id: 'parent', name: 'parent.png' })
+    const child = createAsset({
+      id: 'child',
+      name: 'child.png',
+      user_metadata: undefined
+    })
+    const deferred = createDeferred<AssetItem[]>()
+
+    vi.mocked(mocks.resolveOutputAssetItems).mockReturnValue(deferred.promise)
+
+    const { assetItems, toggleStack } = useOutputStacks({
+      assets: ref([parent])
+    })
+
+    const firstToggle = toggleStack(parent)
+    const secondToggle = toggleStack(parent)
+
+    expect(mocks.resolveOutputAssetItems).toHaveBeenCalledTimes(1)
+
+    deferred.resolve([child])
+
+    await firstToggle
+    await secondToggle
+
+    expect(assetItems.value.map((item) => item.asset.id)).toEqual([
+      parent.id,
+      child.id
+    ])
+  })
+})
diff --git a/src/platform/assets/utils/outputAssetUtil.test.ts b/src/platform/assets/utils/outputAssetUtil.test.ts
new file mode 100644
index 00000000000..41779958bfa
--- /dev/null
+++ b/src/platform/assets/utils/outputAssetUtil.test.ts
@@ -0,0 +1,123 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+import { resolveOutputAssetItems } from './outputAssetUtil'
+
+const mocks = vi.hoisted(() => ({
+  getJobDetail: vi.fn(),
+  getPreviewableOutputsFromJobDetail: vi.fn()
+}))
+
+vi.mock('@/services/jobOutputCache', () => ({
+  getJobDetail: mocks.getJobDetail,
+  getPreviewableOutputsFromJobDetail: mocks.getPreviewableOutputsFromJobDetail
+}))
+
+type OutputOverrides = Partial<{
+  filename: string
+  subfolder: string
+  nodeId: string
+  url: string
+}>
+
+function createOutput(overrides: OutputOverrides = {}): ResultItemImpl {
+  return {
+    filename: 'file.png',
+    subfolder: 'sub',
+    nodeId: '1',
+    url: 'https://example.com/file.png',
+    ...overrides
+  } as ResultItemImpl
+}
+
+describe('resolveOutputAssetItems', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('maps outputs and excludes a filename', async () => {
+    const outputA = createOutput({
+      filename: 'a.png',
+      nodeId: '1',
+      url: 'https://example.com/a.png'
+    })
+    const outputB = createOutput({
+      filename: 'b.png',
+      nodeId: '2',
+      url: 'https://example.com/b.png'
+    })
+    const metadata: OutputAssetMetadata = {
+      promptId: 'prompt-1',
+      nodeId: '1',
+      subfolder: 'sub',
+      executionTimeInSeconds: 12.5,
+      outputCount: 2,
+      allOutputs: [outputA, outputB]
+    }
+
+    const results = await resolveOutputAssetItems(metadata, {
+      createdAt: '2025-01-01T00:00:00.000Z',
+      excludeOutputKey: 'b.png'
+    })
+
+    expect(mocks.getJobDetail).not.toHaveBeenCalled()
+    expect(results).toHaveLength(1)
+    expect(results[0]).toEqual(
+      expect.objectContaining({
+        id: 'prompt-1-1-a.png',
+        name: 'a.png',
+        created_at: '2025-01-01T00:00:00.000Z',
+        tags: ['output'],
+        preview_url: 'https://example.com/a.png'
+      })
+    )
+    expect(results[0].user_metadata).toEqual(
+      expect.objectContaining({
+        promptId: 'prompt-1',
+        nodeId: '1',
+        subfolder: 'sub',
+        executionTimeInSeconds: 12.5
+      })
+    )
+  })
+
+  it('loads full outputs when metadata indicates more outputs', async () => {
+    const previewOutput = createOutput({
+      filename: 'preview.png',
+      nodeId: '1',
+      url: 'https://example.com/preview.png'
+    })
+    const fullOutput = createOutput({
+      filename: 'full.png',
+      nodeId: '2',
+      url: 'https://example.com/full.png'
+    })
+    const metadata: OutputAssetMetadata = {
+      promptId: 'prompt-2',
+      nodeId: '1',
+      subfolder: 'sub',
+      outputCount: 3,
+      allOutputs: [previewOutput]
+    }
+    const jobDetail = { id: 'job-1' }
+
+    mocks.getJobDetail.mockResolvedValue(jobDetail)
+    mocks.getPreviewableOutputsFromJobDetail.mockReturnValue([
+      fullOutput,
+      previewOutput
+    ])
+
+    const results = await resolveOutputAssetItems(metadata)
+
+    expect(mocks.getJobDetail).toHaveBeenCalledWith('prompt-2')
+    expect(mocks.getPreviewableOutputsFromJobDetail).toHaveBeenCalledWith(
+      jobDetail
+    )
+    expect(results.map((asset) => asset.name)).toEqual([
+      'full.png',
+      'preview.png'
+    ])
+  })
+})
diff --git a/src/services/jobOutputCache.test.ts b/src/services/jobOutputCache.test.ts
index 38e47e973ed..3b90ab2fecb 100644
--- a/src/services/jobOutputCache.test.ts
+++ b/src/services/jobOutputCache.test.ts
@@ -180,6 +180,87 @@ describe('jobOutputCache', () => {
     })
   })
 
+  describe('getPreviewableOutputsFromJobDetail', () => {
+    it('returns empty array when job detail or outputs are missing', async () => {
+      const { getPreviewableOutputsFromJobDetail } =
+        await import('@/services/jobOutputCache')
+
+      expect(getPreviewableOutputsFromJobDetail(undefined)).toEqual([])
+
+      const jobDetail: JobDetail = {
+        id: 'job-empty',
+        status: 'completed',
+        create_time: Date.now(),
+        priority: 0
+      }
+
+      expect(getPreviewableOutputsFromJobDetail(jobDetail)).toEqual([])
+    })
+
+    it('maps previewable outputs and skips animated/text entries', async () => {
+      const { getPreviewableOutputsFromJobDetail } =
+        await import('@/services/jobOutputCache')
+      const jobDetail: JobDetail = {
+        id: 'job-previewable',
+        status: 'completed',
+        create_time: Date.now(),
+        priority: 0,
+        outputs: {
+          'node-1': {
+            images: [
+              { filename: 'image.png', subfolder: '', type: 'output' },
+              { filename: 'image.webp', subfolder: '', type: 'temp' }
+            ],
+            animated: [true],
+            text: 'hello'
+          },
+          'node-2': {
+            video: [{ filename: 'clip.mp4', subfolder: '', type: 'output' }],
+            audio: [{ filename: 'sound.mp3', subfolder: '', type: 'output' }]
+          }
+        }
+      }
+
+      const result = getPreviewableOutputsFromJobDetail(jobDetail)
+
+      expect(result).toHaveLength(4)
+      expect(result.map((item) => item.filename).sort()).toEqual(
+        ['image.png', 'image.webp', 'clip.mp4', 'sound.mp3'].sort()
+      )
+
+      const image = result.find((item) => item.filename === 'image.png')
+      const video = result.find((item) => item.filename === 'clip.mp4')
+
+      expect(image).toBeInstanceOf(ResultItemImpl)
+      expect(image?.nodeId).toBe('node-1')
+      expect(image?.mediaType).toBe('images')
+      expect(video?.nodeId).toBe('node-2')
+      expect(video?.mediaType).toBe('video')
+    })
+
+    it('filters non-previewable outputs and non-object items', async () => {
+      const { getPreviewableOutputsFromJobDetail } =
+        await import('@/services/jobOutputCache')
+      const jobDetail: JobDetail = {
+        id: 'job-filter',
+        status: 'completed',
+        create_time: Date.now(),
+        priority: 0,
+        outputs: {
+          'node-3': {
+            images: [{ filename: 'valid.png', subfolder: '', type: 'output' }],
+            text: ['not-object'],
+            unknown: [{ filename: 'data.bin', subfolder: '', type: 'output' }]
+          }
+        }
+      }
+
+      const result = getPreviewableOutputsFromJobDetail(jobDetail)
+
+      expect(result.map((item) => item.filename)).toEqual(['valid.png'])
+    })
+  })
+
   describe('getJobDetail', () => {
     it('fetches and caches job detail', async () => {
       const { getJobDetail } = await import('@/services/jobOutputCache')

From bb2e9fbf790f05462587ff41e8b369e9965e0ca1 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:28:14 -0800
Subject: [PATCH 22/41] Don't clear selected on view switch

---
 .../tabs/AssetsSidebarListView.stories.ts     | 23 +++++++++++++--
 .../sidebar/tabs/AssetsSidebarListView.vue    | 29 +++++++------------
 .../sidebar/tabs/AssetsSidebarTab.vue         | 27 ++++++++++-------
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
index 2c50cab17cd..19305df01eb 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed } from 'vue'
 
 import type { JobAction } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { setMockJobActions } from '@/storybook/mocks/useJobActions'
 import { setMockJobItems } from '@/storybook/mocks/useJobList'
@@ -138,16 +140,33 @@ function renderAssetsSidebarListView(args: StoryArgs) {
     setup() {
       setMockJobItems(args.jobs)
       setMockJobActions(args.actionsByJobId ?? {})
+      const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
+        useOutputStacks({
+          assets: computed(() => args.assets)
+        })
       const selectedIds = new Set(args.selectedAssetIds ?? [])
       function isSelected(assetId: string) {
         return selectedIds.has(assetId)
       }
 
-      return { args, isSelected }
+      return {
+        args,
+        assetItems,
+        selectableAssets,
+        isSelected,
+        isStackExpanded,
+        toggleStack
+      }
     },
     template: `
       <div class="h-[520px] w-[320px] overflow-hidden rounded-lg border border-panel-border">
-        <AssetsSidebarListView :assets="args.assets" :is-selected="isSelected" />
+        <AssetsSidebarListView
+          :asset-items="assetItems"
+          :selectable-assets="selectableAssets"
+          :is-selected="isSelected"
+          :is-stack-expanded="isStackExpanded"
+          :toggle-stack="toggleStack"
+        />
       </div>
     `
   }
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index 962042f3957..b8373cda0d2 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -40,7 +40,7 @@
     </div>
 
     <div
-      v-if="assets.length"
+      v-if="assetItems.length"
       :class="cn('px-2', activeJobItems.length && 'mt-2')"
     >
       <div
@@ -111,7 +111,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -120,7 +120,6 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
@@ -135,12 +134,18 @@ import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  assets,
+  assetItems,
+  selectableAssets,
   isSelected,
+  isStackExpanded,
+  toggleStack,
   assetType = 'output'
 } = defineProps<{
-  assets: AssetItem[]
+  assetItems: { key: string; asset: AssetItem; isChild?: boolean }[]
+  selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
+  isStackExpanded: (asset: AssetItem) => boolean
+  toggleStack: (asset: AssetItem) => void
   assetType?: 'input' | 'output'
 }>()
 
@@ -148,18 +153,12 @@ const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
-  (e: 'assets-change', assets: AssetItem[]): void
 }>()
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
 const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
-const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
-  useOutputStacks({
-    assets: computed(() => assets)
-  })
-
 const activeJobItems = computed(() =>
   jobItems.value.filter((item) => isActiveJobState(item.state))
 )
@@ -171,14 +170,6 @@ const hoveredJob = computed(() =>
 )
 const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
-watch(
-  selectableAssets,
-  (nextAssets) => {
-    emit('assets-change', nextAssets)
-  },
-  { immediate: true }
-)
-
 const listGridStyle = {
   display: 'grid',
   gridTemplateColumns: 'minmax(0, 1fr)',
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 0acf2473fca..76e70480c10 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -98,11 +98,13 @@
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <AssetsSidebarListView
           v-if="isListView"
-          :assets="displayAssets"
+          :asset-items="listViewAssetItems"
           :is-selected="isSelected"
+          :selectable-assets="listViewSelectableAssets"
+          :is-stack-expanded="isListViewStackExpanded"
+          :toggle-stack="toggleListViewStack"
           :asset-type="activeTab"
           @select-asset="handleAssetSelect"
-          @assets-change="handleListViewAssetsChange"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
@@ -226,6 +228,7 @@ import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAsse
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
@@ -380,11 +383,19 @@ const displayAssets = computed(() => {
   return filteredAssets.value
 })
 
-const listViewAssets = ref<AssetItem[]>([])
+const {
+  assetItems: listViewAssetItems,
+  selectableAssets: listViewSelectableAssets,
+  isStackExpanded: isListViewStackExpanded,
+  toggleStack: toggleListViewStack
+} = useOutputStacks({
+  assets: computed(() => displayAssets.value)
+})
 
-const visibleAssets = computed(() =>
-  isListView.value ? listViewAssets.value : displayAssets.value
-)
+const visibleAssets = computed(() => {
+  if (!isListView.value) return displayAssets.value
+  return listViewSelectableAssets.value
+})
 
 const selectedAssets = computed(() => getSelectedAssets(visibleAssets.value))
 
@@ -473,10 +484,6 @@ const handleAssetSelect = (asset: AssetItem, assets?: AssetItem[]) => {
   handleAssetClick(asset, index, assetList)
 }
 
-const handleListViewAssetsChange = (assets: AssetItem[]) => {
-  listViewAssets.value = assets
-}
-
 function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
   contextMenuAsset.value = asset
   void nextTick(() => {

From bafb13d55d2380774feb5ac13bd969657a877f4b Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:29:24 -0800
Subject: [PATCH 23/41] Deduplicate types

---
 src/components/sidebar/tabs/AssetsSidebarListView.vue | 3 ++-
 src/platform/assets/composables/useOutputStacks.ts    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index b8373cda0d2..6f454bb07db 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -120,6 +120,7 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
@@ -141,7 +142,7 @@ const {
   toggleStack,
   assetType = 'output'
 } = defineProps<{
-  assetItems: { key: string; asset: AssetItem; isChild?: boolean }[]
+  assetItems: OutputStackListItem[]
   selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
   isStackExpanded: (asset: AssetItem) => boolean
diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
index 5c53c23e4ee..e5260f93ae9 100644
--- a/src/platform/assets/composables/useOutputStacks.ts
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -5,7 +5,7 @@ import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataS
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 
-type OutputStackListItem = {
+export type OutputStackListItem = {
   key: string
   asset: AssetItem
   isChild?: boolean

From a90819344990d5b27fb112386d19551641187ba5 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:33:29 -0800
Subject: [PATCH 24/41] Rely on asset IDs for selection state

---
 src/components/queue/QueueProgressOverlay.vue |  1 +
 .../composables/useAssetSelection.test.ts     | 24 +++++++++++++++-
 .../assets/composables/useAssetSelection.ts   | 28 +++++++++++++++----
 .../composables/useAssetSelectionStore.ts     | 11 ++++----
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/components/queue/QueueProgressOverlay.vue b/src/components/queue/QueueProgressOverlay.vue
index 6267095939a..1024dc0241f 100644
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -264,6 +264,7 @@ const focusAssetInSidebar = async (item: JobListItem) => {
     throw new Error('Asset not found in media assets panel')
   }
   assetSelectionStore.setSelection([assetId])
+  assetSelectionStore.setLastSelectedAssetId(assetId)
 }
 
 const inspectJobAsset = wrapWithErrorHandlingAsync(
diff --git a/src/platform/assets/composables/useAssetSelection.test.ts b/src/platform/assets/composables/useAssetSelection.test.ts
index 56627ae39e5..46e284bcdbc 100644
--- a/src/platform/assets/composables/useAssetSelection.test.ts
+++ b/src/platform/assets/composables/useAssetSelection.test.ts
@@ -26,11 +26,13 @@ describe('useAssetSelection', () => {
 
     store.setSelection(['a', 'b'])
     store.setLastSelectedIndex(1)
+    store.setLastSelectedAssetId('b')
 
     selection.reconcileSelection([assets[1]])
 
     expect(Array.from(store.selectedAssetIds)).toEqual(['b'])
-    expect(store.lastSelectedIndex).toBe(-1)
+    expect(store.lastSelectedIndex).toBe(0)
+    expect(store.lastSelectedAssetId).toBe('b')
   })
 
   it('clears selection when no visible assets remain', () => {
@@ -39,10 +41,30 @@ describe('useAssetSelection', () => {
 
     store.setSelection(['a'])
     store.setLastSelectedIndex(0)
+    store.setLastSelectedAssetId('a')
 
     selection.reconcileSelection([])
 
     expect(store.selectedAssetIds.size).toBe(0)
     expect(store.lastSelectedIndex).toBe(-1)
+    expect(store.lastSelectedAssetId).toBeNull()
+  })
+
+  it('recomputes the anchor index when assets reorder', () => {
+    const selection = useAssetSelection()
+    const store = useAssetSelectionStore()
+    const assets: AssetItem[] = [
+      { id: 'a', name: 'a.png', tags: [] },
+      { id: 'b', name: 'b.png', tags: [] }
+    ]
+
+    store.setSelection(['a'])
+    store.setLastSelectedIndex(0)
+    store.setLastSelectedAssetId('a')
+
+    selection.reconcileSelection([assets[1], assets[0]])
+
+    expect(store.lastSelectedIndex).toBe(1)
+    expect(store.lastSelectedAssetId).toBe('a')
   })
 })
diff --git a/src/platform/assets/composables/useAssetSelection.ts b/src/platform/assets/composables/useAssetSelection.ts
index ace5d33641e..570120af297 100644
--- a/src/platform/assets/composables/useAssetSelection.ts
+++ b/src/platform/assets/composables/useAssetSelection.ts
@@ -61,6 +61,7 @@ export function useAssetSelection() {
     if (cmdOrCtrlKey.value) {
       selectionStore.toggleSelection(assetId)
       selectionStore.setLastSelectedIndex(index)
+      selectionStore.setLastSelectedAssetId(assetId)
       return
     }
 
@@ -68,6 +69,7 @@ export function useAssetSelection() {
     selectionStore.clearSelection()
     selectionStore.addToSelection(assetId)
     selectionStore.setLastSelectedIndex(index)
+    selectionStore.setLastSelectedAssetId(assetId)
   }
 
   /**
@@ -77,7 +79,9 @@ export function useAssetSelection() {
     const allIds = allAssets.map((a) => a.id)
     selectionStore.setSelection(allIds)
     if (allAssets.length > 0) {
-      selectionStore.setLastSelectedIndex(allAssets.length - 1)
+      const lastIndex = allAssets.length - 1
+      selectionStore.setLastSelectedIndex(lastIndex)
+      selectionStore.setLastSelectedAssetId(allAssets[lastIndex].id)
     }
   }
 
@@ -107,7 +111,18 @@ export function useAssetSelection() {
       }
     }
 
+    const anchorId = selectionStore.lastSelectedAssetId
+    const anchorIndex = anchorId
+      ? assets.findIndex((asset) => asset.id === anchorId)
+      : -1
+
     if (nextSelectedIds.length === selectionStore.selectedAssetIds.size) {
+      if (anchorIndex !== -1) {
+        selectionStore.setLastSelectedIndex(anchorIndex)
+      } else {
+        selectionStore.setLastSelectedIndex(-1)
+        selectionStore.setLastSelectedAssetId(null)
+      }
       return
     }
 
@@ -117,7 +132,12 @@ export function useAssetSelection() {
     }
 
     selectionStore.setSelection(nextSelectedIds)
-    selectionStore.setLastSelectedIndex(-1)
+    if (anchorIndex !== -1) {
+      selectionStore.setLastSelectedIndex(anchorIndex)
+    } else {
+      selectionStore.setLastSelectedIndex(-1)
+      selectionStore.setLastSelectedAssetId(null)
+    }
   }
 
   /**
@@ -149,7 +169,7 @@ export function useAssetSelection() {
   function deactivate() {
     isActive.value = false
     // Reset selection state to ensure clean state when deactivated
-    selectionStore.reset()
+    selectionStore.clearSelection()
   }
 
   return {
@@ -167,8 +187,6 @@ export function useAssetSelection() {
     reconcileSelection,
     getOutputCount,
     getTotalOutputCount,
-    reset: () => selectionStore.reset(),
-
     // Lifecycle management
     activate,
     deactivate,
diff --git a/src/platform/assets/composables/useAssetSelectionStore.ts b/src/platform/assets/composables/useAssetSelectionStore.ts
index 08edb7bf85c..c15fe599b85 100644
--- a/src/platform/assets/composables/useAssetSelectionStore.ts
+++ b/src/platform/assets/composables/useAssetSelectionStore.ts
@@ -5,6 +5,7 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
   // State
   const selectedAssetIds = ref<Set<string>>(new Set())
   const lastSelectedIndex = ref<number>(-1)
+  const lastSelectedAssetId = ref<string | null>(null)
 
   // Getters
   const selectedCount = computed(() => selectedAssetIds.value.size)
@@ -34,6 +35,7 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
   function clearSelection() {
     selectedAssetIds.value.clear()
     lastSelectedIndex.value = -1
+    lastSelectedAssetId.value = null
   }
 
   function toggleSelection(assetId: string) {
@@ -52,16 +54,15 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
     lastSelectedIndex.value = index
   }
 
-  // Reset function for cleanup
-  function reset() {
-    selectedAssetIds.value.clear()
-    lastSelectedIndex.value = -1
+  function setLastSelectedAssetId(assetId: string | null) {
+    lastSelectedAssetId.value = assetId
   }
 
   return {
     // State
     selectedAssetIds: computed(() => selectedAssetIds.value),
     lastSelectedIndex: computed(() => lastSelectedIndex.value),
+    lastSelectedAssetId: computed(() => lastSelectedAssetId.value),
 
     // Getters
     selectedCount,
@@ -76,6 +77,6 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
     toggleSelection,
     isSelected,
     setLastSelectedIndex,
-    reset
+    setLastSelectedAssetId
   }
 })

From e90987569cd053aea61fe647cdc8720712c85289 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:38:24 -0800
Subject: [PATCH 25/41] Add missing anchor clear test case

---
 .../composables/useAssetSelection.test.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/platform/assets/composables/useAssetSelection.test.ts b/src/platform/assets/composables/useAssetSelection.test.ts
index 46e284bcdbc..6096232534a 100644
--- a/src/platform/assets/composables/useAssetSelection.test.ts
+++ b/src/platform/assets/composables/useAssetSelection.test.ts
@@ -67,4 +67,23 @@ describe('useAssetSelection', () => {
     expect(store.lastSelectedIndex).toBe(1)
     expect(store.lastSelectedAssetId).toBe('a')
   })
+
+  it('clears anchor when the anchored asset is no longer visible', () => {
+    const selection = useAssetSelection()
+    const store = useAssetSelectionStore()
+    const assets: AssetItem[] = [
+      { id: 'a', name: 'a.png', tags: [] },
+      { id: 'b', name: 'b.png', tags: [] }
+    ]
+
+    store.setSelection(['a', 'b'])
+    store.setLastSelectedIndex(0)
+    store.setLastSelectedAssetId('a')
+
+    selection.reconcileSelection([assets[1]])
+
+    expect(Array.from(store.selectedAssetIds)).toEqual(['b'])
+    expect(store.lastSelectedIndex).toBe(-1)
+    expect(store.lastSelectedAssetId).toBeNull()
+  })
 })

From 20d6b43f6fd62eea61aa4ab71f1788828473a19f Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:40:00 -0800
Subject: [PATCH 26/41] Add aria-expanded

---
 src/platform/assets/components/AssetsListItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index a597ced189f..a5330c1dcf0 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -84,6 +84,7 @@
         size="md"
         class="gap-1 font-bold"
         :aria-label="stackIndicatorLabel || undefined"
+        :aria-expanded="stackExpanded"
         @click.stop="emit('stack-toggle')"
       >
         <i aria-hidden="true" class="icon-[lucide--layers] size-4" />

From 82a30bc3da5cf654054dba1bb7f71b474d154f34 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:40:25 -0800
Subject: [PATCH 27/41] Deduplicate some code

---
 .../assets/composables/useAssetSelection.ts   | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/platform/assets/composables/useAssetSelection.ts b/src/platform/assets/composables/useAssetSelection.ts
index 570120af297..baf946a351a 100644
--- a/src/platform/assets/composables/useAssetSelection.ts
+++ b/src/platform/assets/composables/useAssetSelection.ts
@@ -21,6 +21,25 @@ export function useAssetSelection() {
   const metaKey = computed(() => isActive.value && metaKeyRaw.value)
   const cmdOrCtrlKey = computed(() => ctrlKey.value || metaKey.value)
 
+  function setAnchor(index: number, assetId: string | null) {
+    selectionStore.setLastSelectedIndex(index)
+    selectionStore.setLastSelectedAssetId(assetId)
+  }
+
+  function syncAnchorFromAssets(assets: AssetItem[]) {
+    const anchorId = selectionStore.lastSelectedAssetId
+    const anchorIndex = anchorId
+      ? assets.findIndex((asset) => asset.id === anchorId)
+      : -1
+
+    if (anchorIndex !== -1) {
+      selectionStore.setLastSelectedIndex(anchorIndex)
+      return
+    }
+
+    setAnchor(-1, null)
+  }
+
   /**
    * Handle asset click with modifier keys for selection
    * @param asset The clicked asset
@@ -60,16 +79,14 @@ export function useAssetSelection() {
     // Ctrl/Cmd + Click: Toggle individual selection
     if (cmdOrCtrlKey.value) {
       selectionStore.toggleSelection(assetId)
-      selectionStore.setLastSelectedIndex(index)
-      selectionStore.setLastSelectedAssetId(assetId)
+      setAnchor(index, assetId)
       return
     }
 
     // Normal Click: Single selection
     selectionStore.clearSelection()
     selectionStore.addToSelection(assetId)
-    selectionStore.setLastSelectedIndex(index)
-    selectionStore.setLastSelectedAssetId(assetId)
+    setAnchor(index, assetId)
   }
 
   /**
@@ -80,8 +97,7 @@ export function useAssetSelection() {
     selectionStore.setSelection(allIds)
     if (allAssets.length > 0) {
       const lastIndex = allAssets.length - 1
-      selectionStore.setLastSelectedIndex(lastIndex)
-      selectionStore.setLastSelectedAssetId(allAssets[lastIndex].id)
+      setAnchor(lastIndex, allAssets[lastIndex].id)
     }
   }
 
@@ -111,18 +127,8 @@ export function useAssetSelection() {
       }
     }
 
-    const anchorId = selectionStore.lastSelectedAssetId
-    const anchorIndex = anchorId
-      ? assets.findIndex((asset) => asset.id === anchorId)
-      : -1
-
     if (nextSelectedIds.length === selectionStore.selectedAssetIds.size) {
-      if (anchorIndex !== -1) {
-        selectionStore.setLastSelectedIndex(anchorIndex)
-      } else {
-        selectionStore.setLastSelectedIndex(-1)
-        selectionStore.setLastSelectedAssetId(null)
-      }
+      syncAnchorFromAssets(assets)
       return
     }
 
@@ -132,12 +138,7 @@ export function useAssetSelection() {
     }
 
     selectionStore.setSelection(nextSelectedIds)
-    if (anchorIndex !== -1) {
-      selectionStore.setLastSelectedIndex(anchorIndex)
-    } else {
-      selectionStore.setLastSelectedIndex(-1)
-      selectionStore.setLastSelectedAssetId(null)
-    }
+    syncAnchorFromAssets(assets)
   }
 
   /**

From 2bbd7adf830c0d5fb1fe022d04ad60b6f7b1a324 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 08:09:58 -0800
Subject: [PATCH 28/41] test: fix job output cache instance check

---
 src/services/jobOutputCache.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/services/jobOutputCache.test.ts b/src/services/jobOutputCache.test.ts
index 3b90ab2fecb..b76e84c5d84 100644
--- a/src/services/jobOutputCache.test.ts
+++ b/src/services/jobOutputCache.test.ts
@@ -230,8 +230,10 @@ describe('jobOutputCache', () => {
 
       const image = result.find((item) => item.filename === 'image.png')
       const video = result.find((item) => item.filename === 'clip.mp4')
+      const { ResultItemImpl: ResultItemImplClass } =
+        await import('@/stores/queueStore')
 
-      expect(image).toBeInstanceOf(ResultItemImpl)
+      expect(image).toBeInstanceOf(ResultItemImplClass)
       expect(image?.nodeId).toBe('node-1')
       expect(image?.mediaType).toBe('images')
       expect(video?.nodeId).toBe('node-2')

From 9becf6623df3a3c7f64453edc20e6b6e81a16d7c Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 16:28:58 -0800
Subject: [PATCH 29/41] fix: tighten result item guard

---
 src/services/jobOutputCache.ts | 42 +++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/services/jobOutputCache.ts b/src/services/jobOutputCache.ts
index 4ae7140efa4..065c0ab3d14 100644
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -11,6 +11,7 @@ import QuickLRU from '@alloc/quick-lru'
 import type { JobDetail } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { resultItemType } from '@/schemas/apiSchema'
 import type { ResultItem, TaskOutput } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { ResultItemImpl } from '@/stores/queueStore'
@@ -86,7 +87,7 @@ function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
           return []
         }
 
-        return items.filter(isResultItem).map(
+        return items.filter(isResultItemLike).map(
           (item) =>
             new ResultItemImpl({
               ...item,
@@ -100,8 +101,43 @@ function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
   return ResultItemImpl.filterPreviewable(resultItems)
 }
 
-function isResultItem(item: unknown): item is ResultItem {
-  return typeof item === 'object' && item !== null
+function isResultItemLike(item: unknown): item is ResultItem {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) {
+    return false
+  }
+
+  const candidate = item as Record<string, unknown>
+
+  if (
+    candidate.filename !== undefined &&
+    typeof candidate.filename !== 'string'
+  ) {
+    return false
+  }
+
+  if (
+    candidate.subfolder !== undefined &&
+    typeof candidate.subfolder !== 'string'
+  ) {
+    return false
+  }
+
+  if (
+    candidate.type !== undefined &&
+    !resultItemType.safeParse(candidate.type).success
+  ) {
+    return false
+  }
+
+  if (
+    candidate.filename === undefined &&
+    candidate.subfolder === undefined &&
+    candidate.type === undefined
+  ) {
+    return false
+  }
+
+  return true
 }
 
 export function getPreviewableOutputsFromJobDetail(

From cfed1350b56db418e3a7feb781a105d0d2681772 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 08:38:24 -0800
Subject: [PATCH 30/41] fix: include subfolder in output asset key

---
 .../assets/utils/outputAssetUtil.test.ts         |  6 +++---
 src/platform/assets/utils/outputAssetUtil.ts     | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/platform/assets/utils/outputAssetUtil.test.ts b/src/platform/assets/utils/outputAssetUtil.test.ts
index 41779958bfa..26c55a37189 100644
--- a/src/platform/assets/utils/outputAssetUtil.test.ts
+++ b/src/platform/assets/utils/outputAssetUtil.test.ts
@@ -37,7 +37,7 @@ describe('resolveOutputAssetItems', () => {
     vi.clearAllMocks()
   })
 
-  it('maps outputs and excludes a filename', async () => {
+  it('maps outputs and excludes a composite output key', async () => {
     const outputA = createOutput({
       filename: 'a.png',
       nodeId: '1',
@@ -59,14 +59,14 @@ describe('resolveOutputAssetItems', () => {
 
     const results = await resolveOutputAssetItems(metadata, {
       createdAt: '2025-01-01T00:00:00.000Z',
-      excludeOutputKey: 'b.png'
+      excludeOutputKey: '2-sub-b.png'
     })
 
     expect(mocks.getJobDetail).not.toHaveBeenCalled()
     expect(results).toHaveLength(1)
     expect(results[0]).toEqual(
       expect.objectContaining({
-        id: 'prompt-1-1-a.png',
+        id: 'prompt-1-1-sub-a.png',
         name: 'a.png',
         created_at: '2025-01-01T00:00:00.000Z',
         tags: ['output'],
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index f0fbc1bceb4..8c5c590f887 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -12,7 +12,7 @@ type OutputAssetMapOptions = {
   createdAt?: string
   executionTimeInSeconds?: number
   workflow?: OutputAssetMetadata['workflow']
-  excludeFilename?: string
+  excludeOutputKey?: string
 }
 
 type ResolveOutputAssetItemsOptions = {
@@ -31,20 +31,26 @@ function shouldLoadFullOutputs(
   )
 }
 
+function getOutputKey(output: ResultItemImpl): string {
+  return `${output.nodeId}-${output.subfolder}-${output.filename}`
+}
+
 function mapOutputsToAssetItems({
   promptId,
   outputs,
   createdAt,
   executionTimeInSeconds,
   workflow,
-  excludeFilename
+  excludeOutputKey
 }: OutputAssetMapOptions): AssetItem[] {
   const createdAtValue = createdAt ?? new Date().toISOString()
 
   return outputs
-    .filter((output) => output.filename && output.filename !== excludeFilename)
+    .filter(
+      (output) => output.filename && getOutputKey(output) !== excludeOutputKey
+    )
     .map((output) => ({
-      id: `${promptId}-${output.nodeId}-${output.filename}`,
+      id: `${promptId}-${getOutputKey(output)}`,
       name: output.filename,
       size: 0,
       created_at: createdAtValue,
@@ -79,6 +85,6 @@ export async function resolveOutputAssetItems(
     createdAt,
     executionTimeInSeconds: metadata.executionTimeInSeconds,
     workflow: metadata.workflow,
-    excludeFilename: excludeOutputKey
+    excludeOutputKey
   })
 }

From c33ab46d737cfabfa6ca20b44d9ce8a417763f9f Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 16:59:00 -0800
Subject: [PATCH 31/41] fix: use toRef for story args

---
 src/components/sidebar/tabs/AssetsSidebarListView.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
index 19305df01eb..f3c64e962ac 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { computed } from 'vue'
+import { toRef } from 'vue'
 
 import type { JobAction } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
@@ -142,7 +142,7 @@ function renderAssetsSidebarListView(args: StoryArgs) {
       setMockJobActions(args.actionsByJobId ?? {})
       const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
         useOutputStacks({
-          assets: computed(() => args.assets)
+          assets: toRef(args, 'assets')
         })
       const selectedIds = new Set(args.selectedAssetIds ?? [])
       function isSelected(assetId: string) {

From 9f4e82fbae421c701b8fc272cef8974b2ee47e5f Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 17:01:03 -0800
Subject: [PATCH 32/41] Update
 src/platform/assets/components/AssetsListItem.vue

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
---
 src/platform/assets/components/AssetsListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index a5330c1dcf0..9acbec09aaa 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -83,7 +83,7 @@
         variant="secondary"
         size="md"
         class="gap-1 font-bold"
-        :aria-label="stackIndicatorLabel || undefined"
+        :aria-label="stackIndicatorLabel"
         :aria-expanded="stackExpanded"
         @click.stop="emit('stack-toggle')"
       >

From 6e5900d2d9c75b5cd5a02adc679aeb544fd051e9 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 16:16:54 -0800
Subject: [PATCH 33/41] Fix key usage

---
 src/components/sidebar/tabs/AssetsSidebarTab.vue      | 11 ++++++++---
 .../assets/composables/useOutputStacks.test.ts        |  2 +-
 src/platform/assets/composables/useOutputStacks.ts    |  8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index a0ce53c0f77..244b3e0a621 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -597,9 +597,14 @@ const enterFolderView = async (asset: AssetItem) => {
   folderPromptId.value = promptId
   folderExecutionTime.value = executionTimeInSeconds
 
-  const folderItems = await resolveOutputAssetItems(metadata, {
-    createdAt: asset.created_at
-  })
+  let folderItems: AssetItem[] = []
+  try {
+    folderItems = await resolveOutputAssetItems(metadata, {
+      createdAt: asset.created_at
+    })
+  } catch (error) {
+    console.error('Failed to resolve outputs for folder view:', error)
+  }
 
   if (folderItems.length === 0) {
     console.warn('No outputs available for folder view')
diff --git a/src/platform/assets/composables/useOutputStacks.test.ts b/src/platform/assets/composables/useOutputStacks.test.ts
index d770b3c75f6..c00b294b2f2 100644
--- a/src/platform/assets/composables/useOutputStacks.test.ts
+++ b/src/platform/assets/composables/useOutputStacks.test.ts
@@ -72,7 +72,7 @@ describe('useOutputStacks', () => {
       expect.objectContaining({ promptId: 'prompt-1' }),
       {
         createdAt: parent.created_at,
-        excludeOutputKey: parent.name
+        excludeOutputKey: 'node-1-outputs-parent.png'
       }
     )
     expect(isStackExpanded(parent)).toBe(true)
diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
index e5260f93ae9..79e20b76cf9 100644
--- a/src/platform/assets/composables/useOutputStacks.ts
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -107,10 +107,16 @@ export function useOutputStacks({ assets }: UseOutputStacksOptions) {
     if (!metadata) {
       return []
     }
+
+    const excludeOutputKey =
+      metadata.nodeId && metadata.subfolder
+        ? `${metadata.nodeId}-${metadata.subfolder}-${asset.name}`
+        : undefined
+
     try {
       return await resolveOutputAssetItems(metadata, {
         createdAt: asset.created_at,
-        excludeOutputKey: asset.name
+        excludeOutputKey
       })
     } catch (error) {
       console.error('Failed to resolve stack children:', error)

From 0876efe97cfed23420e80d14e726644f7a45ece5 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 16:30:35 -0800
Subject: [PATCH 34/41] Centraliza output key

---
 .../composables/useOutputStacks.test.ts       | 11 ++++--
 .../assets/composables/useOutputStacks.ts     | 13 +++++--
 src/platform/assets/utils/outputAssetUtil.ts  | 37 ++++++++++++++-----
 3 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/platform/assets/composables/useOutputStacks.test.ts b/src/platform/assets/composables/useOutputStacks.test.ts
index c00b294b2f2..159b6d7daa5 100644
--- a/src/platform/assets/composables/useOutputStacks.test.ts
+++ b/src/platform/assets/composables/useOutputStacks.test.ts
@@ -2,15 +2,20 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type * as OutputAssetUtil from '@/platform/assets/utils/outputAssetUtil'
 import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 
 const mocks = vi.hoisted(() => ({
   resolveOutputAssetItems: vi.fn()
 }))
 
-vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
-  resolveOutputAssetItems: mocks.resolveOutputAssetItems
-}))
+vi.mock('@/platform/assets/utils/outputAssetUtil', async (importOriginal) => {
+  const actual = await importOriginal<typeof OutputAssetUtil>()
+  return {
+    ...actual,
+    resolveOutputAssetItems: mocks.resolveOutputAssetItems
+  }
+})
 
 type Deferred<T> = {
   promise: Promise<T>
diff --git a/src/platform/assets/composables/useOutputStacks.ts b/src/platform/assets/composables/useOutputStacks.ts
index 79e20b76cf9..8fa0c76c422 100644
--- a/src/platform/assets/composables/useOutputStacks.ts
+++ b/src/platform/assets/composables/useOutputStacks.ts
@@ -3,7 +3,10 @@ import type { Ref } from 'vue'
 
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
+import {
+  getOutputKey,
+  resolveOutputAssetItems
+} from '@/platform/assets/utils/outputAssetUtil'
 
 export type OutputStackListItem = {
   key: string
@@ -109,9 +112,11 @@ export function useOutputStacks({ assets }: UseOutputStacksOptions) {
     }
 
     const excludeOutputKey =
-      metadata.nodeId && metadata.subfolder
-        ? `${metadata.nodeId}-${metadata.subfolder}-${asset.name}`
-        : undefined
+      getOutputKey({
+        nodeId: metadata.nodeId,
+        subfolder: metadata.subfolder,
+        filename: asset.name
+      }) ?? undefined
 
     try {
       return await resolveOutputAssetItems(metadata, {
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index 8c5c590f887..b6258405ad5 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -20,6 +20,12 @@ type ResolveOutputAssetItemsOptions = {
   excludeOutputKey?: string
 }
 
+type OutputKeyParts = {
+  nodeId?: string | number | null
+  subfolder?: string | null
+  filename?: string | null
+}
+
 function shouldLoadFullOutputs(
   outputCount: OutputAssetMetadata['outputCount'],
   outputsLength: number
@@ -31,8 +37,16 @@ function shouldLoadFullOutputs(
   )
 }
 
-function getOutputKey(output: ResultItemImpl): string {
-  return `${output.nodeId}-${output.subfolder}-${output.filename}`
+export function getOutputKey({
+  nodeId,
+  subfolder,
+  filename
+}: OutputKeyParts): string | null {
+  if (!nodeId || !subfolder || !filename) {
+    return null
+  }
+
+  return `${nodeId}-${subfolder}-${filename}`
 }
 
 function mapOutputsToAssetItems({
@@ -45,12 +59,14 @@ function mapOutputsToAssetItems({
 }: OutputAssetMapOptions): AssetItem[] {
   const createdAtValue = createdAt ?? new Date().toISOString()
 
-  return outputs
-    .filter(
-      (output) => output.filename && getOutputKey(output) !== excludeOutputKey
-    )
-    .map((output) => ({
-      id: `${promptId}-${getOutputKey(output)}`,
+  return outputs.reduce<AssetItem[]>((items, output) => {
+    const outputKey = getOutputKey(output)
+    if (!output.filename || !outputKey || outputKey === excludeOutputKey) {
+      return items
+    }
+
+    items.push({
+      id: `${promptId}-${outputKey}`,
       name: output.filename,
       size: 0,
       created_at: createdAtValue,
@@ -63,7 +79,10 @@ function mapOutputsToAssetItems({
         executionTimeInSeconds,
         workflow
       }
-    }))
+    })
+
+    return items
+  }, [])
 }
 
 export async function resolveOutputAssetItems(

From 32823d5e96b96f62c4f7ce76e9ab559f656539a1 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 16:31:16 -0800
Subject: [PATCH 35/41] nit

---
 src/components/actionbar/ComfyActionbar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 41479476f4e..11435bd7ec2 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -89,6 +89,7 @@ const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
 const emit = defineEmits<{
   (event: 'update:progressTarget', target: HTMLElement | null): void
 }>()
+
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
 const { t } = useI18n()

From b7a320f9f40c2aa5fdb982b21e61356dee9b310f Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 16:48:25 -0800
Subject: [PATCH 36/41] fix: type stack toggle as async

---
 src/components/sidebar/tabs/AssetsSidebarListView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index e6bf8791619..f7fc73c3c81 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -99,7 +99,7 @@
             @mouseleave="onAssetLeave(item.asset.id)"
             @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
             @click.stop="emit('select-asset', item.asset, selectableAssets)"
-            @stack-toggle="toggleStack(item.asset)"
+            @stack-toggle="void toggleStack(item.asset)"
           >
             <template v-if="hoveredAssetId === item.asset.id" #actions>
               <Button
@@ -156,7 +156,7 @@ const {
   selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
   isStackExpanded: (asset: AssetItem) => boolean
-  toggleStack: (asset: AssetItem) => void
+  toggleStack: (asset: AssetItem) => Promise<void>
   assetType?: 'input' | 'output'
 }>()
 

From 68341a047a4a1899900403c9a484d561a17b50b8 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 16:50:15 -0800
Subject: [PATCH 37/41] refactor: use function declaration for asset selection

---
 src/components/sidebar/tabs/AssetsSidebarTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 244b3e0a621..28ed9b710b8 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -486,7 +486,7 @@ watch(
   { immediate: true }
 )
 
-const handleAssetSelect = (asset: AssetItem, assets?: AssetItem[]) => {
+function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   const assetList = assets ?? visibleAssets.value
   const index = assetList.findIndex((a) => a.id === asset.id)
   handleAssetClick(asset, index, assetList)

From 1e50b90b3e8f4d611338dfc97b01ab568742bdff Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 17:31:06 -0800
Subject: [PATCH 38/41] Update src/services/jobOutputCache.ts

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
---
 src/services/jobOutputCache.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/jobOutputCache.ts b/src/services/jobOutputCache.ts
index 065c0ab3d14..23abf553307 100644
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -81,7 +81,7 @@ function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
   if (!outputs) return []
   const resultItems = Object.entries(outputs).flatMap(([nodeId, nodeOutputs]) =>
     Object.entries(nodeOutputs)
-      .filter(([mediaType, items]) => mediaType !== 'animated' && items)
+      .filter(([mediaType, _]) => mediaType !== 'animated')
       .flatMap(([mediaType, items]) => {
         if (!Array.isArray(items)) {
           return []

From 472733e5e3fca719cc785be0f958481ea58e1905 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 17:34:03 -0800
Subject: [PATCH 39/41] fix: allow output key nodeId 0

---
 src/platform/assets/utils/outputAssetUtil.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index b6258405ad5..e146c69fa32 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -42,7 +42,7 @@ export function getOutputKey({
   subfolder,
   filename
 }: OutputKeyParts): string | null {
-  if (!nodeId || !subfolder || !filename) {
+  if (nodeId == null || !subfolder || !filename) {
     return null
   }
 

From 10fec20c7a7c375619e2267efe855717d5089693 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 19:20:51 -0800
Subject: [PATCH 40/41] fix: hide active jobs in folder view

---
 src/components/sidebar/tabs/AssetsSidebarGridView.vue | 4 +++-
 src/components/sidebar/tabs/AssetsSidebarTab.vue      | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarGridView.vue b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
index 6e015fe6655..030f547c8cb 100644
--- a/src/components/sidebar/tabs/AssetsSidebarGridView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <!-- Active Jobs Grid -->
     <div
-      v-if="isQueuePanelV2Enabled && activeJobItems.length"
+      v-if="!isInFolderView && isQueuePanelV2Enabled && activeJobItems.length"
       class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
       :style="gridStyle"
     >
@@ -70,12 +70,14 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 const {
   assets,
   isSelected,
+  isInFolderView = false,
   assetType = 'output',
   showOutputCount,
   getOutputCount
 } = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
+  isInFolderView?: boolean
   assetType?: 'input' | 'output'
   showOutputCount: (asset: AssetItem) => boolean
   getOutputCount: (asset: AssetItem) => number
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 28ed9b710b8..091d951c2fe 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -53,7 +53,7 @@
         :show-generation-time-sort="activeTab === 'output'"
       />
       <div
-        v-if="isQueuePanelV2Enabled"
+        v-if="isQueuePanelV2Enabled && !isInFolderView"
         class="flex items-center justify-between px-2 py-2 2xl:px-4"
       >
         <span class="text-sm text-muted-foreground">
@@ -112,6 +112,7 @@
           v-else
           :assets="displayAssets"
           :is-selected="isSelected"
+          :is-in-folder-view="isInFolderView"
           :asset-type="activeTab"
           :show-output-count="shouldShowOutputCount"
           :get-output-count="getOutputCount"

From b32c9775e97d48662483904e789e22f3f2b9ea42 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Thu, 29 Jan 2026 22:05:16 -0800
Subject: [PATCH 41/41] fix: keep root output subfolders

---
 .../assets/utils/outputAssetUtil.test.ts      | 30 +++++++++++++++++++
 src/platform/assets/utils/outputAssetUtil.ts  |  2 +-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/platform/assets/utils/outputAssetUtil.test.ts b/src/platform/assets/utils/outputAssetUtil.test.ts
index 26c55a37189..be97ab8f8b8 100644
--- a/src/platform/assets/utils/outputAssetUtil.test.ts
+++ b/src/platform/assets/utils/outputAssetUtil.test.ts
@@ -120,4 +120,34 @@ describe('resolveOutputAssetItems', () => {
       'preview.png'
     ])
   })
+
+  it('keeps root outputs with empty subfolders', async () => {
+    const output = createOutput({
+      filename: 'root.png',
+      nodeId: '1',
+      subfolder: '',
+      url: 'https://example.com/root.png'
+    })
+    const metadata: OutputAssetMetadata = {
+      promptId: 'prompt-root',
+      nodeId: '1',
+      subfolder: '',
+      outputCount: 1,
+      allOutputs: [output]
+    }
+
+    const results = await resolveOutputAssetItems(metadata)
+
+    expect(mocks.getJobDetail).not.toHaveBeenCalled()
+    expect(results).toHaveLength(1)
+    const [asset] = results
+    if (!asset) {
+      throw new Error('Expected a root output asset')
+    }
+    expect(asset.id).toBe('prompt-root-1--root.png')
+    if (!asset.user_metadata) {
+      throw new Error('Expected output metadata')
+    }
+    expect(asset.user_metadata.subfolder).toBe('')
+  })
 })
diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts
index e146c69fa32..540ba3cc854 100644
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -42,7 +42,7 @@ export function getOutputKey({
   subfolder,
   filename
 }: OutputKeyParts): string | null {
-  if (nodeId == null || !subfolder || !filename) {
+  if (nodeId == null || subfolder == null || !filename) {
     return null
   }