feat(ui/agents): add AgentList component

antd Table that renders cloud-agent definitions and links each row to
/agents/{agent_id}. Uses Tag for the model and dayjs.fromNow for the
last-activity column. Empty state is the antd Empty placeholder.
This commit is contained in:
Ishaan Jaffer 2026-05-06 14:54:31 -07:00
parent 1f5c3fd9f2
commit a9419c514f
No known key found for this signature in database

View file

@ -0,0 +1,62 @@
"use client";
import Link from "next/link";
import { Card, Table, Tag, Typography, Empty } from "antd";
import type { ColumnsType } from "antd/es/table";
import dayjs from "dayjs";
import type { CloudAgent } from "@/types/cloud-agents";
const { Text } = Typography;
interface AgentListProps {
agents: CloudAgent[];
loading: boolean;
}
export default function AgentList({ agents, loading }: AgentListProps) {
const columns: ColumnsType<CloudAgent> = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (_value: unknown, record: CloudAgent) => (
<Link href={`/agents/${record.agent_id}`} data-testid={`agent-link-${record.agent_id}`}>
<Text strong>{record.name}</Text>
</Link>
),
},
{
title: "Model",
dataIndex: "model",
key: "model",
render: (value: string) => <Tag color="blue">{value}</Tag>,
},
{
title: "Sessions",
dataIndex: "session_count",
key: "session_count",
width: 100,
},
{
title: "Last activity",
dataIndex: "last_activity_at",
key: "last_activity_at",
render: (value: string | null) => (value ? dayjs(value).fromNow?.() ?? dayjs(value).format("YYYY-MM-DD HH:mm") : "—"),
},
];
return (
<Card>
<Table<CloudAgent>
rowKey="agent_id"
dataSource={agents}
columns={columns}
loading={loading}
locale={{
emptyText: <Empty description="No cloud agents yet — create your first one." />,
}}
data-testid="agents-table"
/>
</Card>
);
}