@camstack/addon-admin-ui 0.1.2 → 0.1.3

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>
-  )
-}

package/src/components/addons/UpdatesList.tsx

@@ -1,108 +0,0 @@
-import { ArrowRight, RotateCcw, Zap } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types — inferred from tRPC update.listUpdates return type
-// ---------------------------------------------------------------------------
-
-import type { BackendClient } from '@camstack/sdk'
-
-export type UpdateEntry = Awaited<ReturnType<BackendClient['trpc']['update']['listUpdates']['query']>>[number]
-
-// ---------------------------------------------------------------------------
-// UpdatesList
-// ---------------------------------------------------------------------------
-
-interface UpdatesListProps {
-  updates: readonly UpdateEntry[]
-  onUpdate: (name: 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.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">
-                {/* 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.latestVersion}</span>
-                  </div>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                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
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/agents/AgentCard.tsx

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