@camstack/addon-admin-ui 0.1.1

package/src/components/addons/CapabilityBadge.tsx

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,133 @@
+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>
+  )
+}

package/src/components/addons/UpdatesList.tsx

@@ -0,0 +1,119 @@
+import { ArrowRight, RotateCcw, Zap } from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface UpdateEntry {
+  id: string
+  name: string
+  currentVersion: string
+  newVersion: string
+  changelog?: string
+  requiresRestart: boolean
+}
+
+// ---------------------------------------------------------------------------
+// UpdatesList
+// ---------------------------------------------------------------------------
+
+interface UpdatesListProps {
+  updates: UpdateEntry[]
+  onUpdate: (id: string) => void
+  onUpdateAll: () => void
+  onCheckUpdates: () => void
+  isChecking: boolean
+}
+
+export function UpdatesList({ updates, onUpdate, onUpdateAll, onCheckUpdates, isChecking }: UpdatesListProps) {
+  return (
+    <div className="space-y-4">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between gap-3">
+        <button
+          type="button"
+          onClick={onCheckUpdates}
+          disabled={isChecking}
+          className="flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs text-foreground hover:bg-surface transition-colors disabled:opacity-50"
+        >
+          <RotateCcw className={`h-3.5 w-3.5 ${isChecking ? 'animate-spin' : ''}`} />
+          {isChecking ? 'Checking…' : 'Check for updates'}
+        </button>
+
+        {updates.length > 0 && (
+          <button
+            type="button"
+            onClick={onUpdateAll}
+            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 transition-colors"
+          >
+            Update all ({updates.length})
+          </button>
+        )}
+      </div>
+
+      {updates.length === 0 && !isChecking && (
+        <div className="rounded-lg border border-border bg-surface py-10 text-center text-xs text-foreground-subtle">
+          All packages are up to date
+        </div>
+      )}
+
+      {updates.length > 0 && (
+        <div className="space-y-2">
+          {updates.map((update) => (
+            <div
+              key={update.id}
+              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">
+                {/* Icon letter */}
+                <div className="flex-shrink-0 h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <span className="text-xs font-bold text-primary uppercase">
+                    {update.name.charAt(0)}
+                  </span>
+                </div>
+
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm font-semibold text-foreground">{update.name}</span>
+                    {update.requiresRestart ? (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-warning/10 text-warning px-2 py-0.5 text-[10px] font-medium">
+                        <RotateCcw className="h-2.5 w-2.5" />
+                        Restart
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-400 px-2 py-0.5 text-[10px] font-medium">
+                        <Zap className="h-2.5 w-2.5" />
+                        Hot-swap
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Version diff */}
+                  <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>
+                  </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)}
+                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
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/agents/AgentCard.tsx

@@ -0,0 +1,281 @@
+import { useState } from 'react'
+import {
+  ChevronDown,
+  ChevronUp,
+  Cpu,
+  HardDrive,
+  Monitor,
+  Layers,
+  Activity,
+  Server,
+} from 'lucide-react'
+import { TaskList } from './TaskList'
+import { ProcessList } from './ProcessList'
+import type { AgentTask } from './TaskList'
+import type { ProcessEntry } from './ProcessList'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AgentRegistrationInfo {
+  id: string
+  name: string
+  capabilities: string[]
+  host: string
+  port: number
+  platform: string
+  arch: string
+  cpuModel?: string
+  cpuCores: number
+  memoryMB: number
+  gpuModel?: string
+  pythonRuntimes: string[]
+  httpPort: number
+}
+
+export interface AgentRuntimeStatus {
+  activeCameras: number
+  cpuPercent: number
+  memoryPercent: number
+  fps: Record<string, number>
+  errors: string[]
+}
+
+export interface ConnectedAgent {
+  info: AgentRegistrationInfo
+  status?: AgentRuntimeStatus
+  connectedSince: number
+  isHub?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function StatusDot({ online }: { online: boolean }) {
+  return (
+    <span
+      className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${online ? 'bg-green-400' : 'bg-red-400'}`}
+      title={online ? 'Online' : 'Offline'}
+    />
+  )
+}
+
+function Bar({ percent, color = 'bg-primary' }: { percent: number; color?: string }) {
+  return (
+    <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
+      <div
+        className={`h-full rounded-full transition-all ${color}`}
+        style={{ width: `${Math.min(100, percent)}%` }}
+      />
+    </div>
+  )
+}
+
+const CAPABILITY_COLORS: Record<string, string> = {
+  decode:     'bg-blue-500/10 text-blue-400',
+  decoder:    'bg-blue-500/10 text-blue-400',
+  detect:     'bg-green-500/10 text-green-400',
+  detector:   'bg-green-500/10 text-green-400',
+  record:     'bg-orange-500/10 text-orange-400',
+  recorder:   'bg-orange-500/10 text-orange-400',
+  transcode:  'bg-purple-500/10 text-purple-400',
+  transcoder: 'bg-purple-500/10 text-purple-400',
+  restream:   'bg-cyan-500/10 text-cyan-400',
+  restreamer: 'bg-cyan-500/10 text-cyan-400',
+}
+
+const RUNTIME_COLORS: Record<string, string> = {
+  onnx:    'bg-yellow-500/10 text-yellow-400',
+  coreml:  'bg-pink-500/10 text-pink-400',
+  pytorch: 'bg-orange-500/10 text-orange-400',
+  openvino:'bg-blue-500/10 text-blue-400',
+}
+
+function CapBadge({ cap }: { cap: string }) {
+  const lower = cap.toLowerCase()
+  const color = CAPABILITY_COLORS[lower] ?? 'bg-primary/10 text-primary'
+  return (
+    <span className={`inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium ${color}`}>
+      {cap}
+    </span>
+  )
+}
+
+function RuntimeBadge({ runtime }: { runtime: string }) {
+  const lower = runtime.toLowerCase()
+  const color = RUNTIME_COLORS[lower] ?? 'bg-foreground-subtle/10 text-foreground-subtle'
+  return (
+    <span className={`inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium ${color}`}>
+      {runtime}
+    </span>
+  )
+}
+
+function formatUptime(connectedSince: number): string {
+  const seconds = Math.floor((Date.now() - connectedSince) / 1000)
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+  return `${Math.floor(seconds / 3600)}h`
+}
+
+// ---------------------------------------------------------------------------
+// AgentCard
+// ---------------------------------------------------------------------------
+
+interface AgentCardProps {
+  agent: ConnectedAgent
+  processes: ProcessEntry[]
+  tasks: AgentTask[]
+  defaultExpanded?: boolean
+  online?: boolean
+}
+
+export function AgentCard({ agent, processes, tasks, defaultExpanded = false, online = true }: AgentCardProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const { info, status } = agent
+
+  return (
+    <div className={`rounded-xl border border-border bg-surface overflow-hidden transition-opacity ${!online ? 'opacity-50' : ''}`}>
+      {/* Header */}
+      <button
+        type="button"
+        className="w-full flex items-start justify-between gap-3 px-4 py-3 hover:bg-primary/5 transition-colors text-left"
+        onClick={() => setExpanded((e) => !e)}
+      >
+        <div className="flex items-center gap-2.5 min-w-0">
+          <StatusDot online={online} />
+          <Server className="h-4 w-4 shrink-0 text-foreground-subtle" />
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-sm font-semibold text-foreground truncate">{info.name}</span>
+              {agent.isHub && (
+                <span className="rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-medium shrink-0">HUB</span>
+              )}
+              {!online && (
+                <span className="rounded-full bg-foreground-subtle/10 text-foreground-subtle px-2 py-0.5 text-[10px] shrink-0">Offline</span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 mt-0.5 text-[10px] text-foreground-subtle flex-wrap">
+              <span className="font-mono">{info.host}:{info.port}</span>
+              <span>{info.platform}/{info.arch}</span>
+              {status && (
+                <>
+                  <span>CPU {status.cpuPercent.toFixed(0)}%</span>
+                  <span>MEM {status.memoryPercent.toFixed(0)}%</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {/* task count badge */}
+          {tasks.length > 0 && (
+            <span className="rounded-full bg-info/10 text-info px-2 py-0.5 text-[10px] font-medium">
+              {tasks.length} task{tasks.length !== 1 ? 's' : ''}
+            </span>
+          )}
+          {/* runtime badges */}
+          {info.pythonRuntimes.slice(0, 2).map((rt) => (
+            <RuntimeBadge key={rt} runtime={rt} />
+          ))}
+          <span className="text-[10px] text-foreground-subtle">up {formatUptime(agent.connectedSince)}</span>
+          {expanded ? <ChevronUp className="h-4 w-4 text-foreground-subtle" /> : <ChevronDown className="h-4 w-4 text-foreground-subtle" />}
+        </div>
+      </button>
+
+      {/* Load bars (always visible when online) */}
+      {status && !expanded && (
+        <div className="px-4 pb-3 space-y-1">
+          <Bar percent={status.cpuPercent} color="bg-blue-400" />
+          <Bar percent={status.memoryPercent} color="bg-purple-400" />
+        </div>
+      )}
+
+      {/* Expanded content */}
+      {expanded && (
+        <div className="border-t border-border divide-y divide-border">
+          {/* Hardware details */}
+          <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-[10px] text-foreground-subtle">
+            <div className="flex items-center gap-1.5">
+              <Cpu className="h-3 w-3 shrink-0" />
+              <span className="truncate">{info.cpuModel ?? `${info.cpuCores} cores`}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <HardDrive className="h-3 w-3 shrink-0" />
+              <span>{Math.round(info.memoryMB / 1024)} GB RAM</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Monitor className="h-3 w-3 shrink-0" />
+              <span>{info.platform}/{info.arch}</span>
+            </div>
+            {info.gpuModel && (
+              <div className="flex items-center gap-1.5">
+                <Layers className="h-3 w-3 shrink-0" />
+                <span className="truncate">{info.gpuModel}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Load bars */}
+          {status && (
+            <div className="px-4 py-3 space-y-2">
+              <div className="flex items-center justify-between text-[10px] text-foreground-subtle mb-1">
+                <span className="flex items-center gap-1">
+                  <Activity className="h-3 w-3" />
+                  {status.activeCameras} active camera{status.activeCameras !== 1 ? 's' : ''}
+                </span>
+                <span>CPU {status.cpuPercent.toFixed(0)}% / MEM {status.memoryPercent.toFixed(0)}%</span>
+              </div>
+              <Bar percent={status.cpuPercent} color="bg-blue-400" />
+              <Bar percent={status.memoryPercent} color="bg-purple-400" />
+            </div>
+          )}
+
+          {/* Capabilities */}
+          <div className="px-4 py-3 space-y-2">
+            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">Capabilities</div>
+            <div className="flex flex-wrap gap-1.5">
+              {info.capabilities.map((cap) => (
+                <CapBadge key={cap} cap={cap} />
+              ))}
+              {info.capabilities.length === 0 && (
+                <span className="text-[10px] text-foreground-subtle italic">None registered</span>
+              )}
+            </div>
+          </div>
+
+          {/* Runtimes */}
+          {info.pythonRuntimes.length > 0 && (
+            <div className="px-4 py-3 space-y-2">
+              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">Runtimes</div>
+              <div className="flex flex-wrap gap-1.5">
+                {info.pythonRuntimes.map((rt) => (
+                  <RuntimeBadge key={rt} runtime={rt} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Active Tasks */}
+          <div className="px-4 py-3 space-y-2">
+            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">
+              Active Tasks ({tasks.length})
+            </div>
+            <TaskList tasks={tasks} />
+          </div>
+
+          {/* Processes */}
+          <div className="px-4 py-3 space-y-2">
+            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">
+              Processes ({processes.length})
+            </div>
+            <ProcessList processes={processes} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}