Content Slack Dashboard

Relevant source files

The following files were used as context for generating this wiki page:

• app/content/page.tsx
• components/ContentSlack/ContentSlackPage.tsx
• components/ContentSlack/ContentSlackStats.tsx
• components/ContentSlack/ContentSlackTable.tsx
• components/ContentSlack/contentSlackColumns.tsx
• hooks/useContentSlackTags.ts
• lib/recoup/fetchContentSlackTags.ts
• types/contentSlack.ts

The Content Slack Dashboard is a specialized administrative interface within the Recoup Admin platform designed to monitor and analyze usage of the Content Agent. It specifically tracks Slack mentions and interactions where users tag the Content Agent, providing insights into user prompts, timestamps, and generated video links.

This dashboard allows administrators to visualize activity trends over different time periods (daily, weekly, monthly, or all-time) and inspect specific interactions through a detailed tabular view. It serves as a companion to other monitoring tools like the Coding Agent Slack Tags dashboard.
Sources: app/content/page.tsx:1-13, components/ContentSlack/ContentSlackPage.tsx:28-35, components/Home/AdminDashboard.tsx:14

System Architecture

The dashboard follows a standard React/Next.js client-side rendering pattern, utilizing specialized hooks for data fetching and a modular component structure for the UI.

Data Flow

The system retrieves data from a protected backend API endpoint. Authentication is handled via Privy, ensuring only authorized administrators can access the usage statistics.

The data flow begins with the ContentSlackPage component, which manages the current AdminPeriod state. The useContentSlackTags hook utilizes @tanstack/react-query to fetch data from the API via the fetchContentSlackTags utility.
Sources: hooks/useContentSlackTags.ts:7-18, lib/recoup/fetchContentSlackTags.ts:7-24, components/ContentSlack/ContentSlackPage.tsx:17-26

Data Models

The dashboard relies on specific TypeScript interfaces to define the structure of the Slack tag data and the API responses.

Content Slack Tag Structure

Field	Type	Description
user_id	string	Unique identifier of the Slack user.
user_name	string	Display name of the user.
user_avatar	string | null	URL to the user's Slack profile picture.
prompt	string	The text content of the message sent to the agent.
timestamp	string	ISO string representing when the tag occurred.
channel_id	string	Identifier for the Slack channel.
channel_name	string	Human-readable name of the Slack channel.
video_links	string[]	Array of URLs for videos generated by the agent.
Sources: types/contentSlack.ts:1-10

API Response Format

The endpoint returns a ContentSlackResponse which includes metadata and the array of tags:

• status: "success" or "error"
• total: Total number of tags found.
• total_videos: Total count of video links generated across all tags.
• tags_with_videos: Number of unique tags that resulted in at least one video.
• tags: Array of ContentSlackTag objects.
  Sources: types/contentSlack.ts:12-18

Key Components

1. ContentSlackPage

The primary container component located at app/content/page.tsx. It handles the overall layout, period selection state, and conditional rendering of loading states, errors, and empty data scenarios.
Sources: components/ContentSlack/ContentSlackPage.tsx:16-86

2. ContentSlackStats

A purely functional component used to display high-level metrics at the top of the dashboard.

export default function ContentSlackStats({ data }: ContentSlackStatsProps) {
  return (
    <div className="flex gap-4 text-sm text-gray-500">
      <span><span className="font-semibold text-gray-900">{data.total}</span> tags</span>
      <span><span className="font-semibold text-gray-900">{data.total_videos}</span> videos</span>
      <span><span className="font-semibold text-gray-900">{data.tags_with_videos}</span> with videos</span>
    </div>
  );
}

Sources: components/ContentSlack/ContentSlackStats.tsx:7-20

3. ContentSlackTable

Powered by @tanstack/react-table, this component displays the detailed log of interactions. It includes sorting capabilities, particularly for the timestamp column (defaulting to descending order).
Sources: components/ContentSlack/ContentSlackTable.tsx:23-38

4. Data Visualization

The dashboard includes an AdminLineChart that visualizes two primary metrics over time:

1. Tags: The total frequency of interactions.
2. Tags with Videos: The subset of interactions that successfully produced content.
   Sources: components/ContentSlack/ContentSlackPage.tsx:75-83

API Integration

The frontend communicates with the backend via the fetchContentSlackTags function. This function constructs the URL with the selected time period and attaches the necessary authentication headers.

Parameter	Type	Description
accessToken	string	Bearer token retrieved from Privy.
period	AdminPeriod	Time filter: "all", "daily", "weekly", or "monthly".

Endpoint: ${API_BASE_URL}/api/admins/content/slack
Sources: lib/recoup/fetchContentSlackTags.ts:7-14, hooks/useContentSlackTags.ts:14-16

Summary

The Content Slack Dashboard provides a comprehensive view of how users interact with the Content Agent via Slack. By combining high-level statistics, time-series visualization, and a detailed searchable table, it enables administrators to track the volume of prompts and the success rate of video generation across the platform.