feat(web): add URL parameter support for auto-opening plugin install modal (#8)

* feat(web): add URL parameter support for auto-opening plugin install modal

Enable direct linking to specific plugins with automatic install modal display.
Users can now share URLs like ?plugin=nanobanana or ?install=grafana to show
a specific plugin's installation instructions.

Features:
- URL query parameter detection (?plugin= or ?install=)
- Auto-scroll to target plugin card
- Auto-open install modal with smooth animation
- 500ms delay for natural UX after scroll completion

Changes:
- apps/web/app/pages/index.vue: Add route query parameter handling and auto-scroll logic
- apps/web/app/components/PluginCard.vue: Add autoOpenModal prop and watcher

* refactor(web): improve error handling and add VueUse integration

Apply critical fixes from PR review to enhance reliability and user experience.

Changes:
- Add VueUse useTimeoutFn import for proper timer management
- Fix Badge color type safety with proper union types
- Implement retry logic with up to 5 attempts (200ms intervals)
- Add user feedback toast for persistent navigation failures
- Store and cleanup timer references to prevent memory leaks
- Improve network error handling with detailed logging
- Separate HTTP errors from JSON parsing errors
- Remove noisy error logs during normal loading

Error Handling Improvements:
- Silent retries during ref loading (no error spam)
- Only log errors on final failure after max retries
- Add onBeforeUnmount cleanup for timer references
- Guard async callbacks with component lifecycle checks

Type Safety:
- Badge.color now properly typed as Nuxt UI color union
- Prevents TypeScript compilation errors

Fixes:
- Memory leaks from uncleaned timers
- Silent failures with no user feedback
- Noisy error logs during normal page load
- Race conditions during component unmount

Author: amondnet

apps/web/app/components/PluginCard.vue

@@ -40,46 +40,17 @@
             </UBadge>
           </div>
         </div>
-        <div v-if="hasContext || hasMcpServer || authorName" class="flex items-center gap-2">
+        <div v-if="badges.length > 0" class="flex items-center gap-2">
           <UBadge
-            v-if="authorName === 'Google'"
+            v-for="badge in badges"
+            :key="badge.key"
             variant="soft"
-            color="warning"
+            :color="badge.color"
             size="sm"
-            title="Developed by Google"
+            :title="badge.title"
           >
-            <UIcon name="i-simple-icons-google" class="mr-1" />
-            Google
-          </UBadge>
-          <UBadge
-            v-if="authorName === 'Anthropic'"
-            variant="soft"
-            color="error"
-            size="sm"
-            title="Developed by Anthropic"
-          >
-            <UIcon name="i-simple-icons-anthropic" class="mr-1" />
-            Anthropic
-          </UBadge>
-          <UBadge
-            v-if="hasContext"
-            variant="soft"
-            color="info"
-            size="sm"
-            title="Includes Context File"
-          >
-            <UIcon name="i-heroicons-document-text" class="mr-1" />
-            Context
-          </UBadge>
-          <UBadge
-            v-if="hasMcpServer"
-            variant="soft"
-            color="primary"
-            size="sm"
-            title="Includes MCP Server"
-          >
-            <UIcon name="i-heroicons-server" class="mr-1" />
-            MCP
+            <UIcon :name="badge.icon" class="mr-1" />
+            {{ badge.label }}
           </UBadge>
         </div>
       </div>
@@ -140,6 +111,8 @@
 </template>
 
 <script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+
 interface PluginSource {
   source: 'github'
   repo: string
@@ -163,9 +136,12 @@ interface PluginMetadata {
   [key: string]: any
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   plugin: Plugin
-}>()
+  autoOpenModal?: boolean
+}>(), {
+  autoOpenModal: false
+})
 
 const isModalOpen = ref(false)
 const pluginMetadata = ref<PluginMetadata | null>(null)
@@ -183,11 +159,42 @@ const fetchPluginMetadata = async () => {
     const url = `https://raw.githubusercontent.com/${props.plugin.source.repo}/main/.claude-plugin/plugin.json`
     const response = await fetch(url)
 
-    if (response.ok) {
+    if (!response.ok) {
+      // Log specific HTTP error
+      console.error(`Failed to fetch plugin metadata: HTTP ${response.status}`, {
+        plugin: props.plugin.name,
+        repo: props.plugin.source.repo,
+        status: response.status,
+        statusText: response.statusText
+      })
+
+      // Handle specific error cases
+      if (response.status === 404) {
+        console.warn(`Plugin metadata not found for ${props.plugin.name}`)
+        // 404 is common for plugins without metadata - don't show toast
+      } else if (response.status === 403) {
+        console.error(`Access denied to plugin metadata for ${props.plugin.name}`)
+      }
+      return
+    }
+
+    // Parse JSON with error handling
+    try {
       pluginMetadata.value = await response.json()
+    } catch (parseErr) {
+      console.error('Failed to parse plugin metadata JSON:', {
+        plugin: props.plugin.name,
+        error: parseErr instanceof Error ? parseErr.message : String(parseErr)
+      })
+      // Don't show toast - this is a plugin configuration issue
     }
   } catch (err) {
-    console.error('Failed to fetch plugin metadata:', err)
+    // Network-level errors (connection failed, CORS, etc.)
+    console.error('Network error fetching plugin metadata:', {
+      plugin: props.plugin.name,
+      repo: props.plugin.source.repo,
+      error: err instanceof Error ? err.message : String(err)
+    })
   } finally {
     loading.value = false
   }
@@ -203,17 +210,16 @@ const displayDescription = computed(() => {
   return props.plugin.description || pluginMetadata.value?.description || 'No description available'
 })
 
-// Computed author - prefer marketplace.json, fallback to metadata
-const displayAuthor = computed(() => {
-  const author = props.plugin.author || pluginMetadata.value?.author
-  // Handle both string and object formats
+// Extract author name from either marketplace.json or fetched metadata
+// Handles both string and object formats
+function getAuthorName(author: string | { name?: string } | undefined): string | undefined {
   return typeof author === 'string' ? author : author?.name
-})
+}
 
-// Get author name for badge display
-const authorName = computed(() => {
+// Computed author - prefer marketplace.json, fallback to metadata
+const displayAuthor = computed(() => {
   const author = props.plugin.author || pluginMetadata.value?.author
-  return typeof author === 'string' ? author : author?.name
+  return getAuthorName(author)
 })
 
 // Computed license - from fetched metadata
@@ -231,6 +237,61 @@ const hasContext = computed(() => {
   return !!pluginMetadata.value?.contextFileName
 })
 
+// Consolidated badges configuration
+interface Badge {
+  key: string
+  icon: string
+  label: string
+  color: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  title: string
+}
+
+const badges = computed<Badge[]>(() => {
+  const badgeList: Badge[] = []
+
+  // Author badges
+  if (displayAuthor.value === 'Google') {
+    badgeList.push({
+      key: 'google',
+      icon: 'i-simple-icons-google',
+      label: 'Google',
+      color: 'warning',
+      title: 'Developed by Google'
+    })
+  } else if (displayAuthor.value === 'Anthropic') {
+    badgeList.push({
+      key: 'anthropic',
+      icon: 'i-simple-icons-anthropic',
+      label: 'Anthropic',
+      color: 'error',
+      title: 'Developed by Anthropic'
+    })
+  }
+
+  // Feature badges
+  if (hasContext.value) {
+    badgeList.push({
+      key: 'context',
+      icon: 'i-heroicons-document-text',
+      label: 'Context',
+      color: 'info',
+      title: 'Includes Context File'
+    })
+  }
+
+  if (hasMcpServer.value) {
+    badgeList.push({
+      key: 'mcp',
+      icon: 'i-heroicons-server',
+      label: 'MCP',
+      color: 'primary',
+      title: 'Includes MCP Server'
+    })
+  }
+
+  return badgeList
+})
+
 // Fetch metadata on mount
 onMounted(() => {
   fetchPluginMetadata()
@@ -239,4 +300,21 @@ onMounted(() => {
 const openInstallModal = () => {
   isModalOpen.value = true
 }
+
+// Auto-open modal when autoOpenModal prop is true with automatic cleanup
+const { start: startModalTimer, stop: stopModalTimer } = useTimeoutFn(() => {
+  isModalOpen.value = true
+}, 500)
+
+watch(() => props.autoOpenModal, (shouldOpen) => {
+  // Stop any existing timer
+  stopModalTimer()
+
+  if (shouldOpen) {
+    // Start timer to open modal after scroll completes
+    startModalTimer()
+  }
+}, { immediate: true })
+
+// VueUse automatically cleans up on unmount, no need for manual cleanup!
 </script>