agent: @U0AJM7X8FBR Admin + Docs + API - we want a new admin page to view analy

app/coding/page.tsx

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

components/PrivyLogins/PrivyLastSeenChart.tsx → components/Admin/AdminLineChart.tsx

@@ -7,30 +7,26 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart";
-import type { PrivyUser } from "@/types/privy";
-import { getLastSeenByDate } from "@/lib/privy/getLastSeenByDate";
 
-const chartConfig = {
-  count: {
-    label: "Last Seen",
-    color: "#345A5D",
-  },
-} satisfies ChartConfig;
-
-interface PrivyLastSeenChartProps {
-  logins: PrivyUser[];
+interface AdminLineChartProps {
+  title: string;
+  data: Array<{ date: string; count: number }>;
+  label?: string;
 }
 
-export default function PrivyLastSeenChart({ logins }: PrivyLastSeenChartProps) {
-  const data = getLastSeenByDate(logins);
-
+export default function AdminLineChart({ title, data, label = "Count" }: AdminLineChartProps) {
   if (data.length === 0) return null;
 
+  const chartConfig = {
+    count: {
+      label,
+      color: "#345A5D",
+    },
+  } satisfies ChartConfig;
+
   return (
     <div className="mb-6 rounded-lg border p-4">
-      <h2 className="mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">
-        Last Seen Activity
-      </h2>
+      <h2 className="mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">{title}</h2>
       <ChartContainer config={chartConfig} className="h-[250px] w-full">
         <LineChart data={data} accessibilityLayer>
           <CartesianGrid vertical={false} />
@@ -50,7 +46,11 @@ export default function PrivyLastSeenChart({ logins }: PrivyLastSeenChartProps)
               <ChartTooltipContent
                 labelFormatter={(value) => {
                   const d = new Date(String(value) + "T00:00:00");
-                  return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
+                  return d.toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  });
                 }}
               />
             }

components/PrivyLogins/PrivyPeriodSelector.tsx → components/Admin/PeriodSelector.tsx

@@ -1,18 +1,18 @@
-import type { PrivyLoginsPeriod } from "@/types/privy";
+import type { AdminPeriod } from "@/types/admin";
 
-const PERIODS: { value: PrivyLoginsPeriod; label: string }[] = [
+const PERIODS: { value: AdminPeriod; label: string }[] = [
   { value: "all", label: "All Time" },
   { value: "daily", label: "Daily" },
   { value: "weekly", label: "Weekly" },
   { value: "monthly", label: "Monthly" },
 ];
 
-interface PrivyPeriodSelectorProps {
-  period: PrivyLoginsPeriod;
-  onPeriodChange: (period: PrivyLoginsPeriod) => void;
+interface PeriodSelectorProps {
+  period: AdminPeriod;
+  onPeriodChange: (period: AdminPeriod) => void;
 }
 
-export default function PrivyPeriodSelector({ period, onPeriodChange }: PrivyPeriodSelectorProps) {
+export default function PeriodSelector({ period, onPeriodChange }: PeriodSelectorProps) {
   return (
     <div className="flex rounded-lg border bg-white dark:bg-gray-900 overflow-hidden">
       {PERIODS.map(({ value, label }) => (

components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
+import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
+import { useSlackTags } from "@/hooks/useSlackTags";
+import SlackTagsTable from "./SlackTagsTable";
+import AdminLineChart from "@/components/Admin/AdminLineChart";
+import { getTagsByDate } from "@/lib/coding-agent/getTagsByDate";
+import PeriodSelector from "@/components/Admin/PeriodSelector";
+import TableSkeleton from "@/components/Sandboxes/TableSkeleton";
+import ChartSkeleton from "@/components/PrivyLogins/ChartSkeleton";
+import type { AdminPeriod } from "@/types/admin";
+
+export default function CodingAgentSlackTagsPage() {
+  const [period, setPeriod] = useState<AdminPeriod>("all");
+  const { data, isLoading, error } = useSlackTags(period);
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10">
+      <div className="mb-6 flex items-start justify-between">
+        <div>
+          <PageBreadcrumb current="Coding Agent Tags" />
+          <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+            Coding Agent Slack Tags
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Slack mentions of the Recoup Coding Agent, pulled directly from the Slack API.
+          </p>
+        </div>
+        <ApiDocsLink path="admins/coding-agent-slack-tags" />
+      </div>
+
+      <div className="mb-6 flex items-center gap-4">
+        <PeriodSelector period={period} onPeriodChange={setPeriod} />
+        {data && (
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            <span className="font-semibold text-gray-900 dark:text-gray-100">{data.total}</span>{" "}
+            {data.total === 1 ? "tag" : "tags"} found
+          </div>
+        )}
+      </div>
+
+      {isLoading && (
+        <>
+          <ChartSkeleton />
+          <TableSkeleton columns={["Tagged By", "Prompt", "Channel", "Timestamp"]} />
+        </>
+      )}
+
+      {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 Slack 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 Over Time" data={getTagsByDate(data.tags)} label="Tags" />
+          <SlackTagsTable tags={data.tags} />
+        </>
+      )}
+    </main>
+  );
+}

components/CodingAgentSlackTags/SlackTagsColumns.tsx

@@ -0,0 +1,51 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { SortableHeader } from "@/components/SandboxOrgs/SortableHeader";
+import type { SlackTag } from "@/types/coding-agent";
+
+export const slackTagsColumns: ColumnDef<SlackTag>[] = [
+  {
+    id: "user_name",
+    accessorKey: "user_name",
+    header: "Tagged By",
+    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: "prompt",
+    accessorKey: "prompt",
+    header: "Prompt",
+    cell: ({ getValue }) => (
+      <span className="max-w-md truncate block text-sm text-gray-700 dark:text-gray-300">
+        {getValue<string>()}
+      </span>
+    ),
+  },
+  {
+    id: "channel_name",
+    accessorKey: "channel_name",
+    header: "Channel",
+    cell: ({ getValue }) => (
+      <span className="text-sm text-gray-500 dark:text-gray-400">#{getValue<string>()}</span>
+    ),
+  },
+  {
+    id: "timestamp",
+    accessorKey: "timestamp",
+    header: ({ column }) => <SortableHeader column={column} label="Timestamp" />,
+    cell: ({ getValue }) => new Date(getValue<string>()).toLocaleString(),
+    sortingFn: "basic",
+  },
+];

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

components/Home/AdminDashboard.tsx

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

components/PrivyLogins/PrivyLoginsPage.tsx

@@ -5,15 +5,16 @@ import PageBreadcrumb from "@/components/Sandboxes/PageBreadcrumb";
 import ApiDocsLink from "@/components/ApiDocs/ApiDocsLink";
 import { usePrivyLogins } from "@/hooks/usePrivyLogins";
 import PrivyLoginsTable from "@/components/PrivyLogins/PrivyLoginsTable";
-import PrivyPeriodSelector from "@/components/PrivyLogins/PrivyPeriodSelector";
+import PeriodSelector from "@/components/Admin/PeriodSelector";
 import PrivyLoginsStats from "@/components/PrivyLogins/PrivyLoginsStats";
 import TableSkeleton from "@/components/Sandboxes/TableSkeleton";
 import ChartSkeleton from "@/components/PrivyLogins/ChartSkeleton";
-import PrivyLastSeenChart from "@/components/PrivyLogins/PrivyLastSeenChart";
-import type { PrivyLoginsPeriod } from "@/types/privy";
+import AdminLineChart from "@/components/Admin/AdminLineChart";
+import { getLastSeenByDate } from "@/lib/privy/getLastSeenByDate";
+import type { AdminPeriod } from "@/types/admin";
 
 export default function PrivyLoginsPage() {
-  const [period, setPeriod] = useState<PrivyLoginsPeriod>("all");
+  const [period, setPeriod] = useState<AdminPeriod>("all");
   const { data, isLoading, error } = usePrivyLogins(period);
 
   return (
@@ -32,7 +33,7 @@ export default function PrivyLoginsPage() {
       </div>
 
       <div className="mb-6 flex items-center gap-4">
-        <PrivyPeriodSelector period={period} onPeriodChange={setPeriod} />
+        <PeriodSelector period={period} onPeriodChange={setPeriod} />
         {data && <PrivyLoginsStats data={data} />}
       </div>
 
@@ -57,7 +58,7 @@ export default function PrivyLoginsPage() {
 
       {!isLoading && !error && data && data.logins.length > 0 && (
         <>
-          <PrivyLastSeenChart logins={data.logins} />
+          <AdminLineChart title="Last Seen Activity" data={getLastSeenByDate(data.logins)} label="Last Seen" />
           <PrivyLoginsTable logins={data.logins} />
         </>
       )}

hooks/useSlackTags.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { usePrivy } from "@privy-io/react-auth";
+import { fetchSlackTags } from "@/lib/recoup/fetchSlackTags";
+import type { SlackTagsPeriod } from "@/types/coding-agent";
+
+/**
+ * Fetches Slack tagging analytics for the Recoup Coding Agent for the given period.
+ * Authenticates with the Privy access token (admin Bearer auth).
+ */
+export function useSlackTags(period: SlackTagsPeriod) {
+  const { ready, authenticated, getAccessToken } = usePrivy();
+
+  return useQuery({
+    queryKey: ["admin", "coding-agent", "slack-tags", period],
+    queryFn: async () => {
+      const token = await getAccessToken();
+      if (!token) throw new Error("Not authenticated");
+      return fetchSlackTags(token, period);
+    },
+    enabled: ready && authenticated,
+  });
+}

lib/coding-agent/getTagsByDate.ts

@@ -0,0 +1,25 @@
+import type { SlackTag } from "@/types/coding-agent";
+
+interface TagsByDateEntry {
+  date: string;
+  count: number;
+}
+
+/**
+ * Aggregates Slack tags by UTC date (YYYY-MM-DD) for charting.
+ *
+ * @param tags - Array of SlackTag objects
+ * @returns Array of { date, count } sorted ascending by date
+ */
+export function getTagsByDate(tags: SlackTag[]): TagsByDateEntry[] {
+  const counts: Record<string, number> = {};
+
+  for (const tag of tags) {
+    const date = tag.timestamp.slice(0, 10); // "YYYY-MM-DD"
+    counts[date] = (counts[date] ?? 0) + 1;
+  }
+
+  return Object.entries(counts)
+    .map(([date, count]) => ({ date, count }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}