@camstack/addon-admin-ui 0.1.1

package/src/components/addons/AddonCard.tsx

@@ -0,0 +1,339 @@
+import { useState, useEffect } from 'react'
+import { ChevronDown, ChevronUp, Plus, Trash2, Save, Loader2 } from 'lucide-react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { CapabilityBadge } from './CapabilityBadge'
+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
+  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 }: { name: string; group?: string }) {
+  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 font-bold text-sm uppercase ${color}`}>
+      {name.charAt(0)}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AddonCard
+// ---------------------------------------------------------------------------
+
+export interface AgentInfo {
+  id: string
+  name: string
+  isHub: boolean
+}
+
+interface AddonCardProps {
+  addon: AddonListItem
+  agents?: AgentInfo[]
+}
+
+export function AddonCard({ addon, agents = [] }: 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.removable !== false && addon.source !== 'core'
+  // 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} />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-semibold text-foreground truncate">{manifest.name}</span>
+            <span className="text-[10px] rounded-full bg-primary/10 text-primary px-2 py-0.5 font-medium shrink-0">
+              v{manifest.version}
+            </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>
+            )}
+          </div>
+
+          {manifest.description && (
+            <p className="text-[10px] text-foreground-subtle mt-0.5 line-clamp-1">{manifest.description}</p>
+          )}
+
+          {/* Capability badges */}
+          {manifest.capabilities.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1.5">
+              {manifest.capabilities.map((cap, i) => (
+                <CapabilityBadge key={i} capability={cap} />
+              ))}
+            </div>
+          )}
+        </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

@@ -0,0 +1,307 @@
+import { useState, useRef, useCallback } from 'react'
+import { Upload, FileArchive, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type UploadStatus = 'idle' | 'dragging' | 'uploading' | 'success' | 'error'
+
+interface UploadResult {
+  success: boolean
+  packageName?: string
+  version?: string
+  error?: string
+}
+
+interface AddonUploadZoneProps {
+  onUploadSuccess: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Accepted file extensions
+// ---------------------------------------------------------------------------
+
+const ACCEPTED_EXTENSIONS = ['.tgz', '.tar.gz', '.zip']
+const ACCEPT_MIME = '.tgz,.tar.gz,.zip'
+
+function isAcceptedFile(file: File): boolean {
+  const name = file.name.toLowerCase()
+  return ACCEPTED_EXTENSIONS.some((ext) => name.endsWith(ext))
+}
+
+// ---------------------------------------------------------------------------
+// AddonUploadZone
+// ---------------------------------------------------------------------------
+
+export function AddonUploadZone({ onUploadSuccess }: AddonUploadZoneProps) {
+  const [status, setStatus] = useState<UploadStatus>('idle')
+  const [progress, setProgress] = useState(0)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [result, setResult] = useState<UploadResult | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const resetState = useCallback(() => {
+    setStatus('idle')
+    setProgress(0)
+    setSelectedFile(null)
+    setResult(null)
+  }, [])
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      if (!isAcceptedFile(file)) {
+        setStatus('error')
+        setResult({ success: false, error: `Invalid file type. Accepted: ${ACCEPTED_EXTENSIONS.join(', ')}` })
+        return
+      }
+
+      setSelectedFile(file)
+      setStatus('uploading')
+      setProgress(0)
+      setResult(null)
+
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const token = localStorage.getItem('camstack_admin_token') ?? ''
+
+      try {
+        const xhr = new XMLHttpRequest()
+
+        const uploadResult = await new Promise<UploadResult>((resolve, reject) => {
+          xhr.upload.addEventListener('progress', (event) => {
+            if (event.lengthComputable) {
+              const pct = Math.round((event.loaded / event.total) * 100)
+              setProgress(pct)
+            }
+          })
+
+          xhr.addEventListener('load', () => {
+            try {
+              const body = JSON.parse(xhr.responseText)
+              if (xhr.status >= 200 && xhr.status < 300 && body.success) {
+                resolve({
+                  success: true,
+                  packageName: body.packageName,
+                  version: body.version,
+                })
+              } else {
+                resolve({
+                  success: false,
+                  error: body.error ?? `Upload failed (HTTP ${xhr.status})`,
+                })
+              }
+            } catch {
+              resolve({ success: false, error: `Unexpected response (HTTP ${xhr.status})` })
+            }
+          })
+
+          xhr.addEventListener('error', () => {
+            reject(new Error('Network error'))
+          })
+
+          xhr.addEventListener('abort', () => {
+            reject(new Error('Upload aborted'))
+          })
+
+          xhr.open('POST', '/api/addons/upload')
+          xhr.setRequestHeader('Authorization', `Bearer ${token}`)
+          xhr.send(formData)
+        })
+
+        setResult(uploadResult)
+        setStatus(uploadResult.success ? 'success' : 'error')
+
+        if (uploadResult.success) {
+          onUploadSuccess()
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Upload failed'
+        setResult({ success: false, error: message })
+        setStatus('error')
+      }
+    },
+    [onUploadSuccess],
+  )
+
+  // --- Drag event handlers ---
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setStatus((prev) => (prev === 'uploading' ? prev : 'dragging'))
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    // Only leave when exiting the drop zone itself
+    if (e.currentTarget.contains(e.relatedTarget as Node)) return
+    setStatus((prev) => (prev === 'uploading' ? prev : 'idle'))
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setStatus('idle')
+
+      const file = e.dataTransfer.files[0]
+      if (file) {
+        uploadFile(file)
+      }
+    },
+    [uploadFile],
+  )
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) {
+        uploadFile(file)
+      }
+      // Reset input so the same file can be re-selected
+      e.target.value = ''
+    },
+    [uploadFile],
+  )
+
+  const handleBrowseClick = useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  // --- Render helpers ---
+
+  const isIdle = status === 'idle' || status === 'dragging'
+  const isDragging = status === 'dragging'
+
+  return (
+    <div className="space-y-2">
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPT_MIME}
+        onChange={handleFileSelect}
+        className="hidden"
+      />
+
+      {/* Drop zone */}
+      <div
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onClick={isIdle ? handleBrowseClick : undefined}
+        className={[
+          'relative rounded-lg border-2 border-dashed transition-all cursor-pointer',
+          'flex flex-col items-center justify-center gap-2 px-6 py-6',
+          isDragging
+            ? 'border-primary bg-primary/5 scale-[1.01]'
+            : status === 'uploading'
+              ? 'border-border bg-surface cursor-default'
+              : status === 'success'
+                ? 'border-green-500/40 bg-green-500/5 cursor-default'
+                : status === 'error'
+                  ? 'border-red-500/40 bg-red-500/5 cursor-default'
+                  : 'border-border bg-surface hover:border-primary/50 hover:bg-surface-hover/50',
+        ].join(' ')}
+      >
+        {/* Idle / dragging state */}
+        {isIdle && (
+          <>
+            <Upload className={`h-6 w-6 ${isDragging ? 'text-primary' : 'text-foreground-subtle'}`} />
+            <div className="text-center">
+              <p className="text-xs font-medium text-foreground">
+                {isDragging ? 'Drop addon file here' : 'Drag & drop addon file'}
+              </p>
+              <p className="text-[10px] text-foreground-subtle mt-0.5">
+                or{' '}
+                <span className="text-primary underline underline-offset-2">browse files</span>
+                {' '}&middot; .tgz, .tar.gz, .zip
+              </p>
+            </div>
+          </>
+        )}
+
+        {/* Uploading state */}
+        {status === 'uploading' && selectedFile && (
+          <>
+            <div className="flex items-center gap-2">
+              <FileArchive className="h-5 w-5 text-primary shrink-0" />
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-foreground truncate">{selectedFile.name}</p>
+                <p className="text-[10px] text-foreground-subtle">
+                  {(selectedFile.size / 1024).toFixed(1)} KB
+                </p>
+              </div>
+            </div>
+
+            {/* Progress bar */}
+            <div className="w-full max-w-xs">
+              <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
+                <div
+                  className="h-full rounded-full bg-primary transition-all duration-300 ease-out"
+                  style={{ width: `${progress}%` }}
+                />
+              </div>
+              <div className="flex items-center justify-between mt-1">
+                <span className="text-[10px] text-foreground-subtle flex items-center gap-1">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  Uploading...
+                </span>
+                <span className="text-[10px] text-foreground-subtle font-mono">{progress}%</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Success state */}
+        {status === 'success' && result && (
+          <>
+            <CheckCircle className="h-6 w-6 text-green-500" />
+            <div className="text-center">
+              <p className="text-xs font-medium text-foreground">Addon installed</p>
+              <p className="text-[10px] text-foreground-subtle mt-0.5">
+                {result.packageName} v{result.version}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); resetState() }}
+              className="absolute top-2 right-2 p-1 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
+              title="Dismiss"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </>
+        )}
+
+        {/* Error state */}
+        {status === 'error' && result && (
+          <>
+            <AlertCircle className="h-6 w-6 text-red-400" />
+            <div className="text-center">
+              <p className="text-xs font-medium text-red-400">Upload failed</p>
+              <p className="text-[10px] text-foreground-subtle mt-0.5">{result.error}</p>
+            </div>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); resetState() }}
+              className="absolute top-2 right-2 p-1 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
+              title="Dismiss"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}