@camstack/addon-admin-ui 0.1.1 → 0.1.2

package/src/pages/system/Addons.tsx

@@ -1,44 +1,25 @@
-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 { BackendClient } from '@camstack/sdk'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Check, ChevronDown, ChevronUp, Download, Loader2, Package, RefreshCw, Search } from 'lucide-react'
+import { useDeferredValue, useMemo, useState } from 'react'
 import type { AddonListItem, AgentInfo } from '../../components/addons/AddonCard'
+import { AddonCard } from '../../components/addons/AddonCard'
+import { VersionBadge } from '@camstack/ui'
 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'
+import { useBackendClient } from '../../hooks/useBackendClient'
 
 // ---------------------------------------------------------------------------
-// Types
+// Types — inferred from tRPC addons.list return type
 // ---------------------------------------------------------------------------
 
-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
-}
+type RawAddonListItem = Awaited<ReturnType<BackendClient['listAddons']>>[number]
+type RawAddonManifest = RawAddonListItem['manifest']
 
 // ---------------------------------------------------------------------------
 // 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'
@@ -53,92 +34,19 @@ function normaliseAddon(raw: RawAddonListItem): AddonListItem | null {
       ...raw.manifest,
       capabilities: raw.manifest.capabilities ?? [],
     },
-    enabled: raw.enabled ?? false,
+    enabled: true,
     hasConfigSchema: raw.hasConfigSchema ?? false,
-    group: deriveGroup(raw.manifest, (raw as any).source),
-    source: (raw as any).source,
+    group: deriveGroup(raw.manifest, raw.source),
+    source: raw.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>
-  )
-}
+// Groups removed — flat list with package grouping only
 
 // ---------------------------------------------------------------------------
 // Installed tab
@@ -150,10 +58,12 @@ function TabBar({ active, onChange }: { active: Tab; onChange: (tab: Tab) => voi
 
 interface PackageGroup {
   packageName: string
+  displayName: string
   version: string
   addons: AddonListItem[]
 }
 
+
 function groupByPackage(addons: AddonListItem[]): Array<PackageGroup | AddonListItem> {
   const packageMap = new Map<string, PackageGroup>()
   const ungrouped: AddonListItem[] = []
@@ -170,6 +80,7 @@ function groupByPackage(addons: AddonListItem[]): Array<PackageGroup | AddonList
     } else {
       packageMap.set(pkgName, {
         packageName: pkgName,
+        displayName: (addon.manifest as any).packageDisplayName ?? addon.manifest.name,
         version: addon.manifest.packageVersion,
         addons: [addon],
       })
@@ -198,27 +109,48 @@ function PackageGroupHeader({ group, agents }: { group: PackageGroup; agents: Ag
 
   return (
     <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      {/* Header — same layout as AddonCard */}
+      <div className="flex items-start gap-3 px-4 py-3">
+        <div className="flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center bg-purple-500/20 text-purple-300">
+          <Package className="h-4 w-4" />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-foreground truncate">{group.displayName}</span>
+            <span className="text-[10px] text-foreground-subtle font-mono shrink-0">({group.packageName})</span>
+            <span className="text-[10px] rounded-full bg-primary/10 text-primary px-2 py-0.5 font-medium shrink-0 inline-flex items-center gap-1">
+              <Package className="h-3 w-3" />
+              {group.addons.length}
+            </span>
+            <span className="ml-auto shrink-0">
+              <VersionBadge version={group.version} />
+            </span>
+          </div>
+          {group.addons[0]?.manifest.description && (
+            <p className="text-[10px] text-foreground-subtle mt-0.5 line-clamp-1">{group.addons[0].manifest.description}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Expand handle — bottom edge tab */}
       <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"
+        className="w-full flex items-center justify-center border-t border-border py-1 hover:bg-surface-hover/50 transition-colors"
       >
-        <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" />}
+        {expanded ? (
+          <ChevronUp className="h-3.5 w-3.5 text-foreground-subtle" />
+        ) : (
+          <ChevronDown className="h-3.5 w-3.5 text-foreground-subtle" />
+        )}
       </button>
+
+      {/* Expanded content */}
       {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} />
+            <AddonCard key={addon.manifest.id} addon={addon} agents={agents} hideVersion />
           ))}
         </div>
       )}
@@ -267,14 +199,10 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
     },
   })
 
-  const grouped = GROUPS.map(({ key, label }) => ({
-    key,
-    label,
-    items: addons.filter((a) => a.group === key),
-  })).filter((g) => g.items.length > 0)
+  const packageGrouped = groupByPackage(addons)
 
   // Filter search results: hide already installed
-  const availableAddons = (searchResults ?? []).filter((r: any) => !r.installed)
+  const availableAddons = (searchResults ?? []).filter((r) => !r.installed)
 
   return (
     <div className="space-y-6">
@@ -294,6 +222,12 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
             <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-foreground-subtle animate-spin" />
           )}
         </div>
+        <AddonUploadZone
+          onUploadSuccess={() => {
+            queryClient.invalidateQueries({ queryKey: ['addons'] })
+            onRefresh()
+          }}
+        />
         <button
           type="button"
           onClick={onRefresh}
@@ -315,7 +249,7 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
             </button>
           </div>
           <div className="max-h-64 overflow-auto divide-y divide-border">
-            {availableAddons.map((addon: any) => (
+            {availableAddons.map((addon) => (
               <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()}
@@ -326,9 +260,9 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
                     <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 && (
+                  {addon.keywords && 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) => (
+                      {addon.keywords.filter((k) => k !== 'camstack' && k !== 'addon' && k !== 'camstack-addon').slice(0, 5).map((k) => (
                         <span key={k} className="text-[9px] px-1.5 py-0 rounded bg-primary/5 text-foreground-subtle">{k}</span>
                       ))}
                     </div>
@@ -361,39 +295,20 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
         </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 className="space-y-2">
+        {packageGrouped.map((item) =>
+          isPackageGroup(item) ? (
+            <PackageGroupHeader key={item.packageName} group={item} agents={agents} />
+          ) : (
+            <AddonCard key={item.manifest.id} addon={item} agents={agents} />
+          ),
+        )}
+      </div>
     </div>
   )
 }
@@ -405,11 +320,10 @@ function InstalledTab({ addons, agents, onRefresh, isRefreshing }: InstalledTabP
 export function AddonsPage() {
   const client = useBackendClient()
   const queryClient = useQueryClient()
-  const [activeTab, setActiveTab] = useState<Tab>('installed')
 
-  const { data: rawAddons, isLoading, isError } = useQuery<RawAddonListItem[]>({
+  const { data: rawAddons, isLoading, isError } = useQuery({
     queryKey: ['addons', 'list'],
-    queryFn: () => client.listAddons() as unknown as Promise<RawAddonListItem[]>,
+    queryFn: () => client.listAddons(),
   })
 
   // Fetch agents for the "Add agent" dropdown in AddonCard
@@ -421,62 +335,36 @@ export function AddonsPage() {
 
   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.map((raw) => ({
+        id: raw.info.id,
+        name: raw.info.name ?? raw.info.id,
+        isHub: raw.isHub,
+      })),
     [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'] })
+    mutationFn: async () => {
+      // Force refresh update cache from npm + reload addon packages
+      await client.trpc.update.forceRefresh.mutate()
+      await client.trpc.bridgeAddons.reloadPackages.mutate()
     },
-  })
-
-  const updatePackageMutation = useMutation({
-    mutationFn: (name: string) => client.trpc.update.updatePackage.mutate({ name }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['updates'] })
       queryClient.invalidateQueries({ queryKey: ['addons'] })
+      queryClient.invalidateQueries({ queryKey: ['updates'] })
     },
   })
 
   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>
+          <h1 className="text-lg font-semibold text-foreground">Addons</h1>
           <p className="text-xs text-foreground-subtle mt-0.5">
-            Manage installed addons, check for updates, and explore capability providers.
+            Manage installed addons and explore capability providers.
           </p>
         </div>
         {!isLoading && !isError && (
@@ -486,19 +374,16 @@ export function AddonsPage() {
         )}
       </div>
 
-      {/* Tabs */}
-      <TabBar active={activeTab} onChange={setActiveTab} />
-
       {/* Loading / error states */}
-      {isLoading && activeTab === 'installed' && (
+      {isLoading && (
         <div className="text-xs text-foreground-subtle animate-pulse">Loading…</div>
       )}
-      {isError && activeTab === 'installed' && (
+      {isError && (
         <div className="text-xs text-danger">Failed to load addons</div>
       )}
 
-      {/* Tab content */}
-      {activeTab === 'installed' && !isLoading && !isError && (
+      {/* Installed addons */}
+      {!isLoading && !isError && (
         <InstalledTab
           addons={addonList}
           agents={agents}
@@ -506,20 +391,6 @@ export function AddonsPage() {
           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>
   )
 }