## AI Master Prompt: DevStatus Hub - Next.js MVP Application
### 1. PROJECT OVERVIEW
**Project Name:** DevStatus Hub
**Core Problem:** Developers using AI coding assistants like GitHub Copilot are increasingly concerned about how their interaction data (code snippets, prompts, usage patterns) is used by these AI models. There's a lack of transparency and control regarding data privacy, leading to potential risks of sensitive information leakage and misuse for model training without explicit consent. GitHub's recent policy updates have amplified these concerns.
**Value Proposition:** DevStatus Hub provides a centralized, transparent platform for developers to monitor, understand, and manage their data privacy settings across various AI development tools. It aims to empower developers by offering clear insights into data usage policies, tracking collected data, and providing tools to control data sharing, thereby fostering trust and ensuring privacy.
**Target Users:** Individual software developers, open-source contributors, development teams, and organizations concerned about data privacy and compliance when using AI-powered development tools.
**MVP Goal:** To build a fully functional, multi-page Next.js MVP application that allows users to authenticate, view aggregated data privacy policies for popular AI tools (starting with GitHub Copilot), see a dashboard of their (simulated/mocked) data usage, and manage basic privacy settings.
### 2. TECH STACK
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui (built on Radix UI and Tailwind CSS)
- **ORM:** Drizzle ORM (PostgreSQL adapter recommended)
- **Database:** PostgreSQL (or any compatible SQL database like Vercel Postgres, Neon, Supabase)
- **Authentication:** NextAuth.js (for OAuth with GitHub, Google, etc.)
- **State Management:** React Context API / Zustand (for global state if needed beyond component state)
- **Form Handling:** React Hook Form + Zod (for validation)
- **API Layer:** Server Actions (for mutations/CRUD), Route Handlers (for specific API endpoints if needed)
- **Deployment:** Vercel (recommended for seamless Next.js integration)
### 3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM syntax)
```typescript
// schema.ts
import { pgTable, serial, varchar, text, timestamp, boolean, json, uuid, pgEnum } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
// User Authentication
export const users = pgTable('users', {
id: uuid('id').defaultRandom().primaryKey(),
name: varchar('name'),
email: varchar('email', { length: 255 }).notNull().unique(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: varchar('image'),
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
export const accounts = pgTable('accounts', {
id: serial('id').primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
type: varchar('type', { length: 255 }).$type<string>().notNull(),
provider: varchar('provider', { length: 255 }).notNull(),
providerAccountId: varchar('providerAccountId', { length: 255 }).notNull(),
refresh_token: text('refresh_token'),
access_token: text('access_token'),
expires_at: timestamp('expires_at', { mode: 'number' }),
token_type: varchar('token_type', { length: 255 }),
scope: varchar('scope', { length: 255 }),
id_token: text('id_token'),
session_state: varchar('session_state', { length: 255 }),
});
export const sessions = pgTable('sessions', {
sessionToken: varchar('sessionToken', { length: 255 }).primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
expires: timestamp('expires', { mode: 'date' }).notNull(),
});
export const verificationTokens = pgTable('verificationTokens', {
identifier: varchar('identifier', { length: 255 }).notNull(),
token: varchar('token', { length: 255 }).notNull(),
expires: timestamp('expires', { mode: 'date' }).notNull(),
});
// Application Specific Schemas
export const aiTools = pgTable('ai_tools', {
id: uuid('id').defaultRandom().primaryKey(),
name: varchar('name', { length: 255 }).notNull().unique(), // e.g., 'GitHub Copilot', 'ChatGPT', 'Bard'
logoUrl: varchar('logoUrl', { length: 255 }),
websiteUrl: varchar('websiteUrl', { length: 255 }),
});
export const policyVersions = pgTable('policy_versions', {
id: uuid('id').defaultRandom().primaryKey(),
toolId: uuid('toolId').notNull().references(() => aiTools.id, { onDelete: 'cascade' }),
version: varchar('version', { length: 50 }).notNull(), // e.g., 'v1.2', 'Feb 2024'
effectiveDate: timestamp('effectiveDate', { mode: 'date' }),
policyUrl: varchar('policyUrl', { length: 255 }).notNull(),
summary: text('summary'),
rawPolicy: text('rawPolicy'), // Optional: store full text if needed
createdAt: timestamp('createdAt').defaultNow(),
isCurrent: boolean('isCurrent').default(false),
});
export const userSettings = pgTable('user_settings', {
id: uuid('id').defaultRandom().primaryKey(),
userId: uuid('userId').notNull().unique().references(() => users.id, { onDelete: 'cascade' }),
dataCollectionOptOut: boolean('dataCollectionOptOut').default(false),
personalizedAdsOptOut: boolean('personalizedAdsOptOut').default(false),
// Add other relevant privacy settings
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
export const dataUsageRecords = pgTable('data_usage_records', {
id: uuid('id').defaultRandom().primaryKey(),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
toolId: uuid('toolId').notNull().references(() => aiTools.id, { onDelete: 'cascade' }),
policyVersionId: uuid('policyVersionId').references(() => policyVersions.id), // Link to the policy in effect
dataType: varchar('dataType', { length: 100 }), // e.g., 'code_snippet', 'prompt_text', 'usage_logs'
usageTimestamp: timestamp('usageTimestamp').defaultNow(),
dataShared: boolean('dataShared').default(true), // Reflects user's opt-in/out status at time of usage
source: varchar('source', { length: 255 }), // e.g., 'Copilot VS Code Extension', 'ChatGPT Web'
// Add fields for anonymization status, etc.
});
// --- Relations (for Drizzle's relation queries) ---
// User relations
export const usersRelations = relations(users, ({ one, many }) => ({
settings: one(userSettings, { relationName: 'settings' }),
dataUsageRecords: many(dataUsageRecords, { relationName: 'dataUsageRecords' }),
accounts: many(accounts, { relationName: 'accounts' }),
}));
// User Settings relations
export const userSettingsRelations = relations(userSettings, ({ one }) => ({
user: one(users, {
fields: [userSettings.userId],
references: [users.id],
relationName: 'user',
}),
}));
// AI Tool relations
export const aiToolsRelations = relations(aiTools, ({ many }) => ({
policyVersions: many(policyVersions, { relationName: 'policyVersions' }),
}));
// Policy Version relations
export const policyVersionsRelations = relations(policyVersions, ({ one, many }) => ({
tool: one(aiTools, {
fields: [policyVersions.toolId],
references: [aiTools.id],
relationName: 'tool',
}),
dataUsageRecords: many(dataUsageRecords, { relationName: 'dataUsageRecords' }),
}));
// Data Usage Record relations
export const dataUsageRecordsRelations = relations(dataUsageRecords, ({ one }) => ({
user: one(users, {
fields: [dataUsageRecords.userId],
references: [users.id],
relationName: 'user',
}),
tool: one(aiTools, {
fields: [dataUsageRecords.toolId],
references: [aiTools.id],
relationName: 'tool',
}),
policyVersion: one(policyVersions, {
fields: [dataUsageRecords.policyVersionId],
references: [policyVersions.id],
relationName: 'policyVersion',
}),
}));
// Accounts relations
export const accountsRelations = relations(accounts, ({ one }) => ({
user: one(users, {
fields: [accounts.userId],
references: [users.id],
relationName: 'user',
}),
}));
// Sessions relations
export const sessionsRelations = relations(sessions, ({ one }) => ({
user: one(users, {
fields: [sessions.userId],
references: [users.id],
relationName: 'user',
}),
}));
// Verification Tokens relations (usually not needed directly in app logic)
```
### 4. CORE FEATURES & USER FLOW
**4.1. User Authentication (OAuth)
- **Flow:**
1. User visits the landing page.
2. Clicks "Sign In" button.
3. Presented with options: "Sign in with GitHub", "Sign in with Google".
4. User selects a provider (e.g., GitHub).
5. Redirected to GitHub's OAuth consent screen.
6. User grants permission.
7. Redirected back to DevStatus Hub dashboard.
8. If user is new, create a user record in the `users` table and a corresponding `user_settings` record with default values.
9. If user exists, log them in and redirect to the dashboard.
- **Edge Cases:** OAuth callback fails, user denies permissions, network errors during redirect.
**4.2. AI Tool Policy Dashboard
- **Flow:**
1. User logs in and lands on the dashboard.
2. Dashboard displays a list of supported AI tools (e.g., GitHub Copilot).
3. Each tool card shows its current policy version, effective date, and a link to the full policy.
4. Clicking a tool card expands to show a concise summary of the policy, focusing on data usage, training data, and sharing practices.
5. A "View Full Policy" button links to the official policy URL.
6. A mechanism to fetch/update policy data (initially mock data, later potentially a cron job or manual update process for admin).
- **Data Fetching:** Fetch tools and their current `policyVersions` from the DB. Potentially use Server Components to render this list.
- **Edge Cases:** No tools added yet, policy data is outdated, policy URL is broken.
**4.3. Simulated Data Usage Tracking
- **Flow:**
1. Within the dashboard, a section titled "Your Data Usage" (or similar) is displayed.
2. This section shows a list or chart representing *simulated* data usage records for the logged-in user.
3. Each record could include: Data Type (e.g., code snippet, prompt), Timestamp, Tool Used, Policy Version Applied, Sharing Status (based on user settings).
4. **Important:** For MVP, this data is *mocked* or generated on the fly. A real implementation would require deep integration or heuristics.
5. Users should see how their settings (opt-out flags) *would* affect this data.
- **Data Fetching:** Fetch `dataUsageRecords` for the current user, join with `aiTools` and `policyVersions`. For MVP, generate mock data if no records exist.
- **Edge Cases:** No usage records found, user has opted out of data collection.
**4.4. Privacy Settings Management
- **Flow:**
1. User navigates to the "Settings" page.
2. Page displays toggles/checkboxes for privacy options (e.g., "Opt-out of data collection for model training", "Disable personalized suggestions").
3. User modifies settings.
4. User clicks "Save Changes".
5. A Server Action is triggered to update the `user_settings` record in the database for the current user.
6. UI provides feedback on successful save or error.
- **Form Handling:** Use `react-hook-form` with Zod schema for validation. Server Action handles DB update.
- **Edge Cases:** Network error during save, validation errors, unauthorized access.
### 5. API & DATA FETCHING
- **Authentication:** Handled by NextAuth.js. Use `getServerSession` in Server Components or Route Handlers to get user session.
- **Data Fetching Strategy:** Primarily leverage Next.js App Router's Server Components for direct DB access (via Drizzle ORM) and initial data loading. Use Server Actions for mutations (POST, PUT, DELETE).
- **Example API Routes (Route Handlers - if needed):**
- `GET /api/tools`: Fetch list of all AI tools. (Likely handled by Server Component)
- `GET /api/policies/:toolId`: Fetch policy versions for a specific tool. (Likely handled by Server Component)
- `GET /api/user/settings`: Fetch current user settings. (Likely handled by Server Component)
- `PUT /api/user/settings`: Update user settings (Can use Server Action instead).
- `GET /api/user/usage`: Fetch user's data usage records. (Likely handled by Server Component)
- **Example Server Action:**
```typescript
// app/settings/actions.ts
'use server';
import { db } from '@/lib/db'; // Your Drizzle DB instance
import { userSettings } from '@/lib/schema'; // Your schema
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth'; // Your NextAuth.js options
import { z } from 'zod';
import { eq } from 'drizzle-orm';
const settingsSchema = z.object({
dataCollectionOptOut: z.boolean(),
personalizedAdsOptOut: z.boolean(),
});
export async function updateSettings(formData: FormData) {
const session = await getServerSession(authOptions);
if (!session?.user?.id) {
return { error: 'Not authenticated' };
}
const data = {
dataCollectionOptOut: formData.get('dataCollectionOptOut') === 'on',
personalizedAdsOptOut: formData.get('personalizedAdsOptOut') === 'on',
};
const validatedData = settingsSchema.safeParse(data);
if (!validatedData.success) {
return { error: 'Invalid input', issues: validatedData.error.format() };
}
try {
await db.update(userSettings)
.set(validatedData.data)
.where(eq(userSettings.userId, session.user.id));
return { success: true, message: 'Settings updated successfully!' };
} catch (error) {
console.error('Failed to update settings:', error);
return { error: 'Failed to update settings' };
}
}
```
### 6. COMPONENT BREAKDOWN (Next.js App Router)
- **`app/layout.tsx`:** Root layout. Includes `<html>`, `<body>`, global providers (e.g., ThemeProvider), and imports Tailwind CSS.
- **`app/page.tsx`:** Landing Page. Hero section, value proposition, features overview, CTA (Sign In).
- **`app/dashboard/page.tsx`:** Protected Dashboard. Requires authentication. Displays AI Tool Policy summary and Simulated Data Usage overview. Uses Server Components.
- **`components/ui/DashboardCard.tsx`:** Reusable card for displaying metrics/summaries.
- **`components/dashboard/AIToolList.tsx`:** Renders the list of AI tools and their policy summaries (fetched server-side).
- **`components/dashboard/DataUsageChart.tsx`:** Displays the simulated data usage (potentially using a charting library like Recharts or Chart.js).
- **`components/dashboard/PolicyDetailModal.tsx`:** Modal to show detailed policy summary and link.
- **`app/settings/page.tsx`:** Protected Settings page. Displays and allows editing of user privacy preferences.
- **`components/settings/PrivacyForm.tsx`:** Contains the form elements (toggles, checkboxes) for privacy settings. Uses `react-hook-form`.
- **`components/ui/ToggleSwitch.tsx`:** Custom toggle switch component from shadcn/ui.
- **`app/api/auth/[...nextauth]/route.ts`:** NextAuth.js route handler for authentication.
- **`app/layout.tsx`:** Root layout defining the overall structure.
- **`components/ui/Navbar.tsx`:** Navigation bar with Logo, links (Dashboard, Settings), and Sign In/Out button.
- **`components/ui/Footer.tsx`:** Standard footer.
- **`components/ui/Button.tsx`, `components/ui/Card.tsx`, `components/ui/Input.tsx`, etc.:** Reusable UI components from shadcn/ui.
- **`lib/db.ts`:** Drizzle ORM database connection setup.
- **`lib/schema.ts`:** Database schema definition.
- **`lib/auth.ts`:** NextAuth.js configuration.
**State Management:** Primarily Server Components for data fetching. Client components use local state (`useState`, `useReducer`). Global state (like user auth status accessible across the app) managed via React Context or Zustand, integrated with NextAuth.js session.
### 7. UI/UX DESIGN & VISUAL IDENTITY
- **Design Style:** "Minimalist Clean" with subtle futuristic/tech elements.
- **Color Palette:**
- **Primary:** Deep Blue (`#0a192f`)
- **Secondary:** Cool Gray (`#8892b0`)
- **Accent:** Electric Teal (`#64ffda`)
- **Background:** Very Dark Gray/Off-Black (`#050d18`)
- **Surface/Card Background:** Slightly lighter dark gray (`#112240`)
- **Text:** Light Gray (`#ccd6f6`)
- **Typography:** A clean, modern sans-serif font like 'Inter' or 'Manrope'. Use varying weights for hierarchy.
- **Layout:** Generous whitespace. Clear separation of sections. Sidebar navigation for authenticated users could be considered for larger scale, but a top navbar is sufficient for MVP.
- **UI Elements:** Utilize shadcn/ui components for consistency. Buttons have a slight hover effect, inputs are clean and focused.
- **Responsiveness:** Mobile-first approach. Components should adapt fluidly to different screen sizes. Use Tailwind's responsive modifiers (e.g., `md:`, `lg:`).
- **Logo:** Simple, abstract icon representing data flow or privacy shield.
### 8. SAMPLE/MOCK DATA
**`aiTools` Table:**
1. `{
"id": "...",
"name": "GitHub Copilot",
"logoUrl": "/logos/copilot.svg",
"websiteUrl": "https://github.com/features/copilot"
}`
2. `{
"id": "...",
"name": "ChatGPT",
"logoUrl": "/logos/chatgpt.svg",
"websiteUrl": "https://chat.openai.com/"
}`
**`policyVersions` Table:**
1. `{
"id": "...",
"toolId": "[ID of GitHub Copilot]",
"version": "Feb 2024 Update",
"effectiveDate": "2024-02-01",
"policyUrl": "https://docs.github.com/en/copilot/privacy-and-data-usage/github-copilot-data-usage-policies",
"summary": "Explains how code suggestions and telemetry are used. Emphasizes data protection for enterprise users.",
"isCurrent": true
}`
2. `{
"id": "...",
"toolId": "[ID of ChatGPT]",
"version": "v1.0",
"effectiveDate": "2023-01-01",
"policyUrl": "https://openai.com/policies",
"summary": "Covers data usage for model training, abuse detection, and service improvement. User data may be used unless opted out.",
"isCurrent": true
}`
**`userSettings` Table:**
1. `{
"id": "...",
"userId": "[User ID]",
"dataCollectionOptOut": false,
"personalizedAdsOptOut": true
}`
**`dataUsageRecords` Table (Simulated/Mock for MVP):**
1. `{
"id": "...",
"userId": "[User ID]",
"toolId": "[ID of GitHub Copilot]",
"policyVersionId": "[Policy ID for Copilot Feb 2024]",
"dataType": "code_snippet",
"usageTimestamp": "2024-07-26T10:00:00Z",
"dataShared": true,
"source": "Copilot VS Code Extension"
}`
2. `{
"id": "...",
"userId": "[User ID]",
"toolId": "[ID of GitHub Copilot]",
"policyVersionId": "[Policy ID for Copilot Feb 2024]",
"dataType": "prompt_text",
"usageTimestamp": "2024-07-26T10:05:00Z",
"dataShared": true,
"source": "Copilot VS Code Extension"
}`
3. `{
"id": "...",
"userId": "[User ID]",
"toolId": "[ID of ChatGPT]",
"policyVersionId": "[Policy ID for ChatGPT v1.0]",
"dataType": "conversation_history",
"usageTimestamp": "2024-07-25T15:30:00Z",
"dataShared": false, // Assuming user opted out
"source": "ChatGPT Web"
}`
### 9. TURKISH TRANSLATIONS
- **App Title:** Geliştirici Durum Merkezi (DevStatus Hub)
- **Sign In:** Giriş Yap
- **Sign Out:** Çıkış Yap
- **Dashboard:** Kontrol Paneli
- **Settings:** Ayarlar
- **AI Tools:** Yapay Zeka Araçları
- **Data Policy:** Veri Politikası
- **Summary:** Özet
- **View Full Policy:** Tam Politikayı Görüntüle
- **Your Data Usage:** Veri Kullanımınız
- **Data Type:** Veri Türü
- **Timestamp:** Zaman Damgası
- **Sharing Status:** Paylaşım Durumu
- **Privacy Settings:** Gizlilik Ayarları
- **Opt-out of data collection for model training:** Model eğitimi için veri toplama
- **Disable personalized suggestions:** Kişiselleştirilmiş önerileri devre dışı bırak
- **Save Changes:** Değişiklikleri Kaydet
- **Settings updated successfully!:** Ayarlar başarıyla güncellendi!
- **Error saving settings:** Ayarlar kaydedilemedi.
- **Welcome to DevStatus Hub!:** DevStatus Hub'a Hoş Geldiniz!
- **Manage your AI tool privacy:** Yapay zeka araçlarınızın gizliliğini yönetin.
### 10. ANIMATIONS
- **Page Transitions:** Subtle fade-in/out transitions between pages using Next.js `useRouter` and a library like `Framer Motion` or simple CSS transitions.
- **Hover Effects:** Buttons and interactive elements should have a slight color change or scale effect on hover.
- **Loading States:** Use subtle shimmer effects (e.g., skeleton loaders) for data fetching. Tailwind CSS can be used to style loading spinners.
- **Toggles/Switches:** Smooth animation when toggling settings.
### 11. EDGE CASES & VALIDATION
- **Authentication:** Handle unauthorized access attempts gracefully (redirect to login, show message).
- **Empty States:** Design informative empty states for the dashboard (e.g., "Connect your first AI tool to see policies", "No data usage records yet").
- **Data Fetching Errors:** Display user-friendly error messages if data fails to load (e.g., "Could not load policy information. Please try again later."). Use `try...catch` blocks extensively.
- **Form Validation:** Implement client-side validation using Zod and `react-hook-form`. Perform server-side validation via Server Actions/Route Handlers before database operations.
- **API Rate Limiting/Errors:** If integrating with external APIs (future feature), handle potential rate limits or errors.
- **Database Errors:** Gracefully handle database connection issues or query failures.
- **Policy Parsing:** If attempting to auto-parse policies, handle malformed HTML or unexpected structures.