@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/pages/system/Addons.tsx

@@ -1,525 +0,0 @@
-import { useState, useDeferredValue, useMemo } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Package, Download, RefreshCw, Map as MapIcon, Search, Check, Loader2, ChevronDown, ChevronUp } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { AddonCard } from '../../components/addons/AddonCard'
-import type { AddonListItem, AgentInfo } from '../../components/addons/AddonCard'
-import { AddonUploadZone } from '../../components/addons/AddonUploadZone'
-import { UpdatesList } from '../../components/addons/UpdatesList'
-import type { UpdateEntry } from '../../components/addons/UpdatesList'
-import { CapabilityMap } from '../../components/addons/CapabilityMap'
-import type { CapabilityEntry } from '../../components/addons/CapabilityMap'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-interface RawAddonManifest {
-  id: string
-  name: string
-  version: string
-  description?: string
-  capabilities: readonly string[]
-  requiredFeatures?: readonly string[]
-  group?: 'core' | 'addon' | 'provider' | 'page'
-  packageName: string
-  packageVersion: string
-  removable?: boolean
-}
-
-interface RawAddonListItem {
-  manifest: RawAddonManifest
-  enabled: boolean
-  hasConfigSchema: boolean
-}
-
-// ---------------------------------------------------------------------------
-// Normalise raw addon to typed AddonListItem, deriving group from ID
-// ---------------------------------------------------------------------------
-
-function deriveGroup(manifest: RawAddonManifest, source?: string): AddonListItem['group'] {
-  if (manifest.group) return manifest.group
-  if (source === 'core' || manifest.packageName === '@camstack/core') return 'core'
-  const pkg = manifest.packageName.toLowerCase()
-  if (pkg.includes('provider')) return 'provider'
-  if (pkg.includes('page') || pkg.includes('benchmark')) return 'page'
-  return 'addon'
-}
-
-function normaliseAddon(raw: RawAddonListItem): AddonListItem | null {
-  if (!raw?.manifest) return null
-  return {
-    manifest: {
-      ...raw.manifest,
-      capabilities: raw.manifest.capabilities ?? [],
-    },
-    enabled: raw.enabled ?? false,
-    hasConfigSchema: raw.hasConfigSchema ?? false,
-    group: deriveGroup(raw.manifest, (raw as any).source),
-    source: (raw as any).source,
-    installedOn: [],
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Derive capabilities from addon manifests
-// ---------------------------------------------------------------------------
-
-function deriveCapabilities(addons: AddonListItem[]): CapabilityEntry[] {
-  const capMap = new Map<string, CapabilityEntry>()
-
-  for (const addon of addons) {
-    const capabilities = addon.manifest.capabilities ?? []
-    for (const cap of capabilities) {
-      const capName = typeof cap === 'string' ? cap : (cap as { name: string }).name
-      const capMode = typeof cap === 'string' ? 'collection' : ((cap as { mode?: string }).mode ?? 'collection')
-
-      if (!capMap.has(capName)) {
-        capMap.set(capName, {
-          name: capName,
-          mode: capMode as CapabilityEntry['mode'],
-          providers: [],
-        })
-      }
-
-      const entry = capMap.get(capName)!
-      entry.providers.push({
-        addonId: addon.manifest.id,
-        addonName: addon.manifest.name,
-        active: addon.enabled,
-      })
-    }
-  }
-
-  return Array.from(capMap.values())
-}
-
-// ---------------------------------------------------------------------------
-// Group definitions
-// ---------------------------------------------------------------------------
-
-const GROUPS: { key: AddonListItem['group']; label: string }[] = [
-  { key: 'core',     label: 'Core (Builtins)' },
-  { key: 'addon',    label: 'Addon Packages' },
-  { key: 'provider', label: 'Providers' },
-  { key: 'page',     label: 'Addon Pages' },
-]
-
-// ---------------------------------------------------------------------------
-// Tab bar
-// ---------------------------------------------------------------------------
-
-type Tab = 'installed' | 'updates' | 'map'
-
-const TABS: { id: Tab; label: string; icon: React.ElementType }[] = [
-  { id: 'installed', label: 'Installed',       icon: Package },
-  { id: 'updates',   label: 'Updates',          icon: RefreshCw },
-  { id: 'map',       label: 'Capability Map',   icon: MapIcon },
-]
-
-function TabBar({ active, onChange }: { active: Tab; onChange: (tab: Tab) => void }) {
-  return (
-    <div className="flex gap-1 border-b border-border pb-0">
-      {TABS.map(({ id, label, icon: Icon }) => (
-        <button
-          key={id}
-          type="button"
-          onClick={() => onChange(id)}
-          className={[
-            'flex items-center gap-1.5 px-4 py-2 text-xs font-medium border-b-2 -mb-px transition-colors',
-            active === id
-              ? 'border-primary text-primary'
-              : 'border-transparent text-foreground-subtle hover:text-foreground',
-          ].join(' ')}
-        >
-          <Icon className="h-3.5 w-3.5" />
-          {label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Installed tab
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Package group — collapsible header for addons from the same npm package
-// ---------------------------------------------------------------------------
-
-interface PackageGroup {
-  packageName: string
-  version: string
-  addons: AddonListItem[]
-}
-
-function groupByPackage(addons: AddonListItem[]): Array<PackageGroup | AddonListItem> {
-  const packageMap = new Map<string, PackageGroup>()
-  const ungrouped: AddonListItem[] = []
-
-  for (const addon of addons) {
-    const pkgName = addon.manifest.packageName
-    if (!pkgName) {
-      ungrouped.push(addon)
-      continue
-    }
-    const existing = packageMap.get(pkgName)
-    if (existing) {
-      existing.addons.push(addon)
-    } else {
-      packageMap.set(pkgName, {
-        packageName: pkgName,
-        version: addon.manifest.packageVersion,
-        addons: [addon],
-      })
-    }
-  }
-
-  const result: Array<PackageGroup | AddonListItem> = []
-  for (const group of packageMap.values()) {
-    // Only create a collapsible group if the package contains 2+ addons
-    if (group.addons.length >= 2) {
-      result.push(group)
-    } else {
-      result.push(group.addons[0]!)
-    }
-  }
-  result.push(...ungrouped)
-  return result
-}
-
-function isPackageGroup(item: PackageGroup | AddonListItem): item is PackageGroup {
-  return 'packageName' in item && 'addons' in item
-}
-
-function PackageGroupHeader({ group, agents }: { group: PackageGroup; agents: AgentInfo[] }) {
-  const [expanded, setExpanded] = useState(false)
-
-  return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
-      <button
-        type="button"
-        onClick={() => setExpanded((e) => !e)}
-        className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-surface-hover/50 transition-colors text-left"
-      >
-        <Package className="h-4 w-4 text-primary shrink-0" />
-        <div className="flex-1 min-w-0 flex items-center gap-2 flex-wrap">
-          <span className="text-xs font-semibold text-foreground truncate">{group.packageName}</span>
-          <span className="text-[10px] rounded-full bg-primary/10 text-primary px-2 py-0.5 font-medium shrink-0">
-            v{group.version}
-          </span>
-          <span className="text-[10px] rounded-full bg-surface-hover border border-border px-2 py-0.5 font-medium shrink-0">
-            {group.addons.length} addons
-          </span>
-        </div>
-        {expanded ? <ChevronUp className="h-4 w-4 text-foreground-subtle shrink-0" /> : <ChevronDown className="h-4 w-4 text-foreground-subtle shrink-0" />}
-      </button>
-      {expanded && (
-        <div className="border-t border-border px-3 py-2 space-y-2">
-          {group.addons.map((addon) => (
-            <AddonCard key={addon.manifest.id} addon={addon} agents={agents} />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Installed tab
-// ---------------------------------------------------------------------------
-
-interface InstalledTabProps {
-  addons: AddonListItem[]
-  agents: AgentInfo[]
-  onRefresh: () => void
-  isRefreshing: boolean
-}
-
-function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabProps) {
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const [searchInput, setSearchInput] = useState('')
-  const deferredSearch = useDeferredValue(searchInput)
-  const [showSearch, setShowSearch] = useState(false)
-
-  // Search npm for available addons — uses deferred (debounced) value
-  const { data: searchResults, isFetching: isSearching } = useQuery({
-    queryKey: ['addon-search', deferredSearch],
-    queryFn: () => client.trpc.bridgeAddons.searchAvailable.query({ query: deferredSearch || undefined }),
-    enabled: showSearch,
-    staleTime: 60_000,
-  })
-
-  // Install addon mutation
-  const installMutation = useMutation({
-    mutationFn: (packageName: string) => client.trpc.bridgeAddons.installPackage.mutate({ packageName }),
-    onSuccess: (_data, packageName) => {
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-      queryClient.invalidateQueries({ queryKey: ['addon-search'] })
-      queryClient.invalidateQueries({ queryKey: ['addon-pages'] })
-      queryClient.invalidateQueries({ queryKey: ['capabilities'] })
-      console.log(`[Addons] Installed ${packageName}`)
-    },
-    onError: (err, packageName) => {
-      console.error(`[Addons] Install failed for ${packageName}:`, err)
-    },
-  })
-
-  const grouped = GROUPS.map(({ key, label }) => ({
-    key,
-    label,
-    items: addons.filter((a) => a.group === key),
-  })).filter((g) => g.items.length > 0)
-
-  // Filter search results: hide already installed
-  const availableAddons = (searchResults ?? []).filter((r: any) => !r.installed)
-
-  return (
-    <div className="space-y-6">
-      {/* Search bar + actions */}
-      <div className="flex gap-2">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-subtle" />
-          <input
-            type="text"
-            value={searchInput}
-            onChange={(e) => { setSearchInput(e.target.value); setShowSearch(true) }}
-            onFocus={() => setShowSearch(true)}
-            placeholder="Search addons by name or capability..."
-            className="w-full rounded-md border border-border bg-background pl-9 pr-3 py-2 text-xs text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary"
-          />
-          {isSearching && (
-            <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-subtle animate-spin" />
-          )}
-        </div>
-        <button
-          type="button"
-          onClick={onRefresh}
-          disabled={isRefreshing}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-surface hover:bg-surface-hover border border-border disabled:opacity-50 transition-colors"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
-          Refresh
-        </button>
-      </div>
-
-      {/* Search results dropdown */}
-      {showSearch && availableAddons.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
-          <div className="px-3 py-2 text-[10px] uppercase tracking-wide text-foreground-subtle border-b border-border flex justify-between">
-            <span>Available on npm ({availableAddons.length})</span>
-            <button type="button" onClick={() => setShowSearch(false)} className="text-foreground-subtle hover:text-foreground">
-              close
-            </button>
-          </div>
-          <div className="max-h-64 overflow-auto divide-y divide-border">
-            {availableAddons.map((addon: any) => (
-              <div key={addon.name} className="flex items-center gap-3 px-3 py-2.5 hover:bg-surface-hover transition-colors">
-                <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center text-primary text-[10px] font-bold shrink-0">
-                  {addon.name.replace('@camstack/addon-', '').charAt(0).toUpperCase()}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-semibold truncate">{addon.name}</span>
-                    <span className="text-[10px] text-foreground-subtle">v{addon.version}</span>
-                  </div>
-                  <div className="text-[10px] text-foreground-subtle truncate">{addon.description}</div>
-                  {addon.keywords?.length > 0 && (
-                    <div className="flex gap-1 mt-0.5 flex-wrap">
-                      {addon.keywords.filter((k: string) => k !== 'camstack' && k !== 'addon' && k !== 'camstack-addon').slice(0, 5).map((k: string) => (
-                        <span key={k} className="text-[9px] px-1.5 py-0 rounded bg-primary/5 text-foreground-subtle">{k}</span>
-                      ))}
-                    </div>
-                  )}
-                </div>
-                <button
-                  type="button"
-                  onClick={() => installMutation.mutate(addon.name)}
-                  disabled={installMutation.isPending}
-                  className="flex items-center gap-1 px-2.5 py-1 text-[10px] font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors shrink-0"
-                >
-                  {installMutation.isPending ? (
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                  ) : (
-                    <Download className="h-3 w-3" />
-                  )}
-                  Install
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Show "all installed" if search returned only installed results */}
-      {showSearch && searchResults && availableAddons.length === 0 && searchResults.length > 0 && (
-        <div className="text-xs text-foreground-subtle flex items-center gap-1.5 px-1">
-          <Check className="h-3.5 w-3.5 text-green-500" />
-          All matching addons are already installed
-        </div>
-      )}
-
-      {/* Upload zone — below search results */}
-      <AddonUploadZone
-        onUploadSuccess={() => {
-          queryClient.invalidateQueries({ queryKey: ['addons'] })
-          onRefresh()
-        }}
-      />
-
-      {/* Installed addons grouped */}
-      {addons.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No addons installed</div>
-      )}
-
-      {grouped.map(({ key, label, items }) => {
-        const packageGrouped = groupByPackage(items)
-        return (
-          <div key={key} className="space-y-2">
-            <h3 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wide flex items-center gap-2">
-              {label}
-              <span className="rounded-full bg-surface-hover border border-border px-2 py-0.5 text-[10px] normal-case font-normal">
-                {items.length}
-              </span>
-            </h3>
-            {packageGrouped.map((item) =>
-              isPackageGroup(item) ? (
-                <PackageGroupHeader key={item.packageName} group={item} agents={agents} />
-              ) : (
-                <AddonCard key={item.manifest.id} addon={item} agents={agents} />
-              ),
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Main page
-// ---------------------------------------------------------------------------
-
-export function AddonsPage() {
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState<Tab>('installed')
-
-  const { data: rawAddons, isLoading, isError } = useQuery<RawAddonListItem[]>({
-    queryKey: ['addons', 'list'],
-    queryFn: () => client.listAddons() as unknown as Promise<RawAddonListItem[]>,
-  })
-
-  // Fetch agents for the "Add agent" dropdown in AddonCard
-  const { data: rawAgents = [] } = useQuery({
-    queryKey: ['agents', 'list'],
-    queryFn: () => client.listAgents(),
-    staleTime: 30_000,
-  })
-
-  const agents: AgentInfo[] = useMemo(
-    () =>
-      (rawAgents as unknown as Record<string, unknown>[]).map((raw) => {
-        const info = (raw.info ?? raw) as Record<string, unknown>
-        return {
-          id: String(info.id ?? ''),
-          name: String(info.name ?? info.id ?? 'Unknown'),
-          isHub: Boolean(raw.isHub ?? raw.hub ?? false),
-        }
-      }),
-    [rawAgents],
-  )
-
-  const { data: updates = [], isFetching: isChecking } = useQuery({
-    queryKey: ['updates'],
-    queryFn: () => client.trpc.update.listUpdates.query(),
-    staleTime: 60_000,
-  })
-
-  const reloadMutation = useMutation({
-    mutationFn: () => client.trpc.bridgeAddons.reloadPackages.mutate(),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-    },
-  })
-
-  const updatePackageMutation = useMutation({
-    mutationFn: (name: string) => client.trpc.update.updatePackage.mutate({ name }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['updates'] })
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-    },
-  })
-
-  const addonList: AddonListItem[] = (rawAddons ?? []).map(normaliseAddon).filter((a): a is AddonListItem => a !== null)
-
-  function handleCheckUpdates() {
-    queryClient.invalidateQueries({ queryKey: ['updates'] })
-  }
-
-  function handleUpdate(id: string) {
-    updatePackageMutation.mutate(id)
-  }
-
-  function handleUpdateAll() {
-    for (const u of updates) {
-      updatePackageMutation.mutate((u as unknown as UpdateEntry).id)
-    }
-  }
-
-  return (
-    <div className="p-6 space-y-5">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold text-foreground">Addons &amp; Updates</h1>
-          <p className="text-xs text-foreground-subtle mt-0.5">
-            Manage installed addons, check for updates, and explore capability providers.
-          </p>
-        </div>
-        {!isLoading && !isError && (
-          <span className="text-[10px] rounded-full bg-primary/10 text-primary px-2 py-0.5 font-medium">
-            {addonList.length} installed
-          </span>
-        )}
-      </div>
-
-      {/* Tabs */}
-      <TabBar active={activeTab} onChange={setActiveTab} />
-
-      {/* Loading / error states */}
-      {isLoading && activeTab === 'installed' && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading…</div>
-      )}
-      {isError && activeTab === 'installed' && (
-        <div className="text-xs text-danger">Failed to load addons</div>
-      )}
-
-      {/* Tab content */}
-      {activeTab === 'installed' && !isLoading && !isError && (
-        <InstalledTab
-          addons={addonList}
-          agents={agents}
-          onRefresh={() => reloadMutation.mutate()}
-          isRefreshing={reloadMutation.isPending}
-        />
-      )}
-
-      {activeTab === 'updates' && (
-        <UpdatesList
-          updates={updates as unknown as UpdateEntry[]}
-          onUpdate={handleUpdate}
-          onUpdateAll={handleUpdateAll}
-          onCheckUpdates={handleCheckUpdates}
-          isChecking={isChecking}
-        />
-      )}
-
-      {activeTab === 'map' && (
-        <CapabilityMap capabilities={deriveCapabilities(addonList)} />
-      )}
-    </div>
-  )
-}