feat(web): project detail views — missions, tasks, PRD viewer (#122) (#140)
Some checks failed
ci/woodpecker/push/ci Pipeline failed
Some checks failed
ci/woodpecker/push/ci Pipeline failed
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #140.
This commit is contained in:
338
apps/web/src/app/(dashboard)/projects/[id]/page.tsx
Normal file
338
apps/web/src/app/(dashboard)/projects/[id]/page.tsx
Normal file
@@ -0,0 +1,338 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { api } from '@/lib/api';
|
||||
import { cn } from '@/lib/cn';
|
||||
import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
|
||||
import { MissionTimeline } from '@/components/projects/mission-timeline';
|
||||
import { PrdViewer } from '@/components/projects/prd-viewer';
|
||||
import { TaskDetailModal } from '@/components/tasks/task-detail-modal';
|
||||
import { TaskListView } from '@/components/tasks/task-list-view';
|
||||
import { TaskStatusSummary } from '@/components/tasks/task-status-summary';
|
||||
|
||||
type Tab = 'overview' | 'tasks' | 'missions' | 'prd';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
active: 'bg-success/20 text-success',
|
||||
paused: 'bg-warning/20 text-warning',
|
||||
completed: 'bg-blue-600/20 text-blue-400',
|
||||
archived: 'bg-gray-600/20 text-gray-400',
|
||||
};
|
||||
|
||||
interface TabButtonProps {
|
||||
id: Tab;
|
||||
label: string;
|
||||
activeTab: Tab;
|
||||
onClick: (tab: Tab) => void;
|
||||
}
|
||||
|
||||
function TabButton({ id, label, activeTab, onClick }: TabButtonProps): React.ReactElement {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onClick(id)}
|
||||
className={cn(
|
||||
'border-b-2 px-4 py-2 text-sm transition-colors',
|
||||
activeTab === id
|
||||
? 'border-text-primary text-text-primary'
|
||||
: 'border-transparent text-text-muted hover:text-text-secondary',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProjectDetailPage(): React.ReactElement {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const id = typeof params['id'] === 'string' ? params['id'] : '';
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [missions, setMissions] = useState<Mission[]>([]);
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
||||
const [taskFilter, setTaskFilter] = useState<TaskStatus | 'all'>('all');
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
Promise.all([
|
||||
api<Project>(`/api/projects/${id}`),
|
||||
api<Mission[]>('/api/missions').catch(() => [] as Mission[]),
|
||||
api<Task[]>(`/api/tasks?projectId=${id}`).catch(() => [] as Task[]),
|
||||
])
|
||||
.then(([proj, allMissions, tks]) => {
|
||||
setProject(proj);
|
||||
setMissions(allMissions.filter((m) => m.projectId === id));
|
||||
setTasks(tks);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
setError(err.message ?? 'Failed to load project');
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const handleTaskClick = useCallback((task: Task) => {
|
||||
setSelectedTask(task);
|
||||
}, []);
|
||||
|
||||
const handleCloseTaskModal = useCallback(() => {
|
||||
setSelectedTask(null);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<p className="text-sm text-text-muted">Loading project...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !project) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<p className="text-sm text-error">{error ?? 'Project not found'}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/projects')}
|
||||
className="mt-4 text-sm text-text-muted underline hover:text-text-secondary"
|
||||
>
|
||||
Back to projects
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const filteredTasks = taskFilter === 'all' ? tasks : tasks.filter((t) => t.status === taskFilter);
|
||||
|
||||
const prdContent = getPrdContent(project);
|
||||
const hasPrd = Boolean(prdContent);
|
||||
|
||||
const tabs: { id: Tab; label: string }[] = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'tasks', label: `Tasks (${tasks.length})` },
|
||||
{ id: 'missions', label: `Missions (${missions.length})` },
|
||||
...(hasPrd ? [{ id: 'prd' as Tab, label: 'PRD' }] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<nav className="mb-4 flex items-center gap-2 text-sm text-text-muted">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push('/projects')}
|
||||
className="hover:text-text-secondary"
|
||||
>
|
||||
Projects
|
||||
</button>
|
||||
<span>/</span>
|
||||
<span className="text-text-primary">{project.name}</span>
|
||||
</nav>
|
||||
|
||||
{/* Project header */}
|
||||
<div className="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-semibold text-text-primary">{project.name}</h1>
|
||||
<span
|
||||
className={cn(
|
||||
'rounded-full px-2 py-0.5 text-xs',
|
||||
statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
|
||||
)}
|
||||
>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
{project.description && (
|
||||
<p className="mt-1 text-sm text-text-muted">{project.description}</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-text-muted">
|
||||
Created {new Date(project.createdAt).toLocaleDateString()} · Updated{' '}
|
||||
{new Date(project.updatedAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<StatCard label="Tasks" value={String(tasks.length)} />
|
||||
<StatCard
|
||||
label="Done"
|
||||
value={String(tasks.filter((t) => t.status === 'done').length)}
|
||||
valueClass="text-success"
|
||||
/>
|
||||
<StatCard
|
||||
label="In Progress"
|
||||
value={String(tasks.filter((t) => t.status === 'in-progress').length)}
|
||||
valueClass="text-blue-400"
|
||||
/>
|
||||
<StatCard
|
||||
label="Blocked"
|
||||
value={String(tasks.filter((t) => t.status === 'blocked').length)}
|
||||
valueClass={tasks.some((t) => t.status === 'blocked') ? 'text-error' : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-6 flex gap-0 border-b border-surface-border">
|
||||
{tabs.map((tab) => (
|
||||
<TabButton
|
||||
key={tab.id}
|
||||
id={tab.id}
|
||||
label={tab.label}
|
||||
activeTab={activeTab}
|
||||
onClick={setActiveTab}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
{activeTab === 'overview' && (
|
||||
<OverviewTab project={project} missions={missions} tasks={tasks} />
|
||||
)}
|
||||
|
||||
{activeTab === 'tasks' && (
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<TaskStatusSummary
|
||||
tasks={tasks}
|
||||
activeFilter={taskFilter}
|
||||
onFilterChange={setTaskFilter}
|
||||
/>
|
||||
</div>
|
||||
<TaskListView tasks={filteredTasks} onTaskClick={handleTaskClick} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'missions' && <MissionTimeline missions={missions} />}
|
||||
|
||||
{activeTab === 'prd' && prdContent && (
|
||||
<div className="rounded-lg border border-surface-border bg-surface-card p-6">
|
||||
<PrdViewer content={prdContent} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Task detail modal */}
|
||||
{selectedTask && <TaskDetailModal task={selectedTask} onClose={handleCloseTaskModal} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface OverviewTabProps {
|
||||
project: Project;
|
||||
missions: Mission[];
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
function OverviewTab({ project, missions, tasks }: OverviewTabProps): React.ReactElement {
|
||||
const recentTasks = [...tasks]
|
||||
.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Recent tasks */}
|
||||
<section>
|
||||
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Recent Tasks</h2>
|
||||
{recentTasks.length === 0 ? (
|
||||
<div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
|
||||
<p className="text-sm text-text-muted">No tasks yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{recentTasks.map((task) => (
|
||||
<TaskSummaryRow key={task.id} task={task} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Mission summary */}
|
||||
<section>
|
||||
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Missions</h2>
|
||||
{missions.length === 0 ? (
|
||||
<div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
|
||||
<p className="text-sm text-text-muted">No missions yet</p>
|
||||
</div>
|
||||
) : (
|
||||
<MissionTimeline missions={missions.slice(0, 4)} />
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Metadata */}
|
||||
{project.metadata && Object.keys(project.metadata).length > 0 && (
|
||||
<section className="lg:col-span-2">
|
||||
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Project Metadata</h2>
|
||||
<div className="rounded-lg border border-surface-border bg-surface-card p-4">
|
||||
<pre className="overflow-x-auto text-xs text-text-muted">
|
||||
{JSON.stringify(project.metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const taskStatusColors: Record<string, string> = {
|
||||
'not-started': 'bg-gray-600/20 text-gray-300',
|
||||
'in-progress': 'bg-blue-600/20 text-blue-400',
|
||||
blocked: 'bg-error/20 text-error',
|
||||
done: 'bg-success/20 text-success',
|
||||
cancelled: 'bg-gray-600/20 text-gray-500',
|
||||
};
|
||||
|
||||
function TaskSummaryRow({ task }: { task: Task }): React.ReactElement {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 rounded-lg border border-surface-border bg-surface-card px-3 py-2">
|
||||
<span className="truncate text-sm text-text-primary">{task.title}</span>
|
||||
<span
|
||||
className={cn(
|
||||
'shrink-0 rounded-full px-2 py-0.5 text-xs',
|
||||
taskStatusColors[task.status] ?? 'bg-gray-600/20 text-gray-400',
|
||||
)}
|
||||
>
|
||||
{task.status}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
valueClass,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
valueClass?: string;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<div className="rounded-lg border border-surface-border bg-surface-card p-3">
|
||||
<p className="text-xs text-text-muted">{label}</p>
|
||||
<p className={cn('mt-1 text-lg font-semibold', valueClass ?? 'text-text-primary')}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getPrdContent(project: Project): string | null {
|
||||
if (!project.metadata) return null;
|
||||
|
||||
const prd = project.metadata['prd'];
|
||||
if (typeof prd === 'string' && prd.trim().length > 0) return prd;
|
||||
|
||||
const prdContent = project.metadata['prdContent'];
|
||||
if (typeof prdContent === 'string' && prdContent.trim().length > 0) return prdContent;
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { api } from '@/lib/api';
|
||||
import type { Project } from '@/lib/types';
|
||||
import { ProjectCard } from '@/components/projects/project-card';
|
||||
@@ -8,6 +9,7 @@ import { ProjectCard } from '@/components/projects/project-card';
|
||||
export default function ProjectsPage(): React.ReactElement {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
api<Project[]>('/api/projects')
|
||||
@@ -16,9 +18,12 @@ export default function ProjectsPage(): React.ReactElement {
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleProjectClick = useCallback((project: Project) => {
|
||||
console.log('Project clicked:', project.id);
|
||||
}, []);
|
||||
const handleProjectClick = useCallback(
|
||||
(project: Project) => {
|
||||
router.push(`/projects/${project.id}`);
|
||||
},
|
||||
[router],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
92
apps/web/src/components/projects/mission-timeline.tsx
Normal file
92
apps/web/src/components/projects/mission-timeline.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
99
apps/web/src/components/projects/prd-viewer.tsx
Normal file
99
apps/web/src/components/projects/prd-viewer.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
interface PrdViewerProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lightweight markdown-to-HTML renderer for PRD content.
|
||||
* Supports headings, bold, italic, inline code, code blocks, and lists.
|
||||
* No external dependency — keeps bundle size minimal.
|
||||
*/
|
||||
function renderMarkdown(md: string): string {
|
||||
let html = md
|
||||
// Escape HTML entities first to prevent XSS
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
|
||||
// Code blocks (must run before inline code)
|
||||
html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_match, code: string) => {
|
||||
return `<pre class="overflow-x-auto rounded-lg bg-surface-elevated p-4 my-4"><code class="text-xs text-text-secondary whitespace-pre">${code.trim()}</code></pre>`;
|
||||
});
|
||||
|
||||
// Headings
|
||||
html = html.replace(
|
||||
/^#### (.+)$/gm,
|
||||
'<h4 class="text-sm font-semibold text-text-primary mt-4 mb-1">$1</h4>',
|
||||
);
|
||||
html = html.replace(
|
||||
/^### (.+)$/gm,
|
||||
'<h3 class="text-base font-semibold text-text-primary mt-6 mb-2">$1</h3>',
|
||||
);
|
||||
html = html.replace(
|
||||
/^## (.+)$/gm,
|
||||
'<h2 class="text-lg font-semibold text-text-primary mt-8 mb-3">$1</h2>',
|
||||
);
|
||||
html = html.replace(
|
||||
/^# (.+)$/gm,
|
||||
'<h1 class="text-xl font-bold text-text-primary mt-8 mb-4">$1</h1>',
|
||||
);
|
||||
|
||||
// Horizontal rule
|
||||
html = html.replace(/^---$/gm, '<hr class="my-6 border-surface-border" />');
|
||||
|
||||
// Unordered list items
|
||||
html = html.replace(
|
||||
/^[-*] (.+)$/gm,
|
||||
'<li class="ml-4 text-sm text-text-secondary list-disc">$1</li>',
|
||||
);
|
||||
|
||||
// Ordered list items
|
||||
html = html.replace(
|
||||
/^\d+\. (.+)$/gm,
|
||||
'<li class="ml-4 text-sm text-text-secondary list-decimal">$1</li>',
|
||||
);
|
||||
|
||||
// Bold + italic
|
||||
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
|
||||
// Bold
|
||||
html = html.replace(
|
||||
/\*\*(.+?)\*\*/g,
|
||||
'<strong class="font-semibold text-text-primary">$1</strong>',
|
||||
);
|
||||
// Italic
|
||||
html = html.replace(/\*(.+?)\*/g, '<em class="italic text-text-secondary">$1</em>');
|
||||
|
||||
// Inline code
|
||||
html = html.replace(
|
||||
/`([^`]+)`/g,
|
||||
'<code class="rounded bg-surface-elevated px-1 py-0.5 text-xs text-text-secondary">$1</code>',
|
||||
);
|
||||
|
||||
// Paragraphs — wrap lines that aren't already wrapped in a block element
|
||||
const lines = html.split('\n');
|
||||
const result: string[] = [];
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (trimmed === '') {
|
||||
result.push('');
|
||||
} else if (
|
||||
trimmed.startsWith('<h') ||
|
||||
trimmed.startsWith('<pre') ||
|
||||
trimmed.startsWith('<li') ||
|
||||
trimmed.startsWith('<hr')
|
||||
) {
|
||||
result.push(trimmed);
|
||||
} else {
|
||||
result.push(`<p class="text-sm text-text-secondary leading-relaxed my-2">${trimmed}</p>`);
|
||||
}
|
||||
}
|
||||
|
||||
return result.join('\n');
|
||||
}
|
||||
|
||||
export function PrdViewer({ content }: PrdViewerProps): React.ReactElement {
|
||||
const html = renderMarkdown(content);
|
||||
|
||||
return <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
231
apps/web/src/components/tasks/task-detail-modal.tsx
Normal file
231
apps/web/src/components/tasks/task-detail-modal.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/cn';
|
||||
import type { Task } from '@/lib/types';
|
||||
|
||||
interface TaskDetailModalProps {
|
||||
task: Task;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const priorityColors: Record<string, string> = {
|
||||
critical: 'text-error',
|
||||
high: 'text-warning',
|
||||
medium: 'text-blue-400',
|
||||
low: 'text-text-muted',
|
||||
};
|
||||
|
||||
const statusBadgeColors: Record<string, string> = {
|
||||
'not-started': 'bg-gray-600/20 text-gray-300',
|
||||
'in-progress': 'bg-blue-600/20 text-blue-400',
|
||||
blocked: 'bg-error/20 text-error',
|
||||
done: 'bg-success/20 text-success',
|
||||
cancelled: 'bg-gray-600/20 text-gray-500',
|
||||
};
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<div className="flex gap-2 py-2 text-sm">
|
||||
<span className="w-24 shrink-0 text-text-muted">{label}</span>
|
||||
<span className="text-text-primary">{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TaskDetailModal({ task, onClose }: TaskDetailModalProps): React.ReactElement {
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleKeyDown(e: KeyboardEvent): void {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [onClose]);
|
||||
|
||||
// Trap focus on mount
|
||||
useEffect(() => {
|
||||
dialogRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const prLinks = extractPrLinks(task.metadata);
|
||||
|
||||
return (
|
||||
/* backdrop */
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="task-detail-title"
|
||||
tabIndex={-1}
|
||||
className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-xl border border-surface-border bg-surface-card outline-none"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-3 border-b border-surface-border p-4">
|
||||
<h2 id="task-detail-title" className="text-base font-semibold text-text-primary">
|
||||
{task.title}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close task details"
|
||||
className="shrink-0 rounded p-1 text-text-muted hover:text-text-primary"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{/* Badges */}
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
'rounded-full px-2 py-0.5 text-xs',
|
||||
statusBadgeColors[task.status] ?? 'bg-gray-600/20 text-gray-400',
|
||||
)}
|
||||
>
|
||||
{task.status}
|
||||
</span>
|
||||
<span className={cn('text-xs', priorityColors[task.priority])}>
|
||||
{task.priority} priority
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{task.description && (
|
||||
<div className="mb-4 rounded-lg bg-surface-elevated p-3">
|
||||
<p className="text-sm text-text-secondary">{task.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Details */}
|
||||
<div className="divide-y divide-surface-border rounded-lg border border-surface-border px-3">
|
||||
{task.assignee ? <DetailRow label="Assignee">{task.assignee}</DetailRow> : null}
|
||||
{task.dueDate ? (
|
||||
<DetailRow label="Due date">
|
||||
{new Date(task.dueDate).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</DetailRow>
|
||||
) : null}
|
||||
<DetailRow label="Created">
|
||||
{new Date(task.createdAt).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</DetailRow>
|
||||
<DetailRow label="Updated">
|
||||
{new Date(task.updatedAt).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</DetailRow>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{task.tags != null && task.tags.length > 0 ? (
|
||||
<div className="mt-4">
|
||||
<p className="mb-2 text-xs text-text-muted">Tags</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{task.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="rounded-full bg-surface-elevated px-2 py-0.5 text-xs text-text-secondary"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* PR Links */}
|
||||
{prLinks.length > 0 ? (
|
||||
<div className="mt-4">
|
||||
<p className="mb-2 text-xs text-text-muted">Pull Requests</p>
|
||||
<ul className="space-y-1">
|
||||
{prLinks.map((link) => (
|
||||
<li key={link.url}>
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-400 underline hover:text-blue-300"
|
||||
>
|
||||
{link.label ?? link.url}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Notes from metadata */}
|
||||
<NotesSection notes={getNotesString(task.metadata)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PrLink {
|
||||
url: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
function extractPrLinks(metadata: Record<string, unknown> | null): PrLink[] {
|
||||
if (!metadata) return [];
|
||||
|
||||
const raw = metadata['pr_links'] ?? metadata['prLinks'];
|
||||
if (!Array.isArray(raw)) return [];
|
||||
|
||||
return raw
|
||||
.filter((item): item is PrLink => {
|
||||
if (typeof item === 'string') return true;
|
||||
if (typeof item === 'object' && item !== null && 'url' in item) return true;
|
||||
return false;
|
||||
})
|
||||
.map((item): PrLink => {
|
||||
if (typeof item === 'string') return { url: item };
|
||||
return item as PrLink;
|
||||
});
|
||||
}
|
||||
|
||||
function getNotesString(metadata: Record<string, unknown> | null): string | null {
|
||||
if (!metadata) return null;
|
||||
const notes = metadata['notes'];
|
||||
if (typeof notes === 'string' && notes.trim().length > 0) return notes;
|
||||
return null;
|
||||
}
|
||||
|
||||
function NotesSection({ notes }: { notes: string | null }): React.ReactElement | null {
|
||||
if (!notes) return null;
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<p className="mb-2 text-xs text-text-muted">Notes</p>
|
||||
<div className="rounded-lg bg-surface-elevated p-3">
|
||||
<p className="whitespace-pre-wrap text-xs text-text-secondary">{notes}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
apps/web/src/components/tasks/task-status-summary.tsx
Normal file
99
apps/web/src/components/tasks/task-status-summary.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/cn';
|
||||
import type { Task, TaskStatus } from '@/lib/types';
|
||||
|
||||
interface TaskStatusSummaryProps {
|
||||
tasks: Task[];
|
||||
activeFilter: TaskStatus | 'all';
|
||||
onFilterChange: (filter: TaskStatus | 'all') => void;
|
||||
}
|
||||
|
||||
const statusConfig: {
|
||||
id: TaskStatus | 'all';
|
||||
label: string;
|
||||
color: string;
|
||||
activeColor: string;
|
||||
}[] = [
|
||||
{
|
||||
id: 'all',
|
||||
label: 'All',
|
||||
color: 'text-text-muted',
|
||||
activeColor: 'bg-surface-elevated text-text-primary',
|
||||
},
|
||||
{
|
||||
id: 'not-started',
|
||||
label: 'Not Started',
|
||||
color: 'text-gray-400',
|
||||
activeColor: 'bg-gray-600/20 text-gray-300',
|
||||
},
|
||||
{
|
||||
id: 'in-progress',
|
||||
label: 'In Progress',
|
||||
color: 'text-blue-400',
|
||||
activeColor: 'bg-blue-600/20 text-blue-400',
|
||||
},
|
||||
{
|
||||
id: 'blocked',
|
||||
label: 'Blocked',
|
||||
color: 'text-error',
|
||||
activeColor: 'bg-error/20 text-error',
|
||||
},
|
||||
{
|
||||
id: 'done',
|
||||
label: 'Done',
|
||||
color: 'text-success',
|
||||
activeColor: 'bg-success/20 text-success',
|
||||
},
|
||||
];
|
||||
|
||||
export function TaskStatusSummary({
|
||||
tasks,
|
||||
activeFilter,
|
||||
onFilterChange,
|
||||
}: TaskStatusSummaryProps): React.ReactElement {
|
||||
const counts: Record<TaskStatus | 'all', number> = {
|
||||
all: tasks.length,
|
||||
'not-started': 0,
|
||||
'in-progress': 0,
|
||||
blocked: 0,
|
||||
done: 0,
|
||||
cancelled: 0,
|
||||
};
|
||||
|
||||
for (const task of tasks) {
|
||||
counts[task.status] = (counts[task.status] ?? 0) + 1;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{statusConfig.map((config) => {
|
||||
const count = counts[config.id];
|
||||
const isActive = activeFilter === config.id;
|
||||
return (
|
||||
<button
|
||||
key={config.id}
|
||||
type="button"
|
||||
onClick={() => onFilterChange(config.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors',
|
||||
isActive
|
||||
? cn('border-transparent', config.activeColor)
|
||||
: 'border-surface-border text-text-muted hover:border-gray-500',
|
||||
)}
|
||||
>
|
||||
<span>{config.label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
'rounded-full px-1.5 py-0.5 text-xs font-medium',
|
||||
isActive ? 'bg-black/20' : 'bg-surface-elevated',
|
||||
)}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -52,6 +52,22 @@ export interface Project {
|
||||
description: string | null;
|
||||
status: ProjectStatus;
|
||||
userId: string;
|
||||
ownerId?: string;
|
||||
metadata: Record<string, unknown> | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
/** Mission statuses. */
|
||||
export type MissionStatus = 'planning' | 'active' | 'paused' | 'completed' | 'failed';
|
||||
|
||||
/** Mission returned by the gateway API. */
|
||||
export interface Mission {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
status: MissionStatus;
|
||||
projectId: string | null;
|
||||
metadata: Record<string, unknown> | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
|
||||
Reference in New Issue
Block a user