@camstack/addon-admin-ui 0.1.1 → 0.1.2

package/src/components/metrics/PipelineStatus.tsx

@@ -1,30 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { useBackendClient } from '../../hooks/useBackendClient'
 
-interface PipelineEntry {
-  deviceId: string
-  status: {
-    active: boolean
-    decode: {
-      fps: number
-      droppedFrames: number
-      totalFrames: number
-    }
-    videoConsumers: number
-    audioConsumers: number
-    uptime: number
-    source: {
-      protocol: string
-      connected: boolean
-    } | null
-    outputs: Array<{
-      format: string
-      consumers: number
-      active: boolean
-    }>
-  }
-}
-
 export function PipelineStatus() {
   const client = useBackendClient()
 
@@ -34,9 +10,8 @@ export function PipelineStatus() {
     refetchInterval: 5_000,
   })
 
-  const pipelines = (data ?? []) as unknown as PipelineEntry[]
-  const activePipelines = pipelines.filter((p) => p.status.active)
-  const totalFps = activePipelines.reduce((sum, p) => sum + (p.status.decode?.fps ?? 0), 0)
+  const pipelines = data ?? []
+  const withSlot = pipelines.filter((p) => p.slot != null)
 
   return (
     <div className="rounded-lg border border-border bg-surface p-4">
@@ -61,42 +36,36 @@ export function PipelineStatus() {
           {/* Aggregate */}
           <div className="flex items-center gap-3 mb-3 pb-3 border-b border-border">
             <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold">{activePipelines.length}</span> active
+              <span className="text-foreground font-semibold">{withSlot.length}</span> active
               {' '}/ <span className="text-foreground font-semibold">{pipelines.length}</span> total
             </span>
-            <span className="text-xs text-foreground-subtle">
-              <span className="text-foreground font-semibold tabular-nums">
-                {totalFps.toFixed(1)}
-              </span>{' '}
-              total FPS
-            </span>
           </div>
 
           {/* Pipeline list */}
           <div className="space-y-1.5">
-            {pipelines.map((p) => (
-              <div
-                key={p.deviceId}
-                className="flex items-center justify-between gap-2 text-xs"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  <span
-                    className={`h-2 w-2 flex-shrink-0 rounded-full ${
-                      p.status.active ? 'bg-success' : 'bg-foreground-subtle/40'
-                    }`}
-                  />
-                  <span className="text-foreground truncate font-medium">{p.deviceId}</span>
-                </div>
-                <div className="flex items-center gap-3 flex-shrink-0">
-                  <span className="text-foreground-subtle">
-                    {p.status.active ? 'running' : 'idle'}
-                  </span>
-                  <span className="tabular-nums text-foreground-subtle w-14 text-right">
-                    {p.status.active ? `${(p.status.decode?.fps ?? 0).toFixed(1)} fps` : '—'}
-                  </span>
+            {pipelines.map((p) => {
+              const isActive = p.slot != null
+              return (
+                <div
+                  key={p.id}
+                  className="flex items-center justify-between gap-2 text-xs"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span
+                      className={`h-2 w-2 flex-shrink-0 rounded-full ${
+                        isActive ? 'bg-success' : 'bg-foreground-subtle/40'
+                      }`}
+                    />
+                    <span className="text-foreground truncate font-medium">{p.id}</span>
+                  </div>
+                  <div className="flex items-center gap-3 flex-shrink-0">
+                    <span className="text-foreground-subtle">
+                      {isActive ? p.slot! : 'idle'}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            ))}
+              )
+            })}
           </div>
         </>
       )}

package/src/components/metrics/ProcessResources.tsx

@@ -1,24 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useBackendClient } from '../../hooks/useBackendClient'
+import type { BackendClient } from '@camstack/sdk'
 
-interface ProcessStats {
-  pid: number
-  cpu: number
-  memory: number
-  uptime: number
-  restartCount: number
-}
-
-interface ProcessEntry {
-  id: string
-  label: string
-  state: string
-  pid?: number
-  stats?: ProcessStats
-  restartCount: number
-  lastCrashAt?: number
-  lastCrashError?: string
-}
+type ProcessEntry = Awaited<ReturnType<BackendClient['listProcesses']>>[number]
 
 function formatMemoryMB(bytes?: number): string {
   if (bytes == null) return '—'
@@ -56,7 +40,7 @@ export function ProcessResources() {
     refetchInterval: 5_000,
   })
 
-  const processes = (data ?? []) as ProcessEntry[]
+  const processes = data ?? []
   const runningCount = processes.filter((p) => p.state === 'running').length
 
   const totalCpu = processes.reduce((sum, p) => sum + (p.stats?.cpu ?? 0), 0)

package/src/layouts/AppLayout.tsx

@@ -37,6 +37,16 @@ export function AppLayout() {
   const { t, i18n } = useTranslation()
   const client = getBackendClient()
 
+  const { data: updateCount = 0 } = useQuery({
+    queryKey: ['updates', 'count'],
+    queryFn: async () => {
+      const updates = await client.trpc.update.listUpdates.query()
+      return updates.length
+    },
+    staleTime: 30_000,
+    refetchInterval: 30_000,
+  })
+
   const { data: addonPages } = useQuery({
     queryKey: ['addon-pages'],
     queryFn: async (): Promise<readonly AddonPageInfo[]> => {
@@ -148,6 +158,7 @@ export function AppLayout() {
           {SYSTEM_ITEMS.map((item) => {
             const Icon = item.icon
             const active = isActive(item.path)
+            const isAddons = item.path === '/system/addons'
             return (
               <button
                 key={item.path}
@@ -159,7 +170,12 @@ export function AppLayout() {
                 }`}
               >
                 <Icon className={`h-3.5 w-3.5 shrink-0 ${active ? 'text-primary' : ''}`} />
-                {item.label}
+                <span className="flex-1 text-left">{item.label}</span>
+                {isAddons && updateCount > 0 && (
+                  <span className="ml-auto rounded-full bg-primary px-1.5 py-0.5 text-[9px] font-bold text-primary-foreground leading-none">
+                    {updateCount}
+                  </span>
+                )}
               </button>
             )
           })}

package/src/pages/Cameras.tsx

@@ -22,15 +22,15 @@ export function CamerasPage() {
     queryFn: () => client.listProviders(),
   })
 
-  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
-  const providerList = (providers ?? []) as unknown as Array<Record<string, unknown>>
+  const deviceList = devices ?? []
+  const providerList = providers ?? []
 
   // Filter camera-type devices only and apply search
   const cameraDevices = useMemo(() => {
     const searchLower = search.toLowerCase()
     return deviceList.filter((d) => {
-      const type = String(d.type ?? '').toLowerCase()
-      const capabilities = (d.capabilities ?? []) as string[]
+      const type = (d.type ?? '').toLowerCase()
+      const capabilities = d.capabilities ?? []
       const isCamera =
         type === 'camera' ||
         type.includes('camera') ||
@@ -42,16 +42,16 @@ export function CamerasPage() {
       if (!include) return false
       if (!searchLower) return true
 
-      const name = String(d.name ?? d.id ?? '').toLowerCase()
+      const name = (d.name ?? d.id ?? '').toLowerCase()
       return name.includes(searchLower)
     })
   }, [deviceList, search])
 
   // Group by provider
   const groupedByProvider = useMemo(() => {
-    const groups = new Map<string, Array<Record<string, unknown>>>()
+    const groups = new Map<string, typeof deviceList>()
     for (const device of cameraDevices) {
-      const providerId = String(device.providerId ?? '')
+      const providerId = device.providerId ?? ''
       if (!groups.has(providerId)) {
         groups.set(providerId, [])
       }
@@ -107,17 +107,17 @@ export function CamerasPage() {
 
       {/* Provider sections */}
       {!isLoading && Array.from(groupedByProvider.entries()).map(([providerId, providerDevices]) => {
-        const provider = providerList.find((p) => String(p.id) === providerId)
+        const provider = providerList.find((p) => p.id === providerId)
         return (
           <ProviderSection
             key={providerId}
-            providerType={String(provider?.type ?? 'rtsp')}
-            providerName={String(provider?.name ?? providerId)}
-            providerStatus={String(provider?.status ?? 'stopped')}
+            providerType={provider?.type ?? 'rtsp'}
+            providerName={provider?.name ?? providerId}
+            providerStatus={provider?.status?.connected ? 'running' : 'stopped'}
             devices={providerDevices.map((d) => ({
-              id: String(d.id),
-              name: String(d.name ?? d.id),
-              status: String(d.status ?? 'offline'),
+              id: d.id,
+              name: d.name ?? d.id,
+              status: d.state?.online ? 'online' : 'offline',
             }))}
           />
         )

package/src/pages/IntegrationDetail.tsx

@@ -84,24 +84,22 @@ export function IntegrationDetailPage() {
     )
   }
 
-  const devices = ((allDevices ?? []) as unknown as Array<Record<string, unknown>>)
-    .filter((d) => String(d.providerId) === integrationId)
+  const devices = (allDevices ?? [])
+    .filter((d) => d.providerId === integrationId)
 
   const activeDevices = devices.map((d) => ({
-    id: String(d.id),
-    name: String(d.name ?? d.id),
-    status: String(d.status ?? 'offline'),
-    snapshotUrl: d.snapshotUrl ? String(d.snapshotUrl) : null,
+    id: d.id,
+    name: d.name ?? d.id,
+    status: d.state?.online ? 'online' : 'offline',
+    snapshotUrl: null as string | null,
   }))
 
-  const discoveredDevices = (discovered ?? []).map((d: any) => ({
-    externalId: String(d.externalId ?? d.id),
-    name: String(d.name ?? d.externalId ?? d.id),
+  const discoveredDevices = (discovered ?? []).map((d) => ({
+    externalId: d.externalId,
+    name: d.name ?? d.externalId,
   }))
 
-  const providerStatus = typeof provider.status === 'object'
-    ? (provider.status as any).connected ? 'running' : 'stopped'
-    : String(provider.status ?? 'stopped')
+  const providerStatus = provider.status.connected ? 'running' : 'stopped'
 
   const isAutoDiscovery = provider.discoveryMode !== 'manual'
   const isManual = provider.discoveryMode === 'manual'

package/src/pages/Integrations.tsx

@@ -30,8 +30,11 @@ const TYPE_FILTERS: Array<{ id: DeviceTypeFilter; label: string; icon: React.Com
   { id: 'other',  label: 'Other',  icon: HelpCircle },
 ]
 
-function getDeviceType(device: Record<string, unknown>): string {
-  const type = String(device.type ?? '').toLowerCase()
+type DeviceEntry = Awaited<ReturnType<ReturnType<typeof useBackendClient>['listDevices']>>[number]
+type ProviderEntry = Awaited<ReturnType<ReturnType<typeof useBackendClient>['listProviders']>>[number]
+
+function getDeviceType(device: DeviceEntry): string {
+  const type = (device.type ?? '').toLowerCase()
   if (type.includes('camera') || type === 'camera') return 'camera'
   if (type.includes('sensor')) return 'sensor'
   if (type.includes('light')) return 'light'
@@ -73,8 +76,8 @@ export function IntegrationsPage() {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['providers'] }),
   })
 
-  const providerList = (providers ?? []) as unknown as Array<Record<string, unknown>>
-  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
+  const providerList = providers ?? []
+  const deviceList = devices ?? []
 
   // Filter devices
   const filteredDevices = useMemo(() => {
@@ -82,7 +85,7 @@ export function IntegrationsPage() {
     return deviceList.filter((d) => {
       if (typeFilter !== 'all' && getDeviceType(d) !== typeFilter) return false
       if (searchLower) {
-        const name = String(d.name ?? d.id ?? '').toLowerCase()
+        const name = (d.name ?? d.id ?? '').toLowerCase()
         if (!name.includes(searchLower)) return false
       }
       return true
@@ -91,18 +94,18 @@ export function IntegrationsPage() {
 
   // Group devices
   const grouped = useMemo(() => {
-    const groups = new Map<string, Array<Record<string, unknown>>>()
+    const groups = new Map<string, DeviceEntry[]>()
     for (const device of filteredDevices) {
       let key: string
       switch (groupBy) {
         case 'provider':
-          key = String(device.providerId ?? 'unknown')
+          key = device.providerId ?? 'unknown'
           break
         case 'type':
           key = getDeviceType(device)
           break
         case 'status':
-          key = String(device.status ?? 'offline')
+          key = device.state?.online ? 'online' : 'offline'
           break
       }
       if (!groups.has(key)) {
@@ -127,24 +130,24 @@ export function IntegrationsPage() {
 
   function getGroupLabel(key: string): string {
     if (groupBy === 'provider') {
-      const provider = providerList.find((p) => String(p.id) === key)
-      return provider ? String(provider.name ?? key) : key
+      const provider = providerList.find((p) => p.id === key)
+      return provider ? (provider.name ?? key) : key
     }
     return key.charAt(0).toUpperCase() + key.slice(1)
   }
 
   function getGroupProviderType(key: string): string {
     if (groupBy === 'provider') {
-      const provider = providerList.find((p) => String(p.id) === key)
-      return String(provider?.type ?? 'rtsp')
+      const provider = providerList.find((p) => p.id === key)
+      return provider?.type ?? 'rtsp'
     }
     return 'rtsp'
   }
 
   function getGroupProviderStatus(key: string): string {
     if (groupBy === 'provider') {
-      const provider = providerList.find((p) => String(p.id) === key)
-      return String(provider?.status ?? 'stopped')
+      const provider = providerList.find((p) => p.id === key)
+      return provider?.status?.connected ? 'running' : 'stopped'
     }
     return ''
   }
@@ -297,11 +300,11 @@ export function IntegrationsPage() {
 
                 {/* Device rows */}
                 {groupDevices.map((device) => {
-                  const deviceId = String(device.id)
-                  const deviceName = String(device.name ?? device.id)
+                  const deviceId = device.id
+                  const deviceName = device.name ?? device.id
                   const deviceType = getDeviceType(device)
-                  const deviceStatus = String(device.status ?? 'offline')
-                  const phase = String(device.phase ?? '—')
+                  const deviceStatus = device.state?.online ? 'online' : 'offline'
+                  const phase = (device as Record<string, unknown>).phase as string ?? '—'
 
                   return (
                     <button