feat: migrate health score displays to v2 and implement Health Score v2 content spec IN-1212

frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue

@@ -31,6 +31,7 @@ import LfxChip from '~/components/uikit/chip/chip.vue';
 
 const props = defineProps<{
   score: number;
+  healthLabel?: string | null;
   unavailable?: boolean;
 }>();
 
@@ -39,19 +40,32 @@ const props = defineProps<{
 // labeled metrics chip). Duplicated rather than shared: only two call sites (row/card) and the
 // logic is ~10 lines, so a composable would be more ceremony than the duplication it avoids.
 // health-score.vue itself is intentionally left untouched (used elsewhere in the app).
+//
+// Prefers the API's real healthLabel (v2) when present; falls back to deriving the label from
+// the score for sparse rows where the pipe didn't return a label.
 const healthScoreLabel = computed(() => {
+  if (props.healthLabel) {
+    return props.healthLabel.charAt(0).toUpperCase() + props.healthLabel.slice(1);
+  }
   const score = props.score;
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Fair';
-  if (score >= 20) return 'Concerning';
+  if (score >= 85) return 'Excellent';
+  if (score >= 70) return 'Healthy';
+  if (score >= 50) return 'Fair';
+  if (score >= 30) return 'Concerning';
   return 'Critical';
 });
 
 const healthScoreDotClass = computed(() => {
+  if (props.healthLabel) {
+    if (props.healthLabel === 'excellent' || props.healthLabel === 'healthy') return 'bg-health-healthy';
+    if (props.healthLabel === 'fair') return 'bg-health-fair';
+    if (props.healthLabel === 'concerning') return 'bg-health-concerning';
+    return 'bg-health-critical';
+  }
   const score = props.score;
-  if (score >= 60) return 'bg-health-healthy';
-  if (score >= 20) return 'bg-health-concerning';
+  if (score >= 70) return 'bg-health-healthy';
+  if (score >= 50) return 'bg-health-fair';
+  if (score >= 30) return 'bg-health-concerning';
   return 'bg-health-critical';
 });
 </script>

frontend/app/components/modules/collection/components/details/collection-metrics-row.vue

@@ -103,17 +103,18 @@ const avgHealthScore = computed(() => props.metrics?.avgHealthScore);
 // intentionally left untouched. Colors use the shared health-* tokens from colors.ts.
 const healthScoreLabel = computed(() => {
   const score = avgHealthScore.value ?? 0;
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Fair';
-  if (score >= 20) return 'Concerning';
+  if (score >= 85) return 'Excellent';
+  if (score >= 70) return 'Healthy';
+  if (score >= 50) return 'Fair';
+  if (score >= 30) return 'Concerning';
   return 'Critical';
 });
 
 const healthScoreDotClass = computed(() => {
   const score = avgHealthScore.value ?? 0;
-  if (score >= 60) return 'bg-health-healthy';
-  if (score >= 20) return 'bg-health-concerning';
+  if (score >= 70) return 'bg-health-healthy';
+  if (score >= 50) return 'bg-health-fair';
+  if (score >= 30) return 'bg-health-concerning';
   return 'bg-health-critical';
 });
 </script>

frontend/app/components/modules/collection/components/details/collection-project-item.vue

@@ -68,17 +68,11 @@ SPDX-License-Identifier: MIT
           :unavailable="true"
           :score="0"
         />
-        <lfx-popover
+        <lfx-collection-health-score-pill
           v-else
-          placement="top"
-          trigger-event="hover"
-          :allow-pass-through="true"
-        >
-          <lfx-collection-health-score-pill :score="project.healthScore" />
-          <template #content>
-            <lfx-health-score-details :project="props.project" />
-          </template>
-        </lfx-popover>
+          :score="project.healthScoreV2 ?? 0"
+          :health-label="project.healthLabel"
+        />
       </td>
       <td class="py-4 px-2 whitespace-nowrap">
         {{ formatNumber(props.project.contributorCount) }}
@@ -161,7 +155,8 @@ SPDX-License-Identifier: MIT
       <div class="flex items-center gap-1.5 mt-1 text-xs text-neutral-500 flex-wrap">
         <template v-if="isOnboarded">
           <lfx-collection-health-score-pill
-            :score="project.healthScore"
+            :score="project.healthScoreV2 ?? 0"
+            :health-label="project.healthLabel"
             :unavailable="isHealthScoreUnavailable"
           />
           <span class="text-neutral-400">・</span>
@@ -190,7 +185,6 @@ import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
 import { formatNumber } from '~/components/shared/utils/formatter';
 import { LfxRoutes } from '~/components/shared/types/routes';
 import LfxCollectionHealthScorePill from '~/components/modules/collection/components/details/collection-health-score-pill.vue';
-import LfxHealthScoreDetails from '~/components/modules/collection/components/details/health-score-details.vue';
 import LfxDependencyColumn from '~/components/modules/collection/components/details/dependency-column.vue';
 import LfxDependencyDetails from '~/components/modules/collection/components/details/dependency-details.vue';
 import LfxBadgeDetails from '~/components/modules/collection/components/details/badge-details.vue';
@@ -242,12 +236,7 @@ const isOnboarded = computed(() => {
   return props.project.contributorCount > 0 || props.project.organizationCount > 0;
 });
 
-const isHealthScoreUnavailable = computed(() => {
-  const { contributorHealthScore, popularityHealthScore, developmentHealthScore, securityHealthScore } = props.project;
-  return [contributorHealthScore, popularityHealthScore, developmentHealthScore, securityHealthScore].some(
-    (score) => !score,
-  );
-});
+const isHealthScoreUnavailable = computed(() => props.project.healthScoreV2 == null);
 
 const navigateToItem = () => {
   if (props.project.type === 'repo') {