@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/addons/UpdatesList.tsx

@@ -1,108 +0,0 @@
-import { ArrowRight, RotateCcw, Zap } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types — inferred from tRPC update.listUpdates return type
-// ---------------------------------------------------------------------------
-
-import type { BackendClient } from '@camstack/sdk'
-
-export type UpdateEntry = Awaited<ReturnType<BackendClient['trpc']['update']['listUpdates']['query']>>[number]
-
-// ---------------------------------------------------------------------------
-// UpdatesList
-// ---------------------------------------------------------------------------
-
-interface UpdatesListProps {
-  updates: readonly UpdateEntry[]
-  onUpdate: (name: string) => void
-  onUpdateAll: () => void
-  onCheckUpdates: () => void
-  isChecking: boolean
-}
-
-export function UpdatesList({ updates, onUpdate, onUpdateAll, onCheckUpdates, isChecking }: UpdatesListProps) {
-  return (
-    <div className="space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-3">
-        <button
-          type="button"
-          onClick={onCheckUpdates}
-          disabled={isChecking}
-          className="flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs text-foreground hover:bg-surface transition-colors disabled:opacity-50"
-        >
-          <RotateCcw className={`h-3.5 w-3.5 ${isChecking ? 'animate-spin' : ''}`} />
-          {isChecking ? 'Checking…' : 'Check for updates'}
-        </button>
-
-        {updates.length > 0 && (
-          <button
-            type="button"
-            onClick={onUpdateAll}
-            className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Update all ({updates.length})
-          </button>
-        )}
-      </div>
-
-      {updates.length === 0 && !isChecking && (
-        <div className="rounded-lg border border-border bg-surface py-10 text-center text-xs text-foreground-subtle">
-          All packages are up to date
-        </div>
-      )}
-
-      {updates.length > 0 && (
-        <div className="space-y-2">
-          {updates.map((update) => (
-            <div
-              key={update.name}
-              className="rounded-lg border border-border bg-surface px-4 py-3 flex items-start justify-between gap-4"
-            >
-              <div className="flex items-start gap-3 min-w-0">
-                {/* Icon letter */}
-                <div className="flex-shrink-0 h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <span className="text-xs font-bold text-primary uppercase">
-                    {update.name.charAt(0)}
-                  </span>
-                </div>
-
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span className="text-sm font-semibold text-foreground">{update.name}</span>
-                    {update.requiresRestart ? (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-warning/10 text-warning px-2 py-0.5 text-[10px] font-medium">
-                        <RotateCcw className="h-2.5 w-2.5" />
-                        Restart
-                      </span>
-                    ) : (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-400 px-2 py-0.5 text-[10px] font-medium">
-                        <Zap className="h-2.5 w-2.5" />
-                        Hot-swap
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Version diff */}
-                  <div className="flex items-center gap-1.5 mt-1 text-[10px]">
-                    <span className="text-foreground-subtle font-mono">v{update.currentVersion}</span>
-                    <ArrowRight className="h-3 w-3 text-foreground-subtle" />
-                    <span className="text-green-400 font-mono font-medium">v{update.latestVersion}</span>
-                  </div>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={() => onUpdate(update.name)}
-                className="flex-shrink-0 rounded-md bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1.5 text-xs font-medium transition-colors"
-              >
-                Update
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/agents/AgentCard.tsx

@@ -1,281 +0,0 @@
-import { useState } from 'react'
-import {
-  ChevronDown,
-  ChevronUp,
-  Cpu,
-  HardDrive,
-  Monitor,
-  Layers,
-  Activity,
-  Server,
-} from 'lucide-react'
-import { TaskList } from './TaskList'
-import { ProcessList } from './ProcessList'
-import type { AgentTask } from './TaskList'
-import type { ProcessEntry } from './ProcessList'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface AgentRegistrationInfo {
-  id: string
-  name: string
-  capabilities: string[]
-  host: string
-  port: number
-  platform: string
-  arch: string
-  cpuModel?: string
-  cpuCores: number
-  memoryMB: number
-  gpuModel?: string
-  pythonRuntimes: string[]
-  httpPort: number
-}
-
-export interface AgentRuntimeStatus {
-  activeCameras: number
-  cpuPercent: number
-  memoryPercent: number
-  fps: Record<string, number>
-  errors: string[]
-}
-
-export interface ConnectedAgent {
-  info: AgentRegistrationInfo
-  status?: AgentRuntimeStatus
-  connectedSince: number
-  isHub?: boolean
-}
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function StatusDot({ online }: { online: boolean }) {
-  return (
-    <span
-      className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${online ? 'bg-green-400' : 'bg-red-400'}`}
-      title={online ? 'Online' : 'Offline'}
-    />
-  )
-}
-
-function Bar({ percent, color = 'bg-primary' }: { percent: number; color?: string }) {
-  return (
-    <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-      <div
-        className={`h-full rounded-full transition-all ${color}`}
-        style={{ width: `${Math.min(100, percent)}%` }}
-      />
-    </div>
-  )
-}
-
-const CAPABILITY_COLORS: Record<string, string> = {
-  decode:     'bg-blue-500/10 text-blue-400',
-  decoder:    'bg-blue-500/10 text-blue-400',
-  detect:     'bg-green-500/10 text-green-400',
-  detector:   'bg-green-500/10 text-green-400',
-  record:     'bg-orange-500/10 text-orange-400',
-  recorder:   'bg-orange-500/10 text-orange-400',
-  transcode:  'bg-purple-500/10 text-purple-400',
-  transcoder: 'bg-purple-500/10 text-purple-400',
-  restream:   'bg-cyan-500/10 text-cyan-400',
-  restreamer: 'bg-cyan-500/10 text-cyan-400',
-}
-
-const RUNTIME_COLORS: Record<string, string> = {
-  onnx:    'bg-yellow-500/10 text-yellow-400',
-  coreml:  'bg-pink-500/10 text-pink-400',
-  pytorch: 'bg-orange-500/10 text-orange-400',
-  openvino:'bg-blue-500/10 text-blue-400',
-}
-
-function CapBadge({ cap }: { cap: string }) {
-  const lower = cap.toLowerCase()
-  const color = CAPABILITY_COLORS[lower] ?? 'bg-primary/10 text-primary'
-  return (
-    <span className={`inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium ${color}`}>
-      {cap}
-    </span>
-  )
-}
-
-function RuntimeBadge({ runtime }: { runtime: string }) {
-  const lower = runtime.toLowerCase()
-  const color = RUNTIME_COLORS[lower] ?? 'bg-foreground-subtle/10 text-foreground-subtle'
-  return (
-    <span className={`inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium ${color}`}>
-      {runtime}
-    </span>
-  )
-}
-
-function formatUptime(connectedSince: number): string {
-  const seconds = Math.floor((Date.now() - connectedSince) / 1000)
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
-  return `${Math.floor(seconds / 3600)}h`
-}
-
-// ---------------------------------------------------------------------------
-// AgentCard
-// ---------------------------------------------------------------------------
-
-interface AgentCardProps {
-  agent: ConnectedAgent
-  processes: ProcessEntry[]
-  tasks: AgentTask[]
-  defaultExpanded?: boolean
-  online?: boolean
-}
-
-export function AgentCard({ agent, processes, tasks, defaultExpanded = false, online = true }: AgentCardProps) {
-  const [expanded, setExpanded] = useState(defaultExpanded)
-  const { info, status } = agent
-
-  return (
-    <div className={`rounded-xl border border-border bg-surface overflow-hidden transition-opacity ${!online ? 'opacity-50' : ''}`}>
-      {/* Header */}
-      <button
-        type="button"
-        className="w-full flex items-start justify-between gap-3 px-4 py-3 hover:bg-primary/5 transition-colors text-left"
-        onClick={() => setExpanded((e) => !e)}
-      >
-        <div className="flex items-center gap-2.5 min-w-0">
-          <StatusDot online={online} />
-          <Server className="h-4 w-4 shrink-0 text-foreground-subtle" />
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-sm font-semibold text-foreground truncate">{info.name}</span>
-              {agent.isHub && (
-                <span className="rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-medium shrink-0">HUB</span>
-              )}
-              {!online && (
-                <span className="rounded-full bg-foreground-subtle/10 text-foreground-subtle px-2 py-0.5 text-[10px] shrink-0">Offline</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2 mt-0.5 text-[10px] text-foreground-subtle flex-wrap">
-              <span className="font-mono">{info.host}:{info.port}</span>
-              <span>{info.platform}/{info.arch}</span>
-              {status && (
-                <>
-                  <span>CPU {status.cpuPercent.toFixed(0)}%</span>
-                  <span>MEM {status.memoryPercent.toFixed(0)}%</span>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 shrink-0">
-          {/* task count badge */}
-          {tasks.length > 0 && (
-            <span className="rounded-full bg-info/10 text-info px-2 py-0.5 text-[10px] font-medium">
-              {tasks.length} task{tasks.length !== 1 ? 's' : ''}
-            </span>
-          )}
-          {/* runtime badges */}
-          {info.pythonRuntimes.slice(0, 2).map((rt) => (
-            <RuntimeBadge key={rt} runtime={rt} />
-          ))}
-          <span className="text-[10px] text-foreground-subtle">up {formatUptime(agent.connectedSince)}</span>
-          {expanded ? <ChevronUp className="h-4 w-4 text-foreground-subtle" /> : <ChevronDown className="h-4 w-4 text-foreground-subtle" />}
-        </div>
-      </button>
-
-      {/* Load bars (always visible when online) */}
-      {status && !expanded && (
-        <div className="px-4 pb-3 space-y-1">
-          <Bar percent={status.cpuPercent} color="bg-blue-400" />
-          <Bar percent={status.memoryPercent} color="bg-purple-400" />
-        </div>
-      )}
-
-      {/* Expanded content */}
-      {expanded && (
-        <div className="border-t border-border divide-y divide-border">
-          {/* Hardware details */}
-          <div className="px-4 py-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-[10px] text-foreground-subtle">
-            <div className="flex items-center gap-1.5">
-              <Cpu className="h-3 w-3 shrink-0" />
-              <span className="truncate">{info.cpuModel ?? `${info.cpuCores} cores`}</span>
-            </div>
-            <div className="flex items-center gap-1.5">
-              <HardDrive className="h-3 w-3 shrink-0" />
-              <span>{Math.round(info.memoryMB / 1024)} GB RAM</span>
-            </div>
-            <div className="flex items-center gap-1.5">
-              <Monitor className="h-3 w-3 shrink-0" />
-              <span>{info.platform}/{info.arch}</span>
-            </div>
-            {info.gpuModel && (
-              <div className="flex items-center gap-1.5">
-                <Layers className="h-3 w-3 shrink-0" />
-                <span className="truncate">{info.gpuModel}</span>
-              </div>
-            )}
-          </div>
-
-          {/* Load bars */}
-          {status && (
-            <div className="px-4 py-3 space-y-2">
-              <div className="flex items-center justify-between text-[10px] text-foreground-subtle mb-1">
-                <span className="flex items-center gap-1">
-                  <Activity className="h-3 w-3" />
-                  {status.activeCameras} active camera{status.activeCameras !== 1 ? 's' : ''}
-                </span>
-                <span>CPU {status.cpuPercent.toFixed(0)}% / MEM {status.memoryPercent.toFixed(0)}%</span>
-              </div>
-              <Bar percent={status.cpuPercent} color="bg-blue-400" />
-              <Bar percent={status.memoryPercent} color="bg-purple-400" />
-            </div>
-          )}
-
-          {/* Capabilities */}
-          <div className="px-4 py-3 space-y-2">
-            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">Capabilities</div>
-            <div className="flex flex-wrap gap-1.5">
-              {info.capabilities.map((cap) => (
-                <CapBadge key={cap} cap={cap} />
-              ))}
-              {info.capabilities.length === 0 && (
-                <span className="text-[10px] text-foreground-subtle italic">None registered</span>
-              )}
-            </div>
-          </div>
-
-          {/* Runtimes */}
-          {info.pythonRuntimes.length > 0 && (
-            <div className="px-4 py-3 space-y-2">
-              <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">Runtimes</div>
-              <div className="flex flex-wrap gap-1.5">
-                {info.pythonRuntimes.map((rt) => (
-                  <RuntimeBadge key={rt} runtime={rt} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Active Tasks */}
-          <div className="px-4 py-3 space-y-2">
-            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">
-              Active Tasks ({tasks.length})
-            </div>
-            <TaskList tasks={tasks} />
-          </div>
-
-          {/* Processes */}
-          <div className="px-4 py-3 space-y-2">
-            <div className="text-[10px] font-medium text-foreground-subtle uppercase tracking-wide">
-              Processes ({processes.length})
-            </div>
-            <ProcessList processes={processes} />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/agents/AgentLogs.tsx

@@ -1,231 +0,0 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { ArrowDownToLine, Filter } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type LogLevel = 'all' | 'debug' | 'info' | 'warn' | 'error'
-
-interface AgentLogsProps {
-  /** List of agent names/IDs for the filter dropdown */
-  agentNames: readonly string[]
-  /** List of addon names for the filter dropdown */
-  addonNames: readonly string[]
-  /** Pre-selected agent name from clicking an agent in the tree */
-  preselectedAgent?: string
-}
-
-// ---------------------------------------------------------------------------
-// Styles
-// ---------------------------------------------------------------------------
-
-const LEVEL_STYLES: Record<string, { badge: string; text: string }> = {
-  debug: { badge: 'bg-foreground-subtle/10 text-foreground-subtle', text: 'text-foreground-subtle' },
-  info:  { badge: 'bg-info/10 text-info', text: 'text-info' },
-  warn:  { badge: 'bg-warning/10 text-warning', text: 'text-warning' },
-  error: { badge: 'bg-danger/10 text-danger', text: 'text-danger' },
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export function AgentLogs({ agentNames, addonNames, preselectedAgent }: AgentLogsProps) {
-  const client = useBackendClient()
-  const [levelFilter, setLevelFilter] = useState<LogLevel>('all')
-  const [agentFilter, setAgentFilter] = useState<string>(preselectedAgent ?? 'all')
-  const [addonFilter, setAddonFilter] = useState<string>('all')
-
-  // Sync agentFilter when preselectedAgent changes externally
-  const prevPreselected = useRef(preselectedAgent)
-  useEffect(() => {
-    if (preselectedAgent !== prevPreselected.current) {
-      setAgentFilter(preselectedAgent ?? 'all')
-      prevPreselected.current = preselectedAgent
-    }
-  }, [preselectedAgent])
-  const [autoScroll, setAutoScroll] = useState(true)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  // bottomRef removed — auto-scroll goes to top (newest first)
-
-  // Build scope filters from agent + addon selections
-  const scopeFilter = useMemo(() => {
-    const scopes: string[] = []
-    if (agentFilter !== 'all') scopes.push(agentFilter)
-    if (addonFilter !== 'all') scopes.push(addonFilter)
-    return scopes.length > 0 ? scopes : undefined
-  }, [agentFilter, addonFilter])
-
-  // Always fetch live -- no pause concept
-  const { data: logsData, isLoading, isError } = useQuery({
-    queryKey: ['agent-logs', levelFilter, agentFilter, addonFilter],
-    queryFn: () =>
-      client.getLogs({
-        ...(levelFilter !== 'all' ? { level: levelFilter as 'debug' | 'info' | 'warn' | 'error' } : {}),
-        limit: 300,
-        ...(scopeFilter ? { scope: scopeFilter } : {}),
-      } as Parameters<typeof client.getLogs>[0]),
-    refetchInterval: 3000,
-  })
-
-  const rawLogs = (logsData ?? []) as unknown as Array<Record<string, unknown>>
-
-  // Newest first — most recent logs at the top
-  const logs = useMemo(() => [...rawLogs].reverse(), [rawLogs])
-
-  // Auto-scroll to top when new logs arrive (newest is at top)
-  useEffect(() => {
-    if (autoScroll) {
-      scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-  }, [logs, autoScroll])
-
-  // Detect user scroll to auto-disable auto-scroll when scrolling down
-  const handleScroll = useCallback(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-    const isAtTop = container.scrollTop < 40
-    setAutoScroll(isAtTop)
-  }, [])
-
-  function formatTs(ts: unknown): string {
-    if (!ts) return '--'
-    const d = new Date(typeof ts === 'number' ? ts : String(ts))
-    return d.toLocaleTimeString('en-GB', {
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      fractionalSecondDigits: 3,
-    })
-  }
-
-  return (
-    <div className="space-y-3">
-      {/* Filters bar */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <Filter className="h-3.5 w-3.5 text-foreground-subtle shrink-0" />
-
-        <select
-          value={agentFilter}
-          onChange={(e) => setAgentFilter(e.target.value)}
-          className="rounded-lg border border-border bg-surface text-xs text-foreground px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-        >
-          <option value="all">All agents</option>
-          <option value="Hub">Hub</option>
-          {agentNames.map((name) => (
-            <option key={name} value={name}>{name}</option>
-          ))}
-        </select>
-
-        <select
-          value={addonFilter}
-          onChange={(e) => setAddonFilter(e.target.value)}
-          className="rounded-lg border border-border bg-surface text-xs text-foreground px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-        >
-          <option value="all">All addons</option>
-          {addonNames.map((name) => (
-            <option key={name} value={name}>{name}</option>
-          ))}
-        </select>
-
-        <select
-          value={levelFilter}
-          onChange={(e) => setLevelFilter(e.target.value as LogLevel)}
-          className="rounded-lg border border-border bg-surface text-xs text-foreground px-2 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary"
-        >
-          <option value="all">All levels</option>
-          <option value="debug">Debug</option>
-          <option value="info">Info</option>
-          <option value="warn">Warn</option>
-          <option value="error">Error</option>
-        </select>
-
-        <button
-          type="button"
-          onClick={() => {
-            const next = !autoScroll
-            setAutoScroll(next)
-            if (next) {
-              scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
-            }
-          }}
-          className={`inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors ${
-            autoScroll
-              ? 'border-primary/30 bg-primary/10 text-primary'
-              : 'border-border bg-surface text-foreground-subtle hover:text-foreground'
-          }`}
-        >
-          <ArrowDownToLine className="h-3.5 w-3.5" />
-          Auto-scroll: {autoScroll ? 'ON' : 'OFF'}
-        </button>
-      </div>
-
-      {/* Log display */}
-      {isLoading && (
-        <div className="text-xs text-foreground-subtle animate-pulse">Loading logs...</div>
-      )}
-
-      {isError && (
-        <div className="text-xs text-danger">Failed to load logs</div>
-      )}
-
-      {!isLoading && !isError && logs.length === 0 && (
-        <div className="text-xs text-foreground-subtle italic">No logs match the current filters</div>
-      )}
-
-      {logs.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
-          <div
-            ref={scrollContainerRef}
-            onScroll={handleScroll}
-            className="max-h-[400px] overflow-y-auto"
-          >
-            <table className="w-full text-[10px]">
-              <thead className="sticky top-0">
-                <tr>
-                  <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-surface border-b border-border w-24">Time</th>
-                  <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-surface border-b border-border w-14">Level</th>
-                  <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-surface border-b border-border w-28">Scope</th>
-                  <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-surface border-b border-border">Message</th>
-                </tr>
-              </thead>
-              <tbody>
-                {logs.map((entry, i) => {
-                  const level = String(entry.level ?? 'info').toLowerCase()
-                  const style = LEVEL_STYLES[level] ?? LEVEL_STYLES['info']!
-                  const message = String(entry.message ?? entry.msg ?? entry.text ?? '')
-                  const scope = Array.isArray(entry.scope)
-                    ? (entry.scope as string[]).join(' > ')
-                    : String(entry.scope ?? '')
-                  return (
-                    <tr key={i} className="hover:bg-primary/5">
-                      <td className="px-2.5 py-1 text-foreground-subtle border-b border-border font-mono whitespace-nowrap">
-                        {formatTs(entry.timestamp ?? entry.ts ?? entry.time)}
-                      </td>
-                      <td className="px-2.5 py-1 border-b border-border">
-                        <span className={`inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase ${style.badge}`}>
-                          {level}
-                        </span>
-                      </td>
-                      <td className="px-2.5 py-1 border-b border-border text-foreground-subtle font-mono truncate max-w-[180px]" title={scope}>
-                        {scope || '--'}
-                      </td>
-                      <td className={`px-2.5 py-1 border-b border-border font-mono ${style.text} break-all`}>
-                        {message}
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-            {/* newest-first: no bottom anchor needed */}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}