From 398241923b58124b72894e0df6e1ac3756837439 Mon Sep 17 00:00:00 2001
From: Florian Heuberger <fh@flogersoft.de>
Date: 2026年1月23日 09:01:46 +0100
Subject: [PATCH] feat: add nuxt.care health score badges
---
 .../devtools/client/components/ModuleItem.vue &#124; 3 +
 .../client/components/ModuleScoreBadge.vue &#124; 30 ++++++++
 .../client/composables/state-module-scores.ts &#124; 74 +++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 packages/devtools/client/components/ModuleScoreBadge.vue
 create mode 100644 packages/devtools/client/composables/state-module-scores.ts
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index fdfe0b43bf..d9787c7d55 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -18,6 +18,9 @@ const terminalId = useCurrentTerminalId()
 
 <template>
 <moduleitembase :mod="mod" :info="staticInfo">
+ <template #badge>
+ <modulescorebadge :npm="data.npm" />
+ </template>
 <template #items>
 <div v-if="mod.entryPath" flex="~ gap-2" title="Open on filesystem">
 <span i-carbon-folder-move-to flex-none text-lg op50 />
diff --git a/packages/devtools/client/components/ModuleScoreBadge.vue b/packages/devtools/client/components/ModuleScoreBadge.vue
new file mode 100644
index 0000000000..d011a75b13
--- /dev/null
+++ b/packages/devtools/client/components/ModuleScoreBadge.vue
@@ -0,0 +1,30 @@
+
+
+<template>
+ <span v-if="loading && !score" op50>
+ <span i-carbon-circle-dash animate-spin />
+ </span>
+ <a + v-else-if="score" + inline-flex items-center + :href="`https://nuxt.care/?search=npm:${npm}`" + + rel="noopener" + :title="`Nuxt Care Score: ${score.score}/100 (${score.status})`" +>
+ <span :>
+ {{ score.status }}
+ </span>
+ </a>
+</template>
diff --git a/packages/devtools/client/composables/state-module-scores.ts b/packages/devtools/client/composables/state-module-scores.ts
new file mode 100644
index 0000000000..678def0eda
--- /dev/null
+++ b/packages/devtools/client/composables/state-module-scores.ts
@@ -0,0 +1,74 @@
+import { watchDebounced } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useInstalledModules } from './state-modules'
+
+export type ModuleStatus = 'optimal' &#124; 'stable' &#124; 'degraded' &#124; 'critical'
+
+export interface ModuleScore {
+ name: string
+ npm: string
+ score: number
+ status: ModuleStatus
+ lastUpdated: string &#124; null
+}
+
+// nuxt.care color schema
+export const statusColors: Record<modulestatus, string> = {
+ optimal: '#22c55e',
+ stable: '#84cc16',
+ degraded: '#eab308',
+ critical: '#ef4444',
+}
+
+const API_BASE = 'https://nuxt.care/api/v1/modules/'
+const scores = ref<ul class="image_map">>(new Map())
+const fetched = new Set<string>()
+const loading = ref(false)
+
+export function useModuleScores() {
+ const installedModules = useInstalledModules()
+
+ const npmNames = computed(() =>
+ installedModules.value
+ .map(m => m.info?.npm &#124;&#124; m.name)
+ .filter((name): name is string => !!name && !name.startsWith('.')),
+ )
+
+ watchDebounced(npmNames, async (names) => {
+ // Only fetch modules we haven't fetched yet
+ const missing = names.filter(name => !fetched.has(name))
+ if (!missing.length)
+ return
+
+ missing.forEach(name => fetched.add(name))
+ loading.value = true
+
+ try {
+ const params = new URLSearchParams([
+ ['slim', 'true'],
+ ...missing.map(name => ['package', name]),
+ ])
+
+ const response = await $fetch<modulescore[]>(`${API_BASE}?${params}`)
+
+ // Merge with existing scores
+ for (const item of response)
+ scores.value.set(item.npm, item)
+ }
+ catch (e: any) {
+ // Only block retry for CORS or rate limit, allow retry for other errors
+ const isCors = e?.message?.includes('NetworkError') &#124;&#124; e?.message?.includes('CORS')
+ const isRateLimit = (e?.response?.status ?? e?.status) === 429
+
+ if (!isCors && !isRateLimit)
+ missing.forEach(name => fetched.delete(name))
+
+ console.warn('[DevTools] Failed to fetch module scores:', e)
+ }
+ finally {
+ loading.value = false
+ }
+ }, { debounce: 300, immediate: true })
+
+ return { scores, loading }
+}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/nuxt/devtools/pull/924.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/nuxt/devtools/pull/924.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>