Project Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Recoup Admin dashboard is a centralized management interface designed for the Recoup platform. Built with Next.js 16 and the App Router, it provides administrators with real-time insights into system usage, agent performance, and user activity. The application leverages a modern tech stack including React 19, Tailwind CSS 4, and TypeScript 5 to deliver a responsive and type-safe experience.
Sources: README.md:3-5, README.md:31-36, package.json:14-20
The project is structured to monitor specific platform features such as the Coding Agent, Content Agent, and Sandbox environments. It integrates with Privy for authentication and TanStack Query for efficient data fetching from the Recoup API.
Sources: app/layout.tsx:11-13, components/Home/AdminDashboard.tsx:11-17, package.json:13-15
System Architecture
The application follows a standard Next.js App Router architecture. The app/ directory contains page definitions and layouts, while components/ houses reusable UI elements and specialized page modules. Logic is abstracted into hooks/ for state and data management, and lib/ for utility functions.
Component Hierarchy and Data Flow
The root layout wraps the application in a Providers component, which likely initializes the Privy authentication context and TanStack Query client. Navigation is managed through an AppHeader and the AdminDashboard.
Visual representation of the authentication and routing flow within the admin dashboard.
Sources: app/layout.tsx:28-44, components/Home/HomeContent.tsx:13-43
Core Modules
1. Coding Agent Monitoring
This module tracks Slack mentions of the Recoup Coding Agent. It visualizes the conversion rate from Slack tags to Pull Requests (PRs). Key metrics include total tags, tags with PRs, and total merged PRs.
- Logic: Uses
useSlackTagsanduseCodingPrStatushooks to fetch and correlate data. - Visualization: Employs an
AdminLineChartto show activity over time and aSlackTagsTablefor granular detail.
Sources: components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:23-28, components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:84-110
2. Content Agent Monitoring
Similar to the Coding Agent, this module monitors tags for the Content Agent. It specifically tracks "Video Links" generated from Slack prompts.
- Data Transformation: The page maps
video_linksto a structure compatible with the general tagging visualizer. - Citations: Sources: components/ContentSlack/ContentSlackPage.tsx:20-27, hooks/useContentSlackTags.ts:9-20
3. User Activity and Authentication
User sign-ins are tracked via the Privy integration. The dashboard provides a view of user creation and "Last Seen" activity.
| Feature | Description | File Reference |
|---|---|---|
| Privy Logins | Displays user sign-in history and activity trends. | components/PrivyLogins/PrivyLoginsPage.tsx |
| Admin Check | Validates if the authenticated user has administrative privileges. | hooks/useIsAdmin.ts |
| Period Selector | Allows filtering data by timeframes (e.g., "all", "7d", "30d"). | types/admin.ts |
Sources: components/PrivyLogins/PrivyLoginsPage.tsx:32-41, components/Home/AdminDashboard.tsx:9-10
4. Sandbox and Account Management
The system provides detailed views of sandbox usage and specific account task runs.
- Account Detail: Visualizes "Pulse Runs" (email tasks) and provides a modal for viewing specific email contents.
- Org Commits: Tracks activity across repository sub-modules within sandboxes.
Sources: components/AccountDetail/AccountDetailPage.tsx:35-51, components/SandboxOrgs/SandboxOrgsPage.tsx:13-18
Technical Stack Summary
The project utilizes a modern frontend stack designed for performance and developer experience.
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Auth | @privy-io/react-auth |
| Data Fetching | @tanstack/react-query |
| Styling | Tailwind CSS 4, Radix UI |
| Charts | Recharts |
Sources: package.json:11-20, README.md:31-36
API Integration
The dashboard interacts with a backend API (hosted at developers.recoupable.com) to retrieve analytics and platform data. Components often include an ApiDocsLink pointing to the relevant endpoint documentation.
Sequence diagram showing the authenticated data fetching pattern used across the dashboard.
Sources: hooks/useAdminSandboxOrgs.ts:14-22, components/ApiDocs/ApiDocsLink.tsx:7-13
Summary
The Recoup Admin project serves as a comprehensive monitoring tool for the Recoup platform. By aggregating data from Slack, GitHub (PRs), and internal task runners, it provides a high-level overview of agent performance and user engagement. Its architecture prioritizes type safety and modularity, ensuring that new monitoring features can be added as the platform evolves.
Sources: README.md:1-2, components/Home/AdminDashboard.tsx:11-17