@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/agents/ProcessList.tsx

@@ -1,127 +0,0 @@
-import { useState } from 'react'
-import { RotateCcw } from 'lucide-react'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-export interface ProcessEntry {
-  id: string
-  name: string
-  pid?: number
-  status: string
-  cpu?: number
-  memoryMb?: number
-  uptime?: number
-  restarts?: number
-}
-
-function StatusDot({ status }: { status: string }) {
-  const color =
-    status === 'running'
-      ? 'bg-green-400'
-      : status === 'error'
-      ? 'bg-red-400'
-      : 'bg-foreground-subtle'
-  return <span className={`inline-block h-2 w-2 rounded-full shrink-0 ${color}`} title={status} />
-}
-
-function formatUptime(seconds: number): string {
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-interface ProcessListProps {
-  processes: ProcessEntry[]
-}
-
-export function ProcessList({ processes }: ProcessListProps) {
-  const client = useBackendClient()
-  const queryClient = useQueryClient()
-  const [confirmingId, setConfirmingId] = useState<string | null>(null)
-
-  const restartMutation = useMutation({
-    mutationFn: (id: string) => client.trpc.processes.restartProcess.mutate({ id }),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['processes'] })
-      setConfirmingId(null)
-    },
-  })
-
-  if (processes.length === 0) {
-    return <div className="text-[10px] text-foreground-subtle italic">No processes</div>
-  }
-
-  return (
-    <div className="rounded-md border border-border overflow-hidden">
-      <table className="w-full text-[10px]">
-        <thead>
-          <tr>
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border w-4" />
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border">Name</th>
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border">PID</th>
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border">CPU%</th>
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border">RSS</th>
-            <th className="text-left px-2.5 py-1.5 text-foreground-subtle font-medium bg-background border-b border-border">Uptime</th>
-            <th className="px-2.5 py-1.5 bg-background border-b border-border" />
-          </tr>
-        </thead>
-        <tbody>
-          {processes.map((proc) => {
-            const isConfirming = confirmingId === proc.id
-            return (
-              <tr key={proc.id} className="hover:bg-primary/5">
-                <td className="px-2.5 py-1.5 border-b border-border">
-                  <StatusDot status={proc.status} />
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border font-mono text-foreground">
-                  {proc.name}
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border text-foreground-subtle">
-                  {proc.pid ?? '—'}
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border text-foreground-subtle">
-                  {proc.cpu != null ? `${proc.cpu.toFixed(1)}%` : '—'}
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border text-foreground-subtle">
-                  {proc.memoryMb != null ? `${proc.memoryMb.toFixed(0)} MB` : '—'}
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border text-foreground-subtle">
-                  {proc.uptime != null ? formatUptime(proc.uptime) : '—'}
-                </td>
-                <td className="px-2.5 py-1.5 border-b border-border">
-                  {isConfirming ? (
-                    <div className="flex items-center gap-1">
-                      <button
-                        onClick={() => restartMutation.mutate(proc.id)}
-                        disabled={restartMutation.isPending}
-                        className="rounded px-1.5 py-0.5 bg-danger/10 text-danger hover:bg-danger/20"
-                      >
-                        Confirm
-                      </button>
-                      <button
-                        onClick={() => setConfirmingId(null)}
-                        className="rounded px-1.5 py-0.5 bg-surface text-foreground-subtle hover:text-foreground border border-border"
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  ) : (
-                    <button
-                      onClick={() => setConfirmingId(proc.id)}
-                      className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 bg-primary/10 text-primary hover:bg-primary/20"
-                    >
-                      <RotateCcw className="h-2.5 w-2.5" />
-                      Restart
-                    </button>
-                  )}
-                </td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
-    </div>
-  )
-}

package/src/components/agents/ProcessTree.tsx

@@ -1,369 +0,0 @@
-import { useState } from 'react'
-import {
-  ChevronDown,
-  ChevronRight,
-  Server,
-  Cpu,
-  HardDrive,
-  Monitor,
-  Package,
-  GitBranch,
-  ScrollText,
-  Clock,
-} from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface ProcessTreeEntry {
-  id: string
-  name: string
-  pid: number
-  state: string
-  cpuPercent: number
-  memoryPercent: number
-  memoryMB: number
-  isHub: boolean
-  platform: string
-  arch: string
-  host: string
-  capabilities: string[]
-  installedAddons: string[]
-  pythonRuntimes: string[]
-  connectedSince: number
-  subProcesses: SubProcess[]
-}
-
-export interface SubProcess {
-  pid: number
-  name: string
-  command: string
-  state: 'running' | 'stopped' | 'crashed'
-  cpuPercent: number
-  memoryRss: number
-  uptimeSeconds: number
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function formatMemory(mb: number): string {
-  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
-  return `${Math.round(mb)} MB`
-}
-
-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`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-function formatUptimeSeconds(seconds: number): string {
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-function formatTimestamp(ts: number): string {
-  return new Date(ts).toLocaleString('en-GB', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: false,
-  })
-}
-
-function stateColor(state: string): string {
-  switch (state) {
-    case 'running': return 'bg-green-400'
-    case 'stopped': return 'bg-foreground-subtle'
-    case 'crashed': return 'bg-red-400'
-    default: return 'bg-foreground-subtle'
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function SubProcessRow({ proc, isLast }: { proc: SubProcess; isLast: boolean }) {
-  return (
-    <div className="flex items-center gap-2 text-[10px] text-foreground-subtle pl-6 py-1">
-      <span className="text-foreground-subtle/40 font-mono select-none">
-        {isLast ? '\u2514\u2500\u2500' : '\u251C\u2500\u2500'}
-      </span>
-      <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${stateColor(proc.state)}`} />
-      <span className="font-mono text-foreground truncate">{proc.name}</span>
-      <span className="text-foreground-subtle/60">PID {proc.pid}</span>
-      <span>CPU {proc.cpuPercent.toFixed(1)}%</span>
-      <span>{formatMemory(proc.memoryRss / 1024 / 1024)}</span>
-      {proc.uptimeSeconds > 0 && (
-        <span className="text-foreground-subtle/60">up {formatUptimeSeconds(proc.uptimeSeconds)}</span>
-      )}
-    </div>
-  )
-}
-
-function AgentTreeNode({ entry, isSelected, onSelectAgent }: {
-  entry: ProcessTreeEntry
-  isSelected?: boolean
-  onSelectAgent?: (name: string) => void
-}) {
-  const [expanded, setExpanded] = useState(entry.isHub)
-  const hasExpandableContent = true // Always expandable — details section is always useful
-
-  return (
-    <div className="border border-border rounded-lg bg-surface overflow-hidden">
-      {/* Header row */}
-      <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">
-          {expanded
-            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-foreground-subtle" />
-            : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-foreground-subtle" />
-          }
-          <span className={`h-2.5 w-2.5 rounded-full shrink-0 ${entry.state === 'running' ? 'bg-green-400' : 'bg-red-400'}`} />
-          <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">{entry.name}</span>
-              {entry.isHub && (
-                <span className="rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-medium shrink-0">HUB</span>
-              )}
-            </div>
-            <div className="flex items-center gap-2 mt-0.5 text-[10px] text-foreground-subtle flex-wrap">
-              {entry.host && <span className="font-mono">{entry.host}</span>}
-              <span>{entry.platform}/{entry.arch}</span>
-              <span className="flex items-center gap-1">
-                <Cpu className="h-2.5 w-2.5" />
-                {entry.cpuPercent.toFixed(0)}%
-              </span>
-              <span className="flex items-center gap-1">
-                <HardDrive className="h-2.5 w-2.5" />
-                {entry.memoryPercent.toFixed(0)}% ({formatMemory(entry.memoryMB)})
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 shrink-0 text-[10px] text-foreground-subtle">
-          <span>up {formatUptime(entry.connectedSince)}</span>
-          {entry.subProcesses.length > 0 && (
-            <span className="rounded-full bg-info/10 text-info px-2 py-0.5 font-medium">
-              {entry.subProcesses.length} proc{entry.subProcesses.length !== 1 ? 's' : ''}
-            </span>
-          )}
-          {onSelectAgent && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation()
-                onSelectAgent(entry.isHub ? 'Hub' : entry.name)
-              }}
-              className={`inline-flex items-center gap-1 rounded-lg border px-2 py-0.5 text-[10px] font-medium transition-colors ${
-                isSelected
-                  ? 'border-primary/30 bg-primary/10 text-primary'
-                  : 'border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-primary/5'
-              }`}
-              title="View logs for this agent"
-            >
-              <ScrollText className="h-3 w-3" />
-              Logs
-            </button>
-          )}
-        </div>
-      </button>
-
-      {/* Load bars (collapsed only) */}
-      {!expanded && (
-        <div className="px-4 pb-2 space-y-1">
-          <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-            <div
-              className="h-full rounded-full bg-blue-400 transition-all"
-              style={{ width: `${Math.min(100, entry.cpuPercent)}%` }}
-            />
-          </div>
-          <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-            <div
-              className="h-full rounded-full bg-purple-400 transition-all"
-              style={{ width: `${Math.min(100, entry.memoryPercent)}%` }}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Expanded content */}
-      {expanded && (
-        <div className="border-t border-border">
-          {/* Platform & System Details */}
-          <div className="px-4 py-2 border-b border-border">
-            <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-              <Server className="h-3 w-3" />
-              System Details
-            </div>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1 text-[10px] text-foreground-subtle">
-              <div className="flex items-center gap-1.5">
-                <Monitor className="h-3 w-3 shrink-0" />
-                <span>Platform: <span className="text-foreground font-medium">{entry.platform}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Cpu className="h-3 w-3 shrink-0" />
-                <span>Arch: <span className="text-foreground font-medium">{entry.arch}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <HardDrive className="h-3 w-3 shrink-0" />
-                <span>Memory: <span className="text-foreground font-medium">{formatMemory(entry.memoryMB)}</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Cpu className="h-3 w-3 shrink-0" />
-                <span>CPU: <span className="text-foreground font-medium">{entry.cpuPercent.toFixed(1)}%</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <HardDrive className="h-3 w-3 shrink-0" />
-                <span>Mem usage: <span className="text-foreground font-medium">{entry.memoryPercent.toFixed(1)}%</span></span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Clock className="h-3 w-3 shrink-0" />
-                <span>Connected: <span className="text-foreground font-medium">{formatTimestamp(entry.connectedSince)}</span></span>
-              </div>
-            </div>
-            {/* Load bars in expanded */}
-            <div className="mt-2 space-y-1">
-              <div className="flex items-center gap-2 text-[9px] text-foreground-subtle">
-                <span className="w-8">CPU</span>
-                <div className="flex-1 h-1.5 rounded-full bg-border overflow-hidden">
-                  <div
-                    className="h-full rounded-full bg-blue-400 transition-all"
-                    style={{ width: `${Math.min(100, entry.cpuPercent)}%` }}
-                  />
-                </div>
-                <span className="w-8 text-right">{entry.cpuPercent.toFixed(0)}%</span>
-              </div>
-              <div className="flex items-center gap-2 text-[9px] text-foreground-subtle">
-                <span className="w-8">MEM</span>
-                <div className="flex-1 h-1.5 rounded-full bg-border overflow-hidden">
-                  <div
-                    className="h-full rounded-full bg-purple-400 transition-all"
-                    style={{ width: `${Math.min(100, entry.memoryPercent)}%` }}
-                  />
-                </div>
-                <span className="w-8 text-right">{entry.memoryPercent.toFixed(0)}%</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Installed addons */}
-          {entry.installedAddons.length > 0 && (
-            <div className="px-4 py-2 border-b border-border">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <Package className="h-3 w-3" />
-                Installed Addons ({entry.installedAddons.length})
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {entry.installedAddons.map((addon) => (
-                  <span key={addon} className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium bg-primary/10 text-primary">
-                    {addon}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Capabilities */}
-          {entry.capabilities.length > 0 && (
-            <div className="px-4 py-2 border-b border-border">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <Monitor className="h-3 w-3" />
-                Capabilities ({entry.capabilities.length})
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {entry.capabilities.map((cap) => (
-                  <span key={cap} className="inline-flex rounded-md px-1.5 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-400">
-                    {cap}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Sub-processes */}
-          {entry.subProcesses.length > 0 && (
-            <div className="px-4 py-2">
-              <div className="flex items-center gap-1.5 text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5">
-                <GitBranch className="h-3 w-3" />
-                Sub-Processes ({entry.subProcesses.length})
-              </div>
-              {entry.subProcesses.map((proc, idx) => (
-                <SubProcessRow
-                  key={proc.pid}
-                  proc={proc}
-                  isLast={idx === entry.subProcesses.length - 1}
-                />
-              ))}
-            </div>
-          )}
-
-          {entry.subProcesses.length === 0 && entry.installedAddons.length === 0 && entry.capabilities.length === 0 && (
-            <div className="px-4 py-3 text-[10px] text-foreground-subtle italic">
-              No sub-processes or addons reported
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// ProcessTree
-// ---------------------------------------------------------------------------
-
-interface ProcessTreeProps {
-  entries: ProcessTreeEntry[]
-  isLoading: boolean
-  selectedAgentName?: string | null
-  onSelectAgent?: (name: string) => void
-}
-
-export function ProcessTree({ entries, isLoading, selectedAgentName, onSelectAgent }: ProcessTreeProps) {
-  if (isLoading) {
-    return <div className="text-xs text-foreground-subtle animate-pulse">Loading process tree...</div>
-  }
-
-  if (entries.length === 0) {
-    return <div className="text-xs text-foreground-subtle italic">No agents connected</div>
-  }
-
-  // Sort: hub first, then by name
-  const sorted = [...entries].sort((a, b) => {
-    if (a.isHub && !b.isHub) return -1
-    if (!a.isHub && b.isHub) return 1
-    return a.name.localeCompare(b.name)
-  })
-
-  return (
-    <div className="space-y-2">
-      {sorted.map((entry) => (
-        <AgentTreeNode
-          key={entry.id}
-          entry={entry}
-          isSelected={selectedAgentName === entry.name}
-          onSelectAgent={onSelectAgent}
-        />
-      ))}
-    </div>
-  )
-}

package/src/components/agents/TaskList.tsx

@@ -1,68 +0,0 @@
-import { Clock, Video } from 'lucide-react'
-
-export interface AgentTask {
-  id: string
-  role: string
-  cameraId?: string
-  cameraName?: string
-  stats?: Record<string, unknown>
-  startedAt?: number
-}
-
-function formatDuration(startedAt: number): string {
-  const seconds = Math.floor((Date.now() - startedAt) / 1000)
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  return `${h}h ${m}m`
-}
-
-const ROLE_COLORS: Record<string, string> = {
-  decoder: 'bg-blue-500/10 text-blue-400',
-  transcoder: 'bg-purple-500/10 text-purple-400',
-  detector: 'bg-green-500/10 text-green-400',
-  recorder: 'bg-orange-500/10 text-orange-400',
-  restreamer: 'bg-cyan-500/10 text-cyan-400',
-}
-
-interface TaskListProps {
-  tasks: AgentTask[]
-}
-
-export function TaskList({ tasks }: TaskListProps) {
-  if (tasks.length === 0) {
-    return (
-      <div className="text-[10px] text-foreground-subtle italic">No active tasks</div>
-    )
-  }
-
-  return (
-    <div className="space-y-1.5">
-      {tasks.map((task) => (
-        <div
-          key={task.id}
-          className="flex items-center gap-2 rounded-md bg-background px-2.5 py-1.5 text-[10px]"
-        >
-          <span className={`shrink-0 rounded-md px-1.5 py-0.5 font-medium ${ROLE_COLORS[task.role] ?? 'bg-primary/10 text-primary'}`}>
-            {task.role}
-          </span>
-
-          {task.cameraName && (
-            <span className="flex items-center gap-1 text-foreground-subtle truncate min-w-0">
-              <Video className="h-3 w-3 shrink-0" />
-              <span className="truncate">{task.cameraName}</span>
-            </span>
-          )}
-
-          {task.startedAt && (
-            <span className="ml-auto flex items-center gap-1 text-foreground-subtle shrink-0">
-              <Clock className="h-3 w-3" />
-              {formatDuration(task.startedAt)}
-            </span>
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/cameras/CameraCard.tsx

@@ -1,60 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { Camera, Eye, Activity } from 'lucide-react'
-
-interface CameraCardProps {
-  readonly id: string
-  readonly name: string
-  readonly status: string
-  readonly detectionsToday: number
-  readonly inferenceMs: number
-}
-
-const STATUS_CONFIG: Record<string, { label: string; bg: string; text: string }> = {
-  online:   { label: 'ACTIVE',   bg: 'bg-success/15', text: 'text-success' },
-  running:  { label: 'ACTIVE',   bg: 'bg-success/15', text: 'text-success' },
-  watching: { label: 'WATCHING', bg: 'bg-warning/15', text: 'text-warning' },
-  idle:     { label: 'WATCHING', bg: 'bg-warning/15', text: 'text-warning' },
-  offline:  { label: 'OFFLINE',  bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle' },
-  stopped:  { label: 'OFFLINE',  bg: 'bg-foreground-subtle/10', text: 'text-foreground-subtle' },
-  error:    { label: 'OFFLINE',  bg: 'bg-danger/15', text: 'text-danger' },
-}
-
-export function CameraCard({ id, name, status, detectionsToday, inferenceMs }: CameraCardProps) {
-  const navigate = useNavigate()
-  const statusCfg = STATUS_CONFIG[status] ?? STATUS_CONFIG['offline']!
-
-  return (
-    <button
-      onClick={() => navigate(`/devices/${id}`)}
-      className="group flex flex-col rounded-lg border border-border bg-surface text-left hover:border-primary/30 hover:shadow-md hover:shadow-black/5 transition-all w-full overflow-hidden"
-    >
-      {/* 16:9 stream placeholder */}
-      <div className="relative aspect-video w-full bg-background flex items-center justify-center">
-        <Camera className="h-8 w-8 text-foreground-subtle/20" />
-        {/* Status badge */}
-        <span
-          className={`absolute top-2 right-2 inline-flex items-center rounded px-1.5 py-0.5 text-[9px] font-bold tracking-wider ${statusCfg.bg} ${statusCfg.text}`}
-        >
-          {statusCfg.label}
-        </span>
-      </div>
-
-      {/* Info section */}
-      <div className="px-3 py-2.5 space-y-1.5">
-        <p className="text-xs font-semibold text-foreground truncate group-hover:text-primary transition-colors">
-          {name}
-        </p>
-        <div className="flex items-center gap-3 text-[10px] text-foreground-subtle">
-          <span className="inline-flex items-center gap-1">
-            <Eye className="h-3 w-3" />
-            {detectionsToday} today
-          </span>
-          <span className="inline-flex items-center gap-1">
-            <Activity className="h-3 w-3" />
-            {inferenceMs}ms
-          </span>
-        </div>
-      </div>
-    </button>
-  )
-}