@camstack/addon-admin-ui 0.1.2 → 0.1.4

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

package/src/components/cameras/StreamArea.tsx

@@ -1,107 +0,0 @@
-import { useState } from 'react'
-import { Camera, Eye, Activity, Crosshair, HardDrive } from 'lucide-react'
-
-const STREAM_SOURCES = ['WebRTC', 'HLS', 'MJPEG', 'go2rtc'] as const
-const OVERLAY_OPTIONS = ['BBox', 'Segm', 'Zones', 'Trail'] as const
-
-interface StreamAreaProps {
-  readonly deviceName: string
-  readonly detectionsToday: number
-  readonly inferenceMs: number
-  readonly activeTracks: number
-  readonly storageGb: number
-}
-
-export function StreamArea({ deviceName, detectionsToday, inferenceMs, activeTracks, storageGb }: StreamAreaProps) {
-  const [activeSource, setActiveSource] = useState<string>('WebRTC')
-  const [activeOverlays, setActiveOverlays] = useState<ReadonlySet<string>>(new Set())
-
-  function toggleOverlay(overlay: string) {
-    setActiveOverlays((prev) => {
-      const next = new Set(prev)
-      if (next.has(overlay)) {
-        next.delete(overlay)
-      } else {
-        next.add(overlay)
-      }
-      return next
-    })
-  }
-
-  return (
-    <div className="space-y-3">
-      {/* Stream preview */}
-      <div className="relative w-full max-w-[320px] aspect-video bg-background rounded-lg border border-border flex items-center justify-center overflow-hidden">
-        <Camera className="h-10 w-10 text-foreground-subtle/20" />
-        <div className="absolute bottom-2 left-2 text-[10px] text-foreground-subtle bg-background/80 rounded px-1.5 py-0.5">
-          {deviceName}
-        </div>
-      </div>
-
-      {/* Source selector chips */}
-      <div className="flex flex-wrap gap-1.5">
-        <span className="text-[10px] text-foreground-subtle mr-1 self-center">Source:</span>
-        {STREAM_SOURCES.map((source) => (
-          <button
-            key={source}
-            onClick={() => setActiveSource(source)}
-            className={`rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors ${
-              activeSource === source
-                ? 'bg-primary/15 text-primary border border-primary/30'
-                : 'bg-surface border border-border text-foreground-subtle hover:text-foreground'
-            }`}
-          >
-            {source}
-          </button>
-        ))}
-      </div>
-
-      {/* Overlay toggle chips */}
-      <div className="flex flex-wrap gap-1.5">
-        <span className="text-[10px] text-foreground-subtle mr-1 self-center">Overlay:</span>
-        {OVERLAY_OPTIONS.map((overlay) => {
-          const isActive = activeOverlays.has(overlay)
-          return (
-            <button
-              key={overlay}
-              onClick={() => toggleOverlay(overlay)}
-              className={`rounded-full px-2.5 py-1 text-[10px] font-medium transition-colors ${
-                isActive
-                  ? 'bg-info/15 text-info border border-info/30'
-                  : 'bg-surface border border-border text-foreground-subtle hover:text-foreground'
-              }`}
-            >
-              {overlay}
-            </button>
-          )
-        })}
-      </div>
-
-      {/* Quick stats */}
-      <div className="grid grid-cols-4 gap-2">
-        <StatCounter icon={Eye} label="Today" value={String(detectionsToday)} />
-        <StatCounter icon={Activity} label="Inference" value={`${inferenceMs}ms`} />
-        <StatCounter icon={Crosshair} label="Tracks" value={String(activeTracks)} />
-        <StatCounter icon={HardDrive} label="Storage" value={`${storageGb.toFixed(1)}GB`} />
-      </div>
-    </div>
-  )
-}
-
-function StatCounter({
-  icon: Icon,
-  label,
-  value,
-}: {
-  readonly icon: React.ComponentType<{ className?: string }>
-  readonly label: string
-  readonly value: string
-}) {
-  return (
-    <div className="flex flex-col items-center gap-1 rounded-lg border border-border bg-surface px-2 py-2">
-      <Icon className="h-3.5 w-3.5 text-foreground-subtle" />
-      <span className="text-xs font-semibold text-foreground">{value}</span>
-      <span className="text-[9px] text-foreground-subtle">{label}</span>
-    </div>
-  )
-}

package/src/components/cameras/tabs/AddonsTab.tsx

@@ -1,113 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { Settings, Package } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-
-interface AddonsTabProps {
-  readonly deviceId: string
-}
-
-interface RawAddon {
-  readonly id: string
-  readonly packageName: string
-  readonly slot: string | null
-}
-
-interface AddonDisplay {
-  readonly id: string
-  readonly name: string
-  readonly type: string
-  readonly enabled: boolean
-  readonly version?: string
-}
-
-function toAddonDisplay(raw: RawAddon): AddonDisplay {
-  return {
-    id: raw.id,
-    name: raw.packageName ?? raw.id,
-    type: raw.slot ?? 'addon',
-    enabled: true,
-  }
-}
-
-export function AddonsTab({ deviceId: _deviceId }: AddonsTabProps) {
-  const client = useBackendClient()
-
-  const { data: addonsData, isLoading } = useQuery({
-    queryKey: ['bridge-addons'],
-    queryFn: () => client.bridgeListAddons(),
-  })
-
-  const rawAddons = (addonsData ?? []) as unknown as readonly RawAddon[]
-  const addons = rawAddons.map(toAddonDisplay)
-  const visionAddons = addons.filter(
-    (a) => a.type === 'vision' || a.type === 'detection' || a.type === 'inference'
-  )
-
-  if (isLoading) {
-    return (
-      <div className="space-y-2">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-16 rounded-lg border border-border bg-surface animate-pulse" />
-        ))}
-      </div>
-    )
-  }
-
-  if (!visionAddons.length && !addons.length) {
-    return (
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Vision Addons</h2>
-        </div>
-        <div className="flex flex-col items-center justify-center py-16 text-foreground-subtle">
-          <Package className="h-8 w-8 mb-3 opacity-30" />
-          <p className="text-sm">No vision addons installed</p>
-          <p className="text-xs mt-1 opacity-70">Install addons to enable detection and inference</p>
-        </div>
-      </div>
-    )
-  }
-
-  const displayAddons: readonly AddonDisplay[] = visionAddons.length > 0 ? visionAddons : addons
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Vision Addons</h2>
-        <span className="text-[10px] text-foreground-subtle">
-          {displayAddons.length} addon{displayAddons.length !== 1 ? 's' : ''}
-        </span>
-      </div>
-
-      <div className="space-y-2">
-        {displayAddons.map((addon) => (
-          <div
-            key={addon.id}
-            className="flex items-center gap-3 rounded-lg border border-border bg-surface px-4 py-3"
-          >
-            <div className="flex items-center justify-center rounded-lg h-8 w-8 bg-primary/10 flex-shrink-0">
-              <Package className="h-4 w-4 text-primary" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-xs font-medium text-foreground truncate">{addon.name || addon.id}</p>
-              <p className="text-[10px] text-foreground-subtle">
-                {addon.type} {addon.version ? `v${addon.version}` : ''}
-              </p>
-            </div>
-            <div
-              className={`h-2 w-2 rounded-full flex-shrink-0 ${
-                addon.enabled !== false ? 'bg-success' : 'bg-foreground-subtle/30'
-              }`}
-            />
-            <button
-              className="p-1.5 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-              title="Settings"
-            >
-              <Settings className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/components/cameras/tabs/CameraEventsTab.tsx

@@ -1,129 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { Bell, User, Car, Dog, Mic } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-
-interface CameraEventsTabProps {
-  readonly deviceId: string
-}
-
-type EventCategory = 'person' | 'vehicle' | 'animal' | 'audio' | 'other'
-
-const CATEGORY_CONFIG: Record<EventCategory, { color: string; borderColor: string; icon: React.ComponentType<{ className?: string }> }> = {
-  person:  { color: 'text-success', borderColor: 'border-l-success', icon: User },
-  vehicle: { color: 'text-info',    borderColor: 'border-l-info',    icon: Car },
-  animal:  { color: 'text-warning', borderColor: 'border-l-warning', icon: Dog },
-  audio:   { color: 'text-danger',  borderColor: 'border-l-danger',  icon: Mic },
-  other:   { color: 'text-foreground-subtle', borderColor: 'border-l-foreground-subtle', icon: Bell },
-}
-
-function classifyEvent(event: Record<string, unknown>): EventCategory {
-  const label = String(event.label ?? event.type ?? '').toLowerCase()
-  if (label.includes('person') || label.includes('face')) return 'person'
-  if (label.includes('vehicle') || label.includes('car') || label.includes('truck')) return 'vehicle'
-  if (label.includes('animal') || label.includes('dog') || label.includes('cat')) return 'animal'
-  if (label.includes('audio') || label.includes('sound')) return 'audio'
-  return 'other'
-}
-
-export function CameraEventsTab({ deviceId }: CameraEventsTabProps) {
-  const client = useBackendClient()
-
-  const { data: eventsData, isLoading } = useQuery({
-    queryKey: ['events', deviceId],
-    queryFn: () => client.getEvents(deviceId, { limit: 50 }),
-    enabled: !!deviceId,
-    refetchInterval: 5_000,
-  })
-
-  const events = (eventsData ?? []) as readonly Record<string, unknown>[]
-
-  if (isLoading) {
-    return (
-      <div className="space-y-2">
-        {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="h-16 rounded-lg border border-border bg-surface animate-pulse" />
-        ))}
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Detection Events</h2>
-        <span className="text-[10px] text-foreground-subtle">
-          {events.length} event{events.length !== 1 ? 's' : ''}
-        </span>
-      </div>
-
-      {/* Category legend */}
-      <div className="flex flex-wrap gap-3">
-        {(Object.entries(CATEGORY_CONFIG) as Array<[EventCategory, typeof CATEGORY_CONFIG[EventCategory]]>).map(
-          ([cat, cfg]) => {
-            const Icon = cfg.icon
-            return (
-              <span key={cat} className={`inline-flex items-center gap-1 text-[10px] ${cfg.color}`}>
-                <Icon className="h-3 w-3" />
-                {cat}
-              </span>
-            )
-          }
-        )}
-      </div>
-
-      {events.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
-          <div className="flex flex-col items-center justify-center py-16 text-foreground-subtle">
-            <Bell className="h-8 w-8 mb-3 opacity-30" />
-            <p className="text-sm">No events yet</p>
-            <p className="text-xs mt-1 opacity-70">Detection events will appear here as they occur</p>
-          </div>
-        </div>
-      ) : (
-        <div className="space-y-1.5">
-          {events.map((event, index) => {
-            const category = classifyEvent(event)
-            const cfg = CATEGORY_CONFIG[category]
-            const Icon = cfg.icon
-            const label = String(event.label ?? event.type ?? 'Unknown')
-            const score = event.score != null ? Number(event.score) : null
-            const zone = event.zone ? String(event.zone) : null
-            const trackId = event.trackId ? String(event.trackId) : null
-            const timestamp = event.timestamp
-              ? new Date(event.timestamp as string | number).toLocaleTimeString('en-GB', { hour12: false })
-              : ''
-
-            return (
-              <div
-                key={event.id ? String(event.id) : index}
-                className={`flex items-start gap-3 rounded-lg border border-border border-l-4 ${cfg.borderColor} bg-surface px-3 py-2.5 hover:bg-surface-hover transition-colors`}
-              >
-                {/* Crop thumbnail placeholder */}
-                <div className="h-10 w-10 rounded bg-background flex items-center justify-center flex-shrink-0">
-                  <Icon className={`h-4 w-4 ${cfg.color}`} />
-                </div>
-
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium text-foreground capitalize">{label}</span>
-                    {score != null && (
-                      <span className="text-[9px] bg-surface-hover rounded px-1.5 py-0.5 text-foreground-subtle">
-                        {(score * 100).toFixed(0)}%
-                      </span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2 mt-0.5 text-[10px] text-foreground-subtle">
-                    {trackId && <span>Track: {trackId}</span>}
-                    {zone && <span>Zone: {zone}</span>}
-                  </div>
-                </div>
-
-                <span className="text-[10px] text-foreground-subtle flex-shrink-0">{timestamp}</span>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/cameras/tabs/PipelineTab.tsx

@@ -1,118 +0,0 @@
-import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { ChevronDown, ChevronRight, GitBranch } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-
-interface PipelineTabProps {
-  readonly deviceId: string
-}
-
-interface PipelineStep {
-  readonly id: string
-  readonly name: string
-  readonly type: string
-  readonly enabled: boolean
-  readonly config: Record<string, unknown>
-}
-
-export function PipelineTab({ deviceId }: PipelineTabProps) {
-  const client = useBackendClient()
-  const [expandedSteps, setExpandedSteps] = useState<ReadonlySet<string>>(new Set())
-
-  const { data: pipelineData, isLoading } = useQuery({
-    queryKey: ['pipeline', deviceId],
-    queryFn: () => client.bridgeGetPipeline(deviceId),
-    enabled: !!deviceId,
-  })
-
-  const pipeline = pipelineData as Record<string, unknown> | null | undefined
-  const videoSteps = (pipeline?.video ?? []) as readonly PipelineStep[]
-
-  function toggleStep(stepId: string) {
-    setExpandedSteps((prev) => {
-      const next = new Set(prev)
-      if (next.has(stepId)) {
-        next.delete(stepId)
-      } else {
-        next.add(stepId)
-      }
-      return next
-    })
-  }
-
-  if (isLoading) {
-    return (
-      <div className="space-y-3">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-14 rounded-lg border border-border bg-surface animate-pulse" />
-        ))}
-      </div>
-    )
-  }
-
-  if (!videoSteps.length) {
-    return (
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="border-b border-border px-4 py-2.5">
-          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Pipeline Config</h2>
-        </div>
-        <div className="flex flex-col items-center justify-center py-16 text-foreground-subtle">
-          <GitBranch className="h-8 w-8 mb-3 opacity-30" />
-          <p className="text-sm">No pipeline configured</p>
-          <p className="text-xs mt-1 opacity-70">Pipeline steps will appear here once configured</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between mb-3">
-        <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Pipeline Steps</h2>
-        <span className="text-[10px] text-foreground-subtle">
-          {videoSteps.length} step{videoSteps.length !== 1 ? 's' : ''} — read-only
-        </span>
-      </div>
-
-      {videoSteps.map((step, index) => {
-        const isExpanded = expandedSteps.has(step.id ?? String(index))
-        const stepId = step.id ?? String(index)
-
-        return (
-          <div key={stepId} className="rounded-lg border border-border bg-surface overflow-hidden">
-            <button
-              onClick={() => toggleStep(stepId)}
-              className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-surface-hover transition-colors"
-            >
-              {isExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5 text-foreground-subtle flex-shrink-0" />
-              )}
-              <span className="text-[10px] text-foreground-subtle w-5">{index + 1}</span>
-              <span className="text-xs font-medium text-foreground flex-1 truncate">
-                {step.name || step.type || `Step ${index + 1}`}
-              </span>
-              <span className="text-[10px] text-foreground-subtle bg-surface-hover rounded px-1.5 py-0.5">
-                {step.type || 'unknown'}
-              </span>
-              <div
-                className={`h-2 w-2 rounded-full flex-shrink-0 ${
-                  step.enabled !== false ? 'bg-success' : 'bg-foreground-subtle/30'
-                }`}
-              />
-            </button>
-
-            {isExpanded && (
-              <div className="border-t border-border px-4 py-3 bg-background">
-                <pre className="text-[11px] font-mono text-foreground-subtle whitespace-pre-wrap break-all">
-                  {JSON.stringify(step.config ?? step, null, 2)}
-                </pre>
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}