Feature: Highlight preview deployment links and include deployments in comments

## Feature Request

Improve visibility of preview deployment links (e.g., Vercel, Netlify) by displaying them prominently as a list ordered by recency, and include deployment events in the comments timeline.

## Description

Preview deployments are currently difficult to find and track. They should be prominently displayed and integrated into the PR/branch view, making it easy for reviewers and developers to access deployed previews. Additionally, deployment events should appear in the comments list for better visibility of the deployment history.

## Core Features

### 1. Preview Deployments Section

#### Dedicated Deployment Links Panel
```
┌──────────────────────────────────────────────────────┐
│ 🚀 Preview Deployments │
├──────────────────────────────────────────────────────┤
│ │
│ ✅ Latest (2 min ago) │
│ 🔗 https://pr-123-abc123.vercel.app │
│ └─ Commit: ae9fd64 - Fix authentication flow │
│ │
│ ✅ Previous (1 hour ago) │
│ 🔗 https://pr-123-xyz789.vercel.app │
│ └─ Commit: 3d577c7 - Add UI and logic for add-orgs │
│ │
│ ⏳ Building (5 min ago) │
│ └─ Commit: 1b9a8f7 - Update review page │
│ │
│ ❌ Failed (3 hours ago) │
│ └─ Commit: 2174ad7 - Preserve drafts on submission │
│ View logs ↗ │
│ │
│ [View all deployments ↓] │
└──────────────────────────────────────────────────────┘
```

### 2. Deployment Data Structure

```javascript
interface Deployment {
id: string;
url: string;
status: 'success' | 'pending' | 'failed' | 'cancelled';
provider: 'vercel' | 'netlify' | 'heroku' | 'aws' | 'custom';
environment: 'preview' | 'staging' | 'production';

commit: {
sha: string;
message: string;
author: string;
};

timestamps: {
created: Date;
ready: Date;
duration: number;
};

metadata: {
branch: string;
prNumber?: number;
buildId: string;
logs?: string;
};

checks: {
lighthouse?: LighthouseScore;
accessibility?: A11yScore;
bundleSize?: BundleMetrics;
};
}
```

### 3. Integration with Comments Timeline

#### Deployment Events in Comments
```
┌──────────────────────────────────────────────────────┐
│ 💬 Comments & Activity │
├──────────────────────────────────────────────────────┤
│ │
│ 👤 @john_doe • 2 hours ago │
│ "Looks good! Just one small suggestion..." │
│ │
│ 🚀 Vercel Bot • 1 hour ago │
│ ┌─────────────────────────────────────────────┐ │
│ │ ✅ Successfully deployed to preview │ │
│ │ 🔗 https://pr-123-abc123.vercel.app │ │
│ │ 📊 Performance: 98 | Accessibility: 100 │ │
│ │ [View deployment] [View build logs] │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 🤖 GitHub Actions • 45 min ago │
│ ✅ All checks passed │
│ │
│ 🚀 Netlify Bot • 30 min ago │
│ ┌─────────────────────────────────────────────┐ │
│ │ ✅ Deploy preview ready! │ │
│ │ 🔗 https://deploy-preview-123.netlify.app │ │
│ │ 📝 Changed 5 files │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 👤 @sarah_smith • 15 min ago │
│ "Tested on the preview, works perfectly!" │
│ │
└──────────────────────────────────────────────────────┘
```

### 4. Deployment Providers Support

#### Multi-Provider Detection
```javascript
class DeploymentDetector {
providers = {
vercel: {
pattern: /vercel\.app|now\.sh/,
apiEndpoint: 'https://api.vercel.com/v2/deployments',
webhookEvents: ['deployment', 'deployment_status'],
parser: this.parseVercelDeployment
},

netlify: {
pattern: /netlify\.app|netlify\.com/,
apiEndpoint: 'https://api.netlify.com/api/v1/deploys',
webhookEvents: ['deploy_created', 'deploy_succeeded'],
parser: this.parseNetlifyDeployment
},

heroku: {
pattern: /herokuapp\.com/,
apiEndpoint: 'https://api.heroku.com/apps/{app}/releases',
parser: this.parseHerokuDeployment
},

aws: {
pattern: /amplifyapp\.com|cloudfront\.net/,
parser: this.parseAWSDeployment
},

custom: {
// User-defined deployment patterns
patterns: [],
parser: this.parseCustomDeployment
}
};

async detectDeployments(pr) {
const deployments = [];

// Check PR comments for deployment URLs
deployments.push(...await this.scanComments(pr));

// Check status checks
deployments.push(...await this.scanStatusChecks(pr));

// Check webhooks
deployments.push(...await this.scanWebhooks(pr));

return this.deduplicateAndSort(deployments);
}
}
```

### 5. Enhanced Deployment Display

#### Rich Deployment Cards
```javascript
class DeploymentCard {
render(deployment) {
return {
header: {
status: deployment.status,
provider: deployment.provider,
timestamp: this.formatRelativeTime(deployment.created),
environment: deployment.environment
},

body: {
url: deployment.url,
commit: {
sha: deployment.commit.sha.substring(0, 7),
message: deployment.commit.message,
author: deployment.commit.author
},

metrics: {
buildTime: deployment.duration,
performance: deployment.checks?.lighthouse,
bundleSize: deployment.checks?.bundleSize,
accessibility: deployment.checks?.accessibility
}
},

actions: [
{ label: 'Open Preview', action: () => window.open(deployment.url) },
{ label: 'View Logs', action: () => this.showLogs(deployment) },
{ label: 'Copy URL', action: () => this.copyUrl(deployment.url) },
{ label: 'QR Code', action: () => this.showQRCode(deployment.url) },
{ label: 'Compare', action: () => this.compareDeployments(deployment) }
],

expandable: {
details: this.getDeploymentDetails(deployment),
logs: this.getDeploymentLogs(deployment)
}
};
}
}
```

### 6. Deployment Tracking & History

#### Historical View
```javascript
class DeploymentHistory {
async getHistory(pr) {
return {
deployments: await this.fetchAllDeployments(pr),

timeline: this.createTimeline(),

statistics: {
total: 24,
successful: 20,
failed: 3,
pending: 1,
avgBuildTime: '2m 30s',
successRate: '83%'
},

trends: {
buildTimeChart: this.generateBuildTimeChart(),
successRateChart: this.generateSuccessChart(),
frequencyChart: this.generateFrequencyChart()
}
};
}
}
```

### 7. Smart Features

#### Deployment Intelligence
```javascript
class DeploymentIntelligence {
features = {
// Auto-refresh when new deployment is ready
autoRefresh: {
enabled: true,
showNotification: true,
refreshInterval: 30000
},

// Compare deployments side-by-side
comparison: {
visualDiff: true,
performanceComparison: true,
bundleSizeComparison: true
},

// Deployment notifications
notifications: {
onSuccess: true,
onFailure: true,
onReady: true,
channels: ['desktop', 'slack', 'email']
},

// Branch preview management
branchPreviews: {
autoDeploy: true,
cleanup: 'on_merge',
maxConcurrent: 5
}
};
}
```

### 8. UI Components

#### Deployment List Component
```typescript
interface DeploymentListProps {
deployments: Deployment[];

display: {
mode: 'compact' | 'detailed' | 'cards';
sortBy: 'recency' | 'status' | 'environment';
groupBy?: 'provider' | 'date' | 'status';
limit?: number;
showFailed: boolean;
};

filters: {
providers?: string[];
statuses?: string[];
branches?: string[];
dateRange?: DateRange;
};

actions: {
onOpen: (deployment: Deployment) => void;
onCompare: (deployments: Deployment[]) => void;
onDelete: (deployment: Deployment) => void;
onRetry: (deployment: Deployment) => void;
};
}
```

### 9. Configuration

```json
{
"deployments": {
"display": {
"showInComments": true,
"showSeparatePanel": true,
"position": "sidebar", // or "top", "bottom"
"maxVisible": 5,
"orderBy": "recency",
"highlightLatest": true
},

"providers": {
"vercel": {
"enabled": true,
"token": "VERCEL_TOKEN",
"teamId": "team_xxx"
},
"netlify": {
"enabled": true,
"token": "NETLIFY_TOKEN"
},
"custom": {
"patterns": ["*.preview.example.com"],
"webhook": "https://api.example.com/deployments"
}
},

"features": {
"autoRefresh": true,
"showMetrics": true,
"enableComparison": true,
"qrCodes": true,
"mobilePreview": true
},

"notifications": {
"deploymentReady": true,
"deploymentFailed": true,
"showToast": true,
"playSound": false
}
}
}
```

### 10. Mobile Preview Feature

#### Device Preview Frame
```javascript
class MobilePreview {
showPreview(deploymentUrl) {
return {
devices: [
{ name: 'iPhone 14', width: 390, height: 844 },
{ name: 'iPad', width: 768, height: 1024 },
{ name: 'Android', width: 360, height: 800 }
],

features: {
rotate: true,
zoom: true,
networkThrottle: true,
touchSimulation: true
},

actions: {
shareQR: () => this.generateQRCode(deploymentUrl),
openInNewTab: () => window.open(deploymentUrl),
copyUrl: () => navigator.clipboard.writeText(deploymentUrl)
}
};
}
}
```

## Benefits

- **Improved Visibility**: Preview links are immediately visible
- **Better Testing**: Easy access to all deployments for testing
- **Historical Context**: See deployment history in comments
- **Faster Reviews**: Reviewers can quickly access previews
- **Debugging**: Failed deployments are clearly shown with logs
- **Multi-Provider**: Works with any deployment service

## Acceptance Criteria

- [ ] Preview deployments shown as ordered list by recency
- [ ] Latest deployment is highlighted/prominent
- [ ] Deployment events appear in comments timeline
- [ ] Multiple deployment providers are supported
- [ ] Failed deployments show error state and logs
- [ ] Deployment URLs are clickable
- [ ] Copy URL functionality works
- [ ] QR code generation for mobile testing
- [ ] Auto-refresh when new deployments arrive
- [ ] Historical deployments are accessible
- [ ] Performance metrics displayed (if available)
- [ ] Mobile preview frame works
- [ ] Configuration options persist
- [ ] Responsive design for all screen sizes

## Future Enhancements

- Lighthouse score integration
- Visual regression testing links
- Deployment rollback functionality
- Cost tracking for deployments
- Environment variable management
- Database migration status
- API endpoint testing from preview
- Collaborative review sessions on preview

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

No repository files, tests, or entry points are identified. Start by locating the PR/branch view, comments timeline, and existing deployment or status-check integrations; define the smallest supported provider flow before implementing the requested panel, timeline events, and acceptance criteria.

Written by the indexing model from the issue text.