feat: add pie charts for Content Agent usage

components/Admin/AdminPieChart.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Pie, PieChart, Cell } from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+
+const COLORS = [
+  "#345A5D",
+  "#6B8E93",
+  "#4A90A4",
+  "#8FBCC4",
+  "#2A4648",
+  "#5BA3B5",
+  "#3D7A7E",
+  "#97C4CC",
+];
+
+export interface PieChartSlice {
+  name: string;
+  value: number;
+}
+
+interface AdminPieChartProps {
+  title: string;
+  data: PieChartSlice[];
+}
+
+export default function AdminPieChart({ title, data }: AdminPieChartProps) {
+  if (data.length === 0) return null;
+
+  const chartConfig = Object.fromEntries(
+    data.map((slice, i) => [
+      slice.name,
+      { label: slice.name, color: COLORS[i % COLORS.length] },
+    ]),
+  ) satisfies ChartConfig;
+
+  return (
+    <div className="rounded-lg border p-4">
+      <h2 className="mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+        {title}
+      </h2>
+      <ChartContainer config={chartConfig} className="mx-auto h-[250px] w-full">
+        <PieChart accessibilityLayer>
+          <ChartTooltip content={<ChartTooltipContent nameKey="name" hideLabel />} />
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={90}
+            paddingAngle={2}
+          >
+            {data.map((slice, i) => (
+              <Cell
+                key={slice.name}
+                fill={COLORS[i % COLORS.length]}
+              />
+            ))}
+          </Pie>
+          <ChartLegend content={<ChartLegendContent nameKey="name" />} />
+        </PieChart>
+      </ChartContainer>
+    </div>
+  );
+}

components/ContentSlack/ContentSlackPage.tsx

@@ -8,9 +8,12 @@ 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 AdminPieChart from "@/components/Admin/AdminPieChart";
 import TableSkeleton from "@/components/Sandboxes/TableSkeleton";
 import ChartSkeleton from "@/components/PrivyLogins/ChartSkeleton";
+import PieChartSkeleton from "@/components/ContentSlack/PieChartSkeleton";
 import { getTagsByDate } from "@/lib/coding-agent/getTagsByDate";
+import { getTagsByUser } from "@/lib/contentSlack/getTagsByUser";
 import type { AdminPeriod } from "@/types/admin";
 
 export default function ContentSlackPage() {
@@ -25,6 +28,7 @@ export default function ContentSlackPage() {
         })),
       )
     : [];
+  const tagsByUser = data ? getTagsByUser(data.tags) : [];
 
   return (
     <main className="mx-auto max-w-6xl px-4 py-10">
@@ -49,6 +53,7 @@ export default function ContentSlackPage() {
       {isLoading && (
         <>
           <ChartSkeleton />
+          <PieChartSkeleton />
           <TableSkeleton columns={["User", "Timestamp", "Prompt", "Video Links"]} />
         </>
       )}
@@ -76,6 +81,9 @@ export default function ContentSlackPage() {
               label: "Tags with Videos",
             }}
           />
+          <div className="mb-6">
+            <AdminPieChart title="Tags by User" data={tagsByUser} />
+          </div>
           <ContentSlackTable tags={data.tags} />
         </>
       )}

components/ContentSlack/PieChartSkeleton.tsx

@@ -0,0 +1,10 @@
+export default function PieChartSkeleton() {
+  return (
+    <div className="mb-6 rounded-lg border p-4">
+      <div className="mb-4 h-4 w-28 animate-pulse rounded bg-muted" />
+      <div className="flex items-center justify-center h-[250px]">
+        <div className="h-[180px] w-[180px] animate-pulse rounded-full bg-muted" />
+      </div>
+    </div>
+  );
+}

lib/contentSlack/getTagsByUser.ts

@@ -0,0 +1,19 @@
+import type { ContentSlackTag } from "@/types/contentSlack";
+import type { PieChartSlice } from "@/components/Admin/AdminPieChart";
+
+/**
+ * Aggregates content slack tags by user_name for pie chart display.
+ * Returns slices sorted descending by count.
+ */
+export function getTagsByUser(tags: ContentSlackTag[]): PieChartSlice[] {
+  const counts = new Map<string, number>();
+
+  for (const tag of tags) {
+    const name = tag.user_name || "Unknown";
+    counts.set(name, (counts.get(name) ?? 0) + 1);
+  }
+
+  return Array.from(counts.entries())
+    .map(([name, value]) => ({ name, value }))
+    .sort((a, b) => b.value - a.value);
+}