@camstack/addon-admin-ui 0.1.1

package/src/components/metrics/AgentLoad.tsx

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

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

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

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

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

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

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

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