import { useMemo } from "react";
import type { ContractWithRelations, ContractPhase } from "../../lib/api";
// Phase deliverables configuration (mirrors backend phase_guidance.rs)
interface RecommendedFile {
templateId: string;
name: string;
priority: "required" | "recommended" | "optional";
description: string;
}
interface PhaseDeliverables {
phase: ContractPhase;
files: RecommendedFile[];
requiresRepository: boolean;
requiresTasks: boolean;
guidance: string;
}
const PHASE_DELIVERABLES: Record<ContractPhase, PhaseDeliverables> = {
research: {
phase: "research",
files: [
{ templateId: "research-notes", name: "Research Notes", priority: "recommended", description: "Document findings and insights" },
{ templateId: "competitor-analysis", name: "Competitor Analysis", priority: "recommended", description: "Analyze competitors" },
{ templateId: "user-research", name: "User Research", priority: "optional", description: "User interviews and personas" },
],
requiresRepository: false,
requiresTasks: false,
guidance: "Gather information and document findings before moving to Specify.",
},
specify: {
phase: "specify",
files: [
{ templateId: "requirements", name: "Requirements Document", priority: "required", description: "Functional and non-functional requirements" },
{ templateId: "user-stories", name: "User Stories", priority: "recommended", description: "Features from user perspective" },
{ templateId: "acceptance-criteria", name: "Acceptance Criteria", priority: "recommended", description: "Testable conditions for completion" },
],
requiresRepository: false,
requiresTasks: false,
guidance: "Define clear requirements and acceptance criteria.",
},
plan: {
phase: "plan",
files: [
{ templateId: "architecture", name: "Architecture Document", priority: "recommended", description: "System architecture and design" },
{ templateId: "task-breakdown", name: "Task Breakdown", priority: "required", description: "Work broken into tasks" },
{ templateId: "technical-design", name: "Technical Design", priority: "optional", description: "Detailed technical specs" },
],
requiresRepository: true,
requiresTasks: false,
guidance: "Design the solution and create a task breakdown. Configure a repository.",
},
execute: {
phase: "execute",
files: [
{ templateId: "dev-notes", name: "Development Notes", priority: "recommended", description: "Implementation details" },
{ templateId: "test-plan", name: "Test Plan", priority: "optional", description: "Testing strategy" },
{ templateId: "implementation-log", name: "Implementation Log", priority: "optional", description: "Progress log" },
],
requiresRepository: true,
requiresTasks: true,
guidance: "Execute tasks and track implementation progress.",
},
review: {
phase: "review",
files: [
{ templateId: "release-notes", name: "Release Notes", priority: "required", description: "Changes for release" },
{ templateId: "review-checklist", name: "Review Checklist", priority: "recommended", description: "Code and feature review" },
{ templateId: "retrospective", name: "Retrospective", priority: "optional", description: "Project learnings" },
],
requiresRepository: false,
requiresTasks: false,
guidance: "Review work and document the release.",
},
};
interface DeliverableStatus {
templateId: string;
name: string;
priority: "required" | "recommended" | "optional";
description: string;
completed: boolean;
fileId?: string;
actualName?: string;
}
interface PhaseDeliverablesProps {
contract: ContractWithRelations;
onCreateFile?: (templateId: string, suggestedName: string) => void;
}
export function PhaseDeliverablesPanel({ contract, onCreateFile }: PhaseDeliverablesProps) {
const deliverables = PHASE_DELIVERABLES[contract.phase];
// Calculate deliverable status
const fileStatuses = useMemo((): DeliverableStatus[] => {
return deliverables.files.map((rec) => {
// Find matching file by name similarity
const matchedFile = contract.files.find((f) => {
const nameLower = f.name.toLowerCase();
const recLower = rec.name.toLowerCase();
return (
f.contractPhase === contract.phase &&
(nameLower.includes(recLower) || recLower.includes(nameLower) || nameLower.includes(rec.templateId.replace("-", " ")))
);
});
return {
...rec,
completed: !!matchedFile,
fileId: matchedFile?.id,
actualName: matchedFile?.name,
};
});
}, [contract.files, contract.phase, deliverables.files]);
// Check repository status
const hasRepository = contract.repositories.length > 0;
// Check task status
const taskStats = useMemo(() => {
const total = contract.tasks.length;
const done = contract.tasks.filter((t) => t.status === "done" || t.status === "merged").length;
const pending = contract.tasks.filter((t) => t.status === "pending").length;
const running = contract.tasks.filter((t) => ["running", "initializing", "starting"].includes(t.status)).length;
const failed = contract.tasks.filter((t) => t.status === "failed").length;
return { total, done, pending, running, failed };
}, [contract.tasks]);
// Calculate completion percentage
const completionPercent = useMemo(() => {
let completed = 0;
let total = 0;
// Count required and recommended files
fileStatuses.forEach((s) => {
if (s.priority !== "optional") {
total++;
if (s.completed) completed++;
}
});
// Count repository if required
if (deliverables.requiresRepository) {
total++;
if (hasRepository) completed++;
}
// Count tasks if in execute phase
if (deliverables.requiresTasks && taskStats.total > 0) {
total++;
if (taskStats.done === taskStats.total) completed++;
}
return total > 0 ? Math.round((completed / total) * 100) : 100;
}, [fileStatuses, hasRepository, deliverables, taskStats]);
const priorityColors = {
required: "text-red-400",
recommended: "text-yellow-400",
optional: "text-[#555]",
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="font-mono text-xs text-[#75aafc] uppercase">
Phase Deliverables
</h3>
<div className="flex items-center gap-2">
<div className="w-24 h-1.5 bg-[rgba(117,170,252,0.1)] rounded overflow-hidden">
<div
className={`h-full transition-all duration-300 ${
completionPercent === 100 ? "bg-green-400" : "bg-[#75aafc]"
}`}
style={{ width: `${completionPercent}%` }}
/>
</div>
<span className="font-mono text-[10px] text-[#555]">{completionPercent}%</span>
</div>
</div>
{/* Guidance text */}
<p className="font-mono text-xs text-[#555] italic">{deliverables.guidance}</p>
{/* File deliverables */}
<div className="space-y-2">
{fileStatuses.map((status) => (
<div
key={status.templateId}
className={`flex items-center justify-between p-2 border ${
status.completed
? "border-green-400/20 bg-green-400/5"
: "border-[rgba(117,170,252,0.15)]"
}`}
>
<div className="flex items-center gap-2">
<span
className={`font-mono text-xs ${
status.completed ? "text-green-400" : "text-[#555]"
}`}
>
{status.completed ? "[+]" : "[ ]"}
</span>
<div>
<div className="flex items-center gap-2">
<span className="font-mono text-xs text-[#dbe7ff]">
{status.completed ? status.actualName : status.name}
</span>
{!status.completed && (
<span className={`font-mono text-[9px] uppercase ${priorityColors[status.priority]}`}>
{status.priority}
</span>
)}
</div>
<span className="font-mono text-[10px] text-[#555]">
{status.description}
</span>
</div>
</div>
{!status.completed && onCreateFile && (
<button
onClick={() => onCreateFile(status.templateId, status.name)}
className="px-2 py-1 font-mono text-[10px] text-[#75aafc] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
>
Create
</button>
)}
</div>
))}
</div>
{/* Repository status */}
{deliverables.requiresRepository && (
<div
className={`flex items-center gap-2 p-2 border ${
hasRepository
? "border-green-400/20 bg-green-400/5"
: "border-[rgba(117,170,252,0.15)]"
}`}
>
<span
className={`font-mono text-xs ${
hasRepository ? "text-green-400" : "text-[#555]"
}`}
>
{hasRepository ? "[+]" : "[ ]"}
</span>
<div>
<span className="font-mono text-xs text-[#dbe7ff]">
Repository Configured
</span>
{!hasRepository && (
<span className="font-mono text-[9px] uppercase text-red-400 ml-2">
required
</span>
)}
</div>
</div>
)}
{/* Task status (execute phase) */}
{deliverables.requiresTasks && (
<div
className={`flex items-center justify-between p-2 border ${
taskStats.total > 0 && taskStats.done === taskStats.total
? "border-green-400/20 bg-green-400/5"
: "border-[rgba(117,170,252,0.15)]"
}`}
>
<div className="flex items-center gap-2">
<span
className={`font-mono text-xs ${
taskStats.total > 0 && taskStats.done === taskStats.total
? "text-green-400"
: "text-[#555]"
}`}
>
{taskStats.total > 0 && taskStats.done === taskStats.total ? "[+]" : "[ ]"}
</span>
<span className="font-mono text-xs text-[#dbe7ff]">
Tasks Completed
</span>
</div>
{taskStats.total > 0 ? (
<span className="font-mono text-[10px] text-[#9bc3ff]">
{taskStats.done}/{taskStats.total}
{taskStats.running > 0 && ` (${taskStats.running} running)`}
{taskStats.failed > 0 && (
<span className="text-red-400"> ({taskStats.failed} failed)</span>
)}
</span>
) : (
<span className="font-mono text-[10px] text-[#555]">No tasks yet</span>
)}
</div>
)}
</div>
);
}
