test: cover missing node pack error interactions

browser_tests/assets/missing/missing_nodes_same_pack.json

@@ -0,0 +1,48 @@
+{
+  "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
+}

browser_tests/fixtures/selectors.ts

@@ -45,6 +45,8 @@ 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',

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' }, () => {
+test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
@@ -12,97 +12,97 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
     )
   })
 
-  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 }) => {
+  test('Should show missing node pack card with guidance', 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 expand pack group to reveal node type names', async ({
+  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 ({
     comfyPage
   }) => {
     await loadWorkflowAndOpenErrorsTab(
       comfyPage,
-      'missing/missing_nodes_in_subgraph'
+      'missing/missing_nodes_same_pack'
     )
 
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await expect(missingNodeCard).toBeVisible()
-
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
-  })
-
-  test('Should collapse expanded pack group', 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()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).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
+    const packTitle = missingNodeCard.getByRole('button', {
+      name: 'test-missing-node-pack'
     })
-    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.
+    const expandButton = missingNodeCard
+      .getByTestId(TestIds.dialogs.missingNodePackExpand)
+      .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()
+    await expect(
+      missingNodeCard.getByTestId(TestIds.dialogs.missingNodePackCount)
+    ).toHaveText('2')
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await expandButton.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
+
+    await packTitle.click()
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await packTitle.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
   })
 })

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -71,12 +71,11 @@ 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', 'showNodeIdBadge'],
+    props: ['group', 'showInfoButton'],
     emits: ['locate-node', 'open-manager-info']
   }
 }))
@@ -122,7 +121,6 @@ function makePackGroups(count = 2): MissingPackGroup[] {
 function renderCard(
   props: Partial<{
     showInfoButton: boolean
-    showNodeIdBadge: boolean
     missingPackGroups: MissingPackGroup[]
   }> = {}
 ) {
@@ -130,7 +128,6 @@ function renderCard(
   const result = render(MissingNodeCard, {
     props: {
       showInfoButton: false,
-      showNodeIdBadge: false,
       missingPackGroups: makePackGroups(),
       ...props
     },
@@ -169,12 +166,10 @@ describe('MissingNodeCard', () => {
 
     it('passes props correctly to MissingPackGroupRow children', () => {
       renderCard({
-        showInfoButton: true,
-        showNodeIdBadge: true
+        showInfoButton: 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')
     })
   })
 
@@ -256,7 +251,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onLocateNode
         },
@@ -279,7 +273,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onOpenManagerInfo
         },

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -56,27 +56,29 @@
         >
       </template>
     </i18n-t>
-    <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 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>
   </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="primary"
+      variant="secondary"
+      size="sm"
       :disabled="isRestarting"
-      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
+      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
       @click="applyChanges()"
     >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
       <i
         v-else
         aria-hidden="true"
@@ -105,9 +107,8 @@ 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, showNodeIdBadge, missingPackGroups } = defineProps<{
+const { showInfoButton, missingPackGroups } = defineProps<{
   showInfoButton: boolean
-  showNodeIdBadge: boolean
   missingPackGroups: MissingPackGroup[]
 }>()
 

src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts

@@ -61,16 +61,16 @@ const i18n = createI18n({
   messages: {
     en: {
       g: {
-        loading: 'Loading'
+        install: 'Install',
+        loading: 'Loading',
+        search: 'Search'
       },
       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,7 +100,6 @@ function renderRow(
   props: Partial<{
     group: MissingPackGroup
     showInfoButton: boolean
-    showNodeIdBadge: boolean
   }> = {}
 ) {
   const user = userEvent.setup()
@@ -110,7 +109,6 @@ function renderRow(
     props: {
       group: makeGroup(),
       showInfoButton: false,
-      showNodeIdBadge: false,
       onLocateNode,
       onOpenManagerInfo,
       ...props
@@ -118,7 +116,6 @@ function renderRow(
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
       stubs: {
-        TransitionCollapse: { template: '<div><slot /></div>' },
         DotSpinner: {
           template: '<span role="status" aria-label="loading" />'
         }
@@ -158,7 +155,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', () => {
@@ -171,38 +168,19 @@ describe('MissingPackGroupRow', () => {
           }))
         })
       })
-      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()
+      expect(screen.getByText('5')).toBeInTheDocument()
     })
   })
 
   describe('Node Type List', () => {
-    async function expand(user: ReturnType<typeof userEvent.setup>) {
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-    }
+    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()
+    })
 
-    it('renders all nodeTypes when expanded', async () => {
+    it('renders all nodeTypes after expanding', async () => {
       const { user } = renderRow({
         group: makeGroup({
           nodeTypes: [
@@ -212,40 +190,87 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
       expect(screen.getByText('NodeA')).toBeInTheDocument()
       expect(screen.getByText('NodeB')).toBeInTheDocument()
       expect(screen.getByText('NodeC')).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 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('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const { user } = renderRow({ showNodeIdBadge: false })
-      await expand(user)
-      expect(screen.queryByText('#10')).not.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('emits locateNode when Locate button is clicked', async () => {
-      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
+    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' }))
+
       await user.click(
         screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
       )
+
       expect(onLocateNode).toHaveBeenCalledWith('10')
     })
 
-    it('does not show Locate for nodeType without nodeId', async () => {
-      const { user } = renderRow({
+    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({
         group: makeGroup({
           nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
         })
       })
-      await expand(user)
       expect(
         screen.queryByRole('button', { name: 'Locate node on canvas' })
       ).not.toBeInTheDocument()
@@ -253,7 +278,6 @@ 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 },
@@ -261,7 +285,7 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
       expect(screen.getByText('WithId')).toBeInTheDocument()
       expect(screen.getByText('WithoutId')).toBeInTheDocument()
       expect(
@@ -274,21 +298,25 @@ describe('MissingPackGroupRow', () => {
     it('hides install UI when shouldShowManagerButtons is false', () => {
       mockShouldShowManagerButtons.value = false
       renderRow()
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
     it('hides install UI when packId is null', () => {
       mockShouldShowManagerButtons.value = true
       renderRow({ group: makeGroup({ packId: null }) })
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
-    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
+    it('shows Search when packId exists but pack not in registry', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = []
       renderRow()
-      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
     })
 
     it('shows "Installed" state when pack is installed', () => {
@@ -312,7 +340,9 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       renderRow()
-      expect(screen.getByText('Install node pack')).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Install' })
+      ).toBeInTheDocument()
     })
 
     it('calls installAllPacks when Install button is clicked', async () => {
@@ -320,9 +350,7 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       const { user } = renderRow()
-      await user.click(
-        screen.getByRole('button', { name: /Install node pack/ })
-      )
+      await user.click(screen.getByRole('button', { name: 'Install' }))
       expect(mockInstallAllPacks).toHaveBeenCalledOnce()
     })
 
@@ -369,7 +397,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()
     })
   })
 })

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -1,187 +1,221 @@
 <template>
-  <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>
+  <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">
       <Button
-        v-if="showInfoButton && group.packId !== null"
+        v-if="hasMultipleNodeTypes"
+        data-testid="missing-node-pack-expand"
         variant="textonly"
-        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 }
-          )
-        "
+        size="unset"
         :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
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+          aria-hidden="true"
+          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
         />
       </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-if="
-              showNodeIdBadge &&
-              typeof nodeType !== 'string' &&
-              nodeType.nodeId != null
+      <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'
+              )
             "
-            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"
+            :aria-expanded="expanded"
+            @click="toggleExpand"
           >
-            #{{ nodeType.nodeId }}
+            {{ 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>
+          <span
+            v-else
+            class="min-w-0 truncate text-sm/relaxed font-normal"
+            :class="
+              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
+            "
+          >
+            <span v-if="group.isResolving" class="text-muted-foreground italic">
+              {{ t('g.loading') }}...
+            </span>
+            <span v-else>
+              {{ packDisplayName }}
+            </span>
           </span>
-          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-            {{ getLabel(nodeType) }}
-          </p>
           <Button
-            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            v-if="showInfoButton && group.packId !== null"
             variant="textonly"
             size="icon-sm"
-            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click="handleLocateNode(nodeType)"
+            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 ?? '')"
           >
-            <i class="icon-[lucide--locate] size-3" />
+            <i class="icon-[lucide--info] size-4" />
           </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
+            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>
-      </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"
-    >
+      </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
-        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"
+        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"
       >
         <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>
-
-    <!-- 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"
-    >
+      <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
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        @click="
-          openManager({
-            initialTab: ManagerTab.All,
-            initialPackId: group.packId!
-          })
-        "
+        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 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>
+        <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'
+          )
+        "
+      >
+        <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>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
@@ -193,10 +227,9 @@ 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, showNodeIdBadge } = defineProps<{
+const { group, showInfoButton } = defineProps<{
   group: MissingPackGroup
   showInfoButton: boolean
-  showNodeIdBadge: boolean
 }>()
 
 const emit = defineEmits<{
@@ -205,6 +238,10 @@ 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()
@@ -219,17 +256,72 @@ 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 (!comfyManagerStore.isPackInstalled(group.packId)) {
+  if (!isPackInstalled.value) {
     void installAllPacks()
   }
 }
 
-const expanded = ref(false)
-
 function toggleExpand() {
-  expanded.value = !expanded.value
+  expandedOverride.value = !expanded.value
 }
 
 function getKey(nodeType: MissingNodeType): string {
@@ -241,10 +333,14 @@ 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 (typeof nodeType === 'string') return
-  if (nodeType.nodeId != null) {
-    emit('locateNode', String(nodeType.nodeId))
-  }
+  if (!isLocatableNodeType(nodeType)) return
+  emit('locateNode', String(nodeType.nodeId))
 }
 </script>

src/components/rightSidePanel/errors/TabErrors.vue

@@ -148,7 +148,6 @@
           <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"

src/locales/en/main.json

@@ -3628,12 +3628,10 @@
       "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"