@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/metrics/AgentLoad.tsx

@@ -1,113 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-import { CapabilityBadges } from '../shared/CapabilityBadges'
-
-interface AgentStatus {
-  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 } {
-  switch (state) {
-    case 'online': return { dot: 'bg-success', label: 'text-success' }
-    case 'degraded': return { dot: 'bg-warning', label: 'text-warning' }
-    case 'offline':
-    default: return { dot: 'bg-foreground-subtle/40', label: 'text-foreground-subtle' }
-  }
-}
-
-export function AgentLoad() {
-  const client = useBackendClient()
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['agents'],
-    queryFn: () => client.listAgents(),
-    refetchInterval: 5_000,
-  })
-
-  const agents = (data ?? []) as unknown as AgentStatus[]
-  const onlineCount = agents.filter((a) => a.state === 'online').length
-  const totalActive = agents.reduce((sum, a) => sum + (a.activeTaskCount ?? 0), 0)
-
-  return (
-    <div className="rounded-lg border border-border bg-surface p-4">
-      <h2 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider mb-3">
-        Agent Load
-      </h2>
-
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load data</div>
-      )}
-
-      {!isLoading && !isError && agents.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No data available</div>
-      )}
-
-      {!isLoading && !isError && agents.length > 0 && (
-        <>
-          {/* Aggregate */}
-          <div className="flex items-center gap-3 mb-3 pb-3 border-b border-border">
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{onlineCount}</span>/{agents.length} online
-            </span>
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{totalActive}</span> active tasks
-            </span>
-          </div>
-
-          {/* Agent list */}
-          <div className="space-y-3">
-            {agents.map((a) => {
-              const { dot, label: labelClass } = stateStyle(a.state)
-              const isIdle = (a.activeTaskCount ?? 0) === 0
-              return (
-                <div key={a.id} className="space-y-1">
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-2 min-w-0">
-                      <span className={`h-2 w-2 flex-shrink-0 rounded-full ${dot}`} />
-                      <span className="text-xs text-foreground font-medium truncate">
-                        {a.name ?? a.id}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-2 flex-shrink-0">
-                      <span className={`text-[10px] font-medium ${labelClass}`}>
-                        {a.state}
-                      </span>
-                      <span className="text-[10px] text-foreground-subtle tabular-nums bg-surface-hover rounded px-1.5 py-0.5">
-                        {isIdle
-                          ? 'idle'
-                          : `${a.activeTaskCount} task${a.activeTaskCount !== 1 ? 's' : ''}`}
-                      </span>
-                    </div>
-                  </div>
-                  {a.capabilities && a.capabilities.length > 0 && (
-                    <div className="pl-4">
-                      <CapabilityBadges capabilities={a.capabilities} />
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/metrics/IntegrationUsage.tsx

@@ -1,90 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-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
-}
-
-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'
-}
-
-export function IntegrationUsage() {
-  const client = useBackendClient()
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['providers'],
-    queryFn: () => client.listProviders(),
-    refetchInterval: 10_000,
-  })
-
-  const providers = (data ?? []) as unknown as ProviderEntry[]
-  const totalDevices = providers.reduce((sum, p) => sum + (p.deviceCount ?? 0), 0)
-
-  return (
-    <div className="rounded-lg border border-border bg-surface p-4">
-      <h2 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider mb-3">
-        Integration Usage
-      </h2>
-
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load data</div>
-      )}
-
-      {!isLoading && !isError && providers.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No data available</div>
-      )}
-
-      {!isLoading && !isError && providers.length > 0 && (
-        <>
-          {/* Aggregate */}
-          <div className="flex items-center gap-3 mb-3 pb-3 border-b border-border">
-            <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 */}
-          <div className="space-y-2">
-            {providers.map((p) => (
-              <div
-                key={p.id}
-                className="flex items-center justify-between gap-2"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  <ProviderIcon type={p.type} size="sm" />
-                  <span className="text-xs text-foreground font-medium truncate">
-                    {p.name ?? p.id}
-                  </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>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/metrics/PipelineStatus.tsx

@@ -1,105 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-interface PipelineEntry {
-  deviceId: string
-  status: {
-    active: boolean
-    decode: {
-      fps: number
-      droppedFrames: number
-      totalFrames: number
-    }
-    videoConsumers: number
-    audioConsumers: number
-    uptime: number
-    source: {
-      protocol: string
-      connected: boolean
-    } | null
-    outputs: Array<{
-      format: string
-      consumers: number
-      active: boolean
-    }>
-  }
-}
-
-export function PipelineStatus() {
-  const client = useBackendClient()
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['pipelines'],
-    queryFn: () => client.listPipelines(),
-    refetchInterval: 5_000,
-  })
-
-  const pipelines = (data ?? []) as unknown as PipelineEntry[]
-  const activePipelines = pipelines.filter((p) => p.status.active)
-  const totalFps = activePipelines.reduce((sum, p) => sum + (p.status.decode?.fps ?? 0), 0)
-
-  return (
-    <div className="rounded-lg border border-border bg-surface p-4">
-      <h2 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider mb-3">
-        Pipeline Status
-      </h2>
-
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load data</div>
-      )}
-
-      {!isLoading && !isError && pipelines.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No data available</div>
-      )}
-
-      {!isLoading && !isError && pipelines.length > 0 && (
-        <>
-          {/* Aggregate */}
-          <div className="flex items-center gap-3 mb-3 pb-3 border-b border-border">
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{activePipelines.length}</span> active
-              {' '}/ <span className="text-foreground font-semibold">{pipelines.length}</span> total
-            </span>
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold tabular-nums">
-                {totalFps.toFixed(1)}
-              </span>{' '}
-              total FPS
-            </span>
-          </div>
-
-          {/* Pipeline list */}
-          <div className="space-y-1.5">
-            {pipelines.map((p) => (
-              <div
-                key={p.deviceId}
-                className="flex items-center justify-between gap-2 text-xs"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  <span
-                    className={`h-2 w-2 flex-shrink-0 rounded-full ${
-                      p.status.active ? 'bg-success' : 'bg-foreground-subtle/40'
-                    }`}
-                  />
-                  <span className="text-foreground truncate font-medium">{p.deviceId}</span>
-                </div>
-                <div className="flex items-center gap-3 flex-shrink-0">
-                  <span className="text-foreground-subtle">
-                    {p.status.active ? 'running' : 'idle'}
-                  </span>
-                  <span className="tabular-nums text-foreground-subtle w-14 text-right">
-                    {p.status.active ? `${(p.status.decode?.fps ?? 0).toFixed(1)} fps` : '—'}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/metrics/ProcessResources.tsx

@@ -1,139 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-interface ProcessStats {
-  pid: number
-  cpu: number
-  memory: number
-  uptime: number
-  restartCount: number
-}
-
-interface ProcessEntry {
-  id: string
-  label: string
-  state: string
-  pid?: number
-  stats?: ProcessStats
-  restartCount: number
-  lastCrashAt?: number
-  lastCrashError?: string
-}
-
-function formatMemoryMB(bytes?: number): string {
-  if (bytes == null) return '—'
-  return `${(bytes / 1024 / 1024).toFixed(0)} MB`
-}
-
-function formatUptime(ms?: number): string {
-  if (ms == null || ms <= 0) return '—'
-  const totalSeconds = Math.floor(ms / 1000)
-  const h = Math.floor(totalSeconds / 3600)
-  const m = Math.floor((totalSeconds % 3600) / 60)
-  const s = totalSeconds % 60
-  if (h > 0) return `${h}h ${m}m`
-  if (m > 0) return `${m}m ${s}s`
-  return `${s}s`
-}
-
-function stateColor(state: string): string {
-  switch (state) {
-    case 'running': return 'text-success'
-    case 'stopped': return 'text-foreground-subtle'
-    case 'crashed':
-    case 'error': return 'text-danger'
-    case 'starting': return 'text-warning'
-    default: return 'text-foreground-subtle'
-  }
-}
-
-export function ProcessResources() {
-  const client = useBackendClient()
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['processes'],
-    queryFn: () => client.listProcesses(),
-    refetchInterval: 5_000,
-  })
-
-  const processes = (data ?? []) as ProcessEntry[]
-  const runningCount = processes.filter((p) => p.state === 'running').length
-
-  const totalCpu = processes.reduce((sum, p) => sum + (p.stats?.cpu ?? 0), 0)
-  const totalMemory = processes.reduce((sum, p) => sum + (p.stats?.memory ?? 0), 0)
-
-  return (
-    <div className="rounded-lg border border-border bg-surface p-4">
-      <h2 className="text-xs font-semibold text-foreground-subtle uppercase tracking-wider mb-3">
-        Process Resources
-      </h2>
-
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load data</div>
-      )}
-
-      {!isLoading && !isError && processes.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No data available</div>
-      )}
-
-      {!isLoading && !isError && processes.length > 0 && (
-        <>
-          {/* System totals */}
-          <div className="flex items-center gap-4 mb-3 pb-3 border-b border-border">
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{runningCount}</span>/{processes.length} running
-            </span>
-            <span className="text-xs text-foreground-subtle">
-              CPU: <span className="text-foreground font-semibold tabular-nums">{totalCpu.toFixed(1)}%</span>
-            </span>
-            <span className="text-xs text-foreground-subtle">
-              Mem: <span className="text-foreground font-semibold tabular-nums">{formatMemoryMB(totalMemory)}</span>
-            </span>
-          </div>
-
-          {/* Process table */}
-          <div className="space-y-1.5">
-            {/* Header */}
-            <div className="grid grid-cols-[1fr_4rem_5rem_4rem_3rem] gap-2 text-[10px] font-medium text-foreground-subtle uppercase tracking-wider pb-1">
-              <span>Process</span>
-              <span className="text-right">CPU</span>
-              <span className="text-right">Memory</span>
-              <span className="text-right">Uptime</span>
-              <span className="text-right">Rst</span>
-            </div>
-
-            {processes.map((p) => (
-              <div
-                key={p.id}
-                className="grid grid-cols-[1fr_4rem_5rem_4rem_3rem] gap-2 text-xs items-center"
-              >
-                <div className="flex items-center gap-1.5 min-w-0">
-                  <span className={`text-[10px] font-semibold ${stateColor(p.state)}`}>
-                    ●
-                  </span>
-                  <span className="text-foreground truncate">{p.label ?? p.id}</span>
-                </div>
-                <span className="tabular-nums text-foreground-subtle text-right">
-                  {p.stats?.cpu != null ? `${p.stats.cpu.toFixed(1)}%` : '—'}
-                </span>
-                <span className="tabular-nums text-foreground-subtle text-right">
-                  {formatMemoryMB(p.stats?.memory)}
-                </span>
-                <span className="tabular-nums text-foreground-subtle text-right">
-                  {formatUptime(p.stats?.uptime)}
-                </span>
-                <span className="tabular-nums text-foreground-subtle text-right">
-                  {p.restartCount ?? 0}
-                </span>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/pipeline/PhaseSettings.tsx

@@ -1,131 +0,0 @@
-interface PhaseSettingsProps {
-  readonly motionFps: number
-  readonly detectionFps: number
-  readonly cooldownMs: number
-  readonly maxConcurrentInferences: number | null
-  readonly onMotionFpsChange: (v: number) => void
-  readonly onDetectionFpsChange: (v: number) => void
-  readonly onCooldownMsChange: (v: number) => void
-  readonly onMaxConcurrentInferencesChange: (v: number | null) => void
-}
-
-interface SliderFieldProps {
-  readonly label: string
-  readonly value: number
-  readonly min: number
-  readonly max: number
-  readonly step?: number
-  readonly unit?: string
-  readonly hint?: string
-  readonly onChange: (v: number) => void
-}
-
-function SliderField({ label, value, min, max, step = 1, unit, hint, onChange }: SliderFieldProps) {
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-1">
-        <label className="text-[10px] font-medium text-foreground-subtle">{label}</label>
-        {hint && <span className="text-[9px] text-foreground-subtle/50">{hint}</span>}
-      </div>
-      <div className="flex items-center gap-3">
-        <input
-          type="range"
-          className="flex-1 h-1 accent-primary cursor-pointer"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
-        />
-        <span className="text-xs text-foreground tabular-nums min-w-[3rem] text-right">
-          {value}{unit ? ` ${unit}` : ''}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-export function PhaseSettings({
-  motionFps,
-  detectionFps,
-  cooldownMs,
-  maxConcurrentInferences,
-  onMotionFpsChange,
-  onDetectionFpsChange,
-  onCooldownMsChange,
-  onMaxConcurrentInferencesChange,
-}: PhaseSettingsProps) {
-  const isAuto = maxConcurrentInferences === null
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-[10px] font-semibold text-foreground uppercase tracking-wider">
-        Orchestrator
-      </h3>
-      <SliderField
-        label="Motion FPS"
-        value={motionFps}
-        min={1}
-        max={15}
-        onChange={onMotionFpsChange}
-        unit="fps"
-        hint="Frame-diff rate"
-      />
-      <SliderField
-        label="Detection FPS"
-        value={detectionFps}
-        min={1}
-        max={30}
-        onChange={onDetectionFpsChange}
-        unit="fps"
-        hint="Inference rate"
-      />
-      <SliderField
-        label="Motion Cooldown"
-        value={cooldownMs / 1000}
-        min={1}
-        max={60}
-        onChange={(v) => onCooldownMsChange(v * 1000)}
-        unit="s"
-        hint="No motion → idle"
-      />
-
-      {/* Max concurrent inferences with Auto toggle */}
-      <div>
-        <div className="flex items-center justify-between mb-1">
-          <label className="text-[10px] font-medium text-foreground-subtle">Max Parallel</label>
-          <button
-            type="button"
-            onClick={() => onMaxConcurrentInferencesChange(isAuto ? 2 : null)}
-            className={`text-[9px] font-medium px-1.5 py-0.5 rounded transition-colors ${
-              isAuto
-                ? 'bg-primary/15 text-primary'
-                : 'bg-surface text-foreground-subtle hover:text-foreground'
-            }`}
-          >
-            {isAuto ? 'Auto' : 'Manual'}
-          </button>
-        </div>
-        {isAuto ? (
-          <p className="text-[10px] text-foreground-subtle/60">
-            Auto-detected from hardware (CPU cores, GPU)
-          </p>
-        ) : (
-          <div className="flex items-center gap-3">
-            <input
-              type="range"
-              className="flex-1 h-1 accent-primary cursor-pointer"
-              min={1}
-              max={8}
-              value={maxConcurrentInferences}
-              onChange={(e) => onMaxConcurrentInferencesChange(Number(e.target.value))}
-            />
-            <span className="text-xs text-foreground tabular-nums min-w-[3rem] text-right">
-              {maxConcurrentInferences}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/shared/CapabilityBadges.tsx

@@ -1,30 +0,0 @@
-import { Video, Eye, CircleDot, Mic } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-const CAPABILITIES: Record<string, { icon: LucideIcon; label: string }> = {
-  streaming: { icon: Video, label: 'Stream' },
-  detection: { icon: Eye, label: 'Detection' },
-  recording: { icon: CircleDot, label: 'Recording' },
-  audio:     { icon: Mic, label: 'Audio' },
-}
-
-interface CapabilityBadgesProps {
-  capabilities: string[]
-}
-
-export function CapabilityBadges({ capabilities }: CapabilityBadgesProps) {
-  return (
-    <div className="flex items-center gap-1">
-      {capabilities.map((cap) => {
-        const info = CAPABILITIES[cap]
-        if (!info) return null
-        const Icon = info.icon
-        return (
-          <span key={cap} className="inline-flex items-center gap-1 rounded-md bg-surface-hover px-1.5 py-0.5 text-[10px] text-foreground-subtle" title={info.label}>
-            <Icon className="h-3 w-3" />
-          </span>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/shared/ProviderIcon.tsx

@@ -1,42 +0,0 @@
-import { Cctv, Server, Radio, Home, Wifi } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-const PROVIDERS: Record<string, { icon: LucideIcon; color: string; label: string }> = {
-  frigate:       { icon: Cctv,   color: '#3b82f6', label: 'Frigate' },
-  scrypted:      { icon: Server, color: '#a855f7', label: 'Scrypted' },
-  reolink:       { icon: Radio,  color: '#06b6d4', label: 'Reolink' },
-  homeassistant: { icon: Home,   color: '#22d3ee', label: 'Home Assistant' },
-  rtsp:          { icon: Wifi,   color: '#78716c', label: 'RTSP' },
-  onvif:         { icon: Wifi,   color: '#78716c', label: 'ONVIF' },
-}
-
-interface ProviderIconProps {
-  type: string
-  size?: 'sm' | 'md' | 'lg'
-  showLabel?: boolean
-}
-
-const SIZES = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
-const CONTAINER_SIZES = { sm: 'h-7 w-7', md: 'h-8 w-8', lg: 'h-10 w-10' }
-
-export function ProviderIcon({ type, size = 'md', showLabel }: ProviderIconProps) {
-  const provider = PROVIDERS[type] ?? PROVIDERS['rtsp']!
-  const Icon = provider.icon
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className={`flex items-center justify-center rounded-lg ${CONTAINER_SIZES[size]}`} style={{ backgroundColor: `${provider.color}15` }}>
-        <Icon className={SIZES[size]} style={{ color: provider.color }} />
-      </div>
-      {showLabel && <span className="text-xs font-medium text-foreground-subtle">{provider.label}</span>}
-    </div>
-  )
-}
-
-export function getProviderColor(type: string): string {
-  return PROVIDERS[type]?.color ?? '#78716c'
-}
-
-export function getProviderLabel(type: string): string {
-  return PROVIDERS[type]?.label ?? type
-}

package/src/components/shared/StatusBadge.tsx

@@ -1,23 +0,0 @@
-const STATUS_STYLES: Record<string, { bg: string; text: string; dot: string; label: string }> = {
-  running: { bg: 'bg-success/10', text: 'text-success', dot: 'bg-success', label: 'Running' },
-  stopped: { bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle', dot: 'bg-foreground-subtle', label: 'Stopped' },
-  error:   { bg: 'bg-danger/10', text: 'text-danger', dot: 'bg-danger', label: 'Error' },
-  online:  { bg: 'bg-success/10', text: 'text-success', dot: 'bg-success', label: 'Online' },
-  offline: { bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle', dot: 'bg-foreground-subtle', label: 'Offline' },
-  idle:    { bg: 'bg-info/10', text: 'text-info', dot: 'bg-info', label: 'Idle' },
-}
-
-interface StatusBadgeProps {
-  status: string
-}
-
-export function StatusBadge({ status }: StatusBadgeProps) {
-  const style = STATUS_STYLES[status] ?? STATUS_STYLES['stopped']!
-
-  return (
-    <span className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium ${style.bg} ${style.text}`}>
-      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
-      {style.label}
-    </span>
-  )
-}