Jason Woltje
644f7a9b15
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
- Add /projects/[id] page with tabbed layout: Overview, Tasks, Missions, PRD - Project list page now navigates to detail page on click - MissionTimeline component with status-ordered progression display - TaskStatusSummary filter bar with per-status counts - TaskDetailModal with full task info, tags, PR links, and notes - PrdViewer renders markdown PRD content from project metadata - Add Mission type to shared types.ts - Wire all views to gateway REST API with loading/error states Closes #122 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/cn';
|
|
import type { Mission, MissionStatus } from '@/lib/types';
|
|
|
|
interface MissionTimelineProps {
|
|
missions: Mission[];
|
|
}
|
|
|
|
const statusOrder: MissionStatus[] = ['planning', 'active', 'paused', 'completed', 'failed'];
|
|
|
|
const statusStyles: Record<MissionStatus, { dot: string; label: string; badge: string }> = {
|
|
planning: {
|
|
dot: 'bg-gray-400',
|
|
label: 'text-gray-400',
|
|
badge: 'bg-gray-600/20 text-gray-300',
|
|
},
|
|
active: {
|
|
dot: 'bg-blue-400',
|
|
label: 'text-blue-400',
|
|
badge: 'bg-blue-600/20 text-blue-400',
|
|
},
|
|
paused: {
|
|
dot: 'bg-warning',
|
|
label: 'text-warning',
|
|
badge: 'bg-warning/20 text-warning',
|
|
},
|
|
completed: {
|
|
dot: 'bg-success',
|
|
label: 'text-success',
|
|
badge: 'bg-success/20 text-success',
|
|
},
|
|
failed: {
|
|
dot: 'bg-error',
|
|
label: 'text-error',
|
|
badge: 'bg-error/20 text-error',
|
|
},
|
|
};
|
|
|
|
function sortMissions(missions: Mission[]): Mission[] {
|
|
return [...missions].sort((a, b) => {
|
|
const aIdx = statusOrder.indexOf(a.status);
|
|
const bIdx = statusOrder.indexOf(b.status);
|
|
if (aIdx !== bIdx) return aIdx - bIdx;
|
|
return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
|
|
});
|
|
}
|
|
|
|
export function MissionTimeline({ missions }: MissionTimelineProps): React.ReactElement {
|
|
if (missions.length === 0) {
|
|
return (
|
|
<div className="py-6 text-center">
|
|
<p className="text-sm text-text-muted">No missions for this project</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sorted = sortMissions(missions);
|
|
|
|
return (
|
|
<ol className="relative space-y-0">
|
|
{sorted.map((mission, idx) => {
|
|
const styles = statusStyles[mission.status] ?? statusStyles.planning;
|
|
const isLast = idx === sorted.length - 1;
|
|
return (
|
|
<li key={mission.id} className="relative flex gap-4 pb-6 last:pb-0">
|
|
{/* Vertical line */}
|
|
{!isLast && <div className="absolute left-2.5 top-5 h-full w-px bg-surface-border" />}
|
|
{/* Status dot */}
|
|
<div
|
|
className={cn('mt-1 h-5 w-5 shrink-0 rounded-full border-2 border-bg', styles.dot)}
|
|
/>
|
|
<div className="flex-1 rounded-lg border border-surface-border bg-surface-card p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<span className="text-sm font-medium text-text-primary">{mission.name}</span>
|
|
<span className={cn('shrink-0 rounded-full px-2 py-0.5 text-xs', styles.badge)}>
|
|
{mission.status}
|
|
</span>
|
|
</div>
|
|
{mission.description && (
|
|
<p className="mt-1 text-xs text-text-muted">{mission.description}</p>
|
|
)}
|
|
<p className="mt-2 text-xs text-text-muted">
|
|
Created {new Date(mission.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
);
|
|
}
|