@camstack/addon-admin-ui 0.1.1

package/src/components/agents/AgentLogs.tsx

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,127 @@
+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>
+  )
+}