@camstack/addon-admin-ui 0.1.2 → 0.1.3

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>
-  )
-}

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>
-  )
-}