nuxtseo-layer-devtools 0.5.0 → 0.5.1

package/components/DevtoolsChecklistBadge.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { requiredPending = 0, recommendedPending = 0 } = defineProps<{
+  requiredPending?: number
+  recommendedPending?: number
+}>()
+</script>
+
+<template>
+  <span
+    v-if="requiredPending > 0 || recommendedPending > 0"
+    class="checklist-badge"
+    :class="requiredPending > 0 ? 'checklist-badge--required' : 'checklist-badge--recommended'"
+  >
+    {{ requiredPending + recommendedPending }}
+  </span>
+  <span v-else class="checklist-badge checklist-badge--complete">
+    <UIcon name="carbon:checkmark" class="w-2.5 h-2.5" />
+  </span>
+</template>
+
+<style scoped>
+.checklist-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: var(--radius-full, 9999px);
+  font-size: 0.5625rem;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.checklist-badge--required {
+  background: oklch(65% 0.18 25 / 0.15);
+  color: oklch(55% 0.18 25);
+}
+
+.dark .checklist-badge--required {
+  background: oklch(45% 0.14 25 / 0.2);
+  color: oklch(72% 0.14 25);
+}
+
+.checklist-badge--recommended {
+  background: oklch(80% 0.12 85 / 0.15);
+  color: oklch(50% 0.15 85);
+}
+
+.dark .checklist-badge--recommended {
+  background: oklch(50% 0.12 85 / 0.2);
+  color: oklch(75% 0.12 85);
+}
+
+.checklist-badge--complete {
+  background: oklch(75% 0.15 145 / 0.12);
+  color: oklch(50% 0.15 145);
+}
+
+.dark .checklist-badge--complete {
+  background: oklch(50% 0.15 145 / 0.15);
+  color: oklch(75% 0.18 145);
+}
+</style>

package/components/DevtoolsChecklistItem.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { ChecklistItemResult } from '../composables/checklist'
+
+const { item } = defineProps<{
+  item: ChecklistItemResult
+}>()
+</script>
+
+<template>
+  <div class="checklist-item" :class="item.passed ? 'is-passed' : `is-pending-${item.level}`">
+    <div class="checklist-item-status">
+      <UIcon
+        :name="item.passed ? 'carbon:checkmark-filled' : item.level === 'required' ? 'carbon:warning-alt-filled' : 'carbon:circle-dash'"
+        class="checklist-item-icon"
+      />
+    </div>
+    <div class="checklist-item-content">
+      <div class="checklist-item-header">
+        <span class="checklist-item-label">{{ item.label }}</span>
+        <UBadge
+          v-if="!item.passed"
+          size="xs"
+          :color="item.level === 'required' ? 'error' : 'warning'"
+          variant="subtle"
+          class="checklist-item-level"
+        >
+          {{ item.level === 'required' ? 'Required' : 'Tip' }}
+        </UBadge>
+      </div>
+      <div class="checklist-item-description">
+        {{ item.description }}
+      </div>
+      <div v-if="item.detail" class="checklist-item-detail">
+        {{ item.detail }}
+      </div>
+    </div>
+    <a
+      :href="item.docsUrl"
+      target="_blank"
+      rel="noopener"
+      class="checklist-item-docs"
+      :class="item.passed ? 'is-subtle' : ''"
+    >
+      <UIcon name="carbon:arrow-up-right" class="w-3 h-3" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.5rem;
+  border-radius: var(--radius-md);
+  transition: background 100ms;
+}
+
+.checklist-item:hover {
+  background: var(--color-surface-elevated);
+}
+
+.checklist-item.is-passed {
+  opacity: 0.55;
+}
+
+.checklist-item.is-passed:hover {
+  opacity: 0.8;
+}
+
+.checklist-item-status {
+  flex-shrink: 0;
+  padding-top: 0.125rem;
+}
+
+.checklist-item-icon {
+  font-size: 0.8125rem;
+}
+
+.checklist-item.is-passed .checklist-item-icon {
+  color: oklch(50% 0.15 145);
+}
+
+.dark .checklist-item.is-passed .checklist-item-icon {
+  color: oklch(70% 0.18 145);
+}
+
+.checklist-item.is-pending-required .checklist-item-icon {
+  color: oklch(55% 0.2 25);
+}
+
+.dark .checklist-item.is-pending-required .checklist-item-icon {
+  color: oklch(70% 0.16 25);
+}
+
+.checklist-item.is-pending-recommended .checklist-item-icon {
+  color: oklch(52% 0.15 85);
+}
+
+.dark .checklist-item.is-pending-recommended .checklist-item-icon {
+  color: oklch(72% 0.12 85);
+}
+
+.checklist-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.checklist-item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.checklist-item-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.checklist-item-level {
+  font-size: 0.5rem !important;
+  padding: 0 0.25rem !important;
+  line-height: 1.4 !important;
+}
+
+.checklist-item-description {
+  font-size: 0.625rem;
+  color: var(--color-text-muted);
+  margin-top: 0.0625rem;
+  line-height: 1.35;
+}
+
+.checklist-item-detail {
+  display: inline-block;
+  font-size: 0.5625rem;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text-subtle);
+  margin-top: 0.1875rem;
+  padding: 0.0625rem 0.3125rem;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-sm);
+}
+
+.checklist-item-docs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.0625rem;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: color 100ms, background 100ms;
+}
+
+.checklist-item-docs:hover {
+  color: var(--seo-green);
+  background: oklch(from var(--seo-green) l c h / 0.08);
+}
+
+.checklist-item-docs.is-subtle {
+  opacity: 0;
+}
+
+.checklist-item:hover .checklist-item-docs.is-subtle {
+  opacity: 1;
+}
+</style>

package/components/DevtoolsLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { useSetupChecklist } from '../composables/checklist'
 import { fetchInstalledModules, findModuleByName, showModuleSplash } from '../composables/modules'
 import { colorMode } from '../composables/rpc'
 import { hasProductionUrl, isConnected, isProductionMode, isStandalone, path, previewSource, productionUrl, standaloneUrl } from '../composables/state'
@@ -93,6 +94,13 @@ const standaloneHostname = computed(() => {
 
 const showStandaloneSetup = computed(() => !isConnected.value && !isStandalone.value)
 
+const { evaluated, getModuleResultByName } = useSetupChecklist()
+const moduleChecklistResult = computed(() => {
+  if (!evaluated.value || !moduleName)
+    return undefined
+  return getModuleResultByName(moduleName)
+})
+
 function disconnectStandalone() {
   standaloneUrl.value = ''
 }
@@ -130,6 +138,11 @@ function disconnectStandalone() {
                 <span class="text-sm sm:text-base font-semibold tracking-tight text-[var(--color-text)]">
                   {{ title }}
                 </span>
+                <DevtoolsChecklistBadge
+                  v-if="moduleChecklistResult?.totalPending"
+                  :required-pending="moduleChecklistResult.requiredPending"
+                  :recommended-pending="moduleChecklistResult.recommendedPending"
+                />
                 <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50 transition-transform" :class="showModuleSplash ? 'rotate-180' : ''" />
               </button>
               <UTooltip v-if="version" :text="hasUpdate ? `Update available: v${latestVersion}` : `v${version}`">
@@ -286,6 +299,20 @@ function disconnectStandalone() {
         </div>
       </div>
 
+      <!-- Setup checklist alert -->
+      <DevtoolsAlert
+        v-if="moduleChecklistResult?.requiredPending"
+        variant="warning"
+      >
+        {{ moduleChecklistResult.requiredPending }} required setup {{ moduleChecklistResult.requiredPending === 1 ? 'step' : 'steps' }} remaining
+        <template #action>
+          <button type="button" class="checklist-alert-action" @click="showModuleSplash = true">
+            View setup
+            <UIcon name="carbon:arrow-right" class="w-3 h-3" />
+          </button>
+        </template>
+      </DevtoolsAlert>
+
       <!-- Main Content -->
       <div class="devtools-main">
         <main class="devtools-main-content">
@@ -459,4 +486,20 @@ function disconnectStandalone() {
   padding: 1.5rem 1rem 1rem;
   max-width: 48rem;
 }
+
+.checklist-alert-action {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: inherit;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: opacity 100ms;
+}
+
+.checklist-alert-action:hover {
+  opacity: 1;
+}
 </style>

package/components/DevtoolsModuleSplash.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
 import { onClickOutside, useClipboard } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useSetupChecklist } from '../composables/checklist'
 import { moduleCatalog, showModuleSplash, switchToModule } from '../composables/modules'
 import { isConnected } from '../composables/state'
 
@@ -27,6 +29,47 @@ const installCommand = computed(() => {
 
 const { copy, copied } = useClipboard({ source: installCommand })
 
+const { summary, evaluated, evaluate, getModuleResultByName } = useSetupChecklist()
+
+// Evaluate checklist on first splash open
+const hasEvaluated = ref(false)
+watch(showModuleSplash, (open) => {
+  if (open && !hasEvaluated.value) {
+    hasEvaluated.value = true
+    evaluate()
+  }
+})
+
+const activeTab = ref('modules')
+
+const healthBadge = computed(() => {
+  if (!evaluated.value || summary.value.total === 0)
+    return undefined
+  if (summary.value.requiredPending > 0)
+    return { label: `${summary.value.requiredPending}`, color: 'error' as const, variant: 'subtle' as const }
+  if (summary.value.recommendedPending > 0)
+    return { label: `${summary.value.recommendedPending}`, color: 'warning' as const, variant: 'subtle' as const }
+  return { label: '', icon: 'i-carbon-checkmark', color: 'success' as const, variant: 'subtle' as const }
+})
+
+const tabs = computed<TabsItem[]>(() => {
+  const items: TabsItem[] = [
+    { label: 'Modules', value: 'modules', icon: 'i-carbon-grid' },
+  ]
+  if (proModules.value.length) {
+    items.push({ label: 'Pro', value: 'pro', icon: 'i-carbon-locked' })
+  }
+  if (evaluated.value && summary.value.total > 0) {
+    items.push({
+      label: 'Setup',
+      value: 'setup',
+      icon: 'i-carbon-task-complete',
+      badge: healthBadge.value,
+    })
+  }
+  return items
+})
+
 function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   if (!mod.installed) {
     const set = new Set(selectedForInstall.value)
@@ -56,12 +99,21 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
             </button>
           </div>
 
-          <!-- Modules Section -->
-          <div class="splash-section">
-            <div class="splash-section-label">
-              <span class="splash-section-dot" />
-              Modules
-            </div>
+          <!-- Tabs -->
+          <UTabs
+            v-model="activeTab"
+            variant="link"
+            size="sm"
+            :content="false"
+            :items="tabs"
+            :ui="{
+              root: 'splash-tabs',
+              trigger: 'splash-tab-trigger',
+            }"
+          />
+
+          <!-- Modules tab -->
+          <div v-show="activeTab === 'modules'" class="splash-tab-content">
             <div class="splash-grid">
               <button
                 v-for="mod of coreModules"
@@ -81,16 +133,19 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
                   <UIcon :name="mod.icon" class="text-base" />
                 </div>
                 <span class="splash-module-title">{{ mod.title }}</span>
-                <span v-if="mod.name === currentModule" class="splash-current-badge">Current</span>
+                <DevtoolsChecklistBadge
+                  v-if="mod.installed && evaluated && getModuleResultByName(mod.name)"
+                  :required-pending="getModuleResultByName(mod.name)!.requiredPending"
+                  :recommended-pending="getModuleResultByName(mod.name)!.recommendedPending"
+                />
+                <span v-else-if="mod.name === currentModule" class="splash-current-badge">Current</span>
                 <span v-else-if="!mod.installed" class="splash-not-installed">{{ selectedForInstall.has(mod.name) ? 'Selected' : 'Not installed' }}</span>
               </button>
             </div>
-          </div>
 
-          <!-- Install command -->
-          <Transition name="install-bar">
-            <div v-if="installCommand" class="splash-install-section">
-              <div class="splash-install">
+            <!-- Install command -->
+            <Transition name="install-bar">
+              <div v-if="installCommand" class="splash-install">
                 <div class="splash-install-code">
                   <code>{{ installCommand }}</code>
                 </div>
@@ -99,15 +154,11 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
                   {{ copied ? 'Copied' : 'Copy' }}
                 </button>
               </div>
-            </div>
-          </Transition>
+            </Transition>
+          </div>
 
-          <!-- Pro Section -->
-          <div v-if="proModules.length" class="splash-section splash-pro-area">
-            <div class="splash-section-label">
-              <span class="splash-section-dot splash-section-dot--pro" />
-              Pro
-            </div>
+          <!-- Pro tab -->
+          <div v-show="activeTab === 'pro'" class="splash-tab-content">
             <div class="splash-grid">
               <button
                 v-for="mod of proModules"
@@ -131,7 +182,6 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
                 </UBadge>
               </button>
             </div>
-            <!-- Pro status / CTA -->
             <div class="splash-pro-status">
               <div class="splash-pro-status-inner">
                 <UIcon name="carbon:locked" class="w-3.5 h-3.5 opacity-50" />
@@ -144,6 +194,21 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
             </div>
           </div>
 
+          <!-- Setup tab -->
+          <div v-show="activeTab === 'setup'" class="splash-tab-content">
+            <div v-if="evaluated && summary.total > 0" class="splash-health-header">
+              <span class="splash-health-bar">
+                <span
+                  class="splash-health-bar-fill"
+                  :class="summary.requiredPending > 0 ? 'is-danger' : summary.recommendedPending > 0 ? 'is-warning' : 'is-complete'"
+                  :style="{ width: `${summary.total > 0 ? (summary.passed / summary.total) * 100 : 0}%` }"
+                />
+              </span>
+              <span class="splash-health-count">{{ summary.passed }}/{{ summary.total }} complete</span>
+            </div>
+            <DevtoolsSetupChecklist :current-module="currentModule" />
+          </div>
+
           <!-- Footer -->
           <div class="splash-footer">
             <a href="https://nuxtseo.com" target="_blank" rel="noopener" class="splash-link">
@@ -171,11 +236,12 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
 
 .splash-panel {
   width: min(480px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   background: var(--color-surface);
   box-shadow: 0 24px 48px oklch(0% 0 0 / 0.2);
-  overflow: hidden;
 }
 
 .dark .splash-panel {
@@ -208,36 +274,19 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   color: var(--color-text);
 }
 
-/* Sections */
-.splash-section {
-  padding: 0.5rem 0.75rem 0.625rem;
-}
-
-.splash-section + .splash-section {
-  border-top: 1px solid var(--color-border);
-}
-
-.splash-section-label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-  padding: 0.25rem 0.375rem 0.375rem;
+/* Tabs */
+.splash-tabs {
+  padding: 0 0.75rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.splash-section-dot {
-  width: 0.3125rem;
-  height: 0.3125rem;
-  border-radius: 50%;
-  background: var(--color-text-subtle);
+.splash-tab-trigger {
+  font-size: 0.6875rem !important;
 }
 
-.splash-section-dot--pro {
-  background: oklch(65% 0.25 290);
+/* Tab content */
+.splash-tab-content {
+  padding: 0.5rem 0.75rem 0.625rem;
 }
 
 /* Grid */
@@ -355,7 +404,7 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0.375rem 0.25rem 0;
+  margin: 0.375rem 0 0;
   padding: 0.4rem 0.625rem;
   border-radius: var(--radius-md);
   background: oklch(65% 0.25 290 / 0.06);
@@ -385,16 +434,60 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   opacity: 0.8;
 }
 
-/* Install bar */
-.splash-install-section {
-  padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--color-border);
+/* Setup Health header */
+.splash-health-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.splash-health-bar {
+  flex: 1;
+  height: 0.25rem;
+  border-radius: 2px;
+  background: var(--color-surface-sunken);
+  overflow: hidden;
+}
+
+.splash-health-bar-fill {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+.splash-health-bar-fill.is-complete {
+  background: oklch(55% 0.15 145);
+}
+
+.dark .splash-health-bar-fill.is-complete {
+  background: oklch(65% 0.18 145);
+}
+
+.splash-health-bar-fill.is-warning {
+  background: oklch(65% 0.18 85);
+}
+
+.splash-health-bar-fill.is-danger {
+  background: oklch(60% 0.2 25);
+}
+
+.splash-health-count {
+  font-size: 0.5625rem;
+  font-family: var(--font-mono, monospace);
+  font-weight: 600;
+  color: var(--color-text-subtle);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Install bar */
 .splash-install {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  margin-top: 0.5rem;
   padding: 0.5rem 0.625rem;
   border-radius: var(--radius-md);
   background: var(--color-surface-sunken);

package/components/DevtoolsSetupChecklist.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useSetupChecklist } from '../composables/checklist'
+
+const { currentModule } = defineProps<{
+  currentModule?: string
+}>()
+
+const { results, loading, evaluated, evaluate } = useSetupChecklist()
+
+// Evaluate on mount if not already done
+if (!evaluated.value)
+  evaluate()
+</script>
+
+<template>
+  <div class="setup-checklist">
+    <!-- Loading state -->
+    <DevtoolsLoading v-if="loading" />
+
+    <!-- Per-module sections -->
+    <template v-else-if="evaluated">
+      <DevtoolsSection
+        v-for="result of results"
+        :key="result.moduleSlug"
+        :icon="result.moduleIcon"
+        :text="result.moduleLabel"
+        :open="result.requiredPending > 0 || result.moduleSlug === currentModule"
+        :padding="false"
+      >
+        <template #actions>
+          <DevtoolsChecklistBadge
+            :required-pending="result.requiredPending"
+            :recommended-pending="result.recommendedPending"
+          />
+        </template>
+        <div class="setup-checklist-items">
+          <DevtoolsChecklistItem
+            v-for="item of result.items"
+            :key="item.id"
+            :item="item"
+          />
+        </div>
+      </DevtoolsSection>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.setup-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.setup-checklist-items {
+  display: flex;
+  flex-direction: column;
+  padding: 0.125rem 0.25rem;
+}
+</style>

package/composables/checklist.ts

@@ -0,0 +1,486 @@
+import type { ChecklistItemDefinition, NuxtSEOModule } from 'nuxtseo-shared/const'
+import { computed, ref, toValue } from 'vue'
+import { installedModules } from './modules'
+import { appFetch } from './rpc'
+
+export interface ChecklistDetectResult {
+  passed: boolean
+  detail?: string
+}
+
+interface ChecklistItemWithDetect extends ChecklistItemDefinition {
+  detect: (data: Record<string, any>, ctx: DetectContext) => ChecklistDetectResult
+}
+
+interface DetectContext {
+  installedModuleSlugs: Set<string>
+  debugData: Map<string, Record<string, any>>
+}
+
+export interface ChecklistItemResult extends ChecklistItemDefinition {
+  passed: boolean
+  detail?: string
+}
+
+export interface ModuleChecklistResult {
+  moduleSlug: NuxtSEOModule['slug']
+  moduleLabel: string
+  moduleIcon: string
+  items: ChecklistItemResult[]
+  requiredPending: number
+  recommendedPending: number
+  totalPending: number
+}
+
+export interface ChecklistSummary {
+  total: number
+  passed: number
+  requiredPending: number
+  recommendedPending: number
+}
+
+// Debug endpoint paths for each module
+const DEBUG_ENDPOINTS: Partial<Record<NuxtSEOModule['slug'], string>> = {
+  'site-config': '/__site-config__/debug',
+  'robots': '/__robots__/debug.json',
+  'sitemap': '/__sitemap__/debug.json',
+  'og-image': '/__nuxt-og-image/debug.json',
+  'schema-org': '/__schema-org__/debug.json',
+}
+
+// Module slug used internally by devtools → catalog slug mapping
+const DEVTOOLS_NAME_TO_SLUG: Record<string, NuxtSEOModule['slug']> = {
+  'nuxt-robots': 'robots',
+  'sitemap': 'sitemap',
+  'nuxt-og-image': 'og-image',
+  'nuxt-schema-org': 'schema-org',
+  'nuxt-seo-utils': 'seo-utils',
+  'nuxt-link-checker': 'link-checker',
+  'nuxt-site-config': 'site-config',
+  'nuxt-ai-ready': 'ai-ready',
+  'nuxt-skew-protection': 'skew-protection',
+}
+
+const MODULE_META: Record<string, { label: string, icon: string }> = {
+  'site-config': { label: 'Site Config', icon: 'carbon:settings-check' },
+  'robots': { label: 'Robots', icon: 'carbon:bot' },
+  'sitemap': { label: 'Sitemap', icon: 'carbon:load-balancer-application' },
+  'og-image': { label: 'OG Image', icon: 'carbon:image-search' },
+  'seo-utils': { label: 'SEO Utils', icon: 'carbon:tools' },
+  'schema-org': { label: 'Schema.org', icon: 'carbon:chart-relationship' },
+}
+
+function isValidUrl(url?: string): boolean {
+  if (!url)
+    return false
+  return !url.includes('localhost') && !url.includes('127.0.0.1') && url.length > 0
+}
+
+// Checklist definitions with detection logic per module
+const CHECKLIST_DEFINITIONS: Partial<Record<NuxtSEOModule['slug'], ChecklistItemWithDetect[]>> = {
+  'site-config': [
+    {
+      id: 'site-url',
+      label: 'Site URL configured',
+      description: 'A production site URL is needed for canonical URLs, sitemaps, and OG images to work correctly.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/getting-started/how-it-works',
+      detect: (data) => {
+        const url = data?.config?.url || ''
+        const passed = isValidUrl(url)
+        return { passed, detail: passed ? url : 'Not set or using localhost' }
+      },
+    },
+    {
+      id: 'site-name',
+      label: 'Site name set',
+      description: 'Used for default meta tags, Schema.org, and OG tags across all modules.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/getting-started/how-it-works',
+      detect: (data) => {
+        const name = data?.config?.name || ''
+        const passed = !!name && name !== 'My Site'
+        return { passed, detail: passed ? name : 'Not configured' }
+      },
+    },
+    {
+      id: 'default-locale',
+      label: 'Default locale configured',
+      description: 'Ensures correct hreflang tags and locale-aware sitemaps when using i18n.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/guides/setting-site-config',
+      detect: (data) => {
+        const locale = data?.config?.defaultLocale
+        const passed = !!locale
+        return { passed, detail: passed ? locale : 'Not set' }
+      },
+    },
+    {
+      id: 'trailing-slash',
+      label: 'Trailing slash preference set',
+      description: 'Prevents duplicate content from inconsistent URL formats. Set explicitly to true or false.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/guides/setting-site-config',
+      detect: (data) => {
+        const trailingSlash = data?.config?.trailingSlash
+        const passed = typeof trailingSlash === 'boolean'
+        return { passed, detail: passed ? (trailingSlash ? 'Enabled' : 'Disabled') : 'Not explicitly set' }
+      },
+    },
+    {
+      id: 'robots-installed',
+      label: 'Robots module installed',
+      description: 'Controls crawling and indexing across all SEO modules. Strongly recommended.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('robots')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+  'robots': [
+    {
+      id: 'no-validation-errors',
+      label: 'No robots.txt validation errors',
+      description: 'Your robots.txt should be free of syntax errors that could confuse crawlers.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/robots/getting-started/installation',
+      detect: (data) => {
+        const errors = data?.validation?.errors || []
+        const passed = errors.length === 0
+        return { passed, detail: passed ? 'No errors' : `${errors.length} error(s) found` }
+      },
+    },
+    {
+      id: 'ai-directives',
+      label: 'AI bot directives configured',
+      description: 'Configure how AI crawlers interact with your content using blockAiBots or content signal directives.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/ai-bots',
+      detect: (data) => {
+        const groups = data?.runtimeConfig?.groups || []
+        const hasContentSignal = groups.some((g: any) => g.contentSignal?.length || g.contentUsage?.length)
+        const aiAgents = ['gptbot', 'chatgpt-user', 'anthropic-ai', 'claudebot', 'claude-web', 'google-extended', 'ccbot']
+        const hasAiAgent = groups.some((g: any) =>
+          (g.userAgent || []).some((ua: string) => aiAgents.includes(ua.toLowerCase())),
+        )
+        const passed = hasContentSignal || hasAiAgent
+        return { passed, detail: passed ? (hasContentSignal ? 'Content signals configured' : 'AI agent rules configured') : 'No AI bot directives found' }
+      },
+    },
+    {
+      id: 'bot-detection',
+      label: 'Bot detection enabled',
+      description: 'Classify bots via headers and fingerprinting to reduce server load from non-SEO crawlers.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/bot-detection',
+      detect: (data) => {
+        const enabled = data?.runtimeConfig?.botDetection
+        return { passed: !!enabled, detail: enabled ? 'Enabled' : 'Disabled' }
+      },
+    },
+    {
+      id: 'sitemap-reference',
+      label: 'Sitemap referenced in robots.txt',
+      description: 'Crawlers use the Sitemap directive in robots.txt to discover your sitemap URL.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/robots-txt',
+      detect: (data) => {
+        const sitemaps = data?.validation?.sitemaps || []
+        const passed = sitemaps.length > 0
+        return { passed, detail: passed ? `${sitemaps.length} sitemap(s) referenced` : 'No sitemap directive found' }
+      },
+    },
+  ],
+  'sitemap': [
+    {
+      id: 'site-url-set',
+      label: 'Site URL set for sitemaps',
+      description: 'Sitemaps require an absolute site URL. Without it, URLs will use localhost in production.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/getting-started/installation',
+      detect: (data) => {
+        const url = data?.siteConfig?.url || ''
+        const passed = isValidUrl(url)
+        return { passed, detail: passed ? url : 'Site URL not configured' }
+      },
+    },
+    {
+      id: 'has-sources',
+      label: 'URL sources configured',
+      description: 'Add dynamic URL sources for CMS or database content so all pages appear in your sitemap.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/dynamic-urls',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const userSources = sources.filter((s: any) => s.sourceType === 'user' || (s.context?.name && !s.context.name.startsWith('nuxt:')))
+        const sitemapUserSources = Object.values(sitemaps).flatMap((s: any) =>
+          (s.sources || []).filter((src: any) => src.sourceType === 'user'),
+        )
+        const totalUser = userSources.length + sitemapUserSources.length
+        const passed = totalUser > 0
+        return { passed, detail: passed ? `${totalUser} custom source(s)` : 'Only default app sources detected' }
+      },
+    },
+    {
+      id: 'no-source-errors',
+      label: 'No sitemap source errors',
+      description: 'All configured sitemap sources should resolve successfully.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/dynamic-urls',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const allSources = [
+          ...sources,
+          ...Object.values(sitemaps).flatMap((s: any) => s.sources || []),
+        ]
+        const failures = allSources.filter((s: any) => s._isFailure || s.error)
+        const passed = failures.length === 0
+        return { passed, detail: passed ? 'All sources OK' : `${failures.length} source(s) failing` }
+      },
+    },
+    {
+      id: 'url-warnings',
+      label: 'No URL validation warnings',
+      description: 'URLs in your sitemap should follow best practices (no whitespace, lowercase, etc).',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/best-practices',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const allSources = [
+          ...sources,
+          ...Object.values(sitemaps).flatMap((s: any) => s.sources || []),
+        ]
+        const warningCount = allSources.reduce((sum: number, s: any) => sum + (s._urlWarnings?.length || 0), 0)
+        const passed = warningCount === 0
+        return { passed, detail: passed ? 'No warnings' : `${warningCount} URL warning(s)` }
+      },
+    },
+  ],
+  'og-image': [
+    {
+      id: 'renderer',
+      label: 'Renderer installed',
+      description: 'A renderer (Takumi, Satori, or Browser) is required to generate OG images.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/og-image/getting-started/installation',
+      detect: (data) => {
+        const compat = data?.compatibility || {}
+        const hasTakumi = compat.takumi && compat.takumi !== false
+        const hasSatori = compat.satori && compat.satori !== false
+        const hasBrowser = compat.browser && compat.browser !== false
+        const passed = hasTakumi || hasSatori || hasBrowser
+        const renderers = [hasTakumi && 'takumi', hasSatori && 'satori', hasBrowser && 'browser'].filter(Boolean)
+        return { passed, detail: passed ? `Available: ${renderers.join(', ')}` : 'No renderer installed' }
+      },
+    },
+    {
+      id: 'custom-template',
+      label: 'Custom OG template created',
+      description: 'Community templates are for development only. Create a custom template for production.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/og-image/guides/templates',
+      detect: (data) => {
+        const components = data?.componentNames || []
+        const appTemplates = components.filter((c: any) => c.category === 'app')
+        const communityTemplates = components.filter((c: any) => c.category === 'community')
+        const passed = appTemplates.length > 0
+        if (passed)
+          return { passed, detail: `${appTemplates.length} custom template(s)` }
+        if (communityTemplates.length > 0)
+          return { passed: false, detail: `${communityTemplates.length} community template(s), eject before production` }
+        return { passed: false, detail: 'No templates found' }
+      },
+    },
+  ],
+  'seo-utils': [
+    {
+      id: 'schema-org-installed',
+      label: 'Schema.org module installed',
+      description: 'Adds structured data to your pages, improving rich search results. Pairs well with SEO Utils.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('schema-org')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+    {
+      id: 'sitemap-installed',
+      label: 'Sitemap module installed',
+      description: 'Generates XML sitemaps so search engines can discover all your pages efficiently.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('sitemap')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+  'schema-org': [
+    {
+      id: 'identity',
+      label: 'Identity configured',
+      description: 'Set up your Organization or Person identity for rich Schema.org knowledge graph results.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/guides/setup-identity',
+      detect: (data) => {
+        const config = data?.runtimeConfig || {}
+        const identity = config.identity
+        if (!identity)
+          return { passed: false, detail: 'No identity set' }
+        const type = typeof identity === 'string' ? identity : identity['@type'] || 'Unknown'
+        const name = typeof identity === 'object' ? (identity.name || '') : ''
+        return { passed: true, detail: name ? `${type}: ${name}` : type }
+      },
+    },
+    {
+      id: 'robots-companion',
+      label: 'Robots module installed',
+      description: 'Robots module auto-excludes non-indexable paths from Schema.org output.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('robots')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+}
+
+const debugCache = ref<Map<string, Record<string, any>>>(new Map())
+const loading = ref(false)
+const evaluated = ref(false)
+
+function getInstalledSlugs(): Set<string> {
+  const slugs = new Set<string>()
+  for (const mod of toValue(installedModules)) {
+    const slug = DEVTOOLS_NAME_TO_SLUG[mod.name]
+    if (slug)
+      slugs.add(slug)
+  }
+  return slugs
+}
+
+async function fetchDebugData(): Promise<void> {
+  const fetch = toValue(appFetch)
+  if (!fetch)
+    return
+
+  const slugs = getInstalledSlugs()
+  const cache = new Map<string, Record<string, any>>()
+
+  const fetches = Object.entries(DEBUG_ENDPOINTS)
+    .filter(([slug]) => slugs.has(slug))
+    .map(async ([slug, endpoint]) => {
+      const data = await fetch(endpoint!).catch(() => null)
+      if (data)
+        cache.set(slug, data)
+    })
+
+  await Promise.all(fetches)
+  debugCache.value = cache
+}
+
+function evaluateModule(slug: NuxtSEOModule['slug'], ctx: DetectContext): ModuleChecklistResult | undefined {
+  const definitions = CHECKLIST_DEFINITIONS[slug]
+  if (!definitions?.length)
+    return undefined
+
+  const meta = MODULE_META[slug]
+  if (!meta)
+    return undefined
+
+  const data = debugCache.value.get(slug) || {}
+  const items: ChecklistItemResult[] = definitions.map((def) => {
+    const result = def.detect(data, ctx)
+    return {
+      id: def.id,
+      label: def.label,
+      description: def.description,
+      level: def.level,
+      docsUrl: def.docsUrl,
+      passed: result.passed,
+      detail: result.detail,
+    }
+  })
+
+  const requiredPending = items.filter(i => i.level === 'required' && !i.passed).length
+  const recommendedPending = items.filter(i => i.level === 'recommended' && !i.passed).length
+
+  return {
+    moduleSlug: slug,
+    moduleLabel: meta.label,
+    moduleIcon: meta.icon,
+    items,
+    requiredPending,
+    recommendedPending,
+    totalPending: requiredPending + recommendedPending,
+  }
+}
+
+const results = computed<ModuleChecklistResult[]>(() => {
+  const slugs = getInstalledSlugs()
+  const ctx: DetectContext = { installedModuleSlugs: slugs, debugData: debugCache.value }
+  const moduleResults: ModuleChecklistResult[] = []
+
+  // Evaluate in a consistent order
+  const orderedSlugs: NuxtSEOModule['slug'][] = ['site-config', 'robots', 'sitemap', 'og-image', 'schema-org', 'seo-utils']
+  for (const slug of orderedSlugs) {
+    if (!slugs.has(slug) && slug !== 'site-config')
+      continue
+    // Site config is always evaluated (it's the foundation)
+    const result = evaluateModule(slug, ctx)
+    if (result)
+      moduleResults.push(result)
+  }
+
+  return moduleResults
+})
+
+const summary = computed<ChecklistSummary>(() => {
+  let total = 0; let passed = 0; let requiredPending = 0; let recommendedPending = 0
+  for (const r of results.value) {
+    total += r.items.length
+    passed += r.items.filter(i => i.passed).length
+    requiredPending += r.requiredPending
+    recommendedPending += r.recommendedPending
+  }
+  return { total, passed, requiredPending, recommendedPending }
+})
+
+export function getModuleResult(slug: string): ModuleChecklistResult | undefined {
+  return results.value.find(r => r.moduleSlug === slug)
+}
+
+export function getModuleResultByName(devtoolsName: string): ModuleChecklistResult | undefined {
+  const slug = DEVTOOLS_NAME_TO_SLUG[devtoolsName]
+  if (!slug)
+    return undefined
+  return getModuleResult(slug)
+}
+
+export async function evaluate(): Promise<void> {
+  if (loading.value)
+    return
+  loading.value = true
+  await fetchDebugData().catch(() => {})
+  evaluated.value = true
+  loading.value = false
+}
+
+export function useSetupChecklist() {
+  return {
+    results,
+    summary,
+    loading,
+    evaluated,
+    evaluate,
+    getModuleResult,
+    getModuleResultByName,
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -37,7 +37,7 @@
     "ofetch": "^1.5.1",
     "shiki": "^4.0.2",
     "ufo": "^1.6.3",
-    "nuxtseo-shared": "0.8.2"
+    "nuxtseo-shared": "0.9.0"
   },
   "devDependencies": {
     "nuxt": "^4.4.2",