@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/addons/AddonCard.tsx

@@ -1,355 +0,0 @@
-import { useState, useEffect } from 'react'
-import { ChevronDown, ChevronUp, Plus, Trash2, Save, Loader2, Package, Puzzle, Download } from 'lucide-react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { VersionBadge } from '@camstack/ui'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { useConfirm } from '../ui/ConfirmDialog'
-import { FormBuilder } from '../form-builder/FormBuilder'
-import type { ConfigUISchema } from '../../types/config-ui'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface AddonManifest {
-  id: string
-  name: string
-  version: string
-  description?: string
-  capabilities: readonly (string | { name: string; mode?: string })[]
-  requiredFeatures?: readonly string[]
-  removable?: boolean
-  protected?: boolean
-  components?: string[]
-  packageName: string
-  packageVersion: string
-}
-
-export interface AddonListItem {
-  manifest: AddonManifest
-  enabled: boolean
-  hasConfigSchema: boolean
-  group?: 'core' | 'addon' | 'provider' | 'page'
-  source?: 'core' | 'installed' | 'workspace'
-  installedOn?: string[]
-}
-
-// ---------------------------------------------------------------------------
-// Icon letter
-// ---------------------------------------------------------------------------
-
-const GROUP_COLORS: Record<string, string> = {
-  core:     'bg-blue-500/20 text-blue-300',
-  addon:    'bg-purple-500/20 text-purple-300',
-  provider: 'bg-green-500/20 text-green-300',
-  page:     'bg-orange-500/20 text-orange-300',
-}
-
-function AddonIcon({ name, group, isBundle }: { name: string; group?: string; isBundle?: boolean }) {
-  const color = GROUP_COLORS[group ?? 'addon'] ?? GROUP_COLORS['addon']!
-  return (
-    <div className={`flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center ${color}`}>
-      {isBundle ? (
-        <Package className="h-4 w-4" />
-      ) : (
-        <Puzzle className="h-4 w-4" />
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// AddonCard
-// ---------------------------------------------------------------------------
-
-export interface AgentInfo {
-  id: string
-  name: string
-  isHub: boolean
-}
-
-interface AddonCardProps {
-  addon: AddonListItem
-  agents?: AgentInfo[]
-  /** Hide version when addon is part of a package bundle */
-  hideVersion?: boolean
-  /** Latest available version from npm (if update available) */
-  availableUpdate?: string
-  /** Callback when user clicks the update button */
-  onUpdate?: () => void
-}
-
-export function AddonCard({ addon, agents = [], hideVersion, availableUpdate, onUpdate }: AddonCardProps) {
-  const [expanded, setExpanded] = useState(false)
-  const [agentDropdownOpen, setAgentDropdownOpen] = useState(false)
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const confirm = useConfirm()
-
-  const { manifest } = addon
-  const installedOn = addon.installedOn ?? []
-  const removable = !manifest.protected && manifest.removable !== false
-  // Only expandable if addon has config, components, or agents to show
-  const hasExpandableContent = addon.hasConfigSchema || (manifest.components && manifest.components.length > 0) || (agents.length >= 2)
-
-  // Load config schema when expanded and addon has config
-  const { data: configSchema, isLoading: schemaLoading } = useQuery({
-    queryKey: ['addon-config-schema', manifest.id],
-    queryFn: () => client.trpc.addons.getConfigSchema.query({ addonId: manifest.id }) as Promise<ConfigUISchema | null>,
-    enabled: expanded && addon.hasConfigSchema,
-    staleTime: 60_000,
-  })
-
-  // Load current config values
-  const { data: configValues } = useQuery({
-    queryKey: ['addon-config', manifest.id],
-    queryFn: () => client.trpc.addons.getConfig.query({ addonId: manifest.id }) as Promise<Record<string, unknown> | null>,
-    enabled: expanded && addon.hasConfigSchema,
-    staleTime: 30_000,
-  })
-
-  // Local state for editing
-  const [editValues, setEditValues] = useState<Record<string, unknown>>({})
-  const [dirty, setDirty] = useState(false)
-
-  useEffect(() => {
-    if (configValues) {
-      setEditValues(configValues)
-      setDirty(false)
-    }
-  }, [configValues])
-
-  const handleChange = (values: Record<string, unknown>) => {
-    setEditValues(values)
-    setDirty(true)
-  }
-
-  // Save config
-  const saveMutation = useMutation({
-    mutationFn: () => client.trpc.addons.updateConfig.mutate({ addonId: manifest.id, config: editValues }),
-    onSuccess: () => {
-      setDirty(false)
-      queryClient.invalidateQueries({ queryKey: ['addon-config', manifest.id] })
-    },
-  })
-
-  // Uninstall
-  const uninstallMutation = useMutation({
-    mutationFn: () => {
-      console.log(`[AddonCard] Uninstalling ${manifest.packageName}`)
-      return client.trpc.bridgeAddons.uninstallPackage.mutate({ packageName: manifest.packageName })
-    },
-    onSuccess: () => {
-      console.log(`[AddonCard] Uninstalled ${manifest.packageName}`)
-      queryClient.invalidateQueries({ queryKey: ['addons'] })
-      queryClient.invalidateQueries({ queryKey: ['addon-pages'] })
-      queryClient.invalidateQueries({ queryKey: ['capabilities'] })
-    },
-    onError: (err) => {
-      console.error(`[AddonCard] Uninstall failed:`, err)
-    },
-  })
-
-  return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
-      {/* Header row */}
-      <div
-        className={[
-          'flex items-start gap-3 px-4 py-3 transition-colors',
-          hasExpandableContent ? 'cursor-pointer hover:bg-surface-hover/50' : '',
-        ].join(' ')}
-        onClick={() => hasExpandableContent && setExpanded((e) => !e)}
-      >
-        <AddonIcon name={manifest.name} group={addon.group} isBundle={!!manifest.components && manifest.components.length > 1} />
-
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-foreground truncate">{manifest.name}</span>
-            <span className="text-[10px] text-foreground-subtle font-mono shrink-0">({manifest.packageName})</span>
-            {addon.source === 'workspace' && (
-              <span className="text-[10px] rounded-full bg-orange-500/15 text-orange-400 px-2 py-0.5 font-medium shrink-0">
-                DEV
-              </span>
-            )}
-            {!hideVersion && (
-              <span className="ml-auto shrink-0 inline-flex items-center gap-1.5">
-                {availableUpdate && onUpdate && (
-                  <button
-                    type="button"
-                    onClick={(e) => { e.stopPropagation(); onUpdate() }}
-                    className="rounded-full bg-primary/10 text-primary hover:bg-primary/20 p-1 transition-colors"
-                    title={`Update to v${availableUpdate}`}
-                  >
-                    <Download className="h-3 w-3" />
-                  </button>
-                )}
-                <VersionBadge version={manifest.version} />
-              </span>
-            )}
-          </div>
-
-          {manifest.description && (
-            <p className="text-[10px] text-foreground-subtle mt-0.5 line-clamp-1">{manifest.description}</p>
-          )}
-
-        </div>
-
-        {/* Actions: uninstall + expand chevron */}
-        <div className="flex items-center gap-2 shrink-0 pt-1">
-          {removable && (
-            <button
-              type="button"
-              onClick={async (e) => {
-                e.stopPropagation()
-                console.log('[AddonCard] Confirm dialog opening...')
-                const confirmed = await confirm({
-                  title: `Uninstall ${manifest.name}?`,
-                  message: `This will remove the addon package and all its data. This action cannot be undone.`,
-                  confirmLabel: 'Uninstall',
-                  variant: 'danger',
-                })
-                if (confirmed) uninstallMutation.mutate()
-              }}
-              disabled={uninstallMutation.isPending}
-              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-red-400 hover:bg-red-500/10 disabled:opacity-50 transition-colors"
-              title={`Uninstall ${manifest.name}`}
-            >
-              <Trash2 className="h-3 w-3" />
-              {uninstallMutation.isPending && 'Removing...'}
-            </button>
-          )}
-          {hasExpandableContent && (
-            expanded ? <ChevronUp className="h-4 w-4 text-foreground-subtle" /> : <ChevronDown className="h-4 w-4 text-foreground-subtle" />
-          )}
-        </div>
-      </div>
-
-      {/* Expanded: settings inline */}
-      {expanded && (
-        <div className="border-t border-border px-4 py-3 space-y-4">
-
-          {/* Config form — loaded from backend */}
-          {addon.hasConfigSchema && (
-            <div>
-              {schemaLoading && (
-                <div className="flex items-center gap-2 text-xs text-foreground-subtle py-2">
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                  Loading configuration...
-                </div>
-              )}
-
-              {configSchema && configSchema.sections?.some((s: any) => s.fields?.length > 0) && (
-                <div className="space-y-3">
-                  <FormBuilder
-                    schema={configSchema}
-                    values={editValues}
-                    onChange={handleChange}
-                  />
-                  {dirty && (
-                    <div className="flex items-center justify-between">
-                      <span className="text-[10px] text-orange-400">Unsaved changes</span>
-                      <button
-                        type="button"
-                        onClick={(e) => { e.stopPropagation(); saveMutation.mutate() }}
-                        disabled={saveMutation.isPending}
-                        className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
-                      >
-                        {saveMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
-                        {saveMutation.isPending ? 'Saving...' : 'Save'}
-                      </button>
-                    </div>
-                  )}
-                  {saveMutation.isError && (
-                    <div className="text-[10px] text-red-400">
-                      Save failed: {saveMutation.error instanceof Error ? saveMutation.error.message : 'Unknown error'}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* No fallback message — addons without config don't show the expander */}
-            </div>
-          )}
-
-          {/* No message for addons without config — just show other sections */}
-
-          {/* Components list (for core) */}
-          {manifest.components && manifest.components.length > 0 && (
-            <div>
-              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-2">
-                Components ({manifest.components.length})
-              </div>
-              <div className="flex flex-wrap gap-1">
-                {manifest.components.map((comp) => (
-                  <span key={comp} className="text-[10px] rounded bg-background border border-border px-1.5 py-0.5 text-foreground-subtle font-mono">
-                    {comp}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Installed on agents — only show when remote agents exist (2+ total) */}
-          {agents.length >= 2 && (
-            <div>
-              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-2">
-                Installed on
-              </div>
-              <div className="flex items-center gap-1.5 flex-wrap">
-                {installedOn.length === 0 && (
-                  <span className="text-[10px] text-foreground-subtle">Hub (local)</span>
-                )}
-                {installedOn.map((agentName) => (
-                  <span
-                    key={agentName}
-                    className="rounded-full bg-surface-hover border border-border px-2 py-0.5 text-[10px] text-foreground-subtle"
-                  >
-                    {agentName}
-                  </span>
-                ))}
-                <div className="relative">
-                  <button
-                    type="button"
-                    onClick={(e) => { e.stopPropagation(); setAgentDropdownOpen((o) => !o) }}
-                    className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2 py-0.5 text-[10px] text-foreground-subtle hover:text-foreground hover:border-primary transition-colors"
-                    title="Install on more agents"
-                  >
-                    <Plus className="h-3 w-3" />
-                    Add agent
-                  </button>
-                  {agentDropdownOpen && (
-                    <div className="absolute left-0 top-full mt-1 z-10 min-w-[160px] rounded-md border border-border bg-surface shadow-lg overflow-hidden">
-                      {agents
-                        .filter((a) => !a.isHub && !installedOn.includes(a.name))
-                        .map((agent) => (
-                          <button
-                            key={agent.id}
-                            type="button"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              setAgentDropdownOpen(false)
-                              // TODO: wire up install-on-agent mutation
-                            }}
-                            className="w-full text-left px-3 py-1.5 text-[10px] text-foreground hover:bg-surface-hover transition-colors"
-                          >
-                            {agent.name}
-                          </button>
-                        ))}
-                      {agents.filter((a) => !a.isHub && !installedOn.includes(a.name)).length === 0 && (
-                        <div className="px-3 py-1.5 text-[10px] text-foreground-subtle">
-                          No available agents
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Uninstall button is now inline in the header */}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/addons/AddonUploadZone.tsx

@@ -1,69 +0,0 @@
-import { useRef, useCallback, useState } from 'react'
-import { Upload, Loader2 } from 'lucide-react'
-
-interface AddonUploadZoneProps {
-  onUploadSuccess: () => void
-}
-
-const ACCEPT_MIME = '.tgz,.tar.gz,.zip'
-
-export function AddonUploadZone({ onUploadSuccess }: AddonUploadZoneProps) {
-  const [uploading, setUploading] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const uploadFile = useCallback(
-    async (file: File) => {
-      setUploading(true)
-      const formData = new FormData()
-      formData.append('file', file)
-      const token = localStorage.getItem('camstack_admin_token') ?? ''
-
-      try {
-        const res = await fetch('/api/addons/upload', {
-          method: 'POST',
-          headers: { Authorization: `Bearer ${token}` },
-          body: formData,
-        })
-        const body = await res.json()
-        if (body.success) onUploadSuccess()
-      } finally {
-        setUploading(false)
-      }
-    },
-    [onUploadSuccess],
-  )
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) uploadFile(file)
-      e.target.value = ''
-    },
-    [uploadFile],
-  )
-
-  return (
-    <>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPT_MIME}
-        onChange={handleFileSelect}
-        className="hidden"
-      />
-      <button
-        type="button"
-        onClick={() => fileInputRef.current?.click()}
-        disabled={uploading}
-        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"
-      >
-        {uploading ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        ) : (
-          <Upload className="w-3.5 h-3.5" />
-        )}
-        {uploading ? 'Uploading...' : 'Upload'}
-      </button>
-    </>
-  )
-}

package/src/components/addons/CapabilityBadge.tsx

@@ -1,55 +0,0 @@
-const CAPABILITY_COLORS: Record<string, string> = {
-  // detection / vision
-  detection:    'bg-green-500/10 text-green-400',
-  detector:     'bg-green-500/10 text-green-400',
-  // streaming
-  streaming:    'bg-blue-500/10 text-blue-400',
-  decode:       'bg-blue-500/10 text-blue-400',
-  decoder:      'bg-blue-500/10 text-blue-400',
-  // recording
-  recording:    'bg-orange-500/10 text-orange-400',
-  recorder:     'bg-orange-500/10 text-orange-400',
-  // transcoding
-  transcoding:  'bg-purple-500/10 text-purple-400',
-  transcoder:   'bg-purple-500/10 text-purple-400',
-  transcode:    'bg-purple-500/10 text-purple-400',
-  // restream
-  restream:     'bg-cyan-500/10 text-cyan-400',
-  restreamer:   'bg-cyan-500/10 text-cyan-400',
-  // storage
-  storage:      'bg-yellow-500/10 text-yellow-400',
-  // notification
-  notification: 'bg-pink-500/10 text-pink-400',
-  notifier:     'bg-pink-500/10 text-pink-400',
-  // faces
-  faces:        'bg-indigo-500/10 text-indigo-400',
-  // default
-}
-
-interface CapabilityBadgeProps {
-  /** Capability name (string) or declaration object ({ name, mode }) */
-  capability: string | { name: string; mode?: string }
-  /** Optional mode label shown after a separator (overrides object mode) */
-  mode?: string
-  size?: 'sm' | 'xs'
-}
-
-export function CapabilityBadge({ capability, mode, size = 'xs' }: CapabilityBadgeProps) {
-  const capName = typeof capability === 'string' ? capability : capability.name
-  const capMode = mode ?? (typeof capability === 'object' ? capability.mode : undefined)
-  const lower = capName.toLowerCase()
-  const color = CAPABILITY_COLORS[lower] ?? 'bg-primary/10 text-primary'
-  const textSize = size === 'sm' ? 'text-xs' : 'text-[10px]'
-
-  return (
-    <span className={`inline-flex items-center rounded-md px-1.5 py-0.5 font-medium gap-1 ${textSize} ${color}`}>
-      {capName}
-      {capMode && (
-        <>
-          <span className="opacity-40">·</span>
-          <span className="opacity-70">{capMode}</span>
-        </>
-      )}
-    </span>
-  )
-}

package/src/components/addons/CapabilityMap.tsx

@@ -1,133 +0,0 @@
-import { CheckCircle } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export type CapabilityMode = 'singleton' | 'collection'
-
-export interface CapabilityProvider {
-  addonId: string
-  addonName: string
-  active: boolean
-}
-
-export interface CapabilityEntry {
-  name: string
-  mode: CapabilityMode
-  providers: CapabilityProvider[]
-}
-
-// ---------------------------------------------------------------------------
-// Color helpers
-// ---------------------------------------------------------------------------
-
-const CAPABILITY_BORDER_COLORS: Record<string, string> = {
-  detection:    'border-green-500',
-  detector:     'border-green-500',
-  streaming:    'border-blue-500',
-  decode:       'border-blue-500',
-  decoder:      'border-blue-500',
-  recording:    'border-orange-500',
-  recorder:     'border-orange-500',
-  transcoding:  'border-purple-500',
-  transcoder:   'border-purple-500',
-  restream:     'border-cyan-500',
-  restreamer:   'border-cyan-500',
-  storage:      'border-yellow-500',
-  notification: 'border-pink-500',
-  notifier:     'border-pink-500',
-  faces:        'border-indigo-500',
-}
-
-const CAPABILITY_BG_COLORS: Record<string, string> = {
-  detection:    'bg-green-500/5',
-  detector:     'bg-green-500/5',
-  streaming:    'bg-blue-500/5',
-  decode:       'bg-blue-500/5',
-  decoder:      'bg-blue-500/5',
-  recording:    'bg-orange-500/5',
-  recorder:     'bg-orange-500/5',
-  transcoding:  'bg-purple-500/5',
-  transcoder:   'bg-purple-500/5',
-  restream:     'bg-cyan-500/5',
-  restreamer:   'bg-cyan-500/5',
-  storage:      'bg-yellow-500/5',
-  notification: 'bg-pink-500/5',
-  notifier:     'bg-pink-500/5',
-  faces:        'bg-indigo-500/5',
-}
-
-// ---------------------------------------------------------------------------
-// CapabilityCard
-// ---------------------------------------------------------------------------
-
-function CapabilityCard({ entry }: { entry: CapabilityEntry }) {
-  const lower = entry.name.toLowerCase()
-  const borderColor = CAPABILITY_BORDER_COLORS[lower] ?? 'border-primary'
-  const bgColor = CAPABILITY_BG_COLORS[lower] ?? 'bg-primary/5'
-  const activeProvider = entry.providers.find((p) => p.active)
-
-  return (
-    <div className={`rounded-lg border-t-2 border border-border ${borderColor} ${bgColor} p-3 space-y-2`}>
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-xs font-semibold text-foreground capitalize">{entry.name}</span>
-        <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${entry.mode === 'singleton' ? 'bg-primary/10 text-primary' : 'bg-info/10 text-info'}`}>
-          {entry.mode}
-        </span>
-      </div>
-
-      {entry.mode === 'singleton' ? (
-        <div>
-          {activeProvider ? (
-            <div className="flex items-center gap-1.5 text-[10px] text-foreground">
-              <CheckCircle className="h-3 w-3 text-green-400 shrink-0" />
-              <span className="font-medium">{activeProvider.addonName}</span>
-              <span className="rounded-full bg-green-500/10 text-green-400 px-1.5 py-0.5 font-medium ml-auto">ACTIVE</span>
-            </div>
-          ) : (
-            <div className="text-[10px] text-foreground-subtle italic">No active provider</div>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-1">
-          {entry.providers.length === 0 && (
-            <div className="text-[10px] text-foreground-subtle italic">No providers</div>
-          )}
-          {entry.providers.map((p) => (
-            <div key={p.addonId} className="flex items-center justify-between gap-2 text-[10px]">
-              <span className="text-foreground-subtle">{p.addonName}</span>
-              {p.active && (
-                <span className="rounded-full bg-green-500/10 text-green-400 px-1.5 py-0.5 font-medium">ACTIVE</span>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// CapabilityMap
-// ---------------------------------------------------------------------------
-
-interface CapabilityMapProps {
-  capabilities: CapabilityEntry[]
-}
-
-export function CapabilityMap({ capabilities }: CapabilityMapProps) {
-  if (capabilities.length === 0) {
-    return (
-      <div className="text-xs text-foreground-subtle text-center py-8">No capabilities registered</div>
-    )
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-      {capabilities.map((cap) => (
-        <CapabilityCard key={cap.name} entry={cap} />
-      ))}
-    </div>
-  )
-}