Filter chips on any card that shows a health dot

Reported from the Activity card: the header dot was red while every visible row
was info, because the critical event was older and sat further down the list.
The dot and the list appeared to contradict each other, and the only way to
find the critical was to scroll.

The dot is computed from all rows the panel received, so a red dot always means
a critical IS in the data. The chips are computed from that same array, which
means the count sits directly under the dot and the two cannot disagree by
construction: the card now reads 'Critical 2  Warning 1  Info 12', and one
click surfaces them wherever they sit in time.

Derived from the panel's EXISTING status declaration rather than a new one per
panel. A card that shows a health dot has already said what it dots on, so
Tracked Services and Tracked Processes get chips with no plugin change, and any
future list panel with a status rollup does too. Two declarations of the same
thing would eventually disagree.

Details that matter: a colour-keyed panel is labelled by meaning, so services
read Critical and OK rather than Red and Green; chips are ordered worst first
rather than alphabetically; and no selection means show everything, not hide
everything - a card that emptied when you deselected the last chip would read
as broken. Filtering to nothing says so, and gives the hidden count.

vitest 267 passed, including the exact reported case.

frontend/src/components/PluginAssetPanels.vue

@@ -31,8 +31,25 @@
 
       <!-- list: items each with a title, optional status badge, meta lines -->
       <div v-if="panel.render === 'list'" class="pap-list">
-        <template v-if="rows(panel).length">
-          <div v-for="(item, index) in rows(panel)" :key="index" class="pap-item">
+        <!-- Filter chips for any list panel that shows a health dot. Client
+             side over rows already fetched, so the counts cannot disagree with
+             what is on screen. -->
+        <div v-if="facets(panel).length > 1" class="pap-facets">
+          <button
+            v-for="facet in facets(panel)"
+            :key="facet.value"
+            type="button"
+            class="pap-facet"
+            :class="{ on: isFacetOn(panel, facet.value) }"
+            @click="toggleFacet(panel, facet.value)"
+          >{{ facet.label }} <span class="pap-facet-count">{{ facet.count }}</span></button>
+          <button v-if="facetSelection[panel.id] && facetSelection[panel.id].length"
+                  type="button" class="pap-facet pap-facet-clear"
+                  @click="facetSelection[panel.id] = []">Clear</button>
+        </div>
+
+        <template v-if="visibleRows(panel).length">
+          <div v-for="(item, index) in visibleRows(panel)" :key="index" class="pap-item">
             <div class="pap-item-top">
               <span class="pap-title">{{ mapTitle(panel, item) }}</span>
               <span v-if="mapBadge(panel, item)" class="status-badge"
@@ -59,6 +76,9 @@
             {{ actionError[panel.id] }}
           </div>
         </template>
+        <div v-else-if="rows(panel).length" class="pap-empty">
+          Nothing matches that filter. {{ rows(panel).length }} row(s) hidden.
+        </div>
         <div v-else class="pap-empty">
           <span class="muted">{{ panel.empty || 'Nothing to show.' }}</span>
           <router-link v-if="panel.manage" :to="manageLink(panel, assetid)" class="pap-manage">
@@ -135,9 +155,32 @@ import { colorStyle } from '@/utils/colorStyle'
 import {
   toApiPath, rows, panelVisible, mapTitle, mapBadge, mapMeta, manageLink,
   keyvalueFields, tableColumns, cell, badges, tabSections, rollupStatus,
-  rowAction,
+  rowAction, facets, facetedRows,
 } from './pluginAssetPanels'
 
+// Which filter chips are active, per panel id. Deliberately NOT reset when the
+// data refreshes: a viewer who filtered to criticals and then hit refresh means
+// to still be looking at criticals.
+const facetSelection = ref({})
+
+function isFacetOn(panel, value) {
+  return (facetSelection.value[panel.id] || []).includes(value)
+}
+
+function toggleFacet(panel, value) {
+  const current = facetSelection.value[panel.id] || []
+  facetSelection.value = {
+    ...facetSelection.value,
+    [panel.id]: current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value],
+  }
+}
+
+function visibleRows(panel) {
+  return facetedRows(panel, facetSelection.value[panel.id])
+}
+
 const props = defineProps({
   assetid: { type: [Number, String], default: null },
 })
@@ -302,6 +345,33 @@ defineExpose({ refresh: load })
 .status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
 .pap-meta { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--text-light); }
 .pap-empty { display: flex; align-items: center; gap: 0.6rem; }
+
+.pap-facets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 0.6rem;
+}
+
+.pap-facet {
+  font: inherit;
+  font-size: 0.78rem;
+  line-height: 1.6;
+  padding: 0.05rem 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-light);
+  cursor: pointer;
+}
+
+.pap-facet:hover { border-color: var(--primary); }
+.pap-facet.on { border-color: var(--primary); color: var(--primary); }
+.pap-facet-clear { border-style: dashed; }
+
+/* The count is the point: a red dot over a list of info rows is confusing
+   until the chip says "Critical 2" and one click shows them. */
+.pap-facet-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
 .pap-manage { font-size: 0.82rem; }
 /* Two aligned columns rather than space-between: a ragged right edge is hard
    to scan once a panel carries more than a handful of rows, and a long value