1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import type { DirectiveSummary } from "../../lib/api";
interface DirectiveListItemProps {
directive: DirectiveSummary;
selected: boolean;
onClick: () => void;
onArchive: () => void;
}
export function DirectiveListItem({ directive, selected, onClick, onArchive }: DirectiveListItemProps) {
const progress = directive.totalSteps > 0
? Math.round((directive.completedSteps / directive.totalSteps) * 100)
: 0;
const statusColor = {
draft: "text-[#556677]",
planning: "text-yellow-400",
active: "text-green-400",
paused: "text-yellow-400",
completed: "text-[#75aafc]",
archived: "text-[#556677]",
failed: "text-red-400",
}[directive.status] || "text-[#556677]";
const confidenceColor = {
green: "bg-green-500",
yellow: "bg-yellow-500",
red: "bg-red-500",
}[directive.currentConfidence !== null && directive.currentConfidence >= 0.8
? "green"
: directive.currentConfidence !== null && directive.currentConfidence >= 0.5
? "yellow"
: "red"] || "bg-[#556677]";
return (
<div
onClick={onClick}
className={`p-3 cursor-pointer border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] ${
selected ? "bg-[rgba(117,170,252,0.1)]" : ""
}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="font-mono text-sm text-[#dbe7ff] truncate">
{directive.title || directive.goal.slice(0, 50)}
</div>
<div className="flex items-center gap-2 mt-1">
<span className={`font-mono text-[10px] uppercase ${statusColor}`}>
{directive.status}
</span>
<span className="font-mono text-[10px] text-[#556677]">
{directive.completedSteps}/{directive.totalSteps} steps
</span>
</div>
</div>
<div className="flex flex-col items-end gap-1">
{directive.currentConfidence !== null && (
<div className={`w-2 h-2 rounded-full ${confidenceColor}`} title={`Confidence: ${Math.round(directive.currentConfidence * 100)}%`} />
)}
<button
onClick={(e) => {
e.stopPropagation();
onArchive();
}}
className="font-mono text-[10px] text-[#556677] hover:text-red-400"
>
Archive
</button>
</div>
</div>
{/* Progress bar */}
{directive.totalSteps > 0 && (
<div className="mt-2 h-1 bg-[rgba(117,170,252,0.1)] overflow-hidden">
<div
className="h-full bg-[#75aafc] transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
)}
</div>
);
}
|
