|
| 1 | +import type { ReviewCycle } from '../../lib/live-task/types'; |
| 2 | + |
| 3 | +const statusColors: Record<string, string> = { |
| 4 | + active: '#22c55e', |
| 5 | + completed: '#6b7280', |
| 6 | + merged: '#3b82f6', |
| 7 | + failed: '#ef4444', |
| 8 | +}; |
| 9 | + |
| 10 | +const phaseLabels: Record<string, string> = { |
| 11 | + selection: 'Selecting', |
| 12 | + research: 'Researching', |
| 13 | + improve: 'Improving', |
| 14 | + pr_created: 'PR Created', |
| 15 | + reporting: 'Reporting', |
| 16 | + merging: 'Merging', |
| 17 | +}; |
| 18 | + |
| 19 | +function timeAgo(dateStr: string): string { |
| 20 | + const diff = Date.now() - new Date(dateStr).getTime(); |
| 21 | + const mins = Math.floor(diff / 60000); |
| 22 | + if (mins < 1) return 'just now'; |
| 23 | + if (mins < 60) return `${mins}m ago`; |
| 24 | + const hours = Math.floor(mins / 60); |
| 25 | + if (hours < 24) return `${hours}h ago`; |
| 26 | + return `${Math.floor(hours / 24)}d ago`; |
| 27 | +} |
| 28 | + |
| 29 | +function duration(start: string, end: string | null): string { |
| 30 | + const endTime = end ? new Date(end).getTime() : Date.now(); |
| 31 | + const diff = endTime - new Date(start).getTime(); |
| 32 | + const mins = Math.floor(diff / 60000); |
| 33 | + const secs = Math.floor((diff % 60000) / 1000); |
| 34 | + if (mins === 0) return `${secs}s`; |
| 35 | + return `${mins}m ${secs}s`; |
| 36 | +} |
| 37 | + |
| 38 | +function shortPath(path: string): string { |
| 39 | + const parts = path.split('/'); |
| 40 | + return parts.slice(-2).join('/'); |
| 41 | +} |
| 42 | + |
| 43 | +interface Props { |
| 44 | + cycles: ReviewCycle[]; |
| 45 | + selectedId: string | null; |
| 46 | + onSelect: (id: string) => void; |
| 47 | +} |
| 48 | + |
| 49 | +export default function CycleTable({ cycles, selectedId, onSelect }: Props) { |
| 50 | + if (cycles.length === 0) { |
| 51 | + return ( |
| 52 | + <div style={{ |
| 53 | + padding: '32px 16px', |
| 54 | + textAlign: 'center', |
| 55 | + color: '#6b7280', |
| 56 | + fontSize: 14, |
| 57 | + fontFamily: 'monospace', |
| 58 | + }}> |
| 59 | + No review cycles yet. The daily scheduled task will create the first one. |
| 60 | + </div> |
| 61 | + ); |
| 62 | + } |
| 63 | + |
| 64 | + return ( |
| 65 | + <div style={{ overflowX: 'auto' }}> |
| 66 | + <table style={{ |
| 67 | + width: '100%', |
| 68 | + borderCollapse: 'collapse', |
| 69 | + fontSize: 13, |
| 70 | + fontFamily: "'Geist Mono', 'JetBrains Mono', monospace", |
| 71 | + }}> |
| 72 | + <thead> |
| 73 | + <tr style={{ borderBottom: '1px solid #2a2a2a' }}> |
| 74 | + {['Status', 'Component', 'Type', 'Phase', 'PR', 'Started', 'Duration'].map(h => ( |
| 75 | + <th key={h} style={{ |
| 76 | + padding: '8px 12px', |
| 77 | + textAlign: 'left', |
| 78 | + color: '#6b7280', |
| 79 | + fontWeight: 500, |
| 80 | + fontSize: 11, |
| 81 | + textTransform: 'uppercase', |
| 82 | + letterSpacing: '0.05em', |
| 83 | + }}>{h}</th> |
| 84 | + ))} |
| 85 | + </tr> |
| 86 | + </thead> |
| 87 | + <tbody> |
| 88 | + {cycles.map(cycle => { |
| 89 | + const isSelected = cycle.id === selectedId; |
| 90 | + const isActive = cycle.status === 'active'; |
| 91 | + return ( |
| 92 | + <tr |
| 93 | + key={cycle.id} |
| 94 | + onClick={() => onSelect(cycle.id)} |
| 95 | + style={{ |
| 96 | + borderBottom: '1px solid #1a1a1a', |
| 97 | + cursor: 'pointer', |
| 98 | + background: isSelected ? '#1a1a2e' : 'transparent', |
| 99 | + borderLeft: isSelected ? '2px solid #3b82f6' : '2px solid transparent', |
| 100 | + transition: 'background 0.15s', |
| 101 | + }} |
| 102 | + onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#111'; }} |
| 103 | + onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }} |
| 104 | + > |
| 105 | + <td style={{ padding: '10px 12px' }}> |
| 106 | + <span style={{ |
| 107 | + display: 'inline-block', |
| 108 | + width: 8, |
| 109 | + height: 8, |
| 110 | + borderRadius: '50%', |
| 111 | + background: statusColors[cycle.status] || '#6b7280', |
| 112 | + animation: isActive ? 'pulse-dot 2s infinite' : 'none', |
| 113 | + }} /> |
| 114 | + <style>{`@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`}</style> |
| 115 | + </td> |
| 116 | + <td style={{ padding: '10px 12px', color: '#e5e7eb' }} title={cycle.component_path}> |
| 117 | + {shortPath(cycle.component_path)} |
| 118 | + </td> |
| 119 | + <td style={{ padding: '10px 12px', color: '#9ca3af' }}> |
| 120 | + {cycle.component_type} |
| 121 | + </td> |
| 122 | + <td style={{ padding: '10px 12px' }}> |
| 123 | + <span style={{ |
| 124 | + padding: '2px 8px', |
| 125 | + borderRadius: 4, |
| 126 | + fontSize: 11, |
| 127 | + background: isActive ? '#1e3a5f' : '#1a1a1a', |
| 128 | + color: isActive ? '#60a5fa' : '#6b7280', |
| 129 | + }}> |
| 130 | + {phaseLabels[cycle.phase] || cycle.phase} |
| 131 | + </span> |
| 132 | + </td> |
| 133 | + <td style={{ padding: '10px 12px' }}> |
| 134 | + {cycle.pr_url && cycle.pr_url.startsWith('https://') ? ( |
| 135 | + <a |
| 136 | + href={cycle.pr_url} |
| 137 | + target="_blank" |
| 138 | + rel="noopener noreferrer" |
| 139 | + onClick={e => e.stopPropagation()} |
| 140 | + style={{ color: '#3b82f6', textDecoration: 'none', fontSize: 12 }} |
| 141 | + > |
| 142 | + #{cycle.pr_number} |
| 143 | + </a> |
| 144 | + ) : ( |
| 145 | + <span style={{ color: '#4b5563' }}>-</span> |
| 146 | + )} |
| 147 | + </td> |
| 148 | + <td style={{ padding: '10px 12px', color: '#6b7280', fontSize: 12 }}> |
| 149 | + {timeAgo(cycle.started_at)} |
| 150 | + </td> |
| 151 | + <td style={{ padding: '10px 12px', color: '#6b7280', fontSize: 12 }}> |
| 152 | + {duration(cycle.started_at, cycle.completed_at)} |
| 153 | + </td> |
| 154 | + </tr> |
| 155 | + ); |
| 156 | + })} |
| 157 | + </tbody> |
| 158 | + </table> |
| 159 | + </div> |
| 160 | + ); |
| 161 | +} |
0 commit comments