@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/pages/Timeline.tsx

@@ -1,269 +0,0 @@
-import { useState, useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { Film, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { useBackendClient } from '../hooks/useBackendClient'
-import { TimelineBar, type RecordingSegment, type TimelineEvent } from '../components/timeline/TimelineBar'
-
-// ---------------------------------------------------------------------------
-// Class → colour mapping
-// ---------------------------------------------------------------------------
-const CLASS_COLORS: Record<string, string> = {
-  person:    '#f59e0b',
-  vehicle:   '#3b82f6',
-  car:       '#3b82f6',
-  face:      '#a855f7',
-  plate:     '#ec4899',
-  animal:    '#10b981',
-  motion:    '#ef4444',
-  unknown:   '#6b7280',
-}
-
-function colorForClass(cls: string): string {
-  return CLASS_COLORS[cls.toLowerCase()] ?? CLASS_COLORS['unknown']!
-}
-
-// ---------------------------------------------------------------------------
-// Date helpers
-// ---------------------------------------------------------------------------
-function startOfDay(date: Date): number {
-  const d = new Date(date)
-  d.setHours(0, 0, 0, 0)
-  return d.getTime()
-}
-
-function formatDateInput(ms: number): string {
-  return new Date(ms).toISOString().slice(0, 10)
-}
-
-function parseDateInput(value: string): number {
-  return new Date(value + 'T00:00:00').getTime()
-}
-
-// ---------------------------------------------------------------------------
-// Placeholder segments (shown when no real API data exists)
-// ---------------------------------------------------------------------------
-function buildPlaceholderSegments(dayStartMs: number): readonly RecordingSegment[] {
-  return [
-    { startMs: dayStartMs + 0 * 3_600_000,  endMs: dayStartMs + 4 * 3_600_000 },
-    { startMs: dayStartMs + 6 * 3_600_000,  endMs: dayStartMs + 10 * 3_600_000 },
-    { startMs: dayStartMs + 12 * 3_600_000, endMs: dayStartMs + 16 * 3_600_000 },
-    { startMs: dayStartMs + 18 * 3_600_000, endMs: dayStartMs + 23 * 3_600_000 },
-  ]
-}
-
-function buildPlaceholderEvents(dayStartMs: number): readonly TimelineEvent[] {
-  const classes = ['person', 'vehicle', 'face', 'motion']
-  return Array.from({ length: 24 }, (_, i) => ({
-    id: `placeholder-${i}`,
-    timestampMs: dayStartMs + Math.floor(Math.random() * 24 * 3_600_000),
-    label: classes[i % classes.length]!,
-    color: colorForClass(classes[i % classes.length]!),
-  })).sort((a, b) => a.timestampMs - b.timestampMs)
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-export function TimelinePage() {
-  const { t } = useTranslation()
-  const client = useBackendClient()
-
-  const today = startOfDay(new Date())
-  const [selectedDayMs, setSelectedDayMs] = useState(today)
-  const [selectedCameraId, setSelectedCameraId] = useState<string | null>(null)
-  const [playheadMs, setPlayheadMs] = useState(today + 12 * 3_600_000)
-
-  const dayStartMs = selectedDayMs
-  const dayEndMs = selectedDayMs + 24 * 3_600_000
-
-  // Fetch devices to populate camera tabs
-  const { data: devices, isLoading: devicesLoading } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => client.listDevices(),
-    staleTime: 30_000,
-  })
-
-  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
-
-  const cameras = useMemo(() => {
-    const list = deviceList.filter((d) => {
-      const type = String(d.type ?? '').toLowerCase()
-      const caps = (d.capabilities ?? []) as string[]
-      return (
-        type === 'camera' ||
-        type.includes('camera') ||
-        caps.some((c) => c.toLowerCase().includes('video') || c.toLowerCase().includes('stream'))
-      )
-    })
-    return list.map((d) => ({ id: String(d.id), name: String(d.name ?? d.id) }))
-  }, [deviceList])
-
-  // Auto-select first camera
-  const activeCameraId = selectedCameraId ?? cameras[0]?.id ?? null
-
-  // Fetch real events for the selected camera on the selected day
-  const { data: rawEvents } = useQuery({
-    queryKey: ['events', activeCameraId, dayStartMs],
-    queryFn: (): Promise<unknown> =>
-      activeCameraId ? client.getEvents(activeCameraId, { limit: 200 }) : Promise.resolve(null),
-    enabled: !!activeCameraId,
-    staleTime: 60_000,
-  })
-
-  const timelineEvents: readonly TimelineEvent[] = useMemo(() => {
-    const raw = rawEvents as unknown
-    // getEvents returns { events: [...], total: n } or an array depending on router version
-    const evtsArr: unknown[] =
-      Array.isArray(raw)
-        ? (raw as unknown[])
-        : raw != null && typeof raw === 'object' && Array.isArray((raw as Record<string, unknown>)['events'])
-          ? ((raw as Record<string, unknown>)['events'] as unknown[])
-          : []
-    const evts = evtsArr as Array<Record<string, unknown>>
-    if (evts.length === 0) {
-      return activeCameraId ? buildPlaceholderEvents(dayStartMs) : []
-    }
-    return evts.map((ev, idx) => {
-      const cls = String((ev.class ?? ev.type ?? ev.label ?? 'unknown')).toLowerCase()
-      const ts = typeof ev.timestamp === 'number' ? ev.timestamp : dayStartMs
-      return {
-        id: String(ev.id ?? idx),
-        timestampMs: ts,
-        label: cls,
-        color: colorForClass(cls),
-      }
-    })
-  }, [rawEvents, activeCameraId, dayStartMs])
-
-  // Use placeholder segments (no real segment API exposed yet)
-  const segments: readonly RecordingSegment[] = useMemo(
-    () => (activeCameraId ? buildPlaceholderSegments(dayStartMs) : []),
-    [activeCameraId, dayStartMs],
-  )
-
-  function navigateDay(delta: number) {
-    setSelectedDayMs((prev) => prev + delta * 24 * 3_600_000)
-    setPlayheadMs((prev) => prev + delta * 24 * 3_600_000)
-  }
-
-  return (
-    <div className="flex flex-col h-full p-6 gap-5 overflow-hidden">
-      {/* ── Header ── */}
-      <div className="flex items-center justify-between gap-4 shrink-0">
-        <h1 className="text-lg font-semibold text-foreground">{t('nav.timeline', 'Timeline')}</h1>
-
-        {/* Date navigation */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => navigateDay(-1)}
-            className="p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-          <div className="relative flex items-center">
-            <Calendar className="absolute left-2 h-3.5 w-3.5 text-foreground-subtle pointer-events-none" />
-            <input
-              type="date"
-              value={formatDateInput(selectedDayMs)}
-              onChange={(e) => {
-                if (e.target.value) {
-                  const ms = parseDateInput(e.target.value)
-                  setSelectedDayMs(ms)
-                  setPlayheadMs(ms + 12 * 3_600_000)
-                }
-              }}
-              className="rounded-lg border border-border bg-surface pl-7 pr-3 py-1.5 text-xs text-foreground focus:outline-none focus:border-primary/50"
-            />
-          </div>
-          <button
-            onClick={() => navigateDay(1)}
-            className="p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-            disabled={selectedDayMs >= today}
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
-
-      {/* ── Camera selector tabs ── */}
-      <div className="flex gap-1.5 shrink-0 overflow-x-auto pb-1">
-        {devicesLoading && (
-          <div className="h-8 w-48 rounded-lg bg-surface animate-pulse" />
-        )}
-        {!devicesLoading && cameras.length === 0 && (
-          <span className="text-xs text-foreground-subtle">No cameras found</span>
-        )}
-        {cameras.map((cam) => {
-          const active = cam.id === activeCameraId
-          return (
-            <button
-              key={cam.id}
-              onClick={() => setSelectedCameraId(cam.id)}
-              className={`shrink-0 rounded-lg px-3 py-1.5 text-[12px] font-medium transition-all border ${
-                active
-                  ? 'bg-primary/12 text-primary border-primary/30'
-                  : 'bg-surface text-foreground-subtle border-border hover:bg-surface-hover hover:text-foreground'
-              }`}
-            >
-              {cam.name}
-            </button>
-          )
-        })}
-      </div>
-
-      {/* ── Video player placeholder ── */}
-      <div className="relative rounded-xl border border-border bg-black shrink-0 overflow-hidden" style={{ aspectRatio: '16/9', maxHeight: '45vh' }}>
-        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-foreground-subtle">
-          <Film className="h-12 w-12 opacity-20" />
-          <p className="text-sm opacity-50">
-            {activeCameraId
-              ? `${cameras.find((c) => c.id === activeCameraId)?.name ?? activeCameraId} — seek to play`
-              : 'Select a camera'}
-          </p>
-        </div>
-
-        {/* Playhead timestamp overlay */}
-        <div className="absolute top-3 left-3 rounded bg-black/60 px-2 py-1 text-[11px] text-white font-mono">
-          {new Date(playheadMs).toLocaleTimeString()}
-        </div>
-      </div>
-
-      {/* ── Timeline scrub bar ── */}
-      <div className="rounded-xl border border-border bg-surface px-4 pt-3 pb-4 shrink-0">
-        {/* Legend */}
-        <div className="flex items-center gap-4 mb-3">
-          <span className="text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider">Timeline</span>
-          <div className="flex items-center gap-1.5">
-            <span className="inline-block h-2 w-4 rounded-sm bg-success/60" />
-            <span className="text-[10px] text-foreground-subtle">Recording</span>
-          </div>
-          {Array.from(new Set(timelineEvents.map((e) => e.label))).slice(0, 5).map((cls) => (
-            <div key={cls} className="flex items-center gap-1.5">
-              <span
-                className="inline-block h-2.5 w-2.5 rounded-full"
-                style={{ backgroundColor: colorForClass(cls) }}
-              />
-              <span className="text-[10px] text-foreground-subtle capitalize">{cls}</span>
-            </div>
-          ))}
-        </div>
-
-        {activeCameraId ? (
-          <TimelineBar
-            startMs={dayStartMs}
-            endMs={dayEndMs}
-            segments={segments}
-            events={timelineEvents}
-            playheadMs={playheadMs}
-            onSeek={setPlayheadMs}
-          />
-        ) : (
-          <div className="h-8 rounded bg-surface-hover flex items-center justify-center text-xs text-foreground-subtle">
-            Select a camera to view timeline
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/pages/system/Addons.tsx

@@ -1,396 +0,0 @@
-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 { useBackendClient } from '../../hooks/useBackendClient'
-
-// ---------------------------------------------------------------------------
-// Types — inferred from tRPC addons.list return type
-// ---------------------------------------------------------------------------
-
-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 (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: true,
-    hasConfigSchema: raw.hasConfigSchema ?? false,
-    group: deriveGroup(raw.manifest, raw.source),
-    source: raw.source,
-    installedOn: [],
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Group definitions
-// ---------------------------------------------------------------------------
-
-// Groups removed — flat list with package grouping only
-
-// ---------------------------------------------------------------------------
-// Installed tab
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Package group — collapsible header for addons from the same npm package
-// ---------------------------------------------------------------------------
-
-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[] = []
-
-  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,
-        displayName: (addon.manifest as any).packageDisplayName ?? addon.manifest.name,
-        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">
-      {/* 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 justify-center border-t border-border py-1 hover:bg-surface-hover/50 transition-colors"
-      >
-        {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} hideVersion />
-          ))}
-        </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 packageGrouped = groupByPackage(addons)
-
-  // Filter search results: hide already installed
-  const availableAddons = (searchResults ?? []).filter((r) => !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>
-        <AddonUploadZone
-          onUploadSuccess={() => {
-            queryClient.invalidateQueries({ queryKey: ['addons'] })
-            onRefresh()
-          }}
-        />
-        <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) => (
-              <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 && addon.keywords.length > 0 && (
-                    <div className="flex gap-1 mt-0.5 flex-wrap">
-                      {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>
-                  )}
-                </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>
-      )}
-
-      {/* Installed addons grouped */}
-      {addons.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No addons installed</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>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Main page
-// ---------------------------------------------------------------------------
-
-export function AddonsPage() {
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-
-  const { data: rawAddons, isLoading, isError } = useQuery({
-    queryKey: ['addons', 'list'],
-    queryFn: () => client.listAddons(),
-  })
-
-  // 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.map((raw) => ({
-        id: raw.info.id,
-        name: raw.info.name ?? raw.info.id,
-        isHub: raw.isHub,
-      })),
-    [rawAgents],
-  )
-
-  const reloadMutation = useMutation({
-    mutationFn: async () => {
-      // Force refresh update cache from npm + reload addon packages
-      await client.trpc.update.forceRefresh.mutate()
-      await client.trpc.bridgeAddons.reloadPackages.mutate()
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-      queryClient.invalidateQueries({ queryKey: ['updates'] })
-    },
-  })
-
-  const addonList: AddonListItem[] = (rawAddons ?? []).map(normaliseAddon).filter((a): a is AddonListItem => a !== null)
-
-  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</h1>
-          <p className="text-xs text-foreground-subtle mt-0.5">
-            Manage installed addons 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>
-
-      {/* Loading / error states */}
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading…</div>
-      )}
-      {isError && (
-        <div className="text-xs text-danger">Failed to load addons</div>
-      )}
-
-      {/* Installed addons */}
-      {!isLoading && !isError && (
-        <InstalledTab
-          addons={addonList}
-          agents={agents}
-          onRefresh={() => reloadMutation.mutate()}
-          isRefreshing={reloadMutation.isPending}
-        />
-      )}
-    </div>
-  )
-}