From dbd54c704eb49ebe65ecd198dd94936e92be4eaa Mon Sep 17 00:00:00 2001
From: Minsu Lee <amond@amond.net>
Date: Wed, 15 Oct 2025 23:40:40 +0900
Subject: [PATCH 1/2] 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
---
 apps/web/app/components/PluginCard.vue | 17 ++++++++++++--
 apps/web/app/pages/index.vue           | 32 ++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/components/PluginCard.vue b/apps/web/app/components/PluginCard.vue
index f3b840f5..5546b416 100644
--- a/apps/web/app/components/PluginCard.vue
+++ b/apps/web/app/components/PluginCard.vue
@@ -163,9 +163,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)
@@ -239,4 +242,14 @@ onMounted(() => {
 const openInstallModal = () => {
   isModalOpen.value = true
 }
+
+// Auto-open modal when autoOpenModal prop is true
+watch(() => props.autoOpenModal, (shouldOpen) => {
+  if (shouldOpen) {
+    // Small delay to ensure smooth scroll completes first
+    setTimeout(() => {
+      isModalOpen.value = true
+    }, 500)
+  }
+}, { immediate: true })
 </script>
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
index df8f5111..cb9cb90f 100644
--- a/apps/web/app/pages/index.vue
+++ b/apps/web/app/pages/index.vue
@@ -55,7 +55,9 @@
         <PluginCard
           v-for="plugin in filteredPlugins"
           :key="plugin.name"
+          :ref="el => setPluginCardRef(plugin.name, el)"
           :plugin="plugin"
+          :auto-open-modal="plugin.name === targetPluginName"
         />
       </UPageGrid>
 
@@ -120,6 +122,13 @@ interface MarketplaceData {
 }
 
 const searchQuery = ref('')
+const route = useRoute()
+const pluginCardRefs = ref<Record<string, any>>({})
+
+// Get target plugin name from URL query parameter
+const targetPluginName = computed(() => {
+  return (route.query.plugin || route.query.install) as string | undefined
+})
 
 // Fetch marketplace data
 const { data: marketplaceData, pending, error } = await useAsyncData<MarketplaceData>(
@@ -146,6 +155,29 @@ const filteredPlugins = computed(() => {
   })
 })
 
+// Store plugin card refs for scrolling
+const setPluginCardRef = (pluginName: string, el: any) => {
+  if (el) {
+    pluginCardRefs.value[pluginName] = el
+  }
+}
+
+// Auto-scroll to target plugin when page loads
+watch([() => targetPluginName.value, pending], ([pluginName, isLoading]) => {
+  if (!pluginName || isLoading) return
+
+  // Wait for next tick to ensure DOM is updated
+  nextTick(() => {
+    const targetCard = pluginCardRefs.value[pluginName]
+    if (targetCard?.$el) {
+      targetCard.$el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+    }
+  })
+}, { immediate: true })
+
 // SEO Meta
 useHead({
   title: 'Claude Code Plugin Marketplace',

From 379192db8da62c74d058269163e8e53d41aca2a9 Mon Sep 17 00:00:00 2001
From: Minsu Lee <amond@amond.net>
Date: Thu, 16 Oct 2025 00:28:37 +0900
Subject: [PATCH 2/2] 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
---
 apps/web/app/components/PluginCard.vue | 167 +++++++++++++++++--------
 apps/web/app/pages/index.vue           | 159 ++++++++++++++++++++---
 2 files changed, 255 insertions(+), 71 deletions(-)

diff --git a/apps/web/app/components/PluginCard.vue b/apps/web/app/components/PluginCard.vue
index 5546b416..84e3ec2f 100644
--- a/apps/web/app/components/PluginCard.vue
+++ b/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
@@ -186,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
   }
@@ -206,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
@@ -234,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()
@@ -243,13 +301,20 @@ const openInstallModal = () => {
   isModalOpen.value = true
 }
 
-// Auto-open modal when autoOpenModal prop is 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) {
-    // Small delay to ensure smooth scroll completes first
-    setTimeout(() => {
-      isModalOpen.value = true
-    }, 500)
+    // Start timer to open modal after scroll completes
+    startModalTimer()
   }
 }, { immediate: true })
+
+// VueUse automatically cleans up on unmount, no need for manual cleanup!
 </script>
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
index cb9cb90f..cc59919c 100644
--- a/apps/web/app/pages/index.vue
+++ b/apps/web/app/pages/index.vue
@@ -97,6 +97,8 @@
 </template>
 
 <script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+
 interface PluginSource {
   source: 'github'
   repo: string
@@ -123,11 +125,34 @@ interface MarketplaceData {
 
 const searchQuery = ref('')
 const route = useRoute()
+const router = useRouter()
+const toast = useToast()
 const pluginCardRefs = ref<Record<string, any>>({})
+const pendingScrollTimer = ref<{ stop: () => void } | null>(null)
 
-// Get target plugin name from URL query parameter
+// Get target plugin name from URL query parameter with validation
 const targetPluginName = computed(() => {
-  return (route.query.plugin || route.query.install) as string | undefined
+  const pluginParam = route.query.plugin || route.query.install
+
+  // Handle array case (e.g., ?plugin=foo&plugin=bar)
+  if (Array.isArray(pluginParam)) {
+    console.warn('[Plugin URL Navigation] Multiple plugin parameters detected, using first value')
+    return pluginParam[0] || undefined
+  }
+
+  // Handle empty string
+  if (pluginParam === '') {
+    console.warn('[Plugin URL Navigation] Empty plugin parameter detected')
+    return undefined
+  }
+
+  // Normalize and validate
+  if (typeof pluginParam === 'string') {
+    const normalized = pluginParam.trim()
+    return normalized || undefined
+  }
+
+  return undefined
 })
 
 // Fetch marketplace data
@@ -136,6 +161,19 @@ const { data: marketplaceData, pending, error } = await useAsyncData<Marketplace
   () => queryCollection('marketplace').first()
 )
 
+// Check if plugin matches search query
+function pluginMatchesSearch(plugin: Plugin, query: string): boolean {
+  const searchFields = [
+    plugin.name,
+    plugin.description,
+    plugin.source.repo
+  ]
+
+  return searchFields.some(field =>
+    field.toLowerCase().includes(query)
+  )
+}
+
 // Filter plugins based on search query
 const filteredPlugins = computed(() => {
   if (!marketplaceData.value?.plugins) return []
@@ -146,13 +184,9 @@ const filteredPlugins = computed(() => {
     return marketplaceData.value.plugins
   }
 
-  return marketplaceData.value.plugins.filter(plugin => {
-    return (
-      plugin.name.toLowerCase().includes(query) ||
-      plugin.description.toLowerCase().includes(query) ||
-      plugin.source.repo.toLowerCase().includes(query)
-    )
-  })
+  return marketplaceData.value.plugins.filter(plugin =>
+    pluginMatchesSearch(plugin, query)
+  )
 })
 
 // Store plugin card refs for scrolling
@@ -162,22 +196,107 @@ const setPluginCardRef = (pluginName: string, el: any) => {
   }
 }
 
-// Auto-scroll to target plugin when page loads
+// Scroll to a specific plugin card with error handling
+function scrollToPlugin(pluginName: string): boolean {
+  const targetCard = pluginCardRefs.value[pluginName]
+
+  if (!targetCard) {
+    // Use debug level for initial attempts - this is expected during loading
+    return false
+  }
+
+  try {
+    const element = targetCard.$el
+
+    if (!element || !(element instanceof HTMLElement)) {
+      throw new Error(`Invalid DOM element for plugin "${pluginName}"`)
+    }
+
+    if (typeof element.scrollIntoView !== 'function') {
+      throw new Error('scrollIntoView not supported')
+    }
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    })
+
+    return true
+  } catch (error) {
+    console.error(`[Plugin URL Navigation] Failed to scroll to plugin "${pluginName}":`, error)
+    return false
+  }
+}
+
+// Auto-scroll to target plugin when page loads with user feedback
 watch([() => targetPluginName.value, pending], ([pluginName, isLoading]) => {
   if (!pluginName || isLoading) return
 
-  // Wait for next tick to ensure DOM is updated
-  nextTick(() => {
-    const targetCard = pluginCardRefs.value[pluginName]
-    if (targetCard?.$el) {
-      targetCard.$el.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      })
-    }
-  })
+  // Check if plugin exists in the data first
+  const pluginExists = marketplaceData.value?.plugins?.some(p => p.name === pluginName)
+
+  if (!pluginExists) {
+    // Plugin doesn't exist in marketplace data
+    toast.add({
+      title: 'Plugin Not Found',
+      description: `The plugin "${pluginName}" could not be found. It may have been removed or the link may be incorrect.`,
+      color: 'red',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+
+    // Clear the query parameter to prevent confusion
+    router.replace({ query: {} })
+    return
+  }
+
+  // Clean up any existing pending timer
+  pendingScrollTimer.value?.stop()
+
+  // Plugin exists, try to scroll with retry logic
+  let retryCount = 0
+  const maxRetries = 5
+  const retryDelay = 200 // ms between retries
+
+  const attemptScroll = () => {
+    // Wait for next tick to ensure DOM is updated
+    nextTick(() => {
+      const scrolled = scrollToPlugin(pluginName)
+
+      if (scrolled) {
+        // Success! Clear timer reference
+        pendingScrollTimer.value = null
+        return
+      }
+
+      // Not ready yet, retry if we haven't exceeded max retries
+      retryCount++
+      if (retryCount < maxRetries) {
+        const timer = useTimeoutFn(attemptScroll, retryDelay)
+        pendingScrollTimer.value = timer
+        timer.start()
+      } else {
+        // Max retries reached, show user feedback
+        console.error(`[Plugin URL Navigation] Failed to scroll to "${pluginName}" after ${maxRetries} attempts`)
+        toast.add({
+          title: 'Navigation Issue',
+          description: `The plugin "${pluginName}" was found but could not be displayed. Try refreshing the page.`,
+          color: 'orange',
+          icon: 'i-heroicons-exclamation-circle'
+        })
+        pendingScrollTimer.value = null
+      }
+    })
+  }
+
+  // Start the scroll attempt cycle
+  attemptScroll()
 }, { immediate: true })
 
+// Clean up pending timer on unmount
+onBeforeUnmount(() => {
+  pendingScrollTimer.value?.stop()
+})
+
 // SEO Meta
 useHead({
   title: 'Claude Code Plugin Marketplace',