Feature: Add demo/mock PR data for development mode

## Feature Request

Add mock/demo PR data that developers can use in development mode to test features and UI without needing real GitHub PRs or API access.

## Description

When running the application in development mode, it would be helpful to have pre-populated demo PRs with various states, comments, deployments, and other data to test all features of the application without requiring a real GitHub repository or API tokens.

## Core Features

### 1. Mock Data Structure

#### Sample PRs with Different States
```javascript
const mockPRs = [
{
id: 'demo-pr-1',
number: 1337,
title: '✨ Add new authentication system',
state: 'open',
draft: false,
repository: 'demo-org/sample-repo',

author: {
login: 'demo-developer',
avatar: 'https://i.pravatar.cc/150?img=1',
type: 'User'
},

description: `
## Summary
This PR implements a new OAuth 2.0 authentication system with support for multiple providers.

## Changes
- Added OAuth provider abstraction
- Implemented Google, GitHub, and Microsoft providers
- Added session management with Redis
- Created authentication middleware
- Added comprehensive test suite

## Testing
- [x] Unit tests pass
- [x] Integration tests pass
- [x] Manual testing completed
- [x] Security review completed

## Screenshots
`,

labels: [
{ name: 'enhancement', color: '84b6eb' },
{ name: 'security', color: 'ee0000' },
{ name: 'needs-review', color: 'fbca04' }
],

milestone: {
title: 'v2.0.0',
dueDate: '2024-02-01'
},

checks: {
status: 'success',
conclusion: 'success',
checks: [
{ name: 'Build', status: 'success', duration: '2m 15s' },
{ name: 'Tests', status: 'success', duration: '5m 32s' },
{ name: 'Lint', status: 'success', duration: '45s' },
{ name: 'Security Scan', status: 'success', duration: '1m 20s' },
{ name: 'Deploy Preview', status: 'success', duration: '3m 10s' }
]
},

reviews: [
{
author: 'senior-reviewer',
state: 'APPROVED',
body: 'LGTM! Great implementation.',
submittedAt: '2024-01-15T10:30:00Z'
},
{
author: 'security-team',
state: 'APPROVED',
body: 'Security review passed.',
submittedAt: '2024-01-15T11:00:00Z'
}
],

files: {
changed: 23,
additions: 1245,
deletions: 89,
files: [
{ filename: 'src/auth/oauth.js', additions: 245, deletions: 0 },
{ filename: 'src/auth/providers/google.js', additions: 156, deletions: 0 },
{ filename: 'src/middleware/auth.js', additions: 89, deletions: 23 },
{ filename: 'tests/auth.test.js', additions: 456, deletions: 12 }
]
},

deployments: [
{
id: 'deploy-1',
environment: 'preview',
state: 'success',
url: 'https://pr-1337-demo.vercel.app',
creator: 'vercel[bot]',
createdAt: '2024-01-15T09:45:00Z'
}
],

timeline: [
{
type: 'created',
actor: 'demo-developer',
createdAt: '2024-01-14T09:00:00Z'
},
{
type: 'labeled',
label: 'enhancement',
actor: 'demo-developer',
createdAt: '2024-01-14T09:05:00Z'
},
{
type: 'review_requested',
requestedReviewer: 'senior-reviewer',
actor: 'demo-developer',
createdAt: '2024-01-14T09:10:00Z'
}
]
},

{
id: 'demo-pr-2',
number: 1338,
title: '🐛 Fix memory leak in data processing',
state: 'open',
draft: false,
repository: 'demo-org/sample-repo',

author: {
login: 'bug-fixer',
avatar: 'https://i.pravatar.cc/150?img=2'
},

labels: [
{ name: 'bug', color: 'd73a4a' },
{ name: 'critical', color: 'b60205' },
{ name: 'needs-review', color: 'fbca04' }
],

checks: {
status: 'failure',
conclusion: 'failure',
checks: [
{ name: 'Build', status: 'success' },
{ name: 'Tests', status: 'failure', error: 'Test suite failed' },
{ name: 'Lint', status: 'success' }
]
},

reviews: [
{
author: 'code-reviewer',
state: 'CHANGES_REQUESTED',
body: 'Please fix the failing tests and add more test coverage.',
submittedAt: '2024-01-15T14:00:00Z'
}
],

mergeable: false,
mergeableState: 'blocked',

comments: [
{
id: 'comment-1',
author: 'team-lead',
body: 'This is a critical fix. Can we prioritize this?',
createdAt: '2024-01-15T10:00:00Z'
},
{
id: 'comment-2',
author: 'bug-fixer',
body: 'Working on fixing the tests now.',
createdAt: '2024-01-15T14:30:00Z'
}
]
},

{
id: 'demo-pr-3',
number: 1339,
title: '📝 [Draft] Refactor component architecture',
state: 'open',
draft: true,
repository: 'demo-org/sample-repo',

author: {
login: 'architect',
avatar: 'https://i.pravatar.cc/150?img=3'
},

labels: [
{ name: 'refactor', color: '5319e7' },
{ name: 'work-in-progress', color: 'ededed' }
],

description: `
## 🚧 Work in Progress

Refactoring the component architecture to improve maintainability and performance.

### TODO:
- [ ] Migrate to composition pattern
- [ ] Add proper TypeScript types
- [ ] Update documentation
- [ ] Add migration guide
- [ ] Performance benchmarks
`,

files: {
changed: 45,
additions: 2341,
deletions: 1876
}
},

{
id: 'demo-pr-4',
number: 1340,
title: '🔀 Merge conflicts example',
state: 'open',
repository: 'demo-org/sample-repo',

mergeable: false,
mergeableState: 'dirty',

labels: [
{ name: 'has-conflicts', color: 'e11d21' }
],

statusMessage: '⚠️ This branch has conflicts that must be resolved',

conflictingFiles: [
'src/index.js',
'package.json',
'README.md'
]
}
];
```

### 2. Mock Comments and Activity

```javascript
const mockComments = {
'demo-pr-1': [
{
id: 'comment-demo-1',
type: 'issue_comment',
author: {
login: 'product-manager',
avatar: 'https://i.pravatar.cc/150?img=4'
},
body: `Great work on this! A few questions:

1. How does this handle session expiry?
2. Can we add support for SAML providers in the future?
3. What's the migration path for existing users?`,
createdAt: '2024-01-14T15:00:00Z',
reactions: {
'+1': 3,
'heart': 2
}
},

{
id: 'comment-demo-2',
type: 'code_review',
path: 'src/auth/oauth.js',
line: 42,
author: {
login: 'senior-dev',
avatar: 'https://i.pravatar.cc/150?img=5'
},
body: `\`\`\`suggestion
// Consider using a more secure token generation method
const token = crypto.randomBytes(32).toString('hex');
\`\`\``,
createdAt: '2024-01-14T16:00:00Z'
},

{
id: 'comment-demo-3',
type: 'deployment',
author: {
login: 'vercel[bot]',
avatar: 'https://i.pravatar.cc/150?img=65'
},
body: `✅ **Successfully deployed to preview**

🔗 [Preview URL](https://pr-1337-demo.vercel.app)
📊 Lighthouse Scores: Performance: 98 | Accessibility: 100 | SEO: 100

[View deployment](https://vercel.com/demo/deployments/xxx) | [View logs](https://vercel.com/demo/logs/xxx)`,
createdAt: '2024-01-15T09:45:00Z'
}
]
};
```

### 3. Mock Data Generator

```javascript
class MockDataGenerator {
constructor() {
this.faker = require('faker');
}

generatePR(options = {}) {
const defaults = {
state: this.randomChoice(['open', 'closed', 'merged']),
draft: Math.random() > 0.8,
hasConflicts: Math.random() > 0.9,
checksPass: Math.random() > 0.3,
hasDeployment: Math.random() > 0.5,
reviewState: this.randomChoice(['pending', 'approved', 'changes_requested']),
commentsCount: Math.floor(Math.random() * 20),
filesChanged: Math.floor(Math.random() * 50) + 1
};

const config = { ...defaults, ...options };

return {
id: `generated-pr-${this.faker.datatype.uuid()}`,
number: this.faker.datatype.number({ min: 1000, max: 9999 }),
title: this.generateTitle(config),
state: config.state,
draft: config.draft,
author: this.generateUser(),
repository: `${this.faker.company.companyName()}/${this.faker.hacker.noun()}`,
description: this.generateDescription(config),
labels: this.generateLabels(config),
checks: this.generateChecks(config),
reviews: this.generateReviews(config),
files: this.generateFiles(config),
deployments: config.hasDeployment ? this.generateDeployments() : [],
comments: this.generateComments(config.commentsCount),
createdAt: this.faker.date.recent(30),
updatedAt: this.faker.date.recent(1)
};
}

generateBulkPRs(count = 10) {
const prs = [];

// Generate diverse set of PRs
const templates = [
{ state: 'open', draft: false, checksPass: true, reviewState: 'approved' },
{ state: 'open', draft: false, checksPass: false, reviewState: 'changes_requested' },
{ state: 'open', draft: true, checksPass: false },
{ state: 'open', hasConflicts: true },
{ state: 'closed', checksPass: true },
{ state: 'merged', checksPass: true, reviewState: 'approved' }
];

for (let i = 0; i < count; i++) {
const template = templates[i % templates.length];
prs.push(this.generatePR(template));
}

return prs;
}
}
```

### 4. Dev Mode Configuration

```javascript
class DevModeConfig {
static config = {
enabled: process.env.NODE_ENV === 'development',

features: {
mockData: true,
mockAPI: true,
slowNetwork: false, // Simulate slow network
errorSimulation: false, // Random errors
offlineMode: false
},

data: {
prCount: 10,
issueCount: 20,
repoCount: 5,
userCount: 15,
activityDays: 30
},

scenarios: {
'happy-path': {
description: 'Everything working perfectly',
prs: ['all-checks-pass', 'approved', 'ready-to-merge']
},
'review-needed': {
description: 'Multiple PRs needing review',
prs: ['pending-review', 'changes-requested', 'discussion']
},
'chaos-mode': {
description: 'Everything is on fire',
prs: ['merge-conflicts', 'failing-tests', 'blocked', 'security-issues']
},
'real-world': {
description: 'Realistic mix of PR states',
prs: 'random-mix'
}
},

persistence: {
saveChanges: true, // Persist mock data changes
resetOnReload: false,
storageKey: 'bottleneck-dev-data'
}
};
}
```

### 5. Mock API Endpoints

```javascript
class MockAPIServer {
setupEndpoints(app) {
// Mock GitHub API endpoints
app.get('/api/mock/repos/:owner/:repo/pulls', (req, res) => {
res.json(this.getMockPRs(req.params));
});

app.get('/api/mock/repos/:owner/:repo/pulls/:number', (req, res) => {
res.json(this.getMockPR(req.params.number));
});

app.get('/api/mock/repos/:owner/:repo/pulls/:number/comments', (req, res) => {
res.json(this.getMockComments(req.params.number));
});

app.post('/api/mock/repos/:owner/:repo/pulls/:number/reviews', (req, res) => {
const review = this.createMockReview(req.body);
res.json(review);
});

// Simulate real-time updates
app.ws('/api/mock/events', (ws) => {
this.simulateRealtimeEvents(ws);
});
}

simulateRealtimeEvents(ws) {
setInterval(() => {
const events = [
{ type: 'pr_updated', data: this.randomPRUpdate() },
{ type: 'new_comment', data: this.randomComment() },
{ type: 'status_change', data: this.randomStatusChange() },
{ type: 'deployment', data: this.randomDeployment() }
];

const event = events[Math.floor(Math.random() * events.length)];
ws.send(JSON.stringify(event));
}, 5000); // Send random event every 5 seconds
}
}
```

### 6. Dev Mode UI

```javascript
class DevModeUI {
render() {
return `

### 7. Interactive Demo Mode

```javascript
class InteractiveDemo {
constructor() {
this.steps = [
{
title: 'Welcome to Bottleneck',
action: () => this.highlightElement('.app-header'),
description: 'This is your PR review dashboard'
},
{
title: 'Active Pull Requests',
action: () => this.showPRList(),
description: 'See all your open PRs in one place'
},
{
title: 'Review a PR',
action: () => this.openDemoPR(),
description: 'Click on a PR to see details and comments'
},
{
title: 'Check Deployments',
action: () => this.showDeployments(),
description: 'Preview deployments are shown here'
}
];
}

startTour() {
this.currentStep = 0;
this.showStep(this.steps[0]);
}
}
```

## Benefits

- **Easy Development**: No need for real GitHub repos or API tokens
- **Feature Testing**: Test all features without external dependencies
- **Edge Cases**: Easily test edge cases and error states
- **Onboarding**: Great for demos and new developer onboarding
- **Offline Development**: Work without internet connection
- **Consistent Data**: Reproducible test scenarios

## Acceptance Criteria

- [ ] Mock PR data loads in dev mode
- [ ] Different PR states are represented
- [ ] Comments and reviews are displayed
- [ ] Deployments show with mock URLs
- [ ] Status checks show various states
- [ ] Data persists during development session
- [ ] Can generate new mock data on demand
- [ ] Network simulation options work
- [ ] Dev mode banner is clearly visible
- [ ] Can switch between scenarios
- [ ] Mock data is realistic and diverse
- [ ] Interactive demo mode works
- [ ] No real API calls in dev mode
- [ ] Performance is good with mock data

🤖 Generated with [Claude Code](https://claude.ai/code)

No repository files or tests are named. Start by locating the development-mode configuration and existing GitHub API integration, then compare their entry points with the proposed MockDataGenerator, DevModeConfig, and MockAPIServer classes. Done means development mode can exercise the listed PR states, comments, checks, reviews, deployments, and mock API behavior without real GitHub access.

Written by the indexing model from the issue text.