CUB-121: build React pages with real API integration
- HubPage: agent summary stats, cards, status badges, progress bars, refresh - LogsPage: activity feed from tasks, status filter, loading skeleton - ProjectsPage: project cards with status badges and agent counts - SessionsPage: responsive table/card view with model/token info - SettingsPage: dark mode toggle, gateway URL, refresh interval persist - ThemeProvider with dark/light mode via CSS custom properties - useLocalStorage hook for settings persistence - Loading/error/empty states across all pages - npm run build passes cleanly
This commit is contained in:
@@ -1,8 +1,182 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { listTasks } from '../services/api'
|
||||
import { AlertCircle, RefreshCw, Filter, CheckCircle, Circle, Clock, XCircle, Loader, ListTodo } from 'lucide-react'
|
||||
import type { Task } from '../types'
|
||||
|
||||
const STATUS_FILTERS = ['all', 'pending', 'running', 'completed', 'failed'] as const
|
||||
type StatusFilter = (typeof STATUS_FILTERS)[number]
|
||||
|
||||
const STATUS_ICON: Record<string, React.ElementType> = {
|
||||
pending: Clock,
|
||||
running: Loader,
|
||||
completed: CheckCircle,
|
||||
failed: XCircle,
|
||||
}
|
||||
|
||||
const STATUS_COLOR: Record<string, string> = {
|
||||
pending: 'text-yellow-500',
|
||||
running: 'text-blue-400',
|
||||
completed: 'text-green-500',
|
||||
failed: 'text-red-500',
|
||||
}
|
||||
|
||||
export default function LogsPage() {
|
||||
const queryClient = useQueryClient()
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['tasks'],
|
||||
queryFn: listTasks,
|
||||
})
|
||||
|
||||
const tasks = (data?.data ?? []) as Task[]
|
||||
|
||||
const filtered = statusFilter === 'all'
|
||||
? tasks
|
||||
: tasks.filter((t) => t.status === statusFilter)
|
||||
|
||||
// Sort newest first
|
||||
const sorted = [...filtered].sort(
|
||||
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
)
|
||||
|
||||
if (isLoading) return <LogsSkeleton />
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-96 gap-4">
|
||||
<AlertCircle size={48} className="text-danger" />
|
||||
<p className="text-danger text-lg">Failed to load activity logs</p>
|
||||
<button
|
||||
onClick={() => queryClient.invalidateQueries({ queryKey: ['tasks'] })}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
|
||||
>
|
||||
<RefreshCw size={16} /> Retry
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-4">Logs</h1>
|
||||
<p className="text-on-surface-variant">Activity logs will appear here.</p>
|
||||
<div className="space-y-6">
|
||||
<header>
|
||||
<h1 className="text-2xl font-bold">Activity Logs</h1>
|
||||
<p className="text-on-surface-variant">Task activity across all agents</p>
|
||||
</header>
|
||||
|
||||
{/* Filter tabs */}
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<Filter size={16} className="text-on-surface-muted mr-1" />
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setStatusFilter(f)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm capitalize transition-colors ${
|
||||
statusFilter === f
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'text-on-surface-variant hover:bg-surface-light hover:text-on-surface'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Activity feed */}
|
||||
{sorted.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-48 gap-3 border border-dashed border-surface-light rounded-xl">
|
||||
<ListTodo size={40} className="text-on-surface-muted" />
|
||||
<p className="text-on-surface-muted text-lg">No tasks found</p>
|
||||
<p className="text-on-surface-muted text-sm">
|
||||
{statusFilter === 'all' ? 'Tasks will appear here as agents execute work.' : `No ${statusFilter} tasks.`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sorted.map((task) => {
|
||||
const Icon = STATUS_ICON[task.status] ?? Circle
|
||||
const fmtTime = formatTime(task.createdAt)
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-start gap-4 p-4 rounded-xl border border-surface-light bg-surface-dark hover:border-surface-lighter transition-colors"
|
||||
>
|
||||
<div className={`mt-0.5 shrink-0 ${STATUS_COLOR[task.status] ?? 'text-on-surface-muted'}`}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{task.title}</p>
|
||||
<p className="text-xs text-on-surface-variant mt-0.5">
|
||||
Agent {task.agentId}
|
||||
{task.sessionKey && ` · ${task.sessionKey}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="shrink-0 flex flex-col items-end gap-1">
|
||||
<span className={`text-xs capitalize px-2 py-0.5 rounded-full font-medium ${
|
||||
statusFilter !== 'all'
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'bg-surface-light text-on-surface-variant'
|
||||
}`}>
|
||||
{task.status}
|
||||
</span>
|
||||
{task.progress != null && task.progress > 0 && task.progress < 100 && (
|
||||
<span className="text-xs text-on-surface-muted">{task.progress}%</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 text-xs text-on-surface-muted whitespace-nowrap">
|
||||
{fmtTime}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - d.getTime()
|
||||
const diffMin = Math.floor(diffMs / 60_000)
|
||||
if (diffMin < 1) return 'just now'
|
||||
if (diffMin < 60) return `${diffMin}m ago`
|
||||
const diffHr = Math.floor(diffMin / 60)
|
||||
if (diffHr < 24) return `${diffHr}h ago`
|
||||
return d.toLocaleDateString()
|
||||
} catch {
|
||||
return iso
|
||||
}
|
||||
}
|
||||
|
||||
function LogsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 animate-pulse">
|
||||
<div>
|
||||
<div className="h-8 w-44 skeleton mb-2" />
|
||||
<div className="h-4 w-56 skeleton" />
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-8 w-20 rounded-lg skeleton" />
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-start gap-4 p-4 rounded-xl border border-surface-light bg-surface-dark">
|
||||
<div className="h-5 w-5 rounded-full skeleton shrink-0" />
|
||||
<div className="flex-1">
|
||||
<div className="h-4 w-3/4 skeleton mb-1" />
|
||||
<div className="h-3 w-1/2 skeleton" />
|
||||
</div>
|
||||
<div className="h-6 w-20 rounded-full skeleton" />
|
||||
<div className="h-3 w-16 skeleton" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user