nuxtseo-layer-devtools 0.4.5 → 0.5.0

package/components/DevtoolsLayout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { fetchInstalledModules, showModuleSplash } from '../composables/modules'
+import { fetchInstalledModules, findModuleByName, showModuleSplash } from '../composables/modules'
 import { colorMode } from '../composables/rpc'
 import { hasProductionUrl, isConnected, isProductionMode, isStandalone, path, previewSource, productionUrl, standaloneUrl } from '../composables/state'
+import { useModuleUpdate } from '../composables/update-check'
 
 export interface DevtoolsNavItem {
   value: string
@@ -35,6 +36,10 @@ const emit = defineEmits<{
   refresh: []
 }>()
 
+const moduleInfo = computed(() => moduleName ? findModuleByName(moduleName) : undefined)
+const npmPackage = computed(() => moduleInfo.value?.npm)
+const { hasUpdate, latestVersion } = useModuleUpdate(npmPackage.value, version)
+
 // Fetch installed modules for the splash screen
 fetchInstalledModules()
 
@@ -127,12 +132,21 @@ function disconnectStandalone() {
                 </span>
                 <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50 transition-transform" :class="showModuleSplash ? 'rotate-180' : ''" />
               </button>
-              <UBadge
-                v-if="version"
-                class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
-              >
-                v{{ version }}
-              </UBadge>
+              <UTooltip v-if="version" :text="hasUpdate ? `Update available: v${latestVersion}` : `v${version}`">
+                <a
+                  :href="hasUpdate && npmPackage ? `https://npmjs.com/package/${npmPackage}` : undefined"
+                  :target="hasUpdate ? '_blank' : undefined"
+                  rel="noopener"
+                  class="version-badge-wrapper"
+                >
+                  <UBadge
+                    class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
+                  >
+                    v{{ version }}
+                  </UBadge>
+                  <span v-if="hasUpdate" class="update-dot" />
+                </a>
+              </UTooltip>
               <!-- Mode dropdown: embedded with production URL -->
               <div v-if="hasProductionUrl && !isStandalone" ref="modeDropdownRef" class="mode-dropdown-wrapper">
                 <button type="button" class="devtools-mode-btn" @click="modeDropdownOpen = !modeDropdownOpen">
@@ -279,6 +293,9 @@ function disconnectStandalone() {
           <DevtoolsLoading v-show="!showStandaloneSetup && loading" />
           <div v-show="!showStandaloneSetup && !loading">
             <slot />
+            <div v-if="activeTab === 'debug' && moduleName" class="devtools-troubleshooting-section">
+              <DevtoolsTroubleshooting :module-name="moduleName" :version="version" />
+            </div>
           </div>
         </main>
       </div>
@@ -289,6 +306,25 @@ function disconnectStandalone() {
 </template>
 
 <style scoped>
+.version-badge-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.update-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--seo-green);
+  border: 1.5px solid var(--color-surface);
+  pointer-events: none;
+}
+
 .devtools-module-switcher {
   display: flex;
   align-items: center;
@@ -418,4 +454,9 @@ function disconnectStandalone() {
 .standalone-path-input:focus {
   border-color: var(--seo-green);
 }
+
+.devtools-troubleshooting-section {
+  padding: 1.5rem 1rem 1rem;
+  max-width: 48rem;
+}
 </style>

package/components/DevtoolsModuleSplash.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useClipboard } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { moduleCatalog, showModuleSplash, switchToModule } from '../composables/modules'
 import { isConnected } from '../composables/state'
@@ -16,8 +16,28 @@ onClickOutside(panelRef, () => {
 const coreModules = computed(() => moduleCatalog.value.filter(m => !m.pro))
 const proModules = computed(() => moduleCatalog.value.filter(m => m.pro))
 
+const selectedForInstall = ref(new Set<string>())
+
+const installCommand = computed(() => {
+  if (!selectedForInstall.value.size)
+    return ''
+  const names = Array.from(selectedForInstall.value, name => moduleCatalog.value.find(m => m.name === name)?.npm).filter(Boolean)
+  return `npx nuxt module add ${names.join(' ')}`
+})
+
+const { copy, copied } = useClipboard({ source: installCommand })
+
 function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
-  if (!mod.installed || mod.name === props.currentModule)
+  if (!mod.installed) {
+    const set = new Set(selectedForInstall.value)
+    if (set.has(mod.name))
+      set.delete(mod.name)
+    else
+      set.add(mod.name)
+    selectedForInstall.value = set
+    return
+  }
+  if (mod.name === props.currentModule)
     return
   switchToModule(mod.name)
 }
@@ -50,10 +70,11 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
                 class="splash-module"
                 :class="{
                   'is-current': mod.name === currentModule,
-                  'is-unavailable': !mod.installed,
+                  'is-unavailable': !mod.installed && !selectedForInstall.has(mod.name) && mod.name !== currentModule,
+                  'is-selected-install': selectedForInstall.has(mod.name),
                   'is-switchable': mod.installed && mod.name !== currentModule && isConnected,
                 }"
-                :disabled="!mod.installed || mod.name === currentModule"
+                :disabled="mod.name === currentModule"
                 @click="handleModuleClick(mod)"
               >
                 <div class="splash-module-icon">
@@ -61,11 +82,26 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
                 </div>
                 <span class="splash-module-title">{{ mod.title }}</span>
                 <span v-if="mod.name === currentModule" class="splash-current-badge">Current</span>
-                <span v-else-if="!mod.installed" class="splash-not-installed">Not installed</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">
+                <div class="splash-install-code">
+                  <code>{{ installCommand }}</code>
+                </div>
+                <button type="button" class="splash-install-copy" @click="copy()">
+                  <UIcon :name="copied ? 'carbon:checkmark' : 'carbon:copy'" class="w-3.5 h-3.5" />
+                  {{ copied ? 'Copied' : 'Copy' }}
+                </button>
+              </div>
+            </div>
+          </Transition>
+
           <!-- Pro Section -->
           <div v-if="proModules.length" class="splash-section splash-pro-area">
             <div class="splash-section-label">
@@ -201,7 +237,7 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
 }
 
 .splash-section-dot--pro {
-  background: var(--seo-green);
+  background: oklch(65% 0.25 290);
 }
 
 /* Grid */
@@ -241,7 +277,29 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
 }
 
 .splash-module.is-unavailable {
-  opacity: 0.5;
+  opacity: 0.4;
+  cursor: pointer;
+}
+
+.splash-module.is-unavailable:hover {
+  opacity: 0.7;
+  background: var(--color-surface-elevated);
+}
+
+.splash-module.is-selected-install {
+  opacity: 1;
+  background: oklch(from var(--seo-green) l c h / 0.08);
+  cursor: pointer;
+}
+
+.splash-module.is-selected-install .splash-module-icon {
+  background: oklch(from var(--seo-green) l c h / 0.15);
+  color: var(--seo-green);
+}
+
+.splash-module.is-selected-install .splash-not-installed {
+  color: var(--seo-green);
+  font-weight: 600;
 }
 
 .splash-module-icon {
@@ -288,6 +346,8 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
 .splash-pro-badge {
   font-size: 9px !important;
   flex-shrink: 0;
+  color: oklch(65% 0.25 290) !important;
+  border-color: oklch(65% 0.25 290 / 0.3) !important;
 }
 
 /* Pro status / CTA */
@@ -298,7 +358,8 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   margin: 0.375rem 0.25rem 0;
   padding: 0.4rem 0.625rem;
   border-radius: var(--radius-md);
-  background: var(--color-surface-sunken);
+  background: oklch(65% 0.25 290 / 0.06);
+  border: 1px solid oklch(65% 0.25 290 / 0.12);
   font-size: 0.6875rem;
   color: var(--color-text-muted);
 }
@@ -315,7 +376,7 @@ function handleModuleClick(mod: typeof moduleCatalog.value[0]) {
   gap: 0.25rem;
   font-size: 0.6875rem;
   font-weight: 500;
-  color: var(--seo-green);
+  color: oklch(65% 0.25 290);
   text-decoration: none;
   transition: opacity 100ms;
 }
@@ -324,6 +385,71 @@ 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);
+}
+
+.splash-install {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  border: 1px solid oklch(from var(--seo-green) l c h / 0.2);
+}
+
+.splash-install-code {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.splash-install-code code {
+  font-size: 0.6875rem;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text);
+  white-space: nowrap;
+}
+
+.splash-install-copy {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--seo-green);
+  background: oklch(from var(--seo-green) l c h / 0.1);
+  cursor: pointer;
+  transition: background 100ms;
+}
+
+.splash-install-copy:hover {
+  background: oklch(from var(--seo-green) l c h / 0.18);
+}
+
+.install-bar-enter-active,
+.install-bar-leave-active {
+  transition: opacity 150ms ease, max-height 150ms ease;
+  overflow: hidden;
+}
+
+.install-bar-enter-from,
+.install-bar-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.install-bar-enter-to,
+.install-bar-leave-from {
+  max-height: 4rem;
+}
+
 /* Footer */
 .splash-footer {
   display: flex;

package/components/DevtoolsPlaygrounds.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { moduleCatalog } from '../composables/modules'
+
+const { moduleName } = defineProps<{
+  moduleName: string
+}>()
+
+const keyLabels: Record<string, string> = {
+  'basic': 'Basic',
+  'i18n': 'Nuxt I18n',
+  'content': 'Nuxt Content',
+  'basic-satori': 'Basic (Satori)',
+  'basic-takumi': 'Basic (Takumi)',
+  'dynamic-urls': 'Dynamic URLs',
+  'custom-rules': 'Custom Rules',
+  'broken-links': 'Broken Links',
+  'skip-inspection': 'Skip Inspection',
+  'breadcrumbs': 'Breadcrumbs',
+  'meta-tags': 'Meta Tags',
+  'blog': 'Blog',
+  'e-commerce': 'E-Commerce',
+  'env-driven': 'Env Driven',
+  'multi-site': 'Multi Site',
+}
+
+const CAMEL_RE = /([a-z])([A-Z])/g
+const SEP_RE = /[-_]/g
+const WORD_RE = /\b\w/g
+
+function humanizeKey(key: string) {
+  if (keyLabels[key])
+    return keyLabels[key]
+  return key
+    .replace(CAMEL_RE, '$1 $2')
+    .replace(SEP_RE, ' ')
+    .replace(WORD_RE, c => c.toUpperCase())
+}
+
+const playgrounds = computed(() => {
+  const mod = moduleCatalog.value.find(m => m.name === moduleName)
+  if (!mod?.playgrounds)
+    return []
+  return Object.entries(mod.playgrounds).map(([key, url]) => ({
+    key,
+    label: humanizeKey(key),
+    url,
+  }))
+})
+</script>
+
+<template>
+  <div v-if="playgrounds.length" class="playgrounds-list">
+    <a
+      v-for="pg in playgrounds"
+      :key="pg.key"
+      :href="pg.url"
+      target="_blank"
+      rel="noopener"
+      class="playground-btn"
+    >
+      <UIcon name="carbon:launch" class="w-3 h-3 shrink-0 opacity-50" />
+      <span>{{ pg.label }}</span>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.playgrounds-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.playground-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  text-decoration: none;
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+
+.playground-btn:hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+  border-color: var(--color-neutral-400);
+}
+
+.dark .playground-btn:hover {
+  border-color: var(--color-neutral-600);
+}
+</style>

package/components/DevtoolsTroubleshooting.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { installedModules, moduleCatalog } from '../composables/modules'
+import { detectPackageManager, pmCommands } from '../composables/package-manager'
+import { useModuleUpdate } from '../composables/update-check'
+
+const { moduleName, version } = defineProps<{
+  moduleName: string
+  version?: string
+}>()
+
+detectPackageManager()
+
+const nuxtApp = useNuxtApp()
+const nuxtVersion = nuxtApp.versions?.nuxt ?? 'unknown'
+const vueVersion = nuxtApp.versions?.vue ?? 'unknown'
+
+const moduleInfo = computed(() => moduleCatalog.value.find(m => m.name === moduleName))
+const npmPackage = computed(() => moduleInfo.value?.npm)
+const { latestVersion, hasUpdate } = useModuleUpdate(npmPackage.value, version)
+
+const githubNewIssueUrl = computed(() => {
+  if (!moduleInfo.value?.repo)
+    return ''
+  return `https://github.com/${moduleInfo.value.repo}/issues/new`
+})
+
+// Build environment info for copy
+const envInfo = computed(() => {
+  const lines: string[] = []
+  lines.push('### Environment')
+  lines.push('')
+
+  // Current module
+  if (version)
+    lines.push(`- **${npmPackage.value}**: v${version}${hasUpdate.value ? ` (latest: v${latestVersion.value})` : ''}`)
+
+  // Other installed Nuxt SEO modules
+  for (const mod of installedModules.value) {
+    if (mod.name === moduleName)
+      continue
+    const catalogEntry = moduleCatalog.value.find(m => m.name === mod.name)
+    if (catalogEntry?.npm)
+      lines.push(`- **${catalogEntry.npm}**: installed`)
+  }
+
+  lines.push('')
+  lines.push(`- **Nuxt**: v${nuxtVersion}`)
+  lines.push(`- **Vue**: v${vueVersion}`)
+
+  return lines.join('\n')
+})
+
+const { copy: copyEnv, copied: envCopied } = useClipboard({ source: envInfo })
+
+const steps = computed(() => {
+  const pm = pmCommands()
+  const updateCmd = [pm.update, pm.dedupe].filter(Boolean).join(' && ')
+  return [
+    {
+      icon: 'carbon:reset',
+      title: 'Clear generated files and update dependencies',
+      description: 'Delete your .nuxt directory, update packages, then restart.',
+      codes: [
+        `rm -rf .nuxt && ${pm.exec} nuxi dev`,
+        updateCmd,
+      ],
+    },
+    {
+      icon: 'carbon:debug',
+      title: 'Enable debug mode',
+      description: 'Add debug: true to your module config for verbose logging.',
+      codes: [],
+    },
+    {
+      icon: 'carbon:code',
+      title: 'Create a minimal reproduction',
+      description: 'Use a StackBlitz playground to isolate the issue. This helps maintainers debug quickly.',
+      codes: [],
+    },
+    {
+      icon: 'carbon:flag',
+      title: 'Report the issue',
+      description: 'Open a GitHub issue with your reproduction link and environment info.',
+      codes: [],
+    },
+  ]
+})
+</script>
+
+<template>
+  <DevtoolsSection icon="carbon:help" text="Troubleshooting" description="Steps to diagnose and report issues">
+    <div class="troubleshoot-steps">
+      <div v-for="(step, i) of steps" :key="i" class="troubleshoot-step">
+        <div class="troubleshoot-step-num">
+          {{ i + 1 }}
+        </div>
+        <div class="troubleshoot-step-content">
+          <div class="troubleshoot-step-title">
+            <UIcon :name="step.icon" class="w-3.5 h-3.5 text-[var(--color-text-muted)]" />
+            {{ step.title }}
+          </div>
+          <div class="troubleshoot-step-desc">
+            {{ step.description }}
+          </div>
+          <code v-for="code of step.codes" :key="code" class="troubleshoot-code">{{ code }}</code>
+        </div>
+      </div>
+    </div>
+
+    <!-- Playgrounds for repro -->
+    <div class="troubleshoot-section">
+      <div class="troubleshoot-section-label">
+        <UIcon name="carbon:game-console" class="w-3.5 h-3.5" />
+        Playgrounds for reproduction
+      </div>
+      <DevtoolsPlaygrounds :module-name="moduleName" />
+    </div>
+
+    <!-- Environment info -->
+    <div class="troubleshoot-section">
+      <div class="troubleshoot-section-header">
+        <div class="troubleshoot-section-label">
+          <UIcon name="carbon:information" class="w-3.5 h-3.5" />
+          Environment info
+        </div>
+        <button type="button" class="troubleshoot-copy-btn" @click="copyEnv()">
+          <UIcon :name="envCopied ? 'carbon:checkmark' : 'carbon:copy'" class="w-3 h-3" />
+          {{ envCopied ? 'Copied' : 'Copy for issue' }}
+        </button>
+      </div>
+      <div class="troubleshoot-env">
+        <div class="troubleshoot-env-row">
+          <span class="troubleshoot-env-label">{{ npmPackage }}</span>
+          <span class="troubleshoot-env-value">
+            v{{ version || 'unknown' }}
+            <UBadge v-if="hasUpdate" size="xs" color="warning" variant="subtle">
+              v{{ latestVersion }} available
+            </UBadge>
+          </span>
+        </div>
+        <template v-for="mod of installedModules" :key="mod.name">
+          <div v-if="mod.name !== moduleName" class="troubleshoot-env-row">
+            <span class="troubleshoot-env-label">{{ moduleCatalog.find(m => m.name === mod.name)?.npm || mod.name }}</span>
+            <span class="troubleshoot-env-value">installed</span>
+          </div>
+        </template>
+        <div class="troubleshoot-env-row">
+          <span class="troubleshoot-env-label">nuxt</span>
+          <span class="troubleshoot-env-value">v{{ nuxtVersion }}</span>
+        </div>
+        <div class="troubleshoot-env-row">
+          <span class="troubleshoot-env-label">vue</span>
+          <span class="troubleshoot-env-value">v{{ vueVersion }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Report button -->
+    <a
+      v-if="githubNewIssueUrl"
+      :href="githubNewIssueUrl"
+      target="_blank"
+      rel="noopener"
+      class="troubleshoot-report-btn"
+    >
+      <UIcon name="simple-icons:github" class="w-3.5 h-3.5" />
+      Open an issue on GitHub
+      <UIcon name="carbon:arrow-up-right" class="w-3 h-3 opacity-40 ml-auto" />
+    </a>
+  </DevtoolsSection>
+</template>
+
+<style scoped>
+.troubleshoot-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.troubleshoot-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+.troubleshoot-step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+}
+
+.troubleshoot-step-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.troubleshoot-step-title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.troubleshoot-step-desc {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-top: 0.125rem;
+}
+
+.troubleshoot-code {
+  display: inline-block;
+  margin-top: 0.375rem;
+  margin-right: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  font-family: var(--font-mono, monospace);
+  font-size: 0.6875rem;
+  color: var(--color-text);
+}
+
+.troubleshoot-section {
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.troubleshoot-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.troubleshoot-section-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.troubleshoot-copy-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--seo-green);
+  background: oklch(from var(--seo-green) l c h / 0.1);
+  cursor: pointer;
+  transition: background 100ms;
+}
+
+.troubleshoot-copy-btn:hover {
+  background: oklch(from var(--seo-green) l c h / 0.18);
+}
+
+.troubleshoot-env {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.troubleshoot-env-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.3rem 0.5rem;
+  background: var(--color-surface-elevated);
+}
+
+.troubleshoot-env-label {
+  font-size: 0.6875rem;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text-muted);
+}
+
+.troubleshoot-env-value {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.6875rem;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text);
+}
+
+.troubleshoot-report-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  border: 1px solid var(--color-border);
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+
+.troubleshoot-report-btn:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text);
+  border-color: var(--color-neutral-400);
+}
+
+.dark .troubleshoot-report-btn:hover {
+  border-color: var(--color-neutral-600);
+}
+</style>

package/composables/modules.ts

@@ -1,5 +1,7 @@
 import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
+import type { NuxtSEOModule } from 'nuxtseo-shared/const'
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import { modules as seoModules } from 'nuxtseo-shared/const'
 import { computed, ref } from 'vue'
 import { isConnected } from './state'
 
@@ -17,22 +19,51 @@ export interface SeoModuleCatalogEntry {
   icon: string
   installed: boolean
   route?: string
-  npmUrl: string
+  npm: string
+  repo: string
   pro?: boolean
+  playgrounds?: Record<string, string>
 }
 
-// Full catalog of all Nuxt SEO modules for the splash screen
-const MODULE_CATALOG: Omit<SeoModuleCatalogEntry, 'installed' | 'route'>[] = [
-  { name: 'nuxt-robots', title: 'Robots', description: 'Manage robots.txt and meta robots', icon: 'carbon:bot', npmUrl: 'https://npmjs.com/package/@nuxtjs/robots' },
-  { name: 'sitemap', title: 'Sitemap', description: 'Generate XML sitemaps', icon: 'carbon:load-balancer-application', npmUrl: 'https://npmjs.com/package/@nuxtjs/sitemap' },
-  { name: 'nuxt-og-image', title: 'OG Image', description: 'Generate dynamic Open Graph images', icon: 'carbon:image-search', npmUrl: 'https://npmjs.com/package/nuxt-og-image' },
-  { name: 'nuxt-schema-org', title: 'Schema.org', description: 'Add structured data with Schema.org', icon: 'carbon:chart-relationship', npmUrl: 'https://npmjs.com/package/nuxt-schema-org' },
-  { name: 'nuxt-seo-utils', title: 'SEO Utils', description: 'Core SEO utilities and meta tags', icon: 'carbon:search-locate', npmUrl: 'https://npmjs.com/package/nuxt-seo-utils' },
-  { name: 'nuxt-link-checker', title: 'Link Checker', description: 'Find and fix broken links', icon: 'carbon:cloud-satellite-link', npmUrl: 'https://npmjs.com/package/nuxt-link-checker' },
-  { name: 'nuxt-site-config', title: 'Site Config', description: 'Shared site configuration', icon: 'carbon:settings', npmUrl: 'https://npmjs.com/package/nuxt-site-config' },
-  { name: 'nuxt-ai-ready', title: 'AI Ready', description: 'Optimize for AI search engines', icon: 'carbon:machine-learning-model', npmUrl: 'https://npmjs.com/package/nuxt-ai-ready', pro: true },
-  { name: 'nuxt-skew-protection', title: 'Skew Protection', description: 'Protect against deployment skew', icon: 'carbon:shield-check', npmUrl: 'https://npmjs.com/package/nuxt-skew-protection', pro: true },
-]
+// Map slug to the internal module name used by devtools routing
+const SLUG_TO_MODULE_NAME: Record<string, string> = {
+  'robots': 'nuxt-robots',
+  'sitemap': 'sitemap',
+  'og-image': 'nuxt-og-image',
+  'schema-org': 'nuxt-schema-org',
+  'seo-utils': 'nuxt-seo-utils',
+  'link-checker': 'nuxt-link-checker',
+  'site-config': 'nuxt-site-config',
+  'ai-ready': 'nuxt-ai-ready',
+  'skew-protection': 'nuxt-skew-protection',
+  'ai-kit': 'nuxt-ai-kit',
+  'nuxt-seo': 'nuxt-seo',
+}
+
+const ICONIFY_RE = /^i-([^-]+)-/
+
+function toIconify(icon: string): string {
+  // Convert i-carbon-bot -> carbon:bot
+  return icon.replace(ICONIFY_RE, '$1:')
+}
+
+function moduleToCatalogEntry(mod: NuxtSEOModule): Omit<SeoModuleCatalogEntry, 'installed' | 'route'> {
+  return {
+    name: SLUG_TO_MODULE_NAME[mod.slug] || mod.slug,
+    title: mod.label,
+    description: mod.description,
+    icon: toIconify(mod.icon),
+    npm: mod.npm,
+    repo: mod.repo,
+    pro: mod.pro,
+    playgrounds: mod.playgrounds,
+  }
+}
+
+// Exclude the meta 'nuxt-seo' entry from the catalog, it's not a standalone devtools module
+const MODULE_CATALOG = seoModules
+  .filter(m => m.slug !== 'nuxt-seo')
+  .map(moduleToCatalogEntry)
 
 export const installedModules = ref<SeoModuleInfo[]>([])
 export const showModuleSplash = ref(false)
@@ -48,6 +79,10 @@ export const moduleCatalog = computed<SeoModuleCatalogEntry[]>(() => {
   })
 })
 
+export function findModuleByName(moduleName: string): SeoModuleCatalogEntry | undefined {
+  return moduleCatalog.value.find(m => m.name === moduleName)
+}
+
 export function fetchInstalledModules(): void {
   const inIframe = window.parent !== window
   if (!inIframe)

package/composables/package-manager.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+export type PackageManager = 'pnpm' | 'yarn' | 'bun' | 'npm'
+
+export const packageManager = ref<PackageManager>('npm')
+
+const PM_COMMANDS: Record<PackageManager, { run: string, exec: string, update: string, dedupe: string }> = {
+  pnpm: { run: 'pnpm', exec: 'pnpm dlx', update: 'pnpm update', dedupe: 'pnpm dedupe' },
+  yarn: { run: 'yarn', exec: 'yarn dlx', update: 'yarn upgrade', dedupe: 'yarn dedupe' },
+  bun: { run: 'bun', exec: 'bunx', update: 'bun update', dedupe: '' },
+  npm: { run: 'npm', exec: 'npx', update: 'npm update', dedupe: 'npm dedupe' },
+}
+
+export function pmCommands() {
+  return PM_COMMANDS[packageManager.value]
+}
+
+// Detect by checking lock files via Vite's @fs route (dev only)
+const LOCK_FILES: [string, PackageManager][] = [
+  ['pnpm-lock.yaml', 'pnpm'],
+  ['yarn.lock', 'yarn'],
+  ['bun.lockb', 'bun'],
+]
+
+let detected = false
+export function detectPackageManager() {
+  if (detected)
+    return
+  detected = true
+
+  // Check each lock file with a HEAD request
+  for (const [file, pm] of LOCK_FILES) {
+    fetch(`/${file}`, { method: 'HEAD' })
+      .then((r) => {
+        if (r.ok) {
+          packageManager.value = pm
+        }
+      })
+      .catch(() => {})
+  }
+}

package/composables/update-check.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef } from 'vue'
+import { computed, ref } from 'vue'
+
+export interface ModuleUpdateInfo {
+  currentVersion: string
+  latestVersion: string
+  hasUpdate: boolean
+}
+
+const updateCache = ref<Record<string, ModuleUpdateInfo>>({})
+
+export function useModuleUpdate(npmPackage: string | undefined, currentVersion: string | undefined): { hasUpdate: ComputedRef<boolean>, latestVersion: ComputedRef<string | undefined>, info: ComputedRef<ModuleUpdateInfo | undefined> } {
+  const info = computed(() => {
+    if (!npmPackage || !currentVersion)
+      return undefined
+    return updateCache.value[npmPackage]
+  })
+
+  const hasUpdate = computed(() => info.value?.hasUpdate ?? false)
+  const latestVersion = computed(() => info.value?.latestVersion)
+
+  if (npmPackage && currentVersion && !updateCache.value[npmPackage]) {
+    fetch(`https://registry.npmjs.org/${npmPackage}/latest`)
+      .then(r => r.json())
+      .then((data) => {
+        const latest = data.version as string
+        if (!latest)
+          return
+        updateCache.value[npmPackage] = {
+          currentVersion,
+          latestVersion: latest,
+          hasUpdate: latest !== currentVersion,
+        }
+      })
+      .catch(() => {})
+  }
+
+  return { hasUpdate, latestVersion, info }
+}

package/error.vue

@@ -5,6 +5,7 @@ const { error } = defineProps<{
   error: NuxtError
 }>()
 
+// eslint-disable-next-line no-control-regex
 const ANSI_RE = /\u001B\[[0-9;]*m/g
 
 const stack = computed(() => {

package/package.json

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

package/skills/devtools-layer-skilld/SKILL.md

@@ -9,6 +9,14 @@ Shared Nuxt layer providing components, composables, and a design system for all
 
 **Source:** `packages/devtools-layer/` (published as `nuxtseo-layer-devtools`)
 
+## Available Libraries
+
+The layer registers these Nuxt modules, so all consumers have them available without extra config:
+
+- **`@nuxt/ui`** (v4): Full component library. Use `UButton`, `UBadge`, `UIcon`, `UInput`, `UTooltip`, `UApp`, etc. freely in devtools clients. Default variants configured via `app.config.ts` (primary: green, buttons: ghost/neutral/sm, badges: subtle/neutral/xs, tooltips: zero delay).
+- **`@vueuse/nuxt`**: All VueUse composables auto imported.
+- **Shiki**: Syntax highlighting via the layer's `loadShiki` / `useRenderCodeHighlight` composables.
+
 ## Architecture
 
 1. **nuxtseo-shared/devtools** (`packages/shared/src/devtools.ts`): `setupDevToolsUI()` registers iframe tab, handles dev proxy + production sirv
@@ -20,13 +28,14 @@ Shared Nuxt layer providing components, composables, and a design system for all
 1. ALWAYS extend `nuxtseo-layer-devtools` in client/nuxt.config.ts
 2. ALWAYS create `client/composables/rpc.ts` that calls `useDevtoolsConnection()`
 3. ALWAYS use layer components over custom HTML: `DevtoolsSection` not custom details, `DevtoolsKeyValue` not custom tables, `DevtoolsSnippet` not custom code blocks. Use `KeyValueItem.code` for inline code rendering instead of separate snippets
-4. NEVER add custom CSS that duplicates what the layer provides
-5. NEVER enable SSR in the client (it runs in an iframe)
-6. ALWAYS disable the module itself in the client nuxt config (e.g. `robots: false`)
-7. ALWAYS guard devtools setup with `if (nuxt.options.dev)` in module.ts
-8. ALWAYS use `useAsyncData` with `watch: [refreshTime]` for reactive data fetching
-9. Use Carbon icons consistently (prefix: `carbon:`)
-10. Debug server routes ONLY registered in dev mode
+4. ALWAYS use `@nuxt/ui` components (`UButton`, `UInput`, `UBadge`, `UIcon`, `UTooltip`, etc.) for interactive elements. Never add a custom button, input, badge, or tooltip when a Nuxt UI component exists.
+5. NEVER add custom CSS that duplicates what the layer or Nuxt UI provides
+6. NEVER enable SSR in the client (it runs in an iframe)
+7. ALWAYS disable the module itself in the client nuxt config (e.g. `robots: false`)
+8. ALWAYS guard devtools setup with `if (nuxt.options.dev)` in module.ts
+9. ALWAYS use `useAsyncData` with `watch: [refreshTime]` for reactive data fetching
+10. Use Carbon icons consistently (prefix: `carbon:`)
+11. Debug server routes ONLY registered in dev mode
 
 ## Required File Structure
 
@@ -99,7 +108,7 @@ watch(data, () => {
 </script>
 
 <template>
-  <DevtoolsLayout v-model:active-tab="activeTab" title="Name" icon="carbon:icon" :nav-items="navItems" github-url="..." :loading @refresh="refreshSources">
+  <DevtoolsLayout v-model:active-tab="activeTab" title="Name" icon="carbon:icon" module-name="nuxt-<module>" :nav-items="navItems" github-url="..." :loading @refresh="refreshSources">
     <DevtoolsLoading v-if="loading" />
     <template v-else-if="activeTab === 'overview'">
       <!-- content -->

package/skills/devtools-layer-skilld/reference.md

@@ -1,16 +1,41 @@
 # Devtools Layer API Reference
 
+## Nuxt UI (available to all consumers)
+
+The layer registers `@nuxt/ui` v4, so all Nuxt UI components are auto imported. Use them freely:
+
+- `UButton`, `UInput`, `UTextarea`, `USelect`, `UCheckbox`, `UToggle`, `URadio`
+- `UBadge`, `UIcon`, `UTooltip`, `UPopover`, `UModal`, `UDrawer`
+- `UApp` (wraps the root, already used by `DevtoolsLayout`)
+- `UCard`, `UAccordion`, `UTabs`, `UDropdownMenu`
+
+Default variants via `app.config.ts`: primary green, neutral neutral. Buttons: ghost/neutral/sm. Badges: subtle/neutral/xs. Tooltips: zero delay.
+
+Icons use the Iconify format. Convention: `carbon:*` prefix for consistency.
+
 ## Components (auto imported)
 
 ### Layout & Structure
 
 | Component | Props | Key Slots | Purpose |
 |---|---|---|---|
-| `DevtoolsLayout` | `title`, `icon`, `version?`, `navItems`, `githubUrl`, `loading?` | `actions`, default | Main shell with header, tabs, refresh |
-| `DevtoolsPanel` | `title?` | `header`, `actions`, default | Card container with close button |
+| `DevtoolsLayout` | `title`, `icon`, `version?`, `moduleName?`, `npmPackage?`, `navItems: DevtoolsNavItem[]`, `githubUrl`, `loading?` | `actions`, default | Main shell with header, tabs, refresh, module splash, standalone mode, production mode. Pass `npmPackage` to enable update check indicator on version badge. |
+| `DevtoolsPanel` | `title?`, `icon?`, `closable?` (false), `padding?` (true) | `header`, `actions`, default | Card container. Emits `close` when closable button clicked. |
 | `DevtoolsToolbar` | `variant` ('default'\|'minimal') | default | Horizontal toolbar strip |
 | `DevtoolsSection` | `icon?`, `text?`, `description?`, `collapse?`, `open?`, `padding?` | `text`, `description`, `actions`, `details`, default, `footer` | Collapsible details/summary block |
 
+### DevtoolsNavItem Interface
+
+```ts
+interface DevtoolsNavItem {
+  value: string
+  to?: string // If set, renders as NuxtLink (route navigation)
+  icon: string
+  label: string
+  devOnly?: boolean // Hidden in production mode
+}
+```
+
 ### Feedback & States
 
 | Component | Props | Key Slots | Purpose |
@@ -31,6 +56,16 @@
 | `DevtoolsSnippet` | `label?`, `code`, `lang` ('js'\|'json'\|'xml') | `header` | Code block with header, copy, max 300px scroll |
 | `OCodeBlock` | `code`, `lang`, `lines?`, `transformRendered?` | none | Shiki syntax highlighted pre |
 | `DevtoolsDocs` | `url` | none | Full height iframe |
+| `DevtoolsPlaygrounds` | `moduleName` | none | StackBlitz playground links with UTabs for variant selection. Reusable standalone or inside other components. Shows nothing if module has no playgrounds. |
+| `DevtoolsTroubleshooting` | `moduleName`, `version?` | none | Guided troubleshooting section: clear .nuxt, debug mode, create repro (with playgrounds), report issue. Shows all installed module versions with copy for GitHub issues. |
+
+### Module Navigation
+
+| Component | Props | Key Slots | Purpose |
+|---|---|---|---|
+| `DevtoolsModuleSplash` | `currentModule?` | none | Modal overlay showing all Nuxt SEO modules with install status, switch between modules, Pro section |
+| `DevtoolsStandaloneConnect` | none | none | Connection form for standalone mode (outside devtools iframe) |
+| `NuxtSeoLogo` | none | none | Nuxt SEO brand logo SVG |
 
 ### KeyValueItem Interface
 
@@ -73,6 +108,11 @@ const host: ComputedRef<string>
 const refreshSources: () => void // Debounced 200ms
 const slowRefreshSources: () => void // Debounced 1000ms
 
+// Standalone mode (running outside devtools iframe)
+const standaloneUrl: Ref<string> // localStorage persisted
+const isConnected: Ref<boolean>
+const isStandalone: ComputedRef<boolean> // true when not connected but has standaloneUrl
+
 // Production preview mode
 const previewSource: Ref<'local' | 'production'> // localStorage persisted
 const productionUrl: Ref<string>
@@ -80,6 +120,21 @@ const hasProductionUrl: ComputedRef<boolean>
 const isProductionMode: ComputedRef<boolean>
 ```
 
+### Modules (`composables/modules.ts`)
+
+```ts
+interface SeoModuleInfo { name: string, title: string, icon: string, route: string }
+interface SeoModuleCatalogEntry extends SeoModuleInfo { description: string, installed: boolean, npm: string, pro?: boolean, playgrounds?: Record<string, string> }
+
+const installedModules: Ref<SeoModuleInfo[]>
+const showModuleSplash: Ref<boolean>
+const moduleCatalog: ComputedRef<SeoModuleCatalogEntry[]>
+
+function fetchInstalledModules(): void // Called by DevtoolsLayout automatically
+function findModuleByName(moduleName: string): SeoModuleCatalogEntry | undefined // Look up module info by name
+function switchToModule(moduleName: string): void // Navigate devtools iframe to another module
+```
+
 ### Shiki (`composables/shiki.ts`)
 
 ```ts
@@ -93,9 +148,21 @@ function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): ComputedR
 function useCopy(timeout?: number): { copy: (text: string) => Promise<void>, copied: Ref<boolean> }
 ```
 
+### Update Check (`composables/update-check.ts`)
+
+```ts
+function useModuleUpdate(npmPackage: string | undefined, currentVersion: string | undefined): {
+  hasUpdate: ComputedRef<boolean>
+  latestVersion: ComputedRef<string | undefined>
+  info: ComputedRef<ModuleUpdateInfo | undefined>
+}
+```
+
+Fetches latest version from npm registry. Results are cached per package name. Already integrated into `DevtoolsLayout` when `npmPackage` prop is provided.
+
 ## CSS Design System
 
-Do NOT add custom CSS unless layer components are insufficient.
+Do NOT add custom CSS unless layer components or Nuxt UI are insufficient.
 
 ### Semantic Variables
 
@@ -105,10 +172,6 @@ Do NOT add custom CSS unless layer components are insufficient.
 
 `.glass` (backdrop blur), `.gradient-bg` (green/blue radials), `.card` (elevated hover), `.code-block`, `.status-enabled/.status-disabled`, `.link-external` (with arrow), `.hint-callout`, `.panel-grids`, `.animate-fade-up/.scale-in/.spin`, `.stagger-children`, `.devtools-main-content` (max-width 80rem centered container)
 
-### Nuxt UI Defaults (app.config.ts)
-
-Primary: green, Neutral: neutral. Buttons: ghost/neutral/sm. Badges: subtle/neutral/xs. Tooltips: zero delay.
-
 ## Common Patterns
 
 ### Production Mode Data Fetching