@camstack/addon-admin-ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/addon-admin-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "description": "CamStack Admin UI — Vite frontend build and server-side addon",
@@ -13,6 +13,7 @@
     "./package.json": "./package.json"
   },
   "camstack": {
+    "displayName": "Admin UI",
     "addons": [
       {
         "id": "admin-ui",

package/src/components/addons/AddonCard.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
-import { ChevronDown, ChevronUp, Plus, Trash2, Save, Loader2 } from 'lucide-react'
+import { ChevronDown, ChevronUp, Plus, Trash2, Save, Loader2, Package, Puzzle, Download } from 'lucide-react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { CapabilityBadge } from './CapabilityBadge'
+import { VersionBadge } from '@camstack/ui'
 import { useBackendClient } from '../../hooks/useBackendClient'
 import { useConfirm } from '../ui/ConfirmDialog'
 import { FormBuilder } from '../form-builder/FormBuilder'
@@ -19,6 +19,7 @@ export interface AddonManifest {
   capabilities: readonly (string | { name: string; mode?: string })[]
   requiredFeatures?: readonly string[]
   removable?: boolean
+  protected?: boolean
   components?: string[]
   packageName: string
   packageVersion: string
@@ -44,11 +45,15 @@ const GROUP_COLORS: Record<string, string> = {
   page:     'bg-orange-500/20 text-orange-300',
 }
 
-function AddonIcon({ name, group }: { name: string; group?: string }) {
+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 font-bold text-sm uppercase ${color}`}>
-      {name.charAt(0)}
+    <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>
   )
 }
@@ -66,9 +71,15 @@ export interface AgentInfo {
 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 = [] }: AddonCardProps) {
+export function AddonCard({ addon, agents = [], hideVersion, availableUpdate, onUpdate }: AddonCardProps) {
   const [expanded, setExpanded] = useState(false)
   const [agentDropdownOpen, setAgentDropdownOpen] = useState(false)
   const client = useBackendClient()
@@ -77,7 +88,7 @@ export function AddonCard({ addon, agents = [] }: AddonCardProps) {
 
   const { manifest } = addon
   const installedOn = addon.installedOn ?? []
-  const removable = manifest.removable !== false && addon.source !== 'core'
+  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)
 
@@ -149,33 +160,38 @@ export function AddonCard({ addon, agents = [] }: AddonCardProps) {
         ].join(' ')}
         onClick={() => hasExpandableContent && setExpanded((e) => !e)}
       >
-        <AddonIcon name={manifest.name} group={addon.group} />
+        <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 flex-wrap">
+          <div className="flex items-center gap-2">
             <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>
+            <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>
           )}
 
-          {/* 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 */}

package/src/components/addons/AddonUploadZone.tsx

@@ -1,189 +1,49 @@
-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
-}
+import { useRef, useCallback, useState } from 'react'
+import { Upload, Loader2 } from 'lucide-react'
 
 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 [uploading, setUploading] = useState(false)
   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)
-
+      setUploading(true)
       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)
+        const res = await fetch('/api/addons/upload', {
+          method: 'POST',
+          headers: { Authorization: `Bearer ${token}` },
+          body: 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')
+        const body = await res.json()
+        if (body.success) onUploadSuccess()
+      } finally {
+        setUploading(false)
       }
     },
     [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
+      if (file) uploadFile(file)
       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"
@@ -191,117 +51,19 @@ export function AddonUploadZone({ onUploadSuccess }: AddonUploadZoneProps) {
         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(' ')}
+      <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"
       >
-        {/* 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>
-          </>
+        {uploading ? (
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+        ) : (
+          <Upload className="w-3.5 h-3.5" />
         )}
-      </div>
-    </div>
+        {uploading ? 'Uploading...' : 'Upload'}
+      </button>
+    </>
   )
 }

package/src/components/addons/UpdatesList.tsx

@@ -1,25 +1,20 @@
 import { ArrowRight, RotateCcw, Zap } from 'lucide-react'
 
 // ---------------------------------------------------------------------------
-// Types
+// Types — inferred from tRPC update.listUpdates return type
 // ---------------------------------------------------------------------------
 
-export interface UpdateEntry {
-  id: string
-  name: string
-  currentVersion: string
-  newVersion: string
-  changelog?: string
-  requiresRestart: boolean
-}
+import type { BackendClient } from '@camstack/sdk'
+
+export type UpdateEntry = Awaited<ReturnType<BackendClient['trpc']['update']['listUpdates']['query']>>[number]
 
 // ---------------------------------------------------------------------------
 // UpdatesList
 // ---------------------------------------------------------------------------
 
 interface UpdatesListProps {
-  updates: UpdateEntry[]
-  onUpdate: (id: string) => void
+  updates: readonly UpdateEntry[]
+  onUpdate: (name: string) => void
   onUpdateAll: () => void
   onCheckUpdates: () => void
   isChecking: boolean
@@ -61,7 +56,7 @@ export function UpdatesList({ updates, onUpdate, onUpdateAll, onCheckUpdates, is
         <div className="space-y-2">
           {updates.map((update) => (
             <div
-              key={update.id}
+              key={update.name}
               className="rounded-lg border border-border bg-surface px-4 py-3 flex items-start justify-between gap-4"
             >
               <div className="flex items-start gap-3 min-w-0">
@@ -92,20 +87,14 @@ export function UpdatesList({ updates, onUpdate, onUpdateAll, onCheckUpdates, is
                   <div className="flex items-center gap-1.5 mt-1 text-[10px]">
                     <span className="text-foreground-subtle font-mono">v{update.currentVersion}</span>
                     <ArrowRight className="h-3 w-3 text-foreground-subtle" />
-                    <span className="text-green-400 font-mono font-medium">v{update.newVersion}</span>
+                    <span className="text-green-400 font-mono font-medium">v{update.latestVersion}</span>
                   </div>
-
-                  {update.changelog && (
-                    <p className="mt-1.5 text-[10px] text-foreground-subtle leading-relaxed line-clamp-2">
-                      {update.changelog}
-                    </p>
-                  )}
                 </div>
               </div>
 
               <button
                 type="button"
-                onClick={() => onUpdate(update.id)}
+                onClick={() => onUpdate(update.name)}
                 className="flex-shrink-0 rounded-md bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1.5 text-xs font-medium transition-colors"
               >
                 Update

package/src/components/integrations/DeviceDiscoveryStep.tsx

@@ -54,8 +54,8 @@ export function DeviceDiscoveryStep({ providerId, onImport, onSkip }: DeviceDisc
       {devices.length > 0 && (
         <div className="space-y-1.5 max-h-64 overflow-y-auto">
           {devices.map((device) => {
-            const id = String((device as any).externalId ?? (device as any).id ?? '')
-            const name = String((device as any).name ?? id)
+            const id = device.externalId
+            const name = device.name ?? id
             const isSelected = selected.has(id)
 
             return (

package/src/components/integrations/IntegrationWizard.tsx

@@ -7,6 +7,7 @@ import { useBackendClient } from '../../hooks/useBackendClient'
 import { ProviderPicker } from './ProviderPicker'
 import { ProviderConfigForm } from './ProviderConfigForm'
 import { DeviceDiscoveryStep } from './DeviceDiscoveryStep'
+import type { ConfigUISchema } from '@camstack/types'
 
 type WizardStep = 'picker' | 'config' | 'discovery'
 
@@ -152,7 +153,7 @@ export function IntegrationWizard({ open, onClose }: IntegrationWizardProps) {
           {step === 'config' && selectedAddonId && (
             <ProviderConfigForm
               addonId={selectedAddonId}
-              configSchema={(configSchema ?? null) as any}
+              configSchema={(configSchema ?? null) as ConfigUISchema | null}
               onSave={handleConfigSave}
               onBack={() => setStep('picker')}
             />

package/src/components/metrics/AgentLoad.tsx

@@ -2,22 +2,13 @@ import { useQuery } from '@tanstack/react-query'
 import { useBackendClient } from '../../hooks/useBackendClient'
 import { CapabilityBadges } from '../shared/CapabilityBadges'
 
-interface AgentStatus {
+// agents.listAgents returns Record<string, unknown>[] — typed view for rendering
+interface AgentView {
   id: string
   name: string
   state: 'online' | 'offline' | 'degraded'
   capabilities: string[]
-  lastHeartbeat: number
-  connectedSince?: number
   activeTaskCount: number
-  completedTaskCount: number
-  failedTaskCount: number
-  resources?: {
-    cpuCores?: number
-    memoryMB?: number
-    gpuAvailable?: boolean
-    gpuModel?: string
-  }
 }
 
 function stateStyle(state: string): { dot: string; label: string } {
@@ -38,7 +29,8 @@ export function AgentLoad() {
     refetchInterval: 5_000,
   })
 
-  const agents = (data ?? []) as unknown as AgentStatus[]
+  // agents.listAgents returns Record<string, unknown>[] — cast needed until tRPC router is strongly typed
+  const agents = (data ?? []) as unknown as readonly AgentView[]
   const onlineCount = agents.filter((a) => a.state === 'online').length
   const totalActive = agents.reduce((sum, a) => sum + (a.activeTaskCount ?? 0), 0)
 

package/src/components/metrics/IntegrationUsage.tsx

@@ -3,20 +3,10 @@ import { useBackendClient } from '../../hooks/useBackendClient'
 import { ProviderIcon } from '../shared/ProviderIcon'
 import { StatusBadge } from '../shared/StatusBadge'
 
-interface ProviderEntry {
-  id: string
-  name: string
-  type: string
-  status: string | { state?: string }
-  deviceCount: number
-}
+import type { ProviderStatus } from '@camstack/types'
 
-function resolveStatus(status: ProviderEntry['status']): string {
-  if (typeof status === 'string') return status
-  if (typeof status === 'object' && status !== null) {
-    return String((status as Record<string, unknown>).state ?? 'stopped')
-  }
-  return 'stopped'
+function resolveStatus(status: ProviderStatus): string {
+  return status.connected ? 'running' : 'stopped'
 }
 
 export function IntegrationUsage() {
@@ -28,8 +18,7 @@ export function IntegrationUsage() {
     refetchInterval: 10_000,
   })
 
-  const providers = (data ?? []) as unknown as ProviderEntry[]
-  const totalDevices = providers.reduce((sum, p) => sum + (p.deviceCount ?? 0), 0)
+  const providers = data ?? []
 
   return (
     <div className="rounded-lg border border-border bg-surface p-4">
@@ -56,9 +45,6 @@ export function IntegrationUsage() {
             <span className="text-xs text-foreground-subtle">
               <span className="text-foreground font-semibold">{providers.length}</span> providers
             </span>
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{totalDevices}</span> devices total
-            </span>
           </div>
 
           {/* Provider list */}
@@ -75,9 +61,6 @@ export function IntegrationUsage() {
                   </span>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
-                  <span className="text-xs text-foreground-subtle tabular-nums">
-                    {p.deviceCount ?? 0}d
-                  </span>
                   <StatusBadge status={resolveStatus(p.status)} />
                 </div>
               </div>