feat: add Agent Sign-Ups admin page

app/agent-signups/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import AgentSignupsPage from "@/components/AgentSignups/AgentSignupsPage";
+
+export const metadata: Metadata = {
+  title: "Agent Sign-Ups — Recoup Admin",
+};
+
+export default function Page() {
+  return <AgentSignupsPage />;
+}

components/AgentSignups/AgentSignupsPage.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
+import { useAgentSignups } from "@/hooks/useAgentSignups";
+import AgentSignupsTable from "@/components/AgentSignups/AgentSignupsTable";
+import AgentSignupsStats from "@/components/AgentSignups/AgentSignupsStats";
+import PeriodSelector from "@/components/Admin/PeriodSelector";
+import AdminLineChart from "@/components/Admin/AdminLineChart";
+import TableSkeleton from "@/components/Sandboxes/TableSkeleton";
+import ChartSkeleton from "@/components/PrivyLogins/ChartSkeleton";
+import { getSignupsByDate } from "@/lib/agent-signups/getSignupsByDate";
+import type { AdminPeriod } from "@/types/admin";
+
+export default function AgentSignupsPage() {
+  const [period, setPeriod] = useState<AdminPeriod>("all");
+  const { data, isLoading, error } = useAgentSignups(period);
+
+  const signupsByDate = data ? getSignupsByDate(data.signups) : [];
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10">
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <PageBreadcrumb current="Agent Sign-Ups" />
+          <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+            Agent Sign-Ups
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            API key sign-ups from AI agents, grouped by time period.
+          </p>
+        </div>
+        <ApiDocsLink path="admins/agent-signups" />
+      </div>
+
+      <div className="mb-6 flex items-center gap-4">
+        <PeriodSelector period={period} onPeriodChange={setPeriod} />
+        {data && <AgentSignupsStats data={data} />}
+      </div>
+
+      {isLoading && (
+        <>
+          <ChartSkeleton />
+          <TableSkeleton columns={["Email", "Key Name", "Created At"]} />
+        </>
+      )}
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+          {error instanceof Error ? error.message : "Failed to load agent sign-ups"}
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.signups.length === 0 && (
+        <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+          No agent sign-ups found for this period.
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.signups.length > 0 && (
+        <>
+          <AdminLineChart
+            title="Agent Sign-Ups Over Time"
+            data={signupsByDate.map((d) => ({ date: d.date, count: d.count }))}
+            label="Sign-Ups"
+          />
+          <AgentSignupsTable signups={data.signups} />
+        </>
+      )}
+    </main>
+  );
+}

components/AgentSignups/AgentSignupsStats.tsx

@@ -0,0 +1,15 @@
+import type { AgentSignupsResponse } from "@/types/agentSignups";
+
+interface AgentSignupsStatsProps {
+  data: AgentSignupsResponse;
+}
+
+export default function AgentSignupsStats({ data }: AgentSignupsStatsProps) {
+  return (
+    <div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
+      <span>
+        <span className="font-semibold text-gray-900 dark:text-gray-100">{data.total}</span> sign-ups
+      </span>
+    </div>
+  );
+}

components/AgentSignups/AgentSignupsTable.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { agentSignupsColumns } from "@/components/AgentSignups/agentSignupsColumns";
+import type { AgentSignup } from "@/types/agentSignups";
+
+interface AgentSignupsTableProps {
+  signups: AgentSignup[];
+}
+
+export default function AgentSignupsTable({ signups }: AgentSignupsTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "created_at", desc: true },
+  ]);
+
+  const table = useReactTable({
+    data: signups,
+    columns: agentSignupsColumns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={agentSignupsColumns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

components/AgentSignups/agentSignupsColumns.tsx

@@ -0,0 +1,31 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { SortableHeader } from "@/components/SandboxOrgs/SortableHeader";
+import type { AgentSignup } from "@/types/agentSignups";
+
+export const agentSignupsColumns: ColumnDef<AgentSignup>[] = [
+  {
+    id: "email",
+    accessorKey: "email",
+    header: ({ column }) => <SortableHeader column={column} label="Email" />,
+    cell: ({ getValue }) => (
+      <span className="font-medium">{getValue<string>()}</span>
+    ),
+  },
+  {
+    id: "name",
+    accessorKey: "name",
+    header: "Key Name",
+    cell: ({ getValue }) => (
+      <span className="max-w-xs truncate" title={getValue<string>()}>
+        {getValue<string>()}
+      </span>
+    ),
+  },
+  {
+    id: "created_at",
+    accessorKey: "created_at",
+    header: ({ column }) => <SortableHeader column={column} label="Created At" />,
+    cell: ({ getValue }) => new Date(getValue<string>()).toLocaleString(),
+    sortingFn: "datetime",
+  },
+];

components/Home/AdminDashboard.tsx

@@ -14,6 +14,7 @@ export default function AdminDashboard() {
         <NavButton href="/privy" label="View Privy Logins" />
         <NavButton href="/coding" label="Coding Agent Tags" />
         <NavButton href="/content" label="View Content Agent" />
+        <NavButton href="/agent-signups" label="Agent Sign-Ups" />
       </nav>
     </div>
   );

hooks/useAgentSignups.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { usePrivy } from "@privy-io/react-auth";
+import { fetchAgentSignups } from "@/lib/recoup/fetchAgentSignups";
+import type { AdminPeriod } from "@/types/admin";
+
+export function useAgentSignups(period: AdminPeriod) {
+  const { ready, authenticated, getAccessToken } = usePrivy();
+
+  return useQuery({
+    queryKey: ["admin", "agent-signups", period],
+    queryFn: async () => {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      return fetchAgentSignups(token, period);
+    },
+    enabled: ready && authenticated,
+  });
+}

lib/agent-signups/getSignupsByDate.ts

@@ -0,0 +1,22 @@
+import type { AgentSignup } from "@/types/agentSignups";
+
+export interface SignupsByDateEntry {
+  date: string;
+  count: number;
+}
+
+/**
+ * Aggregates agent sign-ups by UTC date (YYYY-MM-DD) for charting.
+ */
+export function getSignupsByDate(signups: AgentSignup[]): SignupsByDateEntry[] {
+  const counts: Record<string, number> = {};
+
+  for (const signup of signups) {
+    const date = signup.created_at.slice(0, 10);
+    counts[date] = (counts[date] || 0) + 1;
+  }
+
+  return Object.entries(counts)
+    .map(([date, count]) => ({ date, count }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}

lib/agent-signups/getSignupsByEmail.ts

@@ -0,0 +1,22 @@
+import type { AgentSignup } from "@/types/agentSignups";
+
+export interface SignupsByEmailEntry {
+  name: string;
+  value: number;
+}
+
+/**
+ * Aggregates agent sign-ups by email address for pie chart display.
+ */
+export function getSignupsByEmail(signups: AgentSignup[]): SignupsByEmailEntry[] {
+  const counts: Record<string, number> = {};
+
+  for (const signup of signups) {
+    const key = signup.email || "Unknown";
+    counts[key] = (counts[key] || 0) + 1;
+  }
+
+  return Object.entries(counts)
+    .map(([name, value]) => ({ name, value }))
+    .sort((a, b) => b.value - a.value);
+}

lib/recoup/fetchAgentSignups.ts

@@ -0,0 +1,22 @@
+import { API_BASE_URL } from "@/lib/consts";
+import type { AdminPeriod } from "@/types/admin";
+import type { AgentSignupsResponse } from "@/types/agentSignups";
+
+export async function fetchAgentSignups(
+  accessToken: string,
+  period: AdminPeriod,
+): Promise<AgentSignupsResponse> {
+  const url = new URL(`${API_BASE_URL}/api/admins/agent-signups`);
+  url.searchParams.set("period", period);
+
+  const res = await fetch(url.toString(), {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error ?? body.message ?? `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}

types/agentSignups.ts

@@ -0,0 +1,12 @@
+export type AgentSignup = {
+  id: string;
+  name: string;
+  email: string;
+  created_at: string;
+};
+
+export type AgentSignupsResponse = {
+  status: "success" | "error";
+  total: number;
+  signups: AgentSignup[];
+};