From fea084096dd469bcc720f27a99eeebca75383650 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Mon, 2 Jun 2025 18:37:20 -0400
Subject: [PATCH 1/9] Update to new card design

---
 .../content/manager/ManagerDialogContent.vue  | 28 ++++--
 .../content/manager/packBanner/PackBanner.vue | 41 ++++++++
 .../content/manager/packCard/PackCard.vue     | 93 ++++++++++++-------
 .../manager/packCard/PackCardFooter.vue       | 33 +++----
 4 files changed, 129 insertions(+), 66 deletions(-)
 create mode 100644 src/components/dialog/content/manager/packBanner/PackBanner.vue

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index f2fe93982f..6aeb18a089 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -408,19 +408,27 @@ const handleGridContainerClick = (event: MouseEvent) => {
 
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
 
+// Track the last pack ID for which we've fetched full registry data
+const lastFetchedPackId = ref<string | null>(null)
+
+// Whenever a single pack is selected, fetch its full info once
 whenever(selectedNodePack, async () => {
-  // Cancel any in-flight requests from previously selected node pack
   getPackById.cancel()
-
-  if (!selectedNodePack.value?.id) return
-
-  // If only a single node pack is selected, fetch full node pack info from registry
+  const pack = selectedNodePack.value
+  if (!pack?.id) return
   if (hasMultipleSelections.value) return
-  const data = await getPackById.call(selectedNodePack.value.id)
-
-  if (data?.id === selectedNodePack.value?.id) {
-    // If selected node hasn't changed since request, merge registry & Algolia data
-    selectedNodePacks.value = [merge(selectedNodePack.value, data)]
+  // Only fetch if we haven't already for this pack
+  if (lastFetchedPackId.value === pack.id) return
+  const data = await getPackById.call(pack.id)
+  if (data?.id === pack.id) {
+    lastFetchedPackId.value = pack.id
+    const mergedPack = merge({}, pack, data)
+    selectedNodePacks.value = [mergedPack]
+    // Replace pack in displayPacks so that children receive a fresh prop reference
+    const idx = displayPacks.value.findIndex((p) => p.id === mergedPack.id)
+    if (idx !== -1) {
+      displayPacks.value.splice(idx, 1, mergedPack)
+    }
   }
 })
 
diff --git a/src/components/dialog/content/manager/packBanner/PackBanner.vue b/src/components/dialog/content/manager/packBanner/PackBanner.vue
new file mode 100644
index 0000000000..7e2c2e7100
--- /dev/null
+++ b/src/components/dialog/content/manager/packBanner/PackBanner.vue
@@ -0,0 +1,41 @@
+<template>
+  <img
+    :src="isImageError ? DEFAULT_BANNER : imgSrc"
+    :alt="nodePack.name + ' banner'"
+    class="w-full h-full object-cover rounded-t-lg cursor-pointer"
+    :style="{ width: cssWidth, height: cssHeight }"
+    @error="isImageError = true"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { components } from '@/types/comfyRegistryTypes'
+
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
+
+const {
+  nodePack,
+  width = '100%',
+  height = '12rem'
+} = defineProps<{
+  nodePack: components['schemas']['Node'] & { banner?: string }
+  width?: string
+  height?: string
+}>()
+
+const isImageError = ref(false)
+const shouldShowFallback = computed(
+  () => !nodePack.banner || nodePack.banner.trim() === '' || isImageError.value
+)
+const imgSrc = computed(() =>
+  shouldShowFallback.value ? DEFAULT_BANNER : nodePack.banner
+)
+
+const convertToCssValue = (value: string | number) =>
+  typeof value === 'number' ? `${value}rem` : value
+
+const cssWidth = computed(() => convertToCssValue(width))
+const cssHeight = computed(() => convertToCssValue(height))
+</script>
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 5cd3c98a99..75f377070a 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -7,19 +7,14 @@
     }"
     :pt="{
       body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
-      content: { class: 'flex-1 flex flex-col rounded-2xl' },
-      title: {
-        class:
-          'self-stretch w-full px-4 py-3 inline-flex justify-start items-center gap-6'
-      },
+      content: { class: 'flex-1 flex flex-col rounded-2xl min-h-0' },
       footer: { class: 'p-0 m-0' }
     }"
   >
     <template #title>
-      <PackCardHeader :node-pack="nodePack" />
+      <PackBanner :node-pack="nodePack" />
     </template>
     <template #content>
-      <ContentDivider />
       <template v-if="isInstalling">
         <div
           class="self-stretch inline-flex flex-col justify-center items-center gap-2 h-full"
@@ -34,46 +29,67 @@
       </template>
       <template v-else>
         <div
-          class="self-stretch px-4 py-3 inline-flex justify-start items-start cursor-pointer"
+          class="self-stretch inline-flex flex-col justify-start items-start"
         >
-          <PackIcon :node-pack="nodePack" />
           <div
-            class="px-4 inline-flex flex-col justify-start items-start overflow-hidden"
+            class="px-4 py-3 inline-flex justify-start items-start cursor-pointer w-full"
           >
-            <span
-              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
-            >
-              {{ nodePack.name }}
-            </span>
             <div
-              class="self-stretch inline-flex justify-center items-center gap-2.5"
+              class="inline-flex flex-col justify-start items-start overflow-hidden gap-y-3 w-full"
             >
+              <span
+                class="text-base font-bold truncate overflow-hidden text-ellipsis"
+              >
+                {{ nodePack.name }}
+              </span>
               <p
                 v-if="nodePack.description"
-                class="flex-1 justify-start text-muted text-sm font-medium leading-3 break-words overflow-hidden min-h-12 line-clamp-3"
+                class="flex-1 justify-start text-muted text-sm font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-5"
               >
                 {{ nodePack.description }}
               </p>
-            </div>
-            <div
-              class="self-stretch inline-flex justify-start items-center gap-2"
-            >
-              <div
-                v-if="nodesCount"
-                class="px-2 py-1 flex justify-center text-sm items-center gap-1"
-              >
-                <div class="text-center justify-center font-medium leading-3">
-                  {{ nodesCount }} {{ $t('g.nodes') }}
-                </div>
-              </div>
-              <div class="px-2 py-1 flex justify-center items-center gap-1">
+              <div class="flex flex-col gap-y-2">
                 <div
-                  v-if="isUpdateAvailable"
-                  class="w-4 h-4 relative overflow-hidden"
+                  class="self-stretch inline-flex justify-start items-center gap-1"
                 >
-                  <i class="pi pi-arrow-circle-up text-blue-600" />
+                  <div
+                    v-if="nodesCount"
+                    class="pr-2 py-1 flex justify-center text-sm items-center gap-1"
+                  >
+                    <div
+                      class="text-center justify-center font-medium leading-3"
+                    >
+                      {{ nodesCount }} {{ $t('g.nodes') }}
+                    </div>
+                  </div>
+                  <div class="px-2 py-1 flex justify-center items-center gap-1">
+                    <div
+                      v-if="isUpdateAvailable"
+                      class="w-4 h-4 relative overflow-hidden"
+                    >
+                      <i class="pi pi-arrow-circle-up text-blue-600" />
+                    </div>
+                    <PackVersionBadge :node-pack="nodePack" />
+                  </div>
+                  <div
+                    v-if="nodePack.latest_version?.createdAt"
+                    class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
+                  >
+                    {{
+                      $d(new Date(nodePack.latest_version.createdAt), {
+                        dateStyle: 'medium'
+                      })
+                    }}
+                  </div>
+                </div>
+                <div class="flex">
+                  <span
+                    v-if="publisherName"
+                    class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+                  >
+                    {{ publisherName }}
+                  </span>
                 </div>
-                <PackVersionBadge :node-pack="nodePack" />
               </div>
             </div>
           </div>
@@ -95,8 +111,8 @@ import { computed, provide, ref } from 'vue'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
+import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
@@ -122,4 +138,11 @@ whenever(isInstalled, () => (isInstalling.value = false))
 
 // TODO: remove type assertion once comfy_nodes is added to node (pack) info type in backend
 const nodesCount = computed(() => (nodePack as any).comfy_nodes?.length)
+
+const publisherName = computed(() => {
+  if (!nodePack) return null
+
+  const { publisher, author } = nodePack
+  return publisher?.name ?? publisher?.id ?? author
+})
 </script>
diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
index a4423d1643..08d590fb7f 100644
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -1,39 +1,30 @@
 <template>
   <div
-    class="flex justify-between px-5 py-4 text-xs text-muted font-medium leading-3"
+    class="flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
   >
-    <div class="flex items-center gap-2 cursor-pointer">
-      <span v-if="publisherName" class="max-w-40 truncate">
-        {{ publisherName }}
-      </span>
-    </div>
-    <div
-      v-if="nodePack.latest_version?.createdAt"
-      class="flex items-center gap-2 truncate"
-    >
-      {{ $t('g.updated') }}
-      {{
-        $d(new Date(nodePack.latest_version.createdAt), {
-          dateStyle: 'medium'
-        })
-      }}
+    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
+      <i class="pi pi-download text-muted"></i>
+      <span>{{ formattedDownloads }}</span>
     </div>
+    <div v-else></div>
+    <PackInstallButton :node-packs="[nodePack]" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
-const publisherName = computed(() => {
-  if (!nodePack) return null
+const { n } = useI18n()
 
-  const { publisher, author } = nodePack
-  return publisher?.name ?? publisher?.id ?? author
-})
+const formattedDownloads = computed(() =>
+  nodePack.downloads ? n(nodePack.downloads) : ''
+)
 </script>

From 8e96c8c4e90123407b8daafbf80011016f73b573 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Wed, 4 Jun 2025 09:28:53 -0400
Subject: [PATCH 2/9] Move some card specific styling back to pt

---
 .../dialog/content/manager/packBanner/PackBanner.vue          | 4 ++--
 src/components/dialog/content/manager/packCard/PackCard.vue   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/content/manager/packBanner/PackBanner.vue b/src/components/dialog/content/manager/packBanner/PackBanner.vue
index 7e2c2e7100..e65bb92956 100644
--- a/src/components/dialog/content/manager/packBanner/PackBanner.vue
+++ b/src/components/dialog/content/manager/packBanner/PackBanner.vue
@@ -2,7 +2,7 @@
   <img
     :src="isImageError ? DEFAULT_BANNER : imgSrc"
     :alt="nodePack.name + ' banner'"
-    class="w-full h-full object-cover rounded-t-lg cursor-pointer"
+    class="object-cover"
     :style="{ width: cssWidth, height: cssHeight }"
     @error="isImageError = true"
   />
@@ -20,7 +20,7 @@ const {
   width = '100%',
   height = '12rem'
 } = defineProps<{
-  nodePack: components['schemas']['Node'] & { banner?: string }
+  nodePack: components['schemas']['Node'] & { banner?: string } //
   width?: string
   height?: string
 }>()
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 75f377070a..e79c430084 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -8,6 +8,7 @@
     :pt="{
       body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
       content: { class: 'flex-1 flex flex-col rounded-2xl min-h-0' },
+      titlle: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
       footer: { class: 'p-0 m-0' }
     }"
   >

From cb35670fed1bba5f3750cf3df51c9bc229097e0e Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Wed, 4 Jun 2025 09:29:31 -0400
Subject: [PATCH 3/9] Explanatory comment

---
 src/components/dialog/content/manager/packBanner/PackBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/content/manager/packBanner/PackBanner.vue b/src/components/dialog/content/manager/packBanner/PackBanner.vue
index e65bb92956..d7386cb546 100644
--- a/src/components/dialog/content/manager/packBanner/PackBanner.vue
+++ b/src/components/dialog/content/manager/packBanner/PackBanner.vue
@@ -20,7 +20,7 @@ const {
   width = '100%',
   height = '12rem'
 } = defineProps<{
-  nodePack: components['schemas']['Node'] & { banner?: string } //
+  nodePack: components['schemas']['Node'] & { banner?: string } // Temporary measure until banner is in backend
   width?: string
   height?: string
 }>()

From b9110e157ac244e68db45cd0bc4924a680c33636 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Wed, 4 Jun 2025 09:48:49 -0400
Subject: [PATCH 4/9] remove empty div

---
 .../dialog/content/manager/packCard/PackCardFooter.vue           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
index 08d590fb7f..9630b096da 100644
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -6,7 +6,6 @@
       <i class="pi pi-download text-muted"></i>
       <span>{{ formattedDownloads }}</span>
     </div>
-    <div v-else></div>
     <PackInstallButton :node-packs="[nodePack]" />
   </div>
 </template>

From 771e1320ed09770c164cf93df828890aee678843 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Thu, 5 Jun 2025 00:02:22 -0400
Subject: [PATCH 5/9] Update
 src/components/dialog/content/manager/packCard/PackCard.vue

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
---
 src/components/dialog/content/manager/packCard/PackCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index e79c430084..a38d1456d2 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -8,7 +8,7 @@
     :pt="{
       body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
       content: { class: 'flex-1 flex flex-col rounded-2xl min-h-0' },
-      titlle: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
+      title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
       footer: { class: 'p-0 m-0' }
     }"
   >

From 9c31fa2bb5f9b01c9bb57998071d0897807af1f4 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Thu, 5 Jun 2025 00:10:40 -0400
Subject: [PATCH 6/9] computed date!

---
 .../content/manager/packCard/PackCard.vue     | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index a38d1456d2..45afb2c3b9 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -73,14 +73,10 @@
                     <PackVersionBadge :node-pack="nodePack" />
                   </div>
                   <div
-                    v-if="nodePack.latest_version?.createdAt"
+                    v-if="formattedLatestVersionDate"
                     class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
                   >
-                    {{
-                      $d(new Date(nodePack.latest_version.createdAt), {
-                        dateStyle: 'medium'
-                      })
-                    }}
+                    {{ formattedLatestVersionDate }}
                   </div>
                 </div>
                 <div class="flex">
@@ -109,6 +105,7 @@ import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
@@ -124,6 +121,8 @@ const { nodePack, isSelected = false } = defineProps<{
   isSelected?: boolean
 }>()
 
+const { d } = useI18n()
+
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
@@ -146,4 +145,12 @@ const publisherName = computed(() => {
   const { publisher, author } = nodePack
   return publisher?.name ?? publisher?.id ?? author
 })
+
+const formattedLatestVersionDate = computed(() => {
+  if (!nodePack.latest_version?.createdAt) return null
+
+  return d(new Date(nodePack.latest_version.createdAt), {
+    dateStyle: 'medium'
+  })
+})
 </script>

From ebb26caa5a554b1d62dfb432b5ac793b2377e259 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Thu, 5 Jun 2025 00:17:02 -0400
Subject: [PATCH 7/9] readd deleted comments

---
 src/components/dialog/content/manager/ManagerDialogContent.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 6aeb18a089..8fde846d76 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -413,13 +413,16 @@ const lastFetchedPackId = ref<string | null>(null)
 
 // Whenever a single pack is selected, fetch its full info once
 whenever(selectedNodePack, async () => {
+  // Cancel any in-flight requests from previously selected node pack
   getPackById.cancel()
+  // If only a single node pack is selected, fetch full node pack info from registry
   const pack = selectedNodePack.value
   if (!pack?.id) return
   if (hasMultipleSelections.value) return
   // Only fetch if we haven't already for this pack
   if (lastFetchedPackId.value === pack.id) return
   const data = await getPackById.call(pack.id)
+  // If selected node hasn't changed since request, merge registry & Algolia data
   if (data?.id === pack.id) {
     lastFetchedPackId.value = pack.id
     const mergedPack = merge({}, pack, data)

From 228b4d4a1474b335b70e2da19fbb0d6f7f87c12d Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Thu, 5 Jun 2025 09:33:33 -0400
Subject: [PATCH 8/9] remove duplicated caching

---
 .../dialog/content/manager/ManagerDialogContent.vue         | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 8fde846d76..c331ae3df7 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -408,9 +408,6 @@ const handleGridContainerClick = (event: MouseEvent) => {
 
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
 
-// Track the last pack ID for which we've fetched full registry data
-const lastFetchedPackId = ref<string | null>(null)
-
 // Whenever a single pack is selected, fetch its full info once
 whenever(selectedNodePack, async () => {
   // Cancel any in-flight requests from previously selected node pack
@@ -419,12 +416,9 @@ whenever(selectedNodePack, async () => {
   const pack = selectedNodePack.value
   if (!pack?.id) return
   if (hasMultipleSelections.value) return
-  // Only fetch if we haven't already for this pack
-  if (lastFetchedPackId.value === pack.id) return
   const data = await getPackById.call(pack.id)
   // If selected node hasn't changed since request, merge registry & Algolia data
   if (data?.id === pack.id) {
-    lastFetchedPackId.value = pack.id
     const mergedPack = merge({}, pack, data)
     selectedNodePacks.value = [mergedPack]
     // Replace pack in displayPacks so that children receive a fresh prop reference

From ed2c66b05f42a64b7b402da5063fda77d126d814 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Fri, 6 Jun 2025 00:08:14 -0400
Subject: [PATCH 9/9] Revert "remove duplicated caching"

This reverts commit 228b4d4a1474b335b70e2da19fbb0d6f7f87c12d.
---
 .../dialog/content/manager/ManagerDialogContent.vue         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index c331ae3df7..8fde846d76 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -408,6 +408,9 @@ const handleGridContainerClick = (event: MouseEvent) => {
 
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
 
+// Track the last pack ID for which we've fetched full registry data
+const lastFetchedPackId = ref<string | null>(null)
+
 // Whenever a single pack is selected, fetch its full info once
 whenever(selectedNodePack, async () => {
   // Cancel any in-flight requests from previously selected node pack
@@ -416,9 +419,12 @@ whenever(selectedNodePack, async () => {
   const pack = selectedNodePack.value
   if (!pack?.id) return
   if (hasMultipleSelections.value) return
+  // Only fetch if we haven't already for this pack
+  if (lastFetchedPackId.value === pack.id) return
   const data = await getPackById.call(pack.id)
   // If selected node hasn't changed since request, merge registry & Algolia data
   if (data?.id === pack.id) {
+    lastFetchedPackId.value = pack.id
     const mergedPack = merge({}, pack, data)
     selectedNodePacks.value = [mergedPack]
     // Replace pack in displayPacks so that children receive a fresh prop reference