@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/device/tabs/OverviewTab.tsx

@@ -1,104 +0,0 @@
-import { StatusBadge } from '../../shared/StatusBadge'
-import { CapabilityBadges } from '../../shared/CapabilityBadges'
-import { ProviderIcon } from '../../shared/ProviderIcon'
-import { WebRtcPlayer } from '../../shared/WebRtcPlayer'
-import { getBackendClient } from '../../../lib/backend'
-
-interface OverviewTabProps {
-  device: Record<string, unknown>
-}
-
-export function OverviewTab({ device }: OverviewTabProps) {
-  const id = String(device.id ?? '—')
-  const name = String(device.name ?? '—')
-  const type = String(device.type ?? '—')
-  const provider = String(device.providerId ?? device.provider ?? '—')
-  const status = String(device.status ?? 'offline')
-  const capabilities = (device.capabilities ?? []) as string[]
-
-  const client = getBackendClient()
-  const serverUrl = (client as unknown as { serverUrl?: string }).serverUrl ?? window.location.origin
-
-  return (
-    <div className="space-y-6">
-      {/* Live Stream Preview */}
-      <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">Live Preview</h2>
-        </div>
-        <div className="p-3">
-          <WebRtcPlayer
-            serverUrl={serverUrl}
-            streamId={id}
-            className="w-full aspect-video rounded"
-            muted
-          />
-        </div>
-      </div>
-      {/* Device Info */}
-      <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">Device Info</h2>
-        </div>
-        <div className="divide-y divide-border">
-          <InfoRow label="ID" value={<span className="font-mono text-xs text-foreground">{id}</span>} />
-          <InfoRow label="Name" value={name} />
-          <InfoRow label="Type" value={type} />
-          <InfoRow
-            label="Provider"
-            value={
-              <div className="flex items-center gap-2">
-                <ProviderIcon type={provider} size="sm" showLabel />
-              </div>
-            }
-          />
-          <InfoRow
-            label="Status"
-            value={<StatusBadge status={status} />}
-          />
-          <InfoRow
-            label="Capabilities"
-            value={
-              capabilities.length > 0 ? (
-                <CapabilityBadges capabilities={capabilities} />
-              ) : (
-                <span className="text-xs text-foreground-subtle">None</span>
-              )
-            }
-          />
-        </div>
-      </div>
-
-      {/* Pipeline Status */}
-      <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 Status</h2>
-        </div>
-        <div className="px-4 py-8 flex flex-col items-center text-center text-foreground-subtle">
-          <p className="text-sm">Pipeline status</p>
-          <p className="text-xs mt-1">Pipeline metrics will appear here once the device is active</p>
-        </div>
-      </div>
-
-      {/* Last 5 Events */}
-      <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">Recent Events</h2>
-        </div>
-        <div className="px-4 py-8 flex flex-col items-center text-center text-foreground-subtle">
-          <p className="text-sm">No recent events</p>
-          <p className="text-xs mt-1">Events will appear here as the device generates them</p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-4 px-4 py-2.5">
-      <span className="w-28 flex-shrink-0 text-xs text-foreground-subtle">{label}</span>
-      <div className="text-xs text-foreground">{value}</div>
-    </div>
-  )
-}

package/src/components/device/tabs/ProviderSettingsTab.tsx

@@ -1,34 +0,0 @@
-import { Settings } from 'lucide-react'
-
-export function ProviderSettingsTab() {
-  return (
-    <div className="p-4 space-y-4">
-      {/* Explanation */}
-      <div className="rounded-lg border border-border bg-surface p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex items-center justify-center rounded-full bg-primary/10 p-2 shrink-0">
-            <Settings className="h-4 w-4 text-primary" />
-          </div>
-          <div>
-            <p className="text-sm font-medium text-foreground">Provider Settings</p>
-            <p className="mt-1 text-xs text-foreground-subtle leading-relaxed">
-              Provider settings are loaded from the addon configuration schema. Each provider
-              addon declares its own settings using a declarative schema that is rendered
-              automatically as a form.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Placeholder */}
-      <div className="flex flex-col items-center justify-center py-12 text-center rounded-lg border border-dashed border-border">
-        <p className="text-xs text-foreground-subtle">
-          Select an addon to configure provider-level settings.
-        </p>
-        <p className="text-[10px] text-foreground-disabled mt-1">
-          Settings will be rendered here using the FormBuilder once a provider addon is selected.
-        </p>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/RecordingTab.tsx

@@ -1,47 +0,0 @@
-import { CircleDot, Film } from 'lucide-react'
-
-export function RecordingTab() {
-  const isRecording = false
-
-  return (
-    <div className="space-y-4">
-      {/* Recording status */}
-      <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">Recording Status</h2>
-        </div>
-        <div className="px-4 py-4 flex items-center gap-3">
-          <div
-            className={`flex items-center justify-center rounded-full p-2 ${
-              isRecording ? 'bg-danger/10' : 'bg-foreground-subtle/10'
-            }`}
-          >
-            <CircleDot
-              className={`h-5 w-5 ${isRecording ? 'text-danger' : 'text-foreground-subtle'}`}
-            />
-          </div>
-          <div>
-            <p className={`text-sm font-medium ${isRecording ? 'text-danger' : 'text-foreground-subtle'}`}>
-              {isRecording ? 'Recording' : 'Not Recording'}
-            </p>
-            <p className="text-[11px] text-foreground-subtle mt-0.5">
-              {isRecording ? 'Recording in progress' : 'No active recording session'}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Segments */}
-      <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">Recorded Segments</h2>
-        </div>
-        <div className="flex flex-col items-center justify-center py-12 text-foreground-subtle">
-          <Film className="h-8 w-8 mb-3 opacity-30" />
-          <p className="text-sm">No recorded segments</p>
-          <p className="text-xs mt-1 opacity-70">Recorded clips will appear here</p>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/ReplTab.tsx

@@ -1,153 +0,0 @@
-import { useState, useRef } from 'react'
-import { useMutation } from '@tanstack/react-query'
-import { Play, ChevronUp, Trash2 } from 'lucide-react'
-import { useBackendClient } from '../../../hooks/useBackendClient'
-
-interface ReplTabProps {
-  deviceId: string
-}
-
-interface HistoryEntry {
-  id: number
-  code: string
-  result: string
-  error: boolean
-  ts: string
-}
-
-let historyCounter = 0
-
-export function ReplTab({ deviceId }: ReplTabProps) {
-  const client = useBackendClient()
-  const [code, setCode] = useState('')
-  const [history, setHistory] = useState<HistoryEntry[]>([])
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-
-  const evalMutation = useMutation({
-    mutationFn: (src: string) =>
-      client.replEval(src, { type: 'device' as const, deviceId }),
-    onSuccess: (data, src) => {
-      const result = typeof data === 'string' ? data : JSON.stringify(data, null, 2)
-      setHistory((prev) => [
-        ...prev,
-        {
-          id: ++historyCounter,
-          code: src,
-          result,
-          error: false,
-          ts: new Date().toLocaleTimeString('en-GB', { hour12: false }),
-        },
-      ])
-      setCode('')
-    },
-    onError: (err: unknown, src) => {
-      const result = err instanceof Error ? err.message : String(err)
-      setHistory((prev) => [
-        ...prev,
-        {
-          id: ++historyCounter,
-          code: src,
-          result,
-          error: true,
-          ts: new Date().toLocaleTimeString('en-GB', { hour12: false }),
-        },
-      ])
-    },
-  })
-
-  function handleExecute() {
-    const trimmed = code.trim()
-    if (!trimmed) return
-    evalMutation.mutate(trimmed)
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-      e.preventDefault()
-      handleExecute()
-    }
-  }
-
-  function reuseCode(src: string) {
-    setCode(src)
-    textareaRef.current?.focus()
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-xs text-foreground-subtle">
-          Scoped to device: <span className="font-mono text-foreground">{deviceId}</span>
-        </p>
-        {history.length > 0 && (
-          <button
-            onClick={() => setHistory([])}
-            className="inline-flex items-center gap-1 text-[10px] text-foreground-subtle hover:text-foreground"
-          >
-            <Trash2 className="h-3 w-3" />
-            Clear history
-          </button>
-        )}
-      </div>
-
-      {/* Input */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
-        <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
-          <span className="text-[10px] text-foreground-subtle font-mono">JavaScript — Ctrl+Enter to run</span>
-          <button
-            onClick={handleExecute}
-            disabled={evalMutation.isPending || !code.trim()}
-            className="inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-[10px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-          >
-            <Play className="h-3 w-3" />
-            {evalMutation.isPending ? 'Running...' : 'Execute'}
-          </button>
-        </div>
-        <textarea
-          ref={textareaRef}
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          onKeyDown={handleKeyDown}
-          rows={5}
-          placeholder="// Enter JavaScript code scoped to this device..."
-          className="w-full resize-y bg-background p-3 font-mono text-xs text-foreground placeholder:text-foreground-subtle focus:outline-none"
-          spellCheck={false}
-        />
-      </div>
-
-      {/* History */}
-      {history.length === 0 && (
-        <div className="text-xs text-foreground-subtle">No evaluations yet</div>
-      )}
-
-      {history.length > 0 && (
-        <div className="space-y-3">
-          {[...history].reverse().map((entry) => (
-            <div key={entry.id} className="rounded-lg border border-border bg-surface overflow-hidden">
-              <div className="flex items-start justify-between gap-2 border-b border-border bg-background px-3 py-2">
-                <pre className="font-mono text-xs text-foreground whitespace-pre-wrap break-all flex-1">{entry.code}</pre>
-                <div className="flex items-center gap-1.5 flex-shrink-0">
-                  <span className="text-[10px] text-foreground-subtle">{entry.ts}</span>
-                  <button
-                    onClick={() => reuseCode(entry.code)}
-                    title="Reuse"
-                    className="text-foreground-subtle hover:text-foreground"
-                  >
-                    <ChevronUp className="h-3.5 w-3.5" />
-                  </button>
-                </div>
-              </div>
-              <pre
-                className={`px-3 py-2 font-mono text-xs whitespace-pre-wrap break-all ${
-                  entry.error ? 'text-danger' : 'text-success'
-                }`}
-              >
-                {entry.result}
-              </pre>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/device/tabs/TrackTrailTab.tsx

@@ -1,49 +0,0 @@
-import { useState } from 'react'
-import { Footprints } from 'lucide-react'
-
-export function TrackTrailTab() {
-  const [trailEnabled, setTrailEnabled] = useState(false)
-
-  return (
-    <div className="space-y-4">
-      <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">Track Trail Config</h2>
-          <p className="text-[11px] text-foreground-subtle mt-0.5">Visualize movement trails for tracked objects</p>
-        </div>
-        <div className="px-4 py-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs font-medium text-foreground">Enable Trail Visualization</p>
-              <p className="text-[11px] text-foreground-subtle mt-0.5">Show movement history for tracked objects</p>
-            </div>
-            <button
-              onClick={() => setTrailEnabled((v) => !v)}
-              className={`relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
-                trailEnabled ? 'bg-primary' : 'bg-foreground-subtle/30'
-              }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition-transform ${
-                  trailEnabled ? 'translate-x-4' : 'translate-x-0'
-                }`}
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Active trails */}
-      <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">Active Trails</h2>
-        </div>
-        <div className="flex flex-col items-center justify-center py-12 text-foreground-subtle">
-          <Footprints className="h-8 w-8 mb-3 opacity-30" />
-          <p className="text-sm">No active trails</p>
-          <p className="text-xs mt-1 opacity-70">Trails appear when objects are being tracked</p>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/device/tabs/ZonesTab.tsx

@@ -1,98 +0,0 @@
-import { useState } from 'react'
-import { ZoneCanvas } from '../zone-editor/ZoneCanvas'
-import { ZoneList } from '../zone-editor/ZoneList'
-import { ZoneForm } from '../zone-editor/ZoneForm'
-import type { Zone } from '../zone-editor/ZoneCanvas'
-
-// ---------------------------------------------------------------------------
-// ZonesTab
-// ---------------------------------------------------------------------------
-
-export function ZonesTab() {
-  const [zones, setZones] = useState<Zone[]>([])
-  const [selectedZoneId, setSelectedZoneId] = useState<string | null>(null)
-  const [drawingType, setDrawingType] = useState<'intrusion' | 'package-watch' | 'tripwire' | null>(null)
-
-  const selectedZone = zones.find((z) => z.id === selectedZoneId) ?? null
-
-  const handleZoneComplete = (zone: Zone) => {
-    setZones((prev) => [...prev, zone])
-    setSelectedZoneId(zone.id)
-    setDrawingType(null)
-  }
-
-  const handleZonePointsChange = (id: string, points: { x: number; y: number }[]) => {
-    setZones((prev) => prev.map((z) => (z.id === id ? { ...z, points } : z)))
-  }
-
-  const handleZoneChange = (updated: Zone) => {
-    setZones((prev) => prev.map((z) => (z.id === updated.id ? updated : z)))
-  }
-
-  const handleDeleteZone = (id: string) => {
-    setZones((prev) => prev.filter((z) => z.id !== id))
-    if (selectedZoneId === id) setSelectedZoneId(null)
-  }
-
-  const handleStartDraw = (type: 'intrusion' | 'package-watch' | 'tripwire') => {
-    setSelectedZoneId(null)
-    setDrawingType(type)
-  }
-
-  return (
-    <div className="space-y-4">
-      <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">
-          <div>
-            <h2 className="text-xs font-semibold text-foreground uppercase tracking-wider">Zone Editor</h2>
-            <p className="text-[11px] text-foreground-subtle mt-0.5">
-              Define detection zones and tripwire lines
-            </p>
-          </div>
-          <span className="text-[10px] text-foreground-subtle">
-            {zones.length} zone{zones.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-
-        {/* Main layout: canvas + sidebar */}
-        <div className="flex flex-col lg:flex-row">
-          {/* Canvas area */}
-          <div className="flex-1 p-4">
-            <ZoneCanvas
-              zones={zones}
-              selectedZoneId={selectedZoneId}
-              onSelectZone={setSelectedZoneId}
-              onZonePointsChange={handleZonePointsChange}
-              onZoneComplete={handleZoneComplete}
-              drawingType={drawingType}
-            />
-          </div>
-
-          {/* Sidebar */}
-          <div className="w-full lg:w-64 border-t lg:border-t-0 lg:border-l border-border p-4 flex flex-col gap-4">
-            <ZoneList
-              zones={zones}
-              selectedZoneId={selectedZoneId}
-              drawingType={drawingType}
-              onSelectZone={setSelectedZoneId}
-              onDeleteZone={handleDeleteZone}
-              onStartDraw={handleStartDraw}
-              onCancelDraw={() => setDrawingType(null)}
-            />
-
-            {selectedZone && !drawingType && (
-              <>
-                <div className="border-t border-border" />
-                <ZoneForm
-                  zone={selectedZone}
-                  onChange={handleZoneChange}
-                  onDelete={() => handleDeleteZone(selectedZone.id)}
-                />
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}