## AI Master Prompt for OptiCache MVP Development
**1. PROJECT OVERVIEW:**
OptiCache is a cutting-edge SaaS application designed to help users of AMD Ryzen processors, particularly those with 'X3D' variants, maximize the performance benefits of their 3D V-Cache technology. The core problem OptiCache solves is the sub-optimal allocation of applications and games to specific CPU cores, especially the V-Cache-enabled ones. While AMD's drivers attempt to manage this automatically, it can be error-prone, leading to missed performance gains. OptiCache analyzes the user's system, identifies which applications and games benefit most from 3D V-Cache, and provides intelligent recommendations for core allocation to ensure these demanding tasks run on the V-Cache-enabled cores. This results in tangible improvements in gaming frame rates, application loading times, and overall system responsiveness for cache-sensitive workloads.
**Value Proposition:** Unlock the hidden performance of your AMD X3D processor. Get more FPS in games and faster performance in demanding applications by intelligently optimizing how your software uses your CPU's advanced cache.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **Database ORM:** Drizzle ORM (PostgreSQL/SQLite compatible)
- **UI Components:** shadcn/ui (for pre-built, accessible, and customizable components)
- **Authentication:** NextAuth.js (for robust email/password and OAuth support)
- **State Management:** Zustand or React Context API (for global state)
- **Data Fetching:** React Server Components (RSC), Server Actions, API Routes
- **Charting:** Recharts or Chart.js (for performance visualizations)
- **Other:** `react-hot-toast` (for notifications), `clsx` (for conditional class names), `lodash` (utility functions)
**3. DATABASE SCHEMA (using Drizzle ORM syntax for PostgreSQL):**
```typescript
// Schema file: src/db/schema.ts
import { pgTable, uuid, varchar, text, timestamp, boolean, integer, jsonb, primaryKey }
from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
// Users Table
export const users = pgTable('users', {
id: uuid('id').primaryKey().default('gen_random_uuid()'),
name: varchar('name'),
email: varchar('email', { length: 255 }).notNull().unique(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: varchar('image'),
// Add role or tier for monetization later
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
export const accounts = pgTable('accounts', {
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
type: varchar('type', { length: 100 }).notNull(),
provider: varchar('provider', { length: 100 }).notNull(),
providerAccountId: varchar('providerAccountId', { length: 255 }).notNull(),
refresh_token: text('refresh_token'),
access_token: text('access_token'),
expires_at: integer('expires_at'),
token_type: varchar('token_type', { length: 50 }),
scope: varchar('scope', { length: 255 }),
id_token: text('id_token'),
session_state: varchar('session_state', { length: 255 })
}, (t) => ({
pk: primaryKey(t.provider, t.providerAccountId)
}));
export const sessions = pgTable('sessions', {
sessionToken: varchar('sessionToken', { length: 255 }).notNull().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()
}, (t) => ({
pk: primaryKey(t.identifier, t.token)
}));
// CPU Configuration Table
export const cpuConfigs = pgTable('cpu_configs', {
id: uuid('id').primaryKey().default('gen_random_uuid()'),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
modelName: varchar('modelName', { length: 100 }).notNull(),
coreCount: integer('coreCount').notNull(),
vCacheCoreCount: integer('vCacheCoreCount').notNull(), // Number of cores with 3D V-Cache
totalL3CacheMB: integer('totalL3CacheMB'), // Total L3 cache in MB
vCacheL3MB: integer('vCacheL3MB'), // Total 3D V-Cache in MB
isX3D: boolean('isX3D').default(false),
createdAt: timestamp('createdAt').defaultNow(),
});
// Application Profile Table
export const appProfiles = pgTable('app_profiles', {
id: uuid('id').primaryKey().default('gen_random_uuid()'),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
appName: varchar('appName', { length: 255 }).notNull(),
executablePath: varchar('executablePath', { length: 512 }), // Optional: For more precise detection
category: varchar('category', { length: 100 }), // e.g., 'Gaming', 'Creative', 'Development'
benefitsFromVCache: boolean('benefitsFromVCache').notNull(),
performanceScore: integer('performanceScore'), // 0-100 score indicating cache sensitivity
recommendedCoreAffinity: varchar('recommendedCoreAffinity', { length: 50 }), // e.g., 'V-Cache Cores', 'All Cores', 'Specific Cores'
createdAt: timestamp('createdAt').defaultNow(),
updatedAt: timestamp('updatedAt').defaultNow(),
});
// User's Installed Apps Table (simplified, can be enriched)
export const installedApps = pgTable('installed_apps', {
id: uuid('id').primaryKey().default('gen_random_uuid()'),
userId: uuid('userId').notNull().references(() => users.id, { onDelete: 'cascade' }),
appName: varchar('appName', { length: 255 }).notNull(),
detectedAt: timestamp('detectedAt').defaultNow(),
// Link to appProfile if analysis is done
appProfileId: uuid('appProfileId').references(() => appProfiles.id, { onDelete: 'set null' })
});
// --- Relations (example) ---
export const usersRelations = relations(users, ({ many }) => ({
cpuConfigs: many(cpuConfigs),
appProfiles: many(appProfiles),
installedApps: many(installedApps)
}));
export const cpuConfigRelations = relations(cpuConfigs, ({ one }) => ({
user: one(users, {
fields: [cpuConfigs.userId],
references: [users.id]
})
}));
export const appProfileRelations = relations(appProfiles, ({ one, many }) => ({
user: one(users, {
fields: [appProfiles.userId],
references: [users.id]
}),
installedApps: many(installedApps)
}));
export const installedAppRelations = relations(installedApps, ({ one }) => ({
user: one(users, {
fields: [installedApps.userId],
references: [users.id]
}),
appProfile: one(appProfiles, {
fields: [installedApps.appProfileId],
references: [appProfiles.id]
})
}));
```
**4. CORE FEATURES & USER FLOW:**
**A. User Authentication:**
- **Flow:** User visits the site -> Clicks 'Sign Up' or 'Login' -> Presented with Email/Password form and OAuth options (Google, GitHub) -> Enters credentials or selects OAuth -> Upon successful verification, user is redirected to the dashboard. Session is managed via NextAuth.js.
- **Edge Cases:** Invalid credentials, account lockout (future), OAuth callback errors, email verification.
**B. CPU Configuration Detection:**
- **Flow (MVP Focus: Manual Input & Basic Detection):
1. User navigates to 'My Rig' or 'CPU Settings'.
2. User is prompted to manually enter CPU Model (e.g., 'Ryzen 9 7950X3D').
3. User inputs the number of total cores and the number of cores with 3D V-Cache (e.g., 16 cores total, 8 with V-Cache).
4. User can optionally input total L3 cache and V-Cache amounts (MB).
5. User clicks 'Save Configuration'. The data is saved to the `cpuConfigs` table linked to their user ID.
- **Future Enhancement (Advanced Detection):** A small, downloadable agent or a browser-based system information API (if feasible and secure) could attempt to auto-detect CPU model and core counts. This requires significant OS-level integration or user permission.
- **Edge Cases:** Invalid CPU model input, incorrect core counts.
**C. Application Analysis & Profiling:**
- **Flow:**
1. User navigates to the 'Analyze Apps' section.
2. User can either:
a) **Manual Entry:** Input an application name (e.g., 'Cyberpunk 2077', 'Blender').
b) **Scan Installed Apps (Future):** A button to trigger a scan for common executable locations (requires backend logic/permissions).
3. For each entered/detected app, the user answers questions or selects from predefined categories:
- 'Does this app benefit significantly from large L3 cache?' (Yes/No)
- 'Is this application primarily CPU-bound in your typical use case?' (Yes/No)
- 'Select Category:' (Gaming, Video Editing, 3D Rendering, Software Development, General Productivity, etc.)
4. Based on the answers and potentially a lookup in a pre-compiled database (our internal knowledge base), OptiCache assigns a `performanceScore` (cache sensitivity) and determines `benefitsFromVCache`.
5. The system suggests `recommendedCoreAffinity` (e.g., 'Prioritize V-Cache Cores', 'Balanced', 'General Use').
6. The `appProfiles` record is created/updated, linked to the user and their CPU configuration.
7. If the app was auto-detected or manually linked, the `installedApps` entry is updated.
- **Edge Cases:** Ambiguous application names, applications not benefiting from cache, user providing inaccurate information.
**D. Dashboard & Recommendations:**
- **Flow:**
1. Upon login, the user sees the Dashboard.
2. The dashboard displays a summary of their CPU configuration.
3. It lists their analyzed applications, highlighting those that benefit most from V-Cache.
4. For each high-impact application, it shows the recommended core affinity.
5. A prominent call-to-action guides the user on how to apply these settings (linking to a detailed guide).
6. Visualizations (e.g., bar charts using Recharts) show potential performance gains or current setup vs. optimized setup.
- **Edge Cases:** No CPU config saved, no apps analyzed, user has no V-Cache capable CPU.
**E. Settings & Management:**
- **Flow:** Users can edit their CPU configuration, delete analyzed applications, and manage their account details (email, password change, OAuth connections).
- **Edge Cases:** Modifying a configuration that affects many app profiles.
**F. Optimization Guide:**
- **Flow:** A dedicated page providing step-by-step instructions with screenshots on how to manually adjust process/application affinity in Windows Task Manager or relevant AMD software (like Ryzen Master, if applicable for affinity control).
- **Edge Cases:** OS differences (Windows 10/11), variations in user software.
**5. API & DATA FETCHING:**
- **API Routes (App Router):** Primarily use Server Actions for mutations (saving config, creating app profiles) and Server Components for reading data. API routes (`app/api/...`) can be used for specific background tasks or integrations if needed.
- **Data Flow:**
- **CPU Config:** Fetch `cpuConfigs` based on `userId` in Server Components for the Dashboard and 'My Rig' page. Use Server Actions to `POST`/`PUT`/`DELETE` configurations.
- **App Profiles:** Fetch `appProfiles` and related `installedApps` for the 'Analyze Apps' and Dashboard sections. Use Server Actions for creating/updating profiles.
- **Authentication:** Handled by NextAuth.js, providing user data to Server Components and Server Actions via `auth()`.
- **Example Server Action (Save CPU Config):**
```typescript
// src/actions/cpuConfigActions.ts
'use server';
import { db } from '@/db'; // Your Drizzle DB instance
import { cpuConfigs } from '@/db/schema';
import { auth } from '@/auth'; // Your NextAuth instance
import { eq } from 'drizzle-orm';
interface CpuConfigInput {
modelName: string;
coreCount: number;
vCacheCoreCount: number;
totalL3CacheMB?: number;
vCacheL3MB?: number;
isX3D: boolean;
}
export async function saveCpuConfig(data: CpuConfigInput) {
const session = await auth();
if (!session?.user?.id) {
throw new Error('Authentication required');
}
// Check if config exists for user, update or insert
const existingConfig = await db.query.cpuConfigs.findFirst({
where: eq(cpuConfigs.userId, session.user.id)
});
if (existingConfig) {
await db.update(cpuConfigs).set({
...data,
updatedAt: new Date()
}).where(eq(cpuConfigs.userId, session.user.id));
} else {
await db.insert(cpuConfigs).values({
userId: session.user.id,
...data
});
}
// Revalidate relevant cache tags if needed
// revalidatePath('/dashboard');
return { success: true, message: 'CPU configuration saved successfully!' };
}
```
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`src/app/`:**
- **`layout.tsx`:** Root layout (includes Navbar, Footer, global styles).
- **`page.tsx`:** Landing Page (Marketing, value proposition, CTA).
- **`dashboard/`:**
- **`layout.tsx`:** Dashboard nested layout (sidebar/header).
- **`page.tsx`:** Main dashboard view (summary, key recommendations, charts).
- **`my-rig/`:**
- **`page.tsx`:** CPU Configuration form and display.
- **`analyze-apps/`:**
- **`page.tsx`:** Application analysis form/interface.
- **`[appId]/edit.tsx`:** Edit specific app profile (Optional nested route).
- **`optimization-guide/`:**
- **`page.tsx`:** Step-by-step optimization guide.
- **`settings/`:**
- **`page.tsx`:** Account settings page.
- **`auth/`:**
- **`signin/page.tsx`:** Sign in form.
- **`signup/page.tsx`:** Sign up form.
- **`src/components/`:**
- **`ui/`:** (Shared shadcn/ui components: Button, Input, Card, Table, Tabs, Sheet, etc.)
- **`layout/`:** Navbar, Footer, Sidebar, PageWrapper.
- **`dashboard/`:** DashboardHeader, PerformanceChart, RecommendationCard.
- **`cpu/`:** CpuConfigForm, CpuConfigDisplay.
- **`apps/`:** AppProfileForm, AppList, AppListItem, AppAnalysisResult.
- **`common/`:** LoadingSpinner, ErrorMessage, ToastNotification.
- **`auth/`:** SignInForm, SignUpForm, OAuthButtons.
- **State Management:** Use Server Components for data fetching. Utilize Zustand or Context API for UI state within client components (e.g., form state, modal visibility, fetched data caching within the client).
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Design Style:** Modern, Clean, Tech-Focused.
- **Color Palette:**
- Primary: `#4A90E2` (Vibrant Blue)
- Secondary: `#50E3C2` (Teal/Cyan accent)
- Accent/Highlight: `#F5A623` (Orange for CTAs)
- Background: `#F8F9FA` (Light Gray/Off-white)
- Dark Background (optional): `#1A1D21`
- Text (Dark): `#212529` (Near Black)
- Text (Light): `#FFFFFF`
- Error: `#D0021B` (Red)
- **Typography:**:
- Headings: Inter (Variable Font) - Bold, Semi-Bold
- Body Text: Inter (Variable Font) - Regular
- **Layout:**:
- Utilize a consistent grid system (e.g., 12-column).
- Ample whitespace.
- Clear visual hierarchy.
- Sidebar navigation for logged-in users.
- Responsive design principles:
- Mobile-first approach.
- Collapse navigation to a burger menu on smaller screens.
- Ensure tables and forms are usable on all devices.
- **Visual Elements:** Subtle gradients in backgrounds or UI elements, clean icons, possibly subtle data visualization elements.
**8. SAMPLE/MOCK DATA:**
- **`users`:**
- `{ id: 'uuid-user-1', name: 'Alex Gamer', email: 'alex@example.com', image: '...' }
- **`cpuConfigs`:**
- `{ id: 'uuid-cpu-1', userId: 'uuid-user-1', modelName: 'AMD Ryzen 9 7950X3D', coreCount: 16, vCacheCoreCount: 8, totalL3CacheMB: 128, vCacheL3MB: 64, isX3D: true }
- `{ id: 'uuid-cpu-2', userId: 'uuid-user-2', modelName: 'AMD Ryzen 5 5600X', coreCount: 6, vCacheCoreCount: 0, totalL3CacheMB: 32, vCacheL3MB: 0, isX3D: false }
- **`appProfiles`:**
- `{ id: 'uuid-app-1', userId: 'uuid-user-1', appName: 'Cyberpunk 2077', category: 'Gaming', benefitsFromVCache: true, performanceScore: 90, recommendedCoreAffinity: 'Prioritize V-Cache Cores' }
- `{ id: 'uuid-app-2', userId: 'uuid-user-1', appName: 'Adobe Premiere Pro', category: 'Video Editing', benefitsFromVCache: false, performanceScore: 40, recommendedCoreAffinity: 'Balanced' }
- `{ id: 'uuid-app-3', userId: 'uuid-user-2', appName: 'Visual Studio Code', category: 'Development', benefitsFromVCache: false, performanceScore: 20, recommendedCoreAffinity: 'General Use' }
- `{ id: 'uuid-app-4', userId: 'uuid-user-1', appName: 'Starfield', category: 'Gaming', benefitsFromVCache: true, performanceScore: 95, recommendedCoreAffinity: 'Prioritize V-Cache Cores' }
- **`installedApps`:**
- `{ id: 'uuid-inst-1', userId: 'uuid-user-1', appName: 'Cyberpunk 2077', appProfileId: 'uuid-app-1' }
- `{ id: 'uuid-inst-2', userId: 'uuid-user-1', appName: 'Starfield', appProfileId: 'uuid-app-4' }
**9. TURKISH TRANSLATIONS:**
- **App Title:** OptiCache (OptiCache)
- **Sign Up:** Kayıt Ol
- **Login:** Giriş Yap
- **Dashboard:** Kontrol Paneli
- **My Rig:** Sistemim
- **CPU Configuration:** CPU Yapılandırması
- **Analyze Apps:** Uygulamaları Analiz Et
- **Optimization Guide:** Optimizasyon Rehberi
- **Settings:** Ayarlar
- **Save:** Kaydet
- **Cancel:** İptal
- **Recommended:** Önerilen
- **Performance:** Performans
- **Cache Sensitivity:** Önbellek Hassasiyeti
- **Benefits from V-Cache?:** V-Cache'ten Faydalanır mı?
- **Select Category:** Kategori Seçin
- **Gaming:** Oyun
- **Video Editing:** Video Düzenleme
- **Application Name:** Uygulama Adı
- **Add Application:** Uygulama Ekle
- **Loading...:** Yükleniyor...
- **Error:** Hata
- **No data available:** Veri mevcut değil
- **Update Profile:** Profili Güncelle
- **Delete:** Sil
- **V-Cache Cores:** V-Cache Çekirdekleri
- **All Cores:** Tüm Çekirdekler
**10. ANIMATIONS:**
- **Page Transitions:** Subtle fade or slide transitions between pages/sections (e.g., using `Framer Motion` if needed, or CSS transitions).
- **Button Hovers:** Slight scale-up or background color change.
- **Loading States:** Use skeleton loaders or spinners (e.g., from shadcn/ui or custom) for data fetching.
- **Data Updates:** Animate chart data updates or number counters.
- **Hover Effects:** Tooltips on chart data points, subtle zoom/pan on interactive elements.
**11. EDGE CASES & VALIDATIONS:**
- **Authentication:** Robust handling of login/signup errors, session expiry, email verification flows.
- **Data Validation:** Client-side and server-side validation for all form inputs (CPU specs, app names, etc.). Use libraries like `zod` with Drizzle for schema validation.
- **Empty States:** Gracefully handle scenarios with no saved CPU config, no analyzed apps, or no installed apps (display clear messages and CTAs).
- **Error Handling:** Global error boundary and specific error handling for API calls/Server Actions. Display user-friendly error messages (using `react-hot-toast`).
- **Permissions:** If advanced detection is implemented, clearly explain required permissions and handle denials.
- **AMD Driver Interaction:** Acknowledge that direct control might not be possible; focus on providing the best *guidance* for manual user adjustments.
- **Cross-Platform:** Primarily target Windows as it's most common for this user base. Acknowledge potential differences for Linux/macOS if relevant, but focus MVP on Windows.