fix(image): handle useImage load errors instead of reporting them as unhandled (#12729 )

## ELI-5 When an image on the page fails to load — a broken thumbnail, an expired share link, a flaky in-app browser — the app already handles it and shows a fallback. But under the hood, the image helper was *also* shouting "uncaught error!" to the browser's global error channel every time. Our monitoring hears that shout and logs it as a crash. With enough broken images (some in-app browsers retry in a loop), it became the single loudest "error" in our telemetry — for something that isn't actually broken. This tells the helper to handle the failure quietly instead of shouting. ## What `useImage()` (from `@vueuse/core`) exposes load failures via its `error` ref, which every call site here already uses to render a fallback. But vueuse's default `onError` forwards the error to `globalThis.reportError`, so each failed `<img>` load also surfaces as an **unhandled** error to global error monitoring. This makes failed image loads — 404'd thumbnails, expired share links, in-app webviews that re-fetch on a loop — the highest-volume unhandled frontend error in our production telemetry, despite being expected and already handled in the UI. ## Fix Pass an explicit `onError` (a documented no-op) as the `useAsyncState` options argument at all four `useImage()` call sites: - `components/common/ComfyImage.vue` - `platform/workflow/sharing/components/ShareAssetThumbnail.vue` - `platform/assets/components/MediaImageTop.vue` - `platform/assets/components/AssetCard.vue` The `error` ref is still set by `useAsyncState` before `onError` runs, so the fallback-UI behaviour is unchanged — the only difference is we stop re-reporting handled failures to the global error handler. ## Test plan - [x] No behavioural change to the `error` ref / fallback rendering (verified against vueuse `useImage`/`useAsyncState` semantics: `error.value` is assigned independently of `onError`). - [ ] CI lint/format/type checks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: GitHub Action <action@github.com>
fix(widgetStore): tolerate null/undefined custom widgets from extensions (#12728 )
2026-06-10 00:15:50 +00:00 · 2026-06-09 18:36:21 +00:00 · 2026-06-09 18:32:51 +00:00 · 2026-06-09 17:26:34 +00:00 · 2026-06-09 16:42:19 +00:00
22 changed files with 535 additions and 566 deletions
--- a/browser_tests/assets/missing/missing_nodes_same_pack.json
+++ b/browser_tests/assets/missing/missing_nodes_same_pack.json
@@ -1,48 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "TEST_MISSING_PACK_NODE_A",
-      "pos": [48, 86],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "TEST_MISSING_PACK_NODE_A",
-        "cnr_id": "test-missing-node-pack"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 2,
-      "type": "TEST_MISSING_PACK_NODE_B",
-      "pos": [520, 86],
-      "size": [400, 200],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "TEST_MISSING_PACK_NODE_B",
-        "cnr_id": "test-missing-node-pack"
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -45,8 +45,6 @@ export const TestIds = {
    errorOverlayMessages: 'error-overlay-messages',
    runtimeErrorPanel: 'runtime-error-panel',
    missingNodeCard: 'missing-node-card',
-    missingNodePackExpand: 'missing-node-pack-expand',
-    missingNodePackCount: 'missing-node-pack-count',
    errorCardFindOnGithub: 'error-card-find-on-github',
    errorCardCopy: 'error-card-copy',
    errorDialog: 'error-dialog',
--- a/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
@@ -4,7 +4,7 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'

-test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
+test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.settings.setSetting(
      'Comfy.RightSidePanel.ShowErrorsTab',
@@ -12,97 +12,97 @@ test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
    )
  })

-  test('Should show missing node pack card with guidance', async ({
-    comfyPage
-  }) => {
+  test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
+  })
+
+  test('Should show missing node packs group', async ({ comfyPage }) => {
    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')

    const missingNodeGroup = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodePacksGroup
    )
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
-    ).toBeVisible()
    await expect(missingNodeGroup).toBeVisible()
    await expect(
      missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
    ).toHaveText(/\S/)
  })

-  test('Should show unknown pack node rows by default', async ({
-    comfyPage
-  }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
-
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await expect(missingNodeCard.getByText('Unknown pack')).toBeVisible()
-    await expect(
-      missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' })
-    ).toBeVisible()
-  })
-
-  test('Should locate missing node from the row label', async ({
-    comfyPage
-  }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
-
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await comfyPage.canvasOps.pan({ x: -800, y: -800 })
-    const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()
-
-    await missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' }).click()
-
-    await expect
-      .poll(() => comfyPage.canvasOps.getOffset())
-      .not.toEqual(offsetBeforeLocate)
-  })
-
-  test('Should toggle grouped pack nodes from chevron and title', async ({
+  test('Should expand pack group to reveal node type names', async ({
    comfyPage
  }) => {
    await loadWorkflowAndOpenErrorsTab(
      comfyPage,
-      'missing/missing_nodes_same_pack'
+      'missing/missing_nodes_in_subgraph'
    )

    const missingNodeCard = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodeCard
    )
-    const packTitle = missingNodeCard.getByRole('button', {
-      name: 'test-missing-node-pack'
-    })
-    const expandButton = missingNodeCard
-      .getByTestId(TestIds.dialogs.missingNodePackExpand)
+    await expect(missingNodeCard).toBeVisible()
+
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
      .first()
-    const firstNode = missingNodeCard.getByRole('button', {
-      name: 'TEST_MISSING_PACK_NODE_A'
-    })
-    const secondNode = missingNodeCard.getByRole('button', {
-      name: 'TEST_MISSING_PACK_NODE_B'
-    })
-
-    await expect(packTitle).toBeVisible()
+      .click()
    await expect(
-      missingNodeCard.getByTestId(TestIds.dialogs.missingNodePackCount)
-    ).toHaveText('2')
-    await expect(firstNode).toBeHidden()
-    await expect(secondNode).toBeHidden()
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()
+  })

-    await expandButton.click()
-    await expect(firstNode).toBeVisible()
-    await expect(secondNode).toBeVisible()
+  test('Should collapse expanded pack group', async ({ comfyPage }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_nodes_in_subgraph'
+    )

-    await packTitle.click()
-    await expect(firstNode).toBeHidden()
-    await expect(secondNode).toBeHidden()
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()

-    await packTitle.click()
-    await expect(firstNode).toBeVisible()
-    await expect(secondNode).toBeVisible()
+    await missingNodeCard
+      .getByRole('button', { name: /collapse/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeHidden()
+  })
+
+  test('Locate node button is visible for expanded pack nodes', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(
+      comfyPage,
+      'missing/missing_nodes_in_subgraph'
+    )
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+
+    const locateButton = missingNodeCard.getByRole('button', {
+      name: /locate/i
+    })
+    await expect(locateButton.first()).toBeVisible()
+    // TODO: Add navigation assertion once subgraph node ID deduplication
+    // timing is fixed. Currently, collectMissingNodes runs before
+    // configure(), so execution IDs use pre-remapped node IDs that don't
+    // match the runtime graph. See PR #9510 / #8762.
  })
 })
--- a/src/components/common/ComfyImage.vue
+++ b/src/components/common/ComfyImage.vue
@@ -31,9 +31,9 @@
 </template>

 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed } from 'vue'

+import { useImageQuiet } from '@/composables/useImageQuiet'
 import { cn } from '@comfyorg/tailwind-utils'

 const {
@@ -51,5 +51,5 @@ const {
  alt?: string
 }>()

-const { error } = useImage(computed(() => ({ src, alt })))
+const { error } = useImageQuiet(computed(() => ({ src, alt })))
 </script>
--- a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
@@ -71,11 +71,12 @@ vi.mock('./MissingPackGroupRow.vue', () => ({
    name: 'MissingPackGroupRow',
    template: `<div class="pack-row" data-testid="pack-row"
      :data-show-info-button="String(showInfoButton)"
+      :data-show-node-id-badge="String(showNodeIdBadge)"
    >
      <button data-testid="locate-node" @click="$emit('locate-node', group.nodeTypes[0]?.nodeId)" />
      <button data-testid="open-manager-info" @click="$emit('open-manager-info', group.packId)" />
    </div>`,
-    props: ['group', 'showInfoButton'],
+    props: ['group', 'showInfoButton', 'showNodeIdBadge'],
    emits: ['locate-node', 'open-manager-info']
  }
 }))
@@ -121,6 +122,7 @@ function makePackGroups(count = 2): MissingPackGroup[] {
 function renderCard(
  props: Partial<{
    showInfoButton: boolean
+    showNodeIdBadge: boolean
    missingPackGroups: MissingPackGroup[]
  }> = {}
 ) {
@@ -128,6 +130,7 @@ function renderCard(
  const result = render(MissingNodeCard, {
    props: {
      showInfoButton: false,
+      showNodeIdBadge: false,
      missingPackGroups: makePackGroups(),
      ...props
    },
@@ -166,10 +169,12 @@ describe('MissingNodeCard', () => {

    it('passes props correctly to MissingPackGroupRow children', () => {
      renderCard({
-        showInfoButton: true
+        showInfoButton: true,
+        showNodeIdBadge: true
      })
      const row = screen.getAllByTestId('pack-row')[0]
      expect(row.getAttribute('data-show-info-button')).toBe('true')
+      expect(row.getAttribute('data-show-node-id-badge')).toBe('true')
    })
  })

@@ -251,6 +256,7 @@ describe('MissingNodeCard', () => {
      render(MissingNodeCard, {
        props: {
          showInfoButton: false,
+          showNodeIdBadge: false,
          missingPackGroups: makePackGroups(),
          onLocateNode
        },
@@ -273,6 +279,7 @@ describe('MissingNodeCard', () => {
      render(MissingNodeCard, {
        props: {
          showInfoButton: false,
+          showNodeIdBadge: false,
          missingPackGroups: makePackGroups(),
          onOpenManagerInfo
        },
--- a/src/components/rightSidePanel/errors/MissingNodeCard.vue
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.vue
@@ -56,29 +56,27 @@
        >
      </template>
    </i18n-t>
-    <div class="flex flex-col gap-1 overflow-hidden py-2">
-      <MissingPackGroupRow
-        v-for="group in missingPackGroups"
-        :key="group.packId ?? '__unknown__'"
-        :group="group"
-        :show-info-button="showInfoButton"
-        @locate-node="emit('locateNode', $event)"
-        @open-manager-info="emit('openManagerInfo', $event)"
-      />
-    </div>
+    <MissingPackGroupRow
+      v-for="group in missingPackGroups"
+      :key="group.packId ?? '__unknown__'"
+      :group="group"
+      :show-info-button="showInfoButton"
+      :show-node-id-badge="showNodeIdBadge"
+      @locate-node="emit('locateNode', $event)"
+      @open-manager-info="emit('openManagerInfo', $event)"
+    />
  </div>

  <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
  <div v-if="shouldShowManagerButtons" class="px-4">
    <Button
      v-if="hasInstalledPacksPendingRestart"
-      variant="secondary"
-      size="sm"
+      variant="primary"
      :disabled="isRestarting"
-      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
+      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
      @click="applyChanges()"
    >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
+      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
      <i
        v-else
        aria-hidden="true"
@@ -107,8 +105,9 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'

-const { showInfoButton, missingPackGroups } = defineProps<{
+const { showInfoButton, showNodeIdBadge, missingPackGroups } = defineProps<{
  showInfoButton: boolean
+  showNodeIdBadge: boolean
  missingPackGroups: MissingPackGroup[]
 }>()

--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
@@ -61,16 +61,16 @@ const i18n = createI18n({
  messages: {
    en: {
      g: {
-        install: 'Install',
-        loading: 'Loading',
-        search: 'Search'
+        loading: 'Loading'
      },
      rightSidePanel: {
        locateNode: 'Locate node on canvas',
        missingNodePacks: {
          unknownPack: 'Unknown pack',
+          installNodePack: 'Install node pack',
          installing: 'Installing...',
          installed: 'Installed',
+          searchInManager: 'Search in Node Manager',
          viewInManager: 'View in Manager',
          collapse: 'Collapse',
          expand: 'Expand'
@@ -100,6 +100,7 @@ function renderRow(
  props: Partial<{
    group: MissingPackGroup
    showInfoButton: boolean
+    showNodeIdBadge: boolean
  }> = {}
 ) {
  const user = userEvent.setup()
@@ -109,6 +110,7 @@ function renderRow(
    props: {
      group: makeGroup(),
      showInfoButton: false,
+      showNodeIdBadge: false,
      onLocateNode,
      onOpenManagerInfo,
      ...props
@@ -116,6 +118,7 @@ function renderRow(
    global: {
      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
      stubs: {
+        TransitionCollapse: { template: '<div><slot /></div>' },
        DotSpinner: {
          template: '<span role="status" aria-label="loading" />'
        }
@@ -155,7 +158,7 @@ describe('MissingPackGroupRow', () => {

    it('renders node count', () => {
      renderRow()
-      expect(screen.getByText('2')).toBeInTheDocument()
+      expect(screen.getByText(/\(2\)/)).toBeInTheDocument()
    })

    it('renders count of 5 for 5 nodeTypes', () => {
@@ -168,19 +171,38 @@ describe('MissingPackGroupRow', () => {
          }))
        })
      })
-      expect(screen.getByText('5')).toBeInTheDocument()
+      expect(screen.getByText(/\(5\)/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Expand / Collapse', () => {
+    it('starts collapsed', () => {
+      renderRow()
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+    })
+
+    it('expands when chevron is clicked', async () => {
+      const { user } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      expect(screen.getByText('MissingB')).toBeInTheDocument()
+    })
+
+    it('collapses when chevron is clicked again', async () => {
+      const { user } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
    })
  })

  describe('Node Type List', () => {
-    it('hides multiple nodeTypes behind the expand control by default', () => {
-      renderRow()
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
-      expect(screen.queryByText('MissingB')).not.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
-    })
+    async function expand(user: ReturnType<typeof userEvent.setup>) {
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+    }

-    it('renders all nodeTypes after expanding', async () => {
+    it('renders all nodeTypes when expanded', async () => {
      const { user } = renderRow({
        group: makeGroup({
          nodeTypes: [
@@ -190,87 +212,40 @@ describe('MissingPackGroupRow', () => {
          ]
        })
      })
-
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-
+      await expand(user)
      expect(screen.getByText('NodeA')).toBeInTheDocument()
      expect(screen.getByText('NodeB')).toBeInTheDocument()
      expect(screen.getByText('NodeC')).toBeInTheDocument()
    })

-    it('hides multiple nodeTypes again after collapsing', async () => {
-      const { user } = renderRow()
-
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-
-      await user.click(screen.getByRole('button', { name: 'Collapse' }))
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+    it('shows nodeId badge when showNodeIdBadge is true', async () => {
+      const { user } = renderRow({ showNodeIdBadge: true })
+      await expand(user)
+      expect(screen.getByText('#10')).toBeInTheDocument()
    })

-    it('hides a single nodeType without an expand control', () => {
-      renderRow({
-        group: makeGroup({
-          nodeTypes: [{ type: 'OnlyNode', nodeId: '1', isReplaceable: false }]
-        })
-      })
-
-      expect(screen.queryByText('OnlyNode')).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'Expand' })
-      ).not.toBeInTheDocument()
+    it('hides nodeId badge when showNodeIdBadge is false', async () => {
+      const { user } = renderRow({ showNodeIdBadge: false })
+      await expand(user)
+      expect(screen.queryByText('#10')).not.toBeInTheDocument()
    })

-    it('emits locateNode when the pack label is clicked for one nodeType', async () => {
-      const { user, onLocateNode } = renderRow({
-        group: makeGroup({
-          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
-        })
-      })
-
-      await user.click(screen.getByRole('button', { name: 'my-pack' }))
-
-      expect(onLocateNode).toHaveBeenCalledWith('100')
-    })
-
-    it('moves locate to the header when there is one nodeType', async () => {
-      const { user, onLocateNode } = renderRow({
-        group: makeGroup({
-          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
-        })
-      })
-
-      await user.click(
-        screen.getByRole('button', { name: 'Locate node on canvas' })
-      )
-
-      expect(onLocateNode).toHaveBeenCalledWith('100')
-    })
-
-    it('emits locateNode when expanded child Locate button is clicked', async () => {
-      const { user, onLocateNode } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-
+    it('emits locateNode when Locate button is clicked', async () => {
+      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
+      await expand(user)
      await user.click(
        screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
      )
-
      expect(onLocateNode).toHaveBeenCalledWith('10')
    })

-    it('emits locateNode when node label is clicked', async () => {
-      const { user, onLocateNode } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      await user.click(screen.getByRole('button', { name: 'MissingA' }))
-      expect(onLocateNode).toHaveBeenCalledWith('10')
-    })
-
-    it('does not show Locate for nodeType without nodeId', () => {
-      renderRow({
+    it('does not show Locate for nodeType without nodeId', async () => {
+      const { user } = renderRow({
        group: makeGroup({
          nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
        })
      })
+      await expand(user)
      expect(
        screen.queryByRole('button', { name: 'Locate node on canvas' })
      ).not.toBeInTheDocument()
@@ -278,6 +253,7 @@ describe('MissingPackGroupRow', () => {

    it('handles mixed nodeTypes with and without nodeId', async () => {
      const { user } = renderRow({
+        showNodeIdBadge: true,
        group: makeGroup({
          nodeTypes: [
            { type: 'WithId', nodeId: '100', isReplaceable: false },
@@ -285,7 +261,7 @@ describe('MissingPackGroupRow', () => {
          ]
        })
      })
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      await expand(user)
      expect(screen.getByText('WithId')).toBeInTheDocument()
      expect(screen.getByText('WithoutId')).toBeInTheDocument()
      expect(
@@ -298,25 +274,21 @@ describe('MissingPackGroupRow', () => {
    it('hides install UI when shouldShowManagerButtons is false', () => {
      mockShouldShowManagerButtons.value = false
      renderRow()
-      expect(
-        screen.queryByRole('button', { name: 'Install' })
-      ).not.toBeInTheDocument()
+      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
    })

    it('hides install UI when packId is null', () => {
      mockShouldShowManagerButtons.value = true
      renderRow({ group: makeGroup({ packId: null }) })
-      expect(
-        screen.queryByRole('button', { name: 'Install' })
-      ).not.toBeInTheDocument()
+      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
    })

-    it('shows Search when packId exists but pack not in registry', () => {
+    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
      mockShouldShowManagerButtons.value = true
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = []
      renderRow()
-      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
+      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
    })

    it('shows "Installed" state when pack is installed', () => {
@@ -340,9 +312,7 @@ describe('MissingPackGroupRow', () => {
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
      renderRow()
-      expect(
-        screen.getByRole('button', { name: 'Install' })
-      ).toBeInTheDocument()
+      expect(screen.getByText('Install node pack')).toBeInTheDocument()
    })

    it('calls installAllPacks when Install button is clicked', async () => {
@@ -350,7 +320,9 @@ describe('MissingPackGroupRow', () => {
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Install' }))
+      await user.click(
+        screen.getByRole('button', { name: /Install node pack/ })
+      )
      expect(mockInstallAllPacks).toHaveBeenCalledOnce()
    })

@@ -397,7 +369,7 @@ describe('MissingPackGroupRow', () => {
  describe('Edge Cases', () => {
    it('handles empty nodeTypes array', () => {
      renderRow({ group: makeGroup({ nodeTypes: [] }) })
-      expect(screen.getByText('0')).toBeInTheDocument()
+      expect(screen.getByText(/\(0\)/)).toBeInTheDocument()
    })
  })
 })
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
@@ -1,221 +1,187 @@
 <template>
-  <div class="mb-1 flex w-full flex-col gap-0.5 last:mb-0">
-    <div class="flex min-h-8 w-full items-center gap-1">
+  <div class="mb-2 flex w-full flex-col">
+    <!-- Pack header row: pack name + info + chevron -->
+    <div class="flex h-8 w-full items-center">
+      <!-- Warning icon for unknown packs -->
+      <i
+        v-if="group.packId === null && !group.isResolving"
+        class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
+      />
+      <p
+        class="min-w-0 flex-1 truncate text-sm font-medium"
+        :class="
+          group.packId === null && !group.isResolving
+            ? 'text-warning-background'
+            : 'text-foreground'
+        "
+      >
+        <span v-if="group.isResolving" class="text-muted-foreground italic">
+          {{ t('g.loading') }}...
+        </span>
+        <span v-else>
+          {{
+            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
+          }}
+        </span>
+      </p>
      <Button
-        v-if="hasMultipleNodeTypes"
-        data-testid="missing-node-pack-expand"
+        v-if="showInfoButton && group.packId !== null"
        variant="textonly"
-        size="unset"
+        size="icon-sm"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
+        @click="emit('openManagerInfo', group.packId ?? '')"
+      >
+        <i class="icon-[lucide--info] size-4" />
+      </Button>
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        :class="
+          cn(
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            { 'rotate-180': expanded }
+          )
+        "
        :aria-label="
          expanded
            ? t('rightSidePanel.missingNodePacks.collapse')
            : t('rightSidePanel.missingNodePacks.expand')
        "
-        :aria-expanded="expanded"
-        :class="
-          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
-          )
-        "
        @click="toggleExpand"
      >
        <i
-          aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
        />
      </Button>
-      <i
-        v-if="isUnknownPack"
-        class="icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
-      />
-      <span class="flex min-w-0 flex-1 items-center gap-2">
-        <span class="flex min-w-0 items-center gap-2.5">
-          <button
-            v-if="hasMultipleNodeTypes && !group.isResolving"
-            type="button"
-            :class="
-              cn(
-                packTextButtonClass,
-                isUnknownPack
-                  ? 'text-warning-background'
-                  : 'text-base-foreground'
-              )
-            "
-            :aria-expanded="expanded"
-            @click="toggleExpand"
-          >
-            {{ packDisplayName }}
-          </button>
-          <button
-            v-else-if="primaryLocatableNodeType && !group.isResolving"
-            type="button"
-            :class="
-              cn(
-                packTextButtonClass,
-                isUnknownPack
-                  ? 'text-warning-background'
-                  : 'text-base-foreground'
-              )
-            "
-            @click="handleLocateNode(primaryLocatableNodeType)"
-          >
-            {{ packDisplayName }}
-          </button>
+    </div>
+
+    <!-- Sub-labels: individual node instances, each with their own Locate button -->
+    <TransitionCollapse>
+      <div
+        v-if="expanded"
+        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-2"
+      >
+        <div
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="flex h-7 items-center"
+        >
          <span
-            v-else
-            class="min-w-0 truncate text-sm/relaxed font-normal"
-            :class="
-              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
+            v-if="
+              showNodeIdBadge &&
+              typeof nodeType !== 'string' &&
+              nodeType.nodeId != null
            "
+            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
          >
-            <span v-if="group.isResolving" class="text-muted-foreground italic">
-              {{ t('g.loading') }}...
-            </span>
-            <span v-else>
-              {{ packDisplayName }}
-            </span>
+            #{{ nodeType.nodeId }}
          </span>
+          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+            {{ getLabel(nodeType) }}
+          </p>
          <Button
-            v-if="showInfoButton && group.packId !== null"
+            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
            variant="textonly"
            size="icon-sm"
-            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
-            :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
-            @click="emit('openManagerInfo', group.packId ?? '')"
+            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
+            :aria-label="t('rightSidePanel.locateNode')"
+            @click="handleLocateNode(nodeType)"
          >
-            <i class="icon-[lucide--info] size-4" />
+            <i class="icon-[lucide--locate] size-3" />
          </Button>
-          <span
-            v-if="showNodeCount"
-            data-testid="missing-node-pack-count"
-            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
-          >
-            {{ group.nodeTypes.length }}
-          </span>
-        </span>
-      </span>
-      <div v-if="showInstallAction" class="ml-auto shrink-0">
-        <Button
-          variant="secondary"
-          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
-          :disabled="isPackInstalled || isInstalling"
-          @click="handlePackInstallClick"
-        >
-          <DotSpinner
-            v-if="isInstalling"
-            duration="1s"
-            :size="12"
-            class="mr-1.5 shrink-0"
-          />
-          <span class="text-foreground min-w-0 truncate">
-            {{
-              isInstalling
-                ? t('rightSidePanel.missingNodePacks.installing')
-                : isPackInstalled
-                  ? t('rightSidePanel.missingNodePacks.installed')
-                  : t('g.install')
-            }}
-          </span>
-        </Button>
+        </div>
      </div>
+    </TransitionCollapse>
+
+    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
+    <div
+      v-if="
+        shouldShowManagerButtons &&
+        group.packId !== null &&
+        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
+      "
+      class="flex w-full items-start py-1"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex w-full flex-1 rounded-lg"
+        :disabled="
+          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
+        "
+        @click="handlePackInstallClick"
+      >
+        <DotSpinner
+          v-if="isInstalling"
+          duration="1s"
+          :size="12"
+          class="mr-1.5 shrink-0"
+        />
+        <i
+          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
+          class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
+        />
+        <i
+          v-else
+          class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
+        />
+        <span class="text-foreground min-w-0 truncate text-sm">
+          {{
+            isInstalling
+              ? t('rightSidePanel.missingNodePacks.installing')
+              : comfyManagerStore.isPackInstalled(group.packId)
+                ? t('rightSidePanel.missingNodePacks.installed')
+                : t('rightSidePanel.missingNodePacks.installNodePack')
+          }}
+        </span>
+      </Button>
+    </div>
+
+    <!-- Registry still loading: packId known but result not yet available -->
+    <div
+      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
+      class="flex w-full items-start py-1"
+    >
      <div
-        v-else-if="showLoadingAction"
-        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
+        class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
      >
        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
        <span class="text-foreground min-w-0 truncate text-sm">
          {{ t('g.loading') }}
        </span>
      </div>
-      <div v-else-if="showSearchAction" class="ml-auto shrink-0">
-        <Button
-          variant="secondary"
-          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
-          @click="
-            openManager({
-              initialTab: ManagerTab.All,
-              initialPackId: group.packId!
-            })
-          "
-        >
-          <span class="text-foreground min-w-0 truncate">
-            {{ t('g.search') }}
-          </span>
-        </Button>
-      </div>
-      <Button
-        v-if="primaryLocatableNodeType"
-        variant="textonly"
-        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        :aria-label="t('rightSidePanel.locateNode')"
-        @click="handleLocateNode(primaryLocatableNodeType)"
-      >
-        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
-      </Button>
    </div>

-    <TransitionCollapse>
-      <ul
-        v-if="showNodeTypeList"
-        :class="
-          cn(
-            'm-0 list-none space-y-1 p-0',
-            (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
-          )
+    <!-- Search in Manager: fetch done but pack not found in registry -->
+    <div
+      v-else-if="group.packId !== null && shouldShowManagerButtons"
+      class="flex w-full items-start py-1"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex w-full flex-1 rounded-lg"
+        @click="
+          openManager({
+            initialTab: ManagerTab.All,
+            initialPackId: group.packId!
+          })
        "
      >
-        <li
-          v-for="nodeType in group.nodeTypes"
-          :key="getKey(nodeType)"
-          class="min-w-0"
-        >
-          <div class="flex min-w-0 items-center gap-2">
-            <span class="flex min-w-0 flex-1 items-center gap-1">
-              <button
-                v-if="isLocatableNodeType(nodeType)"
-                type="button"
-                :class="
-                  cn(
-                    packTextButtonClass,
-                    'text-muted-foreground hover:text-base-foreground'
-                  )
-                "
-                @click="handleLocateNode(nodeType)"
-              >
-                {{ getLabel(nodeType) }}
-              </button>
-              <span
-                v-else
-                class="text-sm/relaxed wrap-break-word text-muted-foreground"
-              >
-                {{ getLabel(nodeType) }}
-              </span>
-            </span>
-            <Button
-              v-if="isLocatableNodeType(nodeType)"
-              variant="textonly"
-              size="icon-sm"
-              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-              :aria-label="t('rightSidePanel.locateNode')"
-              @click="handleLocateNode(nodeType)"
-            >
-              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
-            </Button>
-          </div>
-        </li>
-      </ul>
-    </TransitionCollapse>
+        <i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
+        <span class="text-foreground min-w-0 truncate text-sm">
+          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
+        </span>
+      </Button>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { ref, computed } from 'vue'
 import { cn } from '@comfyorg/tailwind-utils'
+import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
@@ -227,9 +193,10 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 import type { MissingNodeType } from '@/types/comfy'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'

-const { group, showInfoButton } = defineProps<{
+const { group, showInfoButton, showNodeIdBadge } = defineProps<{
  group: MissingPackGroup
  showInfoButton: boolean
+  showNodeIdBadge: boolean
 }>()

 const emit = defineEmits<{
@@ -238,10 +205,6 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
-const expandedOverride = ref<boolean | null>(null)
-
-const packTextButtonClass =
-  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'

 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
@@ -256,72 +219,17 @@ const { isInstalling, installAllPacks } = usePackInstall(() =>
  nodePack.value ? [nodePack.value] : []
 )

-const isUnknownPack = computed(
-  () => group.packId === null && !group.isResolving
-)
-
-const packDisplayName = computed(() => {
-  if (group.packId === null) {
-    return t('rightSidePanel.missingNodePacks.unknownPack')
-  }
-  return nodePack.value?.name ?? group.packId
-})
-
-const isPackInstalled = computed(
-  () => group.packId !== null && comfyManagerStore.isPackInstalled(group.packId)
-)
-
-const showInstallAction = computed(
-  () =>
-    shouldShowManagerButtons.value &&
-    group.packId !== null &&
-    (nodePack.value !== null || isPackInstalled.value)
-)
-
-const showLoadingAction = computed(
-  () =>
-    shouldShowManagerButtons.value &&
-    group.packId !== null &&
-    !showInstallAction.value &&
-    isLoading.value
-)
-
-const showSearchAction = computed(
-  () =>
-    shouldShowManagerButtons.value &&
-    group.packId !== null &&
-    !showInstallAction.value &&
-    !showLoadingAction.value
-)
-
-const hasMultipleNodeTypes = computed(() => group.nodeTypes.length > 1)
-const showNodeCount = computed(() => group.nodeTypes.length !== 1)
-const expanded = computed(
-  () =>
-    expandedOverride.value ??
-    (isUnknownPack.value && hasMultipleNodeTypes.value)
-)
-const showNodeTypeList = computed(
-  () =>
-    (isUnknownPack.value && group.nodeTypes.length === 1) ||
-    (hasMultipleNodeTypes.value && expanded.value)
-)
-const primaryLocatableNodeType = computed(() => {
-  if (isUnknownPack.value) return null
-  if (group.nodeTypes.length !== 1) return null
-  const [nodeType] = group.nodeTypes
-  return isLocatableNodeType(nodeType) ? nodeType : null
-})
-
 function handlePackInstallClick() {
  if (!group.packId) return
-  if (!isPackInstalled.value) {
+  if (!comfyManagerStore.isPackInstalled(group.packId)) {
    void installAllPacks()
  }
 }

+const expanded = ref(false)
+
 function toggleExpand() {
-  expandedOverride.value = !expanded.value
+  expanded.value = !expanded.value
 }

 function getKey(nodeType: MissingNodeType): string {
@@ -333,14 +241,10 @@ function getLabel(nodeType: MissingNodeType): string {
  return typeof nodeType === 'string' ? nodeType : nodeType.type
 }

-function isLocatableNodeType(
-  nodeType: MissingNodeType
-): nodeType is Exclude<MissingNodeType, string> & { nodeId: string | number } {
-  return typeof nodeType !== 'string' && nodeType.nodeId != null
-}
-
 function handleLocateNode(nodeType: MissingNodeType) {
-  if (!isLocatableNodeType(nodeType)) return
-  emit('locateNode', String(nodeType.nodeId))
+  if (typeof nodeType === 'string') return
+  if (nodeType.nodeId != null) {
+    emit('locateNode', String(nodeType.nodeId))
+  }
 }
 </script>
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -148,6 +148,7 @@
          <MissingNodeCard
            v-if="group.type === 'missing_node'"
            :show-info-button="shouldShowManagerButtons"
+            :show-node-id-badge="showNodeIdBadge"
            :missing-pack-groups="missingPackGroups"
            @locate-node="handleLocateMissingNode"
            @open-manager-info="handleOpenManagerInfo"
--- a/src/composables/useImageQuiet.ts
+++ b/src/composables/useImageQuiet.ts
@@ -0,0 +1,27 @@
+import { useImage } from '@vueuse/core'
+
+/**
+ * `useImage()` that handles load failures quietly.
+ *
+ * `useImage()` already surfaces failures via its returned `error` ref (callers
+ * render a fallback). By default vueuse ALSO forwards the error to
+ * `globalThis.reportError`, which our error monitoring (Datadog RUM) captures as
+ * an unhandled error for every broken image — 404'd thumbnails, expired share
+ * links, in-app browsers that re-fetch in a loop. Broken images are expected,
+ * not bugs, so handle the failure here instead of letting it surface globally.
+ * The returned `error` ref behaviour is unchanged.
+ *
+ * `asyncStateOptions` is forwarded to `useImage`, so callers can still tune the
+ * other `useAsyncState` fields; only `onError` is fixed to the quiet default.
+ */
+export function useImageQuiet(
+  options: Parameters<typeof useImage>[0],
+  asyncStateOptions?: Parameters<typeof useImage>[1]
+) {
+  return useImage(options, {
+    ...asyncStateOptions,
+    onError: () => {
+      // Surfaced via the returned `error` ref; see the doc comment above.
+    }
+  })
+}
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3628,10 +3628,12 @@
      "unsupportedTitle": "Unsupported Node Packs",
      "ossManagerDisabledHint": "To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.",
      "installAll": "Install All",
+      "installNodePack": "Install node pack",
      "unknownPack": "Unknown pack",
      "installing": "Installing...",
      "installed": "Installed",
      "applyChanges": "Apply Changes",
+      "searchInManager": "Search in Node Manager",
      "viewInManager": "View in Manager",
      "collapse": "Collapse",
      "expand": "Expand"
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -128,10 +128,10 @@
 </template>

 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed, ref, toValue, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { useImageQuiet } from '@/composables/useImageQuiet'
 import IconGroup from '@/components/button/IconGroup.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
@@ -190,7 +190,7 @@ const tooltipDelay = computed<number>(() =>
  settingStore.get('LiteGraph.Node.TooltipDelay')
 )

-const { isLoading, error } = useImage({
+const { isLoading, error } = useImageQuiet({
  src: asset.preview_url ?? '',
  alt: displayName.value
 })
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -20,8 +20,9 @@
 </template>

 <script setup lang="ts">
-import { useImage, whenever } from '@vueuse/core'
+import { whenever } from '@vueuse/core'

+import { useImageQuiet } from '@/composables/useImageQuiet'
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
 import { getAssetDisplayName } from '../utils/assetMetadataUtils'

@@ -34,7 +35,7 @@ const emit = defineEmits<{
  view: []
 }>()

-const { state, error, isReady } = useImage({
+const { state, error, isReady } = useImageQuiet({
  src: asset.src ?? '',
  alt: getAssetDisplayName(asset)
 })
--- a/src/platform/missingModel/missingModelDownload.test.ts
+++ b/src/platform/missingModel/missingModelDownload.test.ts
@@ -35,12 +35,17 @@ vi.mock('@/stores/workspace/sidebarTabStore', () => ({

 let testId = 0

+beforeEach(() => {
+  vi.restoreAllMocks()
+  vi.resetAllMocks()
+  delete window.__comfyDesktop2
+  delete window.__comfyDesktop2Remote
+})
+
 describe('fetchModelMetadata', () => {
  beforeEach(() => {
-    fetchMock.mockReset()
    mockIsDesktop.value = false
    mockSidebarTabStore.activeSidebarTabId = null
-    mockStartDownload.mockReset()
    testId++
  })

@@ -242,7 +247,126 @@ describe('downloadModel', () => {
  beforeEach(() => {
    mockIsDesktop.value = false
    mockSidebarTabStore.activeSidebarTabId = null
-    mockStartDownload.mockReset()
+  })
+
+  it('uses the Desktop2 bridge directly instead of the browser fallback', () => {
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {})
+    const desktopDownloadModel = vi
+      .fn<
+        (url: string, filename: string, directory: string) => Promise<boolean>
+      >()
+      .mockResolvedValue(true)
+    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+
+    downloadModel(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/org/model/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      { checkpoints: ['/models/checkpoints'] }
+    )
+
+    expect(desktopDownloadModel).toHaveBeenCalledWith(
+      'https://huggingface.co/org/model/resolve/main/model.safetensors',
+      'model.safetensors',
+      'checkpoints'
+    )
+    expect(anchorClick).not.toHaveBeenCalled()
+    expect(mockStartDownload).not.toHaveBeenCalled()
+  })
+
+  it('logs Desktop2 bridge failures without falling back to browser download', async () => {
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {})
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const bridgeError = new Error('bridge failed')
+    const desktopDownloadModel = vi
+      .fn<
+        (url: string, filename: string, directory: string) => Promise<boolean>
+      >()
+      .mockRejectedValue(bridgeError)
+    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+
+    downloadModel(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/org/model/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      { checkpoints: ['/models/checkpoints'] }
+    )
+
+    await vi.waitFor(() => {
+      expect(consoleError).toHaveBeenCalledWith(
+        'Failed to start Desktop2 model download:',
+        bridgeError
+      )
+    })
+    expect(anchorClick).not.toHaveBeenCalled()
+    expect(mockStartDownload).not.toHaveBeenCalled()
+  })
+
+  it('logs synchronous Desktop2 bridge failures without crashing', async () => {
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {})
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const bridgeError = new Error('bridge failed before returning a promise')
+    const desktopDownloadModel = vi
+      .fn<
+        (url: string, filename: string, directory: string) => Promise<boolean>
+      >()
+      .mockImplementation(() => {
+        throw bridgeError
+      })
+    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+
+    downloadModel(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/org/model/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      { checkpoints: ['/models/checkpoints'] }
+    )
+
+    await vi.waitFor(() => {
+      expect(consoleError).toHaveBeenCalledWith(
+        'Failed to start Desktop2 model download:',
+        bridgeError
+      )
+    })
+    expect(anchorClick).not.toHaveBeenCalled()
+    expect(mockStartDownload).not.toHaveBeenCalled()
+  })
+
+  it('keeps remote Desktop2 sessions on the browser fallback', () => {
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {})
+    const desktopDownloadModel = vi
+      .fn<
+        (url: string, filename: string, directory: string) => Promise<boolean>
+      >()
+      .mockResolvedValue(true)
+    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+    window.__comfyDesktop2Remote = true
+
+    downloadModel(
+      {
+        name: 'model.safetensors',
+        url: 'https://huggingface.co/org/model/resolve/main/model.safetensors',
+        directory: 'checkpoints'
+      },
+      { checkpoints: ['/models/checkpoints'] }
+    )
+
+    expect(desktopDownloadModel).not.toHaveBeenCalled()
+    expect(anchorClick).toHaveBeenCalledTimes(1)
  })

  it('opens the model library sidebar before starting a desktop download', () => {
--- a/src/platform/missingModel/missingModelDownload.ts
+++ b/src/platform/missingModel/missingModelDownload.ts
@@ -3,6 +3,21 @@ import { isDesktop } from '@/platform/distribution/types'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'

+interface ComfyDesktop2Bridge {
+  downloadModel: (
+    url: string,
+    filename: string,
+    directory: string
+  ) => Promise<boolean>
+}
+
+declare global {
+  interface Window {
+    __comfyDesktop2?: ComfyDesktop2Bridge
+    __comfyDesktop2Remote?: boolean
+  }
+}
+
 const ALLOWED_SOURCES = [
  'https://civitai.com/',
  'https://civitai.red/',
@@ -35,6 +50,17 @@ export interface ModelWithUrl {
  directory: string
 }

+async function startDesktop2ModelDownload(
+  bridge: ComfyDesktop2Bridge,
+  model: ModelWithUrl
+): Promise<void> {
+  try {
+    await bridge.downloadModel(model.url, model.name, model.directory)
+  } catch (error: unknown) {
+    console.error('Failed to start Desktop2 model download:', error)
+  }
+}
+
 /**
 * Converts a model download URL to a browsable page URL.
 * - HuggingFace: `/resolve/` → `/blob/` (file page with model info)
@@ -63,6 +89,12 @@ export function downloadModel(
  model: ModelWithUrl,
  paths: Record<string, string[]>
 ): void {
+  const desktop2Bridge = window.__comfyDesktop2
+  if (desktop2Bridge?.downloadModel && !window.__comfyDesktop2Remote) {
+    void startDesktop2ModelDownload(desktop2Bridge, model)
+    return
+  }
+
  if (!isDesktop) {
    const link = document.createElement('a')
    link.href = model.url
--- a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
@@ -208,6 +208,23 @@ describe('GtmTelemetryProvider', () => {
      expect(entry!.error as string).toHaveLength(100)
    })

+    it('pushes execution_start', () => {
+      const provider = createInitializedProvider()
+      provider.trackWorkflowExecution()
+      expect(lastDataLayerEntry()).toMatchObject({
+        event: 'execution_start'
+      })
+    })
+
+    it('pushes execution_success with job_id', () => {
+      const provider = createInitializedProvider()
+      provider.trackExecutionSuccess({ jobId: 'job-1' })
+      expect(lastDataLayerEntry()).toMatchObject({
+        event: 'execution_success',
+        job_id: 'job-1'
+      })
+    })
+
    it('pushes select_content for template events', () => {
      const provider = createInitializedProvider()
      provider.trackTemplate({
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts
@@ -59,8 +59,6 @@ import type {
  AuthMetadata,
  DefaultViewSetMetadata,
  EnterLinearMetadata,
-  ExecutionErrorMetadata,
-  ExecutionSuccessMetadata,
  ShareFlowMetadata,
  SurveyResponses,
  TemplateLibraryClosedMetadata,
@@ -288,8 +286,6 @@ describe('MixpanelTelemetryProvider — direct event tracking methods', () => {
  }
  const enterLinearMetadata: EnterLinearMetadata = {}
  const shareFlowMetadata: ShareFlowMetadata = { step: 'dialog_opened' }
-  const executionErrorMetadata: ExecutionErrorMetadata = { jobId: 'job-1' }
-  const executionSuccessMetadata: ExecutionSuccessMetadata = { jobId: 'job-1' }
  const authMetadata: AuthMetadata = {}

  it.for<
@@ -355,16 +351,6 @@ describe('MixpanelTelemetryProvider — direct event tracking methods', () => {
      (p) => p.trackShareFlow(shareFlowMetadata),
      TelemetryEvents.SHARE_FLOW
    ],
-    [
-      'trackExecutionError',
-      (p) => p.trackExecutionError(executionErrorMetadata),
-      TelemetryEvents.EXECUTION_ERROR
-    ],
-    [
-      'trackExecutionSuccess',
-      (p) => p.trackExecutionSuccess(executionSuccessMetadata),
-      TelemetryEvents.EXECUTION_SUCCESS
-    ],
    [
      'trackAuth',
      (p) => p.trackAuth(authMetadata),
@@ -422,27 +408,6 @@ describe('MixpanelTelemetryProvider — direct event tracking methods', () => {
      })
    )
  })
-
-  it('trackWorkflowExecution forwards the latest trigger_source from trackRunButton', async () => {
-    const provider = new MixpanelTelemetryProvider()
-    await waitForMixpanelInit()
-    mockMixpanel.track.mockClear()
-
-    provider.trackRunButton({ trigger_source: 'keybinding' })
-    provider.trackWorkflowExecution()
-
-    expect(mockMixpanel.track).toHaveBeenCalledWith(
-      TelemetryEvents.EXECUTION_START,
-      expect.objectContaining({ trigger_source: 'keybinding' })
-    )
-
-    mockMixpanel.track.mockClear()
-    provider.trackWorkflowExecution()
-    expect(mockMixpanel.track).toHaveBeenCalledWith(
-      TelemetryEvents.EXECUTION_START,
-      expect.objectContaining({ trigger_source: 'unknown' })
-    )
-  })
 })

 describe('MixpanelTelemetryProvider — topup delegation', () => {
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -18,10 +18,7 @@ import type {
  DefaultViewSetMetadata,
  EnterLinearMetadata,
  ShareFlowMetadata,
-  ExecutionContext,
  ExecutionTriggerSource,
-  ExecutionErrorMetadata,
-  ExecutionSuccessMetadata,
  HelpCenterClosedMetadata,
  HelpCenterOpenedMetadata,
  HelpResourceClickedMetadata,
@@ -92,7 +89,6 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
  private mixpanel: OverridedMixpanel | null = null
  private eventQueue: QueuedEvent[] = []
  private isInitialized = false
-  private lastTriggerSource: ExecutionTriggerSource | undefined
  private disabledEvents = new Set<TelemetryEventName>(DEFAULT_DISABLED_EVENTS)

  constructor() {
@@ -300,7 +296,6 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
      is_app_mode: isAppMode.value
    }

-    this.lastTriggerSource = options?.trigger_source
    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
  }

@@ -420,24 +415,6 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
    this.trackEvent(TelemetryEvents.WORKFLOW_CREATED, metadata)
  }

-  trackWorkflowExecution(): void {
-    const context = getExecutionContext()
-    const eventContext: ExecutionContext = {
-      ...context,
-      trigger_source: this.lastTriggerSource ?? 'unknown'
-    }
-    this.trackEvent(TelemetryEvents.EXECUTION_START, eventContext)
-    this.lastTriggerSource = undefined
-  }
-
-  trackExecutionError(metadata: ExecutionErrorMetadata): void {
-    this.trackEvent(TelemetryEvents.EXECUTION_ERROR, metadata)
-  }
-
-  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
-    this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
-  }
-
  trackSettingChanged(metadata: SettingChangedMetadata): void {
    this.trackEvent(TelemetryEvents.SETTING_CHANGED, metadata)
  }
--- a/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
@@ -14,9 +14,6 @@ import type {
  DefaultViewSetMetadata,
  EnterLinearMetadata,
  ShareFlowMetadata,
-  ExecutionContext,
-  ExecutionErrorMetadata,
-  ExecutionSuccessMetadata,
  ExecutionTriggerSource,
  HelpCenterClosedMetadata,
  HelpCenterOpenedMetadata,
@@ -102,7 +99,6 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
  private eventQueue: QueuedEvent[] = []
  private pendingFirstAuthAt = new Map<string, string>()
  private isInitialized = false
-  private lastTriggerSource: ExecutionTriggerSource | undefined
  private disabledEvents = new Set<TelemetryEventName>(DEFAULT_DISABLED_EVENTS)
  private desktopEntryProps: DesktopEntryProps | null = null

@@ -400,7 +396,6 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
      is_app_mode: isAppMode.value
    }

-    this.lastTriggerSource = options?.trigger_source
    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
  }

@@ -532,24 +527,6 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
    this.trackEvent(TelemetryEvents.WORKFLOW_CREATED, metadata)
  }

-  trackWorkflowExecution(): void {
-    const context = getExecutionContext()
-    const eventContext: ExecutionContext = {
-      ...context,
-      trigger_source: this.lastTriggerSource ?? 'unknown'
-    }
-    this.trackEvent(TelemetryEvents.EXECUTION_START, eventContext)
-    this.lastTriggerSource = undefined
-  }
-
-  trackExecutionError(metadata: ExecutionErrorMetadata): void {
-    this.trackEvent(TelemetryEvents.EXECUTION_ERROR, metadata)
-  }
-
-  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
-    this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
-  }
-
  trackSettingChanged(metadata: SettingChangedMetadata): void {
    this.trackEvent(TelemetryEvents.SETTING_CHANGED, metadata)
  }
--- a/src/platform/workflow/sharing/components/ShareAssetThumbnail.vue
+++ b/src/platform/workflow/sharing/components/ShareAssetThumbnail.vue
@@ -28,10 +28,10 @@
 </template>

 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed } from 'vue'

 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+import { useImageQuiet } from '@/composables/useImageQuiet'
 import { cn } from '@comfyorg/tailwind-utils'

 const { name, previewUrl } = defineProps<{
@@ -63,5 +63,5 @@ const imageOptions = computed(() => ({
  src: normalizedPreviewUrl.value ?? ''
 }))

-const { isReady, isLoading, error } = useImage(imageOptions)
+const { isReady, isLoading, error } = useImageQuiet(imageOptions)
 </script>
--- a/src/stores/widgetStore.test.ts
+++ b/src/stores/widgetStore.test.ts
@@ -38,6 +38,15 @@ describe('widgetStore', () => {
      store.registerCustomWidgets({ INT: override })
      expect(store.widgets.get('INT')).toBe(ComfyWidgets.INT)
    })
+
+    it('does not throw when an extension returns null/undefined widgets', () => {
+      const store = useWidgetStore()
+      // Regression: a misbehaving extension can resolve getCustomWidgets() to
+      // nullish, which must not break app init. The `!` casts deliberately
+      // violate the non-null parameter type to simulate that untrusted input.
+      expect(() => store.registerCustomWidgets(undefined!)).not.toThrow()
+      expect(() => store.registerCustomWidgets(null!)).not.toThrow()
+    })
  })

  describe('inputIsWidget', () => {
--- a/src/stores/widgetStore.ts
+++ b/src/stores/widgetStore.ts
@@ -22,6 +22,11 @@ export const useWidgetStore = defineStore('widget', () => {
  function registerCustomWidgets(
    newWidgets: Record<string, ComfyWidgetConstructor>
  ) {
+    // Extensions are untrusted code: `getCustomWidgets` is typed to return
+    // `Record<string, ...>`, but in practice an extension can resolve it to
+    // null/undefined. Guard here so a single misbehaving custom node can't
+    // throw "Cannot convert undefined or null to object" and break app init.
+    if (!newWidgets) return
    for (const [type, widget] of Object.entries(newWidgets)) {
      customWidgets.value.set(type, widget)
    }
Author	SHA1	Message	Date
Matt Miller	47118ef64f	fix(image): handle useImage load errors instead of reporting them as unhandled (#12729 ) ## ELI-5 When an image on the page fails to load — a broken thumbnail, an expired share link, a flaky in-app browser — the app already handles it and shows a fallback. But under the hood, the image helper was also shouting "uncaught error!" to the browser's global error channel every time. Our monitoring hears that shout and logs it as a crash. With enough broken images (some in-app browsers retry in a loop), it became the single loudest "error" in our telemetry — for something that isn't actually broken. This tells the helper to handle the failure quietly instead of shouting. ## What `useImage()` (from `@vueuse/core`) exposes load failures via its `error` ref, which every call site here already uses to render a fallback. But vueuse's default `onError` forwards the error to `globalThis.reportError`, so each failed `<img>` load also surfaces as an unhandled error to global error monitoring. This makes failed image loads — 404'd thumbnails, expired share links, in-app webviews that re-fetch on a loop — the highest-volume unhandled frontend error in our production telemetry, despite being expected and already handled in the UI. ## Fix Pass an explicit `onError` (a documented no-op) as the `useAsyncState` options argument at all four `useImage()` call sites: - `components/common/ComfyImage.vue` - `platform/workflow/sharing/components/ShareAssetThumbnail.vue` - `platform/assets/components/MediaImageTop.vue` - `platform/assets/components/AssetCard.vue` The `error` ref is still set by `useAsyncState` before `onError` runs, so the fallback-UI behaviour is unchanged — the only difference is we stop re-reporting handled failures to the global error handler. ## Test plan - [x] No behavioural change to the `error` ref / fallback rendering (verified against vueuse `useImage`/`useAsyncState` semantics: `error.value` is assigned independently of `onError`). - [ ] CI lint/format/type checks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: GitHub Action <action@github.com>	2026-06-09 18:36:21 +00:00
Matt Miller	f110af79f7	fix(widgetStore): tolerate null/undefined custom widgets from extensions (#12728 ) ## ELI-5 Some custom nodes have a `getCustomWidgets()` function that's supposed to hand us a list of widgets. A few of them hand us back nothing (null/undefined) instead. We were trying to read that "nothing" like a list, which crashes with "Cannot convert undefined or null to object" — and because it happens while the app is still starting up, it can break the whole page. This PR just says "if there's nothing to register, skip it." ## What `registerCustomWidgets` called `Object.entries(newWidgets)` directly. When an extension's `getCustomWidgets()` resolves to `null`/`undefined` (it's typed non-null, but extensions are untrusted and routinely violate the type), this throws `TypeError: Cannot convert undefined or null to object`. The call site in `extensionService.ts` runs this inside a bare async IIFE, outside the `wrapWithErrorHandling` wrappers used for keybindings/settings, so the throw is unhandled and surfaces during app initialization. ## Why it matters In production this is one of the highest-volume unhandled frontend errors — ~2.6k events across ~1,160 distinct sessions/day, all funneling through this one `Object.entries` call. Guarding the choke point silences it for every caller. ## Fix - Keep `registerCustomWidgets` typed `Record<string, ComfyWidgetConstructor>` (the correct internal contract) and early-return on nullish input. The runtime guard defends against untrusted extensions that violate the type at the boundary, without weakening the signature for legitimate callers. - Add a regression test asserting `registerCustomWidgets(null!/undefined!)` does not throw (the `!` casts simulate the boundary violation). ## Test plan - [x] `npx vitest run src/stores/widgetStore.test.ts` — 8 passing, including the new null/undefined case. 🤖 Generated with [Claude Code](https://claude.com/claude-code)	2026-06-09 18:32:51 +00:00
Steven Tran	8972d27689	refactor(telemetry): route execution events to GTM only (MAR-282) (#12717 ) ## Summary Client-side execution events (`execution_start` / `execution_success` / `execution_error`) are now emitted only by the GTM provider, removing the redundant Mixpanel and PostHog emissions that duplicated the server-side PostHog execution pipeline. ## Changes - Removed `trackWorkflowExecution`, `trackExecutionError`, and `trackExecutionSuccess` from `MixpanelTelemetryProvider` and `PostHogTelemetryProvider`, along with the now-unused `lastTriggerSource` field and related type imports. - Kept these methods on `GtmTelemetryProvider`. The `TelemetryProvider` interface declares them optional and `TelemetryRegistry` dispatches via optional chaining, so callers are unchanged and Mixpanel/PostHog simply receive nothing for these events. - Added GTM unit tests for `execution_start` and `execution_success` (alongside the existing `execution_error` test) to pin the remaining client-side path. ## Review Focus - Execution telemetry on the client now flows exclusively to GTM; PostHog execution data is expected to come solely from the server side, so there should be no double-counting. - The server-side PostHog execution pipeline is out of scope for this frontend change — this PR only stops the client from emitting duplicate execution events. Reference: MAR-282 Prior context: Comfy-Org PR #3423. Co-authored-by: Steven Tran <steventran@Stevens-MacBook-Air.local>	2026-06-09 17:26:34 +00:00
jaeone94	72d1261983	[bugfix] Use Desktop2 bridge for missing model downloads (#12710 ) ## Summary Fixes the Desktop2 missing-model download path so the frontend calls the Desktop2 download bridge directly when it is available, instead of relying on the browser `<a download>` fallback that Desktop2 currently has to intercept indirectly. This addresses Linear FE-956, where missing-model downloads on Windows could open the OS Save As dialog. The issue was reproducible when the frontend language was not English: switching the UI language back to English made the download succeed again. ## Root Cause Desktop2 currently has compatibility logic that watches/intercepts the frontend missing-model download flow from outside the FE code. That interception depends on FE-rendered DOM details, including localized accessible labels such as the missing-model download button `aria-label`. In English, Desktop2 could find the expected download controls and cache the missing-model metadata before the FE-created `<a>` download was clicked. In non-English locales, the localized label no longer matched Desktop2's selector, so the Desktop2 interception path missed the download. The FE then continued down the browser download path, which Electron surfaced as a native Save As dialog on Windows. ## Changes - Adds a narrow Desktop2 runtime bridge check in `missingModelDownload.ts`: - if `window.__comfyDesktop2.downloadModel` exists - and `window.__comfyDesktop2Remote` is not set - then FE calls `window.__comfyDesktop2.downloadModel(model.url, model.name, model.directory)` directly and returns early. - Keeps remote Desktop2 sessions on the existing browser fallback path by preserving the `__comfyDesktop2Remote` guard. - Leaves the existing OSS browser fallback and legacy desktop `isDesktop` download-store path intact. - Logs Desktop2 bridge failures so rejected promises or synchronous bridge throws do not become unhandled errors. - Adds regression coverage for: - Desktop2 bridge path taking priority over browser and legacy desktop fallbacks. - rejected Desktop2 bridge calls being logged without falling back to browser download. - synchronously thrown Desktop2 bridge failures being logged without crashing or falling back to browser download. - remote Desktop2 sessions continuing to use browser fallback. ## User Impact Desktop2 users should no longer depend on localized FE DOM text for missing-model downloads. In particular, non-English UI locales should route missing-model downloads through Desktop2's managed downloader instead of opening the OS Save As dialog. ## Validation - Manually verified the issue is fixed in Desktop2 using a locally built FE dist served through ComfyUI with `--front-end-root`. - Verified Korean locale no longer triggers the Save As dialog and the missing-model download succeeds through Desktop2. - Verified the new regression test fails when the production bridge fix is reverted. - Covered the FE-side contract with unit tests because a true end-to-end assertion of the Windows native Save As dialog is not currently practical in the FE browser-test infrastructure. The FE tests can verify that clicking missing-model download routes into `window.__comfyDesktop2.downloadModel`; they cannot directly prove Electron/Windows native dialog behavior. That full native-dialog regression belongs in Desktop2/Electron integration coverage. - Ran: - `pnpm exec oxfmt --check src/platform/missingModel/missingModelDownload.ts src/platform/missingModel/missingModelDownload.test.ts` - `pnpm lint:unstaged` - `pnpm exec vitest run src/platform/missingModel/missingModelDownload.test.ts` - `pnpm typecheck` - `pnpm build` - Pre-commit hook passed: `oxfmt`, `oxlint`, `eslint`, `typecheck`. - Pre-push hook passed: `knip --cache` completed with existing tag hints only. - Ran a 3-round local Claude review loop; final verdict was approve with no Blocker/Major findings. ## Follow-up Work - Define and document the FE/Desktop2 bridge contract explicitly, including the expected semantics of `downloadModel` resolving `false` versus rejecting. - Add a shared or canonical TypeScript declaration for `window.__comfyDesktop2` and `window.__comfyDesktop2Remote` if more FE code starts depending on these globals. - Remove Desktop2's DOM/aria/class-based missing-model download interception after a sufficient FE compatibility window, so Desktop2 no longer depends on FE DOM structure or localized labels. - Add Desktop2 integration/e2e coverage for missing-model downloads in non-English locales, ideally including Windows where the Save As dialog was observed. This is the right layer for a true native Save As regression test. - Optionally add a lighter FE browser E2E that injects a fake `window.__comfyDesktop2.downloadModel` and verifies the missing-model UI calls that bridge. This would validate the FE contract, but it would still not replace Desktop2/Electron coverage for native dialog behavior. - Decide on user-facing failure UX for Desktop2 bridge download failures once Desktop2 defines whether failures, cancellations, and already-queued downloads are represented by rejection or by `false`. ## Notes This intentionally does not fall back to browser download when the Desktop2 bridge resolves `false`. Falling back there could reintroduce the exact Save As dialog behavior this PR fixes, and the meaning of `false` should be clarified in the Desktop2 bridge contract before FE invents user-facing behavior for it. A true E2E test for this bug would need to exercise Desktop2/Electron on Windows and assert that the native Save As dialog is not opened. The current FE browser-test infrastructure cannot observe that native Desktop2 behavior directly, so this PR uses focused unit regression coverage for the FE routing contract plus manual Desktop2 verification.	2026-06-09 16:42:19 +00:00