From 0d4492618a59b404a557edb679a2b1c832d8a686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 03:33:36 +0100
Subject: [PATCH 01/11] feat: migrate health score display to v2 IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../details/collection-health-score-pill.vue  |   7 +
 .../details/collection-project-item.vue       |  15 +-
 .../details/health-score-details.vue          | 112 ++++-----------
 .../components/overview/trust-score-v2.vue    |  93 +++++++++++++
 .../project/services/overview.api.service.ts  |  13 +-
 .../modules/project/views/overview.vue        | 128 ++----------------
 .../shared/components/health-score.vue        |  11 +-
 .../app/components/shared/types/tanstack.ts   |   1 +
 frontend/config/trust-score.ts                |  23 ++++
 frontend/server/api/badge/health-score.ts     |  13 +-
 .../[slug]/overview/health-score-v2.get.ts    |  32 +++++
 frontend/types/overview/responses.types.ts    |   8 ++
 frontend/types/project.ts                     |  10 ++
 13 files changed, 248 insertions(+), 218 deletions(-)
 create mode 100644 frontend/app/components/modules/project/components/overview/trust-score-v2.vue
 create mode 100644 frontend/server/api/project/[slug]/overview/health-score-v2.get.ts

diff --git a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
index b5f16d276..741ba1b6c 100644
--- a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
+++ b/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,7 +40,13 @@ 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 (IN-1212, 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';
diff --git a/frontend/app/components/modules/collection/components/details/collection-project-item.vue b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
index 0e0af44db..e488f8bed 100644
--- a/frontend/app/components/modules/collection/components/details/collection-project-item.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
@@ -74,7 +74,10 @@ SPDX-License-Identifier: MIT
           trigger-event="hover"
           :allow-pass-through="true"
         >
-          <lfx-collection-health-score-pill :score="project.healthScore" />
+          <lfx-collection-health-score-pill
+            :score="project.healthScoreV2 ?? 0"
+            :health-label="project.healthLabel"
+          />
           <template #content>
             <lfx-health-score-details :project="props.project" />
           </template>
@@ -161,7 +164,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>
@@ -242,12 +246,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') {
diff --git a/frontend/app/components/modules/collection/components/details/health-score-details.vue b/frontend/app/components/modules/collection/components/details/health-score-details.vue
index f66a28677..5751e3362 100644
--- a/frontend/app/components/modules/collection/components/details/health-score-details.vue
+++ b/frontend/app/components/modules/collection/components/details/health-score-details.vue
@@ -5,113 +5,59 @@ SPDX-License-Identifier: MIT
 <template>
   <div class="bg-white border border-neutral-100 rounded-xl shadow-xl overflow-hidden px-2 py-3 w-80">
     <div class="px-2">
-      <p class="text-xs leading-4 font-semibold text-neutral-500">Health Score breakdown</p>
+      <p class="text-xs leading-4 font-semibold text-neutral-500">Health Score</p>
     </div>
-    <div class="flex flex-col gap-1 mt-3">
-      <nuxt-link
-        v-for="item in healthScoreItems"
-        :key="item.key"
-        :to="{ name: item.route, params: { slug: props.project.slug } }"
-        class="group flex flex-col gap-2 p-2 rounded-md hover:bg-neutral-50 transition-colors"
+    <div class="flex flex-col gap-2 mt-3 px-2 pb-1">
+      <div class="flex items-center justify-between">
+        <span class="text-xs leading-5 text-neutral-900">
+          <span class="font-semibold">Overall</span>
+          <span class="font-normal">・{{ healthLabelDisplay }}</span>
+        </span>
+        <span class="text-xs font-semibold text-neutral-900">{{ props.project.healthScoreV2 ?? '-' }}/100</span>
+      </div>
+      <lfx-progress-bar
+        size="small"
+        :values="[props.project.healthScoreV2 ?? 0]"
+        :color="getColor(props.project.healthScoreV2)"
+      />
+      <div
+        v-if="props.project.lifecycleLabel"
+        class="flex items-center justify-between mt-1"
       >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-1.5">
-            <lfx-icon
-              :name="item.icon"
-              :size="15"
-              class="text-neutral-900"
-            />
-            <span class="text-xs leading-5 text-neutral-900">
-              <span class="font-semibold">{{ item.label }}</span>
-              <span class="font-normal">・{{ getHealthLabel(item.score) }}</span>
-            </span>
-          </div>
-          <lfx-icon
-            name="arrow-up-right"
-            :size="12"
-            class="text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity"
-          />
-        </div>
-        <lfx-progress-bar
-          size="small"
-          :values="[item.score]"
-          :color="getColor(item.score)"
-        />
-      </nuxt-link>
+        <span class="text-xs leading-5 text-neutral-900 font-semibold">Lifecycle</span>
+        <span class="text-xs leading-5 text-neutral-500 capitalize">{{ props.project.lifecycleLabel }}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
 import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
 import type { ProjectInsights } from '~~/types/project';
-import { LfxRoutes } from '~/components/shared/types/routes';
 
 const props = defineProps<{
   project: ProjectInsights;
 }>();
 
-interface HealthScoreItem {
-  key: string;
-  label: string;
-  icon: string;
-  score: number;
-  route: LfxRoutes;
-}
+const healthLabelDisplay = computed(() => {
+  const label = props.project.healthLabel;
+  if (!label) return 'Unavailable';
+  return label.charAt(0).toUpperCase() + label.slice(1);
+});
 
-const healthScoreItems = computed<HealthScoreItem[]>(() => [
-  {
-    key: 'contributors',
-    label: 'Contributors',
-    icon: 'people-group',
-    score: props.project.contributorHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_CONTRIBUTORS,
-  },
-  {
-    key: 'popularity',
-    label: 'Popularity',
-    icon: 'fire',
-    score: props.project.popularityHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_POPULARITY,
-  },
-  {
-    key: 'development',
-    label: 'Development',
-    icon: 'code',
-    score: props.project.developmentHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_DEVELOPMENT,
-  },
-  {
-    key: 'security',
-    label: 'Security & Best practices',
-    icon: 'shield-check',
-    score: props.project.securityHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_SECURITY,
-  },
-]);
-
-const getColor = (value: number): ProgressBarType => {
+const getColor = (score: number | null): ProgressBarType => {
+  if (!score) return 'negative';
   switch (true) {
-    case value >= 75:
+    case score >= 75:
       return 'positive';
-    case value >= 25:
+    case score >= 25:
       return 'warning';
     default:
       return 'negative';
   }
 };
-
-const getHealthLabel = (score: number): string => {
-  if (!score) return 'Unavailable';
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Stable';
-  if (score >= 20) return 'Unsteady';
-  return 'Critical';
-};
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
new file mode 100644
index 000000000..70b01df30
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -0,0 +1,93 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="px-6">
+    <div class="flex flex-row justify-between">
+      <div class="pr-6 w-full">
+        <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
+
+        <lfx-skeleton-state
+          v-if="status !== 'pending' && !isEmpty"
+          :status="status"
+          height="1.75rem"
+          width="11.5rem"
+        >
+          <div class="flex items-center gap-3 text-3xl font-bold cursor-default">
+            <div
+              class="h-3 w-3 rounded-full shrink-0"
+              :class="scoreColorClass"
+            />
+            {{ scoreLabel }}
+            <span
+              v-if="score !== null"
+              class="text-neutral-500 text-lg font-semibold"
+              >{{ score }}/100</span
+            >
+          </div>
+        </lfx-skeleton-state>
+
+        <div
+          v-if="isEmpty && status !== 'pending'"
+          class="text-xs text-neutral-500 mt-4"
+        >
+          LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
+        </div>
+        <p
+          v-else
+          class="text-xs text-neutral-500 mt-4"
+        >
+          The Insights Health Score measures an open source project's overall trustworthiness.
+          <a
+            :href="links.trustScore"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-brand-500"
+            >Learn more</a
+          >
+        </p>
+      </div>
+      <div
+        v-if="!isEmpty && status === 'success'"
+        class="w-[200px] hidden sm:block"
+      >
+        <lfx-project-trust-score-share-badge />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
+import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
+import { links } from '~/config/links';
+import { getHealthScoreV2Config } from '~~/config/trust-score';
+import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
+
+const props = defineProps<{
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  status: AsyncDataRequestStatus;
+}>();
+
+const score = computed(() => props.healthScoreV2);
+
+const isEmpty = computed(() => props.healthScoreV2 === null);
+
+const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
+
+const scoreColorClass = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
+  if (label === 'fair') return 'bg-brand-500';
+  if (label === 'concerning') return 'bg-warning-500';
+  return 'bg-negative-500';
+});
+</script>
+<script lang="ts">
+export default {
+  name: 'LfxProjectTrustScoreV2',
+};
+</script>
diff --git a/frontend/app/components/modules/project/services/overview.api.service.ts b/frontend/app/components/modules/project/services/overview.api.service.ts
index d24352054..f794fade2 100644
--- a/frontend/app/components/modules/project/services/overview.api.service.ts
+++ b/frontend/app/components/modules/project/services/overview.api.service.ts
@@ -8,7 +8,7 @@ import type { WidgetArea } from '../../widget/types/widget-area';
 import type { Widget } from '../../widget/types/widget';
 import type { WidgetConfig } from '../../widget/config/widget.config';
 import { lfxWidgets } from '../../widget/config/widget.config';
-import type { HealthScoreResults } from '~~/types/overview/responses.types';
+import type { HealthScoreResults, HealthScoreV2Results } from '~~/types/overview/responses.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { Organization } from '~~/types/contributors/responses.types';
 
@@ -54,6 +54,17 @@ class OverviewApiService {
       });
   }
 
+  fetchHealthScoreV2(params: ComputedRef<{ projectSlug: string }>) {
+    const queryKey = computed(() => [TanstackKey.HEALTH_SCORE_V2, params.value.projectSlug]);
+    const queryFn: QueryFunction<HealthScoreV2Results> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-v2`);
+
+    return useQuery<HealthScoreV2Results>({
+      queryKey,
+      queryFn,
+    });
+  }
+
   fetchAssociatedOrganization(params: ComputedRef<OverviewQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.ASSOCIATED_ORGANIZATION,
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 9cdbefdd5..e9a04b940 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -6,37 +6,11 @@ SPDX-License-Identifier: MIT
   <div class="container">
     <div class="flex justify-between pt-5 md:pt-10 lg:gap-10 gap-5 flex-col md:flex-row">
       <div class="w-full md:w-3/4">
-        <lfx-card
-          class="pt-6 flex flex-col md:gap-10 gap-5"
-          :class="{
-            'pb-6': !(hasSelectedArchivedRepos && status !== 'pending'),
-          }"
-        >
-          <lfx-project-trust-score
-            :trust-score-summary="trustSummary"
-            :status="status"
-            :error="error"
-            :is-empty="isEmpty"
-            :score-display="scoreDisplay"
-            :is-repo-selected="isRepoSelected"
-          />
-          <div
-            v-if="!isArchived && !isEmpty"
-            class="px-6"
-          >
-            <lfx-project-score-tabs
-              :trust-score-summary="trustSummary"
-              :data="data"
-              :status="status"
-              :error="error"
-              :score-display="scoreDisplay"
-              :security-score="securityScore"
-              :is-repo-selected="isRepoSelected"
-            />
-          </div>
-          <lfx-repos-exclusion-footer
-            v-if="hasSelectedArchivedRepos && status !== 'pending'"
-            page-content="health-score"
+        <lfx-card class="pt-6 pb-6 flex flex-col md:gap-10 gap-5">
+          <lfx-project-trust-score-v2
+            :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
+            :health-label="healthScoreV2Data?.healthLabel ?? null"
+            :status="healthScoreV2Status"
           />
         </lfx-card>
       </div>
@@ -50,102 +24,22 @@ SPDX-License-Identifier: MIT
 <script setup lang="ts">
 import { computed, onServerPrefetch } from 'vue';
 import { useRoute } from 'nuxt/app';
-import { storeToRefs } from 'pinia';
-import { WidgetArea } from '../../widget/types/widget-area';
 import LfxProjectAboutSection from '~/components/modules/project/components/overview/about-section.vue';
-import LfxProjectScoreTabs from '~/components/modules/project/components/overview/score-tabs.vue';
-import LfxProjectTrustScore from '~/components/modules/project/components/overview/trust-score.vue';
-import { useProjectStore } from '~~/app/components/modules/project/store/project.store';
+import LfxProjectTrustScoreV2 from '~/components/modules/project/components/overview/trust-score-v2.vue';
 import { OVERVIEW_API_SERVICE } from '~~/app/components/modules/project/services/overview.api.service';
-import type { TrustScoreSummary } from '~~/types/overview/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
-import type { HealthScoreResults } from '~~/types/overview/responses.types';
-import LfxReposExclusionFooter from '~/components/shared/components/repos-exclusion-footer.vue';
 
 const route = useRoute();
-const { selectedReposValues, project, allArchived, hasSelectedArchivedRepos, isProjectArchived } =
-  storeToRefs(useProjectStore());
 
 const params = computed(() => ({
   projectSlug: route.params.slug as string,
-  repos: selectedReposValues.value,
-}));
-
-// Contributors score is only displayed if some contributors widgets are enabled
-const displayContributorsScore = computed(() => isScoreVisible(WidgetArea.CONTRIBUTORS));
-
-// Development score is only displayed if some development widgets are enabled
-const displayDevelopmentScore = computed(() => isScoreVisible(WidgetArea.DEVELOPMENT));
-
-// Popularity score is only displayed if some popularity widgets are enabled
-const displayPopularityScore = computed(() => isScoreVisible(WidgetArea.POPULARITY));
-
-// Security score is only displayed if security data is available
-const displaySecurityScore = computed(() => securityScore.value && securityScore.value.length > 0);
-
-const isArchived = computed(() => allArchived.value || isProjectArchived.value);
-
-const scoreDisplay = computed(() => ({
-  overall:
-    displayContributorsScore.value &&
-    displayDevelopmentScore.value &&
-    displayPopularityScore.value &&
-    displaySecurityScore.value,
-  contributors: displayContributorsScore.value,
-  development: displayDevelopmentScore.value,
-  popularity: displayPopularityScore.value,
-  security: displaySecurityScore.value,
 }));
 
-const { data: overviewData, status, error, suspense } = OVERVIEW_API_SERVICE.fetchHealthScoreOverview(params);
-
-/**
- * TODO: remove this after https://linear.app/lfx/issue/INS-822/periodicly-check-for-widgets-data-and-enabledisable-them
- * is implemented
- *
- * This is a workaround to show/hide the Search Queries from the score.
- * ===============================
- */
-
-// delete the search queries from the overview data
-const data = computed(() => {
-  const data = { ...overviewData.value };
-  if (overviewData.value?.searchQueries?.value === 0) {
-    delete data.searchQueries;
-  }
-  return data as HealthScoreResults;
-});
-
-/**
- * ===============================
- */
-
-const securityScore = computed(() => data.value?.securityCategoryPercentage || []);
-
-const trustSummary = computed<TrustScoreSummary>(() => ({
-  overall: data.value?.overallScore || 0,
-  popularity: data.value?.popularityPercentage || 0,
-  contributors: data.value?.contributorPercentage || 0,
-  security: data.value?.securityPercentage || 0,
-  development: data.value?.developmentPercentage || 0,
-}));
-
-const isScoreVisible = (widgetArea: WidgetArea) => {
-  const widgetKeys = OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(widgetArea);
-  return widgetKeys.some((widget) => project.value?.widgets?.includes(widget.key));
-};
-
-const isRepoSelected = computed(() => selectedReposValues.value.length > 0);
-
-const isEmpty = computed(() =>
-  [
-    trustSummary.value?.overall,
-    trustSummary.value?.contributors,
-    trustSummary.value?.popularity,
-    trustSummary.value?.development,
-    trustSummary.value?.security,
-  ].every((score) => score === 0),
-);
+const {
+  data: healthScoreV2Data,
+  status: healthScoreV2Status,
+  suspense,
+} = OVERVIEW_API_SERVICE.fetchHealthScoreV2(params);
 
 onServerPrefetch(async () => {
   await suspense();
diff --git a/frontend/app/components/shared/components/health-score.vue b/frontend/app/components/shared/components/health-score.vue
index 60712ffc8..5008d8ba8 100644
--- a/frontend/app/components/shared/components/health-score.vue
+++ b/frontend/app/components/shared/components/health-score.vue
@@ -2,6 +2,13 @@
 Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
+<!--
+  IN-1212: labels below use the v2 health score convention (excellent/healthy/fair/concerning/
+  critical, see collection-health-score-pill.vue) for consistency with the rest of the app.
+  The score itself is still v1 here — osi-list-projects.vue and osi-list-collections.vue (this
+  component's only callers) read healthScore from projects_list/collections_oss_index, neither
+  of which carries v2 fields. Wiring these lists to v2 needs a data-layer follow-up.
+-->
 <template>
   <lfx-tag
     v-if="props.unavailable"
@@ -25,13 +32,13 @@ SPDX-License-Identifier: MIT
     v-else-if="props.score >= 40"
     variation="info"
   >
-    Stable
+    Fair
   </lfx-tag>
   <lfx-tag
     v-else-if="props.score >= 20"
     variation="warning"
   >
-    Unsteady
+    Concerning
   </lfx-tag>
   <lfx-tag
     v-else
diff --git a/frontend/app/components/shared/types/tanstack.ts b/frontend/app/components/shared/types/tanstack.ts
index b8656c8a5..9b42941c8 100644
--- a/frontend/app/components/shared/types/tanstack.ts
+++ b/frontend/app/components/shared/types/tanstack.ts
@@ -58,6 +58,7 @@ export enum TanstackKey {
   // Overview
   HEALTH_SCORE = 'health-score',
   HEALTH_SCORE_OVERVIEW = 'health-score-overview',
+  HEALTH_SCORE_V2 = 'health-score-v2',
   TRUST_SCORE_SUMMARY = 'trust-score-summary',
   SCORE_DATA = 'score-data',
   ASSOCIATED_ORGANIZATION = 'associated-organization',
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 9b42d4223..07417988a 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -60,3 +60,26 @@ export const getHealthScoreConfig = (score: number) => {
     lfxTrustScore.find((s) => score <= s.maxScore && score >= s.minScore) || lfxTrustScore.at(-1)!
   );
 };
+
+// v2 health score labels/colors (IN-1212). Distinct from lfxTrustScore's v1 tiers: v2 uses
+// excellent/healthy/fair/concerning/critical (see collection-health-score-pill.vue, IN-1191)
+// instead of v1's Excellent/Healthy/Stable/Unsteady/Critical.
+export interface HealthScoreV2Config {
+  label: string;
+  ghBadgeColor: string;
+}
+
+export const healthScoreV2Config: Record<string, HealthScoreV2Config> = {
+  excellent: { label: 'Excellent', ghBadgeColor: '#10B981' },
+  healthy: { label: 'Healthy', ghBadgeColor: '#A7F3D0' },
+  fair: { label: 'Fair', ghBadgeColor: '#0094FF' },
+  concerning: { label: 'Concerning', ghBadgeColor: '#F59E0B' },
+  critical: { label: 'Critical', ghBadgeColor: '#EF4444' },
+};
+
+export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Config => {
+  if (label && healthScoreV2Config[label]) {
+    return healthScoreV2Config[label];
+  }
+  return healthScoreV2Config.critical;
+};
diff --git a/frontend/server/api/badge/health-score.ts b/frontend/server/api/badge/health-score.ts
index 6319a2121..802212ebc 100644
--- a/frontend/server/api/badge/health-score.ts
+++ b/frontend/server/api/badge/health-score.ts
@@ -1,23 +1,22 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
 import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
-import type { HealthScoreTinybird } from '~~/types/overview/responses.types';
-import { getHealthScoreConfig } from '~~/config/trust-score';
+import type { ProjectInsightsTinybird } from '~~/types/project';
+import { getHealthScoreV2Config } from '~~/config/trust-score';
 
 export default defineEventHandler(async (event): Promise<void> => {
   const query = getQuery(event);
   const project: string = query?.project as string;
 
   try {
-    const res = await fetchFromTinybird<HealthScoreTinybird[]>(
-      '/v0/pipes/health_score_overview.json',
-      { project },
+    const res = await fetchFromTinybird<ProjectInsightsTinybird[]>(
+      '/v0/pipes/project_insights.json',
+      { slug: project },
     );
     if (!res.data || res.data.length === 0) {
       throw createError({ statusCode: 404, statusMessage: 'Project not found' });
     }
-    const healthScore = res.data[0].overallScore;
-    const config = getHealthScoreConfig(healthScore);
+    const config = getHealthScoreV2Config(res.data[0].healthLabel);
     const message = encodeURIComponent(config.label);
     const label = encodeURIComponent('Health Score');
     const color = config.ghBadgeColor.replace('#', '');
diff --git a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
new file mode 100644
index 000000000..12dd6eb6c
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
@@ -0,0 +1,32 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { ProjectInsightsTinybird } from '~~/types/project';
+import type { HealthScoreV2Results } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<HealthScoreV2Results> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<ProjectInsightsTinybird[]>(
+      '/v0/pipes/project_insights.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    const { healthScoreV2, healthLabel, lifecycleLabel, impactScore, impactLabel } = res.data[0];
+    return { healthScoreV2, healthLabel, lifecycleLabel, impactScore, impactLabel };
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score v2:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score v2',
+    });
+  }
+});
diff --git a/frontend/types/overview/responses.types.ts b/frontend/types/overview/responses.types.ts
index e4cf83265..257b67d2e 100644
--- a/frontend/types/overview/responses.types.ts
+++ b/frontend/types/overview/responses.types.ts
@@ -58,6 +58,14 @@ export interface BenchmarkScoreData {
   percentage?: number;
 }
 
+export interface HealthScoreV2Results {
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+}
+
 export interface HealthScoreResults {
   activeContributors: BenchmarkScoreData;
   contributorDependency: BenchmarkScoreData;
diff --git a/frontend/types/project.ts b/frontend/types/project.ts
index fbc8ed363..aaf6f7f4b 100644
--- a/frontend/types/project.ts
+++ b/frontend/types/project.ts
@@ -130,6 +130,11 @@ export interface ProjectInsightsTinybird {
   popularityHealthScore: number;
   developmentHealthScore: number;
   securityHealthScore: number;
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
   firstCommit: string;
   starsLast365Days: number;
   forksLast365Days: number;
@@ -164,6 +169,11 @@ export interface ProjectInsights {
   popularityHealthScore: number;
   developmentHealthScore: number;
   securityHealthScore: number;
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
   firstCommit: string;
   starsLast365Days: number;
   forksLast365Days: number;

From f44a61c9adb6e3f74e0a73e62da12ae279fd1245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 03:45:09 +0100
Subject: [PATCH 02/11] refactor: minimize health score v2 migration code
 IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../details/collection-health-score-pill.vue           |  4 ++--
 .../project/components/overview/trust-score-v2.vue     |  6 ++----
 .../app/components/shared/components/health-score.vue  | 10 +++++-----
 frontend/config/trust-score.ts                         |  6 +++---
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
index 741ba1b6c..51e2bcecf 100644
--- a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
@@ -41,8 +41,8 @@ const props = defineProps<{
 // 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 (IN-1212, v2) when present; falls back to deriving the
-// label from the score for sparse rows where the pipe didn't return a label.
+// 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);
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index 70b01df30..bfb526ede 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -21,9 +21,9 @@ SPDX-License-Identifier: MIT
             />
             {{ scoreLabel }}
             <span
-              v-if="score !== null"
+              v-if="healthScoreV2 !== null"
               class="text-neutral-500 text-lg font-semibold"
-              >{{ score }}/100</span
+              >{{ healthScoreV2 }}/100</span
             >
           </div>
         </lfx-skeleton-state>
@@ -72,8 +72,6 @@ const props = defineProps<{
   status: AsyncDataRequestStatus;
 }>();
 
-const score = computed(() => props.healthScoreV2);
-
 const isEmpty = computed(() => props.healthScoreV2 === null);
 
 const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
diff --git a/frontend/app/components/shared/components/health-score.vue b/frontend/app/components/shared/components/health-score.vue
index 5008d8ba8..c63f0bb8e 100644
--- a/frontend/app/components/shared/components/health-score.vue
+++ b/frontend/app/components/shared/components/health-score.vue
@@ -3,11 +3,11 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <!--
-  IN-1212: labels below use the v2 health score convention (excellent/healthy/fair/concerning/
-  critical, see collection-health-score-pill.vue) for consistency with the rest of the app.
-  The score itself is still v1 here — osi-list-projects.vue and osi-list-collections.vue (this
-  component's only callers) read healthScore from projects_list/collections_oss_index, neither
-  of which carries v2 fields. Wiring these lists to v2 needs a data-layer follow-up.
+  Labels below use the v2 health score convention (excellent/healthy/fair/concerning/critical,
+  see collection-health-score-pill.vue) for consistency with the rest of the app. The score
+  itself is still v1 here — osi-list-projects.vue and osi-list-collections.vue (this component's
+  only callers) read healthScore from projects_list/collections_oss_index, neither of which
+  carries v2 fields. Wiring these lists to v2 needs a data-layer follow-up.
 -->
 <template>
   <lfx-tag
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 07417988a..ca2f8664c 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -61,9 +61,9 @@ export const getHealthScoreConfig = (score: number) => {
   );
 };
 
-// v2 health score labels/colors (IN-1212). Distinct from lfxTrustScore's v1 tiers: v2 uses
-// excellent/healthy/fair/concerning/critical (see collection-health-score-pill.vue, IN-1191)
-// instead of v1's Excellent/Healthy/Stable/Unsteady/Critical.
+// v2 health score labels/colors. Distinct from lfxTrustScore's v1 tiers: v2 uses
+// excellent/healthy/fair/concerning/critical (see collection-health-score-pill.vue) instead
+// of v1's Excellent/Healthy/Stable/Unsteady/Critical.
 export interface HealthScoreV2Config {
   label: string;
   ghBadgeColor: string;

From 5c228218f0e6af4902dced7c26b2e214ed42232f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 04:01:57 +0100
Subject: [PATCH 03/11] fix: correct v2 health score loading state and restore
 exclusion footer IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../components/overview/trust-score-v2.vue        |  2 +-
 .../components/modules/project/views/overview.vue | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index bfb526ede..7f46df5b6 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: MIT
         <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
 
         <lfx-skeleton-state
-          v-if="status !== 'pending' && !isEmpty"
+          v-if="status === 'pending' || !isEmpty"
           :status="status"
           height="1.75rem"
           width="11.5rem"
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index e9a04b940..2c48c0bed 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -6,12 +6,21 @@ SPDX-License-Identifier: MIT
   <div class="container">
     <div class="flex justify-between pt-5 md:pt-10 lg:gap-10 gap-5 flex-col md:flex-row">
       <div class="w-full md:w-3/4">
-        <lfx-card class="pt-6 pb-6 flex flex-col md:gap-10 gap-5">
+        <lfx-card
+          class="pt-6 flex flex-col md:gap-10 gap-5"
+          :class="{
+            'pb-6': !(hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'),
+          }"
+        >
           <lfx-project-trust-score-v2
             :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
             :health-label="healthScoreV2Data?.healthLabel ?? null"
             :status="healthScoreV2Status"
           />
+          <lfx-repos-exclusion-footer
+            v-if="hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'"
+            page-content="health-score"
+          />
         </lfx-card>
       </div>
       <div class="min-w-50 max-md:w-full w-1/4">
@@ -24,12 +33,16 @@ SPDX-License-Identifier: MIT
 <script setup lang="ts">
 import { computed, onServerPrefetch } from 'vue';
 import { useRoute } from 'nuxt/app';
+import { storeToRefs } from 'pinia';
 import LfxProjectAboutSection from '~/components/modules/project/components/overview/about-section.vue';
 import LfxProjectTrustScoreV2 from '~/components/modules/project/components/overview/trust-score-v2.vue';
 import { OVERVIEW_API_SERVICE } from '~~/app/components/modules/project/services/overview.api.service';
 import LfxCard from '~/components/uikit/card/card.vue';
+import LfxReposExclusionFooter from '~/components/shared/components/repos-exclusion-footer.vue';
+import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const route = useRoute();
+const { hasSelectedArchivedRepos } = storeToRefs(useProjectStore());
 
 const params = computed(() => ({
   projectSlug: route.params.slug as string,

From 672e11a9b4c2fbaa3178910afe8dfabb80f157b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 04:25:58 +0100
Subject: [PATCH 04/11] fix: remove health score popup, add error state, delete
 dead v1 overview components IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../details/collection-project-item.vue       |  18 +-
 .../details/health-score-details.vue          |  67 -------
 .../overview/score-details/details-empty.vue  |  30 ----
 .../score-details/score-accordion-view.vue    |  85 ---------
 .../overview/score-details/score-item.vue     | 105 -----------
 .../overview/score-details/score-list.vue     |  74 --------
 .../overview/score-details/score-tab-view.vue | 164 ------------------
 .../components/overview/score-tabs.vue        | 158 -----------------
 .../components/overview/trust-score-v2.vue    |   8 +-
 .../components/overview/trust-score.vue       | 133 --------------
 .../project/services/overview.api.service.ts  |  33 +---
 11 files changed, 12 insertions(+), 863 deletions(-)
 delete mode 100644 frontend/app/components/modules/collection/components/details/health-score-details.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-details/details-empty.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-details/score-item.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-details/score-list.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/score-tabs.vue
 delete mode 100644 frontend/app/components/modules/project/components/overview/trust-score.vue

diff --git a/frontend/app/components/modules/collection/components/details/collection-project-item.vue b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
index e488f8bed..ed5cfe3e2 100644
--- a/frontend/app/components/modules/collection/components/details/collection-project-item.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
@@ -68,20 +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.healthScoreV2 ?? 0"
-            :health-label="project.healthLabel"
-          />
-          <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) }}
@@ -194,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';
diff --git a/frontend/app/components/modules/collection/components/details/health-score-details.vue b/frontend/app/components/modules/collection/components/details/health-score-details.vue
deleted file mode 100644
index 5751e3362..000000000
--- a/frontend/app/components/modules/collection/components/details/health-score-details.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="bg-white border border-neutral-100 rounded-xl shadow-xl overflow-hidden px-2 py-3 w-80">
-    <div class="px-2">
-      <p class="text-xs leading-4 font-semibold text-neutral-500">Health Score</p>
-    </div>
-    <div class="flex flex-col gap-2 mt-3 px-2 pb-1">
-      <div class="flex items-center justify-between">
-        <span class="text-xs leading-5 text-neutral-900">
-          <span class="font-semibold">Overall</span>
-          <span class="font-normal">・{{ healthLabelDisplay }}</span>
-        </span>
-        <span class="text-xs font-semibold text-neutral-900">{{ props.project.healthScoreV2 ?? '-' }}/100</span>
-      </div>
-      <lfx-progress-bar
-        size="small"
-        :values="[props.project.healthScoreV2 ?? 0]"
-        :color="getColor(props.project.healthScoreV2)"
-      />
-      <div
-        v-if="props.project.lifecycleLabel"
-        class="flex items-center justify-between mt-1"
-      >
-        <span class="text-xs leading-5 text-neutral-900 font-semibold">Lifecycle</span>
-        <span class="text-xs leading-5 text-neutral-500 capitalize">{{ props.project.lifecycleLabel }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
-import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
-import type { ProjectInsights } from '~~/types/project';
-
-const props = defineProps<{
-  project: ProjectInsights;
-}>();
-
-const healthLabelDisplay = computed(() => {
-  const label = props.project.healthLabel;
-  if (!label) return 'Unavailable';
-  return label.charAt(0).toUpperCase() + label.slice(1);
-});
-
-const getColor = (score: number | null): ProgressBarType => {
-  if (!score) return 'negative';
-  switch (true) {
-    case score >= 75:
-      return 'positive';
-    case score >= 25:
-      return 'warning';
-    default:
-      return 'negative';
-  }
-};
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxHealthScoreDetails',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue b/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue
deleted file mode 100644
index 52f32e268..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="text-sm text-neutral-500 flex flex-col items-center justify-center gap-5 py-20">
-    <lfx-icon
-      name="eyes"
-      :size="40"
-      class="text-neutral-300"
-    />
-    <p class="text-center max-w-100">
-      {{ label }} metrics are unavailable because the required data isn't available for this project.
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import LfxIcon from '~/components/uikit/icon/icon.vue';
-
-defineProps<{
-  label: string;
-}>();
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxProjectDetailsEmpty',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue b/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue
deleted file mode 100644
index 6cb577b53..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <lfx-accordion
-    v-model="selectedTab"
-    class=""
-  >
-    <lfx-accordion-item
-      v-for="tab in props.tabs"
-      :key="tab.value"
-      :name="tab.value"
-      class="border-t border-neutral-100 pt-6"
-    >
-      <div class="text-sm leading-5 font-bold pb-6">
-        {{ tab.label }}
-      </div>
-      <template #content>
-        <lfx-project-load-state
-          :status="status"
-          :error="error"
-          error-message="Error fetching overview score data"
-          loading-message="Loading Health score takeaways..."
-        >
-          <div class="pb-6">
-            <lfx-project-details-empty
-              v-if="!scoreDisplay[tab.value as keyof typeof scoreDisplay]"
-              :label="tab.label"
-            />
-            <lfx-project-score-list
-              v-else-if="tab.value !== 'security'"
-              :data="data"
-              :name="tab.value as WidgetArea"
-            />
-            <div
-              v-else
-              class="pb-6"
-            >
-              <lfx-project-security-score :data="securityScore" />
-            </div>
-          </div>
-        </lfx-project-load-state>
-      </template>
-    </lfx-accordion-item>
-  </lfx-accordion>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import LfxProjectScoreList from './score-list.vue';
-import LfxProjectDetailsEmpty from './details-empty.vue';
-import LfxAccordion from '~/components/uikit/accordion/accordion.vue';
-import LfxAccordionItem from '~/components/uikit/accordion/accordion-item.vue';
-import type { TrustScoreSummary, SecurityScore, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import LfxProjectSecurityScore from '~/components/modules/project/components/overview/security/security-score.vue';
-import LfxProjectLoadState from '~~/app/components/modules/project/components/shared/load-state.vue';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  tabs: Tab[];
-  data: HealthScoreResults | undefined;
-  modelValue: string;
-  scoreDisplay: ScoreDisplay;
-  securityScore: SecurityScore[];
-  status: AsyncDataRequestStatus;
-  error: unknown;
-}>();
-
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
-
-const selectedTab = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value),
-});
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreAccordionView',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-item.vue b/frontend/app/components/modules/project/components/overview/score-details/score-item.vue
deleted file mode 100644
index e1c7e24d2..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-item.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <nuxt-link :to="linkUrl">
-    <div class="flex flex-row gap-4">
-      <div>
-        <div
-          :class="iconBGColor"
-          class="rounded-full h-6 w-6 flex items-center justify-center"
-        >
-          <lfx-benchmark-icon
-            :type="pointDetails?.type || 'positive'"
-            use-triangle
-            :size="12"
-          />
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <div class="text-sm font-semibold text-neutral-900">
-          {{ title }}
-        </div>
-        <div class="text-xs text-neutral-500">
-          {{ description }}
-        </div>
-      </div>
-      <!-- need to add this because tailwind won't import them in the computed property -->
-      <span class="bg-negative-100 bg-positive-100 bg-warning-100" />
-    </div>
-  </nuxt-link>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'nuxt/app';
-import { storeToRefs } from 'pinia';
-import LfxBenchmarkIcon from '~/components/uikit/benchmarks/benchmark-icon.vue';
-import { formatNumber } from '~/components/shared/utils/formatter';
-import { lfxWidgets } from '~/components/modules/widget/config/widget.config';
-import { lfxWidgetArea } from '~/components/modules/widget/config/widget-area.config';
-import { Widget } from '~/components/modules/widget/types/widget';
-import { lfProjectLinks } from '~/components/modules/project/config/links';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-
-const props = defineProps<{
-  widgetKey: string;
-  value: number;
-  benchmark: number;
-}>();
-
-const route = useRoute();
-const repoName = computed(() => route.params.name as string);
-const { selectedRepositoryGroup } = storeToRefs(useProjectStore());
-
-const widget = computed(() => Object.values(lfxWidgets).find((w) => w.key === props.widgetKey));
-const title = computed(() => widget.value?.benchmark?.title);
-const benchmarkValue = computed(() => Math.ceil(props.value || 0));
-const pointDetails = computed(() => widget.value?.benchmark?.points[props.benchmark]);
-const description = computed(
-  () => `
-  ${pointDetails.value?.description.replace('{value}', formatNumber(benchmarkValue.value || 0).toString())} 
-  - ${pointDetails.value?.text}`,
-);
-const iconBGColor = computed(() => `bg-${pointDetails.value?.type}-100`);
-const widgetKebabCase = computed(() =>
-  props.widgetKey ? (props.widgetKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() as Widget) : undefined,
-);
-const widgetArea = computed(() => {
-  // Find the widget area where this widgetKey belongs to
-  if (!widgetKebabCase.value) return undefined;
-  // Go through each area and check if its widgets array includes this key
-  for (const [area, config] of Object.entries(lfxWidgetArea)) {
-    if (config.widgets && config.widgets.includes(widgetKebabCase.value)) {
-      return area;
-    }
-  }
-  return undefined;
-});
-const link = computed(() => lfProjectLinks.find((l) => l.key === widgetArea.value));
-const linkUrl = computed(() => {
-  if (!link.value) return undefined;
-
-  const query = {
-    ...route.query,
-    widget: widgetKebabCase.value, // remove the widget from the query
-  };
-  let name = link.value.projectRouteName;
-  if (selectedRepositoryGroup.value) {
-    name = link.value.repoGroupRouteName;
-  } else if (repoName.value) {
-    name = link.value.repoRouteName;
-  }
-
-  return {
-    name,
-    query,
-  };
-});
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreItem',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-list.vue b/frontend/app/components/modules/project/components/overview/score-details/score-list.vue
deleted file mode 100644
index 1632ff963..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-list.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div
-    v-if="data"
-    class="flex flex-col gap-4"
-  >
-    <div
-      v-for="item in scoresData"
-      :key="item?.key"
-      class="[&:not(:last-child)]:border-b border-neutral-100 [&:not(:last-child)]:pb-4"
-    >
-      <lfx-score-item
-        v-if="item"
-        :widget-key="item.key"
-        :value="item.value"
-        :benchmark="item.benchmark"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import { OVERVIEW_API_SERVICE } from '../../../services/overview.api.service';
-import LfxScoreItem from './score-item.vue';
-import type { BenchmarkScoreData, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-
-const props = defineProps<{
-  data: HealthScoreResults | undefined;
-  name: WidgetArea;
-}>();
-const { project, selectedRepoSlugs } = storeToRefs(useProjectStore());
-
-const widgetConfigs = computed(() =>
-  OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(props.name).filter((widget) => {
-    return (
-      project.value?.widgets.includes(widget.key) && (!widget?.hideOnRepoFilter || !selectedRepoSlugs.value.length)
-    );
-  }),
-);
-
-/**
- * Widget keys stored in the DB are camelCase, but the widget in the widget
- * area configs are kebab-case, so is the enum that we use to match the widget
- */
-const scoresData = computed(() =>
-  widgetConfigs.value
-    .map((widget) => {
-      const score = props.data?.[widget.key as keyof HealthScoreResults];
-
-      if (score) {
-        const scoreData = score as BenchmarkScoreData;
-        return {
-          key: widget.key,
-          value: scoreData.value,
-          benchmark: scoreData.benchmark,
-        };
-      }
-      return null;
-    })
-    .sort((a, b) => (b?.benchmark || 0) - (a?.benchmark || 0)),
-);
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreList',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue b/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue
deleted file mode 100644
index 89ca989df..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <lfx-tabs-panels>
-    <lfx-tabs
-      v-model="selectedTab"
-      :tabs="tabsOptions"
-    >
-      <template #slotItem="{ option }">
-        <lfx-tooltip
-          class="!w-full"
-          :allow-pass-through="true"
-          :disabled="scoreDisplay[option.value as keyof typeof scoreDisplay]"
-        >
-          <template #content>
-            <p
-              v-if="!scoreDisplay[option.value as keyof typeof scoreDisplay]"
-              class="max-w-60"
-            >
-              {{ option.label }} metrics are unavailable because the required data isn't available for this project.
-              <a
-                :href="links.securityScore"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-brand-500"
-                >Learn more</a
-              >
-            </p>
-          </template>
-          <div
-            class="flex flex-col gap-2 items-start"
-            :class="{
-              'cursor-not-allowed': !scoreDisplay[option.value as keyof typeof scoreDisplay],
-            }"
-          >
-            <div
-              class="text-sm tab-label"
-              :class="{
-                'text-neutral-400': !scoreDisplay[option.value as keyof typeof scoreDisplay],
-                'text-neutral-900': scoreDisplay[option.value as keyof typeof scoreDisplay],
-              }"
-            >
-              {{ option.label }}
-            </div>
-            <div class="text-sm text-gray-500 w-full">
-              <lfx-skeleton-state
-                :status="status"
-                height=".188rem"
-                width="100%"
-              >
-                <lfx-progress-bar
-                  size="small"
-                  :values="[getValues(option.value)]"
-                  :color="getColor(getValues(option.value))"
-                />
-              </lfx-skeleton-state>
-            </div>
-          </div>
-        </lfx-tooltip>
-      </template>
-    </lfx-tabs>
-    <template
-      v-for="tab in tabs"
-      :key="tab.value"
-    >
-      <lfx-panels
-        :class="tab.value === selectedTab ? 'block' : 'hidden'"
-        class="pt-8"
-      >
-        <lfx-project-load-state
-          :status="status"
-          :error="error"
-          error-message="Error fetching overview score data"
-          loading-message="Loading Health score takeaways..."
-        >
-          <lfx-project-details-empty
-            v-if="!scoreDisplay[tab.value as keyof typeof scoreDisplay]"
-            :label="tab.label"
-          />
-          <lfx-project-score-list
-            v-else-if="tab.value !== 'security'"
-            :data="data"
-            :name="tab.value as WidgetArea"
-          />
-          <lfx-project-security-score
-            v-else
-            :data="securityScore"
-          />
-        </lfx-project-load-state>
-      </lfx-panels>
-    </template>
-  </lfx-tabs-panels>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import LfxProjectScoreList from './score-list.vue';
-import LfxProjectDetailsEmpty from './details-empty.vue';
-import LfxPanels from '~/components/uikit/tabs/panels.vue';
-import LfxTabsPanels from '~/components/uikit/tabs/tabs-panels.vue';
-import LfxTabs from '~/components/uikit/tabs/tabs.vue';
-import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
-import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
-import type { TrustScoreSummary, SecurityScore, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import LfxProjectSecurityScore from '~/components/modules/project/components/overview/security/security-score.vue';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import LfxProjectLoadState from '~~/app/components/modules/project/components/shared/load-state.vue';
-import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-import { links } from '~/config/links';
-import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  tabs: Tab[];
-  data: HealthScoreResults | undefined;
-  modelValue: string;
-  scoreDisplay: ScoreDisplay;
-  securityScore: SecurityScore[];
-  status: AsyncDataRequestStatus;
-  error: unknown;
-}>();
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
-
-const selectedTab = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value),
-});
-
-const tabsOptions = computed(() => {
-  return props.tabs.map((tab) => ({
-    ...tab,
-    disabled: !props.scoreDisplay[tab.value as keyof typeof props.scoreDisplay],
-  }));
-});
-
-const getColor = (value: number) => {
-  switch (true) {
-    case value > 75:
-      return 'positive' as ProgressBarType;
-    case value > 25:
-      return 'warning' as ProgressBarType;
-    default:
-      return 'negative' as ProgressBarType;
-  }
-};
-
-const getValues = (name: string): number => {
-  if (!props.trustScoreSummary) {
-    return 0;
-  }
-
-  return props.trustScoreSummary[name as keyof TrustScoreSummary] || 0;
-};
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreTabView',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-tabs.vue b/frontend/app/components/modules/project/components/overview/score-tabs.vue
deleted file mode 100644
index ee334140f..000000000
--- a/frontend/app/components/modules/project/components/overview/score-tabs.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="lg:block hidden">
-    <lfx-project-score-tab-view
-      :tabs="tabs"
-      :trust-score-summary="parsedTrustScoreSummary"
-      :model-value="selectedTab"
-      :data="data"
-      :score-display="scoreDisplay"
-      :security-score="securityScore"
-      :status="status"
-      :error="error"
-      @update:model-value="selectedTab = $event"
-    />
-  </div>
-  <div class="lg:hidden block">
-    <lfx-project-score-accordion-view
-      :tabs="tabs"
-      :trust-score-summary="parsedTrustScoreSummary"
-      :data="data"
-      :model-value="selectedTab"
-      :score-display="scoreDisplay"
-      :security-score="securityScore"
-      :status="status"
-      :error="error"
-      @update:model-value="selectedTab = $event"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import { useRoute } from 'nuxt/app';
-import { WidgetArea } from '../../../widget/types/widget-area';
-import { lfxWidgetArea } from '../../../widget/config/widget-area.config';
-import { lfxWidgets } from '../../../widget/config/widget.config';
-import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
-import LfxProjectScoreTabView from './score-details/score-tab-view.vue';
-import LfxProjectScoreAccordionView from './score-details/score-accordion-view.vue';
-import type {
-  TrustScoreSummary,
-  SecurityScore,
-  HealthScoreResults,
-  BenchmarkScoreData,
-} from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import { overviewScore } from '~~/app/components/shared/utils/overview-score';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-import type { WidgetConfig } from '~/components/modules/widget/config/widget.config';
-import { usePopularityExcludedWidgets } from '~/components/modules/widget/composables/usePopularityExcludedWidgets';
-
-const route = useRoute();
-const { project, selectedRepoSlugs, selectedReposValues, startDate, endDate } = storeToRefs(useProjectStore());
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  data: HealthScoreResults | undefined;
-  status: AsyncDataRequestStatus;
-  error: unknown;
-  securityScore: SecurityScore[];
-  scoreDisplay: ScoreDisplay;
-  isRepoSelected: boolean;
-}>();
-
-const projectSlug = computed(() => route.params.slug as string);
-const projectWidgets = computed(() => project.value?.widgets || []);
-const { excludedWidgets: popularityExcludedWidgets } = usePopularityExcludedWidgets({
-  projectSlug,
-  repos: selectedReposValues,
-  startDate,
-  endDate,
-  projectWidgets,
-});
-
-const isPopularityEnabled = computed(() => {
-  const widgets = lfxWidgetArea[WidgetArea.POPULARITY].widgets || [];
-  const availableWidgets = widgets.filter((w) => !popularityExcludedWidgets.value.includes(w));
-  return availableWidgets.some((widget) => project.value?.widgets?.includes(lfxWidgets[widget]?.key));
-});
-
-const allTabs: Tab[] = [
-  { label: 'Contributors', value: WidgetArea.CONTRIBUTORS },
-  { label: 'Popularity', value: WidgetArea.POPULARITY },
-  { label: 'Development', value: WidgetArea.DEVELOPMENT },
-  { label: 'Security & Best practices', value: WidgetArea.SECURITY },
-];
-
-const tabs = computed(() =>
-  allTabs.filter((tab) => {
-    if (tab.value === WidgetArea.POPULARITY) {
-      return isPopularityEnabled.value;
-    }
-    return true;
-  }),
-);
-const selectedTab = ref(allTabs[0]?.value || WidgetArea.CONTRIBUTORS);
-
-const parsedTrustScoreSummary = computed(() => {
-  const scoreFromData = overviewScore(props.trustScoreSummary, props.scoreDisplay);
-
-  if (props.isRepoSelected) {
-    return { ...repoTrustScoreSummary.value, security: scoreFromData.security };
-  }
-
-  return scoreFromData;
-});
-
-const repoTrustScoreSummary = computed(() => {
-  const contributorWidgets = getWidgets(WidgetArea.CONTRIBUTORS);
-  const popularityWidgets = getWidgets(WidgetArea.POPULARITY);
-  const developmentWidgets = getWidgets(WidgetArea.DEVELOPMENT);
-
-  const contributorScores = getTotalScore(contributorWidgets);
-  const popularityScores = getTotalScore(popularityWidgets);
-  const developmentScores = getTotalScore(developmentWidgets);
-
-  return {
-    overall: 0,
-    popularity: (((popularityScores / popularityWidgets.length) * 5) / 25) * 100,
-    contributors: (((contributorScores / contributorWidgets.length) * 5) / 25) * 100,
-    security: 0,
-    development: (((developmentScores / developmentWidgets.length) * 5) / 25) * 100,
-  };
-});
-
-const getWidgets = (widgetArea: WidgetArea) => {
-  return OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(widgetArea).filter((widget) => {
-    return (
-      project.value?.widgets.includes(widget.key) && (!widget?.hideOnRepoFilter || !selectedRepoSlugs.value.length)
-    );
-  });
-};
-
-const getTotalScore = (widgets: WidgetConfig[]) => {
-  let total = 0;
-
-  widgets.forEach((widget) => {
-    const score = props.data?.[widget.key as keyof HealthScoreResults];
-    if (score) {
-      const scoreData = score as BenchmarkScoreData;
-      total += scoreData.benchmark;
-    }
-  });
-
-  return total;
-};
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreTabs',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index 7f46df5b6..5ef6ddabe 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -29,7 +29,13 @@ SPDX-License-Identifier: MIT
         </lfx-skeleton-state>
 
         <div
-          v-if="isEmpty && status !== 'pending'"
+          v-if="status === 'error'"
+          class="text-xs text-neutral-500 mt-4"
+        >
+          Something went wrong while loading the Health score for this project. Please try again later.
+        </div>
+        <div
+          v-else-if="isEmpty && status !== 'pending'"
           class="text-xs text-neutral-500 mt-4"
         >
           LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
diff --git a/frontend/app/components/modules/project/components/overview/trust-score.vue b/frontend/app/components/modules/project/components/overview/trust-score.vue
deleted file mode 100644
index a19f6d1d1..000000000
--- a/frontend/app/components/modules/project/components/overview/trust-score.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="px-6">
-    <div class="flex flex-row justify-between">
-      <div
-        class="pr-6 w-full"
-        :class="{
-          'sm:basis-3/5': !hideOverallScore && !isRepoSelected,
-        }"
-      >
-        <div class="flex flex-col justify-between h-full">
-          <div>
-            <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
-
-            <lfx-skeleton-state
-              v-if="!isRepoSelected && !isArchived && !isEmpty"
-              :status="status"
-              height="1.75rem"
-              width="11.5rem"
-            >
-              <lfx-project-trust-score-display
-                :overall-score="overallScore"
-                :hide-overall-score="hideOverallScore"
-              />
-            </lfx-skeleton-state>
-
-            <div
-              v-if="(hideOverallScore || isEmpty) && status !== 'pending'"
-              class="block"
-            >
-              <div class="text-xs text-neutral-500 mt-4">
-                LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
-              </div>
-            </div>
-
-            <template v-else>
-              <div
-                v-if="isRepoSelected && !isArchived"
-                class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
-              >
-                <lfx-icon
-                  name="info-circle"
-                  :size="12"
-                  type="solid"
-                  class="text-brand-600"
-                />
-                Select “All repositories” in order to get the aggregated Health Score
-              </div>
-              <p class="text-xs text-neutral-500 mt-4">
-                The Insights Health Score combines the four key areas to measure an open source project's overall
-                trustworthiness.
-                <a
-                  :href="links.trustScore"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-brand-500"
-                  >Learn more</a
-                >
-              </p>
-            </template>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="!hideOverallScore && status === 'success' && selectedRepositories.length <= 1 && !isArchived"
-        class="w-[200px] hidden sm:block"
-      >
-        <lfx-project-trust-score-share-badge
-          v-if="!hideOverallScore"
-          :overall-score="overallScore"
-          :is-repo-selected="isRepoSelected"
-        />
-      </div>
-    </div>
-
-    <lfx-empty-state
-      v-if="isArchived && status !== 'pending'"
-      icon="archive"
-      :title="emptyStateTitle"
-      :description="emptyStateDescription"
-    />
-
-    <div
-      v-else-if="isEmpty && status !== 'pending'"
-      class="flex flex-col items-center justify-center h-[240px]"
-    >
-      <lfx-icon
-        name="eyes"
-        :size="40"
-        class="text-neutral-300"
-      />
-      <p class="text-sm text-neutral-500 mt-5">No data available</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import { storeToRefs } from 'pinia';
-import LfxProjectTrustScoreDisplay from './trust-score/score-display.vue';
-import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
-import { links } from '~/config/links';
-import type { TrustScoreSummary } from '~~/types/overview/responses.types';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
-import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-import LfxEmptyState from '~/components/shared/components/empty-state.vue';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  status: AsyncDataRequestStatus;
-  error: unknown;
-  scoreDisplay: ScoreDisplay;
-  isRepoSelected: boolean;
-  isEmpty: boolean;
-}>();
-
-const overallScore = computed(() => Math.round(props.trustScoreSummary ? props.trustScoreSummary.overall : 0));
-const hideOverallScore = computed(
-  () => Object.values(props.scoreDisplay).some((score) => !score) && selectedRepositories.value.length == 0,
-);
-const { selectedRepositories, isArchived, emptyStateTitle, emptyStateDescription } = storeToRefs(useProjectStore());
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectTrustScore',
-};
-</script>
diff --git a/frontend/app/components/modules/project/services/overview.api.service.ts b/frontend/app/components/modules/project/services/overview.api.service.ts
index f794fade2..a7044e535 100644
--- a/frontend/app/components/modules/project/services/overview.api.service.ts
+++ b/frontend/app/components/modules/project/services/overview.api.service.ts
@@ -8,7 +8,7 @@ import type { WidgetArea } from '../../widget/types/widget-area';
 import type { Widget } from '../../widget/types/widget';
 import type { WidgetConfig } from '../../widget/config/widget.config';
 import { lfxWidgets } from '../../widget/config/widget.config';
-import type { HealthScoreResults, HealthScoreV2Results } from '~~/types/overview/responses.types';
+import type { HealthScoreV2Results } from '~~/types/overview/responses.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { Organization } from '~~/types/contributors/responses.types';
 
@@ -23,37 +23,6 @@ export interface ScoreDataQueryParams extends OverviewQueryParams {
 
 // TODO: Refactor other services to follow this pattern
 class OverviewApiService {
-  fetchHealthScoreOverview(params: ComputedRef<OverviewQueryParams>) {
-    const queryKey = computed(() => [
-      TanstackKey.HEALTH_SCORE_OVERVIEW,
-      params.value.projectSlug,
-      params.value.repos,
-    ]);
-    const queryFn = computed<QueryFunction<HealthScoreResults>>(() =>
-      this.healthScoreOverviewQueryFn(() => ({
-        projectSlug: params.value.projectSlug,
-        repos: params.value.repos,
-      })),
-    );
-
-    return useQuery<HealthScoreResults>({
-      queryKey,
-      queryFn,
-    });
-  }
-
-  healthScoreOverviewQueryFn(
-    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
-  ): QueryFunction<HealthScoreResults> {
-    const { projectSlug, repos } = query();
-    return async () =>
-      await $fetch(`/api/project/${projectSlug}/overview/health-score-overview`, {
-        params: {
-          repos,
-        },
-      });
-  }
-
   fetchHealthScoreV2(params: ComputedRef<{ projectSlug: string }>) {
     const queryKey = computed(() => [TanstackKey.HEALTH_SCORE_V2, params.value.projectSlug]);
     const queryFn: QueryFunction<HealthScoreV2Results> = async () =>

From a6a8b5d1cd3274cb38f21c7063e812f58baa28e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 10:19:58 +0100
Subject: [PATCH 05/11] fix: correct null-healthLabel badge fallback and
 dot-color mismatch IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../components/details/collection-health-score-pill.vue      | 5 +++++
 frontend/config/trust-score.ts                               | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
index 51e2bcecf..fbbf57c5e 100644
--- a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
@@ -56,6 +56,11 @@ const healthScoreLabel = computed(() => {
 });
 
 const healthScoreDotClass = computed(() => {
+  if (props.healthLabel) {
+    if (props.healthLabel === 'excellent' || props.healthLabel === 'healthy') return 'bg-health-healthy';
+    if (props.healthLabel === 'fair' || 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';
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index ca2f8664c..a29d23156 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -75,11 +75,12 @@ export const healthScoreV2Config: Record<string, HealthScoreV2Config> = {
   fair: { label: 'Fair', ghBadgeColor: '#0094FF' },
   concerning: { label: 'Concerning', ghBadgeColor: '#F59E0B' },
   critical: { label: 'Critical', ghBadgeColor: '#EF4444' },
+  unavailable: { label: 'Unavailable', ghBadgeColor: '#9CA3AF' },
 };
 
 export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Config => {
   if (label && healthScoreV2Config[label]) {
     return healthScoreV2Config[label];
   }
-  return healthScoreV2Config.critical;
+  return healthScoreV2Config.unavailable;
 };

From 6e8ca31a0e6b71591de722946bad2fa1febccef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 10:54:56 +0100
Subject: [PATCH 06/11] fix: trim unused v2 fields from overview health-score
 route IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../server/api/project/[slug]/overview/health-score-v2.get.ts | 4 ++--
 frontend/types/overview/responses.types.ts                    | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
index 12dd6eb6c..bcb1d32cd 100644
--- a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
+++ b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
@@ -17,8 +17,8 @@ export default defineEventHandler(async (event): Promise<HealthScoreV2Results> =
     if (!res.data || res.data.length === 0) {
       throw createError({ statusCode: 404, statusMessage: 'Not found' });
     }
-    const { healthScoreV2, healthLabel, lifecycleLabel, impactScore, impactLabel } = res.data[0];
-    return { healthScoreV2, healthLabel, lifecycleLabel, impactScore, impactLabel };
+    const { healthScoreV2, healthLabel } = res.data[0];
+    return { healthScoreV2, healthLabel };
   } catch (error: unknown) {
     if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
       throw error;
diff --git a/frontend/types/overview/responses.types.ts b/frontend/types/overview/responses.types.ts
index 257b67d2e..f7cc2628d 100644
--- a/frontend/types/overview/responses.types.ts
+++ b/frontend/types/overview/responses.types.ts
@@ -61,9 +61,6 @@ export interface BenchmarkScoreData {
 export interface HealthScoreV2Results {
   healthScoreV2: number | null;
   healthLabel: string | null;
-  lifecycleLabel: string | null;
-  impactScore: number | null;
-  impactLabel: string | null;
 }
 
 export interface HealthScoreResults {

From ba12452b7de650ef1aa962150792e6a4d0cae086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 11:40:30 +0100
Subject: [PATCH 07/11] fix: restore archived-state and repo-scoping guards,
 fix fair-label color IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../components/overview/trust-score-v2.vue    | 52 ++++++++++++++-----
 .../modules/project/views/overview.vue        |  3 +-
 frontend/config/trust-score.ts                |  2 +-
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index 5ef6ddabe..96ddbe24a 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -40,19 +40,30 @@ SPDX-License-Identifier: MIT
         >
           LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
         </div>
-        <p
-          v-else
-          class="text-xs text-neutral-500 mt-4"
-        >
-          The Insights Health Score measures an open source project's overall trustworthiness.
-          <a
-            :href="links.trustScore"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-brand-500"
-            >Learn more</a
+        <template v-else>
+          <div
+            v-if="isRepoSelected"
+            class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
           >
-        </p>
+            <lfx-icon
+              name="info-circle"
+              :size="12"
+              type="solid"
+              class="text-brand-600"
+            />
+            Select "All repositories" in order to get the aggregated Health Score
+          </div>
+          <p class="text-xs text-neutral-500 mt-4">
+            The Insights Health Score measures an open source project's overall trustworthiness.
+            <a
+              :href="links.trustScore"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-brand-500"
+              >Learn more</a
+            >
+          </p>
+        </template>
       </div>
       <div
         v-if="!isEmpty && status === 'success'"
@@ -61,23 +72,37 @@ SPDX-License-Identifier: MIT
         <lfx-project-trust-score-share-badge />
       </div>
     </div>
+
+    <lfx-empty-state
+      v-if="isArchived && status !== 'pending'"
+      icon="archive"
+      :title="emptyStateTitle"
+      :description="emptyStateDescription"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { AsyncDataRequestStatus } from 'nuxt/app';
+import { storeToRefs } from 'pinia';
 import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
 import { links } from '~/config/links';
 import { getHealthScoreV2Config } from '~~/config/trust-score';
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxEmptyState from '~/components/shared/components/empty-state.vue';
+import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const props = defineProps<{
   healthScoreV2: number | null;
   healthLabel: string | null;
   status: AsyncDataRequestStatus;
+  isRepoSelected: boolean;
 }>();
 
+const { isArchived, emptyStateTitle, emptyStateDescription } = storeToRefs(useProjectStore());
+
 const isEmpty = computed(() => props.healthScoreV2 === null);
 
 const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
@@ -85,8 +110,7 @@ const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).labe
 const scoreColorClass = computed(() => {
   const label = props.healthLabel;
   if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
-  if (label === 'fair') return 'bg-brand-500';
-  if (label === 'concerning') return 'bg-warning-500';
+  if (label === 'fair' || label === 'concerning') return 'bg-health-concerning';
   return 'bg-negative-500';
 });
 </script>
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 2c48c0bed..25ed9980a 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -16,6 +16,7 @@ SPDX-License-Identifier: MIT
             :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
             :health-label="healthScoreV2Data?.healthLabel ?? null"
             :status="healthScoreV2Status"
+            :is-repo-selected="selectedRepositories.length > 0"
           />
           <lfx-repos-exclusion-footer
             v-if="hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'"
@@ -42,7 +43,7 @@ import LfxReposExclusionFooter from '~/components/shared/components/repos-exclus
 import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const route = useRoute();
-const { hasSelectedArchivedRepos } = storeToRefs(useProjectStore());
+const { hasSelectedArchivedRepos, selectedRepositories } = storeToRefs(useProjectStore());
 
 const params = computed(() => ({
   projectSlug: route.params.slug as string,
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index a29d23156..927fb8da3 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -72,7 +72,7 @@ export interface HealthScoreV2Config {
 export const healthScoreV2Config: Record<string, HealthScoreV2Config> = {
   excellent: { label: 'Excellent', ghBadgeColor: '#10B981' },
   healthy: { label: 'Healthy', ghBadgeColor: '#A7F3D0' },
-  fair: { label: 'Fair', ghBadgeColor: '#0094FF' },
+  fair: { label: 'Fair', ghBadgeColor: '#F59E0B' },
   concerning: { label: 'Concerning', ghBadgeColor: '#F59E0B' },
   critical: { label: 'Critical', ghBadgeColor: '#EF4444' },
   unavailable: { label: 'Unavailable', ghBadgeColor: '#9CA3AF' },

From cce2c46e3292700dcb9a9b93fa4792a6660df711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 12:03:48 +0100
Subject: [PATCH 08/11] fix: make archived-state exclusive with score content,
 gate share badge correctly IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../components/overview/trust-score-v2.vue    | 130 +++++++++---------
 1 file changed, 68 insertions(+), 62 deletions(-)

diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index 96ddbe24a..c9b67abce 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -4,77 +4,79 @@ SPDX-License-Identifier: MIT
 -->
 <template>
   <div class="px-6">
-    <div class="flex flex-row justify-between">
-      <div class="pr-6 w-full">
-        <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
+    <template v-if="!isArchived">
+      <div class="flex flex-row justify-between">
+        <div class="pr-6 w-full">
+          <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
 
-        <lfx-skeleton-state
-          v-if="status === 'pending' || !isEmpty"
-          :status="status"
-          height="1.75rem"
-          width="11.5rem"
-        >
-          <div class="flex items-center gap-3 text-3xl font-bold cursor-default">
+          <lfx-skeleton-state
+            v-if="status === 'pending' || !isEmpty"
+            :status="status"
+            height="1.75rem"
+            width="11.5rem"
+          >
+            <div class="flex items-center gap-3 text-3xl font-bold cursor-default">
+              <div
+                class="h-3 w-3 rounded-full shrink-0"
+                :class="scoreColorClass"
+              />
+              {{ scoreLabel }}
+              <span
+                v-if="healthScoreV2 !== null"
+                class="text-neutral-500 text-lg font-semibold"
+                >{{ healthScoreV2 }}/100</span
+              >
+            </div>
+          </lfx-skeleton-state>
+
+          <div
+            v-if="status === 'error'"
+            class="text-xs text-neutral-500 mt-4"
+          >
+            Something went wrong while loading the Health score for this project. Please try again later.
+          </div>
+          <div
+            v-else-if="isEmpty && status !== 'pending'"
+            class="text-xs text-neutral-500 mt-4"
+          >
+            LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
+          </div>
+          <template v-else>
             <div
-              class="h-3 w-3 rounded-full shrink-0"
-              :class="scoreColorClass"
-            />
-            {{ scoreLabel }}
-            <span
-              v-if="healthScoreV2 !== null"
-              class="text-neutral-500 text-lg font-semibold"
-              >{{ healthScoreV2 }}/100</span
+              v-if="isRepoSelected"
+              class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
             >
-          </div>
-        </lfx-skeleton-state>
-
-        <div
-          v-if="status === 'error'"
-          class="text-xs text-neutral-500 mt-4"
-        >
-          Something went wrong while loading the Health score for this project. Please try again later.
+              <lfx-icon
+                name="info-circle"
+                :size="12"
+                type="solid"
+                class="text-brand-600"
+              />
+              Select "All repositories" in order to get the aggregated Health Score
+            </div>
+            <p class="text-xs text-neutral-500 mt-4">
+              The Insights Health Score measures an open source project's overall trustworthiness.
+              <a
+                :href="links.trustScore"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-brand-500"
+                >Learn more</a
+              >
+            </p>
+          </template>
         </div>
         <div
-          v-else-if="isEmpty && status !== 'pending'"
-          class="text-xs text-neutral-500 mt-4"
+          v-if="showShareBadge"
+          class="w-[200px] hidden sm:block"
         >
-          LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
+          <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
         </div>
-        <template v-else>
-          <div
-            v-if="isRepoSelected"
-            class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
-          >
-            <lfx-icon
-              name="info-circle"
-              :size="12"
-              type="solid"
-              class="text-brand-600"
-            />
-            Select "All repositories" in order to get the aggregated Health Score
-          </div>
-          <p class="text-xs text-neutral-500 mt-4">
-            The Insights Health Score measures an open source project's overall trustworthiness.
-            <a
-              :href="links.trustScore"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-brand-500"
-              >Learn more</a
-            >
-          </p>
-        </template>
       </div>
-      <div
-        v-if="!isEmpty && status === 'success'"
-        class="w-[200px] hidden sm:block"
-      >
-        <lfx-project-trust-score-share-badge />
-      </div>
-    </div>
+    </template>
 
     <lfx-empty-state
-      v-if="isArchived && status !== 'pending'"
+      v-else-if="status !== 'pending'"
       icon="archive"
       :title="emptyStateTitle"
       :description="emptyStateDescription"
@@ -101,10 +103,14 @@ const props = defineProps<{
   isRepoSelected: boolean;
 }>();
 
-const { isArchived, emptyStateTitle, emptyStateDescription } = storeToRefs(useProjectStore());
+const { isArchived, emptyStateTitle, emptyStateDescription, selectedRepositories } = storeToRefs(useProjectStore());
 
 const isEmpty = computed(() => props.healthScoreV2 === null);
 
+const showShareBadge = computed(
+  () => !isEmpty.value && props.status === 'success' && selectedRepositories.value.length <= 1,
+);
+
 const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
 
 const scoreColorClass = computed(() => {

From 5b0ad90da97a7dd8bce2f338a54d8c0e9f460c10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 15:32:48 +0100
Subject: [PATCH 09/11] feat: rebuild project overview with health/impact
 breakdown sections IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../overview/health-breakdown-section.vue     |  99 +++++++++
 .../health-breakdown/category-card.vue        |  57 ++++++
 .../overview/impact-breakdown-section.vue     |  76 +++++++
 .../overview/impact-breakdown/metric-row.vue  |  57 ++++++
 .../components/overview/trust-score-v2.vue    | 189 ++++++++++++------
 .../trust-score/health-score-ring.vue         |  42 ++++
 .../project/services/overview.api.service.ts  |  19 +-
 .../modules/project/views/overview.vue        |  38 +++-
 .../app/components/shared/types/tanstack.ts   |   1 +
 frontend/config/trust-score.ts                |  33 +++
 .../overview/health-score-impact.get.ts       |  30 +++
 .../[slug]/overview/health-score-v2.get.ts    |  22 +-
 frontend/types/overview/responses.types.ts    |  23 +++
 frontend/types/project.ts                     |   3 +
 14 files changed, 622 insertions(+), 67 deletions(-)
 create mode 100644 frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
 create mode 100644 frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
 create mode 100644 frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
 create mode 100644 frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
 create mode 100644 frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
 create mode 100644 frontend/server/api/project/[slug]/overview/health-score-impact.get.ts

diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
new file mode 100644
index 000000000..61d91b16b
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
@@ -0,0 +1,99 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div v-if="!isEmpty">
+    <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
+      <h2 class="text-heading-3 font-secondary font-bold">Health breakdown</h2>
+      <div
+        v-if="props.healthScoreV2 !== null"
+        class="flex items-center gap-1.5"
+      >
+        <span
+          class="h-2 w-2 rounded-full shrink-0"
+          :class="scoreDotColorClass"
+        />
+        <span class="text-sm font-semibold text-neutral-900">{{ scoreLabel }} ({{ props.healthScoreV2 }}/100)</span>
+      </div>
+    </div>
+    <p class="text-xs text-neutral-500 mb-4">
+      Maintainer availability, known risks and supply chain posture, and whether the project is actively developed or
+      appropriately stable.
+    </p>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+      <lfx-health-breakdown-category-card
+        name="Maintainer Health"
+        icon="people-group"
+        :score="props.maintainerHealthScoreV2"
+        :max-score="40"
+      />
+      <lfx-health-breakdown-category-card
+        name="Security & Supply Chain"
+        icon="lock-keyhole"
+        :score="props.securitySupplyChainScoreV2"
+        :max-score="35"
+      />
+      <lfx-health-breakdown-category-card
+        name="Development Activity"
+        icon="chart-line"
+        :score="props.developmentActivityScoreV2"
+        :max-score="25"
+      />
+    </div>
+
+    <p class="text-xs text-neutral-400 mb-4">
+      Per-signal detail (e.g. maintainer responsiveness, bus factor) isn't available as individually reported data yet —
+      the categories above reflect the full underlying signal set.
+    </p>
+
+    <nuxt-link :to="{ name: LfxRoutes.PROJECT_CONTRIBUTORS }">
+      <lfx-button
+        type="tertiary"
+        size="small"
+        class="!text-xs"
+      >
+        View more in Contributors
+        <lfx-icon
+          name="arrow-up-right"
+          :size="12"
+        />
+      </lfx-button>
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxHealthBreakdownCategoryCard from './health-breakdown/category-card.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
+import { getHealthScoreV2Config } from '~~/config/trust-score';
+
+const props = defineProps<{
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
+}>();
+
+const isEmpty = computed(() => props.healthScoreV2 === null);
+
+const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
+
+const scoreDotColorClass = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
+  if (label === 'fair' || label === 'concerning') return 'bg-warning-500';
+  return 'bg-negative-500';
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthBreakdownSection',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
new file mode 100644
index 000000000..794f251a3
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-card class="p-4 flex flex-col gap-3">
+    <div class="flex items-center gap-2">
+      <lfx-icon
+        :name="props.icon"
+        type="regular"
+        :size="16"
+        class="text-neutral-500"
+      />
+      <span class="text-sm font-semibold text-neutral-900">{{ props.name }}</span>
+    </div>
+    <span
+      v-if="props.score !== null"
+      class="text-xs text-neutral-500"
+      >{{ props.score }}/{{ props.maxScore }}</span
+    >
+    <span
+      v-else
+      class="text-xs text-neutral-400"
+      >No data</span
+    >
+    <lfx-progress-bar
+      :values="[progressPercent]"
+      color="normal"
+      size="small"
+    />
+  </lfx-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxCard from '~/components/uikit/card/card.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+
+const props = defineProps<{
+  name: string;
+  icon: string;
+  score: number | null;
+  maxScore: number;
+}>();
+
+const progressPercent = computed(() => {
+  if (props.score === null || props.maxScore === 0) return 0;
+  return (props.score / props.maxScore) * 100;
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthBreakdownCategoryCard',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
new file mode 100644
index 000000000..b4cb0272b
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
@@ -0,0 +1,76 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div v-if="!isEmpty">
+    <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
+      <h2 class="text-heading-3 font-secondary font-bold">Impact breakdown</h2>
+      <div
+        v-if="props.impactScore !== null"
+        class="flex items-center gap-1.5"
+      >
+        <span class="text-sm font-semibold text-neutral-900"
+          >{{ impactLabelDisplay }} ({{ props.impactScore }}/100)</span
+        >
+      </div>
+    </div>
+    <p class="text-xs text-neutral-500 mb-2">
+      How central this project is to the open source dependency graph, measured against every other tracked project.
+    </p>
+
+    <div v-if="data">
+      <lfx-impact-breakdown-metric-row
+        name="Transitive dependents"
+        signal-type="Primary"
+        description="The number of projects that depend on this project, directly or through another dependency."
+        :value="data.transitiveDependents"
+        :band="data.transitiveDependentsBand"
+      />
+      <lfx-impact-breakdown-metric-row
+        name="Graph centrality"
+        signal-type="Primary"
+        description="How central this project is within the overall open source dependency graph."
+        :value="data.centrality"
+        :band="data.centralityBand"
+      />
+      <lfx-impact-breakdown-metric-row
+        name="Downloads"
+        signal-type="Secondary"
+        description="Package downloads across all registries linked to this project, in the last 30 days."
+        :value="data.downloads"
+        :band="data.downloadsBand"
+      />
+      <lfx-impact-breakdown-metric-row
+        name="Direct dependents"
+        signal-type="Secondary"
+        description="The number of projects that depend directly on this project's packages."
+        :value="data.directDependents"
+        :band="data.directDependentsBand"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxImpactBreakdownMetricRow from './impact-breakdown/metric-row.vue';
+import { getImpactLabelDisplay } from '~~/config/trust-score';
+import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
+
+const props = defineProps<{
+  impactScore: number | null;
+  impactLabel: string | null;
+  data: ImpactBreakdownResults | null;
+}>();
+
+const isEmpty = computed(() => props.impactScore === null);
+
+const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxImpactBreakdownSection',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
new file mode 100644
index 000000000..1cfc6fac0
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 py-4 [&:not(:last-child)]:border-b border-neutral-100"
+  >
+    <div>
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="text-sm font-semibold text-neutral-900">{{ props.name }}</span>
+        <lfx-tag
+          v-if="props.band"
+          variation="positive"
+          size="small"
+          >{{ props.band }}</lfx-tag
+        >
+        <lfx-tag
+          v-else
+          variation="default"
+          size="small"
+          >No data</lfx-tag
+        >
+      </div>
+      <span
+        v-if="props.signalType"
+        class="text-xs text-neutral-400"
+        >{{ props.signalType }} signal</span
+      >
+      <p class="text-xs text-neutral-500 mt-1">
+        {{ props.description }}
+      </p>
+    </div>
+    <span class="text-sm font-semibold text-neutral-900 shrink-0">
+      {{ props.value !== null ? formatNumberShort(props.value) : '—' }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxTag from '~/components/uikit/tag/tag.vue';
+import { formatNumberShort } from '~/components/shared/utils/formatter';
+
+const props = defineProps<{
+  name: string;
+  description: string;
+  value: number | null;
+  band: string | null;
+  signalType?: 'Primary' | 'Secondary' | null;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxImpactBreakdownMetricRow',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index c9b67abce..e3bd30a7b 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -5,73 +5,115 @@ SPDX-License-Identifier: MIT
 <template>
   <div class="px-6">
     <template v-if="!isArchived">
-      <div class="flex flex-row justify-between">
-        <div class="pr-6 w-full">
-          <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
-
-          <lfx-skeleton-state
-            v-if="status === 'pending' || !isEmpty"
-            :status="status"
-            height="1.75rem"
-            width="11.5rem"
-          >
-            <div class="flex items-center gap-3 text-3xl font-bold cursor-default">
-              <div
-                class="h-3 w-3 rounded-full shrink-0"
-                :class="scoreColorClass"
-              />
-              {{ scoreLabel }}
+      <lfx-skeleton-state
+        v-if="status === 'pending' || !isEmpty"
+        :status="status"
+        height="10rem"
+        width="100%"
+      >
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="flex flex-col items-start gap-3">
+            <span class="text-xs font-semibold text-neutral-500 tracking-wide">HEALTH SCORE</span>
+            <lfx-health-score-ring
+              :score="healthScoreV2 ?? 0"
+              :color="scoreColorHex"
+            />
+            <span
+              class="text-sm font-semibold"
+              :class="scoreTextColorClass"
+              >{{ scoreLabel }}</span
+            >
+            <p
+              v-if="healthScoreDescription"
+              class="text-xs text-neutral-500"
+            >
+              {{ healthScoreDescription }}
+            </p>
+          </div>
+
+          <div class="flex flex-col items-start gap-3">
+            <span class="text-xs font-semibold text-neutral-500 tracking-wide">IMPACT</span>
+            <div class="flex items-baseline gap-1.5">
+              <span class="text-sm font-semibold text-neutral-900">{{ impactLabelDisplay }}</span>
               <span
-                v-if="healthScoreV2 !== null"
-                class="text-neutral-500 text-lg font-semibold"
-                >{{ healthScoreV2 }}/100</span
+                v-if="impactScore !== null"
+                class="text-xs text-neutral-500"
+                >({{ impactScore }}/100)</span
               >
             </div>
-          </lfx-skeleton-state>
-
-          <div
-            v-if="status === 'error'"
-            class="text-xs text-neutral-500 mt-4"
-          >
-            Something went wrong while loading the Health score for this project. Please try again later.
-          </div>
-          <div
-            v-else-if="isEmpty && status !== 'pending'"
-            class="text-xs text-neutral-500 mt-4"
-          >
-            LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
+            <lfx-progress-bar
+              v-if="impactScore !== null"
+              :values="[impactScore]"
+              color="normal"
+              size="small"
+              class="mt-1"
+            />
+            <p class="text-xs text-neutral-500">
+              How central and depended-upon this project is within the open source ecosystem.
+            </p>
           </div>
-          <template v-else>
-            <div
-              v-if="isRepoSelected"
-              class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
-            >
-              <lfx-icon
-                name="info-circle"
-                :size="12"
-                type="solid"
-                class="text-brand-600"
+
+          <div class="flex flex-col items-start gap-3">
+            <span class="text-xs font-semibold text-neutral-500 tracking-wide">LIFECYCLE</span>
+            <div class="flex items-center gap-2">
+              <span
+                class="h-2.5 w-2.5 rounded-full shrink-0"
+                :class="lifecycleConfig.color"
               />
-              Select "All repositories" in order to get the aggregated Health Score
+              <span class="text-sm font-semibold text-neutral-900">{{ lifecycleConfig.label }}</span>
             </div>
-            <p class="text-xs text-neutral-500 mt-4">
-              The Insights Health Score measures an open source project's overall trustworthiness.
-              <a
-                :href="links.trustScore"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-brand-500"
-                >Learn more</a
-              >
+            <p class="text-xs text-neutral-500">
+              Reflects the project's current stage of development and maintenance activity.
             </p>
-          </template>
+          </div>
         </div>
+
         <div
-          v-if="showShareBadge"
-          class="w-[200px] hidden sm:block"
+          v-if="isRepoSelected"
+          class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-4 bg-brand-50 rounded-full px-1.5"
         >
-          <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
+          <lfx-icon
+            name="info-circle"
+            :size="12"
+            type="solid"
+            class="text-brand-600"
+          />
+          Select "All repositories" in order to get the aggregated Health Score
+        </div>
+
+        <hr class="border-neutral-100 my-6" />
+
+        <div class="flex flex-row items-center justify-between flex-wrap gap-3">
+          <div
+            v-if="showShareBadge"
+            class="w-full sm:w-auto"
+          >
+            <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
+          </div>
+          <p class="text-xs text-neutral-500">
+            The Insights Health Score measures an open source project's overall trustworthiness.
+            <a
+              :href="links.trustScore"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-brand-500"
+              >Learn more</a
+            >
+          </p>
         </div>
+      </lfx-skeleton-state>
+
+      <div
+        v-if="status === 'error'"
+        class="text-xs text-neutral-500 mt-4"
+      >
+        Something went wrong while loading the Health score for this project. Please try again later.
+      </div>
+      <div
+        v-else-if="isEmpty && status !== 'pending'"
+        class="text-xs text-neutral-500 mt-4"
+      >
+        LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
       </div>
     </template>
 
@@ -89,16 +131,22 @@ import { computed } from 'vue';
 import type { AsyncDataRequestStatus } from 'nuxt/app';
 import { storeToRefs } from 'pinia';
 import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
+import LfxHealthScoreRing from './trust-score/health-score-ring.vue';
 import { links } from '~/config/links';
-import { getHealthScoreV2Config } from '~~/config/trust-score';
+import { getHealthScoreV2Config, getImpactLabelDisplay, getLifecycleLabelConfig } from '~~/config/trust-score';
+import { lfxColors } from '~/config/styles/colors';
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
 import LfxEmptyState from '~/components/shared/components/empty-state.vue';
 import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const props = defineProps<{
   healthScoreV2: number | null;
   healthLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+  lifecycleLabel: string | null;
   status: AsyncDataRequestStatus;
   isRepoSelected: boolean;
 }>();
@@ -113,11 +161,30 @@ const showShareBadge = computed(
 
 const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
 
-const scoreColorClass = computed(() => {
+const scoreColorHex = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return lfxColors.positive[500];
+  if (label === 'fair' || label === 'concerning') return lfxColors.warning[500];
+  return lfxColors.negative[500];
+});
+
+const scoreTextColorClass = computed(() => {
   const label = props.healthLabel;
-  if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
-  if (label === 'fair' || label === 'concerning') return 'bg-health-concerning';
-  return 'bg-negative-500';
+  if (label === 'excellent' || label === 'healthy') return 'text-positive-500';
+  if (label === 'fair' || label === 'concerning') return 'text-warning-500';
+  return 'text-negative-500';
+});
+
+const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
+
+const lifecycleConfig = computed(() => getLifecycleLabelConfig(props.lifecycleLabel));
+
+// No backend field carries a free-text health score summary today, so a specific claim like
+// the Figma copy ("solid security practices"...) can't be derived without fabricating data
+// (see IN-1212 spec). Rendered as a generic, label-derived sentence instead of inventing detail.
+const healthScoreDescription = computed(() => {
+  if (props.healthLabel === null) return null;
+  return `Overall project health is ${scoreLabel.value.toLowerCase()}, based on maintainer activity, security posture, and development cadence.`;
 });
 </script>
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
new file mode 100644
index 000000000..013583fd7
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
@@ -0,0 +1,42 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="relative h-28 w-28 shrink-0">
+    <lfx-chart :config="gaugeConfig" />
+    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+      <span class="text-4xl font-secondary font-light text-neutral-900 leading-none">{{ props.score }}</span>
+      <span class="text-xs text-neutral-500 mt-1">out of 100</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxChart from '~/components/uikit/chart/chart.vue';
+import { getGaugeChartConfig } from '~/components/uikit/chart/configs/gauge.chart';
+import { lfxColors } from '~/config/styles/colors';
+
+const props = defineProps<{
+  score: number;
+  color?: string;
+}>();
+
+const gaugeConfig = computed(() =>
+  getGaugeChartConfig({
+    value: props.score,
+    maxValue: 100,
+    gaugeType: 'full',
+    name: '',
+    graphOnly: true,
+    lineColor: props.color || lfxColors.positive[500],
+  }),
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthScoreRing',
+};
+</script>
diff --git a/frontend/app/components/modules/project/services/overview.api.service.ts b/frontend/app/components/modules/project/services/overview.api.service.ts
index a7044e535..991190a3e 100644
--- a/frontend/app/components/modules/project/services/overview.api.service.ts
+++ b/frontend/app/components/modules/project/services/overview.api.service.ts
@@ -8,7 +8,10 @@ import type { WidgetArea } from '../../widget/types/widget-area';
 import type { Widget } from '../../widget/types/widget';
 import type { WidgetConfig } from '../../widget/config/widget.config';
 import { lfxWidgets } from '../../widget/config/widget.config';
-import type { HealthScoreV2Results } from '~~/types/overview/responses.types';
+import type {
+  HealthScoreV2Results,
+  ImpactBreakdownResults,
+} from '~~/types/overview/responses.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { Organization } from '~~/types/contributors/responses.types';
 
@@ -34,6 +37,20 @@ class OverviewApiService {
     });
   }
 
+  fetchHealthScoreImpactBreakdown(params: ComputedRef<{ projectSlug: string }>) {
+    const queryKey = computed(() => [
+      TanstackKey.HEALTH_SCORE_IMPACT_BREAKDOWN,
+      params.value.projectSlug,
+    ]);
+    const queryFn: QueryFunction<ImpactBreakdownResults> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-impact`);
+
+    return useQuery<ImpactBreakdownResults>({
+      queryKey,
+      queryFn,
+    });
+  }
+
   fetchAssociatedOrganization(params: ComputedRef<OverviewQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.ASSOCIATED_ORGANIZATION,
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 25ed9980a..84e700360 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: MIT
 <template>
   <div class="container">
     <div class="flex justify-between pt-5 md:pt-10 lg:gap-10 gap-5 flex-col md:flex-row">
-      <div class="w-full md:w-3/4">
+      <div class="w-full md:w-3/4 flex flex-col gap-6">
         <lfx-card
           class="pt-6 flex flex-col md:gap-10 gap-5"
           :class="{
@@ -15,6 +15,9 @@ SPDX-License-Identifier: MIT
           <lfx-project-trust-score-v2
             :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
             :health-label="healthScoreV2Data?.healthLabel ?? null"
+            :impact-score="healthScoreV2Data?.impactScore ?? null"
+            :impact-label="healthScoreV2Data?.impactLabel ?? null"
+            :lifecycle-label="healthScoreV2Data?.lifecycleLabel ?? null"
             :status="healthScoreV2Status"
             :is-repo-selected="selectedRepositories.length > 0"
           />
@@ -23,6 +26,30 @@ SPDX-License-Identifier: MIT
             page-content="health-score"
           />
         </lfx-card>
+
+        <lfx-card
+          v-if="healthScoreV2Status !== 'pending' && !isArchived"
+          class="p-6"
+        >
+          <lfx-health-breakdown-section
+            :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
+            :health-label="healthScoreV2Data?.healthLabel ?? null"
+            :maintainer-health-score-v2="healthScoreV2Data?.maintainerHealthScoreV2 ?? null"
+            :security-supply-chain-score-v2="healthScoreV2Data?.securitySupplyChainScoreV2 ?? null"
+            :development-activity-score-v2="healthScoreV2Data?.developmentActivityScoreV2 ?? null"
+          />
+        </lfx-card>
+
+        <lfx-card
+          v-if="healthScoreV2Status !== 'pending' && !isArchived"
+          class="p-6"
+        >
+          <lfx-impact-breakdown-section
+            :impact-score="healthScoreV2Data?.impactScore ?? null"
+            :impact-label="healthScoreV2Data?.impactLabel ?? null"
+            :data="impactBreakdownData ?? null"
+          />
+        </lfx-card>
       </div>
       <div class="min-w-50 max-md:w-full w-1/4">
         <lfx-project-about-section />
@@ -37,13 +64,15 @@ import { useRoute } from 'nuxt/app';
 import { storeToRefs } from 'pinia';
 import LfxProjectAboutSection from '~/components/modules/project/components/overview/about-section.vue';
 import LfxProjectTrustScoreV2 from '~/components/modules/project/components/overview/trust-score-v2.vue';
+import LfxHealthBreakdownSection from '~/components/modules/project/components/overview/health-breakdown-section.vue';
+import LfxImpactBreakdownSection from '~/components/modules/project/components/overview/impact-breakdown-section.vue';
 import { OVERVIEW_API_SERVICE } from '~~/app/components/modules/project/services/overview.api.service';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxReposExclusionFooter from '~/components/shared/components/repos-exclusion-footer.vue';
 import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const route = useRoute();
-const { hasSelectedArchivedRepos, selectedRepositories } = storeToRefs(useProjectStore());
+const { hasSelectedArchivedRepos, selectedRepositories, isArchived } = storeToRefs(useProjectStore());
 
 const params = computed(() => ({
   projectSlug: route.params.slug as string,
@@ -55,8 +84,11 @@ const {
   suspense,
 } = OVERVIEW_API_SERVICE.fetchHealthScoreV2(params);
 
+const { data: impactBreakdownData, suspense: impactBreakdownSuspense } =
+  OVERVIEW_API_SERVICE.fetchHealthScoreImpactBreakdown(params);
+
 onServerPrefetch(async () => {
-  await suspense();
+  await Promise.all([suspense(), impactBreakdownSuspense()]);
 });
 </script>
 
diff --git a/frontend/app/components/shared/types/tanstack.ts b/frontend/app/components/shared/types/tanstack.ts
index 9b42941c8..7bf98af9d 100644
--- a/frontend/app/components/shared/types/tanstack.ts
+++ b/frontend/app/components/shared/types/tanstack.ts
@@ -59,6 +59,7 @@ export enum TanstackKey {
   HEALTH_SCORE = 'health-score',
   HEALTH_SCORE_OVERVIEW = 'health-score-overview',
   HEALTH_SCORE_V2 = 'health-score-v2',
+  HEALTH_SCORE_IMPACT_BREAKDOWN = 'health-score-impact-breakdown',
   TRUST_SCORE_SUMMARY = 'trust-score-summary',
   SCORE_DATA = 'score-data',
   ASSOCIATED_ORGANIZATION = 'associated-organization',
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 927fb8da3..66100fbbf 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -84,3 +84,36 @@ export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Confi
   }
   return healthScoreV2Config.unavailable;
 };
+
+// Impact labels come from project_insights_copy.pipe's impactLabel multiIf: foundational (>=85),
+// major (>=60), moderate (>=30), minor (below).
+export const impactLabelConfig: Record<string, string> = {
+  foundational: 'Foundational',
+  major: 'Major',
+  moderate: 'Moderate',
+  minor: 'Minor',
+};
+
+export const getImpactLabelDisplay = (label: string | null): string => {
+  if (label && impactLabelConfig[label]) {
+    return impactLabelConfig[label];
+  }
+  return 'Unavailable';
+};
+
+// Lifecycle labels come from health_score_v2's lifecycleLabelV2: active, stable, declining,
+// abandoned, archived (best-state-wins across a project's repos).
+export const lifecycleLabelConfig: Record<string, { label: string; color: string }> = {
+  active: { label: 'Active', color: 'bg-positive-500' },
+  stable: { label: 'Stable', color: 'bg-positive-500' },
+  declining: { label: 'Declining', color: 'bg-warning-500' },
+  abandoned: { label: 'Abandoned', color: 'bg-negative-500' },
+  archived: { label: 'Archived', color: 'bg-neutral-400' },
+};
+
+export const getLifecycleLabelConfig = (label: string | null): { label: string; color: string } => {
+  if (label && lifecycleLabelConfig[label]) {
+    return lifecycleLabelConfig[label];
+  }
+  return { label: 'Unavailable', color: 'bg-neutral-400' };
+};
diff --git a/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts b/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts
new file mode 100644
index 000000000..af909a8c5
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<ImpactBreakdownResults> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<ImpactBreakdownResults[]>(
+      '/v0/pipes/project_insights_impact_breakdown.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    return res.data[0];
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score impact breakdown:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score impact breakdown',
+    });
+  }
+});
diff --git a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
index bcb1d32cd..d4071070e 100644
--- a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
+++ b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
@@ -17,8 +17,26 @@ export default defineEventHandler(async (event): Promise<HealthScoreV2Results> =
     if (!res.data || res.data.length === 0) {
       throw createError({ statusCode: 404, statusMessage: 'Not found' });
     }
-    const { healthScoreV2, healthLabel } = res.data[0];
-    return { healthScoreV2, healthLabel };
+    const {
+      healthScoreV2,
+      healthLabel,
+      lifecycleLabel,
+      impactScore,
+      impactLabel,
+      maintainerHealthScoreV2,
+      securitySupplyChainScoreV2,
+      developmentActivityScoreV2,
+    } = res.data[0];
+    return {
+      healthScoreV2,
+      healthLabel,
+      lifecycleLabel,
+      impactScore,
+      impactLabel,
+      maintainerHealthScoreV2,
+      securitySupplyChainScoreV2,
+      developmentActivityScoreV2,
+    };
   } catch (error: unknown) {
     if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
       throw error;
diff --git a/frontend/types/overview/responses.types.ts b/frontend/types/overview/responses.types.ts
index f7cc2628d..ab84001da 100644
--- a/frontend/types/overview/responses.types.ts
+++ b/frontend/types/overview/responses.types.ts
@@ -61,6 +61,29 @@ export interface BenchmarkScoreData {
 export interface HealthScoreV2Results {
   healthScoreV2: number | null;
   healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
+}
+
+export type ImpactBreakdownBand = 'Top 1%' | 'Top 10%' | 'Top 25%' | 'Top 50%' | 'Bottom 50%';
+
+export interface ImpactBreakdownResults {
+  directDependents: number | null;
+  directDependentsTopPct: number | null;
+  directDependentsBand: ImpactBreakdownBand | null;
+  transitiveDependents: number | null;
+  transitiveDependentsTopPct: number | null;
+  transitiveDependentsBand: ImpactBreakdownBand | null;
+  downloads: number | null;
+  downloadsTopPct: number | null;
+  downloadsBand: ImpactBreakdownBand | null;
+  centrality: number | null;
+  centralityTopPct: number | null;
+  centralityBand: ImpactBreakdownBand | null;
 }
 
 export interface HealthScoreResults {
diff --git a/frontend/types/project.ts b/frontend/types/project.ts
index aaf6f7f4b..da760a770 100644
--- a/frontend/types/project.ts
+++ b/frontend/types/project.ts
@@ -135,6 +135,9 @@ export interface ProjectInsightsTinybird {
   lifecycleLabel: string | null;
   impactScore: number | null;
   impactLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
   firstCommit: string;
   starsLast365Days: number;
   forksLast365Days: number;

From d422b799c6d17d5f6ec13dd1997e04bbe5b47d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 4 Aug 2026 18:48:34 +0100
Subject: [PATCH 10/11] fix: remove false repo-scoping banner, add impact error
 state, fix breakdown styling IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../overview/health-breakdown-section.vue      |  9 ++++++---
 .../health-breakdown/category-card.vue         |  5 ++++-
 .../overview/impact-breakdown-section.vue      | 18 +++++++++++++++---
 .../components/overview/trust-score-v2.vue     | 14 --------------
 .../modules/project/views/overview.vue         |  8 ++++++--
 frontend/config/trust-score.ts                 | 11 +++++++++++
 6 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
index 61d91b16b..a066ff2ba 100644
--- a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
@@ -5,9 +5,11 @@ SPDX-License-Identifier: MIT
 <template>
   <div v-if="!isEmpty">
     <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
-      <h2 class="text-heading-3 font-secondary font-bold">Health breakdown</h2>
-      <div
+      <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Health breakdown</h2>
+      <lfx-chip
         v-if="props.healthScoreV2 !== null"
+        type="bordered"
+        size="xsmall"
         class="flex items-center gap-1.5"
       >
         <span
@@ -15,7 +17,7 @@ SPDX-License-Identifier: MIT
           :class="scoreDotColorClass"
         />
         <span class="text-sm font-semibold text-neutral-900">{{ scoreLabel }} ({{ props.healthScoreV2 }}/100)</span>
-      </div>
+      </lfx-chip>
     </div>
     <p class="text-xs text-neutral-500 mb-4">
       Maintainer availability, known risks and supply chain posture, and whether the project is actively developed or
@@ -69,6 +71,7 @@ import { computed } from 'vue';
 import LfxHealthBreakdownCategoryCard from './health-breakdown/category-card.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
 import { getHealthScoreV2Config } from '~~/config/trust-score';
 
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
index 794f251a3..2efdb4ecc 100644
--- a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: MIT
     >
     <lfx-progress-bar
       :values="[progressPercent]"
-      color="normal"
+      :color="progressColor"
       size="small"
     />
   </lfx-card>
@@ -36,6 +36,7 @@ import { computed } from 'vue';
 import LfxCard from '~/components/uikit/card/card.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+import { getHealthScorePercentColor } from '~~/config/trust-score';
 
 const props = defineProps<{
   name: string;
@@ -48,6 +49,8 @@ const progressPercent = computed(() => {
   if (props.score === null || props.maxScore === 0) return 0;
   return (props.score / props.maxScore) * 100;
 });
+
+const progressColor = computed(() => getHealthScorePercentColor(progressPercent.value));
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
index b4cb0272b..1eb818760 100644
--- a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
@@ -5,15 +5,17 @@ SPDX-License-Identifier: MIT
 <template>
   <div v-if="!isEmpty">
     <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
-      <h2 class="text-heading-3 font-secondary font-bold">Impact breakdown</h2>
-      <div
+      <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Impact breakdown</h2>
+      <lfx-chip
         v-if="props.impactScore !== null"
+        type="bordered"
+        size="xsmall"
         class="flex items-center gap-1.5"
       >
         <span class="text-sm font-semibold text-neutral-900"
           >{{ impactLabelDisplay }} ({{ props.impactScore }}/100)</span
         >
-      </div>
+      </lfx-chip>
     </div>
     <p class="text-xs text-neutral-500 mb-2">
       How central this project is to the open source dependency graph, measured against every other tracked project.
@@ -49,12 +51,21 @@ SPDX-License-Identifier: MIT
         :band="data.directDependentsBand"
       />
     </div>
+
+    <div
+      v-else-if="status === 'error'"
+      class="text-xs text-neutral-500 mt-4"
+    >
+      Something went wrong while loading the Impact breakdown for this project. Please try again later.
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
 import LfxImpactBreakdownMetricRow from './impact-breakdown/metric-row.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
 import { getImpactLabelDisplay } from '~~/config/trust-score';
 import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
 
@@ -62,6 +73,7 @@ const props = defineProps<{
   impactScore: number | null;
   impactLabel: string | null;
   data: ImpactBreakdownResults | null;
+  status: AsyncDataRequestStatus;
 }>();
 
 const isEmpty = computed(() => props.impactScore === null);
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index e3bd30a7b..252aa6ba6 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -68,19 +68,6 @@ SPDX-License-Identifier: MIT
           </div>
         </div>
 
-        <div
-          v-if="isRepoSelected"
-          class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-4 bg-brand-50 rounded-full px-1.5"
-        >
-          <lfx-icon
-            name="info-circle"
-            :size="12"
-            type="solid"
-            class="text-brand-600"
-          />
-          Select "All repositories" in order to get the aggregated Health Score
-        </div>
-
         <hr class="border-neutral-100 my-6" />
 
         <div class="flex flex-row items-center justify-between flex-wrap gap-3">
@@ -136,7 +123,6 @@ import { links } from '~/config/links';
 import { getHealthScoreV2Config, getImpactLabelDisplay, getLifecycleLabelConfig } from '~~/config/trust-score';
 import { lfxColors } from '~/config/styles/colors';
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
 import LfxEmptyState from '~/components/shared/components/empty-state.vue';
 import { useProjectStore } from '~/components/modules/project/store/project.store';
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 84e700360..34ce3300d 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -48,6 +48,7 @@ SPDX-License-Identifier: MIT
             :impact-score="healthScoreV2Data?.impactScore ?? null"
             :impact-label="healthScoreV2Data?.impactLabel ?? null"
             :data="impactBreakdownData ?? null"
+            :status="impactBreakdownStatus"
           />
         </lfx-card>
       </div>
@@ -84,8 +85,11 @@ const {
   suspense,
 } = OVERVIEW_API_SERVICE.fetchHealthScoreV2(params);
 
-const { data: impactBreakdownData, suspense: impactBreakdownSuspense } =
-  OVERVIEW_API_SERVICE.fetchHealthScoreImpactBreakdown(params);
+const {
+  data: impactBreakdownData,
+  status: impactBreakdownStatus,
+  suspense: impactBreakdownSuspense,
+} = OVERVIEW_API_SERVICE.fetchHealthScoreImpactBreakdown(params);
 
 onServerPrefetch(async () => {
   await Promise.all([suspense(), impactBreakdownSuspense()]);
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 66100fbbf..058d27cc2 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -85,6 +85,17 @@ export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Confi
   return healthScoreV2Config.unavailable;
 };
 
+// Percentage-of-max thresholds mirroring the excellent/healthy vs fair/concerning vs critical
+// bands used for healthLabel elsewhere (see collection-health-score-pill.vue), applied here to a
+// per-category percentage since categories have no backend-provided label of their own.
+export const getHealthScorePercentColor = (
+  percent: number,
+): 'positive' | 'warning' | 'negative' => {
+  if (percent >= 60) return 'positive';
+  if (percent >= 20) return 'warning';
+  return 'negative';
+};
+
 // Impact labels come from project_insights_copy.pipe's impactLabel multiIf: foundational (>=85),
 // major (>=60), moderate (>=30), minor (below).
 export const impactLabelConfig: Record<string, string> = {

From 2a325fdd2a6d2638f0e85e2e817339b1f19d8f79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Thu, 6 Aug 2026 13:17:35 +0100
Subject: [PATCH 11/11] feat: migrate health score displays to v2 backend
 IN-1212
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrates the health score card, breakdown tabs, share badge, collection
health pill, and impact breakdown from the v1 backend to v2, and
implements the Health Score v2 content spec end-to-end:

- Real per-project generated copy (lifecycle description, category
  descriptions, signal-row descriptions, impact summary) replacing
  fixed/fabricated text that was previously identical across all
  projects, via a new config/health-breakdown-templates.ts module.
- New health-breakdown-section.vue signal rows per category
  (Maintainer/Security/Development), driven by the new
  health-score-breakdown server route consuming crowd.dev's newly
  exposed sub-signal detail.
- Impact breakdown badges, per-signal descriptions, and a Pending state
  for signals still being computed (e.g. graph centrality).
- v1 -> v2 label/threshold migration (Excellent/Healthy/Fair/Concerning/
  Critical @ 85/70/50/30) across trust-score.ts, collection health pill,
  and the GitHub badge endpoint, removing the dead v1 lfxTrustScore
  config and its orphaned score-display.vue consumer.
- Archived-repos exclusion banner moved above the health-score card and
  reworded (design feedback), with a documentation tooltip on the
  Health Score label pending a real doc link.

Depends on the crowd.dev CM-IN-1212 pipe chain (already deployed to
production).

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../details/collection-health-score-pill.vue  |  16 +-
 .../details/collection-metrics-row.vue        |  13 +-
 .../overview/health-breakdown-section.vue     | 194 +++++-
 .../health-breakdown/category-card.vue        |  77 ++-
 .../overview/impact-breakdown-section.vue     | 110 ++--
 .../overview/impact-breakdown/metric-row.vue  |  34 +-
 .../components/overview/trust-score-v2.vue    | 141 ++--
 .../trust-score/health-score-ring.vue         |  35 +-
 .../overview/trust-score/score-display.vue    |  71 --
 .../overview/trust-score/share-badge.vue      |  38 +-
 .../project/services/overview.api.service.ts  |  12 +
 .../modules/project/views/overview.vue        |  25 +-
 .../shared/components/health-score.vue        |   8 +-
 .../components/repos-exclusion-footer.vue     |   5 +-
 .../app/components/shared/types/tanstack.ts   |   1 +
 .../uikit/benchmarks/benchmark-icon.vue       |  10 +-
 .../uikit/benchmarks/benchmarks.scss          |  26 +
 .../uikit/chart/configs/gauge.chart.ts        |   9 +
 .../uikit/chart/types/ChartTypes.ts           |   1 +
 frontend/app/components/uikit/tag/tag.scss    |   9 +
 .../app/components/uikit/tag/tag.stories.ts   |   9 +
 .../components/uikit/tag/types/tag.types.ts   |   2 +-
 frontend/app/config/styles/colors.ts          |   1 +
 frontend/config/health-breakdown-templates.ts | 623 ++++++++++++++++++
 frontend/config/trust-score.ts                |  85 +--
 frontend/server/api/badge/health-score.ts     |   3 +-
 .../overview/health-score-breakdown.get.ts    |  30 +
 frontend/tailwind.config.js                   |   1 +
 frontend/types/overview/responses.types.ts    |  56 ++
 29 files changed, 1285 insertions(+), 360 deletions(-)
 delete mode 100644 frontend/app/components/modules/project/components/overview/trust-score/score-display.vue
 create mode 100644 frontend/config/health-breakdown-templates.ts
 create mode 100644 frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts

diff --git a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
index fbbf57c5e..d06e113eb 100644
--- a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
@@ -48,22 +48,24 @@ const healthScoreLabel = computed(() => {
     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' || props.healthLabel === 'concerning') return 'bg-health-concerning';
+    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>
diff --git a/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue b/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue
index ed022e8e0..eede8b35a 100644
--- a/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue
+++ b/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>
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
index a066ff2ba..83433d10c 100644
--- a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
@@ -3,7 +3,7 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div v-if="!isEmpty">
+  <div>
     <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
       <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Health breakdown</h2>
       <lfx-chip
@@ -16,7 +16,8 @@ SPDX-License-Identifier: MIT
           class="h-2 w-2 rounded-full shrink-0"
           :class="scoreDotColorClass"
         />
-        <span class="text-sm font-semibold text-neutral-900">{{ scoreLabel }} ({{ props.healthScoreV2 }}/100)</span>
+        <span class="font-semibold text-neutral-900">{{ scoreLabel }}</span>
+        <span class="text-neutral-500">({{ props.healthScoreV2 }}/100)</span>
       </lfx-chip>
     </div>
     <p class="text-xs text-neutral-500 mb-4">
@@ -24,39 +25,65 @@ SPDX-License-Identifier: MIT
       appropriately stable.
     </p>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-      <lfx-health-breakdown-category-card
-        name="Maintainer Health"
-        icon="people-group"
-        :score="props.maintainerHealthScoreV2"
-        :max-score="40"
-      />
-      <lfx-health-breakdown-category-card
-        name="Security & Supply Chain"
-        icon="lock-keyhole"
-        :score="props.securitySupplyChainScoreV2"
-        :max-score="35"
+    <div
+      v-if="isEmpty"
+      class="flex items-center gap-1.5 text-xs text-neutral-500 mb-4"
+    >
+      <lfx-icon
+        name="circle-info"
+        :size="14"
+        class="text-neutral-400 shrink-0"
       />
+      <span>Health Score unavailable. All three categories have less than 40% signal coverage for this project.</span>
+    </div>
+
+    <div class="flex items-stretch gap-1 p-1 bg-neutral-50 rounded-lg mb-4">
       <lfx-health-breakdown-category-card
-        name="Development Activity"
-        icon="chart-line"
-        :score="props.developmentActivityScoreV2"
-        :max-score="25"
+        v-for="category in categories"
+        :key="category.key"
+        :name="category.name"
+        :icon="category.icon"
+        :score="category.score"
+        :max-score="category.maxScore"
+        :color="category.color"
+        :description="category.description"
+        :selected="selectedCategoryKey === category.key"
+        @select="selectedCategoryKey = category.key"
       />
     </div>
 
-    <p class="text-xs text-neutral-400 mb-4">
-      Per-signal detail (e.g. maintainer responsiveness, bus factor) isn't available as individually reported data yet —
-      the categories above reflect the full underlying signal set.
-    </p>
+    <div
+      v-if="selectedCategoryRows.length > 0"
+      class="mb-4"
+    >
+      <div
+        v-for="row in selectedCategoryRows"
+        :key="row.name"
+        class="flex items-center gap-6 py-2 [&:not(:last-child)]:border-b border-neutral-200"
+        :class="{ 'opacity-60': row.status === 'no-data' }"
+      >
+        <div class="flex items-center gap-4 w-60 shrink-0">
+          <lfx-benchmark-icon
+            :type="row.status"
+            :size="12"
+            :use-triangle="row.status === 'warning'"
+            circle
+          />
+          <span class="text-sm font-semibold text-neutral-900">{{ row.name }}</span>
+        </div>
+        <p class="text-xs text-neutral-500">{{ row.description }}</p>
+      </div>
+    </div>
 
-    <nuxt-link :to="{ name: LfxRoutes.PROJECT_CONTRIBUTORS }">
+    <nuxt-link
+      :to="{ name: selectedCategoryRoute.name }"
+      class="flex justify-start"
+    >
       <lfx-button
-        type="tertiary"
-        size="small"
-        class="!text-xs"
+        type="transparent"
+        button-style="pill"
       >
-        View more in Contributors
+        View more in {{ selectedCategoryRoute.label }}
         <lfx-icon
           name="arrow-up-right"
           :size="12"
@@ -67,13 +94,30 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import LfxHealthBreakdownCategoryCard from './health-breakdown/category-card.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxBenchmarkIcon from '~/components/uikit/benchmarks/benchmark-icon.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
 import { getHealthScoreV2Config } from '~~/config/trust-score';
+import {
+  getCategoryDescription,
+  getCategoryScoreColor,
+  getResponsivenessRow,
+  getBusFactorRow,
+  getOrgDiversityRow,
+  getOpenVulnRow,
+  getScorecardRow,
+  getSecurityPracticesRow,
+  getDependencyHealthRow,
+  getReleaseCadenceRow,
+  getCommitActivityRow,
+  getIssueResolutionRow,
+  getPrMergeRow,
+} from '~~/config/health-breakdown-templates';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
 
 const props = defineProps<{
   healthScoreV2: number | null;
@@ -81,6 +125,7 @@ const props = defineProps<{
   maintainerHealthScoreV2: number | null;
   securitySupplyChainScoreV2: number | null;
   developmentActivityScoreV2: number | null;
+  signals: HealthBreakdownResults | null;
 }>();
 
 const isEmpty = computed(() => props.healthScoreV2 === null);
@@ -90,9 +135,100 @@ const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).labe
 const scoreDotColorClass = computed(() => {
   const label = props.healthLabel;
   if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
-  if (label === 'fair' || label === 'concerning') return 'bg-warning-500';
+  if (label === 'fair') return 'bg-accent-500';
+  if (label === 'concerning') return 'bg-warning-500';
   return 'bg-negative-500';
 });
+
+const categories = computed(() => [
+  {
+    key: 'maintainer-health' as const,
+    name: 'Maintainer Health',
+    icon: 'heart-pulse',
+    score: props.maintainerHealthScoreV2,
+    maxScore: 40,
+    color:
+      props.maintainerHealthScoreV2 !== null
+        ? getCategoryScoreColor('maintainer', props.maintainerHealthScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'maintainer',
+      props.maintainerHealthScoreV2,
+      props.maintainerHealthScoreV2 !== null,
+      props.signals,
+    ),
+  },
+  {
+    key: 'security-supply-chain' as const,
+    name: 'Security & Supply Chain',
+    icon: 'shield-check',
+    score: props.securitySupplyChainScoreV2,
+    maxScore: 35,
+    color:
+      props.securitySupplyChainScoreV2 !== null
+        ? getCategoryScoreColor('security', props.securitySupplyChainScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'security',
+      props.securitySupplyChainScoreV2,
+      props.securitySupplyChainScoreV2 !== null,
+      props.signals,
+    ),
+  },
+  {
+    key: 'development-activity' as const,
+    name: 'Development Activity',
+    icon: 'laptop-code',
+    score: props.developmentActivityScoreV2,
+    maxScore: 25,
+    color:
+      props.developmentActivityScoreV2 !== null
+        ? getCategoryScoreColor('development', props.developmentActivityScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'development',
+      props.developmentActivityScoreV2,
+      props.developmentActivityScoreV2 !== null,
+      props.signals,
+    ),
+  },
+]);
+
+const selectedCategoryKey = ref(categories.value[0].key);
+
+const categoryRoutes: Record<(typeof categories.value)[number]['key'], { name: LfxRoutes; label: string }> = {
+  'maintainer-health': { name: LfxRoutes.PROJECT_CONTRIBUTORS, label: 'Contributors' },
+  'security-supply-chain': { name: LfxRoutes.PROJECT_SECURITY, label: 'Security & Best practices' },
+  'development-activity': { name: LfxRoutes.PROJECT_DEVELOPMENT, label: 'Development' },
+};
+
+const selectedCategoryRoute = computed(() => categoryRoutes[selectedCategoryKey.value]);
+
+const selectedCategoryRows = computed(() => {
+  if (!props.signals) return [];
+  const signals = props.signals;
+  if (selectedCategoryKey.value === 'maintainer-health') {
+    return [
+      { name: 'Maintainer responsiveness', ...getResponsivenessRow(signals) },
+      { name: 'Bus factor', ...getBusFactorRow(signals) },
+      { name: 'Org diversity', ...getOrgDiversityRow(signals) },
+    ];
+  }
+  if (selectedCategoryKey.value === 'security-supply-chain') {
+    return [
+      { name: 'Open vulnerabilities', ...getOpenVulnRow(signals) },
+      { name: 'Security practices', ...getSecurityPracticesRow(signals) },
+      { name: 'OpenSSF Scorecard', ...getScorecardRow(signals) },
+      { name: 'Dependency health', ...getDependencyHealthRow(signals) },
+    ];
+  }
+  return [
+    { name: 'Release cadence', ...getReleaseCadenceRow(signals) },
+    { name: 'Commit activity', ...getCommitActivityRow(signals) },
+    { name: 'Issue resolution', ...getIssueResolutionRow(signals) },
+    { name: 'PR merge health', ...getPrMergeRow(signals) },
+  ];
+});
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
index 2efdb4ecc..e974d23c0 100644
--- a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
@@ -3,54 +3,81 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <lfx-card class="p-4 flex flex-col gap-3">
-    <div class="flex items-center gap-2">
+  <button
+    type="button"
+    class="flex-1 min-w-0 flex flex-col gap-4 items-start p-4 rounded-md text-left transition-colors"
+    :class="
+      props.selected
+        ? 'c-card !border-transparent !shadow-md !rounded-md'
+        : 'bg-transparent border border-transparent hover:bg-white/60'
+    "
+    @click="emit('select')"
+  >
+    <div class="flex flex-col gap-2 items-start w-full">
+      <lfx-progress-bar
+        :values="[progressPercent]"
+        :color="props.color"
+        size="small"
+        class="w-full"
+      />
       <lfx-icon
         :name="props.icon"
-        type="regular"
+        type="light"
         :size="16"
-        class="text-neutral-500"
+        class="text-neutral-900"
       />
-      <span class="text-sm font-semibold text-neutral-900">{{ props.name }}</span>
     </div>
-    <span
-      v-if="props.score !== null"
-      class="text-xs text-neutral-500"
-      >{{ props.score }}/{{ props.maxScore }}</span
-    >
-    <span
-      v-else
-      class="text-xs text-neutral-400"
-      >No data</span
-    >
-    <lfx-progress-bar
-      :values="[progressPercent]"
-      :color="progressColor"
-      size="small"
-    />
-  </lfx-card>
+
+    <div class="flex items-start justify-between w-full gap-2">
+      <span
+        class="text-sm text-neutral-900"
+        :class="props.selected ? 'font-semibold' : 'font-medium'"
+        >{{ props.name }}</span
+      >
+      <span
+        v-if="props.score !== null"
+        class="text-xs shrink-0"
+      >
+        <span class="text-neutral-900">{{ props.score }}</span
+        ><span class="text-neutral-400">/{{ props.maxScore }}</span>
+      </span>
+      <span
+        v-else
+        class="text-xs text-neutral-400 shrink-0"
+        >No data</span
+      >
+    </div>
+
+    <p class="text-xs text-neutral-600 w-full">
+      {{ props.description }}
+    </p>
+  </button>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfxCard from '~/components/uikit/card/card.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
-import { getHealthScorePercentColor } from '~~/config/trust-score';
+import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
 
 const props = defineProps<{
   name: string;
   icon: string;
   score: number | null;
   maxScore: number;
+  color: ProgressBarType;
+  description: string;
+  selected: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
 }>();
 
 const progressPercent = computed(() => {
   if (props.score === null || props.maxScore === 0) return 0;
   return (props.score / props.maxScore) * 100;
 });
-
-const progressColor = computed(() => getHealthScorePercentColor(progressPercent.value));
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
index 1eb818760..b88fabc5a 100644
--- a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
@@ -3,7 +3,7 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div v-if="!isEmpty">
+  <div>
     <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
       <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Impact breakdown</h2>
       <lfx-chip
@@ -12,52 +12,64 @@ SPDX-License-Identifier: MIT
         size="xsmall"
         class="flex items-center gap-1.5"
       >
-        <span class="text-sm font-semibold text-neutral-900"
-          >{{ impactLabelDisplay }} ({{ props.impactScore }}/100)</span
-        >
+        <span class="font-semibold text-neutral-900">{{ impactLabelDisplay }}</span>
+        <span class="text-neutral-500">({{ props.impactScore }}/100)</span>
       </lfx-chip>
     </div>
-    <p class="text-xs text-neutral-500 mb-2">
-      How central this project is to the open source dependency graph, measured against every other tracked project.
-    </p>
 
-    <div v-if="data">
-      <lfx-impact-breakdown-metric-row
-        name="Transitive dependents"
-        signal-type="Primary"
-        description="The number of projects that depend on this project, directly or through another dependency."
-        :value="data.transitiveDependents"
-        :band="data.transitiveDependentsBand"
-      />
-      <lfx-impact-breakdown-metric-row
-        name="Graph centrality"
-        signal-type="Primary"
-        description="How central this project is within the overall open source dependency graph."
-        :value="data.centrality"
-        :band="data.centralityBand"
-      />
-      <lfx-impact-breakdown-metric-row
-        name="Downloads"
-        signal-type="Secondary"
-        description="Package downloads across all registries linked to this project, in the last 30 days."
-        :value="data.downloads"
-        :band="data.downloadsBand"
-      />
-      <lfx-impact-breakdown-metric-row
-        name="Direct dependents"
-        signal-type="Secondary"
-        description="The number of projects that depend directly on this project's packages."
-        :value="data.directDependents"
-        :band="data.directDependentsBand"
-      />
-    </div>
+    <lfx-empty-state
+      v-if="isEmpty"
+      icon="chart-network"
+      title="Impact not available"
+      description="This project publishes no tracked packages. Impact cannot be computed without a package registry presence."
+    />
+    <template v-else>
+      <p
+        v-if="impactDescription"
+        class="text-xs text-neutral-500 mb-2"
+      >
+        {{ impactDescription }}
+      </p>
 
-    <div
-      v-else-if="status === 'error'"
-      class="text-xs text-neutral-500 mt-4"
-    >
-      Something went wrong while loading the Impact breakdown for this project. Please try again later.
-    </div>
+      <div v-if="data">
+        <lfx-impact-breakdown-metric-row
+          name="Transitive dependents"
+          signal-type="Primary"
+          :description="getTransitiveDependentsDescription(data.transitiveDependents)"
+          :value="data.transitiveDependents"
+          :band="data.transitiveDependentsBand"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Graph centrality"
+          signal-type="Primary"
+          :description="getGraphCentralityDescription(data.centrality, data.centrality === null)"
+          :value="data.centrality"
+          :band="data.centralityBand"
+          :is-pending="data.centrality === null"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Downloads"
+          signal-type="Secondary"
+          :description="getDownloadsDescription(data.downloads)"
+          :value="data.downloads"
+          :band="data.downloadsBand"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Direct dependents"
+          signal-type="Secondary"
+          :description="getDirectDependentsDescription(data.directDependents)"
+          :value="data.directDependents"
+          :band="data.directDependentsBand"
+        />
+      </div>
+
+      <div
+        v-else-if="status === 'error'"
+        class="text-xs text-neutral-500 mt-4"
+      >
+        Something went wrong while loading the Impact breakdown for this project. Please try again later.
+      </div>
+    </template>
   </div>
 </template>
 
@@ -66,7 +78,15 @@ import { computed } from 'vue';
 import type { AsyncDataRequestStatus } from 'nuxt/app';
 import LfxImpactBreakdownMetricRow from './impact-breakdown/metric-row.vue';
 import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxEmptyState from '~/components/shared/components/empty-state.vue';
 import { getImpactLabelDisplay } from '~~/config/trust-score';
+import {
+  getTransitiveDependentsDescription,
+  getGraphCentralityDescription,
+  getDownloadsDescription,
+  getDirectDependentsDescription,
+  getImpactSummaryDescription,
+} from '~~/config/health-breakdown-templates';
 import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
 
 const props = defineProps<{
@@ -79,6 +99,10 @@ const props = defineProps<{
 const isEmpty = computed(() => props.impactScore === null);
 
 const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
+
+const impactDescription = computed(() =>
+  getImpactSummaryDescription(props.impactLabel, props.data?.transitiveDependents),
+);
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
index 1cfc6fac0..efc1e8837 100644
--- a/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
@@ -10,8 +10,15 @@ SPDX-License-Identifier: MIT
       <div class="flex items-center gap-2 flex-wrap">
         <span class="text-sm font-semibold text-neutral-900">{{ props.name }}</span>
         <lfx-tag
-          v-if="props.band"
-          variation="positive"
+          v-if="props.isPending"
+          variation="default"
+          size="small"
+          type="dashed"
+          >Pending</lfx-tag
+        >
+        <lfx-tag
+          v-else-if="props.band"
+          variation="info"
           size="small"
           >{{ props.band }}</lfx-tag
         >
@@ -24,7 +31,7 @@ SPDX-License-Identifier: MIT
       </div>
       <span
         v-if="props.signalType"
-        class="text-xs text-neutral-400"
+        class="text-xs text-accent-600 underline decoration-dotted underline-offset-2"
         >{{ props.signalType }} signal</span
       >
       <p class="text-xs text-neutral-500 mt-1">
@@ -41,13 +48,20 @@ SPDX-License-Identifier: MIT
 import LfxTag from '~/components/uikit/tag/tag.vue';
 import { formatNumberShort } from '~/components/shared/utils/formatter';
 
-const props = defineProps<{
-  name: string;
-  description: string;
-  value: number | null;
-  band: string | null;
-  signalType?: 'Primary' | 'Secondary' | null;
-}>();
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    description: string;
+    value: number | null;
+    band: string | null;
+    signalType?: 'Primary' | 'Secondary' | null;
+    isPending?: boolean;
+  }>(),
+  {
+    signalType: null,
+    isPending: false,
+  },
+);
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
index 252aa6ba6..d965cccbb 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -6,23 +6,43 @@ SPDX-License-Identifier: MIT
   <div class="px-6">
     <template v-if="!isArchived">
       <lfx-skeleton-state
-        v-if="status === 'pending' || !isEmpty"
         :status="status"
         height="10rem"
         width="100%"
       >
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div class="flex flex-col items-start gap-3">
-            <span class="text-xs font-semibold text-neutral-500 tracking-wide">HEALTH SCORE</span>
-            <lfx-health-score-ring
-              :score="healthScoreV2 ?? 0"
-              :color="scoreColorHex"
-            />
-            <span
-              class="text-sm font-semibold"
-              :class="scoreTextColorClass"
-              >{{ scoreLabel }}</span
-            >
+            <div class="flex flex-row flex-wrap items-start justify-between gap-3 w-full">
+              <div class="flex flex-col items-start gap-2">
+                <span class="text-xs font-semibold text-neutral-500 tracking-wide flex items-center gap-1">
+                  HEALTH SCORE
+                  <lfx-tooltip placement="top">
+                    <lfx-icon
+                      name="circle-question"
+                      :size="11"
+                      class="cursor-help text-neutral-400"
+                    />
+                    <template #content>
+                      <div class="max-w-xs text-xs leading-relaxed">
+                        The Insights Health Score measures an open source project's overall trustworthiness, based on
+                        maintainer activity, security posture, and development cadence.
+                      </div>
+                    </template>
+                  </lfx-tooltip>
+                </span>
+                <span
+                  class="text-lg font-semibold"
+                  :class="isEmpty ? 'text-neutral-400' : scoreTextColorClass"
+                  >{{ scoreLabel }}</span
+                >
+              </div>
+              <lfx-health-score-ring
+                :score="healthScoreV2 ?? 0"
+                :color="scoreColorHex"
+                :unavailable="isEmpty"
+              />
+            </div>
+            <div class="flex-grow" />
             <p
               v-if="healthScoreDescription"
               class="text-xs text-neutral-500"
@@ -31,7 +51,7 @@ SPDX-License-Identifier: MIT
             </p>
           </div>
 
-          <div class="flex flex-col items-start gap-3">
+          <div class="flex flex-col items-start gap-3 md:border-l md:border-neutral-200 md:pl-6">
             <span class="text-xs font-semibold text-neutral-500 tracking-wide">IMPACT</span>
             <div class="flex items-baseline gap-1.5">
               <span class="text-sm font-semibold text-neutral-900">{{ impactLabelDisplay }}</span>
@@ -48,12 +68,16 @@ SPDX-License-Identifier: MIT
               size="small"
               class="mt-1"
             />
-            <p class="text-xs text-neutral-500">
-              How central and depended-upon this project is within the open source ecosystem.
+            <div class="flex-grow" />
+            <p
+              v-if="impactDescription"
+              class="text-xs text-neutral-500"
+            >
+              {{ impactDescription }}
             </p>
           </div>
 
-          <div class="flex flex-col items-start gap-3">
+          <div class="flex flex-col items-start gap-3 md:border-l md:border-neutral-200 md:pl-6">
             <span class="text-xs font-semibold text-neutral-500 tracking-wide">LIFECYCLE</span>
             <div class="flex items-center gap-2">
               <span
@@ -62,32 +86,37 @@ SPDX-License-Identifier: MIT
               />
               <span class="text-sm font-semibold text-neutral-900">{{ lifecycleConfig.label }}</span>
             </div>
+            <div class="flex-grow" />
             <p class="text-xs text-neutral-500">
-              Reflects the project's current stage of development and maintenance activity.
+              {{ lifecycleDescription }}
             </p>
           </div>
         </div>
 
-        <hr class="border-neutral-100 my-6" />
+        <div
+          v-if="showShareBadge"
+          class="-mx-6 mt-6"
+        >
+          <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
+        </div>
 
-        <div class="flex flex-row items-center justify-between flex-wrap gap-3">
-          <div
-            v-if="showShareBadge"
-            class="w-full sm:w-auto"
+        <!--
+          Hidden per Nuno (design), 2026-08-05 Slack: no documentation exists yet for the new
+          Health Score v2 formula. Re-enable once a real doc link exists — re-add
+          `import { links } from '~/config/links'` and use `links.trustScore` (or the new URL) below.
+        -->
+        <!--
+        <p class="text-xs text-neutral-500 mt-3">
+          The Insights Health Score measures an open source project's overall trustworthiness.
+          <a
+            href=""
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-brand-500"
+            >Learn more</a
           >
-            <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
-          </div>
-          <p class="text-xs text-neutral-500">
-            The Insights Health Score measures an open source project's overall trustworthiness.
-            <a
-              :href="links.trustScore"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-brand-500"
-              >Learn more</a
-            >
-          </p>
-        </div>
+        </p>
+        -->
       </lfx-skeleton-state>
 
       <div
@@ -96,12 +125,6 @@ SPDX-License-Identifier: MIT
       >
         Something went wrong while loading the Health score for this project. Please try again later.
       </div>
-      <div
-        v-else-if="isEmpty && status !== 'pending'"
-        class="text-xs text-neutral-500 mt-4"
-      >
-        LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
-      </div>
     </template>
 
     <lfx-empty-state
@@ -119,13 +142,20 @@ import type { AsyncDataRequestStatus } from 'nuxt/app';
 import { storeToRefs } from 'pinia';
 import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
 import LfxHealthScoreRing from './trust-score/health-score-ring.vue';
-import { links } from '~/config/links';
 import { getHealthScoreV2Config, getImpactLabelDisplay, getLifecycleLabelConfig } from '~~/config/trust-score';
 import { lfxColors } from '~/config/styles/colors';
 import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
 import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxEmptyState from '~/components/shared/components/empty-state.vue';
 import { useProjectStore } from '~/components/modules/project/store/project.store';
+import {
+  getLifecycleDescription,
+  getHealthScoreDescription,
+  getImpactSummaryDescription,
+} from '~~/config/health-breakdown-templates';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
 
 const props = defineProps<{
   healthScoreV2: number | null;
@@ -133,8 +163,12 @@ const props = defineProps<{
   impactScore: number | null;
   impactLabel: string | null;
   lifecycleLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
   status: AsyncDataRequestStatus;
   isRepoSelected: boolean;
+  signals: HealthBreakdownResults | null;
 }>();
 
 const { isArchived, emptyStateTitle, emptyStateDescription, selectedRepositories } = storeToRefs(useProjectStore());
@@ -150,28 +184,35 @@ const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).labe
 const scoreColorHex = computed(() => {
   const label = props.healthLabel;
   if (label === 'excellent' || label === 'healthy') return lfxColors.positive[500];
-  if (label === 'fair' || label === 'concerning') return lfxColors.warning[500];
+  if (label === 'fair') return lfxColors.accent[500];
+  if (label === 'concerning') return lfxColors.warning[500];
   return lfxColors.negative[500];
 });
 
 const scoreTextColorClass = computed(() => {
   const label = props.healthLabel;
   if (label === 'excellent' || label === 'healthy') return 'text-positive-500';
-  if (label === 'fair' || label === 'concerning') return 'text-warning-500';
+  if (label === 'fair') return 'text-accent-500';
+  if (label === 'concerning') return 'text-warning-500';
   return 'text-negative-500';
 });
 
 const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
 
+const impactDescription = computed(() => getImpactSummaryDescription(props.impactLabel));
+
 const lifecycleConfig = computed(() => getLifecycleLabelConfig(props.lifecycleLabel));
 
-// No backend field carries a free-text health score summary today, so a specific claim like
-// the Figma copy ("solid security practices"...) can't be derived without fabricating data
-// (see IN-1212 spec). Rendered as a generic, label-derived sentence instead of inventing detail.
-const healthScoreDescription = computed(() => {
-  if (props.healthLabel === null) return null;
-  return `Overall project health is ${scoreLabel.value.toLowerCase()}, based on maintainer activity, security posture, and development cadence.`;
-});
+const lifecycleDescription = computed(() => getLifecycleDescription(props.lifecycleLabel, props.signals));
+
+const healthScoreDescription = computed(() =>
+  getHealthScoreDescription(
+    props.healthLabel,
+    props.maintainerHealthScoreV2,
+    props.securitySupplyChainScoreV2,
+    props.developmentActivityScoreV2,
+  ),
+);
 </script>
 <script lang="ts">
 export default {
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
index 013583fd7..b0dda701a 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
@@ -4,10 +4,23 @@ SPDX-License-Identifier: MIT
 -->
 <template>
   <div class="relative h-28 w-28 shrink-0">
-    <lfx-chart :config="gaugeConfig" />
+    <div
+      v-if="props.unavailable"
+      class="h-28 w-28 rounded-full border-4 border-dashed border-neutral-300"
+    />
+    <lfx-chart
+      v-else
+      :config="gaugeConfig"
+    />
     <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-      <span class="text-4xl font-secondary font-light text-neutral-900 leading-none">{{ props.score }}</span>
-      <span class="text-xs text-neutral-500 mt-1">out of 100</span>
+      <span class="text-4xl font-secondary font-light text-neutral-900 leading-none">{{
+        props.unavailable ? '—' : props.score
+      }}</span>
+      <span
+        v-if="!props.unavailable"
+        class="text-xs text-neutral-500 mt-1"
+        >out of 100</span
+      >
     </div>
   </div>
 </template>
@@ -18,10 +31,17 @@ import LfxChart from '~/components/uikit/chart/chart.vue';
 import { getGaugeChartConfig } from '~/components/uikit/chart/configs/gauge.chart';
 import { lfxColors } from '~/config/styles/colors';
 
-const props = defineProps<{
-  score: number;
-  color?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    score: number;
+    color?: string;
+    unavailable?: boolean;
+  }>(),
+  {
+    color: undefined,
+    unavailable: false,
+  },
+);
 
 const gaugeConfig = computed(() =>
   getGaugeChartConfig({
@@ -31,6 +51,7 @@ const gaugeConfig = computed(() =>
     name: '',
     graphOnly: true,
     lineColor: props.color || lfxColors.positive[500],
+    lineWidth: 4,
   }),
 );
 </script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue b/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue
deleted file mode 100644
index 83f028315..000000000
--- a/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="flex text-3xl font-bold cursor-default">
-    <div
-      v-if="scoreConfig.label === 'Unavailable'"
-      class="flex items-center gap-3"
-      :class="props.hideOverallScore ? 'text-neutral-300' : ''"
-    >
-      <div
-        v-if="scoreConfig.color"
-        class="h-3 w-3 rounded-full mr-1 bg-positive-500"
-        :class="scoreConfig.color"
-      />
-      {{ scoreConfig.label }}
-    </div>
-    <lfx-tooltip
-      v-else
-      placement="top"
-    >
-      <div
-        class="flex items-center gap-3"
-        :class="props.hideOverallScore ? 'text-neutral-300' : ''"
-      >
-        <div
-          v-if="scoreConfig.color"
-          class="h-3 w-3 rounded-full mr-1"
-          :class="scoreConfig.color"
-        />
-        {{ scoreConfig.label }}
-      </div>
-      <template #content>
-        <div class="text-xs flex gap-1">
-          <span class="font-bold">Health score: </span>
-          <span>{{ overallScore }}/100 points</span>
-        </div>
-      </template>
-    </lfx-tooltip>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
-import { lfxTrustScore } from '~~/config/trust-score';
-
-const props = defineProps<{
-  overallScore: number;
-  hideOverallScore?: boolean;
-}>();
-
-const scoreConfig = computed(() => {
-  if (props.hideOverallScore) {
-    return { label: 'Unavailable', color: '' };
-  }
-  return (
-    lfxTrustScore.find((s) => props.overallScore <= s.maxScore && props.overallScore >= s.minScore) || {
-      label: 'Critical',
-      color: 'bg-negative-500',
-    }
-  );
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxProjectTrustScoreDisplay',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue b/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
index 7a416e163..ada82ccd1 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
@@ -3,24 +3,27 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div class="border-solid border border-neutral-200 rounded-md p-3 flex flex-col items-start gap-2">
-    <img
-      :src="props.isRepoSelected ? repoBadgeUrl : badgeUrl"
-      alt="Health Score Badge"
-      class="w-auto h-4"
-    />
+  <div class="bg-neutral-50 rounded-md px-6 py-[9px] flex items-center justify-between gap-3 w-full">
+    <div class="flex items-center gap-2.5">
+      <img
+        :src="props.isRepoSelected ? repoBadgeUrl : badgeUrl"
+        alt="Health Score Badge"
+        class="w-auto h-4"
+      />
+      <span class="text-xs text-neutral-600">
+        <template v-if="!props.isRepoSelected">Display your project Health score on your GitHub page.</template>
+        <template v-else>Display your repository's number of active contributors on your GitHub page.</template>
+      </span>
+    </div>
 
-    <p class="text-xs leading-4.5 text-neutral-500">
-      <span v-if="!props.isRepoSelected"> Share your project Health Score in your GitHub page. </span>
-      <span v-else> Share your repository's number of active contributors on your GitHub page. </span>
-      <br />
-      <br />
-      <span
-        class="text-brand-500 cursor-pointer"
-        @click="share"
-        >Generate badge</span
-      >
-    </p>
+    <lfx-button
+      type="transparent"
+      size="small"
+      icon="share-nodes"
+      label="Share badge"
+      class="shrink-0 !text-accent-500"
+      @click="share"
+    />
   </div>
 </template>
 
@@ -31,6 +34,7 @@ import { useRoute } from 'nuxt/app';
 import { useShareStore } from '~/components/shared/modules/share/store/share.store';
 import { useProjectStore } from '~~/app/components/modules/project/store/project.store';
 import { getBadgeUrl } from '~~/config/trust-score';
+import LfxButton from '~/components/uikit/button/button.vue';
 
 const props = defineProps<{
   isRepoSelected?: boolean;
diff --git a/frontend/app/components/modules/project/services/overview.api.service.ts b/frontend/app/components/modules/project/services/overview.api.service.ts
index 991190a3e..6a6a2076d 100644
--- a/frontend/app/components/modules/project/services/overview.api.service.ts
+++ b/frontend/app/components/modules/project/services/overview.api.service.ts
@@ -11,6 +11,7 @@ import { lfxWidgets } from '../../widget/config/widget.config';
 import type {
   HealthScoreV2Results,
   ImpactBreakdownResults,
+  HealthBreakdownResults,
 } from '~~/types/overview/responses.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { Organization } from '~~/types/contributors/responses.types';
@@ -51,6 +52,17 @@ class OverviewApiService {
     });
   }
 
+  fetchHealthScoreBreakdown(params: ComputedRef<{ projectSlug: string }>) {
+    const queryKey = computed(() => [TanstackKey.HEALTH_SCORE_BREAKDOWN, params.value.projectSlug]);
+    const queryFn: QueryFunction<HealthBreakdownResults> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-breakdown`);
+
+    return useQuery<HealthBreakdownResults>({
+      queryKey,
+      queryFn,
+    });
+  }
+
   fetchAssociatedOrganization(params: ComputedRef<OverviewQueryParams>) {
     const queryKey = computed(() => [
       TanstackKey.ASSOCIATED_ORGANIZATION,
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 34ce3300d..a1b2dfecc 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -6,24 +6,23 @@ SPDX-License-Identifier: MIT
   <div class="container">
     <div class="flex justify-between pt-5 md:pt-10 lg:gap-10 gap-5 flex-col md:flex-row">
       <div class="w-full md:w-3/4 flex flex-col gap-6">
-        <lfx-card
-          class="pt-6 flex flex-col md:gap-10 gap-5"
-          :class="{
-            'pb-6': !(hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'),
-          }"
-        >
+        <lfx-repos-exclusion-footer
+          v-if="hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'"
+          page-content="health-score"
+        />
+        <lfx-card class="pt-6 flex flex-col md:gap-10 gap-5 !pb-0">
           <lfx-project-trust-score-v2
             :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
             :health-label="healthScoreV2Data?.healthLabel ?? null"
             :impact-score="healthScoreV2Data?.impactScore ?? null"
             :impact-label="healthScoreV2Data?.impactLabel ?? null"
             :lifecycle-label="healthScoreV2Data?.lifecycleLabel ?? null"
+            :maintainer-health-score-v2="healthScoreV2Data?.maintainerHealthScoreV2 ?? null"
+            :security-supply-chain-score-v2="healthScoreV2Data?.securitySupplyChainScoreV2 ?? null"
+            :development-activity-score-v2="healthScoreV2Data?.developmentActivityScoreV2 ?? null"
             :status="healthScoreV2Status"
             :is-repo-selected="selectedRepositories.length > 0"
-          />
-          <lfx-repos-exclusion-footer
-            v-if="hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'"
-            page-content="health-score"
+            :signals="healthBreakdownData ?? null"
           />
         </lfx-card>
 
@@ -37,6 +36,7 @@ SPDX-License-Identifier: MIT
             :maintainer-health-score-v2="healthScoreV2Data?.maintainerHealthScoreV2 ?? null"
             :security-supply-chain-score-v2="healthScoreV2Data?.securitySupplyChainScoreV2 ?? null"
             :development-activity-score-v2="healthScoreV2Data?.developmentActivityScoreV2 ?? null"
+            :signals="healthBreakdownData ?? null"
           />
         </lfx-card>
 
@@ -91,8 +91,11 @@ const {
   suspense: impactBreakdownSuspense,
 } = OVERVIEW_API_SERVICE.fetchHealthScoreImpactBreakdown(params);
 
+const { data: healthBreakdownData, suspense: healthBreakdownSuspense } =
+  OVERVIEW_API_SERVICE.fetchHealthScoreBreakdown(params);
+
 onServerPrefetch(async () => {
-  await Promise.all([suspense(), impactBreakdownSuspense()]);
+  await Promise.all([suspense(), impactBreakdownSuspense(), healthBreakdownSuspense()]);
 });
 </script>
 
diff --git a/frontend/app/components/shared/components/health-score.vue b/frontend/app/components/shared/components/health-score.vue
index c63f0bb8e..2307fd1ca 100644
--- a/frontend/app/components/shared/components/health-score.vue
+++ b/frontend/app/components/shared/components/health-score.vue
@@ -17,25 +17,25 @@ SPDX-License-Identifier: MIT
     Unavailable
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 80"
+    v-else-if="props.score >= 85"
     variation="positive-solid"
   >
     Excellent
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 60"
+    v-else-if="props.score >= 70"
     variation="positive"
   >
     Healthy
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 40"
+    v-else-if="props.score >= 50"
     variation="info"
   >
     Fair
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 20"
+    v-else-if="props.score >= 30"
     variation="warning"
   >
     Concerning
diff --git a/frontend/app/components/shared/components/repos-exclusion-footer.vue b/frontend/app/components/shared/components/repos-exclusion-footer.vue
index 5f6243234..3433658f6 100644
--- a/frontend/app/components/shared/components/repos-exclusion-footer.vue
+++ b/frontend/app/components/shared/components/repos-exclusion-footer.vue
@@ -5,9 +5,6 @@ SPDX-License-Identifier: MIT
 <template>
   <div
     v-if="displayArchivedReposNote"
-    :class="{
-      'w-full bg-neutral-50 py-3 px-2 rounded-b-lg': pageContent === 'health-score',
-    }"
     class="text-center flex items-center justify-center gap-1.5"
   >
     <lfx-icon
@@ -17,7 +14,7 @@ SPDX-License-Identifier: MIT
     />
     <span class="text-neutral-500 text-xs">
       <span class="font-semibold">Archived repositories</span> are excluded from
-      {{ pageContent === 'health-score' ? 'Health Score and Security & Best practices' : 'Security & Best practices' }}.
+      {{ pageContent === 'health-score' ? 'Health Score' : 'Security & Best practices' }}.
     </span>
   </div>
 </template>
diff --git a/frontend/app/components/shared/types/tanstack.ts b/frontend/app/components/shared/types/tanstack.ts
index 7bf98af9d..01894ef8f 100644
--- a/frontend/app/components/shared/types/tanstack.ts
+++ b/frontend/app/components/shared/types/tanstack.ts
@@ -60,6 +60,7 @@ export enum TanstackKey {
   HEALTH_SCORE_OVERVIEW = 'health-score-overview',
   HEALTH_SCORE_V2 = 'health-score-v2',
   HEALTH_SCORE_IMPACT_BREAKDOWN = 'health-score-impact-breakdown',
+  HEALTH_SCORE_BREAKDOWN = 'health-score-breakdown',
   TRUST_SCORE_SUMMARY = 'trust-score-summary',
   SCORE_DATA = 'score-data',
   ASSOCIATED_ORGANIZATION = 'associated-organization',
diff --git a/frontend/app/components/uikit/benchmarks/benchmark-icon.vue b/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
index 0ae4f40e2..e2ff71054 100644
--- a/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
+++ b/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: MIT
 <template>
   <div
     class="c-benchmarks-icon"
-    :class="`c-benchmarks-icon--${props.type}`"
+    :class="[`c-benchmarks-icon--${props.type}`, { 'c-benchmarks-icon--circle': props.circle }]"
   >
     <lfx-icon
       v-if="props.type === 'positive'"
@@ -25,6 +25,12 @@ SPDX-License-Identifier: MIT
       type="solid"
       :size="props.size"
     />
+    <lfx-icon
+      v-else-if="props.type === 'no-data'"
+      name="minus"
+      type="solid"
+      :size="props.size"
+    />
   </div>
 </template>
 
@@ -36,10 +42,12 @@ const props = withDefaults(
     type: string;
     useTriangle?: boolean;
     size?: number;
+    circle?: boolean;
   }>(),
   {
     useTriangle: false,
     size: 16,
+    circle: false,
   },
 );
 </script>
diff --git a/frontend/app/components/uikit/benchmarks/benchmarks.scss b/frontend/app/components/uikit/benchmarks/benchmarks.scss
index 5845f7886..7f4432fa6 100644
--- a/frontend/app/components/uikit/benchmarks/benchmarks.scss
+++ b/frontend/app/components/uikit/benchmarks/benchmarks.scss
@@ -58,6 +58,32 @@
   &--negative {
     @apply text-negative-500;
   }
+
+  &--no-data {
+    @apply text-neutral-400;
+  }
+
+  &--circle {
+    @apply flex items-center justify-center rounded-full shrink-0;
+    width: 24px;
+    height: 24px;
+
+    &.c-benchmarks-icon--positive {
+      background-color: #d0fae5;
+    }
+
+    &.c-benchmarks-icon--warning {
+      background-color: #fef3c7;
+    }
+
+    &.c-benchmarks-icon--negative {
+      background-color: #fee2e2;
+    }
+
+    &.c-benchmarks-icon--no-data {
+      @apply bg-neutral-100;
+    }
+  }
 }
 
 .c-benchmarks-wrap {
diff --git a/frontend/app/components/uikit/chart/configs/gauge.chart.ts b/frontend/app/components/uikit/chart/configs/gauge.chart.ts
index 081c74a0c..75066ba51 100644
--- a/frontend/app/components/uikit/chart/configs/gauge.chart.ts
+++ b/frontend/app/components/uikit/chart/configs/gauge.chart.ts
@@ -114,6 +114,15 @@ const fullDataOpts = {
  */
 export const getGaugeChartConfig = (data: GaugeData): ECOption => {
   const gaugeSeries = { ...(data.gaugeType === 'half' ? halfSeriesStyle : fullSeriesStyle) };
+  if (data.lineWidth !== undefined) {
+    gaugeSeries.axisLine = {
+      ...gaugeSeries.axisLine,
+      lineStyle: {
+        ...gaugeSeries.axisLine?.lineStyle,
+        width: data.lineWidth,
+      },
+    };
+  }
   gaugeSeries.detail = {
     ...(data.gaugeType === 'half' ? halfDetail : fullDetail),
     formatter:
diff --git a/frontend/app/components/uikit/chart/types/ChartTypes.ts b/frontend/app/components/uikit/chart/types/ChartTypes.ts
index 9b6b17523..82c6752b5 100644
--- a/frontend/app/components/uikit/chart/types/ChartTypes.ts
+++ b/frontend/app/components/uikit/chart/types/ChartTypes.ts
@@ -40,6 +40,7 @@ export interface GaugeData {
   noData?: boolean;
   graphOnly?: boolean;
   gaugeType: 'half' | 'full';
+  lineWidth?: number;
 }
 
 export interface CategoryDataItem {
diff --git a/frontend/app/components/uikit/tag/tag.scss b/frontend/app/components/uikit/tag/tag.scss
index a60f4cd11..99b659ea2 100644
--- a/frontend/app/components/uikit/tag/tag.scss
+++ b/frontend/app/components/uikit/tag/tag.scss
@@ -90,4 +90,13 @@
       @apply px-2.5 h-6;
     }
   }
+
+  /* Dashed (pending state, e.g. a signal still computing) */
+  &--dashed {
+    @apply italic border border-dashed;
+
+    &.c-tag--default {
+      @apply border-neutral-300 bg-neutral-100 text-neutral-400;
+    }
+  }
 }
diff --git a/frontend/app/components/uikit/tag/tag.stories.ts b/frontend/app/components/uikit/tag/tag.stories.ts
index 1074b0ac7..11efd63e9 100644
--- a/frontend/app/components/uikit/tag/tag.stories.ts
+++ b/frontend/app/components/uikit/tag/tag.stories.ts
@@ -96,3 +96,12 @@ export const Transparent = {
     type: 'transparent',
   },
 };
+
+export const Dashed = {
+  args: {
+    default: 'Pending',
+    variation: 'default',
+    size: 'medium',
+    type: 'dashed',
+  },
+};
diff --git a/frontend/app/components/uikit/tag/types/tag.types.ts b/frontend/app/components/uikit/tag/types/tag.types.ts
index 7c908b077..50240ad09 100644
--- a/frontend/app/components/uikit/tag/types/tag.types.ts
+++ b/frontend/app/components/uikit/tag/types/tag.types.ts
@@ -12,7 +12,7 @@ export const tagStyles = [
   'negative-solid',
 ] as const;
 export const tagSizes = ['small', 'medium'] as const;
-export const tagTypes = ['solid', 'transparent', 'outline'] as const;
+export const tagTypes = ['solid', 'transparent', 'outline', 'dashed'] as const;
 
 export type TagStyle = (typeof tagStyles)[number];
 export type TagSize = (typeof tagSizes)[number];
diff --git a/frontend/app/config/styles/colors.ts b/frontend/app/config/styles/colors.ts
index 2c29997bd..7746283cf 100644
--- a/frontend/app/config/styles/colors.ts
+++ b/frontend/app/config/styles/colors.ts
@@ -115,6 +115,7 @@ export const lfxColors = {
   // scale. TODO: Verify with Nuno whether these should be folded into an existing scale.
   health: {
     healthy: '#00bc7d',
+    fair: '#009aff',
     concerning: '#fe9a00',
     critical: '#fb2c36',
   },
diff --git a/frontend/config/health-breakdown-templates.ts b/frontend/config/health-breakdown-templates.ts
new file mode 100644
index 000000000..65ca4cd9f
--- /dev/null
+++ b/frontend/config/health-breakdown-templates.ts
@@ -0,0 +1,623 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+//
+// Content-generation templates for the Health Score v2 breakdown UI (IN-1212).
+// Every function here takes real per-project signal data and returns a generated
+// sentence following the bracket-pattern templates in the content spec
+// (attachments/IN-1212/content-spec.md) — no fixed/fabricated copy.
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+// ---------------------------------------------------------------------------
+// Section 2: Lifecycle State descriptions
+// ---------------------------------------------------------------------------
+
+const formatDays = (seconds: number): string => {
+  const days = Math.round(seconds / 86400);
+  return days === 1 ? '1 day' : `${days} days`;
+};
+
+export const getLifecycleDescription = (
+  state: string | null,
+  signals: HealthBreakdownResults | null,
+): string => {
+  switch (state) {
+    case 'active': {
+      return 'Consistent commits, responsive maintainers, regular releases, and healthy issue triage.';
+    }
+    case 'stable': {
+      return 'Mature and deliberately low-activity. The maintainer is reachable and there are no open issues or vulnerabilities that require attention.';
+    }
+    case 'declining': {
+      const responseDetail =
+        signals?.medianIssueResponseS !== null && signals?.medianIssueResponseS !== undefined
+          ? ` Issue response times are now averaging ${formatDays(signals.medianIssueResponseS)}.`
+          : '';
+      const maintainerDetail =
+        signals?.busFactorCount !== null && signals?.busFactorCount !== undefined
+          ? ` Only ${signals.busFactorCount} active maintainer${signals.busFactorCount === 1 ? '' : 's'} remain${signals.busFactorCount === 1 ? 's' : ''}.`
+          : '';
+      return `Maintainer activity has dropped significantly over the past six months.${maintainerDetail}${responseDetail}`;
+    }
+    case 'abandoned': {
+      const lastCommitDetail =
+        signals?.lastCommitAt !== null && signals?.lastCommitAt !== undefined
+          ? ` The last commit was on ${new Date(signals.lastCommitAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}.`
+          : '';
+      const cveDetail =
+        signals?.openCriticals !== null &&
+        signals?.openCriticals !== undefined &&
+        signals.openCriticals > 0
+          ? ` ${signals.openCriticals} critical vulnerabilit${signals.openCriticals === 1 ? 'y remains' : 'ies remain'} unaddressed.`
+          : '';
+      return `No maintainer activity in over 18 months.${lastCommitDetail}${cveDetail}`;
+    }
+    case 'archived': {
+      return 'The repository has been explicitly archived. No further updates are expected and the project is no longer accepting contributions.';
+    }
+    default: {
+      return 'No repository activity has been indexed for this project. Lifecycle state cannot be determined until a supported source platform is connected.';
+    }
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Section 3: Health Score summary
+// ---------------------------------------------------------------------------
+
+const CATEGORY_LABEL: Record<'maintainer' | 'security' | 'development', string> = {
+  maintainer: 'maintainer coverage',
+  security: 'security posture',
+  development: 'development cadence',
+};
+
+export const getHealthScoreDescription = (
+  healthLabel: string | null,
+  maintainerScore: number | null,
+  securityScore: number | null,
+  developmentScore: number | null,
+): string | null => {
+  if (healthLabel === null) {
+    return 'No scoring data is available. This project has no indexed repositories or the connected platform has no supported data pipeline.';
+  }
+  const categoryPercents: { key: 'maintainer' | 'security' | 'development'; percent: number }[] = [
+    { key: 'maintainer', percent: maintainerScore !== null ? maintainerScore / 40 : -1 },
+    { key: 'security', percent: securityScore !== null ? securityScore / 35 : -1 },
+    { key: 'development', percent: developmentScore !== null ? developmentScore / 25 : -1 },
+  ].filter((c) => c.percent >= 0);
+
+  if (categoryPercents.length === 0) {
+    return `Overall project health is ${healthLabel}, based on maintainer activity, security posture, and development cadence.`;
+  }
+
+  const strongest = categoryPercents.reduce((a, b) => (b.percent > a.percent ? b : a));
+  const weakest = categoryPercents.reduce((a, b) => (b.percent < a.percent ? b : a));
+  const strongLabel = CATEGORY_LABEL[strongest.key];
+  const weakLabel = CATEGORY_LABEL[weakest.key];
+
+  if (healthLabel === 'excellent' || healthLabel === 'healthy') {
+    return strongest.key === weakest.key
+      ? `Strong ${strongLabel}, security practices, and development cadence across the board.`
+      : `Strong ${strongLabel}. ${weakLabel.charAt(0).toUpperCase() + weakLabel.slice(1)} is the remaining gap keeping the score from Excellent.`;
+  }
+  if (strongest.key === weakest.key) {
+    return `Overall project health is ${healthLabel}, based on maintainer activity, security posture, and development cadence.`;
+  }
+  return `${weakLabel.charAt(0).toUpperCase() + weakLabel.slice(1)} is dragging the score down, despite stronger ${strongLabel}.`;
+};
+
+// ---------------------------------------------------------------------------
+// Sections 4-6: Category descriptions
+// ---------------------------------------------------------------------------
+
+export type HealthCategory = 'maintainer' | 'security' | 'development';
+
+type CategoryBand = 'success' | 'warning' | 'danger';
+
+const categoryThresholds: Record<HealthCategory, { success: number; warning: number }> = {
+  maintainer: { success: 28, warning: 16 },
+  security: { success: 23, warning: 12 },
+  development: { success: 17, warning: 9 },
+};
+
+const getCategoryBand = (category: HealthCategory, score: number): CategoryBand => {
+  const thresholds = categoryThresholds[category];
+  if (score >= thresholds.success) return 'success';
+  if (score >= thresholds.warning) return 'warning';
+  return 'danger';
+};
+
+const bandColor: Record<CategoryBand, 'positive' | 'warning' | 'negative'> = {
+  success: 'positive',
+  warning: 'warning',
+  danger: 'negative',
+};
+
+export const getCategoryScoreColor = (
+  category: HealthCategory,
+  score: number,
+): 'positive' | 'warning' | 'negative' => bandColor[getCategoryBand(category, score)];
+
+const getMaintainerDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  const orgCount = signals.orgCount ?? 0;
+  const maintainerCount = signals.busFactorCount ?? 0;
+
+  if (band === 'success') {
+    return `Responsive maintainers, ${maintainerCount} active maintainer${maintainerCount === 1 ? '' : 's'} with merge rights, a stable contributor pipeline, and contributors spanning ${orgCount} organization${orgCount === 1 ? '' : 's'}.`;
+  }
+  if (band === 'warning') {
+    const teamDetail =
+      maintainerCount <= 1
+        ? 'A single active maintainer'
+        : `A small team of ${maintainerCount} active maintainers`;
+    const orgDetail =
+      orgCount <= 1
+        ? 'limited organizational diversity'
+        : `contributors across ${orgCount} organizations`;
+    return `${teamDetail} with slow response times, no contributor growth, and ${orgDetail}.`;
+  }
+  const responseDetail =
+    signals.medianIssueResponseS !== null
+      ? ` No response to issues in over ${formatDays(signals.medianIssueResponseS)}.`
+      : '';
+  return `No active maintainer.${responseDetail} There is no succession plan in place.`;
+};
+
+const getSecurityDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  if (band === 'success') {
+    const scorecardDetail =
+      signals.scorecardScore !== null
+        ? ` OpenSSF Scorecard is ${signals.scorecardScore.toFixed(1)}/10.`
+        : '';
+    return `No open CVEs and full security practices in place.${scorecardDetail}`;
+  }
+  if (band === 'warning') {
+    const criticalCount = signals.openCriticals ?? 0;
+    const highCount = signals.openHighs ?? 0;
+    const cveText =
+      criticalCount + highCount > 0
+        ? `${criticalCount + highCount} open critical or high vulnerabilit${criticalCount + highCount === 1 ? 'y' : 'ies'}`
+        : 'No open critical or high vulnerabilities';
+    const missing: string[] = [];
+    if (!signals.securityPolicyEnabled) missing.push('no SECURITY.md');
+    if (!signals.branchProtectionEnabled) missing.push('no branch protection');
+    const missingText = missing.length > 0 ? `, but ${missing.join(' and ')}` : '';
+    return `${cveText}${missingText}.`;
+  }
+  const criticalCount = signals.openCriticals ?? 0;
+  const highCount = signals.openHighs ?? 0;
+  const cveDetail =
+    criticalCount + highCount > 0
+      ? `${criticalCount + highCount} open critical or high vulnerabilit${criticalCount + highCount === 1 ? 'y' : 'ies'}.`
+      : 'No open critical or high vulnerabilities.';
+  const practicesMissing: string[] = [];
+  if (!signals.securityPolicyEnabled) practicesMissing.push('no SECURITY.md');
+  if (!signals.branchProtectionEnabled) practicesMissing.push('no branch protection');
+  const practicesDetail =
+    practicesMissing.length > 0
+      ? `Security practices need attention: ${practicesMissing.join(' and ')}.`
+      : 'Dependency health needs attention.';
+  return `${cveDetail} ${practicesDetail}`;
+};
+
+const getDevelopmentDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  if (band === 'success') {
+    const releaseDetail =
+      signals.daysSinceLatest !== null
+        ? `Active commit stream, with the last release ${Math.round(signals.daysSinceLatest)} days ago.`
+        : 'Active commit stream and a healthy release cadence.';
+    return `${releaseDetail} Issue triage is keeping pace with incoming reports.`;
+  }
+  if (band === 'warning') {
+    const releaseDetail =
+      signals.daysSinceLatest !== null && signals.daysSinceLatest > 365
+        ? `No release in over ${Math.floor(signals.daysSinceLatest / 365)} year${Math.floor(signals.daysSinceLatest / 365) === 1 ? '' : 's'}.`
+        : 'Release cadence has slowed.';
+    return `${releaseDetail} Some commit activity continues but the project shows signs of stagnation.`;
+  }
+  const commitDetail =
+    signals.commitsLast6m !== null && signals.commitsLast6m === 0
+      ? 'No commits in the past six months.'
+      : 'Minimal commit activity in the past six months.';
+  return `${commitDetail} Releases and issue resolution have both stalled.`;
+};
+
+export const getCategoryDescription = (
+  category: HealthCategory,
+  score: number | null,
+  available: boolean,
+  signals: HealthBreakdownResults | null,
+): string => {
+  if (!available || score === null || !signals) {
+    return getCategoryUnavailableDescription(category, signals);
+  }
+  const band = getCategoryBand(category, score);
+  if (category === 'maintainer') return getMaintainerDescription(band, signals);
+  if (category === 'security') return getSecurityDescription(band, signals);
+  return getDevelopmentDescription(band, signals);
+};
+
+const getCategoryUnavailableDescription = (
+  category: HealthCategory,
+  signals: HealthBreakdownResults | null,
+): string => {
+  if (category === 'maintainer') {
+    const availableSignals: string[] = [];
+    if (signals?.responsivenessAvailable) availableSignals.push('maintainer responsiveness');
+    if (signals?.busFactorAvailable) availableSignals.push('bus factor');
+    if (signals?.orgDiversityAvailable) availableSignals.push('org diversity');
+    const namedAvailable =
+      availableSignals.length > 0
+        ? `Only ${availableSignals.join(', ')} ${availableSignals.length === 1 ? 'is' : 'are'} available.`
+        : 'No maintainer signals are available.';
+    return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+  }
+  if (category === 'security') {
+    const availableSignals: string[] = [];
+    if (signals?.scorecardAvailable) availableSignals.push('OpenSSF Scorecard');
+    if (signals?.securityPracticesAvailable) availableSignals.push('security practices');
+    if (signals?.dependencyHealthAvailable) availableSignals.push('dependency health');
+    const reason = signals?.isGerrit ? 'Gerrit-hosted projects' : 'this repository type';
+    const namedAvailable =
+      availableSignals.length > 0
+        ? `Only open vulnerability data and ${availableSignals.join(', ')} ${availableSignals.length === 1 ? 'is' : 'are'} available for ${reason}.`
+        : `Only open vulnerability data is available for ${reason}.`;
+    return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+  }
+  const availableSignals: string[] = [];
+  if (signals?.releaseCadenceAvailable) availableSignals.push('release cadence');
+  if (signals?.issueResolutionAvailable) availableSignals.push('issue resolution');
+  if (signals?.prMergeAvailable) availableSignals.push('PR merge health');
+  const namedAvailable =
+    availableSignals.length > 0
+      ? `${availableSignals.join(' and ')} could not be assessed for this repository type.`
+      : 'Development signals could not be assessed for this repository type.';
+  return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+};
+
+// ---------------------------------------------------------------------------
+// Section 7: Signal Rows
+// ---------------------------------------------------------------------------
+
+export type SignalRowStatus = 'positive' | 'warning' | 'negative' | 'no-data';
+
+export interface SignalRow {
+  status: SignalRowStatus;
+  description: string;
+}
+
+const blockedSignalDescription = (signalKey: string, signals: HealthBreakdownResults): string => {
+  if (signals.isGerrit) {
+    return `Not available for Gerrit-hosted repositories. ${signalKey} currently requires GitHub.`;
+  }
+  if (signals.isExcluded) {
+    return `Not available for this repository. ${signalKey} currently requires GitHub.`;
+  }
+  return `No data available. Repository has not been indexed for ${signalKey.toLowerCase()}.`;
+};
+
+// --- Maintainer signals ---
+
+export const getResponsivenessRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.responsivenessAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Maintainer responsiveness', signals),
+    };
+  }
+  if (signals.medianIssueResponseS === null) {
+    return {
+      status: 'no-data',
+      description: 'No issue or PR response data available for this project.',
+    };
+  }
+  const days = Math.round(signals.medianIssueResponseS / 86400);
+  const responseText = formatDays(signals.medianIssueResponseS);
+  if (days < 7) {
+    return {
+      status: 'positive',
+      description: `Median response time is ${responseText}, well within a week.`,
+    };
+  }
+  if (days < 30) {
+    return { status: 'warning', description: `Median response time is ${responseText}.` };
+  }
+  return {
+    status: 'negative',
+    description: `Median response time is ${responseText}, well over a month.`,
+  };
+};
+
+export const getBusFactorRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.busFactorAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Bus factor', signals) };
+  }
+  const count = signals.busFactorCount ?? 0;
+  if (count >= 3) {
+    return {
+      status: 'positive',
+      description: `${count} active maintainers currently have merge rights.`,
+    };
+  }
+  if (count >= 1) {
+    return {
+      status: 'warning',
+      description: `Only ${count} active maintainer${count === 1 ? '' : 's'} currently ${count === 1 ? 'has' : 'have'} merge rights.`,
+    };
+  }
+  return { status: 'negative', description: 'No active maintainers with merge rights were found.' };
+};
+
+export const getOrgDiversityRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.orgDiversityAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Org diversity', signals) };
+  }
+  const count = signals.orgCount ?? 0;
+  if (count >= 3) {
+    return { status: 'positive', description: `Contributors span ${count} organizations.` };
+  }
+  if (count >= 1) {
+    return {
+      status: 'warning',
+      description: `Contributors come from ${count} organization${count === 1 ? '' : 's'} only.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: 'No organization affiliation data is available for contributors.',
+  };
+};
+
+// --- Security signals ---
+
+export const getOpenVulnRow = (signals: HealthBreakdownResults): SignalRow => {
+  const criticals = signals.openCriticals ?? 0;
+  const highs = signals.openHighs ?? 0;
+  const moderates = signals.openModerates ?? 0;
+  if (criticals + highs > 0) {
+    return {
+      status: 'negative',
+      description: `${criticals + highs} open critical or high vulnerabilit${criticals + highs === 1 ? 'y' : 'ies'}.`,
+    };
+  }
+  if (moderates > 0) {
+    return {
+      status: 'warning',
+      description: `${moderates} open medium or low severity vulnerabilit${moderates === 1 ? 'y' : 'ies'}, no critical or high issues.`,
+    };
+  }
+  return { status: 'positive', description: 'No open vulnerabilities of any severity.' };
+};
+
+export const getScorecardRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.scorecardAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('OpenSSF Scorecard', signals),
+    };
+  }
+  const score = signals.scorecardScore ?? 0;
+  if (score >= 7) {
+    return { status: 'positive', description: `OpenSSF Scorecard is ${score.toFixed(1)}/10.` };
+  }
+  if (score >= 4) {
+    return {
+      status: 'warning',
+      description: `OpenSSF Scorecard is ${score.toFixed(1)}/10, below the recommended baseline.`,
+    };
+  }
+  return { status: 'negative', description: `OpenSSF Scorecard is ${score.toFixed(1)}/10.` };
+};
+
+export const getSecurityPracticesRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.securityPracticesAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Security practices', signals),
+    };
+  }
+  const practices = [
+    signals.securityPolicyEnabled,
+    signals.branchProtectionEnabled,
+    signals.branchProtectionRequiredReviews,
+    signals.branchProtectionRequiresStatusChecks,
+  ];
+  const enabledCount = practices.filter((p) => Boolean(p)).length;
+  if (enabledCount >= 3) {
+    return {
+      status: 'positive',
+      description: `${enabledCount} of 4 tracked security practices are in place.`,
+    };
+  }
+  if (enabledCount >= 1) {
+    const missing: string[] = [];
+    if (!signals.securityPolicyEnabled) missing.push('no SECURITY.md');
+    if (!signals.branchProtectionEnabled) missing.push('no branch protection');
+    return {
+      status: 'warning',
+      description: `${enabledCount} of 4 tracked security practices are in place, ${missing.join(', ') || 'with gaps remaining'}.`,
+    };
+  }
+  return { status: 'negative', description: 'No security practices are in place.' };
+};
+
+export const getDependencyHealthRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.dependencyHealthAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Dependency health', signals),
+    };
+  }
+  const vulnerable = signals.vulnerableDeps ?? 0;
+  if (vulnerable === 0) {
+    return {
+      status: 'positive',
+      description: 'All dependencies are clean of known vulnerabilities.',
+    };
+  }
+  if (vulnerable <= 3) {
+    return {
+      status: 'warning',
+      description: `${vulnerable} dependenc${vulnerable === 1 ? 'y has' : 'ies have'} a known vulnerability.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `${vulnerable} dependencies have a known vulnerability.`,
+  };
+};
+
+// --- Development signals ---
+
+export const getReleaseCadenceRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.releaseCadenceAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Release cadence', signals) };
+  }
+  const days = signals.daysSinceLatest;
+  if (days === null) {
+    return { status: 'no-data', description: 'No release history is available for this project.' };
+  }
+  if (days <= 180) {
+    return { status: 'positive', description: `Last release was ${Math.round(days)} days ago.` };
+  }
+  if (days <= 730) {
+    return {
+      status: 'warning',
+      description: `Last release was ${Math.round(days)} days ago, longer than six months.`,
+    };
+  }
+  return { status: 'negative', description: `No release in over ${Math.floor(days / 365)} years.` };
+};
+
+export const getCommitActivityRow = (signals: HealthBreakdownResults): SignalRow => {
+  const commits = signals.commitsLast6m;
+  if (commits === null) {
+    return { status: 'no-data', description: 'No commit history is available for this project.' };
+  }
+  if (commits > 20) {
+    return { status: 'positive', description: `${commits} commits in the past six months.` };
+  }
+  if (commits > 0) {
+    return {
+      status: 'warning',
+      description: `${commits} commit${commits === 1 ? '' : 's'} in the past six months, a slow pace.`,
+    };
+  }
+  return { status: 'negative', description: 'No commits in the past six months.' };
+};
+
+export const getIssueResolutionRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.issueResolutionAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Issue resolution', signals),
+    };
+  }
+  const closed = signals.closed12m ?? 0;
+  const opened = signals.opened12m ?? 0;
+  if (opened === 0) {
+    return { status: 'positive', description: 'No new issues were opened in the past year.' };
+  }
+  if (closed >= opened) {
+    return {
+      status: 'positive',
+      description: `${closed} issues closed against ${opened} opened in the past year, closing faster than opening.`,
+    };
+  }
+  if (closed >= opened * 0.5) {
+    return {
+      status: 'warning',
+      description: `${closed} issues closed against ${opened} opened in the past year, a growing backlog.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `${closed} issues closed against ${opened} opened in the past year, the backlog is growing quickly.`,
+  };
+};
+
+export const getPrMergeRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.prMergeAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('PR merge health', signals) };
+  }
+  const merged = signals.merged12m ?? 0;
+  const closedUnmerged = signals.closedUnmerged12m ?? 0;
+  const total = merged + closedUnmerged;
+  if (total === 0) {
+    return {
+      status: 'no-data',
+      description: 'No external pull requests were received in the past year.',
+    };
+  }
+  const mergeRate = merged / total;
+  if (mergeRate > 0.5) {
+    return {
+      status: 'positive',
+      description: `${merged} of ${total} pull requests were merged in the past year.`,
+    };
+  }
+  if (mergeRate > 0) {
+    return {
+      status: 'warning',
+      description: `${merged} of ${total} pull requests were merged in the past year, under half.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `None of ${total} pull requests were merged in the past year.`,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Section 9: Impact Breakdown signal row descriptions
+// ---------------------------------------------------------------------------
+
+export const getTransitiveDependentsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No transitive dependent data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} packages depend on this project directly or indirectly, the primary measure of its blast radius.`;
+};
+
+export const getGraphCentralityDescription = (value: number | null, isPending: boolean): string => {
+  if (isPending) {
+    return 'PageRank-weighted centrality has not yet been computed for this project. The score will update when the weekly batch job completes.';
+  }
+  if (value === null) {
+    return 'No graph centrality data is available for this project.';
+  }
+  return `PageRank-weighted centrality score of ${value.toLocaleString('en-US')} across the dependency graph.`;
+};
+
+export const getDownloadsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No package download data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} downloads per month across all linked registries.`;
+};
+
+export const getDirectDependentsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No direct dependent data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} packages depend directly on this project.`;
+};
+
+export const getImpactSummaryDescription = (
+  impactLabel: string | null,
+  transitiveDependents?: number | null,
+): string | null => {
+  if (impactLabel === null) {
+    return 'This project publishes no tracked packages. Impact cannot be computed without a package registry presence.';
+  }
+  const dependentsDetail =
+    transitiveDependents !== null && transitiveDependents !== undefined
+      ? ` ${transitiveDependents.toLocaleString('en-US')} packages depend on it directly or indirectly.`
+      : '';
+  if (impactLabel === 'foundational')
+    return `Near-total blast radius across the dependency graph.${dependentsDetail}`;
+  if (impactLabel === 'major')
+    return `Large blast radius, depended on by many high-importance projects.${dependentsDetail}`;
+  if (impactLabel === 'moderate')
+    return `Moderate blast radius within its dependency graph.${dependentsDetail}`;
+  return `Narrow blast radius, depended on by a small set of projects with limited transitive reach.${dependentsDetail}`;
+};
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 058d27cc2..10148774c 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -2,52 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { useRuntimeConfig } from '#imports';
-
-export interface TrustScoreConfig {
-  maxScore: number;
-  minScore: number;
-  label: string;
-  color: string;
-  ghBadgeColor: string;
-}
-
-export const lfxTrustScore: TrustScoreConfig[] = [
-  {
-    maxScore: 100,
-    minScore: 80,
-    label: 'Excellent',
-    color: 'bg-positive-500',
-    ghBadgeColor: '#10B981',
-  },
-  {
-    maxScore: 79,
-    minScore: 60,
-    label: 'Healthy',
-    color: 'bg-positive-500',
-    ghBadgeColor: '#A7F3D0',
-  },
-  {
-    maxScore: 59,
-    minScore: 40,
-    label: 'Stable',
-    color: 'bg-brand-500',
-    ghBadgeColor: '#0094FF',
-  },
-  {
-    maxScore: 39,
-    minScore: 20,
-    label: 'Unsteady',
-    color: 'bg-warning-500',
-    ghBadgeColor: '#F59E0B',
-  },
-  {
-    maxScore: 19,
-    minScore: 0,
-    label: 'Critical',
-    color: 'bg-negative-500',
-    ghBadgeColor: '#EF4444',
-  },
-];
+import { lfxColors } from '~/config/styles/colors';
 
 export const getBadgeUrl = (type: string, projectSlug: string, selectedRepos: string[] = []) => {
   const config = useRuntimeConfig();
@@ -55,27 +10,22 @@ export const getBadgeUrl = (type: string, projectSlug: string, selectedRepos: st
     selectedRepos.length ? `&repos=${selectedRepos.join(',')}` : ''
   }`;
 };
-export const getHealthScoreConfig = (score: number) => {
-  return (
-    lfxTrustScore.find((s) => score <= s.maxScore && score >= s.minScore) || lfxTrustScore.at(-1)!
-  );
-};
 
-// v2 health score labels/colors. Distinct from lfxTrustScore's v1 tiers: v2 uses
-// excellent/healthy/fair/concerning/critical (see collection-health-score-pill.vue) instead
-// of v1's Excellent/Healthy/Stable/Unsteady/Critical.
+// v2 health score labels/colors, thresholds 85/70/50/30 (see project_insights_copy.pipe's
+// healthLabel multiIf). Keyed lowercase to match the backend-provided healthLabel string
+// (see collection-health-score-pill.vue).
 export interface HealthScoreV2Config {
   label: string;
   ghBadgeColor: string;
 }
 
 export const healthScoreV2Config: Record<string, HealthScoreV2Config> = {
-  excellent: { label: 'Excellent', ghBadgeColor: '#10B981' },
-  healthy: { label: 'Healthy', ghBadgeColor: '#A7F3D0' },
-  fair: { label: 'Fair', ghBadgeColor: '#F59E0B' },
-  concerning: { label: 'Concerning', ghBadgeColor: '#F59E0B' },
-  critical: { label: 'Critical', ghBadgeColor: '#EF4444' },
-  unavailable: { label: 'Unavailable', ghBadgeColor: '#9CA3AF' },
+  excellent: { label: 'Excellent', ghBadgeColor: lfxColors.health.healthy },
+  healthy: { label: 'Healthy', ghBadgeColor: lfxColors.health.healthy },
+  fair: { label: 'Fair', ghBadgeColor: lfxColors.health.fair },
+  concerning: { label: 'Concerning', ghBadgeColor: lfxColors.health.concerning },
+  critical: { label: 'Critical', ghBadgeColor: lfxColors.health.critical },
+  unavailable: { label: 'Unavailable', ghBadgeColor: lfxColors.neutral[400] },
 };
 
 export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Config => {
@@ -85,17 +35,6 @@ export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Confi
   return healthScoreV2Config.unavailable;
 };
 
-// Percentage-of-max thresholds mirroring the excellent/healthy vs fair/concerning vs critical
-// bands used for healthLabel elsewhere (see collection-health-score-pill.vue), applied here to a
-// per-category percentage since categories have no backend-provided label of their own.
-export const getHealthScorePercentColor = (
-  percent: number,
-): 'positive' | 'warning' | 'negative' => {
-  if (percent >= 60) return 'positive';
-  if (percent >= 20) return 'warning';
-  return 'negative';
-};
-
 // Impact labels come from project_insights_copy.pipe's impactLabel multiIf: foundational (>=85),
 // major (>=60), moderate (>=30), minor (below).
 export const impactLabelConfig: Record<string, string> = {
@@ -116,7 +55,7 @@ export const getImpactLabelDisplay = (label: string | null): string => {
 // abandoned, archived (best-state-wins across a project's repos).
 export const lifecycleLabelConfig: Record<string, { label: string; color: string }> = {
   active: { label: 'Active', color: 'bg-positive-500' },
-  stable: { label: 'Stable', color: 'bg-positive-500' },
+  stable: { label: 'Stable', color: 'bg-accent-500' },
   declining: { label: 'Declining', color: 'bg-warning-500' },
   abandoned: { label: 'Abandoned', color: 'bg-negative-500' },
   archived: { label: 'Archived', color: 'bg-neutral-400' },
@@ -126,5 +65,5 @@ export const getLifecycleLabelConfig = (label: string | null): { label: string;
   if (label && lifecycleLabelConfig[label]) {
     return lifecycleLabelConfig[label];
   }
-  return { label: 'Unavailable', color: 'bg-neutral-400' };
+  return { label: 'Unknown', color: 'bg-neutral-400' };
 };
diff --git a/frontend/server/api/badge/health-score.ts b/frontend/server/api/badge/health-score.ts
index 802212ebc..c2b708c14 100644
--- a/frontend/server/api/badge/health-score.ts
+++ b/frontend/server/api/badge/health-score.ts
@@ -16,7 +16,8 @@ export default defineEventHandler(async (event): Promise<void> => {
     if (!res.data || res.data.length === 0) {
       throw createError({ statusCode: 404, statusMessage: 'Project not found' });
     }
-    const config = getHealthScoreV2Config(res.data[0].healthLabel);
+    const healthLabel = res.data[0].healthLabel;
+    const config = getHealthScoreV2Config(healthLabel);
     const message = encodeURIComponent(config.label);
     const label = encodeURIComponent('Health Score');
     const color = config.ghBadgeColor.replace('#', '');
diff --git a/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts b/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts
new file mode 100644
index 000000000..aec382d64
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<HealthBreakdownResults> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<HealthBreakdownResults[]>(
+      '/v0/pipes/project_insights_health_breakdown.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    return res.data[0];
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score breakdown:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score breakdown',
+    });
+  }
+});
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index be8639b3b..badba4012 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -135,6 +135,7 @@ export default {
     '!bg-negative-900',
     'bg-neutral-50',
     'bg-health-healthy',
+    'bg-health-fair',
     'bg-health-concerning',
     'bg-health-critical',
   ],
diff --git a/frontend/types/overview/responses.types.ts b/frontend/types/overview/responses.types.ts
index ab84001da..57fb9bbf7 100644
--- a/frontend/types/overview/responses.types.ts
+++ b/frontend/types/overview/responses.types.ts
@@ -86,6 +86,62 @@ export interface ImpactBreakdownResults {
   centralityBand: ImpactBreakdownBand | null;
 }
 
+// Flat shape matching the project_insights_health_breakdown.pipe response (mirrors
+// ImpactBreakdownResults' flat style, one row per project after the crowd.dev-side rollup).
+export interface HealthBreakdownResults {
+  // Maintainer
+  busFactorScore: number | null;
+  busFactorAvailable: boolean | null;
+  busFactorCount: number | null;
+  orgDiversityScore: number | null;
+  orgDiversityAvailable: boolean | null;
+  orgCount: number | null;
+  responsivenessScore: number | null;
+  responsivenessAvailable: boolean | null;
+  medianPrResponseS: number | null;
+  medianIssueResponseS: number | null;
+  isGerrit: boolean | null;
+  isExcluded: boolean | null;
+
+  // Security
+  openVulnScore: number | null;
+  openCriticals: number | null;
+  openHighs: number | null;
+  openModerates: number | null;
+  scorecardScorePts: number | null;
+  scorecardAvailable: boolean | null;
+  scorecardScore: number | null;
+  securityPracticesScore: number | null;
+  securityPracticesAvailable: boolean | null;
+  securityPolicyEnabled: 0 | 1 | null;
+  branchProtectionEnabled: 0 | 1 | null;
+  branchProtectionRequiredReviews: 0 | 1 | null;
+  branchProtectionRequiresStatusChecks: 0 | 1 | null;
+  branchProtectionAllowsForcePush: 0 | 1 | null;
+  dependencyHealthScore: number | null;
+  dependencyHealthAvailable: boolean | null;
+  vulnerableDeps: number | null;
+
+  // Development
+  releaseCadenceScore: number | null;
+  releaseCadenceAvailable: boolean | null;
+  daysSinceLatest: number | null;
+  daysBetweenRecent: number | null;
+  commitActivityScore: number | null;
+  commitsLast6m: number | null;
+  lastCommitAt: string | null;
+  issueResolutionScore: number | null;
+  issueResolutionAvailable: boolean | null;
+  closed12m: number | null;
+  opened12m: number | null;
+  medianCloseS: number | null;
+  prMergeScore: number | null;
+  prMergeAvailable: boolean | null;
+  merged12m: number | null;
+  closedUnmerged12m: number | null;
+  medianMergeS: number | null;
+}
+
 export interface HealthScoreResults {
   activeContributors: BenchmarkScoreData;
   contributorDependency: BenchmarkScoreData;