@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/agents/ProcessTree.tsx

@@ -1,369 +0,0 @@
-import { useState } from 'react'
-import {
-  ChevronDown,
-  ChevronRight,
-  Server,
-  Cpu,
-  HardDrive,
-  Monitor,
-  Package,
-  GitBranch,
-  ScrollText,
-  Clock,
-} from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface ProcessTreeEntry {
-  id: string
-  name: string
-  pid: number
-  state: string
-  cpuPercent: number
-  memoryPercent: number
-  memoryMB: number
-  isHub: boolean
-  platform: string
-  arch: string
-  host: string
-  capabilities: string[]
-  installedAddons: string[]
-  pythonRuntimes: string[]
-  connectedSince: number
-  subProcesses: SubProcess[]
-}
-
-export interface SubProcess {
-  pid: number
-  name: string
-  command: string
-  state: 'running' | 'stopped' | 'crashed'
-  cpuPercent: number
-  memoryRss: number
-  uptimeSeconds: number
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function formatMemory(mb: number): string {
-  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
-  return `${Math.round(mb)} MB`
-}
-
-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`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-function formatUptimeSeconds(seconds: number): string {
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-function formatTimestamp(ts: number): string {
-  return new Date(ts).toLocaleString('en-GB', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: false,
-  })
-}
-
-function stateColor(state: string): string {
-  switch (state) {
-    case 'running': return 'bg-green-400'
-    case 'stopped': return 'bg-foreground-subtle'
-    case 'crashed': return 'bg-red-400'
-    default: return 'bg-foreground-subtle'
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function SubProcessRow({ proc, isLast }: { proc: SubProcess; isLast: boolean }) {
-  return (
-    <div className="flex items-center gap-2 text-[10px] text-foreground-subtle pl-6 py-1">
-      <span className="text-foreground-subtle/40 font-mono select-none">
-        {isLast ? '\u2514\u2500\u2500' : '\u251C\u2500\u2500'}
-      </span>
-      <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${stateColor(proc.state)}`} />
-      <span className="font-mono text-foreground truncate">{proc.name}</span>
-      <span className="text-foreground-subtle/60">PID {proc.pid}</span>
-      <span>CPU {proc.cpuPercent.toFixed(1)}%</span>
-      <span>{formatMemory(proc.memoryRss / 1024 / 1024)}</span>
-      {proc.uptimeSeconds > 0 && (
-        <span className="text-foreground-subtle/60">up {formatUptimeSeconds(proc.uptimeSeconds)}</span>
-      )}
-    </div>
-  )
-}
-
-function AgentTreeNode({ entry, isSelected, onSelectAgent }: {
-  entry: ProcessTreeEntry
-  isSelected?: boolean
-  onSelectAgent?: (name: string) => void
-}) {
-  const [expanded, setExpanded] = useState(entry.isHub)
-  const hasExpandableContent = true // Always expandable — details section is always useful
-
-  return (
-    <div className="border border-border rounded-lg bg-surface overflow-hidden">
-      {/* Header row */}
-      <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">
-          {expanded
-            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-foreground-subtle" />
-            : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-foreground-subtle" />
-          }
-          <span className={`h-2.5 w-2.5 rounded-full shrink-0 ${entry.state === 'running' ? 'bg-green-400' : 'bg-red-400'}`} />
-          <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">{entry.name}</span>
-              {entry.isHub && (
-                <span className="rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-medium shrink-0">HUB</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2 mt-0.5 text-[10px] text-foreground-subtle flex-wrap">
-              {entry.host && <span className="font-mono">{entry.host}</span>}
-              <span>{entry.platform}/{entry.arch}</span>
-              <span className="flex items-center gap-1">
-                <Cpu className="h-2.5 w-2.5" />
-                {entry.cpuPercent.toFixed(0)}%
-              </span>
-              <span className="flex items-center gap-1">
-                <HardDrive className="h-2.5 w-2.5" />
-                {entry.memoryPercent.toFixed(0)}% ({formatMemory(entry.memoryMB)})
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 shrink-0 text-[10px] text-foreground-subtle">
-          <span>up {formatUptime(entry.connectedSince)}</span>
-          {entry.subProcesses.length > 0 && (
-            <span className="rounded-full bg-info/10 text-info px-2 py-0.5 font-medium">
-              {entry.subProcesses.length} proc{entry.subProcesses.length !== 1 ? 's' : ''}
-            </span>
-          )}
-          {onSelectAgent && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation()
-                onSelectAgent(entry.isHub ? 'Hub' : entry.name)
-              }}
-              className={`inline-flex items-center gap-1 rounded-lg border px-2 py-0.5 text-[10px] font-medium transition-colors ${
-                isSelected
-                  ? 'border-primary/30 bg-primary/10 text-primary'
-                  : 'border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-primary/5'
-              }`}
-              title="View logs for this agent"
-            >
-              <ScrollText className="h-3 w-3" />
-              Logs
-            </button>
-          )}
-        </div>
-      </button>
-
-      {/* Load bars (collapsed only) */}
-      {!expanded && (
-        <div className="px-4 pb-2 space-y-1">
-          <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-            <div
-              className="h-full rounded-full bg-blue-400 transition-all"
-              style={{ width: `${Math.min(100, entry.cpuPercent)}%` }}
-            />
-          </div>
-          <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-            <div
-              className="h-full rounded-full bg-purple-400 transition-all"
-              style={{ width: `${Math.min(100, entry.memoryPercent)}%` }}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Expanded content */}
-      {expanded && (
-        <div className="border-t border-border">
-          {/* Platform & System Details */}
-          <div className="px-4 py-2 border-b border-border">
-            <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-              <Server className="h-3 w-3" />
-              System Details
-            </div>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1 text-[10px] text-foreground-subtle">
-              <div className="flex items-center gap-1.5">
-                <Monitor className="h-3 w-3 shrink-0" />
-                <span>Platform: <span className="text-foreground font-medium">{entry.platform}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Cpu className="h-3 w-3 shrink-0" />
-                <span>Arch: <span className="text-foreground font-medium">{entry.arch}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <HardDrive className="h-3 w-3 shrink-0" />
-                <span>Memory: <span className="text-foreground font-medium">{formatMemory(entry.memoryMB)}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Cpu className="h-3 w-3 shrink-0" />
-                <span>CPU: <span className="text-foreground font-medium">{entry.cpuPercent.toFixed(1)}%</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <HardDrive className="h-3 w-3 shrink-0" />
-                <span>Mem usage: <span className="text-foreground font-medium">{entry.memoryPercent.toFixed(1)}%</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Clock className="h-3 w-3 shrink-0" />
-                <span>Connected: <span className="text-foreground font-medium">{formatTimestamp(entry.connectedSince)}</span></span>
-              </div>
-            </div>
-            {/* Load bars in expanded */}
-            <div className="mt-2 space-y-1">
-              <div className="flex items-center gap-2 text-[9px] text-foreground-subtle">
-                <span className="w-8">CPU</span>
-                <div className="flex-1 h-1.5 rounded-full bg-border overflow-hidden">
-                  <div
-                    className="h-full rounded-full bg-blue-400 transition-all"
-                    style={{ width: `${Math.min(100, entry.cpuPercent)}%` }}
-                  />
-                </div>
-                <span className="w-8 text-right">{entry.cpuPercent.toFixed(0)}%</span>
-              </div>
-              <div className="flex items-center gap-2 text-[9px] text-foreground-subtle">
-                <span className="w-8">MEM</span>
-                <div className="flex-1 h-1.5 rounded-full bg-border overflow-hidden">
-                  <div
-                    className="h-full rounded-full bg-purple-400 transition-all"
-                    style={{ width: `${Math.min(100, entry.memoryPercent)}%` }}
-                  />
-                </div>
-                <span className="w-8 text-right">{entry.memoryPercent.toFixed(0)}%</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Installed addons */}
-          {entry.installedAddons.length > 0 && (
-            <div className="px-4 py-2 border-b border-border">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <Package className="h-3 w-3" />
-                Installed Addons ({entry.installedAddons.length})
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {entry.installedAddons.map((addon) => (
-                  <span key={addon} className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium bg-primary/10 text-primary">
-                    {addon}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Capabilities */}
-          {entry.capabilities.length > 0 && (
-            <div className="px-4 py-2 border-b border-border">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <Monitor className="h-3 w-3" />
-                Capabilities ({entry.capabilities.length})
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {entry.capabilities.map((cap) => (
-                  <span key={cap} className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-400">
-                    {cap}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Sub-processes */}
-          {entry.subProcesses.length > 0 && (
-            <div className="px-4 py-2">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <GitBranch className="h-3 w-3" />
-                Sub-Processes ({entry.subProcesses.length})
-              </div>
-              {entry.subProcesses.map((proc, idx) => (
-                <SubProcessRow
-                  key={proc.pid}
-                  proc={proc}
-                  isLast={idx === entry.subProcesses.length - 1}
-                />
-              ))}
-            </div>
-          )}
-
-          {entry.subProcesses.length === 0 && entry.installedAddons.length === 0 && entry.capabilities.length === 0 && (
-            <div className="px-4 py-3 text-[10px] text-foreground-subtle italic">
-              No sub-processes or addons reported
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// ProcessTree
-// ---------------------------------------------------------------------------
-
-interface ProcessTreeProps {
-  entries: ProcessTreeEntry[]
-  isLoading: boolean
-  selectedAgentName?: string | null
-  onSelectAgent?: (name: string) => void
-}
-
-export function ProcessTree({ entries, isLoading, selectedAgentName, onSelectAgent }: ProcessTreeProps) {
-  if (isLoading) {
-    return <div className="text-xs text-foreground-subtle animate-pulse">Loading process tree...</div>
-  }
-
-  if (entries.length === 0) {
-    return <div className="text-xs text-foreground-subtle italic">No agents connected</div>
-  }
-
-  // Sort: hub first, then by name
-  const sorted = [...entries].sort((a, b) => {
-    if (a.isHub && !b.isHub) return -1
-    if (!a.isHub && b.isHub) return 1
-    return a.name.localeCompare(b.name)
-  })
-
-  return (
-    <div className="space-y-2">
-      {sorted.map((entry) => (
-        <AgentTreeNode
-          key={entry.id}
-          entry={entry}
-          isSelected={selectedAgentName === entry.name}
-          onSelectAgent={onSelectAgent}
-        />
-      ))}
-    </div>
-  )
-}

package/src/components/agents/TaskList.tsx

@@ -1,68 +0,0 @@
-import { Clock, Video } from 'lucide-react'
-
-export interface AgentTask {
-  id: string
-  role: string
-  cameraId?: string
-  cameraName?: string
-  stats?: Record<string, unknown>
-  startedAt?: number
-}
-
-function formatDuration(startedAt: number): string {
-  const seconds = Math.floor((Date.now() - startedAt) / 1000)
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-const ROLE_COLORS: Record<string, string> = {
-  decoder: 'bg-blue-500/10 text-blue-400',
-  transcoder: 'bg-purple-500/10 text-purple-400',
-  detector: 'bg-green-500/10 text-green-400',
-  recorder: 'bg-orange-500/10 text-orange-400',
-  restreamer: 'bg-cyan-500/10 text-cyan-400',
-}
-
-interface TaskListProps {
-  tasks: AgentTask[]
-}
-
-export function TaskList({ tasks }: TaskListProps) {
-  if (tasks.length === 0) {
-    return (
-      <div className="text-[10px] text-foreground-subtle italic">No active tasks</div>
-    )
-  }
-
-  return (
-    <div className="space-y-1.5">
-      {tasks.map((task) => (
-        <div
-          key={task.id}
-          className="flex items-center gap-2 rounded-md bg-background px-2.5 py-1.5 text-[10px]"
-        >
-          <span className={`shrink-0 rounded-md px-1.5 py-0.5 font-medium ${ROLE_COLORS[task.role] ?? 'bg-primary/10 text-primary'}`}>
-            {task.role}
-          </span>
-
-          {task.cameraName && (
-            <span className="flex items-center gap-1 text-foreground-subtle truncate min-w-0">
-              <Video className="h-3 w-3 shrink-0" />
-              <span className="truncate">{task.cameraName}</span>
-            </span>
-          )}
-
-          {task.startedAt && (
-            <span className="ml-auto flex items-center gap-1 text-foreground-subtle shrink-0">
-              <Clock className="h-3 w-3" />
-              {formatDuration(task.startedAt)}
-            </span>
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/cameras/CameraCard.tsx

@@ -1,60 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { Camera, Eye, Activity } from 'lucide-react'
-
-interface CameraCardProps {
-  readonly id: string
-  readonly name: string
-  readonly status: string
-  readonly detectionsToday: number
-  readonly inferenceMs: number
-}
-
-const STATUS_CONFIG: Record<string, { label: string; bg: string; text: string }> = {
-  online:   { label: 'ACTIVE',   bg: 'bg-success/15', text: 'text-success' },
-  running:  { label: 'ACTIVE',   bg: 'bg-success/15', text: 'text-success' },
-  watching: { label: 'WATCHING', bg: 'bg-warning/15', text: 'text-warning' },
-  idle:     { label: 'WATCHING', bg: 'bg-warning/15', text: 'text-warning' },
-  offline:  { label: 'OFFLINE',  bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle' },
-  stopped:  { label: 'OFFLINE',  bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle' },
-  error:    { label: 'OFFLINE',  bg: 'bg-danger/15', text: 'text-danger' },
-}
-
-export function CameraCard({ id, name, status, detectionsToday, inferenceMs }: CameraCardProps) {
-  const navigate = useNavigate()
-  const statusCfg = STATUS_CONFIG[status] ?? STATUS_CONFIG['offline']!
-
-  return (
-    <button
-      onClick={() => navigate(`/devices/${id}`)}
-      className="group flex flex-col rounded-lg border border-border bg-surface text-left hover:border-primary/30 hover:shadow-md hover:shadow-black/5 transition-all w-full overflow-hidden"
-    >
-      {/* 16:9 stream placeholder */}
-      <div className="relative aspect-video w-full bg-background flex items-center justify-center">
-        <Camera className="h-8 w-8 text-foreground-subtle/20" />
-        {/* Status badge */}
-        <span
-          className={`absolute top-2 right-2 inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-bold tracking-wider ${statusCfg.bg} ${statusCfg.text}`}
-        >
-          {statusCfg.label}
-        </span>
-      </div>
-
-      {/* Info section */}
-      <div className="px-3 py-2.5 space-y-1.5">
-        <p className="text-xs font-semibold text-foreground truncate group-hover:text-primary transition-colors">
-          {name}
-        </p>
-        <div className="flex items-center gap-3 text-[10px] text-foreground-subtle">
-          <span className="inline-flex items-center gap-1">
-            <Eye className="h-3 w-3" />
-            {detectionsToday} today
-          </span>
-          <span className="inline-flex items-center gap-1">
-            <Activity className="h-3 w-3" />
-            {inferenceMs}ms
-          </span>
-        </div>
-      </div>
-    </button>
-  )
-}

package/src/components/cameras/LiveEventsPanel.tsx

@@ -1,91 +0,0 @@
-import { useState } from 'react'
-import { ChevronUp, Bell } from 'lucide-react'
-
-type EventType = 'DETECT' | 'PHASE' | 'MOTION' | 'REC' | 'STATE' | 'AUDIO'
-
-interface LiveEvent {
-  readonly id: string
-  readonly type: EventType
-  readonly message: string
-  readonly timestamp: string
-}
-
-const EVENT_COLORS: Record<EventType, { bg: string; text: string }> = {
-  DETECT: { bg: 'bg-success/15', text: 'text-success' },
-  PHASE:  { bg: 'bg-info/15',    text: 'text-info' },
-  MOTION: { bg: 'bg-warning/15', text: 'text-warning' },
-  REC:    { bg: 'bg-danger/15',  text: 'text-danger' },
-  STATE:  { bg: 'bg-primary/15', text: 'text-primary' },
-  AUDIO:  { bg: 'bg-purple-500/15', text: 'text-purple-400' },
-}
-
-interface LiveEventsPanelProps {
-  readonly deviceId: string
-}
-
-export function LiveEventsPanel({ deviceId: _deviceId }: LiveEventsPanelProps) {
-  const [events] = useState<readonly LiveEvent[]>([])
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <div className="flex items-center gap-2">
-          <span className="relative flex h-2 w-2">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75" />
-            <span className="relative inline-flex rounded-full h-2 w-2 bg-success" />
-          </span>
-          <h3 className="text-[11px] font-semibold text-foreground uppercase tracking-wider">Live Events</h3>
-        </div>
-        <button
-          title="Float panel"
-          className="p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
-        >
-          <ChevronUp className="h-3.5 w-3.5" />
-        </button>
-      </div>
-
-      {/* Event type legend */}
-      <div className="flex flex-wrap gap-1.5 px-3 py-2 border-b border-border">
-        {(Object.entries(EVENT_COLORS) as Array<[EventType, { bg: string; text: string }]>).map(([type, colors]) => (
-          <span
-            key={type}
-            className={`inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-medium ${colors.bg} ${colors.text}`}
-          >
-            {type}
-          </span>
-        ))}
-      </div>
-
-      {/* Event stream */}
-      <div className="flex-1 overflow-y-auto">
-        {events.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 text-foreground-subtle">
-            <Bell className="h-6 w-6 mb-2 opacity-30" />
-            <p className="text-[11px]">Waiting for events...</p>
-            <p className="text-[10px] mt-0.5 opacity-70">Events will stream in real-time</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-border">
-            {events.map((event) => {
-              const colors = EVENT_COLORS[event.type] ?? EVENT_COLORS['DETECT']!
-              return (
-                <div key={event.id} className="px-3 py-2 hover:bg-surface-hover transition-colors">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-medium ${colors.bg} ${colors.text}`}
-                    >
-                      {event.type}
-                    </span>
-                    <span className="text-[10px] text-foreground-subtle ml-auto">{event.timestamp}</span>
-                  </div>
-                  <p className="text-[11px] text-foreground mt-1">{event.message}</p>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/cameras/ProviderSection.tsx

@@ -1,50 +0,0 @@
-import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
-import { StatusBadge } from '../shared/StatusBadge'
-import { CameraCard } from './CameraCard'
-
-interface CameraDevice {
-  readonly id: string
-  readonly name: string
-  readonly status: string
-}
-
-interface ProviderSectionProps {
-  readonly providerType: string
-  readonly providerName: string
-  readonly providerStatus: string
-  readonly devices: readonly CameraDevice[]
-}
-
-export function ProviderSection({ providerType, providerName, providerStatus, devices }: ProviderSectionProps) {
-  return (
-    <section className="space-y-3">
-      {/* Provider header */}
-      <div className="flex items-center gap-3">
-        <ProviderIcon type={providerType} size="md" />
-        <div className="flex items-center gap-2 min-w-0">
-          <h2 className="text-sm font-semibold text-foreground truncate">
-            {providerName || getProviderLabel(providerType)}
-          </h2>
-          <span className="text-[10px] text-foreground-subtle flex-shrink-0">
-            {devices.length} camera{devices.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-        <StatusBadge status={providerStatus} />
-      </div>
-
-      {/* Camera grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-        {devices.map((device) => (
-          <CameraCard
-            key={device.id}
-            id={device.id}
-            name={device.name}
-            status={device.status}
-            detectionsToday={0}
-            inferenceMs={0}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}