feat(profile): add API Keys section to profile navigation and migrate

redirects from client-side to server-side to improve reliability,
security, and alignment with API keys flow.

🤖 Generated with Codebuff Co-Authored-By: Codebuff
<noreply@codebuff.com>

Author: brandonkachen

security-page-restructure-plan.md

@@ -0,0 +1,50 @@
+# Security Page Restructure Plan
+
+## Overview
+Split the current security page into two separate pages:
+1. **API Keys page** (`/api-keys`) - for Personal Access Token (PAT) management
+2. **Profile page** (`/profile`) - with a security section for active sessions
+
+## Changes Required
+
+### 1. Create API Keys Page (`/api-keys`)
+- Move PAT creation, listing, and revocation functionality from security page
+- Rename all "Personal Access Token" to "API Key" in UI text
+- Keep existing functionality but with updated terminology
+- Update page title, descriptions, and button text
+
+### 2. Create Profile Page (`/profile`) 
+- Create new profile page with tabbed interface:
+  - **Usage tab** - move current usage page content (usage display, credit management)
+  - **Security tab** - move active sessions management (web/CLI tabs) from security page
+  - **Referrals tab** - move referral functionality from separate page
+- Keep all existing functionality from moved pages
+- Profile tab and Affiliate tab to be added later
+
+### 3. Update Navigation
+- Update user dropdown: replace "Security", "Usage", and "Referrals" with single "Profile" link
+- Add "API Keys" link to user dropdown  
+- Update any internal links that reference `/security`, `/usage`, `/referrals`, or `/affiliates`
+- Consider keeping separate referrals/affiliates pages that redirect to profile tabs
+
+### 4. Update API Endpoints (Text Only)
+- Update log messages in API routes to use "API Key" instead of "Personal Access Token"
+- Keep all API functionality unchanged, only update user-facing text
+
+### 5. File Changes
+- `web/src/app/api-keys/page.tsx` - new API keys page
+- `web/src/app/profile/page.tsx` - new profile page with usage and security tabs
+- `web/src/components/navbar/user-dropdown.tsx` - update navigation links
+- `web/src/app/api/api-keys/route.ts` - update log messages to use "API Key"
+- Remove `web/src/app/security/page.tsx` (or redirect to profile)
+- Update `web/src/app/usage/page.tsx` to redirect to profile page usage tab
+
+## Implementation Steps
+1. Create new API keys page with PAT functionality
+2. Create new profile page with sessions functionality  
+2. Create new profile page with usage and security tabs
+3. Update user dropdown navigation
+4. Update API route log messages
+5. Update usage page to redirect to profile
+6. Test both pages work correctly
+7. Remove old security page

web/next.config.mjs

@@ -96,6 +96,21 @@ const nextConfig = {
         permanent: false,
         destination: `${process.env.NEXT_PUBLIC_CODEBUFF_APP_URL}/:path*`,
       },
+      {
+        source: '/api-keys',
+        destination: '/profile?tab=api-keys',
+        permanent: true,
+      },
+      {
+        source: '/usage',
+        destination: '/profile?tab=usage',
+        permanent: true,
+      },
+      {
+        source: '/referrals',
+        destination: '/profile?tab=referrals',
+        permanent: true,
+      },
       {
         source: '/discord',
         destination: 'https://discord.gg/mcWTGjgTj3',

web/src/app/api/api-keys/route.ts

@@ -43,13 +43,13 @@ export async function GET(request: NextRequest) {
 
     logger.info(
       { userId, tokenCount: tokens.length },
-      'Successfully retrieved Personal Access Tokens'
+      'Successfully retrieved API Keys'
     )
     return NextResponse.json({ tokens }, { status: 200 })
   } catch (error) {
-    logger.error({ error, userId }, 'Failed to retrieve Personal Access Tokens')
+    logger.error({ error, userId }, 'Failed to retrieve API Keys')
     return NextResponse.json(
-      { error: 'Failed to retrieve Personal Access Tokens' },
+      { error: 'Failed to retrieve API Keys' },
       { status: 500 }
     )
   }
@@ -98,21 +98,21 @@ export async function POST(request: NextRequest) {
 
     logger.info(
       { userId, tokenDisplay, expiresInDays },
-      'Successfully created Personal Access Token'
+      'Successfully created API Key'
     )
 
     return NextResponse.json(
       {
         token: sessionToken, // Return full token with prefix already baked in
         expires: expires.toISOString(),
-        message: 'Personal Access Token created successfully',
+        message: 'API Key created successfully',
       },
       { status: 201 }
     )
   } catch (error) {
-    logger.error({ error, userId }, 'Failed to create Personal Access Token')
+    logger.error({ error, userId }, 'Failed to create API Key')
     return NextResponse.json(
-      { error: 'Failed to create Personal Access Token' },
+      { error: 'Failed to create API Key' },
       { status: 500 }
     )
   }