@camstack/addon-admin-ui 0.1.1

package/src/components/dashboard/BlockWrapper.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { Settings, X, GripVertical } from 'lucide-react'
+import type { DashboardBlock } from '../../types/dashboard'
+
+interface BlockWrapperProps {
+  block: DashboardBlock
+  config: Record<string, unknown>
+  size: { w: number; h: number }
+  onRemove: () => void
+  onConfigChange: (config: Record<string, unknown>) => void
+}
+
+export function BlockWrapper({ block, config, size, onRemove, onConfigChange }: BlockWrapperProps) {
+  const [showConfig, setShowConfig] = useState(false)
+  const Component = block.component
+  const Icon = block.icon
+
+  return (
+    <div className="flex flex-col h-full rounded-lg border border-border bg-surface shadow-sm shadow-black/5 overflow-hidden hover:shadow-md hover:shadow-black/8 transition-shadow">
+      {/* Title bar */}
+      <div className="drag-handle flex items-center h-8 px-2 border-b border-border bg-surface/80 shrink-0 cursor-move group">
+        <GripVertical className="h-3 w-3 text-foreground-subtle/30 group-hover:text-foreground-subtle transition-colors mr-1" />
+        <Icon className="h-3 w-3 text-primary/70 mr-1.5 shrink-0" />
+        <span className="text-[11px] font-semibold text-foreground/80 truncate flex-1">
+          {block.name}
+        </span>
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          {block.configSchema && block.configSchema.length > 0 && (
+            <button
+              onClick={(e) => { e.stopPropagation(); setShowConfig(!showConfig) }}
+              className="p-1 rounded-md hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
+            >
+              <Settings className="h-3 w-3" />
+            </button>
+          )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onRemove() }}
+            className="p-1 rounded-md hover:bg-danger/10 text-foreground-subtle hover:text-danger transition-colors"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+
+      {/* Config panel */}
+      {showConfig && block.configSchema && (
+        <div className="p-2.5 border-b border-border bg-background/50 space-y-2">
+          {block.configSchema.map((field) => (
+            <label key={field.key} className="flex items-center gap-2 text-[11px]">
+              <span className="text-foreground-subtle w-20 shrink-0">{field.label}</span>
+              {field.type === 'number' && (
+                <input
+                  type="number"
+                  value={(config[field.key] as number) ?? field.defaultValue ?? ''}
+                  onChange={(e) => onConfigChange({ ...config, [field.key]: Number(e.target.value) })}
+                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
+                />
+              )}
+              {field.type === 'text' && (
+                <input
+                  type="text"
+                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
+                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
+                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
+                />
+              )}
+              {field.type === 'boolean' && (
+                <input
+                  type="checkbox"
+                  checked={(config[field.key] as boolean) ?? field.defaultValue ?? false}
+                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.checked })}
+                  className="accent-primary"
+                />
+              )}
+              {field.type === 'select' && (
+                <select
+                  value={(config[field.key] as string) ?? field.defaultValue ?? ''}
+                  onChange={(e) => onConfigChange({ ...config, [field.key]: e.target.value })}
+                  className="flex-1 rounded-md border border-border bg-surface px-2 py-1 text-foreground text-[11px] focus:border-primary outline-none"
+                >
+                  {field.options?.map((opt) => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+              )}
+            </label>
+          ))}
+        </div>
+      )}
+
+      {/* Block content */}
+      <div className="flex-1 overflow-auto p-3">
+        <Component config={config} size={size} />
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard/DashboardGrid.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useState } from 'react'
+import { ResponsiveGridLayout } from 'react-grid-layout'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const GridLayout = ResponsiveGridLayout as any
+import { Plus, LayoutDashboard } from 'lucide-react'
+import { BlockWrapper } from './BlockWrapper'
+import { BlockPicker } from './BlockPicker'
+import { getBlock } from './block-registry'
+import type { DashboardBlock, DashboardLayoutItem, DashboardState } from '../../types/dashboard'
+import 'react-grid-layout/css/styles.css'
+
+const STORAGE_KEY = 'camstack-dashboard-state'
+const BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 0 }
+const COLS = { lg: 12, md: 8, sm: 4, xs: 2 }
+
+function loadState(): DashboardState {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch { /* ignore */ }
+  return { items: [] }
+}
+
+function saveState(state: DashboardState): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+}
+
+let instanceCounter = 0
+
+export function DashboardGrid() {
+  const [state, setState] = useState<DashboardState>(loadState)
+  const [pickerOpen, setPickerOpen] = useState(false)
+
+  const updateState = useCallback((next: DashboardState) => {
+    setState(next)
+    saveState(next)
+  }, [])
+
+  const handleAddBlock = useCallback((block: DashboardBlock) => {
+    instanceCounter++
+    const instanceId = `${block.id}-${instanceCounter}`
+    const defaultConfig: Record<string, unknown> = {}
+    block.configSchema?.forEach((f) => {
+      if (f.defaultValue !== undefined) defaultConfig[f.key] = f.defaultValue
+    })
+
+    const newItem: DashboardLayoutItem = {
+      i: instanceId,
+      blockId: block.id,
+      x: 0,
+      y: Infinity, // place at bottom
+      w: block.defaultSize.w,
+      h: block.defaultSize.h,
+      config: defaultConfig,
+    }
+
+    updateState({ items: [...state.items, newItem] })
+  }, [state, updateState])
+
+  const handleRemoveBlock = useCallback((instanceId: string) => {
+    updateState({ items: state.items.filter((item) => item.i !== instanceId) })
+  }, [state, updateState])
+
+  const handleConfigChange = useCallback((instanceId: string, config: Record<string, unknown>) => {
+    updateState({
+      items: state.items.map((item) =>
+        item.i === instanceId ? { ...item, config } : item,
+      ),
+    })
+  }, [state, updateState])
+
+  const handleLayoutChange = useCallback((layout: any) => {
+    updateState({
+      items: state.items.map((item) => {
+        const layoutItem = layout.find((l: any) => l.i === item.i)
+        if (!layoutItem) return item
+        return { ...item, x: layoutItem.x, y: layoutItem.y, w: layoutItem.w, h: layoutItem.h }
+      }),
+    })
+  }, [state, updateState])
+
+  const gridLayout = state.items.map((item) => {
+    const block = getBlock(item.blockId)
+    return {
+      i: item.i,
+      x: item.x,
+      y: item.y,
+      w: item.w,
+      h: item.h,
+      minW: block?.minSize?.w ?? 2,
+      minH: block?.minSize?.h ?? 2,
+    }
+  })
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-lg font-semibold text-foreground">Dashboard</h1>
+        <button
+          onClick={() => setPickerOpen(true)}
+          className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add Block
+        </button>
+      </div>
+
+      {state.items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-foreground-subtle">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface border border-border mb-4">
+            <LayoutDashboard className="h-8 w-8 text-foreground-subtle/40" />
+          </div>
+          <p className="text-sm font-medium text-foreground/70">Your dashboard is empty</p>
+          <p className="text-xs text-foreground-subtle mt-1 mb-4">Add blocks to monitor your cameras and system</p>
+          <button
+            onClick={() => setPickerOpen(true)}
+            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-md shadow-primary/20 hover:shadow-lg transition-all"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Add your first block
+          </button>
+        </div>
+      ) : (
+        <GridLayout
+          layouts={{ lg: gridLayout }}
+          breakpoints={BREAKPOINTS}
+          cols={COLS}
+          rowHeight={60}
+          draggableHandle=".drag-handle"
+          onLayoutChange={handleLayoutChange}
+          isResizable
+          isDraggable
+        >
+          {state.items.map((item) => {
+            const block = getBlock(item.blockId)
+            if (!block) return <div key={item.i} />
+            return (
+              <div key={item.i}>
+                <BlockWrapper
+                  block={block}
+                  config={item.config}
+                  size={{ w: item.w, h: item.h }}
+                  onRemove={() => handleRemoveBlock(item.i)}
+                  onConfigChange={(config) => handleConfigChange(item.i, config)}
+                />
+              </div>
+            )
+          })}
+        </GridLayout>
+      )}
+
+      <BlockPicker
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        onSelect={handleAddBlock}
+      />
+    </div>
+  )
+}

package/src/components/dashboard/block-registry.ts

@@ -0,0 +1,15 @@
+import type { DashboardBlock } from '../../types/dashboard'
+
+const registry = new Map<string, DashboardBlock>()
+
+export function registerBlock(block: DashboardBlock): void {
+  registry.set(block.id, block)
+}
+
+export function getBlock(id: string): DashboardBlock | undefined {
+  return registry.get(id)
+}
+
+export function getAllBlocks(): DashboardBlock[] {
+  return Array.from(registry.values())
+}

package/src/components/dashboard/blocks/PipelineStagesBlock.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import { useBackendClient } from '../../../hooks/useBackendClient'
+import type { BlockProps } from '../../../types/dashboard'
+
+const STAGE_ORDER = [
+  'class-filter', 'tracker', 'sub-detection', 'recognition',
+  'zone-analysis', 'event-generation', 'object-snapshot',
+]
+
+export function PipelineStagesBlock({ config, size }: BlockProps) {
+  const client = useBackendClient()
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['pipelines'],
+    queryFn: () => client.listPipelines(),
+    refetchInterval: 5_000,
+  })
+
+  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
+  if (error) return <div className="text-xs text-danger">Failed to load pipelines</div>
+
+  const pipelines = (data ?? []) as Array<Record<string, unknown>>
+
+  return (
+    <div className="space-y-2 text-xs">
+      <div className="flex justify-between text-foreground-subtle">
+        <span>Active pipelines</span>
+        <span className="font-medium text-foreground">{pipelines.length}</span>
+      </div>
+      <div className="space-y-0.5">
+        {STAGE_ORDER.map((stage) => (
+          <div key={stage} className="flex items-center gap-1.5">
+            <div className="h-1.5 w-1.5 rounded-full bg-success shrink-0" />
+            <span className="text-foreground-subtle">{stage}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard/blocks/StorageBlock.tsx

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query'
+import { useBackendClient } from '../../../hooks/useBackendClient'
+import type { BlockProps } from '../../../types/dashboard'
+
+interface SystemInfo {
+  version?: string
+  uptime?: number
+  nodeVersion?: string
+  platform?: string
+  [key: string]: unknown
+}
+
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${Math.floor(seconds)}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return `${h}h ${m}m`
+}
+
+export function StorageBlock({ config: _config, size: _size }: BlockProps) {
+  const client = useBackendClient()
+
+  const { data: systemInfo, isLoading, error } = useQuery<SystemInfo>({
+    queryKey: ['system-info'],
+    queryFn: async () => {
+      const result = await client.getSystemInfo()
+      return result as SystemInfo
+    },
+    refetchInterval: 30_000,
+  })
+
+  const { data: addons } = useQuery({
+    queryKey: ['storage-addons'],
+    queryFn: () => client.listAddons(),
+    refetchInterval: 60_000,
+  })
+
+  if (isLoading) return <div className="text-xs text-foreground-subtle animate-pulse">Loading...</div>
+  if (error) return <div className="text-xs text-danger">Failed to load system info</div>
+
+  const addonList = (addons ?? []) as Array<{ manifest: { id: string } }>
+
+  return (
+    <div className="space-y-1.5 text-xs">
+      <div className="flex justify-between">
+        <span className="text-foreground-subtle">Platform</span>
+        <span className="text-foreground font-medium">{systemInfo?.platform ?? 'N/A'}</span>
+      </div>
+      <div className="flex justify-between">
+        <span className="text-foreground-subtle">Uptime</span>
+        <span className="text-foreground font-medium">
+          {systemInfo?.uptime != null ? formatUptime(systemInfo.uptime) : 'N/A'}
+        </span>
+      </div>
+      <div className="flex justify-between">
+        <span className="text-foreground-subtle">Node</span>
+        <span className="text-foreground font-medium font-mono">{systemInfo?.nodeVersion ?? 'N/A'}</span>
+      </div>
+      <div className="flex justify-between">
+        <span className="text-foreground-subtle">Addons</span>
+        <span className="text-foreground font-medium">{addonList.length} installed</span>
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard/blocks/SystemStatusBlock.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query'
+import { CheckCircle, AlertTriangle, Loader2 } from 'lucide-react'
+import { useBackendClient } from '../../../hooks/useBackendClient'
+import type { BlockProps } from '../../../types/dashboard'
+
+export function SystemStatusBlock({ config, size }: BlockProps) {
+  const client = useBackendClient()
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['system-info'],
+    queryFn: () => client.getSystemInfo(),
+    refetchInterval: 10_000,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-xs text-foreground-subtle">
+        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        <span>Connecting to server...</span>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center gap-2 text-xs text-danger">
+        <AlertTriangle className="h-3.5 w-3.5" />
+        <span>Unable to reach server</span>
+      </div>
+    )
+  }
+
+  const info = data as Record<string, unknown> | undefined
+
+  return (
+    <div className="space-y-2 text-xs">
+      <div className="flex items-center gap-1.5 mb-2">
+        <CheckCircle className="h-3.5 w-3.5 text-success" />
+        <span className="text-success font-medium">Online</span>
+      </div>
+      <Row label="Version" value={String(info?.version ?? 'N/A')} />
+      <Row label="Uptime" value={formatUptime(info?.uptime as number)} />
+      <Row label="Memory" value={`${formatMB(info?.memoryUsage as number)} MB`} />
+      <Row label="Platform" value={String(info?.platform ?? 'N/A')} />
+    </div>
+  )
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between items-center">
+      <span className="text-foreground-subtle">{label}</span>
+      <span className="text-foreground font-medium tabular-nums">{value}</span>
+    </div>
+  )
+}
+
+function formatUptime(seconds?: number): string {
+  if (!seconds) return 'N/A'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+function formatMB(bytes?: number): string {
+  if (!bytes) return 'N/A'
+  return (bytes / 1024 / 1024).toFixed(0)
+}

package/src/components/dashboard/blocks/index.ts

@@ -0,0 +1,32 @@
+import { Monitor, Workflow, HardDrive } from 'lucide-react'
+import { registerBlock } from '../block-registry'
+import { SystemStatusBlock } from './SystemStatusBlock'
+import { PipelineStagesBlock } from './PipelineStagesBlock'
+import { StorageBlock } from './StorageBlock'
+
+registerBlock({
+  id: 'system-status',
+  name: 'System Status',
+  icon: Monitor,
+  defaultSize: { w: 4, h: 2 },
+  minSize: { w: 2, h: 2 },
+  component: SystemStatusBlock,
+})
+
+registerBlock({
+  id: 'pipeline-stages',
+  name: 'Pipeline Stages',
+  icon: Workflow,
+  defaultSize: { w: 4, h: 3 },
+  minSize: { w: 3, h: 2 },
+  component: PipelineStagesBlock,
+})
+
+registerBlock({
+  id: 'storage',
+  name: 'Storage',
+  icon: HardDrive,
+  defaultSize: { w: 4, h: 2 },
+  minSize: { w: 2, h: 2 },
+  component: StorageBlock,
+})

package/src/components/device/DeviceHeader.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { ChevronRight, Video, ScrollText, Terminal, Bell, Zap } from 'lucide-react'
+import { StatusBadge } from '../shared/StatusBadge'
+import { ProviderIcon, getProviderLabel } from '../shared/ProviderIcon'
+import { CapabilityBadges } from '../shared/CapabilityBadges'
+import { QuickConfigWizard } from './QuickConfigWizard'
+import type { PanelId } from './FloatingPanelManager'
+
+interface DeviceHeaderProps {
+  deviceId: string
+  name: string
+  status: string
+  provider: string
+  capabilities: string[]
+  activePanel: PanelId | null
+  onTogglePanel: (panel: PanelId) => void
+}
+
+const PANEL_BUTTONS: Array<{
+  id: PanelId
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+}> = [
+  { id: 'stream', icon: Video, label: 'Stream' },
+  { id: 'logs', icon: ScrollText, label: 'Logs' },
+  { id: 'repl', icon: Terminal, label: 'REPL' },
+  { id: 'events', icon: Bell, label: 'Events' },
+]
+
+export function DeviceHeader({
+  deviceId,
+  name,
+  status,
+  provider,
+  capabilities,
+  activePanel,
+  onTogglePanel,
+}: DeviceHeaderProps) {
+  const [wizardOpen, setWizardOpen] = useState(false)
+
+  return (
+    <>
+      <div className="border-b border-border bg-surface px-6 py-4">
+        {/* Breadcrumb */}
+        <nav className="flex items-center gap-1 text-[11px] text-foreground-subtle mb-3">
+          <Link to="/integrations" className="hover:text-foreground transition-colors">
+            Integrations
+          </Link>
+          <ChevronRight className="h-3 w-3" />
+          <span className="text-foreground-subtle">{getProviderLabel(provider)}</span>
+          <ChevronRight className="h-3 w-3" />
+          <span className="text-foreground">{name}</span>
+        </nav>
+
+        {/* Header row */}
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 min-w-0">
+            <ProviderIcon type={provider} size="lg" />
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <h1 className="text-base font-semibold text-foreground truncate">{name}</h1>
+                <StatusBadge status={status} />
+              </div>
+              <div className="mt-1">
+                <CapabilityBadges capabilities={capabilities} />
+              </div>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {/* Quick Config wizard button */}
+            <button
+              onClick={() => setWizardOpen(true)}
+              title="Quick Config"
+              className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-medium border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
+            >
+              <Zap className="h-3.5 w-3.5" />
+              Quick Config
+            </button>
+
+            {/* Divider */}
+            <div className="h-5 w-px bg-border mx-1" />
+
+            {/* Floating panel toggle buttons */}
+            {PANEL_BUTTONS.map(({ id, icon: Icon, label }) => {
+              const isActive = activePanel === id
+              return (
+                <button
+                  key={id}
+                  onClick={() => onTogglePanel(id)}
+                  title={label}
+                  className={`inline-flex items-center justify-center rounded-lg p-2 transition-colors ${
+                    isActive
+                      ? 'bg-primary/15 text-primary'
+                      : 'text-foreground-subtle hover:text-foreground hover:bg-surface-hover'
+                  }`}
+                >
+                  <Icon className="h-4 w-4" />
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Config Wizard (modal) */}
+      <QuickConfigWizard
+        open={wizardOpen}
+        onClose={() => setWizardOpen(false)}
+        deviceId={deviceId}
+      />
+    </>
+  )
+}