@camstack/addon-admin-ui 0.1.1

package/src/components/cameras/StreamArea.tsx

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

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

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

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

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

@@ -0,0 +1,114 @@
+import { useQuery } from '@tanstack/react-query'
+import { Radio, Copy, Check } from 'lucide-react'
+import { useState } from 'react'
+import { useBackendClient } from '../../../hooks/useBackendClient'
+
+interface StreamsTabProps {
+  readonly deviceId: string
+}
+
+export function StreamsTab({ deviceId }: StreamsTabProps) {
+  const client = useBackendClient()
+  const [copiedUrl, setCopiedUrl] = useState<string | null>(null)
+
+  const { data: deviceData } = useQuery({
+    queryKey: ['device', deviceId],
+    queryFn: () => client.getDevice(deviceId),
+    enabled: !!deviceId,
+  })
+
+  const device = (deviceData ?? {}) as Record<string, unknown>
+  const serverUrl = (client as unknown as { serverUrl?: string }).serverUrl ?? window.location.origin
+
+  // Build stream URLs from known patterns
+  const streams = [
+    {
+      id: 'webrtc',
+      label: 'WebRTC',
+      resolution: 'Native',
+      codec: 'H.264',
+      url: `${serverUrl}/webrtc/${deviceId}`,
+    },
+    {
+      id: 'hls',
+      label: 'HLS',
+      resolution: 'Native',
+      codec: 'H.264',
+      url: `${serverUrl}/hls/${deviceId}/index.m3u8`,
+    },
+    {
+      id: 'mjpeg',
+      label: 'MJPEG',
+      resolution: 'Scaled',
+      codec: 'MJPEG',
+      url: `${serverUrl}/mjpeg/${deviceId}`,
+    },
+  ]
+
+  async function handleCopy(url: string) {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopiedUrl(url)
+      setTimeout(() => setCopiedUrl(null), 2000)
+    } catch {
+      // clipboard not available
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Available streams */}
+      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="border-b border-border px-4 py-2.5 flex items-center justify-between">
+          <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Available Streams</h2>
+          <span className="text-[10px] text-foreground-subtle">{streams.length} streams</span>
+        </div>
+        <div className="divide-y divide-border">
+          {streams.map((stream) => (
+            <div key={stream.id} className="flex items-center gap-3 px-4 py-3">
+              <div className="flex items-center justify-center rounded-lg h-8 w-8 bg-info/10 flex-shrink-0">
+                <Radio className="h-4 w-4 text-info" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="text-xs font-medium text-foreground">{stream.label}</p>
+                  <span className="text-[9px] bg-surface-hover rounded px-1.5 py-0.5 text-foreground-subtle">
+                    {stream.resolution}
+                  </span>
+                  <span className="text-[9px] bg-surface-hover rounded px-1.5 py-0.5 text-foreground-subtle">
+                    {stream.codec}
+                  </span>
+                </div>
+                <p className="text-[10px] font-mono text-foreground-subtle mt-0.5 truncate">{stream.url}</p>
+              </div>
+              <button
+                onClick={() => handleCopy(stream.url)}
+                className="p-1.5 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors flex-shrink-0"
+                title="Copy URL"
+              >
+                {copiedUrl === stream.url ? (
+                  <Check className="h-3.5 w-3.5 text-success" />
+                ) : (
+                  <Copy className="h-3.5 w-3.5" />
+                )}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Restreamer URLs */}
+      <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">Restreamer</h2>
+        </div>
+        <div className="px-4 py-8 flex flex-col items-center text-center text-foreground-subtle">
+          <p className="text-sm">Restreamer URLs</p>
+          <p className="text-xs mt-1 opacity-70">
+            Restreamer endpoints will be displayed here when a restreamer is configured
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard/BlockPicker.tsx

@@ -0,0 +1,54 @@
+import { X } from 'lucide-react'
+import { getAllBlocks } from './block-registry'
+import type { DashboardBlock } from '../../types/dashboard'
+
+interface BlockPickerProps {
+  open: boolean
+  onClose: () => void
+  onSelect: (block: DashboardBlock) => void
+}
+
+export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
+  if (!open) return null
+
+  const blocks = getAllBlocks()
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
+      <div
+        className="w-full max-w-md rounded-xl border border-border bg-surface p-5 shadow-2xl shadow-black/20"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-sm font-semibold text-foreground">Add Block</h2>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-md hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          {blocks.map((block) => {
+            const Icon = block.icon
+            return (
+              <button
+                key={block.id}
+                onClick={() => { onSelect(block); onClose() }}
+                className="flex items-center gap-3 rounded-lg border border-border p-3 text-left hover:bg-surface-hover hover:border-primary/30 transition-all group"
+              >
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 group-hover:bg-primary/15 transition-colors shrink-0">
+                  <Icon className="h-4 w-4 text-primary" />
+                </div>
+                <div>
+                  <span className="text-xs font-medium text-foreground block">{block.name}</span>
+                  <span className="text-[10px] text-foreground-subtle">{block.defaultSize.w}x{block.defaultSize.h}</span>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}