fix: progressive hierarchical fallback and HF-download node dropdowns

1. Fix findProvidersWithFallback to try all intermediate parent paths (a/b/c → a/b → a) instead of jumping to top-level only. This ensures "Use" on CogVideo/ControlNet/* models creates the correct DownloadAndLoadCogVideoControlNet node. 2. Use empty key for DownloadAndLoadCogVideoControlNet and DownloadAndLoadCogVideoModel so the asset browser doesn't hijack the combo widget — these nodes use HF repo names, not file assets. 3. Add comprehensive tests for 1-4 level nested path fallback.
feat: App mode - update keybindings (#9794 )
2026-03-30 01:05:46 +00:00 · 2026-03-18 09:35:17 -07:00 · 2026-03-18 08:32:36 -07:00 · 2026-03-18 03:08:26 -07:00 · 2026-03-18 13:19:52 +09:00 · 2026-03-18 13:02:08 +09:00
39 changed files with 1477 additions and 543 deletions
--- a/browser_tests/tests/resultGallery.spec.ts
+++ b/browser_tests/tests/resultGallery.spec.ts
@@ -0,0 +1,70 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  async function runAndOpenGallery(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow(
+      'widgets/save_image_and_animated_webp'
+    )
+    await comfyPage.vueNodes.waitForNodes()
+    await comfyPage.runButton.click()
+
+    // Wait for SaveImage node to produce output
+    const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+    await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+      timeout: 30_000
+    })
+
+    // Open Assets sidebar tab and wait for it to load
+    await comfyPage.page.locator('.assets-tab-button').click()
+    await comfyPage.page
+      .locator('.sidebar-content-container')
+      .waitFor({ state: 'visible' })
+
+    // Wait for any asset card to appear (may contain img or video)
+    const assetCard = comfyPage.page
+      .locator('[role="button"]')
+      .filter({ has: comfyPage.page.locator('img, video') })
+      .first()
+
+    await expect(assetCard).toBeVisible({ timeout: 30_000 })
+
+    // Hover to reveal zoom button, then click it
+    await assetCard.hover()
+    await assetCard.getByLabel('Zoom in').click()
+
+    const gallery = comfyPage.page.getByRole('dialog')
+    await expect(gallery).toBeVisible()
+
+    return { gallery }
+  }
+
+  test('opens gallery and shows dialog with close button', async ({
+    comfyPage
+  }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+    await expect(gallery.getByLabel('Close')).toBeVisible()
+  })
+
+  test('closes gallery on Escape key', async ({ comfyPage }) => {
+    await runAndOpenGallery(comfyPage)
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+
+  test('closes gallery when clicking close button', async ({ comfyPage }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+
+    await gallery.getByLabel('Close').click()
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+})
--- a/docs/adr/0007-node-execution-output-passthrough-schema.md
+++ b/docs/adr/0007-node-execution-output-passthrough-schema.md
@@ -0,0 +1,71 @@
+# 7. NodeExecutionOutput Passthrough Schema Design
+
+Date: 2026-03-11
+
+## Status
+
+Accepted
+
+## Context
+
+`NodeExecutionOutput` represents the output data from a ComfyUI node execution. The backend API is intentionally open-ended: custom nodes can output any key (`gifs`, `3d`, `meshes`, `point_clouds`, etc.) alongside the well-known keys (`images`, `audio`, `video`, `animated`, `text`).
+
+The Zod schema uses `.passthrough()` to allow unknown keys through without validation:
+
+```ts
+const zOutputs = z
+  .object({
+    audio: z.array(zResultItem).optional(),
+    images: z.array(zResultItem).optional(),
+    video: z.array(zResultItem).optional(),
+    animated: z.array(z.boolean()).optional(),
+    text: z.union([z.string(), z.array(z.string())]).optional()
+  })
+  .passthrough()
+```
+
+This means unknown keys are typed as `unknown` in TypeScript, requiring runtime validation when iterating over all output entries (e.g., to build a unified media list).
+
+### Why not `.catchall(z.array(zResultItem))`?
+
+`.catchall()` correctly handles this at the Zod runtime level — explicit keys override the catchall, so `animated: [true]` parses fine even when the catchall expects `ResultItem[]`.
+
+However, TypeScript's type inference creates an index signature `[k: string]: ResultItem[]` that **conflicts** with the explicit fields `animated: boolean[]` and `text: string | string[]`. These types don't extend `ResultItem[]`, so TypeScript errors on any assignment.
+
+This is a TypeScript limitation, not a Zod or schema design issue. TypeScript cannot express "index signature applies only to keys not explicitly defined."
+
+### Why not remove `animated` and `text` from the schema?
+
+- `animated` is consumed by `isAnimatedOutput()` in `litegraphUtil.ts` and by `litegraphService.ts` to determine whether to render images as static or animated. Removing it would break typing for the graph editor path.
+- `text` is part of the `zExecutedWsMessage` validation pipeline. Removing it from `zOutputs` would cause `.catchall()` to reject `{ text: "hello" }` as invalid (it's not `ResultItem[]`).
+- Both are structurally different from media outputs — they are metadata, not file references. Mixing them in the same object is a backend API constraint we cannot change here.
+
+## Decision
+
+1. **Keep `.passthrough()`** on `zOutputs`. It correctly reflects the extensible nature of the backend API.
+
+2. **Use `resultItemType` (the Zod enum) for `type` field validation** in the shared `isResultItem` guard. We cannot use `zResultItem.safeParse()` directly because the Zod schema marks `filename` and `subfolder` as `.optional()` (matching the wire format), but a `ResultItemImpl` needs both fields to construct a valid preview URL. The shared guard requires `filename` and `subfolder` as strings while delegating `type` validation to the Zod enum.
+
+3. **Accept the `unknown[]` cast** when iterating passthrough entries. The cast is honest — passthrough values genuinely are `unknown`, and runtime validation narrows them correctly.
+
+4. **Centralize the `NodeExecutionOutput → ResultItemImpl[]` conversion** into a shared utility (`parseNodeOutput` / `parseTaskOutput` in `src/stores/resultItemParsing.ts`) to eliminate duplicated, inconsistent validation across `flattenNodeOutput.ts`, `jobOutputCache.ts`, and `queueStore.ts`.
+
+## Consequences
+
+### Positive
+
+- Single source of truth for `ResultItem` validation (shared `isResultItem` guard using Zod's `resultItemType` enum)
+- Consistent validation strictness across all code paths
+- Clear documentation of why `.passthrough()` is intentional, preventing future "fix" attempts
+- The `unknown[]` cast is contained to one location
+
+### Negative
+
+- Manual `isResultItem` guard is stricter than `zResultItem` Zod schema (requires `filename` and `subfolder`); if the Zod schema changes, the guard must be updated manually
+- The `unknown[]` cast remains necessary — cannot be eliminated without a TypeScript language change or backend API restructuring
+
+## Notes
+
+The backend API's extensible output format is a deliberate design choice for ComfyUI's plugin architecture. Custom nodes define their own output types, and the frontend must handle arbitrary keys gracefully. Any future attempt to make the schema stricter must account for this extensibility requirement.
+
+If TypeScript adds support for "rest index signatures" or "exclusive index signatures" in the future, `.catchall()` could replace `.passthrough()` and the `unknown[]` cast would be eliminated.
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -8,13 +8,15 @@ An Architecture Decision Record captures an important architectural decision mad

 ## ADR Index

-| ADR                                                 | Title                                    | Status   | Date       |
-| --------------------------------------------------- | ---------------------------------------- | -------- | ---------- |
-| [0001](0001-merge-litegraph-into-frontend.md)       | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
-| [0002](0002-monorepo-conversion.md)                 | Restructure as a Monorepo                | Accepted | 2025-08-25 |
-| [0003](0003-crdt-based-layout-system.md)            | Centralized Layout Management with CRDT  | Proposed | 2025-08-27 |
-| [0004](0004-fork-primevue-ui-library.md)            | Fork PrimeVue UI Library                 | Rejected | 2025-08-27 |
-| [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions     | Accepted | 2025-12-13 |
+| ADR                                                      | Title                                    | Status   | Date       |
+| -------------------------------------------------------- | ---------------------------------------- | -------- | ---------- |
+| [0001](0001-merge-litegraph-into-frontend.md)            | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
+| [0002](0002-monorepo-conversion.md)                      | Restructure as a Monorepo                | Accepted | 2025-08-25 |
+| [0003](0003-crdt-based-layout-system.md)                 | Centralized Layout Management with CRDT  | Proposed | 2025-08-27 |
+| [0004](0004-fork-primevue-ui-library.md)                 | Fork PrimeVue UI Library                 | Rejected | 2025-08-27 |
+| [0005](0005-remove-importmap-for-vue-extensions.md)      | Remove Import Map for Vue Extensions     | Accepted | 2025-12-13 |
+| [0006](0006-primitive-node-copy-paste-lifecycle.md)      | PrimitiveNode Copy/Paste Lifecycle       | Proposed | 2026-02-22 |
+| [0007](0007-node-execution-output-passthrough-schema.md) | NodeExecutionOutput Passthrough Schema   | Accepted | 2026-03-11 |

 ## Creating a New ADR

--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,5 +1,14 @@
@import '@comfyorg/design-system/css/style.css';

+/* Use 0.001ms instead of 0s so transitionend/animationend events still fire
+   and JS listeners aren't broken. */
+.disable-animations *,
+.disable-animations *::before,
+.disable-animations *::after {
+  animation-duration: 0.001ms !important;
+  transition-duration: 0.001ms !important;
+}
+
@media (prefers-reduced-motion: no-preference) {
  /* List transition animations */
  .list-scale-move,
--- a/src/components/builder/AppModeWidgetList.vue
+++ b/src/components/builder/AppModeWidgetList.vue
@@ -10,6 +10,8 @@ import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
+import { extractWidgetStringValue } from '@/composables/maskeditor/useMaskEditorLoader'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
@@ -17,6 +19,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useAppModeStore } from '@/stores/appModeStore'
+import { parseImageWidgetValue } from '@/utils/imageUtil'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
@@ -38,6 +41,7 @@ const { mobile = false, builderMode = false } = defineProps<{
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const appModeStore = useAppModeStore()
+const maskEditor = useMaskEditor()

 provide(HideLayoutFieldKey, true)

@@ -97,21 +101,27 @@ const mappedSelections = computed((): WidgetEntry[] => {
 function getDropIndicator(node: LGraphNode) {
  if (node.type !== 'LoadImage') return undefined

-  const filename = node.widgets?.[0]?.value
-  const resultItem = { type: 'input', filename: `${filename}` }
+  const stringValue = extractWidgetStringValue(node.widgets?.[0]?.value)
+
+  const { filename, subfolder, type } = stringValue
+    ? parseImageWidgetValue(stringValue)
+    : { filename: '', subfolder: '', type: 'input' }

  const buildImageUrl = () => {
    if (!filename) return undefined
-    const params = new URLSearchParams(resultItem)
-    appendCloudResParam(params, resultItem.filename)
+    const params = new URLSearchParams({ filename, subfolder, type })
+    appendCloudResParam(params, filename)
    return api.apiURL(`/view?${params}${app.getPreviewFormatParam()}`)
  }

+  const imageUrl = buildImageUrl()
+
  return {
    iconClass: 'icon-[lucide--image]',
-    imageUrl: buildImageUrl(),
+    imageUrl,
    label: mobile ? undefined : t('linearMode.dragAndDropImage'),
-    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+    onClick: () => node.widgets?.[1]?.callback?.(undefined),
+    onMaskEdit: imageUrl ? () => maskEditor.openMaskEditor(node) : undefined
  }
 }

--- a/src/components/common/WorkflowActionsDropdown.vue
+++ b/src/components/common/WorkflowActionsDropdown.vue
@@ -12,6 +12,7 @@ import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -23,6 +24,7 @@ const { source, align = 'start' } = defineProps<{

 const { t } = useI18n()
 const canvasStore = useCanvasStore()
+const keybindingStore = useKeybindingStore()
 const dropdownOpen = ref(false)

 const { menuItems } = useWorkflowActionsMenu(
@@ -43,6 +45,16 @@ function handleOpen(open: boolean) {
  }
 }

+function toggleModeTooltip() {
+  const label = canvasStore.linearMode
+    ? t('breadcrumbsMenu.enterNodeGraph')
+    : t('breadcrumbsMenu.enterAppMode')
+  const shortcut = keybindingStore
+    .getKeybindingByCommandId('Comfy.ToggleLinear')
+    ?.combo.toString()
+  return label + (shortcut ? t('g.shortcutSuffix', { shortcut }) : '')
+}
+
 function toggleLinearMode() {
  dropdownOpen.value = false
  void useCommandStore().execute('Comfy.ToggleLinear', {
@@ -52,7 +64,14 @@ function toggleLinearMode() {

 const tooltipPt = {
  root: {
-    style: { transform: 'translateX(calc(50% - 16px))' }
+    style: {
+      transform: 'translateX(calc(50% - 16px))',
+      whiteSpace: 'nowrap',
+      maxWidth: 'none'
+    }
+  },
+  text: {
+    style: { whiteSpace: 'nowrap' }
  },
  arrow: {
    class: '!left-[16px]'
@@ -68,9 +87,7 @@ const tooltipPt = {
      >
        <Button
          v-tooltip.bottom="{
-            value: canvasStore.linearMode
-              ? t('breadcrumbsMenu.enterNodeGraph')
-              : t('breadcrumbsMenu.enterAppMode'),
+            value: toggleModeTooltip(),
            showDelay: 300,
            hideDelay: 300,
            pt: tooltipPt
--- a/src/components/queue/QueueProgressOverlay.test.ts
+++ b/src/components/queue/QueueProgressOverlay.test.ts
@@ -60,7 +60,7 @@ const mountComponent = (
      stubs: {
        QueueOverlayExpanded: QueueOverlayExpandedStub,
        QueueOverlayActive: true,
-        ResultGallery: true
+        MediaLightbox: true
      },
      directives: {
        tooltip: () => {}
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -45,7 +45,7 @@
    </div>
  </div>

-  <ResultGallery
+  <MediaLightbox
    v-model:active-index="galleryActiveIndex"
    :all-gallery-items="galleryItems"
  />
@@ -57,7 +57,7 @@ import { useI18n } from 'vue-i18n'

 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -170,7 +170,7 @@
      </div>
    </template>
  </SidebarTabTemplate>
-  <ResultGallery
+  <MediaLightbox
    v-model:active-index="galleryActiveIndex"
    :all-gallery-items="galleryItems"
  />
@@ -220,7 +220,7 @@ import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridVi
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.vue
+++ b/src/components/sidebar/tabs/JobHistorySidebarTab.vue
@@ -58,7 +58,7 @@
        :entries="jobMenuEntries"
        @action="onJobMenuAction"
      />
-      <ResultGallery
+      <MediaLightbox
        v-model:active-index="galleryActiveIndex"
        :all-gallery-items="galleryItems"
      />
@@ -83,7 +83,7 @@ import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHis
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
--- a/src/components/sidebar/tabs/queue/MediaLightbox.test.ts
+++ b/src/components/sidebar/tabs/queue/MediaLightbox.test.ts
@@ -0,0 +1,229 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+enableAutoUnmount(afterEach)
+
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+import MediaLightbox from './MediaLightbox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        close: 'Close',
+        gallery: 'Gallery',
+        previous: 'Previous',
+        next: 'Next'
+      }
+    }
+  }
+})
+
+type MockResultItem = Partial<ResultItemImpl> & {
+  filename: string
+  subfolder: string
+  type: string
+  nodeId: NodeId
+  mediaType: string
+  id?: string
+  url?: string
+  isImage?: boolean
+  isVideo?: boolean
+  isAudio?: boolean
+}
+
+describe('MediaLightbox', () => {
+  const mockComfyImage = {
+    name: 'ComfyImage',
+    template: '<div class="mock-comfy-image" data-testid="comfy-image"></div>',
+    props: ['src', 'contain', 'alt']
+  }
+
+  const mockResultVideo = {
+    name: 'ResultVideo',
+    template:
+      '<div class="mock-result-video" data-testid="result-video"></div>',
+    props: ['result']
+  }
+
+  const mockResultAudio = {
+    name: 'ResultAudio',
+    template:
+      '<div class="mock-result-audio" data-testid="result-audio"></div>',
+    props: ['result']
+  }
+
+  const mockGalleryItems: MockResultItem[] = [
+    {
+      filename: 'image1.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '123' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image1.jpg',
+      id: '1'
+    },
+    {
+      filename: 'image2.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '456' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image2.jpg',
+      id: '2'
+    },
+    {
+      filename: 'image3.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '789' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image3.jpg',
+      id: '3'
+    }
+  ]
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.restoreAllMocks()
+  })
+
+  const mountGallery = (props = {}) => {
+    return mount(MediaLightbox, {
+      global: {
+        plugins: [i18n],
+        components: {
+          ComfyImage: mockComfyImage,
+          ResultVideo: mockResultVideo,
+          ResultAudio: mockResultAudio
+        },
+        stubs: {
+          teleport: true
+        }
+      },
+      props: {
+        allGalleryItems: mockGalleryItems as ResultItemImpl[],
+        activeIndex: 0,
+        ...props
+      },
+      attachTo: document.getElementById('app') || undefined
+    })
+  }
+
+  it('renders overlay with role="dialog" and aria-modal', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    const dialog = wrapper.find('[role="dialog"]')
+    expect(dialog.exists()).toBe(true)
+    expect(dialog.attributes('aria-modal')).toBe('true')
+  })
+
+  it('shows navigation buttons when multiple items', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(true)
+  })
+
+  it('hides navigation buttons for single item', async () => {
+    const wrapper = mountGallery({
+      allGalleryItems: [mockGalleryItems[0]] as ResultItemImpl[]
+    })
+    await nextTick()
+
+    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(false)
+    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(false)
+  })
+
+  it('shows gallery when activeIndex changes from -1', async () => {
+    const wrapper = mountGallery({ activeIndex: -1 })
+
+    expect(wrapper.find('[data-mask]').exists()).toBe(false)
+
+    await wrapper.setProps({ activeIndex: 0 })
+    await nextTick()
+
+    expect(wrapper.find('[data-mask]').exists()).toBe(true)
+  })
+
+  it('emits update:activeIndex with -1 when close button clicked', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    await wrapper.find('[aria-label="Close"]').trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+  })
+
+  describe('keyboard navigation', () => {
+    it('navigates to next item on ArrowRight', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowRight' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([1])
+    })
+
+    it('navigates to previous item on ArrowLeft', async () => {
+      const wrapper = mountGallery({ activeIndex: 1 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([0])
+    })
+
+    it('wraps to last item on ArrowLeft from first', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([2])
+    })
+
+    it('closes gallery on Escape', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+    })
+  })
+})
--- a/src/components/sidebar/tabs/queue/MediaLightbox.vue
+++ b/src/components/sidebar/tabs/queue/MediaLightbox.vue
@@ -0,0 +1,149 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="galleryVisible"
+      ref="dialogRef"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="$t('g.gallery')"
+      tabindex="-1"
+      class="fixed inset-0 z-9999 flex items-center justify-center bg-black/90 outline-none"
+      data-mask
+      @mousedown="onMaskMouseDown"
+      @mouseup="onMaskMouseUp"
+      @keydown.stop="handleKeyDown"
+    >
+      <!-- Close Button -->
+      <Button
+        variant="secondary"
+        size="icon-lg"
+        class="absolute top-4 right-4 z-10 rounded-full"
+        :aria-label="$t('g.close')"
+        @click="close"
+      >
+        <i class="icon-[lucide--x] size-5" />
+      </Button>
+
+      <!-- Previous Button -->
+      <Button
+        v-if="hasMultiple"
+        variant="secondary"
+        size="icon-lg"
+        class="fixed top-1/2 left-4 z-10 -translate-y-1/2 rounded-full"
+        :aria-label="$t('g.previous')"
+        @click="navigateImage(-1)"
+      >
+        <i class="icon-[lucide--chevron-left] size-6" />
+      </Button>
+
+      <!-- Content -->
+      <div class="flex max-h-full max-w-full items-center justify-center">
+        <template v-if="activeItem">
+          <ComfyImage
+            v-if="activeItem.isImage"
+            :key="activeItem.url"
+            :src="activeItem.url"
+            :contain="false"
+            :alt="activeItem.filename"
+            class="size-auto max-h-[90vh] max-w-[90vw] object-contain"
+          />
+          <ResultVideo v-else-if="activeItem.isVideo" :result="activeItem" />
+          <ResultAudio v-else-if="activeItem.isAudio" :result="activeItem" />
+        </template>
+      </div>
+
+      <!-- Next Button -->
+      <Button
+        v-if="hasMultiple"
+        variant="secondary"
+        size="icon-lg"
+        class="fixed top-1/2 right-4 z-10 -translate-y-1/2 rounded-full"
+        :aria-label="$t('g.next')"
+        @click="navigateImage(1)"
+      >
+        <i class="icon-[lucide--chevron-right] size-6" />
+      </Button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import ComfyImage from '@/components/common/ComfyImage.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+import ResultAudio from './ResultAudio.vue'
+import ResultVideo from './ResultVideo.vue'
+
+const emit = defineEmits<{
+  (e: 'update:activeIndex', value: number): void
+}>()
+
+const props = defineProps<{
+  allGalleryItems: ResultItemImpl[]
+  activeIndex: number
+}>()
+
+const galleryVisible = ref(false)
+const dialogRef = ref<HTMLElement>()
+let previouslyFocusedElement: HTMLElement | null = null
+const hasMultiple = computed(() => props.allGalleryItems.length > 1)
+const activeItem = computed(() => props.allGalleryItems[props.activeIndex])
+
+watch(
+  () => props.activeIndex,
+  (index) => {
+    galleryVisible.value = index !== -1
+    if (index !== -1) {
+      previouslyFocusedElement = document.activeElement as HTMLElement | null
+      void nextTick(() => dialogRef.value?.focus())
+    }
+  },
+  { immediate: true }
+)
+
+function close() {
+  galleryVisible.value = false
+  emit('update:activeIndex', -1)
+  previouslyFocusedElement?.focus()
+  previouslyFocusedElement = null
+}
+
+function navigateImage(direction: number) {
+  const newIndex =
+    (props.activeIndex + direction + props.allGalleryItems.length) %
+    props.allGalleryItems.length
+  emit('update:activeIndex', newIndex)
+}
+
+let maskMouseDownTarget: EventTarget | null = null
+
+function onMaskMouseDown(event: MouseEvent) {
+  maskMouseDownTarget = event.target
+}
+
+function onMaskMouseUp(event: MouseEvent) {
+  if (
+    maskMouseDownTarget === event.target &&
+    (event.target as HTMLElement)?.hasAttribute('data-mask')
+  ) {
+    close()
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const actions: Record<string, () => void> = {
+    ArrowLeft: () => navigateImage(-1),
+    ArrowRight: () => navigateImage(1),
+    Escape: () => close()
+  }
+
+  const action = actions[event.key]
+  if (action) {
+    event.preventDefault()
+    action()
+  }
+}
+</script>
--- a/src/components/sidebar/tabs/queue/ResultGallery.test.ts
+++ b/src/components/sidebar/tabs/queue/ResultGallery.test.ts
@@ -1,184 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Galleria from 'primevue/galleria'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createApp, nextTick } from 'vue'
-
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultGallery from './ResultGallery.vue'
-
-type MockResultItem = Partial<ResultItemImpl> & {
-  filename: string
-  subfolder: string
-  type: string
-  nodeId: NodeId
-  mediaType: string
-  id?: string
-  url?: string
-  isImage?: boolean
-  isVideo?: boolean
-}
-
-describe('ResultGallery', () => {
-  // Mock ComfyImage and ResultVideo components
-  const mockComfyImage = {
-    name: 'ComfyImage',
-    template: '<div class="mock-comfy-image" data-testid="comfy-image"></div>',
-    props: ['src', 'contain', 'alt']
-  }
-
-  const mockResultVideo = {
-    name: 'ResultVideo',
-    template:
-      '<div class="mock-result-video" data-testid="result-video"></div>',
-    props: ['result']
-  }
-
-  // Sample gallery items - using mock instances with only required properties
-  const mockGalleryItems: MockResultItem[] = [
-    {
-      filename: 'image1.jpg',
-      subfolder: 'outputs',
-      type: 'output',
-      nodeId: '123' as NodeId,
-      mediaType: 'images',
-      isImage: true,
-      isVideo: false,
-      url: 'image1.jpg',
-      id: '1'
-    },
-    {
-      filename: 'image2.jpg',
-      subfolder: 'outputs',
-      type: 'output',
-      nodeId: '456' as NodeId,
-      mediaType: 'images',
-      isImage: true,
-      isVideo: false,
-      url: 'image2.jpg',
-      id: '2'
-    }
-  ]
-
-  beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-
-    // Create mock elements for Galleria to find
-    document.body.innerHTML = `
-      <div id="app"></div>
-    `
-  })
-
-  afterEach(() => {
-    // Clean up any elements added to body
-    document.body.innerHTML = ''
-    vi.restoreAllMocks()
-  })
-
-  const mountGallery = (props = {}) => {
-    return mount(ResultGallery, {
-      global: {
-        plugins: [PrimeVue],
-        components: {
-          Galleria,
-          ComfyImage: mockComfyImage,
-          ResultVideo: mockResultVideo
-        },
-        stubs: {
-          teleport: true
-        }
-      },
-      props: {
-        allGalleryItems: mockGalleryItems as ResultItemImpl[],
-        activeIndex: 0,
-        ...props
-      },
-      attachTo: document.getElementById('app') || undefined
-    })
-  }
-
-  it('renders Galleria component with correct props', async () => {
-    const wrapper = mountGallery()
-
-    await nextTick() // Wait for component to mount
-
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-    expect(galleria.props('value')).toEqual(mockGalleryItems)
-    expect(galleria.props('showIndicators')).toBe(false)
-    expect(galleria.props('showItemNavigators')).toBe(true)
-    expect(galleria.props('fullScreen')).toBe(true)
-  })
-
-  it('shows gallery when activeIndex changes from -1', async () => {
-    const wrapper = mountGallery({ activeIndex: -1 })
-
-    // Initially galleryVisible should be false
-    type GalleryVM = typeof wrapper.vm & {
-      galleryVisible: boolean
-    }
-    const vm = wrapper.vm as GalleryVM
-    expect(vm.galleryVisible).toBe(false)
-
-    // Change activeIndex
-    await wrapper.setProps({ activeIndex: 0 })
-    await nextTick()
-
-    // galleryVisible should become true
-    expect(vm.galleryVisible).toBe(true)
-  })
-
-  it('should render the component properly', () => {
-    // This is a meta-test to confirm the component mounts properly
-    const wrapper = mountGallery()
-
-    // We can't directly test the compiled CSS, but we can verify the component renders
-    expect(wrapper.exists()).toBe(true)
-
-    // Verify that the Galleria component exists and is properly mounted
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-  })
-
-  it('ensures correct configuration for mobile viewport', async () => {
-    // Mock window.matchMedia to simulate mobile viewport
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: vi.fn().mockImplementation((query) => ({
-        matches: query.includes('max-width: 768px'),
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn()
-      }))
-    })
-
-    const wrapper = mountGallery()
-    await nextTick()
-
-    // Verify mobile media query is working
-    expect(window.matchMedia('(max-width: 768px)').matches).toBe(true)
-
-    // Check if the component renders with Galleria
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-
-    // Check that our PT props for positioning work correctly
-    interface GalleriaPT {
-      prevButton?: { style?: string }
-      nextButton?: { style?: string }
-    }
-    const pt = galleria.props('pt') as GalleriaPT
-    expect(pt?.prevButton?.style).toContain('position: fixed')
-    expect(pt?.nextButton?.style).toContain('position: fixed')
-  })
-
-  // Additional tests for interaction could be added once we can reliably
-  // test Galleria component in fullscreen mode
-})
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -1,151 +0,0 @@
-<template>
-  <Galleria
-    v-model:visible="galleryVisible"
-    :active-index="activeIndex"
-    :value="allGalleryItems"
-    :show-indicators="false"
-    change-item-on-indicator-hover
-    :show-item-navigators="hasMultiple"
-    full-screen
-    :circular="hasMultiple"
-    :show-thumbnails="false"
-    :pt="{
-      mask: {
-        onMousedown: onMaskMouseDown,
-        onMouseup: onMaskMouseUp,
-        'data-mask': true
-      },
-      prevButton: {
-        style: 'position: fixed !important'
-      },
-      nextButton: {
-        style: 'position: fixed !important'
-      }
-    }"
-    @update:visible="handleVisibilityChange"
-    @update:active-index="handleActiveIndexChange"
-  >
-    <template #item="{ item }">
-      <ComfyImage
-        v-if="item.isImage"
-        :key="item.url"
-        :src="item.url"
-        :contain="false"
-        :alt="item.filename"
-        class="size-auto max-h-[90vh] max-w-[90vw] object-contain"
-      />
-      <ResultVideo v-else-if="item.isVideo" :result="item" />
-      <ResultAudio v-else-if="item.isAudio" :result="item" />
-    </template>
-  </Galleria>
-</template>
-
-<script setup lang="ts">
-import Galleria from 'primevue/galleria'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import ComfyImage from '@/components/common/ComfyImage.vue'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultAudio from './ResultAudio.vue'
-import ResultVideo from './ResultVideo.vue'
-
-const galleryVisible = ref(false)
-
-const emit = defineEmits<{
-  (e: 'update:activeIndex', value: number): void
-}>()
-
-const props = defineProps<{
-  allGalleryItems: ResultItemImpl[]
-  activeIndex: number
-}>()
-
-const hasMultiple = computed(() => props.allGalleryItems.length > 1)
-
-let maskMouseDownTarget: EventTarget | null = null
-
-const onMaskMouseDown = (event: MouseEvent) => {
-  maskMouseDownTarget = event.target
-}
-
-const onMaskMouseUp = (event: MouseEvent) => {
-  const maskEl = document.querySelector('[data-mask]')
-  if (
-    galleryVisible.value &&
-    maskMouseDownTarget === event.target &&
-    maskMouseDownTarget === maskEl
-  ) {
-    galleryVisible.value = false
-    handleVisibilityChange(false)
-  }
-}
-
-watch(
-  () => props.activeIndex,
-  (index) => {
-    if (index !== -1) {
-      galleryVisible.value = true
-    }
-  }
-)
-
-const handleVisibilityChange = (visible: boolean) => {
-  if (!visible) {
-    emit('update:activeIndex', -1)
-  }
-}
-
-const handleActiveIndexChange = (index: number) => {
-  emit('update:activeIndex', index)
-}
-
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (!galleryVisible.value) return
-
-  switch (event.key) {
-    case 'ArrowLeft':
-      navigateImage(-1)
-      break
-    case 'ArrowRight':
-      navigateImage(1)
-      break
-    case 'Escape':
-      galleryVisible.value = false
-      handleVisibilityChange(false)
-      break
-  }
-}
-
-const navigateImage = (direction: number) => {
-  const newIndex =
-    (props.activeIndex + direction + props.allGalleryItems.length) %
-    props.allGalleryItems.length
-  emit('update:activeIndex', newIndex)
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown)
-})
-</script>
-
-<style>
-/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
-cannot use scoped style here. */
-.p-galleria-close-button {
-  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
-  z-index: 1;
-}
-
-/* Mobile/tablet specific fixes */
-@media screen and (max-width: 768px) {
-  .p-galleria-prev-button,
-  .p-galleria-next-button {
-    z-index: 2;
-  }
-}
-</style>
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -28,8 +28,9 @@ export const buttonVariants = cva({
      sm: 'h-6 rounded-sm px-2 py-1 text-xs',
      md: 'h-8 rounded-lg p-2 text-xs',
      lg: 'h-10 rounded-lg px-4 py-2 text-sm',
-      icon: 'size-8',
      'icon-sm': 'size-5 p-0',
+      icon: 'size-8',
+      'icon-lg': 'size-10',
      unset: ''
    }
  },
@@ -54,8 +55,13 @@ const variants = [
  'overlay-white',
  'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>
-const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
-  ButtonVariants['size']
->
+const sizes = [
+  'sm',
+  'md',
+  'lg',
+  'icon-sm',
+  'icon',
+  'icon-lg'
+] as const satisfies Array<ButtonVariants['size']>

 export const FOR_STORIES = { variants, sizes } as const
--- a/src/composables/maskeditor/useMaskEditorLoader.ts
+++ b/src/composables/maskeditor/useMaskEditorLoader.ts
@@ -5,6 +5,19 @@ import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { parseImageWidgetValue } from '@/utils/imageUtil'
+
+export function extractWidgetStringValue(value: unknown): string | undefined {
+  if (typeof value === 'string') return value
+  if (
+    value &&
+    typeof value === 'object' &&
+    'filename' in value &&
+    typeof value.filename === 'string'
+  )
+    return value.filename
+  return undefined
+}

 // Private image utility functions
 interface ImageLayerFilenames {
@@ -84,62 +97,23 @@ export function useMaskEditorLoader() {

      let nodeImageRef = parseImageRef(nodeImageUrl)

-      let widgetFilename: string | undefined
-      if (node.widgets) {
-        const imageWidget = node.widgets.find((w) => w.name === 'image')
-        if (imageWidget) {
-          if (typeof imageWidget.value === 'string') {
-            widgetFilename = imageWidget.value
-          } else if (
-            typeof imageWidget.value === 'object' &&
-            imageWidget.value &&
-            'filename' in imageWidget.value &&
-            typeof imageWidget.value.filename === 'string'
-          ) {
-            widgetFilename = imageWidget.value.filename
-          }
-        }
-      }
+      const imageWidget = node.widgets?.find((w) => w.name === 'image')
+      const widgetFilename = imageWidget
+        ? extractWidgetStringValue(imageWidget.value)
+        : undefined

      // If we have a widget filename, we should prioritize it over the node image
      // because the node image might be stale (e.g. from a previous save)
      // while the widget value reflects the current selection.
      // Skip internal reference formats (e.g. "$35-0" used by some plugins like Impact-Pack)
      if (widgetFilename && !widgetFilename.startsWith('$')) {
-        try {
-          // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
-          let filename = widgetFilename
-          let subfolder: string | undefined = undefined
-          let type: string | undefined = 'input' // Default to input for widget values
-
-          // Check for type in brackets at the end
-          const typeMatch = filename.match(/ \[([^\]]+)\]$/)
-          if (typeMatch) {
-            type = typeMatch[1]
-            filename = filename.substring(
-              0,
-              filename.length - typeMatch[0].length
-            )
-          }
-
-          // Check for subfolder (forward slash separator)
-          const lastSlashIndex = filename.lastIndexOf('/')
-          if (lastSlashIndex !== -1) {
-            subfolder = filename.substring(0, lastSlashIndex)
-            filename = filename.substring(lastSlashIndex + 1)
-          }
-
-          nodeImageRef = {
-            filename,
-            type,
-            subfolder
-          }
-
-          // We also need to update nodeImageUrl to match this new ref so subsequent logic works
-          nodeImageUrl = mkFileUrl({ ref: nodeImageRef })
-        } catch (e) {
-          console.warn('Failed to parse widget filename as ref', e)
+        const parsed = parseImageWidgetValue(widgetFilename)
+        nodeImageRef = {
+          filename: parsed.filename,
+          type: parsed.type || 'input',
+          subfolder: parsed.subfolder || undefined
        }
+        nodeImageUrl = mkFileUrl({ ref: nodeImageRef })
      }

      const fileToQuery = widgetFilename || nodeImageRef.filename
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -136,9 +136,11 @@
    "enableOrDisablePack": "Enable or disable pack",
    "openManager": "Open Manager",
    "manageExtensions": "Manage extensions",
+    "gallery": "Gallery",
    "graphNavigation": "Graph navigation",
    "dropYourFileOr": "Drop your file or",
    "back": "Back",
+    "previous": "Previous",
    "next": "Next",
    "submit": "Submit",
    "install": "Install",
@@ -1156,6 +1158,7 @@
  },
  "maskEditor": {
    "title": "Mask Editor",
+    "openMaskEditor": "Open in Mask Editor",
    "invert": "Invert",
    "clear": "Clear",
    "undo": "Undo",
--- a/src/platform/assets/components/MediaAssetCard.stories.ts
+++ b/src/platform/assets/components/MediaAssetCard.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'

-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
+import { getMediaTypeFromFilename } from '@/utils/formatUtil'

 import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
 import type { AssetItem } from '../schemas/assetSchema'
@@ -10,16 +11,27 @@ const meta: Meta<typeof MediaAssetCard> = {
  title: 'Platform/Assets/MediaAssetCard',
  component: MediaAssetCard,
  decorators: [
-    () => ({
-      components: { ResultGallery },
+    (_story, context) => ({
+      components: { MediaLightbox },
      setup() {
        const galleryStore = useMediaAssetGalleryStore()
+        const args = context.args as {
+          onZoom?: (asset: AssetItem) => void
+        }
+        args.onZoom = (asset: AssetItem) => {
+          const kind = getMediaTypeFromFilename(asset.name)
+          galleryStore.openSingle({
+            ...asset,
+            kind,
+            src: asset.preview_url || ''
+          })
+        }
        return { galleryStore }
      },
      template: `
        <div>
          <story />
-          <ResultGallery 
+          <MediaLightbox
            v-model:active-index="galleryStore.activeIndex"
            :all-gallery-items="galleryStore.items"
          />
--- a/src/platform/assets/components/MediaLightbox.stories.ts
+++ b/src/platform/assets/components/MediaLightbox.stories.ts
@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+type MockItem = Pick<
+  ResultItemImpl,
+  'filename' | 'url' | 'isImage' | 'isVideo' | 'isAudio'
+>
+
+const SAMPLE_IMAGES: MockItem[] = [
+  {
+    filename: 'landscape.jpg',
+    url: 'https://i.imgur.com/OB0y6MR.jpg',
+    isImage: true,
+    isVideo: false,
+    isAudio: false
+  },
+  {
+    filename: 'portrait.jpg',
+    url: 'https://i.imgur.com/CzXTtJV.jpg',
+    isImage: true,
+    isVideo: false,
+    isAudio: false
+  },
+  {
+    filename: 'nature.jpg',
+    url: 'https://farm9.staticflickr.com/8505/8441256181_4e98d8bff5_z_d.jpg',
+    isImage: true,
+    isVideo: false,
+    isAudio: false
+  }
+]
+
+const meta: Meta<typeof MediaLightbox> = {
+  title: 'Platform/Assets/MediaLightbox',
+  component: MediaLightbox
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const MultipleImages: Story = {
+  render: () => ({
+    components: { MediaLightbox },
+    setup() {
+      const activeIndex = ref(0)
+      const items = SAMPLE_IMAGES as ResultItemImpl[]
+      return { activeIndex, items }
+    },
+    template: `
+      <div>
+        <p class="mb-4 text-sm text-muted-foreground">
+          Use arrow keys to navigate, Escape to close. Click backdrop to close.
+        </p>
+        <div class="flex gap-2">
+          <button
+            v-for="(item, i) in items"
+            :key="i"
+            class="rounded border px-3 py-1 text-sm"
+            @click="activeIndex = i"
+          >
+            Open {{ item.filename }}
+          </button>
+        </div>
+        <MediaLightbox
+          v-model:active-index="activeIndex"
+          :all-gallery-items="items"
+        />
+      </div>
+    `
+  })
+}
+
+export const SingleImage: Story = {
+  render: () => ({
+    components: { MediaLightbox },
+    setup() {
+      const activeIndex = ref(-1)
+      const items = [SAMPLE_IMAGES[0]] as ResultItemImpl[]
+      return { activeIndex, items }
+    },
+    template: `
+      <div>
+        <p class="mb-4 text-sm text-muted-foreground">
+          Single image — no navigation buttons shown.
+        </p>
+        <button
+          class="rounded border px-3 py-1 text-sm"
+          @click="activeIndex = 0"
+        >
+          Open lightbox
+        </button>
+        <MediaLightbox
+          v-model:active-index="activeIndex"
+          :all-gallery-items="items"
+        />
+      </div>
+    `
+  })
+}
+
+export const Closed: Story = {
+  render: () => ({
+    components: { MediaLightbox },
+    setup() {
+      const activeIndex = ref(-1)
+      const items = SAMPLE_IMAGES as ResultItemImpl[]
+      return { activeIndex, items }
+    },
+    template: `
+      <div>
+        <p class="mb-4 text-sm text-muted-foreground">
+          Lightbox is closed (activeIndex = -1). Click a button to open.
+        </p>
+        <div class="flex gap-2">
+          <button
+            v-for="(item, i) in items"
+            :key="i"
+            class="rounded border px-3 py-1 text-sm"
+            @click="activeIndex = i"
+          >
+            {{ item.filename }}
+          </button>
+        </div>
+        <MediaLightbox
+          v-model:active-index="activeIndex"
+          :all-gallery-items="items"
+        />
+      </div>
+    `
+  })
+}
--- a/src/platform/keybindings/defaults.ts
+++ b/src/platform/keybindings/defaults.ts
@@ -56,9 +56,8 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
  },
  {
    combo: {
-      ctrl: true,
-      shift: true,
-      key: 'a'
+      alt: true,
+      key: 'm'
    },
    commandId: 'Comfy.ToggleLinear'
  },
@@ -179,7 +178,8 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
  {
    combo: {
      key: 'm',
-      alt: true
+      alt: true,
+      shift: true
    },
    commandId: 'Comfy.Canvas.ToggleMinimap'
  },
--- a/src/platform/missingModel/components/MissingModelRow.vue
+++ b/src/platform/missingModel/components/MissingModelRow.vue
@@ -35,7 +35,7 @@
        variant="secondary"
        size="sm"
        class="h-8 shrink-0 rounded-lg text-sm"
-        @click="copyToClipboard(model.representative.url!)"
+        @click="copyToClipboard(toBrowsableUrl(model.representative.url!))"
      >
        {{ t('rightSidePanel.missingModels.copyUrl') }}
      </Button>
@@ -201,7 +201,8 @@ import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import {
  downloadModel,
-  isModelDownloadable
+  isModelDownloadable,
+  toBrowsableUrl
 } from '@/platform/missingModel/missingModelDownload'
 import { formatSize } from '@/utils/formatUtil'

--- a/src/platform/missingModel/missingModelDownload.test.ts
+++ b/src/platform/missingModel/missingModelDownload.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi, beforeEach } from 'vitest'

-import { fetchModelMetadata } from './missingModelDownload'
+import { fetchModelMetadata, toBrowsableUrl } from './missingModelDownload'

 const fetchMock = vi.fn()
 vi.stubGlobal('fetch', fetchMock)
@@ -140,3 +140,41 @@ describe('fetchModelMetadata', () => {
    expect(fetchMock).toHaveBeenCalledTimes(1)
  })
 })
+
+describe('toBrowsableUrl', () => {
+  it('replaces /resolve/ with /blob/ in HuggingFace URLs', () => {
+    expect(
+      toBrowsableUrl(
+        'https://huggingface.co/org/model/resolve/main/file.safetensors'
+      )
+    ).toBe('https://huggingface.co/org/model/blob/main/file.safetensors')
+  })
+
+  it('returns non-HuggingFace URLs unchanged', () => {
+    const url =
+      'https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth'
+    expect(toBrowsableUrl(url)).toBe(url)
+  })
+
+  it('preserves query params in HuggingFace URLs', () => {
+    expect(
+      toBrowsableUrl(
+        'https://huggingface.co/bfl/FLUX.1/resolve/main/model.safetensors?download=true'
+      )
+    ).toBe(
+      'https://huggingface.co/bfl/FLUX.1/blob/main/model.safetensors?download=true'
+    )
+  })
+
+  it('converts Civitai api/download URL to model page', () => {
+    expect(
+      toBrowsableUrl('https://civitai.com/api/download/models/12345')
+    ).toBe('https://civitai.com/models/12345')
+  })
+
+  it('converts Civitai api/v1 URL to model page', () => {
+    expect(toBrowsableUrl('https://civitai.com/api/v1/models/12345')).toBe(
+      'https://civitai.com/models/12345'
+    )
+  })
+})
--- a/src/platform/missingModel/missingModelDownload.ts
+++ b/src/platform/missingModel/missingModelDownload.ts
@@ -31,6 +31,21 @@ interface ModelWithUrl {
  directory: string
 }

+/**
+ * Converts a model download URL to a browsable page URL.
+ * - HuggingFace: `/resolve/` → `/blob/` (file page with model info)
+ * - Civitai: strips `/api/download` or `/api/v1` prefix (model page)
+ */
+export function toBrowsableUrl(url: string): string {
+  if (isCivitaiModelUrl(url)) {
+    return url.replace('/api/download/', '/').replace('/api/v1/', '/')
+  }
+  if (url.includes('huggingface.co')) {
+    return url.replace('/resolve/', '/blob/')
+  }
+  return url
+}
+
 export function isModelDownloadable(model: ModelWithUrl): boolean {
  if (WHITE_LISTED_URLS.has(model.url)) return true
  if (!ALLOWED_SOURCES.some((source) => model.url.startsWith(source)))
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -576,6 +576,19 @@ export const CORE_SETTINGS: SettingParams[] = [
    migrateDeprecatedValue: (value: unknown) =>
      value === 'Integrated' ? 'Default' : value
  },
+  {
+    id: 'Comfy.Appearance.DisableAnimations',
+    category: ['Appearance', 'General'],
+    name: 'Disable animations',
+    type: 'boolean',
+    defaultValue: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    tooltip:
+      'Turns off most CSS animations and transitions. Speeds up inference when the display GPU is also used for generation.',
+    onChange: (value: unknown) => {
+      document.body.classList.toggle('disable-animations', !!value)
+    },
+    versionAdded: '1.43.0'
+  },
  {
    id: 'Comfy.UseNewMenu',
    category: ['Comfy', 'Menu', 'UseNewMenu'],
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { useDropZone } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'

 import { cn } from '@/utils/tailwindUtil'

+const { t } = useI18n()
+
 const {
  onDragOver,
  onDragDrop,
@@ -17,6 +20,7 @@ const {
    imageUrl?: string
    label?: string
    onClick?: (e: MouseEvent) => void
+    onMaskEdit?: () => void
  }
  forceHovered?: boolean
 }>()
@@ -91,7 +95,7 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
      data-slot="drop-zone-indicator"
      :class="
        cn(
-          'm-3 block h-42 min-h-32 w-[calc(100%-1.5rem)] resize-y appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
+          'group/dropzone m-3 block h-42 min-h-32 w-[calc(100%-1.5rem)] resize-y appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
          dropIndicator?.onClick && 'cursor-pointer'
        )
      "
@@ -108,12 +112,26 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
          )
        "
      >
-        <img
+        <div
          v-if="dropIndicator?.imageUrl"
-          class="max-h-full max-w-full rounded-md object-contain"
-          :alt="dropIndicator?.label ?? ''"
-          :src="dropIndicator?.imageUrl"
-        />
+          class="relative max-h-full max-w-full"
+        >
+          <img
+            class="max-h-full max-w-full rounded-md object-contain"
+            :alt="dropIndicator?.label ?? ''"
+            :src="dropIndicator?.imageUrl"
+          />
+          <button
+            v-if="dropIndicator?.onMaskEdit"
+            type="button"
+            :aria-label="t('maskEditor.openMaskEditor')"
+            :title="t('maskEditor.openMaskEditor')"
+            class="absolute top-2 right-2 flex cursor-pointer items-center justify-center rounded-lg bg-base-foreground p-2 text-base-background opacity-0 transition-colors duration-200 group-hover/dropzone:opacity-100 hover:bg-base-foreground/90"
+            @click.stop="dropIndicator?.onMaskEdit?.()"
+          >
+            <i class="icon-[comfy--mask] size-4" />
+          </button>
+        </div>
        <template v-else>
          <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
          <i
--- a/src/renderer/extensions/linearMode/Preview3d.test.ts
+++ b/src/renderer/extensions/linearMode/Preview3d.test.ts
@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+const initializeStandaloneViewer = vi.fn()
+const cleanup = vi.fn()
+
+vi.mock('@/composables/useLoad3dViewer', () => ({
+  useLoad3dViewer: () => ({
+    initializeStandaloneViewer,
+    cleanup,
+    handleMouseEnter: vi.fn(),
+    handleMouseLeave: vi.fn(),
+    handleResize: vi.fn(),
+    handleBackgroundImageUpdate: vi.fn(),
+    exportModel: vi.fn(),
+    handleSeek: vi.fn(),
+    isSplatModel: false,
+    isPlyModel: false,
+    hasSkeleton: false,
+    animations: [],
+    playing: false,
+    selectedSpeed: 1,
+    selectedAnimation: 0,
+    animationProgress: 0,
+    animationDuration: 0
+  })
+}))
+
+vi.mock('@/components/load3d/Load3DControls.vue', () => ({
+  default: { template: '<div />' }
+}))
+
+vi.mock('@/components/load3d/controls/AnimationControls.vue', () => ({
+  default: { template: '<div />' }
+}))
+
+describe('Preview3d', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  async function mountPreview3d(
+    modelUrl = 'http://localhost/view?filename=model.glb'
+  ) {
+    const wrapper = mount(
+      (await import('@/renderer/extensions/linearMode/Preview3d.vue')).default,
+      { props: { modelUrl } }
+    )
+    await nextTick()
+    await nextTick()
+    return wrapper
+  }
+
+  it('initializes the viewer on mount', async () => {
+    const wrapper = await mountPreview3d()
+
+    expect(initializeStandaloneViewer).toHaveBeenCalledOnce()
+    expect(initializeStandaloneViewer).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      'http://localhost/view?filename=model.glb'
+    )
+
+    wrapper.unmount()
+  })
+
+  it('cleans up the viewer on unmount', async () => {
+    const wrapper = await mountPreview3d()
+    cleanup.mockClear()
+
+    wrapper.unmount()
+
+    expect(cleanup).toHaveBeenCalledOnce()
+  })
+
+  it('reinitializes correctly after unmount and remount', async () => {
+    const url = 'http://localhost/view?filename=model.glb'
+
+    const wrapper1 = await mountPreview3d(url)
+    expect(initializeStandaloneViewer).toHaveBeenCalledTimes(1)
+
+    cleanup.mockClear()
+    wrapper1.unmount()
+    expect(cleanup).toHaveBeenCalledOnce()
+
+    vi.clearAllMocks()
+
+    const wrapper2 = await mountPreview3d(url)
+    expect(initializeStandaloneViewer).toHaveBeenCalledTimes(1)
+    expect(initializeStandaloneViewer).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      url
+    )
+
+    cleanup.mockClear()
+    wrapper2.unmount()
+    expect(cleanup).toHaveBeenCalledOnce()
+  })
+
+  it('reinitializes when modelUrl changes on existing instance', async () => {
+    const wrapper = await mountPreview3d(
+      'http://localhost/view?filename=model-a.glb'
+    )
+    expect(initializeStandaloneViewer).toHaveBeenCalledOnce()
+
+    vi.clearAllMocks()
+
+    await wrapper.setProps({
+      modelUrl: 'http://localhost/view?filename=model-b.glb'
+    })
+    await nextTick()
+    await nextTick()
+
+    expect(cleanup).toHaveBeenCalledOnce()
+    expect(initializeStandaloneViewer).toHaveBeenCalledOnce()
+    expect(initializeStandaloneViewer).toHaveBeenCalledWith(
+      expect.any(HTMLElement),
+      'http://localhost/view?filename=model-b.glb'
+    )
+
+    wrapper.unmount()
+  })
+})
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -13,11 +13,16 @@ const containerRef = useTemplateRef('containerRef')

 const viewer = ref(useLoad3dViewer())

-watch([containerRef, () => modelUrl], async () => {
-  if (!containerRef.value || !modelUrl) return
+watch(
+  [containerRef, () => modelUrl],
+  async () => {
+    if (!containerRef.value || !modelUrl) return

-  await viewer.value.initializeStandaloneViewer(containerRef.value, modelUrl)
-})
+    viewer.value.cleanup()
+    await viewer.value.initializeStandaloneViewer(containerRef.value, modelUrl)
+  },
+  { flush: 'post' }
+)

 onUnmounted(() => {
  viewer.value.cleanup()
--- a/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts
+++ b/src/renderer/extensions/linearMode/flattenNodeOutput.test.ts
@@ -82,4 +82,71 @@ describe(flattenNodeOutput, () => {
    const result = flattenNodeOutput(['1', output])
    expect(result).toEqual([])
  })
+
+  it('flattens non-standard output keys with ResultItem-like values', () => {
+    const output = makeOutput({
+      a_images: [{ filename: 'before.png', subfolder: '', type: 'output' }],
+      b_images: [{ filename: 'after.png', subfolder: '', type: 'output' }]
+    } as unknown as Partial<NodeExecutionOutput>)
+
+    const result = flattenNodeOutput(['10', output])
+
+    expect(result).toHaveLength(2)
+    expect(result.map((r) => r.filename)).toContain('before.png')
+    expect(result.map((r) => r.filename)).toContain('after.png')
+  })
+
+  it('excludes animated key', () => {
+    const output = makeOutput({
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      animated: [true]
+    })
+
+    const result = flattenNodeOutput(['1', output])
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('images')
+  })
+
+  it('excludes non-ResultItem array items', () => {
+    const output = {
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      custom_data: [{ randomKey: 123 }]
+    } as unknown as NodeExecutionOutput
+
+    const result = flattenNodeOutput(['1', output])
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('images')
+  })
+
+  it('accepts items with filename but no subfolder', () => {
+    const output = {
+      images: [
+        { filename: 'valid.png', subfolder: '', type: 'output' },
+        { filename: 'no-subfolder.png' }
+      ]
+    } as unknown as NodeExecutionOutput
+
+    const result = flattenNodeOutput(['1', output])
+
+    expect(result).toHaveLength(2)
+    expect(result[0].filename).toBe('valid.png')
+    expect(result[1].filename).toBe('no-subfolder.png')
+    expect(result[1].subfolder).toBe('')
+  })
+
+  it('excludes items missing filename', () => {
+    const output = {
+      images: [
+        { filename: 'valid.png', subfolder: '', type: 'output' },
+        { subfolder: '', type: 'output' }
+      ]
+    } as unknown as NodeExecutionOutput
+
+    const result = flattenNodeOutput(['1', output])
+
+    expect(result).toHaveLength(1)
+    expect(result[0].filename).toBe('valid.png')
+  })
 })
--- a/src/renderer/extensions/linearMode/flattenNodeOutput.ts
+++ b/src/renderer/extensions/linearMode/flattenNodeOutput.ts
@@ -1,20 +1,10 @@
-import type { NodeExecutionOutput, ResultItem } from '@/schemas/apiSchema'
-import { ResultItemImpl } from '@/stores/queueStore'
+import type { NodeExecutionOutput } from '@/schemas/apiSchema'
+import { parseNodeOutput } from '@/stores/resultItemParsing'
+import type { ResultItemImpl } from '@/stores/queueStore'

 export function flattenNodeOutput([nodeId, nodeOutput]: [
  string | number,
  NodeExecutionOutput
 ]): ResultItemImpl[] {
-  const knownOutputs: Record<string, ResultItem[]> = {}
-  if (nodeOutput.audio) knownOutputs.audio = nodeOutput.audio
-  if (nodeOutput.images) knownOutputs.images = nodeOutput.images
-  if (nodeOutput.video) knownOutputs.video = nodeOutput.video
-  if (nodeOutput.gifs) knownOutputs.gifs = nodeOutput.gifs as ResultItem[]
-  if (nodeOutput['3d']) knownOutputs['3d'] = nodeOutput['3d'] as ResultItem[]
-
-  return Object.entries(knownOutputs).flatMap(([mediaType, outputs]) =>
-    outputs.map(
-      (output) => new ResultItemImpl({ ...output, mediaType, nodeId })
-    )
-  )
+  return parseNodeOutput(nodeId, nodeOutput)
 }
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -23,6 +23,8 @@ const zResultItem = z.object({
  display_name: z.string().optional()
 })
 export type ResultItem = z.infer<typeof zResultItem>
+// Uses .passthrough() because custom nodes can output arbitrary keys.
+// See docs/adr/0007-node-execution-output-passthrough-schema.md
 const zOutputs = z
  .object({
    audio: z.array(zResultItem).optional(),
@@ -298,6 +300,7 @@ const zSettings = z.object({
  'Comfy.Canvas.BackgroundImage': z.string().optional(),
  'Comfy.ConfirmClear': z.boolean(),
  'Comfy.DevMode': z.boolean(),
+  'Comfy.Appearance.DisableAnimations': z.boolean(),
  'Comfy.UI.TabBarLayout': z.enum(['Default', 'Legacy']),
  'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
  'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
--- a/src/services/jobOutputCache.ts
+++ b/src/services/jobOutputCache.ts
@@ -11,11 +11,11 @@ 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 type { TaskOutput } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { ResultItemImpl } from '@/stores/queueStore'
 import type { TaskItemImpl } from '@/stores/queueStore'
+import { parseTaskOutput } from '@/stores/resultItemParsing'

 const MAX_TASK_CACHE_SIZE = 50
 const MAX_JOB_DETAIL_CACHE_SIZE = 50
@@ -79,65 +79,7 @@ export async function getOutputsForTask(

 function getPreviewableOutputs(outputs?: TaskOutput): ResultItemImpl[] {
  if (!outputs) return []
-  const resultItems = Object.entries(outputs).flatMap(([nodeId, nodeOutputs]) =>
-    Object.entries(nodeOutputs)
-      .filter(([mediaType, _]) => mediaType !== 'animated')
-      .flatMap(([mediaType, items]) => {
-        if (!Array.isArray(items)) {
-          return []
-        }
-
-        return items.filter(isResultItemLike).map(
-          (item) =>
-            new ResultItemImpl({
-              ...item,
-              nodeId,
-              mediaType
-            })
-        )
-      })
-  )
-
-  return ResultItemImpl.filterPreviewable(resultItems)
-}
-
-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
+  return ResultItemImpl.filterPreviewable(parseTaskOutput(outputs))
 }

 export function getPreviewableOutputsFromJobDetail(
--- a/src/stores/modelToNodeStore.test.ts
+++ b/src/stores/modelToNodeStore.test.ts
@@ -178,6 +178,71 @@ describe('useModelToNodeStore', () => {
      ).toBeUndefined()
    })

+    describe('progressive hierarchical fallback', () => {
+      it('should resolve 1-level path via exact match', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('level1', 'UNETLoader', 'key1')
+
+        const provider = modelToNodeStore.getNodeProvider('level1')
+        expect(provider?.nodeDef?.name).toBe('UNETLoader')
+      })
+
+      it('should resolve 2-level path to registered parent', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('level1', 'UNETLoader', 'key1')
+
+        const provider = modelToNodeStore.getNodeProvider('level1/child')
+        expect(provider?.nodeDef?.name).toBe('UNETLoader')
+      })
+
+      it('should resolve 3-level path to nearest registered ancestor', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('level1', 'UNETLoader', 'key1')
+        modelToNodeStore.quickRegister('level1/level2', 'VAELoader', 'key2')
+
+        // 3 levels: should match level1/level2 (nearest), not level1
+        const provider = modelToNodeStore.getNodeProvider('level1/level2/child')
+        expect(provider?.nodeDef?.name).toBe('VAELoader')
+      })
+
+      it('should resolve 4-level path to nearest registered ancestor', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('a', 'UNETLoader', 'k1')
+        modelToNodeStore.quickRegister('a/b', 'VAELoader', 'k2')
+        modelToNodeStore.quickRegister('a/b/c', 'StyleModelLoader', 'k3')
+
+        // 4 levels: should match a/b/c (nearest), not a/b or a
+        const provider = modelToNodeStore.getNodeProvider('a/b/c/d')
+        expect(provider?.nodeDef?.name).toBe('StyleModelLoader')
+      })
+
+      it('should skip intermediate unregistered levels', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('a', 'UNETLoader', 'k1')
+        // a/b is NOT registered
+
+        // 3 levels: a/b not found, falls back to a
+        const provider = modelToNodeStore.getNodeProvider('a/b/c')
+        expect(provider?.nodeDef?.name).toBe('UNETLoader')
+      })
+
+      it('should prefer exact match over any fallback', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('a', 'UNETLoader', 'k1')
+        modelToNodeStore.quickRegister('a/b/c', 'VAELoader', 'k2')
+
+        const provider = modelToNodeStore.getNodeProvider('a/b/c')
+        expect(provider?.nodeDef?.name).toBe('VAELoader')
+      })
+
+      it('should return undefined when no ancestor is registered', () => {
+        const modelToNodeStore = useModelToNodeStore()
+        modelToNodeStore.quickRegister('x', 'UNETLoader', 'k1')
+
+        expect(modelToNodeStore.getNodeProvider('y/z/w')).toBeUndefined()
+      })
+    })
+
    it('should return provider for chatterbox nodes with empty key', () => {
      const modelToNodeStore = useModelToNodeStore()
      modelToNodeStore.registerDefaults()
--- a/src/stores/modelToNodeStore.ts
+++ b/src/stores/modelToNodeStore.ts
@@ -75,8 +75,8 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {

  /**
   * Find providers for modelType with hierarchical fallback.
-   * Tries exact match first, then falls back to top-level segment (e.g., "parent/child" → "parent").
-   * Note: Only falls back one level; "a/b/c" tries "a/b/c" then "a", not "a/b".
+   * Tries exact match first, then progressively shorter parent paths.
+   * e.g., "a/b/c" tries "a/b/c" → "a/b" → "a".
   */
  function findProvidersWithFallback(
    modelType: string
@@ -88,12 +88,12 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
    const exactMatch = modelToNodeMap.value[modelType]
    if (exactMatch && exactMatch.length > 0) return exactMatch

-    const topLevel = modelType.split('/')[0]
-    if (topLevel === modelType) return undefined
-
-    const fallback = modelToNodeMap.value[topLevel]
-
-    if (fallback && fallback.length > 0) return fallback
+    const segments = modelType.split('/')
+    for (let i = segments.length - 1; i >= 1; i--) {
+      const parentPath = segments.slice(0, i).join('/')
+      const fallback = modelToNodeMap.value[parentPath]
+      if (fallback && fallback.length > 0) return fallback
+    }

    return undefined
  }
@@ -361,10 +361,11 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {

    // CogVideoX models (comfyui-cogvideoxwrapper)
    quickRegister('CogVideo/GGUF', 'DownloadAndLoadCogVideoGGUFModel', 'model')
+    // Empty key: HF-download node — don't activate asset browser for the combo widget
    quickRegister(
      'CogVideo/ControlNet',
      'DownloadAndLoadCogVideoControlNet',
-      'model'
+      ''
    )

    // DynamiCrafter models (ComfyUI-DynamiCrafterWrapper)
@@ -386,13 +387,26 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
    quickRegister('lama', 'LaMa', 'lama_model')

    // CogVideoX video generation models (comfyui-cogvideoxwrapper)
-    quickRegister('CogVideo', 'DownloadAndLoadCogVideoModel', 'model')
+    // Empty key: HF-download node — don't activate asset browser for the combo widget
+    quickRegister('CogVideo', 'DownloadAndLoadCogVideoModel', '')

    // Inpaint models (comfyui-inpaint-nodes)
    quickRegister('inpaint', 'INPAINT_LoadInpaintModel', 'model_name')

    // LayerDiffuse transparent image generation (comfyui-layerdiffuse)
    quickRegister('layer_model', 'LayeredDiffusionApply', 'config')
+
+    // LTX Video prompt enhancer models (ComfyUI-LTXTricks)
+    quickRegister(
+      'LLM/Llama-3.2-3B-Instruct',
+      'LTXVPromptEnhancerLoader',
+      'llm_name'
+    )
+    quickRegister(
+      'LLM/Florence-2-large-PromptGen-v2.0',
+      'LTXVPromptEnhancerLoader',
+      'image_captioner_name'
+    )
  }

  return {
--- a/src/stores/queueStore.test.ts
+++ b/src/stores/queueStore.test.ts
@@ -66,7 +66,7 @@ vi.mock('@/scripts/api', () => ({
 }))

 describe('TaskItemImpl', () => {
-  it('should remove animated property from outputs during construction', () => {
+  it('should exclude animated from flatOutputs', () => {
    const job = createHistoryJob(0, 'job-id')
    const taskItem = new TaskItemImpl(job, {
      'node-1': {
@@ -75,11 +75,9 @@ describe('TaskItemImpl', () => {
      }
    })

-    // Check that animated property was removed
-    expect('animated' in taskItem.outputs['node-1']).toBe(false)
-
-    expect(taskItem.outputs['node-1'].images).toBeDefined()
-    expect(taskItem.outputs['node-1'].images?.[0]?.filename).toBe('test.png')
+    expect(taskItem.flatOutputs).toHaveLength(1)
+    expect(taskItem.flatOutputs[0].filename).toBe('test.png')
+    expect(taskItem.flatOutputs[0].mediaType).toBe('images')
  })

  it('should handle outputs without animated property', () => {
@@ -202,8 +200,7 @@ describe('TaskItemImpl', () => {

    const task = new TaskItemImpl(job)

-    expect(task.flatOutputs).toHaveLength(1)
-    expect(task.flatOutputs[0].filename).toBe('')
+    expect(task.flatOutputs).toHaveLength(0)
    expect(task.previewableOutputs).toHaveLength(0)
    expect(task.previewOutput).toBeUndefined()
  })
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -1,4 +1,3 @@
-import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { computed, ref, shallowRef, toRaw, toValue } from 'vue'

@@ -16,6 +15,7 @@ import type {
 } from '@/schemas/apiSchema'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
+import { parseTaskOutput } from '@/stores/resultItemParsing'
 import type { ComfyApp } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
 import { getJobDetail } from '@/services/jobOutputCache'
@@ -256,10 +256,7 @@ export class TaskItemImpl {
            }
          }
        : {})
-    // Remove animated outputs from the outputs object
-    this.outputs = _.mapValues(effectiveOutputs, (nodeOutputs) =>
-      _.omit(nodeOutputs, 'animated')
-    )
+    this.outputs = effectiveOutputs
    this.flatOutputs = flatOutputs ?? this.calculateFlatOutputs()
  }

@@ -267,18 +264,7 @@ export class TaskItemImpl {
    if (!this.outputs) {
      return []
    }
-    return Object.entries(this.outputs).flatMap(([nodeId, nodeOutputs]) =>
-      Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
-        (items as ResultItem[]).map(
-          (item: ResultItem) =>
-            new ResultItemImpl({
-              ...item,
-              nodeId,
-              mediaType
-            })
-        )
-      )
-    )
+    return parseTaskOutput(this.outputs)
  }

  /** All outputs that support preview (images, videos, audio, 3D) */
--- a/src/stores/resultItemParsing.test.ts
+++ b/src/stores/resultItemParsing.test.ts
@@ -0,0 +1,172 @@
+import { describe, expect, it } from 'vitest'
+
+import type { NodeExecutionOutput } from '@/schemas/apiSchema'
+import { parseNodeOutput, parseTaskOutput } from '@/stores/resultItemParsing'
+
+function makeOutput(
+  overrides: Partial<NodeExecutionOutput> = {}
+): NodeExecutionOutput {
+  return { ...overrides }
+}
+
+describe(parseNodeOutput, () => {
+  it('returns empty array for output with no known media types', () => {
+    const result = parseNodeOutput('1', makeOutput({ text: 'hello' }))
+    expect(result).toEqual([])
+  })
+
+  it('flattens images into ResultItemImpl instances', () => {
+    const output = makeOutput({
+      images: [
+        { filename: 'a.png', subfolder: '', type: 'output' },
+        { filename: 'b.png', subfolder: 'sub', type: 'output' }
+      ]
+    })
+
+    const result = parseNodeOutput('42', output)
+
+    expect(result).toHaveLength(2)
+    expect(result[0].filename).toBe('a.png')
+    expect(result[0].nodeId).toBe('42')
+    expect(result[0].mediaType).toBe('images')
+    expect(result[1].filename).toBe('b.png')
+    expect(result[1].subfolder).toBe('sub')
+  })
+
+  it('flattens audio outputs', () => {
+    const output = makeOutput({
+      audio: [{ filename: 'sound.wav', subfolder: '', type: 'output' }]
+    })
+
+    const result = parseNodeOutput(7, output)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('audio')
+    expect(result[0].nodeId).toBe(7)
+  })
+
+  it('flattens multiple media types in a single output', () => {
+    const output = makeOutput({
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      video: [{ filename: 'vid.mp4', subfolder: '', type: 'output' }]
+    })
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(2)
+    const types = result.map((r) => r.mediaType)
+    expect(types).toContain('images')
+    expect(types).toContain('video')
+  })
+
+  it('handles gifs and 3d output types', () => {
+    const output = makeOutput({
+      gifs: [
+        { filename: 'anim.gif', subfolder: '', type: 'output' }
+      ] as NodeExecutionOutput['gifs'],
+      '3d': [
+        { filename: 'model.glb', subfolder: '', type: 'output' }
+      ] as NodeExecutionOutput['3d']
+    })
+
+    const result = parseNodeOutput('5', output)
+
+    expect(result).toHaveLength(2)
+    const types = result.map((r) => r.mediaType)
+    expect(types).toContain('gifs')
+    expect(types).toContain('3d')
+  })
+
+  it('ignores empty arrays', () => {
+    const output = makeOutput({ images: [], audio: [] })
+    const result = parseNodeOutput('1', output)
+    expect(result).toEqual([])
+  })
+
+  it('excludes animated key', () => {
+    const output = makeOutput({
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      animated: [true]
+    })
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('images')
+  })
+
+  it('excludes text key', () => {
+    const output = makeOutput({
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      text: 'some text output'
+    })
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('images')
+  })
+
+  it('excludes non-ResultItem array items', () => {
+    const output = {
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      custom_data: [{ randomKey: 123 }]
+    } as unknown as NodeExecutionOutput
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('images')
+  })
+
+  it('accepts items with filename but no subfolder', () => {
+    const output = {
+      images: [
+        { filename: 'valid.png', subfolder: '', type: 'output' },
+        { filename: 'no-subfolder.png' }
+      ]
+    } as unknown as NodeExecutionOutput
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(2)
+    expect(result[0].filename).toBe('valid.png')
+    expect(result[1].filename).toBe('no-subfolder.png')
+    expect(result[1].subfolder).toBe('')
+  })
+
+  it('excludes items missing filename', () => {
+    const output = {
+      images: [
+        { filename: 'valid.png', subfolder: '', type: 'output' },
+        { subfolder: '', type: 'output' }
+      ]
+    } as unknown as NodeExecutionOutput
+
+    const result = parseNodeOutput('1', output)
+
+    expect(result).toHaveLength(1)
+    expect(result[0].filename).toBe('valid.png')
+  })
+})
+
+describe(parseTaskOutput, () => {
+  it('flattens across multiple nodes', () => {
+    const taskOutput: Record<string, NodeExecutionOutput> = {
+      '1': makeOutput({
+        images: [{ filename: 'a.png', subfolder: '', type: 'output' }]
+      }),
+      '2': makeOutput({
+        audio: [{ filename: 'b.wav', subfolder: '', type: 'output' }]
+      })
+    }
+
+    const result = parseTaskOutput(taskOutput)
+
+    expect(result).toHaveLength(2)
+    expect(result[0].nodeId).toBe('1')
+    expect(result[0].filename).toBe('a.png')
+    expect(result[1].nodeId).toBe('2')
+    expect(result[1].filename).toBe('b.wav')
+  })
+})
--- a/src/stores/resultItemParsing.ts
+++ b/src/stores/resultItemParsing.ts
@@ -0,0 +1,49 @@
+import type { NodeExecutionOutput, ResultItem } from '@/schemas/apiSchema'
+import { resultItemType } from '@/schemas/apiSchema'
+import { ResultItemImpl } from '@/stores/queueStore'
+
+const METADATA_KEYS = new Set(['animated', 'text'])
+
+/**
+ * Validates that an unknown value is a well-formed ResultItem.
+ *
+ * Requires `filename` (string) since ResultItemImpl needs it for a valid URL.
+ * `subfolder` is optional here — ResultItemImpl constructor falls back to ''.
+ */
+function isResultItem(item: unknown): item is ResultItem {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) return false
+
+  const candidate = item as Record<string, unknown>
+
+  if (typeof candidate.filename !== 'string') return false
+
+  if (
+    candidate.type !== undefined &&
+    !resultItemType.safeParse(candidate.type).success
+  ) {
+    return false
+  }
+
+  return true
+}
+
+export function parseNodeOutput(
+  nodeId: string | number,
+  nodeOutput: NodeExecutionOutput
+): ResultItemImpl[] {
+  return Object.entries(nodeOutput)
+    .filter(([key, value]) => !METADATA_KEYS.has(key) && Array.isArray(value))
+    .flatMap(([mediaType, items]) =>
+      (items as unknown[])
+        .filter(isResultItem)
+        .map((item) => new ResultItemImpl({ ...item, mediaType, nodeId }))
+    )
+}
+
+export function parseTaskOutput(
+  taskOutput: Record<string, NodeExecutionOutput>
+): ResultItemImpl[] {
+  return Object.entries(taskOutput).flatMap(([nodeId, nodeOutput]) =>
+    parseNodeOutput(nodeId, nodeOutput)
+  )
+}
--- a/src/utils/imageUtil.test.ts
+++ b/src/utils/imageUtil.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+
+import { parseImageWidgetValue } from './imageUtil'
+
+describe('parseImageWidgetValue', () => {
+  it('parses a plain filename', () => {
+    expect(parseImageWidgetValue('example.png')).toEqual({
+      filename: 'example.png',
+      subfolder: '',
+      type: 'input'
+    })
+  })
+
+  it('parses filename with type suffix', () => {
+    expect(parseImageWidgetValue('example.png [output]')).toEqual({
+      filename: 'example.png',
+      subfolder: '',
+      type: 'output'
+    })
+  })
+
+  it('parses subfolder and filename', () => {
+    expect(parseImageWidgetValue('clipspace/mask-123.png')).toEqual({
+      filename: 'mask-123.png',
+      subfolder: 'clipspace',
+      type: 'input'
+    })
+  })
+
+  it('parses subfolder, filename, and type', () => {
+    expect(
+      parseImageWidgetValue(
+        'clipspace/clipspace-painted-masked-123.png [input]'
+      )
+    ).toEqual({
+      filename: 'clipspace-painted-masked-123.png',
+      subfolder: 'clipspace',
+      type: 'input'
+    })
+  })
+
+  it('parses nested subfolders', () => {
+    expect(parseImageWidgetValue('a/b/c/image.png [temp]')).toEqual({
+      filename: 'image.png',
+      subfolder: 'a/b/c',
+      type: 'temp'
+    })
+  })
+
+  it('handles empty string', () => {
+    expect(parseImageWidgetValue('')).toEqual({
+      filename: '',
+      subfolder: '',
+      type: 'input'
+    })
+  })
+})
--- a/src/utils/imageUtil.ts
+++ b/src/utils/imageUtil.ts
@@ -1,3 +1,27 @@
+/**
+ * Parses an image widget value like "subfolder/filename [type]" into its parts.
+ */
+export function parseImageWidgetValue(raw: string): {
+  filename: string
+  subfolder: string
+  type: string
+} {
+  let value = raw
+  let type = 'input'
+  const typeMatch = value.match(/ \[([^\]]+)\]$/)
+  if (typeMatch) {
+    type = typeMatch[1]
+    value = value.slice(0, -typeMatch[0].length)
+  }
+  let subfolder = ''
+  const slashIndex = value.lastIndexOf('/')
+  if (slashIndex !== -1) {
+    subfolder = value.slice(0, slashIndex)
+    value = value.slice(slashIndex + 1)
+  }
+  return { filename: value, subfolder, type }
+}
+
 export const is_all_same_aspect_ratio = (imgs: HTMLImageElement[]): boolean => {
  if (!imgs.length || imgs.length === 1) return true
Author	SHA1	Message	Date
Deep Mehta	044d4de76a	fix: progressive hierarchical fallback and HF-download node dropdowns 1. Fix findProvidersWithFallback to try all intermediate parent paths (a/b/c → a/b → a) instead of jumping to top-level only. This ensures "Use" on CogVideo/ControlNet/* models creates the correct DownloadAndLoadCogVideoControlNet node. 2. Use empty key for DownloadAndLoadCogVideoControlNet and DownloadAndLoadCogVideoModel so the asset browser doesn't hijack the combo widget — these nodes use HF repo names, not file assets. 3. Add comprehensive tests for 1-4 level nested path fallback.	2026-03-18 09:35:17 -07:00
pythongosssss	e7384ab2da	feat: App mode - update keybindings (#9794 ) ## Summary Improve app mode discoverability/usability ## Changes - What: - toggle linear rebound as alt+m - toggle minimap rebound as alt+shift+m - show keybinding for toggling mode on button - Breaking: - Toggle minimap shortcut changed from ALT+M to ALT+SHIFT+M ## Screenshots (if applicable) <img width="302" height="145" alt="image" src="https://github.com/user-attachments/assets/5f2df599-c0db-4df1-ba22-d7ee9eb6b662" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9794-feat-App-mode-update-keybindings-3216d73d3650811eac37f226b381e54a) by [Unito](https://www.unito.io)	2026-03-18 08:32:36 -07:00
pythongosssss	190bbf0ac2	feat: App mode - enable mask editor (#9876 ) ## Summary Adds the ability for users to access mask editor from app mode ## Changes - What: - add mask editor button to app mode load image - extract parseImageWidgetValue for url + test ## Screenshots (if applicable) <img width="303" height="232" alt="image" src="https://github.com/user-attachments/assets/89afffda-d049-4ef4-ba13-bf483222b27c" /> <img width="959" height="715" alt="image" src="https://github.com/user-attachments/assets/db19a327-e53b-4047-aa66-2cb6e889be1d" /> <img width="308" height="302" alt="image" src="https://github.com/user-attachments/assets/efaf601a-c2d8-4098-a3aa-1b5bbb3aec1c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9876-feat-App-mode-enable-mask-editor-3226d73d365081d5982bf5e0e870f9b3) by [Unito](https://www.unito.io)	2026-03-18 03:08:26 -07:00
jaeone94	a3cf6fcde0	fix: convert download URLs to browsable page URLs in Copy Url button (#10228 ) ## Summary - Copy Url button in MissingModelRow now copies a browsable page URL instead of a direct download URL - HuggingFace: `/resolve/` → `/blob/` (file page with model info and download button) - Civitai: strips `/api/download` or `/api/v1` prefix (model page) ## Changes - Add `toBrowsableUrl()` to `missingModelDownload.ts` — converts download URLs to browsable page URLs for HuggingFace and Civitai - Update `MissingModelRow.vue` to use `toBrowsableUrl()` when copying - Add 5 unit tests covering HuggingFace, Civitai, and non-matching URL cases ## Test plan - [x] Unit tests pass (14/14) — `toBrowsableUrl` covered by 5 dedicated tests - [x] Lint, format, typecheck pass - [x] Manual: load workflow with missing HuggingFace models, click Copy Url, verify copied URL opens the file page - [x] Manual: load workflow with missing Civitai models, click Copy Url, verify copied URL opens the model page ### Why no E2E test The Copy Url button is only visible when `!isCloud && model.representative.url && !isAssetSupported`. Writing an E2E test for the clipboard content would require: 1. A test fixture with a real HuggingFace/Civitai URL (fragile — depends on external availability) 2. Granting `clipboard-read` permission in Playwright context 3. Ensuring `isAssetSupported` evaluates to `false` against the local test server's node definitions The URL transformation logic is a pure function, fully covered by unit tests. E2E clipboard content verification has no existing patterns in the codebase and would be environment-dependent and flaky. --------- Co-authored-by: Jin Yi <jin12cc@gmail.com>	2026-03-18 13:19:52 +09:00
Jin Yi	942938d058	[refactor] Rename ResultGallery to MediaLightbox and address code review (#10235 ) ## Summary Address code review feedback from #10134 by renaming the component and improving implementation quality. ## Changes - Rename `ResultGallery` → `MediaLightbox` across all references - Replace `useEventListener(window, 'keydown')` with `@keydown` on dialog element - Remove change detector tests (`renders close button`, `prevents default on arrow keys`) - Remove redundant `toBeVisible()` before Playwright click (implicit wait) - Update keyboard tests to dispatch on dialog element instead of `window` - Sort button icon sizes (`icon-sm`, `icon`, `icon-lg`) - Wire zoom event to lightbox in `MediaAssetCard` story via `context.args` - Add standalone `MediaLightbox` Storybook story under `Platform/Assets/` Fixes #10134 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10235-refactor-Rename-ResultGallery-to-MediaLightbox-and-address-code-review-3276d73d365081299b42f682373a12f1) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Amp <amp@ampcode.com>	2026-03-18 13:02:08 +09:00
Deep Mehta	af7bc38e31	feat: add model-to-node mappings for LTX Video prompt enhancer (#10234 ) ## Summary - Add `quickRegister()` entries for LTX Video prompt enhancer models: - `LLM/Llama-3.2-3B-Instruct` → `LTXVPromptEnhancerLoader` (`llm_name`) - `LLM/Florence-2-large-PromptGen-v2.0` → `LTXVPromptEnhancerLoader` (`image_captioner_name`) These mappings ensure the "Use" button in the model browser correctly creates the appropriate loader node when users click on these LLM models. ## Test plan - [x] Verify "Use" button works for LLM/Llama-3.2-3B-Instruct in model browser - [x] Verify "Use" button works for LLM/Florence-2-large-PromptGen-v2.0 in model browser 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10234-feat-add-model-to-node-mappings-for-LTX-Video-prompt-enhancer-3276d73d36508154847cdbae8c6e9bf1) by [Unito](https://www.unito.io) Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-17 20:02:01 -07:00
Jin Yi	3c9b048974	refactor: replace PrimeVue Galleria with custom overlay in ResultGallery (#10134 ) ## Changes - Replace PrimeVue `Galleria` component with a custom Tailwind-based fullscreen overlay in `ResultGallery.vue` - Use design system `Button` component with new `icon-lg` size variant - Add `role="dialog"` and `aria-modal="true"` for accessibility - Add `event.preventDefault()` on keyboard handlers - Use VueUse `useEventListener` for auto-cleanup - Add i18n keys for aria-labels (`g.previous`, `g.close`, `g.next`) - Add e2e Playwright test for ResultGallery ## Testing - 11 unit tests passing - e2e test added for CI validation [screen-capture.webm](https://github.com/user-attachments/assets/6401e781-9897-4586-8ed3-5251d957ce5b) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10134-refactor-replace-PrimeVue-Galleria-with-custom-overlay-in-ResultGallery-3266d73d365081309042c5c2b7fbc3b0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Amp <amp@ampcode.com>	2026-03-18 11:14:10 +09:00
Christian Byrne	0e5bd539ec	fix: 3D asset disappears when switching to image output in app mode (#9622 ) ## Summary Fix 3D asset disappearing when switching between 3D and image outputs in app mode — missing `onUnmounted` cleanup leaked WebGL contexts. ## Changes - What: Add `onUnmounted` hook to `Preview3d.vue` that calls `viewer.cleanup()`, releasing the WebGL context when Vue destroys the component via its v-if chain. Add unit tests covering init, cleanup on unmount, and remount behavior. ## Review Focus When switching outputs in app mode, Vue's v-if chain destroys and recreates `Preview3d`. Without `onUnmounted` cleanup, the old `Load3d` instance (WebGL context, RAF loop, ResizeObserver) leaks. After ~8-16 toggles, the browser's WebGL context limit is exhausted and new 3D viewers silently fail to render. <!-- Pipeline-Ticket: e36489d2-a9fb-47ca-9e27-88eb3170836b --> --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-03-18 01:08:04 +00:00
Egor	c2cf8e4fb1	perf: speed up local inference on shared GPU (#9968 ) ## Summary Allows to disable UI animations to speed up local inference on shared GPU setups. Gives 7-13% improvement ## Changes - What: New setting under Appearance > General. Applies a CSS class that disables all animations and transitions - Breaking: None since it's opt in I also considered auto-disabling animations only during generation on shared GPU setups. We could detect that, lmk if you want it to be implemented. ## Screenshots Mac with Apple Silicon <img width="362" height="369" alt="Screenshot 2026-03-16 at 01 15 03" src="https://github.com/user-attachments/assets/aa9e3dcf-15cf-48e9-a4f5-834373bc0400" /> <img width="866" height="585" alt="Screenshot 2026-03-16 at 01 42 34" src="https://github.com/user-attachments/assets/aca13c04-aa98-41bf-a5ff-4e218b9c6460" /> ## How to reproduce: - Run frontend & backend locally on a device with shared GPU - Install the model: `cd models/checkpoints && curl -L -o v1-5-pruned-emaonly-fp16.safetensors "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emao nly-fp16.safetensors"` (~2GB) - Use this workflow: https://cloud.comfy.org/?share=4086706e0018 (also attached): [test-workflow.json](https://github.com/user-attachments/files/26006974/test-workflow.json) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9968-perf-speed-up-local-inference-on-shared-GPU-3246d73d365081adaa03c348a7efdc1e) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-03-18 00:40:51 +00:00