@camstack/addon-admin-ui 0.1.1 → 0.1.3

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

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

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

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