@toolr/ui-design 0.1.0

package/components/ui/registry-card.tsx

@@ -0,0 +1,710 @@
+import { type ReactNode, type MouseEvent, useState } from 'react'
+import {
+  Clock, Download, FolderPlus, Loader2, Plus, Power, Star, Trash2,
+  Sparkles, Bot, Webhook, Terminal, Plug, Settings, Package, Puzzle,
+} from 'lucide-react'
+import { Tooltip } from './tooltip.tsx'
+import { IconButton, type IconName } from './icon-button.tsx'
+import { Label, type LabelColor } from './label.tsx'
+import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
+export { AiToolIcon, AI_TOOL_NAMES, type AiToolKey }
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+export type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings'
+export type ExtensionSource = 'project' | 'plugin' | 'user' | 'local'
+
+const TYPE_ICONS: Record<string, typeof Sparkles> = {
+  skill: Sparkles,
+  command: Terminal,
+  hook: Webhook,
+  agent: Bot,
+  mcp: Plug,
+  settings: Settings,
+  plugin: Package,
+  extension: Puzzle,
+}
+
+const SEEDR_ICON_COLORS: Record<string, string> = {
+  skill: 'text-pink-400',
+  hook: 'text-purple-400',
+  agent: 'text-blue-400',
+  command: 'text-amber-400',
+  plugin: 'text-indigo-400',
+  mcp: 'text-teal-400',
+  settings: 'text-orange-400',
+}
+
+const SEEDR_TYPE_LABELS: Record<string, string> = {
+  skill: 'Skill',
+  hook: 'Hook',
+  agent: 'Agent',
+  command: 'Command',
+  plugin: 'Plugin',
+  mcp: 'MCP Server',
+  settings: 'Settings',
+}
+
+const SEEDR_CONTENT_TYPES = [
+  { key: 'skills' as const, icon: Sparkles, color: 'text-pink-400', label: 'Skill', labelPlural: 'Skills' },
+  { key: 'agents' as const, icon: Bot, color: 'text-blue-400', label: 'Agent', labelPlural: 'Agents' },
+  { key: 'hooks' as const, icon: Webhook, color: 'text-purple-400', label: 'Hook', labelPlural: 'Hooks' },
+  { key: 'commands' as const, icon: Terminal, color: 'text-amber-400', label: 'Command', labelPlural: 'Commands' },
+  { key: 'mcpServers' as const, icon: Plug, color: 'text-teal-400', label: 'MCP Server', labelPlural: 'MCP Servers' },
+]
+
+const DISPLAYABLE_SCOPES: ReadonlySet<string> = new Set(['user', 'project', 'local'])
+
+const ALREADY_AT_USER = 'Already installed at user level'
+
+// ── Category badge helpers ────────────────────────────────────────────────────
+
+const CATEGORY_LABEL_COLORS: LabelColor[] = [
+  'cyan', 'amber', 'violet', 'emerald', 'pink', 'blue',
+  'orange', 'teal', 'red', 'indigo', 'green', 'purple',
+]
+
+function getCategoryLabelColor(category: string): LabelColor {
+  let hash = 0
+  for (let i = 0; i < category.length; i++) {
+    hash = ((hash << 5) - hash + category.charCodeAt(i)) | 0
+  }
+  return CATEGORY_LABEL_COLORS[Math.abs(hash) % CATEGORY_LABEL_COLORS.length]
+}
+
+export function formatCategory(category: string): string {
+  return category.replace(/(^|-)(\w)/g, (_, sep, ch) => sep + ch.toUpperCase())
+}
+
+// ── Time helpers ──────────────────────────────────────────────────────────────
+
+function formatRelativeTime(isoDate: string): string {
+  const diffMs = Date.now() - new Date(isoDate).getTime()
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  if (diffDays === 0) return 'today'
+  if (diffDays === 1) return '1d ago'
+  if (diffDays < 7) return `${diffDays}d ago`
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)}mo ago`
+  return `${Math.floor(diffDays / 365)}y ago`
+}
+
+function formatFullDate(isoDate: string): string {
+  return new Date(isoDate).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+function formatCount(n?: number): string {
+  if (n == null) return '0'
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return String(n)
+}
+
+// ── Scope helpers ─────────────────────────────────────────────────────────────
+
+function computeSeedrScopes(
+  installedScopes: ReadonlySet<ExtensionSource> | undefined,
+  isUserScope: boolean,
+) {
+  const isInstalledInViewScope = (() => {
+    if (!installedScopes || installedScopes.size === 0) return false
+    if (isUserScope) return installedScopes.has('user')
+    return installedScopes.has('project') || installedScopes.has('local')
+  })()
+
+  const removeScope: ExtensionSource | null = (() => {
+    if (!installedScopes || installedScopes.size === 0) return null
+    if (isUserScope && installedScopes.has('user')) return 'user'
+    if (!isUserScope) {
+      if (installedScopes.has('local')) return 'local'
+      if (installedScopes.has('project')) return 'project'
+    }
+    if (installedScopes.has('user')) return 'user'
+    if (installedScopes.has('project')) return 'project'
+    if (installedScopes.has('local')) return 'local'
+    return null
+  })()
+
+  const displayableScopes = installedScopes
+    ? [...installedScopes].filter((s) => DISPLAYABLE_SCOPES.has(s))
+    : []
+
+  const isInstalled = displayableScopes.length > 0
+
+  return { isInstalled, isInstalledInViewScope, removeScope, displayableScopes }
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function CardClickable({ children, onClick }: { children: ReactNode; onClick: (e: MouseEvent) => void }) {
+  return (
+    <div
+      role="button"
+      className="inline-flex cursor-pointer hover:brightness-125 transition-all"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick(e)
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function CategoryBadge({ category, onFilter }: { category: string; onFilter?: (category: string) => void }) {
+  return (
+    <Label
+      text={formatCategory(category)}
+      color={getCategoryLabelColor(category)}
+      icon="tag"
+      tooltip={{ description: onFilter ? `${formatCategory(category)} \u00b7 Click to filter` : formatCategory(category) }}
+      size="sm"
+      onClick={onFilter ? () => onFilter(category) : undefined}
+    />
+  )
+}
+
+// ── Badge row ────────────────────────────────────────────────────────────────
+
+const SOURCE_TYPE_BADGES: Record<string, { color: LabelColor; icon: IconName }> = {
+  official: { color: 'amber', icon: 'shield-check' },
+  toolr: { color: 'cyan', icon: 'sparkles' },
+  community: { color: 'violet', icon: 'users' },
+}
+
+const PLUGIN_TYPE_BADGES: Record<string, { color: LabelColor; icon: IconName }> = {
+  package: { color: 'indigo', icon: 'package' },
+  wrapper: { color: 'teal', icon: 'puzzle' },
+  integration: { color: 'purple', icon: 'plug' },
+}
+
+const SCOPE_ICONS: Record<string, IconName> = { user: 'home', project: 'folder', local: 'lock' }
+
+interface RegistryCardBadgeRowProps {
+  sourceType?: string
+  pluginType?: string
+  category?: string
+  onFilterCategory?: (category: string) => void
+  isInstalled: boolean
+  isDisabled?: boolean
+  scopes: string[]
+  status?: SeedrItemStatus
+}
+
+function RegistryCardBadgeRow({ sourceType, pluginType, category, onFilterCategory, isInstalled, isDisabled, scopes, status }: RegistryCardBadgeRowProps) {
+  const knownScopes = scopes.filter((s) => SCOPE_ICONS[s])
+  const scopeIcons = knownScopes.map((s) => SCOPE_ICONS[s]).filter(Boolean) as IconName[]
+
+  const hasContent = sourceType || pluginType || category || isInstalled || isDisabled || status?.updateAvailable || status?.modified
+  if (!hasContent) return null
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      {sourceType && SOURCE_TYPE_BADGES[sourceType] && (
+        <Label
+          text={sourceType}
+          color={SOURCE_TYPE_BADGES[sourceType].color}
+          icon={SOURCE_TYPE_BADGES[sourceType].icon}
+          tooltip={{ description: `Source: ${sourceType}` }}
+          size="sm"
+          textTransform="capitalize"
+        />
+      )}
+      {pluginType && PLUGIN_TYPE_BADGES[pluginType] && (
+        <Label
+          text={pluginType}
+          color={PLUGIN_TYPE_BADGES[pluginType].color}
+          icon={PLUGIN_TYPE_BADGES[pluginType].icon}
+          tooltip={{ description: `Plugin type: ${pluginType}` }}
+          size="sm"
+          textTransform="capitalize"
+        />
+      )}
+      {category && <CategoryBadge category={category} onFilter={onFilterCategory} />}
+      {isInstalled && !isDisabled && (
+        <Label
+          text="Added"
+          color="green"
+          icon={scopeIcons.length > 0 ? scopeIcons : 'check'}
+          tooltip={{ description: `Installed in: ${scopes.join(', ')}` }}
+          size="sm"
+        />
+      )}
+      {isDisabled && (
+        <Label text="Disabled" color="red" icon="x" tooltip={{ description: 'Installed but disabled' }} size="sm" />
+      )}
+      {status?.updateAvailable && (
+        <Label text="Update" color="amber" icon="download" tooltip={{ description: 'Update available' }} size="sm" />
+      )}
+      {status?.modified && (
+        <Label text="Modified" color="violet" icon="pencil" tooltip={{ description: 'Locally modified' }} size="sm" />
+      )}
+    </div>
+  )
+}
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface SeedrItemStatus {
+  updateAvailable: boolean
+  modified: boolean
+}
+
+interface RegistryCardBase {
+  onClick: () => void
+  flash?: 'success' | 'error' | 'warning' | null
+  name: string
+  type: string
+  description?: string
+  errorMessage?: string
+  onInstall: () => void
+  isInstalling?: boolean
+  updatedAt?: string
+  onDateClick?: () => void
+}
+
+interface SeedrVariant extends RegistryCardBase {
+  variant: 'seedr'
+  author: string
+  sourceType: string
+  pluginType?: string
+  wrapper?: string
+  installedScopes?: ReadonlySet<ExtensionSource>
+  viewScope?: 'user' | 'project'
+  status?: SeedrItemStatus
+  compatibility: string[]
+  packageCounts?: Record<string, number>
+  isDisabled?: boolean
+  onActivate?: () => void
+  onRemove?: (scope: ExtensionSource) => void
+  onFilterSource?: () => void
+  onFilterPluginType?: (pluginType: string) => void
+  /** Render scope confirmation modal */
+  renderScopeConfirm?: (props: { isOpen: boolean; onClose: () => void; onConfirm: () => void; name: string }) => ReactNode
+}
+
+interface ClaudePluginsVariant extends RegistryCardBase {
+  variant: 'claude-plugins'
+  author: string
+  category?: string
+  stars?: number
+  downloads?: number
+  installedScopes?: ReadonlySet<ExtensionSource>
+  viewScope?: 'user' | 'project'
+  onRemove?: () => void
+  onSortBy?: (field: string) => void
+  onFilterCategory?: (category: string) => void
+  /** Tool keys compatible with this item type */
+  compatibleTools?: string[]
+  /** Render scope confirmation modal */
+  renderScopeConfirm?: (props: { isOpen: boolean; onClose: () => void; onConfirm: () => void; name: string }) => ReactNode
+}
+
+interface AitmplVariant extends RegistryCardBase {
+  variant: 'aitmpl'
+  category: string
+  installedScopes?: ReadonlySet<ExtensionSource>
+  viewScope?: 'user' | 'project'
+  onRemove?: () => void
+  onFilterCategory?: (category: string) => void
+  /** Render scope confirmation modal */
+  renderScopeConfirm?: (props: { isOpen: boolean; onClose: () => void; onConfirm: () => void; name: string }) => ReactNode
+}
+
+interface SkillsShVariant extends RegistryCardBase {
+  variant: 'skills-sh'
+  author: string
+  installs?: number
+  installedScopes?: ReadonlySet<ExtensionSource>
+  viewScope?: 'user' | 'project'
+  onRemove?: () => void
+  /** All tool keys to show in bottom row */
+  allToolKeys?: string[]
+  /** Render scope confirmation modal */
+  renderScopeConfirm?: (props: { isOpen: boolean; onClose: () => void; onConfirm: () => void; name: string }) => ReactNode
+}
+
+export type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | SkillsShVariant
+
+// ── Main Component ────────────────────────────────────────────────────────────
+
+export function RegistryCard(props: RegistryCardProps) {
+  const { onClick, flash, name, type, description, errorMessage, isInstalling, updatedAt, onDateClick } = props
+  const [showScopeConfirm, setShowScopeConfirm] = useState(false)
+
+  const TypeIcon = TYPE_ICONS[type] || TYPE_ICONS.extension
+  const typeIconColor = SEEDR_ICON_COLORS[type] || 'text-neutral-400'
+  const typeLabel = SEEDR_TYPE_LABELS[type] || type
+
+  // ── Variant-specific rendering ──
+
+  let topLeft: ReactNode = null
+  let subtitle: ReactNode = null
+  let installButton: ReactNode = null
+  let bottomLogos: ReactNode[] = []
+  let bottomStats: ReactNode[] = []
+  let installedElsewhere = false
+
+  if (props.variant === 'seedr') {
+    const isUserScope = props.viewScope === 'user'
+    const { isInstalled, isInstalledInViewScope, removeScope, displayableScopes } = computeSeedrScopes(props.installedScopes, isUserScope)
+    installedElsewhere = isInstalled && !isInstalledInViewScope
+
+    topLeft = (
+      <RegistryCardBadgeRow
+        sourceType={props.sourceType}
+        pluginType={props.pluginType}
+        isInstalled={isInstalled}
+        isDisabled={props.isDisabled}
+        scopes={displayableScopes}
+        status={props.status}
+      />
+    )
+
+    subtitle = <>by {props.author}</>
+
+    installButton = props.isDisabled ? (
+      <IconButton
+        icon={<Power className="w-3.5 h-3.5" />}
+        onClick={() => props.onActivate?.()}
+        size="sm"
+        color="green"
+        tooltip={{ description: `Activate ${name}` }}
+      />
+    ) : isInstalledInViewScope && removeScope ? (
+      <IconButton
+        icon={<Trash2 className="w-3.5 h-3.5" />}
+        onClick={() => props.onRemove?.(removeScope)}
+        size="sm"
+        color="red"
+        tooltip={{ description: `Remove ${name} from ${removeScope}` }}
+      />
+    ) : installedElsewhere ? (
+      <IconButton
+        icon={<FolderPlus className="w-3.5 h-3.5" />}
+        onClick={() => setShowScopeConfirm(true)}
+        size="sm"
+        color="blue"
+        tooltip={{ description: ALREADY_AT_USER }}
+      />
+    ) : (
+      <IconButton
+        icon={<Plus className="w-3.5 h-3.5" />}
+        onClick={props.onInstall}
+        size="sm"
+        color="green"
+        tooltip={{ description: `Add ${name}` }}
+      />
+    )
+
+    bottomLogos = props.compatibility.filter((t) => t in AI_TOOL_NAMES).map((tool) => (
+      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
+        <AiToolIcon tool={tool} size={16} />
+      </Tooltip>
+    ))
+
+    const counts = props.packageCounts ?? (props.wrapper ? { [props.wrapper]: 1 } : undefined)
+    if (counts) {
+      bottomStats = SEEDR_CONTENT_TYPES.flatMap(({ key, icon: Icon, color, label, labelPlural }) => {
+        const typeKey = key === 'mcpServers' ? 'mcp' : key.replace(/s$/, '')
+        const count = counts[typeKey]
+        if (!count || count <= 0) return []
+        return [(
+          <Tooltip key={`pkg-${key}`} content={{ description: `${count} ${count === 1 ? label : labelPlural}` }} position="top">
+            <span className="flex items-center gap-0.5">
+              <Icon className={`w-3 h-3 ${color}`} />
+              <span className="text-[10px] text-neutral-500">{count}</span>
+            </span>
+          </Tooltip>
+        )]
+      })
+    }
+  } else if (props.variant === 'claude-plugins') {
+    const isUserScope = props.viewScope === 'user'
+    const { isInstalled, isInstalledInViewScope, removeScope, displayableScopes } = computeSeedrScopes(props.installedScopes, isUserScope)
+    installedElsewhere = isInstalled && !isInstalledInViewScope
+
+    topLeft = (
+      <RegistryCardBadgeRow
+        category={props.category}
+        onFilterCategory={props.onFilterCategory}
+        isInstalled={isInstalled}
+        scopes={displayableScopes}
+      />
+    )
+    subtitle = <>by {props.author}</>
+
+    installButton = isInstalledInViewScope && removeScope ? (
+      <IconButton
+        icon={<Trash2 className="w-3.5 h-3.5" />}
+        onClick={() => props.onRemove?.()}
+        size="sm"
+        color="red"
+        tooltip={{ description: `Remove ${name} from ${removeScope}` }}
+      />
+    ) : installedElsewhere ? (
+      <IconButton
+        icon={<FolderPlus className="w-3.5 h-3.5" />}
+        onClick={() => setShowScopeConfirm(true)}
+        size="sm"
+        color="blue"
+        tooltip={{ description: ALREADY_AT_USER }}
+      />
+    ) : (
+      <IconButton
+        icon={<Plus className="w-3.5 h-3.5" />}
+        onClick={props.onInstall}
+        size="sm"
+        color="green"
+        tooltip={{ description: `Add ${name}` }}
+      />
+    )
+
+    const compatibleTools = props.compatibleTools ?? []
+    bottomLogos = compatibleTools.map((tool) => (
+      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
+        <AiToolIcon tool={tool} size={16} />
+      </Tooltip>
+    ))
+    bottomStats = [
+      ...(props.stars != null && props.stars > 0 ? [(
+        <CardClickable key="stars" onClick={() => props.onSortBy?.('stars')}>
+          <Tooltip content={{ description: `${props.stars.toLocaleString()} stars \u00b7 Click to sort` }} position="top">
+            <span className="flex items-center gap-1 text-[10px] text-amber-400/80">
+              <Star className="w-3 h-3" />
+              {formatCount(props.stars)}
+            </span>
+          </Tooltip>
+        </CardClickable>
+      )] : []),
+      ...(props.downloads != null && props.downloads > 0 ? [(
+        <CardClickable key="downloads" onClick={() => props.onSortBy?.('downloads')}>
+          <Tooltip content={{ description: `${props.downloads.toLocaleString()} downloads \u00b7 Click to sort` }} position="top">
+            <span className="flex items-center gap-1 text-[10px] text-emerald-400/80">
+              <Download className="w-3 h-3" />
+              {formatCount(props.downloads)}
+            </span>
+          </Tooltip>
+        </CardClickable>
+      )] : []),
+    ]
+  } else if (props.variant === 'aitmpl') {
+    const isUserScope = props.viewScope === 'user'
+    const { isInstalled, isInstalledInViewScope, removeScope, displayableScopes } = computeSeedrScopes(props.installedScopes, isUserScope)
+    installedElsewhere = isInstalled && !isInstalledInViewScope
+
+    topLeft = (
+      <RegistryCardBadgeRow
+        category={props.category}
+        onFilterCategory={props.onFilterCategory}
+        isInstalled={isInstalled}
+        scopes={displayableScopes}
+      />
+    )
+
+    installButton = isInstalledInViewScope && removeScope ? (
+      <IconButton
+        icon={<Trash2 className="w-3.5 h-3.5" />}
+        onClick={() => props.onRemove?.()}
+        size="sm"
+        color="red"
+        tooltip={{ description: `Remove ${name} from ${removeScope}` }}
+      />
+    ) : installedElsewhere ? (
+      <IconButton
+        icon={<FolderPlus className="w-3.5 h-3.5" />}
+        onClick={() => setShowScopeConfirm(true)}
+        size="sm"
+        color="blue"
+        tooltip={{ description: ALREADY_AT_USER }}
+      />
+    ) : (
+      <IconButton
+        icon={<Plus className="w-3.5 h-3.5" />}
+        onClick={props.onInstall}
+        size="sm"
+        color="green"
+        tooltip={{ description: `Add ${name}` }}
+      />
+    )
+
+    bottomLogos = [(
+      <Tooltip key="claude" content={{ description: 'Compatible with Claude Code' }} position="top">
+        <AiToolIcon tool="claude" size={16} />
+      </Tooltip>
+    )]
+  } else if (props.variant === 'skills-sh') {
+    const isUserScope = props.viewScope === 'user'
+    const { isInstalled, isInstalledInViewScope, removeScope, displayableScopes } = computeSeedrScopes(props.installedScopes, isUserScope)
+    installedElsewhere = isInstalled && !isInstalledInViewScope
+
+    topLeft = (
+      <RegistryCardBadgeRow
+        isInstalled={isInstalled}
+        scopes={displayableScopes}
+      />
+    )
+
+    subtitle = <>by {props.author}</>
+
+    installButton = isInstalledInViewScope && removeScope ? (
+      <IconButton
+        icon={<Trash2 className="w-3.5 h-3.5" />}
+        onClick={() => props.onRemove?.()}
+        size="sm"
+        color="red"
+        tooltip={{ description: `Remove ${name} from ${removeScope}` }}
+      />
+    ) : installedElsewhere ? (
+      <IconButton
+        icon={<FolderPlus className="w-3.5 h-3.5" />}
+        onClick={() => setShowScopeConfirm(true)}
+        size="sm"
+        color="blue"
+        tooltip={{ description: ALREADY_AT_USER }}
+      />
+    ) : (
+      <IconButton
+        icon={<Plus className="w-3.5 h-3.5" />}
+        onClick={props.onInstall}
+        size="sm"
+        color="green"
+        tooltip={{ description: `Add ${name}` }}
+      />
+    )
+
+    const allTools = props.allToolKeys ?? []
+    bottomLogos = allTools.map((tool) => (
+      <Tooltip key={tool} content={{ description: `Compatible with ${AI_TOOL_NAMES[tool as AiToolKey] ?? tool}` }} position="top">
+        <AiToolIcon tool={tool} size={14} />
+      </Tooltip>
+    ))
+    if (props.installs != null && props.installs > 0) {
+      bottomStats = [(
+        <Tooltip key="installs" content={{ description: `${props.installs.toLocaleString()} installs` }} position="top">
+          <span className="flex items-center gap-1 text-[10px] text-neutral-500">
+            <Download className="w-3 h-3" />
+            {props.installs.toLocaleString()}
+          </span>
+        </Tooltip>
+      )]
+    }
+  }
+
+  // ── Render ──
+
+  const borderClass = flash === 'success'
+    ? 'border-green-500/60 ring-1 ring-green-500/30 bg-green-500/5'
+    : flash === 'error'
+      ? 'border-red-500/60 ring-1 ring-red-500/30 bg-red-500/5'
+      : flash === 'warning'
+        ? 'border-amber-500/60 ring-1 ring-amber-500/30 bg-amber-500/5'
+        : 'border-neutral-700'
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={`group text-left w-full cursor-pointer border rounded-lg p-3 transition-all duration-500 hover:border-neutral-600 flex flex-col bg-neutral-800/50 hover:bg-neutral-800 ${borderClass}`}
+      onClick={onClick}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick() } }}
+    >
+      {/* Top row */}
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex-1 min-w-0 min-h-7 overflow-hidden">
+          {topLeft}
+        </div>
+        <div className="relative w-7 h-7 flex items-center justify-center shrink-0">
+          {isInstalling ? (
+            <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />
+          ) : (
+            <>
+              <Tooltip content={{ description: `${typeLabel} extension` }} position="top">
+                <TypeIcon className={`w-4 h-4 group-hover:opacity-0 transition-opacity ${typeIconColor}`} />
+              </Tooltip>
+              {installButton && (
+                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
+                  {installButton}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Name */}
+      <h3 className="text-sm font-medium text-white">{name}</h3>
+
+      {/* Subtitle */}
+      {subtitle && <div className="text-xs text-neutral-400 mb-1.5">{subtitle}</div>}
+
+      {/* Description */}
+      {description && <p className="text-xs text-neutral-500 mb-3 flex-grow line-clamp-2">{description}</p>}
+
+      {/* Error/warning message */}
+      {errorMessage && (
+        <p className={`text-[11px] mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
+      )}
+
+      {/* Bottom row */}
+      {(bottomLogos.length > 0 || bottomStats.length > 0 || updatedAt) && (() => {
+        const dateNode = updatedAt ? (
+          <Tooltip content={{ description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \u00b7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }} position="top">
+            <span
+              className={`flex items-center gap-1 text-[10px] text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
+              onClick={onDateClick ? (e: MouseEvent) => { e.stopPropagation(); onDateClick() } : undefined}
+            >
+              <Clock className="w-3 h-3" />
+              {formatRelativeTime(updatedAt)}
+            </span>
+          </Tooltip>
+        ) : null
+
+        const hasStats = bottomStats.length > 0
+
+        return (
+          <div className="mt-auto pt-1 flex items-end">
+            <div className={`${hasStats ? 'w-1/3' : 'w-2/3'} flex flex-wrap gap-1.5 content-end`}>
+              {bottomLogos}
+            </div>
+            {hasStats && (
+              <div className="w-1/3 flex justify-center items-end gap-2">
+                {bottomStats}
+              </div>
+            )}
+            <div className="w-1/3 flex justify-end items-end">
+              {dateNode}
+            </div>
+          </div>
+        )
+      })()}
+
+      {showScopeConfirm && (() => {
+        // Use custom renderScopeConfirm if provided, otherwise show a basic confirm
+        if ('renderScopeConfirm' in props && props.renderScopeConfirm) {
+          return (
+            <div onClick={(e) => e.stopPropagation()}>
+              {props.renderScopeConfirm({ isOpen: true, onClose: () => setShowScopeConfirm(false), onConfirm: props.onInstall, name })}
+            </div>
+          )
+        }
+        // Basic fallback: just install on confirm
+        return (
+          <div onClick={(e) => e.stopPropagation()}>
+            <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
+              <div className="bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
+                <h3 className="text-sm font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
+                <p className="text-xs text-neutral-400 mb-4">
+                  <strong className="text-neutral-300">{name}</strong> is already installed at user level and available to all projects. Do you also want to install it at project level?
+                </p>
+                <div className="flex justify-end gap-2">
+                  <button type="button" onClick={() => setShowScopeConfirm(false)} className="px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-200 transition-colors cursor-pointer">Cancel</button>
+                  <button type="button" onClick={() => { setShowScopeConfirm(false); props.onInstall() }} className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-500 transition-colors cursor-pointer">Install to project</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })()}
+    </div>
+  )
+}