refactor: replace PrimeVue Chip with custom Tag component

- SearchFilterChip: PrimeVue Chip+Badge → Tag (removable) + Badge
- NodeSearchItem: PrimeVue Chip → Tag (aliased as ChipTag to avoid
  name collision with PrimeVue Tag, which migrates in a follow-up PR)
- DownloadItem: PrimeVue Chip (removable) → Tag (removable)
- Update E2E selectors from .p-chip-remove-icon to accessible
  getByRole('button', { name: 'Remove' })

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -85,7 +85,10 @@ export class ComfyNodeSearchBox {
   }
 
   async removeFilter(index: number) {
-    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
+    await this.filterChips
+      .nth(index)
+      .getByRole('button', { name: 'Remove' })
+      .click()
   }
 
   /**

browser_tests/tests/nodeSearchBox.spec.ts

@@ -110,7 +110,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
     async ({ comfyPage }) => {
       await comfyPage.canvasOps.disconnectEdge()
       await expect(comfyPage.searchBox.input).toHaveCount(1)
-      await comfyPage.page.locator('.p-chip-remove-icon').click()
+      await comfyPage.searchBox.removeFilter(0)
       await comfyPage.searchBox.fillAndSelectFirstNode('KSampler', {
         exact: true
       })

src/components/common/SearchFilterChip.vue

@@ -1,17 +1,23 @@
 <template>
-  <Chip removable @remove="emit('remove', $event)">
-    <Badge size="small" :class="semanticBadgeClass">
-      {{ badge }}
-    </Badge>
-    {{ text }}
-  </Chip>
+  <Tag
+    :label="text"
+    shape="rounded"
+    removable
+    class="bg-surface-700"
+    @remove="emit('remove', $event)"
+  >
+    <template #icon>
+      <Badge :label="badge" :class="semanticBadgeClass" />
+    </template>
+  </Tag>
 </template>
 
 <script setup lang="ts">
-import Badge from 'primevue/badge'
-import Chip from 'primevue/chip'
 import { computed } from 'vue'
 
+import Badge from '@/components/common/Badge.vue'
+import Tag from '@/components/chip/Tag.vue'
+
 export interface SearchFilter {
   text: string
   badge: string

src/components/searchbox/NodeSearchItem.vue

@@ -37,18 +37,17 @@
         :value="formatNumberWithSuffix(nodeFrequency, { roundToInt: true })"
         severity="secondary"
       />
-      <Chip
+      <ChipTag
         v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
+        :label="nodeDef.nodeSource.displayText"
         class="text-sm font-light"
-      >
-        {{ nodeDef.nodeSource.displayText }}
-      </Chip>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
+import ChipTag from '@/components/chip/Tag.vue'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -4,13 +4,12 @@
       {{ getDownloadLabel(download.savePath ?? '') }}
     </div>
     <div v-if="['cancelled', 'error'].includes(download.status ?? '')">
-      <Chip
-        class="mt-2 h-6 bg-red-700 text-sm font-light"
+      <Tag
+        :label="t('electronFileDownload.cancelled')"
+        class="mt-2 bg-red-700 text-sm font-light"
         removable
         @remove="handleRemoveDownload"
-      >
-        {{ t('electronFileDownload.cancelled') }}
-      </Chip>
+      />
     </div>
     <div
       v-if="
@@ -67,8 +66,9 @@
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
 import ProgressBar from 'primevue/progressbar'
+
+import Tag from '@/components/chip/Tag.vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'