feat: Content Agent usage dashboard page

app/content/page.tsx

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

components/ContentSlack/ContentSlackPage.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
+import { useContentSlackTags } from "@/hooks/useContentSlackTags";
+import ContentSlackTable from "@/components/ContentSlack/ContentSlackTable";
+import ContentSlackStats from "@/components/ContentSlack/ContentSlackStats";
+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 { getTagsByDate } from "@/lib/coding-agent/getTagsByDate";
+import type { AdminPeriod } from "@/types/admin";
+
+export default function ContentSlackPage() {
+  const [period, setPeriod] = useState<AdminPeriod>("all");
+  const { data, isLoading, error } = useContentSlackTags(period);
+
+  const tagsByDate = data
+    ? getTagsByDate(
+        data.tags.map((t) => ({
+          ...t,
+          pull_requests: t.video_links,
+        })),
+      )
+    : [];
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10">
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <PageBreadcrumb current="Content Agent" />
+          <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+            Content Agent Usage
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Slack tags to the Content Agent, grouped by time period.
+          </p>
+        </div>
+        <ApiDocsLink path="admins/content-slack-tags" />
+      </div>
+
+      <div className="mb-6 flex items-center gap-4">
+        <PeriodSelector period={period} onPeriodChange={setPeriod} />
+        {data && <ContentSlackStats data={data} />}
+      </div>
+
+      {isLoading && (
+        <>
+          <ChartSkeleton />
+          <TableSkeleton columns={["User", "Timestamp", "Prompt", "Video Links"]} />
+        </>
+      )}
+
+      {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 Content Agent tags"}
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.tags.length === 0 && (
+        <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+          No tags found for this period.
+        </div>
+      )}
+
+      {!isLoading && !error && data && data.tags.length > 0 && (
+        <>
+          <AdminLineChart
+            title="Tags & Videos Over Time"
+            data={tagsByDate.map((d) => ({ date: d.date, count: d.count }))}
+            label="Tags"
+            secondLine={{
+              data: tagsByDate.map((d) => ({ date: d.date, count: d.pull_request_count })),
+              label: "Tags with Videos",
+            }}
+          />
+          <ContentSlackTable tags={data.tags} />
+        </>
+      )}
+    </main>
+  );
+}

components/ContentSlack/ContentSlackStats.tsx

@@ -0,0 +1,21 @@
+import type { ContentSlackResponse } from "@/types/contentSlack";
+
+interface ContentSlackStatsProps {
+  data: ContentSlackResponse;
+}
+
+export default function ContentSlackStats({ data }: ContentSlackStatsProps) {
+  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> tags
+      </span>
+      <span>
+        <span className="font-semibold text-gray-900 dark:text-gray-100">{data.total_videos}</span> videos
+      </span>
+      <span>
+        <span className="font-semibold text-gray-900 dark:text-gray-100">{data.tags_with_videos}</span> with videos
+      </span>
+    </div>
+  );
+}

components/ContentSlack/ContentSlackTable.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 { contentSlackColumns } from "@/components/ContentSlack/contentSlackColumns";
+import type { ContentSlackTag } from "@/types/contentSlack";
+
+interface ContentSlackTableProps {
+  tags: ContentSlackTag[];
+}
+
+export default function ContentSlackTable({ tags }: ContentSlackTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "timestamp", desc: true },
+  ]);
+
+  const table = useReactTable({
+    data: tags,
+    columns: contentSlackColumns,
+    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={contentSlackColumns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

components/ContentSlack/contentSlackColumns.tsx

@@ -0,0 +1,76 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { SortableHeader } from "@/components/SandboxOrgs/SortableHeader";
+import type { ContentSlackTag } from "@/types/contentSlack";
+
+export const contentSlackColumns: ColumnDef<ContentSlackTag>[] = [
+  {
+    id: "user_name",
+    accessorKey: "user_name",
+    header: "User",
+    cell: ({ row }) => {
+      const tag = row.original;
+      return (
+        <div className="flex items-center gap-2">
+          {tag.user_avatar && (
+            <img
+              src={tag.user_avatar}
+              alt={tag.user_name}
+              className="h-6 w-6 rounded-full"
+            />
+          )}
+          <span className="font-medium">{tag.user_name}</span>
+        </div>
+      );
+    },
+  },
+  {
+    id: "timestamp",
+    accessorKey: "timestamp",
+    header: ({ column }) => <SortableHeader column={column} label="Timestamp" />,
+    cell: ({ getValue }) =>
+      new Date(getValue<string>()).toLocaleString(),
+    sortingFn: "datetime",
+  },
+  {
+    id: "prompt",
+    accessorKey: "prompt",
+    header: "Prompt",
+    cell: ({ getValue }) => {
+      const text = getValue<string>();
+      return (
+        <span className="line-clamp-2 max-w-xs" title={text}>
+          {text}
+        </span>
+      );
+    },
+  },
+  {
+    id: "video_links",
+    accessorFn: (row) => row.video_links.length,
+    header: ({ column }) => (
+      <SortableHeader column={column} label="Video Links" />
+    ),
+    cell: ({ row }) => {
+      const links = row.original.video_links;
+      if (links.length === 0) {
+        return <span className="text-gray-400">—</span>;
+      }
+      return (
+        <div className="flex flex-col gap-1">
+          {links.map((link, i) => (
+            <a
+              key={i}
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-600 hover:underline dark:text-blue-400 truncate max-w-xs"
+            >
+              {link}
+            </a>
+          ))}
+        </div>
+      );
+    },
+    sortingFn: "basic",
+  },
+];

components/Home/AdminDashboard.tsx

@@ -13,6 +13,7 @@ export default function AdminDashboard() {
         <NavButton href="/sandboxes/orgs" label="View Org Commits" />
         <NavButton href="/privy" label="View Privy Logins" />
         <NavButton href="/coding" label="Coding Agent Tags" />
+        <NavButton href="/content" label="View Content Agent" />
       </nav>
     </div>
   );

hooks/useContentSlackTags.ts

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

lib/recoup/fetchContentSlackTags.ts

@@ -0,0 +1,22 @@
+import { API_BASE_URL } from "@/lib/consts";
+import type { AdminPeriod } from "@/types/admin";
+import type { ContentSlackResponse } from "@/types/contentSlack";
+
+export async function fetchContentSlackTags(
+  accessToken: string,
+  period: AdminPeriod,
+): Promise<ContentSlackResponse> {
+  const url = new URL(`${API_BASE_URL}/api/admins/content/slack`);
+  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/contentSlack.ts

@@ -0,0 +1,18 @@
+export type ContentSlackTag = {
+  user_id: string;
+  user_name: string;
+  user_avatar: string | null;
+  prompt: string;
+  timestamp: string;
+  channel_id: string;
+  channel_name: string;
+  video_links: string[];
+};
+
+export type ContentSlackResponse = {
+  status: "success" | "error";
+  total: number;
+  total_videos: number;
+  tags_with_videos: number;
+  tags: ContentSlackTag[];
+};