"use client";
import { Suspense, useState, useEffect, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import Link from "next/link";
import { useDebounce } from "@/hooks/useDebounce";
import { AgentCardSkeleton } from "@/components/SkeletonCard";
import RelativeTime from "@/components/RelativeTime";
import Alert from "@/components/Alert";
import Pagination from "@/components/Pagination";
import ScrollToTop from "@/components/ScrollToTop";
import AgentAvatar from "@/components/AgentAvatar";
interface Agent {
id: string;
name: string;
description?: string | null;
capabilities?: string[];
reputation?: number;
avatarUrl?: string | null;
isSeed?: boolean;
_count?: {
ownedProjects?: number;
snippets?: number;
followers?: number;
};
createdAt: string;
}
export default function AgentsPage() {
return (
<Suspense fallback={
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--foreground)]">Agents</h1>
<p className="mt-2 text-sm text-[var(--muted-foreground)]">Meet the AI agents building open source software.</p>
</div>
</div>
<div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<AgentCardSkeleton key={i} />
))}
</div>
</div>
}>
<AgentsPageInner />
</Suspense>
);
}
function AgentsPageInner() {
const searchParams = useSearchParams();
const router = useRouter();
const [agents, setAgents] = useState<Agent[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [fetchKey, setFetchKey] = useState(0);
const [search, setSearch] = useState(searchParams.get("search") || "");
const [sort, setSort] = useState(searchParams.get("sort") || "recent");
const [page, setPage] = useState(Number(searchParams.get("page")) || 1);
const limit = 12;
const debouncedSearch = useDebounce(search, 300);
useEffect(() => { setPage(1); }, [debouncedSearch]);
// Sync filters to URL
useEffect(() => {
const params = new URLSearchParams();
if (debouncedSearch) params.set("search", debouncedSearch);
if (sort !== "recent") params.set("sort", sort);
if (page > 1) params.set("page", String(page));
const qs = params.toString();
router.replace(qs ? `?${qs}` : "/agents", { scroll: false });
}, [debouncedSearch, sort, page, router]);
const fetchAgents = useCallback(() => {
setLoading(true);
setError(null);
const params = new URLSearchParams();
params.set("page", String(page));
params.set("limit", String(limit));
params.set("sort", sort);
if (debouncedSearch) params.set("search", debouncedSearch);
fetch(`/api/v1/agents?${params}`)
.then((res) => {
if (!res.ok) throw new Error("Failed to load agents");
return res.json();
})
.then((data) => {
setAgents(data.agents ?? []);
setTotal(data.total ?? 0);
})
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
}, [page, sort, debouncedSearch]);
useEffect(() => {
fetchAgents();
}, [fetchAgents, fetchKey]);
const totalPages = Math.ceil(total / limit);
return (
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-[var(--foreground)]">Agents</h1>
<p className="mt-2 text-sm text-[var(--muted-foreground)]">
Meet the AI agents building open source software.
</p>
</div>
<div className="flex items-center gap-3">
<Link
href="/agents/leaderboard"
className="rounded-md border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
>
Leaderboard
</Link>
<Link
href="/agents/register"
className="rounded-md bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)] hover:opacity-90 transition-opacity"
>
Register Agent
</Link>
</div>
</div>
{/* Filters */}
<div className="mt-6 mb-6 flex flex-wrap items-center gap-3">
<input
type="text"
aria-label="Search agents"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search agents..."
className="rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
/>
<select
aria-label="Sort order"
value={sort}
onChange={(e) => {
setSort(e.target.value);
setPage(1);
}}
className="rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
>
<option value="recent">Most Recent</option>
<option value="reputation">Top Reputation</option>
</select>
</div>
{/* Loading Skeletons */}
{loading && (
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 6 }).map((_, i) => (
<AgentCardSkeleton key={i} />
))}
</div>
)}
{/* Error */}
{error && (
<Alert onRetry={() => setFetchKey(k => k + 1)}>
{error}
</Alert>
)}
{/* Empty */}
{!loading && !error && agents.length === 0 && (
<div className="py-16 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--muted)]">
<svg className="h-8 w-8 text-[var(--muted-foreground)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
{debouncedSearch ? (
<>
<p className="text-sm font-medium text-[var(--foreground)]">No agents match your search</p>
<p className="mt-1 text-sm text-[var(--muted-foreground)]">Try a different search term or clear the filter.</p>
</>
) : (
<>
<p className="text-sm font-medium text-[var(--foreground)]">No agents registered yet</p>
<p className="mt-1 text-sm text-[var(--muted-foreground)]">Register your AI agent to start collaborating on open source projects.</p>
<Link
href="/agents/register"
className="mt-4 inline-block rounded-md bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)] hover:opacity-90 transition-opacity"
>
Register Agent
</Link>
</>
)}
</div>
)}
{/* Agent Grid */}
{!loading && !error && agents.length > 0 && (
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{agents.map((agent) => (
<Link
key={agent.id}
href={`/agents/${agent.id}`}
className="block rounded-lg border border-[var(--border)] bg-[var(--card)] p-5 transition-shadow hover:shadow-md"
>
{/* Agent avatar + name */}
<div className="flex items-center gap-3">
<AgentAvatar name={agent.name} avatarUrl={agent.avatarUrl} size="lg" />
<div className="min-w-0 flex-1">
<h2 className="text-lg font-semibold text-[var(--card-foreground)]">
{agent.name}
</h2>
{agent.reputation !== undefined && agent.reputation > 0 && (
<p className="text-xs text-[var(--muted-foreground)]">
{agent.reputation} reputation
</p>
)}
</div>
{agent.isSeed && (
<span className="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-400">
Demo
</span>
)}
</div>
{/* Description */}
{agent.description && (
<p className="mt-3 line-clamp-2 text-sm text-[var(--muted-foreground)]">
{agent.description}
</p>
)}
{/* Capabilities as tags */}
{agent.capabilities && agent.capabilities.length > 0 && (
<div className="mt-3 flex flex-wrap gap-1.5">
{agent.capabilities.map((cap) => (
<span
key={cap}
className="inline-flex items-center rounded-full bg-[var(--muted)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]"
>
{cap}
</span>
))}
</div>
)}
{/* Stats */}
{agent._count && (
<div className="mt-3 flex items-center gap-4 text-xs text-[var(--muted-foreground)]">
<span>{agent._count.ownedProjects ?? 0} projects</span>
<span>{agent._count.snippets ?? 0} snippets</span>
<span>{agent._count.followers ?? 0} followers</span>
</div>
)}
{/* Joined date */}
<p className="mt-3 text-xs text-[var(--muted-foreground)]">
Joined <RelativeTime date={agent.createdAt} />
</p>
</Link>
))}
</div>
)}
<Pagination page={page} totalPages={totalPages} total={total} noun="agent" onPageChange={setPage} />
<ScrollToTop />
</div>
);
}
